@extends('user.layouts.app')
@section('page_title')
    {{(!empty($page_title) && isset($page_title)) ? $page_title : ''}}
@endsection
@push('head-scripts')
    <link href="{{ asset('manager/datatable/datatables.min.css') }}" rel="stylesheet"/>
@endpush
@section('content')
    @include('user.applicants.inc.topMenu')
    <div class="card my-3">
        <div class="card-body pb-5">
            {{-- Datatatble : Start --}}
            @if(!isset($submission))
                <div class="row">
                    <div class="alert alert-warning alert-dismissible fade show mb-3" role="alert">
                        <strong>Profile!</strong> complete your profile.
                        <button type="button" class="btn-close" data-coreui-dismiss="alert" aria-label="Close"></button>
                    </div>
                </div>
            @endif
            <div class="row mt-2">
                <h3>Notifications</h3>
                <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>Type</th>
                            <th>Subject</th>
                            <th>Actions</th>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
            {{-- Datatatble : End --}}
            {{-- Datatatble : Start --}}
            <div class="row mt-5">
                <h3>Interview Schedule</h3>
                <div class="col-12">
                    <div class="table-responsive">
                        <table id="indexTable2"
                               class="table table-bordered table-striped table-hover table-responsive w-100 pt-1">
                            <thead class="table-dark">
                            <th>#</th>
                            <th>Application</th>
                            <th>Interview Date</th>
                            <th>Detail</th>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
            {{-- Datatatble : End --}}
        </div>
    </div>
    {{-- Delete Confirmation Model : Start --}}
    <div class="del-model-wrapper">
        <div class="modal fade" id="del-model" tabindex="-1" aria-labelledby="del-model" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-dark py-2 text-white">
                        Interview Detail
                        <button type="button" class="btn-close shadow-none" data-coreui-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div id="detail"></div>
                    </div>
                    <div class="modal-footer py-1">
                        <button type="button" class="btn btn-danger btn-sm text-white" data-coreui-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- Delete Confirmation Model : End --}}
@endsection
@push('footer-scripts')
    <script type="text/javascript" src="{{ asset('manager/datatable/datatables.min.js')}}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //Datatable
            $('#indextable').DataTable({
                destroy: true,
                processing: true,
                serverSide: true,
                order: [[0, "desc"]],
                ajax: {
                    "type": "GET",
                    "url": "{{route('user.get.notification')}}",
                },
                columns: [
                    {data: 'id'},
                    {data: 'type',orderable: false,searchable: false},
                    {data: 'subject',orderable: false,searchable: false},
                    {data: null},
                ],
                columnDefs: [
                    {
                        targets: 0,
                        orderable: false,
                        searchable: false,
                        width: '100px',
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        targets: 2,
                        width: '60%'
                    },
                    {
                        targets: -1,
                        searchable: false,
                        orderable: false,
                        render: function (data, type, row, meta) {
                            let URL = "{{ route('user.notification.detail', ':id') }}";
                            URL = URL.replace(':id', row.id);
                            return '<div class="d-flex">' +
                                '<a class="me-1" href="' + URL + '"><span class="badge bg-dark text-white">Detail</span>' +
                                '</div>'
                        }
                    }
                ]
            });
            //Datatable
            $('#indexTable2').DataTable({
                destroy: true,
                processing: true,
                serverSide: true,
                order: [[0, "desc"]],
                ajax: {
                    "type": "GET",
                    "url": "{{route('user.get.interview')}}",
                },
                columns: [
                    {data: 'id'},
                    {data: 'app_no',orderable: false,searchable: false},
                    {data: 'date',orderable: false,searchable: false},
                    {data: null},
                ],
                columnDefs: [
                    {
                        targets: 0,
                        orderable: false,
                        searchable: false,
                        width: '100px',
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        targets: 2,
                        width: '50%'
                    },
                    {
                        targets: -1,
                        searchable: false,
                        orderable: false,
                        render: function (data, type, row, meta) {
                            return '<div class="d-flex">' +
                                '<a class="me-1" href="javascript:void(0)"><span type="button" class="badge bg-dark" data-detail="' + row.detail + '" data-coreui-toggle="modal" data-coreui-target="#del-model">Detail</span></a>' +
                                '</div>'
                        }
                    }
                ]
            });
        });

        $("#del-model").on('show.coreui.modal', function (event) {
            var triggerLink = $(event.relatedTarget);
            var detail = triggerLink.data("detail");
            $("#detail").html(detail);
        })
    </script>

    {{-- Toastr : Script : Start --}}
    @if(Session::has('messages'))
        <script>
            noti({!! json_encode((Session::get('messages'))) !!});
        </script>
    @endif
    {{-- Toastr : Script : End --}}
@endpush