@extends('master')
@section('content')



    <section>
        <div class="post d-flex flex-column-fluid" id="kt_post">
            <!--begin::Container-->
            <div id="kt_content_container" class="container-fluid">
                <!--begin::Card-->
                <div class="card">
                    <div class="card-header border-0 pt-5 p-0">
                        <div class="container-fluid"><span id="general_result"></span></div>
                        <div class="container-fluid mt-3 text-end">
                            <button type="button" class="btn btn-sm btn-primary" name="create_record" id="create_record"><i
                                    class="fa fa-plus"></i> {{__('Add Interview')}}</button>
                        </div>


                    </div>
                    <div class="card-body py-4">
                        <div class="table-responsive hr-bg">
                            <table id="job_interview-table" class="table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4">
                                <thead>
                                    <tr class="text-start text-muted text-uppercase fw-bolder fs-7 gs-0">
                                        <th>{{__('Job Title')}}</th>
                                        <th>{{__('Interview Place')}}</th>
                                        <th>{{__('Interview Date & Time')}}</th>
                                        <th>{{__('Added By')}}</th>
                                        <th class="not-exported">{{trans('Action')}}</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <!--begin::Modal - Add Interview-->
    <div class="modal fade" id="formModal" data-keyboard="false" data-bs-backdrop="static">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <!--begin::Modal content-->
            <div class="modal-content">
                <!--begin::Form-->
                <form class="form" action="javascript:void(0)" id="sample_form" enctype="multipart/form-data">
                    @csrf
                    <!--begin::Modal header-->
                    <div class="modal-header" id="kt_modal_new_address_header">
                        <!--begin::Modal title-->
                        <h2 id="modalTitle">{{ __('Add Interview') }}</h2>
                        <!--end::Modal title-->
                        <!--begin::Close-->
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                            <span class="svg-icon svg-icon-1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="black" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)"
                                        fill="black" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </div>
                        <!--end::Close-->
                    </div>
                    <!--end::Modal header-->

                    <!--begin::Modal body-->
                    <div class="modal-body py-10 px-lg-17">
                        <span id="form_result"></span>
                        <span id="store_logo"></span>

                        <div class="row mb-5">
                            <div class="col-md-6 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{__('Job Title')}}</label>
                                <select name="job_id" id="job_id" class="form-select form-select-solid candidate" data-dropdown-parent="#sample_form" data-control="select2"
                                    data-placeholder="{{__('Select',['key'=>__('Job Title')])}}">
                                    <option value=""></option>
                                    @foreach($jobs as $job)
                                        <option value="{{$job->id}}">{{$job->job_title}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{trans('Candidates')}}</label>
                                <select name="candidate_id[]" id="candidate_id" class="form-select form-select-solid" data-control="select2"
                                    data-placeholder="{{__('Select',['key'=>trans('Candidates')])}}" multiple>
                                    <option value=""></option>
                                </select>
                            </div>

                            <div class="col-md-6 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{__('Interview Place')}}</label>
                                <input type="text" class="form-control form-control-solid" name="interview_place" id="interview_place"
                                    placeholder="{{__('Interview Place')}}" />
                            </div>

                            <div class="col-md-6 fv-row mb-5">
                            <label class="required fs-5 fw-bold mb-2">{{__('Interview Date')}}</label>
                            <input type="text" name="interview_date" id="interview_date" class="form-control form-control-solid flatpickr-date"
                                   autocomplete="off" value="{{ date('m/Y') }}" placeholder="{{__('Interview Date')}}">
                            </div>

                            <div class="col-md-6 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{__('Interview Time')}}</label>
                                <input type="text" class="form-control form-control-solid time" name="interview_time" id="timePicker"
                                    placeholder="{{__('Interview Time')}}" />
                            </div>



                            <div class="col-md-6 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{trans('Interviewers')}}</label>
                                <select name="employee_id[]" id="employee_id" class="form-select form-select-solid" data-control="select2"
                                    data-placeholder="{{__('Select',['key'=>trans('Interviewers')])}}" multiple>

                                    @foreach($employees as $employee)
                                        <option value="{{$employee->id}}">{{$employee->full_name}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-12 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-2">{{trans('Description')}}</label>
                                <textarea class="form-control form-control-solid" id="description" name="description" rows="3"></textarea>
                            </div>
                        </div>
                    </div>
                    <!--end::Modal body-->

                    <!--begin::Modal footer-->
                    <div class="modal-footer flex-center">
                        <!--begin::Button-->
                        <button type="submit" id="action_button" class="btn btn-primary">
                            <span class="indicator-label">{{trans('Submit')}}</span>
                        </button>
                        <!--end::Button-->
                    </div>
                    <!--end::Modal footer-->
                </form>
                <!--end::Form-->
            </div>
        </div>
    </div>
    <!--end::Modal - Add Interview-->


    <!--begin::Modal - Interview Info-->
    <div class="modal fade" id="interview_model" data-keyboard="false" data-bs-backdrop="static">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <!--begin::Modal content-->
            <div class="modal-content">
                <!--begin::Modal header-->
                <div class="modal-header">
                    <!--begin::Modal title-->
                    <h2 id="myModalLabel">{{__('Interview Info')}}</h2>
                    <!--end::Modal title-->
                    <!--begin::Close-->
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                        <span class="svg-icon svg-icon-1">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black" />
                                <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black" />
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                    </div>
                    <!--end::Close-->
                </div>
                <!--end::Modal header-->

                <!--begin::Modal body-->
                <div class="modal-body py-10 px-lg-17">
                    <div class="row mb-5">
                        <div class="table-responsive">
                            <table class="table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4">
                                <tr>
                                    <th class="min-w-150px">{{__('Job Description')}}</th>
                                    <td id="show_job_description"></td>
                                </tr>

                                <tr>
                                    <th class="min-w-150px">{{__('Interview Place')}}</th>
                                    <td id="show_interview_place"></td>
                                </tr>

                                <tr>
                                    <th class="min-w-150px">{{__('Interview Date')}}</th>
                                    <td id="show_interview_date"></td>
                                </tr>

                                <tr>
                                    <th class="min-w-150px">{{__('Interview Time')}}</th>
                                    <td id="show_interview_time"></td>
                                </tr>

                                <tr>
                                    <th class="min-w-150px">{{__('Selected Candidates')}}</th>
                                    <td id="show_candidates"></td>
                                </tr>

                                <tr>
                                    <th class="min-w-150px">{{trans('Interviewers')}}</th>
                                    <td id="show_interviewers"></td>
                                </tr>

                                <tr>
                                    <th class="min-w-150px">{{trans('Description')}}</th>
                                    <td id="show_description"></td>
                                </tr>

                                <tr>
                                    <th class="min-w-150px">{{__('Added By')}}</th>
                                    <td id="show_added_by"></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <!--end::Modal body-->

                <!--begin::Modal footer-->
                <div class="modal-footer flex-center">
                    <!--begin::Button-->
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">{{trans('Close')}}</button>
                    <!--end::Button-->
                </div>
                <!--end::Modal footer-->
            </div>
            <!--end::Modal content-->
        </div>
        <!--end::Modal dialog-->
    </div>
    <!--end::Modal - Interview Info-->


    <div id="confirmModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title">{{trans('Confirmation')}}</h2>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <h4 align="center">{{__('Are you sure you want to remove this data?')}}</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" name="ok_button" id="ok_button" class="btn btn-danger">{{trans('OK')}}'
                    </button>
                    <button type="button" class="close btn-default"
                            data-dismiss="modal">{{trans('Cancel')}}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page_script')
<script nonce="{{ $cspNonce }}">
(function($) {
    "use strict";
    $(document).ready(function() {

          // Initialize flatpickr for date inputs
          flatpickr(".flatpickr-date", {
                dateFormat: "Y-m-d"

            });

        flatpickr("#timePicker", {
        enableTime: true,       // Enable time selection
        noCalendar: true,       // Disable calendar
        dateFormat: "H:i",      // Set time format (24-hour clock)
        time_12hr: true         // Use 24-hour clock format
        });


        let table_table = $('#job_interview-table').DataTable({
            initComplete: function() {
                this.api().columns([1]).every(function() {
                    let column = this;
                    let select = $('<select><option value=""></option></select>')
                        .appendTo($(column.footer()).empty())
                        .on('change', function() {
                            let val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search(val ? '^' + val + '$' : '', true, false)
                                .draw();
                        });
                });
            },
            responsive: true,
            fixedHeader: {
                header: true,
                footer: true
            },
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('job_interviews.index') }}",
            },

            columns: [
                {
                    data: 'job_description',
                    name: 'job_description',
                },
                {
                    data: 'interview_place',
                    name: 'interview_place',
                },
                {
                    data: 'interview_date',
                    name: 'interview_date',
                },
                {
                    data: 'added_by',
                    name: 'added_by',
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false
                }
            ],

            "order": [],
            'language': {
                'lengthMenu': '_MENU_ {{__("records per page")}}',
                "info": '{{trans("Showing")}} _START_ - _END_ (_TOTAL_)',
                "search": '{{trans("Search")}}',
                'paginate': {
                    'previous': '{{trans("Previous")}}',
                    'next': '{{trans("Next")}}'
                }
            },
            'columnDefs': [
                {
                    "orderable": false,
                    'targets': [4],
                }
            ],

            'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, "All"]],
            dom: '<"row"lfB>rtip',
            buttons: [
                {
                    extend: 'pdfHtml5',
                    text: '<i title="export to pdf" class="fa fa-file-pdf"></i>',
                    exportOptions: {
                        columns: ':visible:Not(.not-exported)',
                        rows: ':visible'
                    },
                },
                {
                    extend: 'csv',
                    text: '<i title="export to csv" class="fa fa-file-csv"></i>',
                    exportOptions: {
                        columns: ':visible:Not(.not-exported)',
                        rows: ':visible'
                    },
                },
                {
                    extend: 'print',
                    text: '<i title="print" class="fa fa-print"></i>',
                    exportOptions: {
                        columns: ':visible:Not(.not-exported)',
                        rows: ':visible'
                    },
                }
            ],
        });
        new $.fn.dataTable.FixedHeader(table_table);
    });

    $('#create_record').on('click', function() {
        $('.modal-title').text('{{__('Add interview')}}');
        $('#action_button').val('{{trans("file.Add")}}');
        $('#action').val('{{trans("file.Add")}}');
        $('#formModal').modal('show');
        $('#sample_form')[0].reset();
        $("#job_id").val(null).trigger('change');
        $("#candidate_id").val(null).trigger('change');
        $("#employee_id").val(null).trigger('change');
    });



    $('#sample_form').on('submit', function(event) {
        event.preventDefault();

        $.ajax({
            url: "{{ route('job_interviews.store') }}",
            method: "POST",
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            dataType: "json",
            success: function(data) {
                let html = '';
                if (data.errors) {
                    html = '<div class="alert alert-danger">';
                    for (let count = 0; count < data.errors.length; count++) {
                        html += '<p>' + data.errors[count] + '</p>';
                    }
                    html += '</div>';
                }
                if (data.error) {
                    html = '<div class="alert alert-danger">' + data.error + '</div>';
                }
                if (data.success) {

                toastr.success(data.success, "Success!");
                setTimeout(function () {
                formReset();
                $('#sample_form')[0].reset();
                $('#job_interview-table').DataTable().ajax.reload();
                $("#formModal").modal('hide');

                }, 1000);

                }
                $('#form_result').html(html).slideDown(300).delay(5000).slideUp(300);
            }
        });
    });

    $(document).on('click', '.details', function() {
        let id = $(this).attr('id');
        $('#form_result').html('');
        let target = '{{route('job_interviews.index')}}/' + id;

        $.ajax({
            url: target,
            dataType: "json",
            success: function(result) {
                function htmlDecode(input){
                    var e = document.createElement('div');
                    e.innerHTML = input;
                    return e.childNodes.length == 0 ? "" : e.childNodes[0].nodeValue;
                }
                $('#show_job_description').html(result.data.job_title)
                $('#show_interview_place').html(result.data.interview_place);
                $('#show_interview_date').html(result.data.interview_date);
                $('#show_interview_time').html(result.data.interview_time);

                let candidatesArr = result.data.candidates.join(', ');
                let interviewersArr = result.data.interviewers.join(', ');

                $('#show_candidates').html(candidatesArr);
                $('#show_interviewers').html(interviewersArr);
                $('#show_description').html(htmlDecode(result.data.description));
                $('#show_added_by').html(result.data.added_by);

                $('#interview_model').modal('show');
                $('.modal-title').text("{{__('Meeting Info')}}");
            }
        });
    });

    let delete_id;

    $(document).on('click', '.delete', function() {
        delete_id = $(this).attr('id');
        $('#confirmModal').modal('show');
        $('.modal-title').text('{{__('DELETE Record')}}');
        $('#ok_button').text('{{trans('file.OK')}}');
    });

    $('.close').on('click', function() {
        $('#sample_form')[0].reset();
        $('select').selectpicker('refresh');
        $('#job_interview-table').DataTable().ajax.reload();
    });

    $('#ok_button').on('click', function() {
        let target = "{{ route('job_interviews.index') }}/" + delete_id + '/delete';
        $.ajax({
            url: target,
            beforeSend: function() {
                $('#ok_button').text('{{trans('file.Deleting...')}}');
            },
            success: function(data) {
                let html = '';
                if (data.success) {
                    html = '<div class="alert alert-success">' + data.success + '</div>';
                }
                if (data.error) {
                    html = '<div class="alert alert-danger">' + data.error + '</div>';
                }
                setTimeout(function() {
                    $('#general_result').html(html).slideDown(300).delay(5000).slideUp(300);
                    $('#confirmModal').modal('hide');
                    $('#job_interview-table').DataTable().ajax.reload();
                }, 2000);
            }
        })
    });

    $('.candidate').change(function() {
        if ($(this).val() !== '') {
            let value = $(this).val();
            let _token = $('input[name="_token"]').val();
            $.ajax({
                url: "{{ route('dynamic_candidate') }}",
                method: "POST",
                data: {value: value, _token: _token},
                success: function(result) {
                    $('#candidate_id').html(result);
                }
            });
        }
    });

})(jQuery);
</script>
@endsection