@extends('manager.layouts.app')
@section('page_title')
    {{(!empty($page_title) && isset($page_title)) ? $page_title : ''}}
@endsection
@push('head-scripts')
    <link href="{{ asset('user/select2/dist/css/select2.min.css') }}" rel="stylesheet"/>
    <link href="{{ asset('user/select2/dist/css/select2-bootstrap5.min.css') }}" rel="stylesheet"/>
    <link href="{{ asset('user/datatable/datatables.min.css') }}" rel="stylesheet"/>
@endpush
@section('content')
    <div class="card mt-3">
        <div class="card-body">
            <div class="row p-2 more-menu">
                <div class="col-md-12">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title mb-0">{{(!empty($p_title) && isset($p_title)) ? $p_title : ''}}</h4>
                            <div
                                class="small text-medium-emphasis">{{(!empty($p_summary) && isset($p_summary)) ? $p_summary : ''}}</div>
                        </div>
                    </div>
                    <hr>
                    {{-- Datatatble : Start --}}
                    <div class="row">
                        <div class="col-12 mb-4">
                            <fieldset class="reset-this redo-fieldset">
                                <legend class="reset-this redo-legend">Filters</legend>
                                <form action="{{ route('manager.interview-list')}}" method="GET">
                                    <div class="row gy-2 gx-3 align-items-center">
                                        <div class="col-lg-3 col-12 mb-3">
                                            <label>Applicant</label>
                                            <select class="form-select form-control select2-applicant"
                                                    name="applicant_id"></select>
                                            <input type="hidden" value="{{request()->applicant_id}}" id="applicant_id">
                                        </div>

                                        <div class="col-12 ">
                                            <div class="float-end mt-2">
                                                <button type="submit" class="btn btn-sm btn-primary px-3">
                                                    Apply Filter
                                                </button>
                                                <a href="{{route('manager.interview-list')}}"
                                                   class="btn btn-sm btn-dark text-white px-3">
                                                    Reset
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </fieldset>
                        </div>
                        <div class="col-12">
                            <div class="table-responsive">
                                <table id="indextable"
                                       class="table table-bordered table-striped table-hover table-responsive w-100 pt-1">
                                    <thead class="table-dark">
                                    <th>#</th>
                                    <th>Applicant</th>
                                    <th>Application</th>
                                    <th>Interview Date</th>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                    {{-- Datatatble : End --}}
                </div>
            </div>
            {{-- Page Description : Start --}}
            @if(!empty($p_description) && isset($p_description))
                <div class="card-footer">
                    <div class="row">
                        <div class="col-12 mb-sm-2 mb-0">
                            <p>{{(!empty($p_description) && isset($p_description)) ? $p_description : ''}}</p>
                        </div>
                    </div>
                </div>
            @endif
            {{-- Page Description : End --}}
            {{-- End: Page Content --}}
        </div>
    </div>
@endsection
@push('footer-scripts')
    <script src="{{ asset('user/select2/dist/js/select2.js') }}"></script>
    <script type="text/javascript" src="{{ asset('user/datatable/datatables.min.js')}}"></script>
    <script type="text/javascript">
        $(function () {
            $('.top-interview').addClass('active');
        });
        $(document).ready(function () {
            //Select Job Catalogue
            @if (!empty($applicant))
            let applicant = [{
                id: "{{$applicant->id}}",
                text: "{{$applicant->name}} ({{$applicant->cnic}})",
            }];
            $('.select2-applicant').select2({
                data: applicant,
                theme: "bootstrap5",
                placeholder: 'Select Applicant',
            });
            @endif
            //Select Applicant
            $('.select2-applicant').select2({
                theme: "bootstrap5",
                placeholder: 'Select Applicant',
                ajax: {
                    url: '{{route('manager.get.applicants-select')}}',
                    dataType: 'json',
                    delay: 250,
                    type: 'GET',
                    data: function (params) {
                        var query = {
                            q: params.term,
                            type: 'public',
                            _token: '{{csrf_token()}}'
                        }
                        return query;
                    },
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    id: item.id,
                                    text: item.name + ' (' + item.cnic + ')'
                                }
                            })
                        };
                    },
                    cache: true
                }
            }).trigger('change.select2');

            //Datatable
            var applicant_id = $('#applicant_id').val();
            let URL = "{{ route('manager.get.interview-list') }}";
            $('#indextable').DataTable({
                destroy: true,
                processing: true,
                serverSide: true,
                dom: '',
                order: [[0, "desc"]],
                ajax: {
                    "type": "GET",
                    "url": URL,
                    "data": function (d) {
                        d.applicant_id = applicant_id;
                    }
                },
                columns: [
                    {data: 'id'},
                    {data: null},
                    {data: 'app_no', orderable: false},
                    {data: 'date', orderable: false},
                ],
                columnDefs: [
                    {
                        targets: 0,
                        orderable: false,
                        searchable: false,
                        width: '100px',
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    }, {
                        targets: 1,
                        width: '25%'
                    }, {
                        render: function (data, type, row, meta) {
                            let URL = "{{ route('manager.applicants.show', ':id') }}";
                            URL = URL.replace(':id', row.applicant_id);

                            return ' <a " href="' + URL + '" class="nav-link" >' + row.name + '</a><a " href="' + URL + '" class="nav-link" >' + '(' + row.cnic + ')' + '</a><a " href="' + URL + '" class="b-more bg-dark text-decoration-none text-white" >' + '<i class="cil-chevron-double-right py-0 more-icon"></i> More</a>';
                        },
                        searchable: false,
                        orderable: false,
                        targets: 1
                    }, {
                        render: function (data, type, row, meta) {
                            let URL = "{{ route('manager.applications.show', ':id') }}";
                            URL = URL.replace(':id', row.application_id);
                            let res = '';
                            if(row.app_no !== null){
                                res += ' <a " href="' + URL + '" class="nav-link" >' + row.app_no + '</a><a " href="' + URL + '" class="b-more bg-dark text-decoration-none text-white" >' + '<i class="cil-chevron-double-right py-0 more-icon"></i> More</a>';
                            }else{
                                res += '';
                            }
                            return res
                        },
                        searchable: false,
                        orderable: false,
                        targets: 2
                    }
                ]
            });
        });
    </script>
@endpush