@extends('layouts.admin')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
@endsection
@section('main-content')

    <div class="breadcrumb">
        <h1>Teams</h1>
        <ul>
            <li><a href="{{route('dashboard')}}">Home</a></li>
            <li>Lists</li>
        </ul>
    </div>
    <div class="separator-breadcrumb border-top"></div>


    <section class="department-list">
        <div class="row">
            <div class="col-md-12 mb-4">
                <div class="card text-left">
                    <!-- begin::modal -->
                    <div class="ul-card-list__modal">
                        <div class="modal fade add_teams_members" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-md">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Manage Team Members</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <form method="post" name="frmTeams" id="frmTeams" action="" novalidate class="needs-validation">
                                            @csrf
                                            <input type="hidden" name='action' value='create'>
                                            <div class="form-group row">
                                                <label for="name" class="col-sm-3 col-form-label">Team Name</label>
                                                <div class="col-sm-9" ><label class=" col-form-label" id="selectedTeamName"></label></div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="inputEmail3" class="col-sm-3 col-form-label">Choose Team Manager <span class="text-danger">*</span></label>
                                                <div class="col-sm-9">
                                                    <select class="form-control" id="manager" name="manager" required>
                                                        <option value="">--Select --</option>
                                                        @foreach($users as $user)
                                                            <option value="{{ $user->id }}">{{ $user->name }}</option>
                                                        @endforeach
                                                    </select>
                                                    <div class="invalid-feedback">this field value is required</div>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="inputEmail3" class="col-sm-3 col-form-label">Select Team Members <span class="text-danger">*</span></label>
                                                <div class="col-sm-9">
                                                    <select class="form-control" id="users_id" name="users_id[]" multiple size="10" required>
                                                        @foreach($users as $user)
                                                            <option value="{{ $user->id }}">{{ $user->name }}</option>
                                                        @endforeach
                                                    </select>
                                                    <div class="invalid-feedback">select at-least one staff</div>
                                                </div>
                                            </div>
                                            <input type="hidden" name="company_id" value="{{$company_id}}">
                                            <input type="hidden" name="teamId" id="teamId" value="">
                                            <input type="hidden" name="department_id" id="department_id" value="">
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                <button type="submit" class="btn btn-primary" >Save</button>
                                            </div>

                                        </form>
                                    </div>

                                </div>
                            </div>
                        </div>


                    </div>

                    <div class="ul-card-list__modal">
                        <div class="modal fade edit_team_name" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-md">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Edit Team Name</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <form method="post" name="frmEditTeams" id="frmEditTeams" action="" novalidate class="needs-validation">
                                            @csrf
                                            @method('PUT')
                                            <input type="hidden" name='action' id="action_field_team" value='create'>
                                            <div class="form-group row">
                                                <label for="name" class="col-sm-3 col-form-label">Team Name</label>
                                                <div class="col-sm-9" ><input type="text" class="form-control" name="team" id="editTeamName" value=""><div class="invalid-feedback">this field value is required</div></div>
                                            </div>


                                            <input type="hidden" name="company_id" value="{{$company_id}}">
                                            <input type="hidden" name="teamId" id="editTeamId" value="">
                                            <input type="hidden" name="department_id" id="editDeptId" value="">
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                <button type="submit" class="btn btn-primary" >Save</button>
                                            </div>

                                        </form>
                                    </div>

                                </div>
                            </div>
                        </div>


                    </div>
                    <!-- end::modal -->


                    <div class="card-body">

                        <div class="table-responsive">
                            <table id="ul-team-list" class="display table table-striped table-bordered dataTable" style="width:100%">
                                <thead>
                                <tr>
                                    <th>Teams</th>
                                    <th>Department</th>
                                    <th>Manager</th>
                                    <th>Created</th>
                                    <th>Action</th>
                                </tr>
                                </thead>


                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- end of row -->

@endsection

@section('bottom-js')
    <script src="{{ asset('assets/js/vendor/datatables.min.js') }}"></script>
    <!-- page script -->

    <script>
        var table = $('#ul-team-list').DataTable({
            processing: true,
            serverSide: true,
            dom: 'f<"top"i>rt<"bottom"lp><"clear">',
            pagingType: "full_numbers",
            scrollY: '50vh',
            scrollCollapse: true,
            /*select: {
                style:    'os',
                selector: 'td:first-child'
            },*/
            ajax: "{{route('admin.teams.list')}}",
            "columnDefs": [ {
                "targets": 'no-sort',
                "orderable": false,
            }],
            fnDrawCallback: function( oSettings ) {
                $('.add_members').on('click', function(){
                    var teamName = $(this).data('name');
                    var teamId = $(this).data('team')
                    var department_id = $(this).data('dept');
                    var members = $(this).data('users')
                    var manager = $(this).data('manager')
                    $('#selectedTeamName').html(teamName);
                    $('#teamId').val(teamId);
                    $('#department_id').val(department_id);
                    $('#manager').val(manager);
                    var arrMembers = (members!='')?String(members).split(','):[]; console.log(arrMembers)
                    if(arrMembers.length > 0){
                        $('#users_id').val(arrMembers);
                    }

                    var url = '{{ route('admin.teams.members',':id') }}';
                    url = url.replace(':id', teamId);   //console.log(url)
                    $('#frmTeams').attr('action', url)
                    $('.add_teams_members').modal('show').on('shown.bs.modal', function (e) {
                        $('#action-field').val('create');
                        $('#exampleModalLabel').text('Add Teams Members');
                    }).on('hidden.bs.modal', function(){
                        //remove the backdrop
                        $('.modal-backdrop').remove();
                    });
                });

                $('.edit_team_name_modal').on('click', function(){
                    var teamName = $(this).data('name')
                    var teamId = $(this).data('team')
                    var deptId = $(this).data('dept')
                    $('.edit_team_name').on('shown.bs.modal', function (e) {
                        $("#editTeamName").val(teamName)
                        $("#editTeamId").val(teamId)
                        $("#editDeptId").val(deptId)
                        var url = '{{ route('admin.teams.update',":id") }}';
                        url = url.replace(':id', teamId);
                        $('#frmEditTeams').attr('action', url)
                        $('#action_field_team').val('update');
                    });
                });

                /*$('.edit_team_name_modal, .add_members').on('hidden.bs.modal', function () {
                    $(this).find('form').trigger('reset');
                });*/
            }
        });

    </script>
    <script src="{{asset('assets/js/form.validation.script.js')}}"></script>
@endsection