@extends('layouts.vertical')

@section('css')
<link href="{{ Helper::assets('assets/libs/fullcalendar-core/main.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/fullcalendar-daygrid/main.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/fullcalendar-bootstrap/main.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/sweetalert/sweetalert.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/flatpickr/flatpickr.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/multiselect/bootstrap.multiselect.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@php
    $annual_leave_types = config('constant.annual_leave_types');
    $CurrentRosterSchedule = [];
    $is_some_roster_exist = false;
    $utype = "";
    if(app('request')->input('type')){
        $utype = app('request')->input('type');
    }

    $user = "";
    $month = date('F Y');
    if(app('request')->input('id')){
        $user = app('request')->input('id');
    }
    if(app('request')->input('month')){
        $month = app('request')->input('month');
    }
@endphp

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-md">
        <h4 class="mb-1 mt-0 font-weight-medium">Roster management</h4>
        <p class="mb-0">Learn how roster management works <a href="https://intercom.help/teachkloud/en/articles/5530406-roster-management-school-interface" target="_blank">here</a></p>
    </div>
    <div class="col col-md-auto ml-md-auto">
        <div class="form-inline float-md-right mt-3 mt-md-0" style="display: none">
            <div class="">
                <a href="javascript:;" class="btn btn-success btn-min-width mb-md-0 mb-2 mr-2 add-schedule">Add schedule</a>
                <a href="{{ route('roster.add.holiday') }}" class="btn btn-success btn-min-width mb-md-0 mb-2 mr-2">Add annual leave</a>
                <button type="button" class="btn btn-success btn-min-width mb-md-0 mb-2" data-toggle="modal" data-target="#downloadReport">Download report</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')
<div class="row ratioHolds-section" style="display: none">
    <div class="col-12">
        <div class="col-12 alert alert-danger">
            <div class="row">
                <div class="col-sm">
                    <div class="media" role="alert">
                        <img src="{{ Helper::assets('assets/images/icons/alert-danger.svg') }}">
                        <div class="media-body ml-2" role="alert">
                            <p class="font-weight-medium mb-0 text-danger">Some room(s) do not meet your pre-defined adult: child ratios.</p>
                            <p class="font-weight-medium mb-0 text-danger">Adult: child ratios can be managed in the “Rooms” section using the navigation bar.</p>
                        </div>
                    </div>
                </div>
                <div class="col-auto btn-group align-self-center">
                    <a href="{{ route('roster.ratios') }}" class="btn btn-danger">View</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md">
                        <div class="row px-3">
                            <ul class="nav nav-pills navtab-bg user-nav">
                                <li class="nav-item">
                                    <a href="#tab1" data-type="1" data-toggle="tab" aria-expanded="true" class="nav-link {{ ($utype != "" && $utype == 1) || $utype == "" ? 'active' : '' }}">
                                        <span class="d-sm-block">Educators</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="#tab2" data-type="2" data-toggle="tab" aria-expanded="true" class="nav-link {{ ($utype != "" && $utype == 2) ? 'active' : '' }}">
                                        <span class="d-sm-block">Other staff</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col col-md-auto ml-md-auto mt-md-0 mt-2">
                        <button type="button" class="btn btn-pink btn-min-width" data-toggle="modal" data-target="#downloadRoomReport">Download room report</button>
                    </div>
                </div>
                <div class="tab-content">
                    <div class="tab-pane {{ ($utype != "" && $utype == 1) || $utype == "" ? 'show active' : '' }}" id="tab1">
                        <div class="row">
                            <div class="col-md-12">
                                <p class="font-size-16 mb-2">Restrict Timesheet Check In <span title="The time the staff member selects the check-in button is auto-recorded and staff cannot check in before their scheduled time. When ‘restrict check-in’ is selected, staff members are limited to checking in themselves. They cannot check in others." data-toggle="tooltip"><i class="icon-info"></i></span>:
                                    <span class="d-inline-block custom-control custom-switch ml-2">
                                        <input type="checkbox" class="custom-control-input input-setting" name="disableCheckInEdit" id="disableCheckInEdit" {{isset($setting) && !empty($setting) && isset($setting->disableCheckInEdit) && ($setting->disableCheckInEdit == true || $setting->disableCheckInEdit == "true") ? "checked" : ""}} value="1">
                                        <label class="custom-control-label" for="disableCheckInEdit"></label>
                                    </span>
                                </p>
                                <p class="font-size-16 mb-0">Auto-approve Annual Leave requests:
                                    <span class="d-inline-block custom-control custom-switch ml-2">
                                        <input type="checkbox" class="custom-control-input input-setting" name="autoApprove" id="autoApprove" {{isset($setting) && !empty($setting) && isset($setting->autoApproveAL) && ($setting->autoApproveAL == true || $setting->autoApproveAL == "true") ? "checked" : ""}} value="2">
                                        <label class="custom-control-label" for="autoApprove"></label>
                                    </span>
                                </p>
                                <div class="border-bottom my-3"></div>
                            </div>
                        </div>
                        <p class="font-size-16">Staff whose schedules have not been added, are shown under educators. Select any name to create a new schedule for multiple staff. After creating your first schedule, use the 'add schedule' button (top right) to add new schedules. <a href="https://intercom.help/teachkloud/en/articles/5530406-roster-management-school-interface" target="_blank">Watch this video</a> to learn how to use the roster feature.</p>
                        <p class="font-size-16 room-message start" style="display:none;">Invite the educators from ‘staff’ list section’ before adding a roster or educator timesheet.</p>
                        <a href="{{ route('teachers') }}" class="btn btn-success btn-min-width room-message start" style="display:none;">Invite educator</a>
                        <p class="font-size-16 room-message all-added" style="display:none;">Add or edit a schedule by double clicking on any date.</p>
                        <p class="font-size-16 room-message some-remaining" style="display:none;">Tap on the educator to add schedules and breaks.</p>
                        <div class="childs row mt-4" style="display:none;"></div>
                        <div class="child-loader" style="display:block;">Loading...</div>
                    </div>
                    <div class="tab-pane {{ ($utype != "" && $utype == 2) ? 'active' : '' }}" id="tab2">
                        <p class="font-size-16 room-message start" style="display:none;">Use the “other staff” section to add schedules for staff members who do not need access to the TeachKloud Mobile application and who will not use the application to check themselves in or out. Schedules for other staff members can be printed but are view only via the school interface and mobile application.</p>
                        <a href="{{ route('staff') }}" class="btn btn-success btn-min-width room-message start" style="display:none;">Add staff</a>
                        <p class="font-size-16 room-message all-added" style="display:none;">To add a schedule for other staff, please go to the <a href="{{route('staff')}}">other staff section</a>. Other staff are staff such as administrative staff who do not use the TeachKloud: Childcare App to check in and out but who you would like to create online and downloadable rosters for.</p>
                        <p class="font-size-16 room-message some-remaining" style="display:none;">Tap on the staff to add schedules and breaks.</p>
                        <div class="childs row mt-4" style="display:none;"></div>
                        <div class="child-loader" style="display:block;">Loading...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row attendancce-calendar" style="display:{{ $is_some_roster_exist ? "block" : "none" }}">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4 col-xl-3">
                        <select class="form-control wide select2-custom teacher" name="teacher" id="teacher" data-placeholder="Select teacher"></select>
                    </div>
                    <div class="col-md-auto mx-md-auto">
                        <div class="row form-group">
                            <label class="col-auto col-form-label font-weight-medium">Select month</label>
                            <div class="col-xl-6 col-md mb-6 mb-md-0">
                                <span class="flatpickr-arrow"></span>
                                <input type="text" class="form-control flatpickr flatpickr-month" id="month" name="month" value="{{ $month }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-auto">
                        <a href="javascript:;" class="mb-md-0 mb-2 mr-md-2 text-pink text-underline font-weight-semibold btn-view-leave-request">View Annual Leave Requests</a>
                        <a href="javascript:;" class="btn btn-success btn-min-width mb-md-0 mb-2 mr-2 add-teacher-schedule">Add new schedule</a>
                    </div>
                </div>
                <div id="calendar"></div>
            </div>
        </div>
    </div>
</div>

<div class="modal modal-medium fade" id="downloadReport" role="dialog" aria-labelledby="" aria-modal="true">
    <form id="download-form" action="{{ route('roster.report.download') }}" method="POST" class="form-horizontal download-report-form">
        @csrf
        <input type="hidden" name="utcOffset" class="utcOffset" value="">
        <input type="hidden" name="isTeachers" class="isTeachers" value="">
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title mb-1" id="">Download report</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2 pb-0">
                    <div class="">
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label class="mb-3">Select date</label>
                                <div class="row date-group">
                                    <div class="col">
                                        <span class="flatpickr-arrow"></span>
                                        <input type="text" class="form-control flatpickr flatpickr-input from-date" name="fromDate" value="" placeholder="">
                                    </div>
                                    <span class="text-nowrap col-auto px-0 pt-3">To</span>
                                    <div class="col">
                                        <span class="flatpickr-arrow"></span>
                                        <input type="text" class="form-control flatpickr flatpickr-input to-date" name="toDate" value="" placeholder="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col user-teacher-opt">Select teachers</label>
                            <label class="col user-staff-opt" style="display:none;">Select other staff members</label>
                            <div class="col-md-12 teachers-list"></div>
                            <div class="col-md teacher-errors"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-min-width">Download report</button>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="modal modal-large fade" id="downloadRoomReport" role="dialog" aria-labelledby="" aria-modal="true">
    <form id="download-form1" action="{{ route('roster.room.report.download') }}" method="POST" class="form-horizontal download-report-form">
        @csrf
        <input type="hidden" name="utcOffset" class="utcOffset" value="">
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title mb-1" id="">Download room report</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2 pb-0">
                    <div class="">
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label class="mb-3">Select month</label>
                                <div class="position-relative">
                                    <span class="flatpickr-arrow"></span>
                                    <input type="text" class="form-control flatpickr multiple-months" name="months[]" value="" placeholder="" autocomplete="off">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="mb-3">Select weeks</label>
                                <select class="form-control weeks" multiple name="weeks[]">
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label class="mb-3">Select rooms</label>
                                @if(isset($rooms) && !empty($rooms))
                                <div class="row">
                                    @foreach($rooms as $room)
                                    <div class="col-md-6 mb-2">
                                        <div class="checkbox-full">
                                            <div class="checkbox medium checkbox-pink right">
                                                <input type="checkbox" name="rooms[]" id="rooms{{$room->_id}}" value="{{$room->_id}}" data-error="room-errors">
                                                <label for="rooms{{$room->_id}}" class="font-weight-normal">{{$room->name}}</label>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                                @endif
                                <div class="room-errors"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-min-width">Download report</button>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="modal modal-medium fade" id="editRosterSchedule" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route('roster.activity.update') }}" method="post" class="form-horizontal update-schedule-form">
        @csrf
        <input type="hidden" name="id" class="id" value="">
        <input type="hidden" name="date" value="">
        <input type="hidden" name="user" class="user" value="">
        <input type="hidden" name="break" class="isBreak" value="0">
        <input type="hidden" name="isTeachers" class="isTeachers" value="">
        <input type="hidden" name="cover" class="isCover" value="">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="media">
                        <img src="" class="img-child">
                        <div class="media-body media-right">
                            <h3 class="modal-title mb-1 teacher-name">John Wilson</h3>
                            <p class="mb-0">You can edit and delete this roster.</p>
                        </div>
                    </div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2 pb-0">
                    <div class="">
                        <div class="custom-control-inline">
                            <div class="custom-control custom-radio mb-2 mr-3">
                                <input type="radio" name="action" id="customRadioA1" class="schedule-action custom-control-input" value="1" checked>
                                <label class="custom-control-label" for="customRadioA1">Edit schedule</label>
                            </div>
                            <div class="custom-control custom-radio mb-2">
                                <input type="radio" name="action" id="customRadioA2" class="schedule-action custom-control-input" value="2">
                                <label class="custom-control-label" for="customRadioA2">Delete schedule</label>
                            </div>
                        </div>
                        <div class="form-group row schedule-opt">
                            <label class="col">Select room</label>
                            <div class="col-md-12">
                                <select class="form-control wide" data-plugin="customselect" name="room" data-placeholder="Select room">
                                    <option value="">Select room</option>
                                    @if(isset($rooms) && !empty($rooms))
                                    @foreach($rooms as $room)
                                    <option value="{{$room->_id}}">{{$room->name}}</option>
                                    @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row time-group">
                                    <div class="col-md-6 form-group">
                                        <label>Start time</label>
                                        <div class="position-relative">
                                            <span class="flatpickr-arrow"></span>
                                            <input type="text" class="form-control flatpickr flatpickr-time fromTime" name="fromTime" value="" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <label>End time</label>
                                        <div class="position-relative">
                                            <span class="flatpickr-arrow"></span>
                                            <input type="text" class="form-control flatpickr flatpickr-time toTime" name="toTime" value="" placeholder="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="custom-control-inline">
                            <div class="custom-control custom-radio mb-2 mr-3">
                                <input type="radio" name="selectedDate" id="customRadio1" class="dayDate custom-control-input" value="" checked>
                                <label class="custom-control-label" for="customRadio1"><span class="edit-schedule">Save these changes</span> <span class="delete-schedule" style="display: none;">Delete this schedule</span> for the <span class="datestr1">07th of June</span> only.</label>
                            </div>
                            <div class="custom-control custom-radio mb-2 save-all-days">
                                <input type="radio" name="day" id="customRadio2" class="dayDate custom-control-input" value="">
                                <label class="custom-control-label" for="customRadio2"><span class="edit-schedule">Save these changes</span> <span class="delete-schedule" style="display: none;">Delete this schedule</span> for all future <span class="dayName">Fridays</span>.</label>
                            </div>
                            <div class="custom-control custom-radio mb-2 save-all-calendar-dates">
                                <input type="radio" name="selectedDates" id="customRadio3" class="dayDate custom-control-input" value="1">
                                <label class="custom-control-label" for="customRadio3"><span class="edit-schedule">Save these changes</span> <span class="delete-schedule" style="display: none;">Delete this schedule</span> for selected future calendar dates.</label>
                            </div>
                        </div>
                        <div class="row" style="display: none;">
                            <label class="col">Select dates</label>
                            <div class="col-md-12 dates-list"></div>
                            <div class="col-md dates-error"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer d-block">
                    <div class="mb-4 edit-schedule"><button type="submit" class="btn btn-success btn-min-width">Save changes</button></div>
                    <div class="mb-4 delete-schedule" style="display: none;"><button type="submit" class="btn btn-danger btn-min-width">Delete schedule</button></div>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="modal modal-medium fade" id="addRosterSchedule" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route('roster.activity.add') }}" method="post" class="form-horizontal add-schedule-form">
        @csrf
        <input type="hidden" name="isTeachers" class="isTeachers" value="">
        <input type="hidden" name="startDate" class="startDate" value="">
        <input type="hidden" name="break" class="isBreak" value="0">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="media single-teacher" style="display: none;">
                        <img src="" class="img-child">
                        <div class="media-body media-right">
                            <h3 class="modal-title mb-1 teacher-name" id="">John Wilson</h3>
                            <p class="mb-0">You can create a new schedule.</p>
                        </div>
                    </div>
                    <div class="media all-teacher">
                        <div class="media-body media-right">
                            <h3 class="modal-title mb-1 schedule-opt" id="">Create new schedule</h3>
                            <h3 class="modal-title mb-1 break-opt" id="" style="display:none;">Add break</h3>
                        </div>
                    </div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2 pb-0">
                    <div class="row px-3 mb-4">
                        <ul class="nav nav-pills navtab-bg schedule-tab">
                            <li class="nav-item">
                                <a href="#tab1-1" data-type="0" data-toggle="tab" aria-expanded="true" class="nav-link active">
                                    <span class="d-sm-block">Add schedule</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="#tab1-2" data-type="1" data-toggle="tab" aria-expanded="true" class="nav-link">
                                    <span class="d-sm-block">Add break</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="">
                        <div class="form-group row schedule-opt">
                            <label class="col">Select room</label>
                            <div class="col-md-12">
                                <select class="form-control wide" data-plugin="customselect" name="room" data-placeholder="Select room">
                                    <option value="">Select room</option>
                                    @if(isset($rooms) && !empty($rooms))
                                    @foreach($rooms as $room)
                                    <option value="{{$room->_id}}">{{$room->name}}</option>
                                    @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row time-group">
                                    <div class="col-md-6 form-group">
                                        <label>Start time</label>
                                        <div class="position-relative">
                                            <span class="flatpickr-arrow"></span>
                                            <input type="text" class="form-control flatpickr flatpickr-time fromTime" name="fromTime" value="" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <label>End time</label>
                                        <div class="position-relative">
                                            <span class="flatpickr-arrow"></span>
                                            <input type="text" class="form-control flatpickr flatpickr-time toTime" name="toTime" value="" placeholder="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="custom-control-inline mb-3">
                            <div class="custom-control custom-radio mb-2 mr-3">
                                <input type="radio" id="customRadio11" name="dayType" class="day-type custom-control-input" checked value="1">
                                <label class="custom-control-label" for="customRadio11">Weekdays</label>
                            </div>
                            <div class="custom-control custom-radio mb-2">
                                <input type="radio" id="customRadio12" name="dayType" class="day-type custom-control-input" value="2">
                                <label class="custom-control-label" for="customRadio12">Calendar dates</label>
                            </div>
                        </div>
                        <div class="form-group weekday-option">
                            <div class="col-12 px-0">
                                <div class="checkbox-tag checkbox-success d-inline-block">
                                    <input type="checkbox" class="checkbox" name="days[]" id="day1" value="1" data-error="days-error">
                                    <label for="day1">M</label>
                                </div>
                                <div class="checkbox-tag checkbox-success d-inline-block">
                                    <input type="checkbox" class="checkbox" name="days[]" id="day2" value="2" data-error="days-error">
                                    <label for="day2">T</label>
                                </div>
                                <div class="checkbox-tag checkbox-success d-inline-block">
                                    <input type="checkbox" class="checkbox" name="days[]" id="day3" value="3" data-error="days-error">
                                    <label for="day3">W</label>
                                </div>
                                <div class="checkbox-tag checkbox-success d-inline-block">
                                    <input type="checkbox" class="checkbox" name="days[]" id="day4" value="4" data-error="days-error">
                                    <label for="day4">T</label>
                                </div>
                                <div class="checkbox-tag checkbox-success d-inline-block">
                                    <input type="checkbox" class="checkbox" name="days[]" id="day5" value="5" data-error="days-error">
                                    <label for="day5">F</label>
                                </div>
                                <div class="checkbox-tag checkbox-success d-inline-block">
                                    <input type="checkbox" class="checkbox" name="days[]" id="day6" value="6" data-error="days-error">
                                    <label for="day6">S</label>
                                </div>
                                <div class="checkbox-tag checkbox-success d-inline-block">
                                    <input type="checkbox" class="checkbox" name="days[]" id="day7" value="0" data-error="days-error">
                                    <label for="day7">S</label>
                                </div>
                            </div>
                            <div class="days-error"></div>
                        </div>
                        <div class="form-group row calendar-option" style="display:none;">
                            <label class="col-12">Select dates</label>
                            <div class="col-md-6">
                                <div class="flatpickr-custom">
                                    <span class="flatpickr-arrow"></span>
                                    <input type="text" class="form-control" name="dates" placeholder="Select dates" value="" data-error="dates-error" data-input>
                                    <span class="input-button" title="toggle" data-toggle>Select days</span>
                                </div>
                                <div class="dates-error"></div>
                            </div>
                            <div class="col-md-6">
                                <div class="checkbox big checkbox-pink d-inline-block">
                                    <input type="checkbox" class="checkbox" name="cover" id="schedules0Cover" value="1" data-error="days-error">
                                    <label for="schedules0Cover" class="pt-2">Cover</label>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <label class="col user-teacher-opt">Select teachers</label>
                            <label class="col user-staff-opt" style="display:none;">Select other staff members</label>
                            <div class="col-md-12 teachers-list"></div>
                            <div class="col-md teacher-errors"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer d-block">
                    <div class="schedule-opt"><button type="submit" class="btn btn-success btn-min-width">Add schedule</button></div>
                    <div class="break-opt" style="display:none;"><button type="submit" class="btn btn-success btn-min-width">Add break</button></div>
                    <div class="col-12 px-0 mt-4 weekday-option">
                        <p class="text-danger mb-0 break-opt" style="display:none;">Note: This break will be applied to all future selected weekdays.</p>
                        <p class="text-danger mb-0 schedule-opt">Note: This schedule will be applied to all future selected weekdays.</p>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="modal modal-medium fade" id="markAbsentSick" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route('roster.mark.absent-sick') }}" method="POST" class="form-horizontal mark-absent-sick-form" enctype="multipart/form-data" autocomplete="off">
        @csrf
        <input type="hidden" name="userType" class="isTeachers">
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title mb-1" id="">Mark as sick or absent</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2 pb-0">
                    <div class="">
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label class="mb-3">Select teacher</label>
                                <select class="form-control wide select2-custom teacher" name="teacher" data-placeholder="Select teacher"></select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 form-group ">
                                <label class="mb-3">Select reason</label>
                                <select class="form-control wide select2-custom" name="reason" data-placeholder="Select reason">
                                    <option value="">Select</option>
                                    <option value="0">Absent</option>
                                    <option value="1">Sick</option>
                                </select>
                            </div>
                            <div class="col-md-6 form-group ">
                                <label class="mb-3">Select date</label>
                                <div class="flatpicker">
                                    <span class="flatpickr-arrow"></span>
                                    <input type="text" class="form-control flatpickr flatpickr-input" name="date" value="" placeholder="" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label class="mb-3">Your comments</label>
                                <textarea class="form-control" name="comment" value="" placeholder="Type your comments here…" rows="5"></textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label class="mb-3">Supporting evidence</label>
                                <div class="col-12 px-0">
                                    <div class="upload-file">
                                        <i class="icon-cross"></i>
                                        <i class="icon-plus"></i>
                                        <i class="icon-pdf"></i>
                                        <img src="" class="icon-image" />
                                        <input type="file" name="image" id="image" data-error="uploadfile-error">
                                        <input type="hidden" class="remove-image" name="removeEvidence" id="removeEvidence" value="0">
                                    </div>
                                    <span class="file-name"></span>
                                    <div class="uploadfile-error"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-min-width">Done</button>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="modal modal-medium fade" id="AnnualLeaveEdit" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route('roster.save.holiday') }}" method="POST" class="form-horizontal annual-leave-form" enctype="multipart/form-data" autocomplete="off">
        @csrf
        <input type="hidden" name="recordId" class="recordId">
        <input type="hidden" name="teacher" class="teacher">
        <input type="hidden" name="type" class="uType">
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="media">
                        <img src="" class="img-child">
                        <div class="media-body media-right">
                            <h3 class="modal-title mb-1 teacher-name" id="">John Wilson</h3>
                            <p class="mb-0 added-by"></p>
                        </div>
                    </div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2 pb-0">
                    <div class="">
                        <div class="row">
                            <div class="col-md-6 form-group ">
                                <label class="mb-3">Select reason</label>
                                <select class="form-control wide select2-custom" name="reason" data-placeholder="Select reason" id="holidayType">
                                    <option value="">Select reason</option>
                                    @foreach (config('constant.annual_leave_types') as $lt)
                                        <option value="{{$lt}}">{{$lt}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 form-group other-section" style="display: none">
                                <label class="mb-3">Enter reason</label>
                                <input type="text" name="otherHolidayTypeTitle" id="otherHolidayTypeTitle" class="form-control" placeholder="Example: Christmas Break" />
                            </div>
                            <div class="col-md-6 form-group ">
                                <label class="mb-3">Select date</label>
                                <div class="flatpicker position-relative">
                                    <span class="flatpickr-arrow"></span>
                                    <input type="text" class="form-control flatpickr flatpickr-input" name="date" value="" placeholder="" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label class="mb-3">Is the leave paid?</label>
                                <div class="custom-control-inline">
                                    <div class="custom-control custom-radio mb-2 mr-3">
                                        <input type="radio" id="paid-yes" name="is_paid" class="is-paid custom-control-input" data-error="is-paid-error" value="1">
                                        <label class="custom-control-label" for="paid-yes">Yes</label>
                                    </div>
                                    <div class="custom-control custom-radio mb-2">
                                        <input type="radio" id="paid-no" name="is_paid" class="is-paid custom-control-input" data-error="is-paid-error" value="0">
                                        <label class="custom-control-label" for="paid-no">No</label>
                                    </div>
                                    <div class="is-paid-error"></div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label class="mb-3">Your comments</label>
                                <textarea class="form-control" name="comment" value="" placeholder="Type your comments here…" rows="5"></textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label class="mb-3">Supporting evidence</label>
                                <div class="col-12 px-0">
                                    <div class="upload-file">
                                        <i class="icon-cross"></i>
                                        <i class="icon-plus"></i>
                                        <i class="icon-pdf"></i>
                                        <img src="" class="icon-image" />
                                        <input type="file" name="image" id="image" data-error="uploadfile-error">
                                        <input type="hidden" class="remove-image" name="removeEvidence" id="removeEvidence" value="0">
                                    </div>
                                    <span class="file-name"></span>
                                    <div class="uploadfile-error"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-min-width">Save changes</button>
                    <button type="button" class="btn btn-danger btn-delete-annual-leave" data-id="">Delete</button>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="modal modal-extra-large fade" id="ViewLeaveRequestModal" role="dialog" aria-labelledby="" aria-modal="true">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header text-center">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-2 pb-5">
                <div class="text-center mb-4">
                    <img src="" class="img-child medium">
                    <div class="font-size-18 mt-2 font-weight-medium teacher-name"></div>
                </div>
                <div class="">
                    <div class="text-center pb-4 mb-2">
                        <div class="btn-group">
                            <button type="button" class="btn btn-success leave-request-tab-link" data-target="#pending-request">Pending Requests</button>
                            <button type="button" class="btn btn-soft-dark leave-request-tab-link" data-target="#acknowledged-request">Acknowledged Requests</button>
                        </div>
                    </div>
                    <div id="pending-request" class="leave-request-tab">
                    </div>
                    <div id="acknowledged-request" class="leave-request-tab" style="display: none">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal modal-medium fade" id="AnnualLeaveRequestEdit" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route('roster.leave.requests.save') }}" method="POST" class="form-horizontal annual-leave-request-form" enctype="multipart/form-data" autocomplete="off">
        @csrf
        <input type="hidden" name="recordId" class="recordId">
        <input type="hidden" name="teacher" class="teacher">
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="media">
                        <img src="" class="img-child">
                        <div class="media-body media-right">
                            <h3 class="modal-title mb-1 teacher-name" id="">John Wilson</h3>
                            <p class="mb-0 added-by"></p>
                        </div>
                    </div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2 pb-0">
                    <div class="">
                        <div class="row">
                            <div class="col-md-6 form-group ">
                                <label class="mb-3">Select reason</label>
                                <select class="form-control wide select2-custom" name="reason" data-placeholder="Select reason" id="reqHolidayType">
                                    <option value="">Select reason</option>
                                    @foreach (config('constant.annual_leave_types') as $lt)
                                        <option value="{{$lt}}">{{$lt}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 form-group other-section" style="display: none">
                                <label class="mb-3">Enter reason</label>
                                <input type="text" name="otherHolidayTypeTitle" id="req-otherHolidayTypeTitle" class="form-control" placeholder="Example: Christmas Break" />
                            </div>
                        </div>
                        <div class="row date-group">
                            <div class="col-md-6 form-group ">
                                <label class="mb-3">From date</label>
                                <div class="flatpicker position-relative">
                                    <span class="flatpickr-arrow"></span>
                                    <input type="text" class="form-control flatpickr flatpickr-input from-date" name="fromDate" value="" placeholder="" autocomplete="off">
                                </div>
                            </div>
                            <div class="col-md-6 form-group ">
                                <label class="mb-3">To date</label>
                                <div class="flatpicker position-relative">
                                    <span class="flatpickr-arrow"></span>
                                    <input type="text" class="form-control flatpickr flatpickr-input to-date" name="toDate" value="" placeholder="" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label class="mb-3">Is the leave paid?</label>
                                <div class="custom-control-inline">
                                    <div class="custom-control custom-radio mb-2 mr-3">
                                        <input type="radio" id="req-paid-yes" name="is_paid" class="is-paid custom-control-input" data-error="is-paid-error" value="1">
                                        <label class="custom-control-label" for="req-paid-yes">Yes</label>
                                    </div>
                                    <div class="custom-control custom-radio mb-2">
                                        <input type="radio" id="req-paid-no" name="is_paid" class="is-paid custom-control-input" data-error="is-paid-error" value="0">
                                        <label class="custom-control-label" for="req-paid-no">No</label>
                                    </div>
                                    <div class="is-paid-error"></div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label class="mb-3">Your comments</label>
                                <textarea class="form-control" name="comment" value="" placeholder="Type your comments here…" rows="5"></textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label class="mb-3">Supporting evidence</label>
                                <div class="col-12 px-0">
                                    <div class="upload-file">
                                        <i class="icon-cross"></i>
                                        <i class="icon-plus"></i>
                                        <i class="icon-pdf"></i>
                                        <img src="" class="icon-image" />
                                        <input type="file" name="image" id="req-image" data-error="uploadfile-error">
                                        <input type="hidden" class="remove-image" name="removeEvidence" id="req-removeEvidence" value="0">
                                    </div>
                                    <span class="file-name"></span>
                                    <div class="uploadfile-error"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-min-width">Save changes</button>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('script-bottom')
<script defer src="{{ Helper::assets('assets/libs/moment/moment.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/fullcalendar-core/main.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/fullcalendar-bootstrap/main.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/fullcalendar-daygrid/main.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/fullcalendar-interaction/main.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/validation/validate.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/validation/additional-methods.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/sweetalert/sweetalert.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/select2/select2.min.js') }}"></script>.
<script defer src="{{ Helper::assets('assets/libs/flatpickr/flatpickr.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/multiselect/bootstrap.multiselect.min.js') }}" type="text/javascript"></script>
<script type="text/javascript">
    var createScheduleUrl = "{{ route('roster.create', ['t' => 'teachers', 'type' => 'types']) }}", changeUrl = "{{ route('roster.change.tab') }}", getRosterSchedule = "{{ route('roster.teacher') }}", removeHolidayUrl="{{ route('roster.remove.holiday') }}", getLeaveRequestUrl = "{{ route('roster.leave.requests') }}", changeStatusLeaveRequestUrl = "{{ route('roster.leave.requests.change-status') }}";
    var selected_id = "{{ $user ?? '' }}";
    var annual_leave_types = @json($annual_leave_types);
</script>
<script defer src="{{ Helper::assets('assets/js/pages/roster-calendar.init.js') }}?{{time()}}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/js/pages/roster-schedule.js') }}?{{time()}}" type="text/javascript"></script>

<script type="text/javascript">
    var roster_settings_url = "{{ route('roster.settings') }}";

    $(document).ready(function() {
        $(document).on('change', '.input-setting', function(){
            var status = $(this).prop('checked') ? 1 : 0;
            var type = $(this).val();
            $.ajax({
                url: roster_settings_url,
                type: "POST",
                cache: false,
                data: { type: type, status: status },
                success: function (response) {
                    if(typeof response.status !== "undefined" && response.status != "" && response.status == true){successToast(response.message)}else {errorToast(response.message)}
                }
            });
        });
    });
</script>
@endsection