@extends('u.layouts.app')
@section('page_title')
    {{(!empty($page_title) && isset($page_title)) ? $page_title : ''}}
@endsection
@push('head-scripts')
@endpush
@section('content')
<div class="tap-top">
    <svg class="feather">
        <use href="{{asset('u/svg/feather-icons/dist/feather-sprite.svg#arrow-up')}}"></use>
    </svg>
</div>
<main class="page-wrapper compact-wrapper" id="pageWrapper">
        @include('u.applicant.inc.topMenu')
    <div class="page-body-wrapper">
        <div class="page-body">
        <div class="overlay"></div>
        <div class="page-body">
            <div class="container-fluid">
                <div class="row page-title">
                    <div class="col-sm-6">
                        <h3>User Profile</h3>
                    </div>
                </div>
            </div>
            <div class="container-fluid user-profile">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="card hovercard text-center">
                            <div class="cardheader"></div>
                            <div class="user-image">
                                <div class="avatar">
                                    @if(!empty(auth()->user()->image))
                                    <img alt="user@email.com" src="{{route('u.profile.image',auth()->user()->id)}}">
                                    @else
                                        <img alt="user@email.com" src="{{asset('u/images/profile.png')}}">
                                    @endif
                                </div>
{{--                                <div class="icon-wrapper"><i class="icofont icofont-pencil-alt-5"></i></div>--}}
                            </div>
                            <div class="info">
                                <div class="row">
                                    <div class="col-sm-6 col-lg-4 order-sm-1 order-xl-0">
                                        <div class="row">

                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-lg-4 order-sm-0 order-xl-1">
                                        <div class="user-designation">
                                            <div class="title"><a target="_blank" href="">{{Auth::user()->name}}</a></div>
                                            <div class="desc">
                                                @if(isset($applicant))
                                                    <p>
                                                        {{$applicant->cnic}}
                                                    </p>
                                                @endif</div>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div class="social-media">
                                    <ul class="list-inline">
                                        <li class="list-inline-item"><a href="https://www.facebook.com/UCSFaisalabad" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
                                        <li class="list-inline-item"><a href="https://ucsf.edu.pk/" target="_blank"><i class="fa-brands fa-google"></i></a></li>
                                        <li class="list-inline-item"><a href="https://www.youtube.com/channel/UCkG7XaawsIhQsxYKA1QYIqg" target="_blank"><i class="fa-brands fa-youtube"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--Notifications Datatable start-->
        <div class="page-body">
            <!-- Container-fluid starts-->
            <div class="container-fluid">
                <div class="row">
                    <!-- Zero Configuration  Starts-->
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-header pb-0 card-no-border">
                                <h4>Notifications</h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="display" id="indextable">
                                        <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Type</th>
                                            <th>Subject</th>
                                            <th>Actions</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Notifications Datatable Ends-->

            <!-- Interviews Datatable start-->
            <!-- Container-fluid starts-->
            <div class="container-fluid">
                <div class="row">
                    <!-- Zero Configuration  Starts-->
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-header pb-0 card-no-border">
                                <h4>Interview Schedule</h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="display" id="indexTable2">
                                        <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Application</th>
                                            <th>Interview Date</th>
                                            <th>Detail</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Interviews Datatable Ends-->

        {{-- Interview Details 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-bs-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-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- Interview Details Model : End --}}
        </div>
    </div>
</main>

@endsection
@push('footer-scripts')
            <script type="text/javascript">
                $(document).ready(function () {
                    //Datatable
                    $('#indextable').DataTable({
                        destroy: true,
                        processing: true,
                        serverSide: true,
                        order: [[0, "desc"]],
                        ajax: {
                            "type": "GET",
                            "url": "{{route('u.notifications')}}",
                        },
                        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('u.notification-details', ':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('u.interviews')}}",
                        },
                        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-bs-toggle="modal" data-bs-target="#del-model">Detail</span></a>' +
                                        '</div>'
                                }
                            }
                        ]
                    });
                });

                $("#del-model").on('show.bs.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