@extends('admin.layouts.main')

@section('title')
Schedules
@endsection

@section('content')
<main>
    <div class="two-col">
        @include("admin.common.sidebar")
        <div class="right-sec">
            <div class="top-bar d-flex align-items-center">
                @permission('calendar-write')
                <div class="right-table-container ml-auto">
                    <a href="{{ route('admin.calender.create_meeting',['panel' => Session::get('panel')]) }}"
                        class="btn btn-em btn-primary-em">{{ @trans('calendar.create_new_meeting') }}</a>
                    <a href="{{ route('admin.calender.create_reminder',['panel' => Session::get('panel')]) }}"
                        class="btn btn-em btn-primary-em">{{ @trans('calendar.create_reminder') }}</a>
                </div>
                @endpermission
            </div>
            <div id='calendar'></div>
        </div>
    </div>
</main>
@endsection

@push('pageModals')
@include('admin.modules.Calender.modals.screening_cancel')
@include('admin.modules.Calender.modals.generic')
@endpush

@push('pageJs')
<script>
    document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: ['dayGrid', 'timeGrid', 'list'],
        defaultView: 'listMonth',
        timeZone: 'Africa/Dar_es_Salaam',
        displayEventEnd: true,
        header: {
            left: 'prevYear,prev,next,nextYear today,',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
        },
        buttonText: {
            today: '{{ @trans("calendar.today") }}',
            month: '{{ @trans("calendar.month") }}',
            list: '{{ @trans("calendar.list") }}',
            week: '{{ @trans("calendar.week") }}',
            day: '{{ @trans("calendar.day") }}'
        },
        defaultDate: new Date(),
        navLinks: true, // can click day/week names to navigate views
        businessHours: true, // display business hours
        eventLimit: true,
        events: '{{$getScreaning}}',
        eventTimeFormat: {
            hour: '2-digit',
            minute: '2-digit',
            // second: '2-digit',
            meridiem: false,
            hour12: false
        },
        views: {
            timeGrid: {
            eventLimit: 6 // adjust to 6 only for timeGridWeek/timeGridDay
            }
        },
        eventTextColor: '#FDFEFE',
        eventRender: function(info) {
            if(info.view.type == 'listMonth' && info.event.extendedProps.status != 'pending')
                return false;

            let icon = info.event.extendedProps.icon;
            let title = $(info.el).find('.fc-content .fc-time');
            if (icon !== undefined) {
                if(icon == 'person_search')
                    title.prepend('<img src="{{ asset("img/admin/ic_person_search.svg") }}">');
                else
                    title.prepend('<i class="material-icons" style="font-size:16px;vertical-align: text-bottom; width: 17px;">'+ info.event.extendedProps.icon +'</i>');
            }

            if (info.event.extendedProps.status == "completed" || info.event.extendedProps.status == 'rejected' || info.event.extendedProps.status == 'hired') {
                info.el.style.backgroundColor = '#28B463';
                info.el.style.borderColor = '#28B463';
            } else if (info.event.extendedProps.status == "cancelled") {
                info.el.style.backgroundColor = '#E74C3C';
                info.el.style.borderColor = '#E74C3C';
            } else {
                info.el.style.backgroundColor = '#3788d8';
                info.el.style.borderColor = '#3788d8';
            }
        },
        eventClick: function(info) {
            if(info.event.extendedProps.description == 'Screening') {
                
                var completedSCrean;
                if(info.event.extendedProps.status == "completed")
                {
                    completedSCrean = "Completed";
                }
                else if(info.event.extendedProps.status == "pending")
                {
                    completedSCrean = "Pending";
                }
                else if(info.event.extendedProps.status == "cancelled")
                {
                    completedSCrean = "Cancelled";
                }

                var html = '<b>{{ @trans("calendar.date") }}:</b>&nbsp;' + info.event.extendedProps.dateTime + '<br>';
                html += '<b>{{ @trans("calendar.time") }}:</b>&nbsp;' + info.event.extendedProps.time+'<br>';
                html += '<b>{{ @trans("calendar.candidate") }}:</b>&nbsp;' + info.event.title +   '<br>';
                html += '<b>{{ @trans("calendar.phone_number") }}:</b>&nbsp;' + info.event.extendedProps.phone +  '<br>';
                html += '<b>{{ @trans("calendar.type") }}:</b>&nbsp;' + info.event.extendedProps.type + '<br>';
                html += '<b>{{ @trans("calendar.recruiter") }}:</b>&nbsp;' + info.event.extendedProps.advisor + '<br>';
                html += '<b>{{ @trans("calendar.status") }}:</b>&nbsp;' + completedSCrean + '<br>';
                html += '<a href="'+ viewScreaning +'/'+ info.event.groupId +'" class="btn btn-em">{{ @trans("calendar.view") }}</a>';
                @permission('calendar-write')
                if(completedSCrean == 'Pending') {
                    html += '<a href="#" class="btn btn-em cancel-screaning ml-2" data-id = "'+ info.event.groupId +'" data-user-id = "'+ info.event.extendedProps.userId +'">{{ @trans("calendar.cancel_screening") }}</a>';
                }
                @endpermission
                $("#successModal").modal("show");
                $("#successModal .modal-body p").html(html);

            } else if(info.event.extendedProps.type == 'Reminder') {

                var html = '<b>{{ @trans("calendar.reminder_date") }}:</b>&nbsp;' + info.event.extendedProps.dateTime + '<br>';
                html += '<b>{{ @trans("calendar.reminder_time") }}:</b>&nbsp;' + info.event.extendedProps.time+'<br>';
                html += '<b>{{ @trans("calendar.reminder_title") }}:</b>&nbsp;' + info.event.title +   '<br>';
                html += '<b>{{ @trans("calendar.description") }}:</b>&nbsp;' + info.event.extendedProps.description +  '<br>';
                html += '<b>{{ @trans("calendar.internal_staff_members") }}:</b>&nbsp;' + info.event.extendedProps.members + '<br>';
                html += '<b>{{ @trans("calendar.status") }}:</b>&nbsp;' + info.event.extendedProps.status + '<br>';
                html += '<a href="'+ viewReminder +'/'+ info.event.groupId +'" class="btn btn-em">{{ @trans("calendar.view") }}</a>';

                $("#successModal").modal("show");
                $("#successModal .modal-body p").html(html);
            } else if(info.event.extendedProps.type == 'Meeting') {

                var html = '<b>{{ @trans("calendar.meeting_title") }}:</b>&nbsp;' + info.event.title + '<br>';
                html += '<b>{{ @trans("calendar.date") }}:</b>&nbsp;' + info.event.extendedProps.dateTime + '<br>';
                html += '<b>{{ @trans("calendar.start_time") }}:</b>&nbsp;' + info.event.extendedProps.start_time+'<br>';
                html += '<b>{{ @trans("calendar.end_time") }}:</b>&nbsp;' + info.event.extendedProps.end_time +   '<br>';
                if(info.event.extendedProps.notes != null){
                    html += '<b>{{ @trans("calendar.notes") }}:</b>&nbsp;' + info.event.extendedProps.notes +  '<br>';
                }
                html += '<b>{{ @trans("calendar.type") }}:</b>&nbsp;' + info.event.extendedProps.record_type + '<br>';
                html += '<b>{{ @trans("calendar.meeting_type") }}:</b>&nbsp;' + info.event.extendedProps.meeting_type + '<br>';
                html += '<b>{{ @trans("calendar.meeting_information") }}:</b>&nbsp;' + info.event.extendedProps.location + '<br>';
                html += '<b>{{ @trans("calendar.status") }}:</b>&nbsp;' + info.event.extendedProps.status + '<br>';
                html += '<a href="'+ viewMeeting +'/'+ info.event.groupId +'" class="btn btn-em">{{ @trans("calendar.view") }}</a>';

                $("#successModal").modal("show");
                $("#successModal .modal-body p").html(html);
            }else {
                var job
                if(info.event.extendedProps.status == "pending")
                {
                    job = "Pending";
                }
                else if(info.event.extendedProps.status == "no_show")
                {
                    job = "No Show";
                }
                else if(info.event.extendedProps.status == "next_interview_requested" || info.event.extendedProps.status == "document_requested" )
                {
                    job = "In Progress";
                }
                else if(info.event.extendedProps.status == "on_hold")
                {
                    job = "On Hold";
                }
                else if(info.event.extendedProps.status == "rejected" || info.event.extendedProps.status == "hired" )
                {
                    job = "Completed";
                }
                var html = '<b>{{ @trans("calendar.date") }}:</b>&nbsp;' + info.event.extendedProps.dateTime + '<br>';
                html += '<b>{{ @trans("calendar.time") }}:</b>&nbsp;' + info.event.extendedProps.time+'<br>';
                html += '<b>{{ @trans("calendar.candidate") }}:</b>&nbsp;' + info.event.title + '<br>';
                html += '<b>{{ @trans("calendar.phone_number") }}:</b>&nbsp;' + info.event.extendedProps.phone +  '<br>';
                html += '<b>{{ @trans("calendar.type") }}:</b>&nbsp;' + info.event.extendedProps.type + '<br>';
                html += '<b>{{ @trans("calendar.company_name") }}:</b>&nbsp;' + info.event.extendedProps.companyName + '<br>';
                html += '<b>{{ @trans("calendar.company_person") }}:</b>&nbsp;' + info.event.extendedProps.contactPerson + '<br>';
                html += '<b>{{ @trans("calendar.status") }}:</b>&nbsp;' + job +'<br>';
                html += '<br><a href="'+viewJob+'/'+ info.event.groupId +'" class="btn btn-em">{{ @trans("calendar.view") }}</a>';
                $("#successModal").modal("show");
                $("#successModal .modal-body p").html(html);
            }
        },
    });
    calendar.render();
  });

</script>

<script>
    var viewScreaning = '{{$viewScreaning}}'
    var viewJob = '{{$viewJob}}'
    var cancelScreaning = '{{$cancelScreaning}}'
    var viewReminder = "{{ route('admin.calendar.view_reminder', ['panel' => session('panel'), 'id' => null]) }}";
    var viewMeeting = "{{ route('admin.calendar.view_meeting', ['panel' => session('panel'), 'id' => null]) }}";
    var calendarWritePermission = false;
    @permission('calendar-delete')
    var calendarWritePermission = true;
    @endpermission
</script>

<script type="text/javascript" src="{{asset('js/vendor/FullCalendar/main.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/vendor/FullCalendar/daygrid-main.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/vendor/FullCalendar/timegrid-main.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/vendor/FullCalendar/list-main.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/vendor/FullCalendar/Listmain.js')}}"></script>
<script type="text/javascript" src="{{asset('js/vendor/FullCalendar/jquery.dataTables.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/vendor/FullCalendar/dataTables.bootstrap4.min.js')}}"></script>
<script>
    $(document).ready(function() {
        $(document).on('click', '.cancel-screaning', function() {
            $("#screening_cancel").modal();
            var screening_id = $(this).attr('data-id');
            var user_id = $(this).attr('data-user-id');
            $('#screening_id').val(screening_id);
            $('#id').val(user_id);
        });
        @if(Session::has('message'))
        Snackbar.show({
            pos: 'bottom-right',
            text: "{!! session('message') !!}",
            actionText: 'Okay'
        });
        @endif

        $('#frmScreeningCancel').validate({
            errorElement: 'span',
                errorClass: 'invalid-feedback',
                ignore: false,

                errorPlacement: function(error, element) {
                    error.insertAfter(element);
                },
                highlight: function(element) {
                    $(element).closest('.form-control').removeClass('is-valid').addClass('is-invalid'); // add the Bootstrap error class to the control group
                },
            rules: {
                cancellation_reason: 'required',
            },
            messages: {
                cancellation_reason : 'Reason is required',
            }
        });
    });
</script>
@endpush

@push('pageCss')
<style>
    .fc-license-message {
        display: none;
    }
    .fc-event {
        cursor: pointer;
    }
    .modal.right .modal-content {
        height: 60%;
        overflow-y: auto;
        margin-top: 50%;
        width: 60%;
    }
    .modal-header .close-btn {

        margin: -1rem 0rem -1rem auto;
    }
    .close {
        margin-top: -20px;
    }
    .fc-list-item-title {
        background-color: #f8fafc;
    }
    .fc-list-item-time {
        background-color: #f8fafc;
    }
    .fc-list-item-marker {
        background-color: #f8fafc;
    }
</style>
<link rel="stylesheet" type="text/css" href="{{asset('css/admin/main.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('css/admin/daygrid-main.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('css/admin/timegrid-main.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('css/admin/list-main.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/vendor/FullCalendar/bootstrap.css') }}">
@endpush