@extends('layouts.vertical')

@section('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" />
@endsection

@php
    $is_teacher = "";
    $is_teacher_exist = false;
    if(app('request')->input('t')){
        $is_teacher = app('request')->input('t');
    }
@endphp

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-sm-6 col-xl-6">
        <h4 class="mb-1 mt-0 font-weight-medium">Add new schedule</h4>
    </div>
    <div class="col-sm-6 col-xl-6">
        <div class="form-inline float-sm-right mt-3 mt-sm-0">
            <div class="btn-group">
                <button type="button" class="btn btn-success btn-min-width add-schedule" onclick="event.preventDefault();document.getElementById('save').click();">Save</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <form method="post" action="{{ route('roster.save') }}" class="schedule-form">
            @csrf
            <input type="hidden" name="isTeachers" value="{{ $type }}">
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center mb-3">
                        <div class="col-auto">
                            @if($type == 1)
                            <h5 class="font-size-18">List of teachers</h5>
                            <p class="mb-sm-0 mb-3">Tap to select the teachers.</p>
                            @elseif($type == 2)
                            <h5 class="font-size-18">List of other staff</h5>
                            <p class="mb-sm-0 mb-3">Tap to select the other staff members.</p>
                            @endif
                        </div>
                        {{-- <div class="col-auto ml-sm-auto">
                            <div class="checkbox big checkbox-pink">
                                <input type="checkbox" name="selectAll" id="selectAll" value="0">
                                <label for="selectAll" class="pt-2">
                                    Select all teachers
                                </label>
                            </div>
                        </div> --}}
                    </div>
                    <div class="childs row">
                        @if(isset($rosters) && !empty($rosters))
                            @foreach($rosters as $teacher)
                            <div class="col text-center child-item mb-sm-3 mb-2">
                                <label>
                                    <input type="checkbox" class="checkbox-child" name="users[]" value="{{$teacher->_id}}" {{ $is_teacher == $teacher->_id ? 'checked' : '' }} data-error="child-error">
                                    <div class="child-image position-relative ">
                                        <i class="uil uil-check icon-check"></i>
                                        <img src="{{ $teacher->profileImage }}" class="img-child medium" alt="Teacher" />
                                        <h5 class="mt-2 mb-0 font-size-18">{{$teacher->firstName}} {{$teacher->lastName}}</h5>
                                    </div>
                                </label>
                            </div>
                            @php $is_teacher_exist = true; @endphp
                            @endforeach
                        @endif
                        @if(!$is_teacher_exist)
                        <div class="text-left col-md">
                            <p>No teachers found</p>
                            <a href="{{ route('roster') }}" class="btn btn-success">Back</a>
                        </div>
                        @endif
                        <div class="child-error col-12"></div>
                    </div>
                    @if($is_teacher_exist)
                    <div class="row border-bottom mb-4 mt-3 mx-n5"></div>
                    <div class="mt-3 section-repeater" data-startingIndex="1">
                        <div class="r-group">
                            <input type="hidden" class="form-control" name="schedules[0][break]" value="false">
                            <div class="row">
                                <div class="col-lg-3 order-lg-1 order-2">
                                    <div class="form-group row">
                                        <label class="col-lg-12 font-weight-medium">Select room</label>
                                        <div class="col-lg-12">
                                            <select class="form-control wide room" data-plugin="customselect" name="schedules[0][room]" data-placeholder="Select room" data-pattern="schedules[++][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>
                                <div class="col-lg-1 col-auto ml-auto order-lg-4 order-1 input-group-append justify-content-end" style="visibility:hidden;">
                                    <span class="d-none d-lg-block mt-2">&nbsp;</span>
                                    <span class="input-group-btn mt-lg-4">
                                        <a href="javascript:void(0);" class="text-danger r-btnRemove mt-1"><i class="uil uil-multiply"></i></a>
                                    </span>
                                </div>
                                <div class="col-lg-4 order-lg-2 order-3 px-lg-0 pl-lg-2">
                                    <div class="row">
                                        <div class="col-md-12 custom-control-inline">
                                            <div class="custom-control custom-radio mb-2 mr-3">
                                                <input type="radio" id="schedules0type0" name="schedules[0][dayType]" class="day-type custom-control-input" data-id-pattern="schedules++type0" value="0" data-error="day-type-error" checked>
                                                <label class="custom-control-label" for="schedules0type0">Weekdays</label>
                                            </div>
                                            <div class="custom-control custom-radio mb-2">
                                                <input type="radio" id="schedules0type1" name="schedules[0][dayType]" class="day-type custom-control-input" data-id-pattern="schedules++type1" value="1" data-error="day-type-error">
                                                <label class="custom-control-label" for="schedules0type1">Calendar dates</label>
                                            </div>
                                            <div class="day-type-error"></div>
                                        </div>
                                        <div class="col-md-12 calendar-option" style="display:none;">
                                            <div class="row">
                                                <div class="col-lg mb-2 mb-lg-0">
                                                    <div class="flatpickr-custom">
                                                        <span class="flatpickr-arrow"></span>
                                                        <input type="text" class="form-control date-multiple" name="schedules[0][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-lg-auto mb-2 mb-lg-0">
                                                    <div class="checkbox big checkbox-pink d-inline-block">
                                                        <input type="checkbox" class="checkbox" name="schedules[0][cover]" data-id-pattern="schedules++Cover0" id="schedules0Cover" value="1" data-error="days-error">
                                                        <label for="schedules0Cover" class="pt-2">Cover</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-12 weekday-option">
                                            <div class="form-group row">
                                                <div class="col-lg">
                                                    <div class="checkbox-tag checkbox-success d-inline-block">
                                                        <input type="checkbox" class="checkbox schedule-days" name="schedules[0][days][]" data-id-pattern="schedules++days1" id="schedules0days1" value="1" data-error="days-error">
                                                        <label for="schedules0days1">M</label>
                                                    </div>
                                                    <div class="checkbox-tag checkbox-success d-inline-block">
                                                        <input type="checkbox" class="checkbox schedule-days" name="schedules[0][days][]" data-id-pattern="schedules++days2" id="schedules0days2" value="2" data-error="days-error">
                                                        <label for="schedules0days2">T</label>
                                                    </div>
                                                    <div class="checkbox-tag checkbox-success d-inline-block">
                                                        <input type="checkbox" class="checkbox schedule-days" name="schedules[0][days][]" data-id-pattern="schedules++days3" id="schedules0days3" value="3" data-error="days-error">
                                                        <label for="schedules0days3">W</label>
                                                    </div>
                                                    <div class="checkbox-tag checkbox-success d-inline-block">
                                                        <input type="checkbox" class="checkbox schedule-days" name="schedules[0][days][]" data-id-pattern="schedules++days4" id="schedules0days4" value="4" data-error="days-error">
                                                        <label for="schedules0days4">T</label>
                                                    </div>
                                                    <div class="checkbox-tag checkbox-success d-inline-block">
                                                        <input type="checkbox" class="checkbox schedule-days" name="schedules[0][days][]" data-id-pattern="schedules++days5" id="schedules0days5" value="5" data-error="days-error">
                                                        <label for="schedules0days5">F</label>
                                                    </div>
                                                    <div class="checkbox-tag checkbox-success d-inline-block">
                                                        <input type="checkbox" class="checkbox schedule-days" name="schedules[0][days][]" data-id-pattern="schedules++days6" id="schedules0days6" value="6" data-error="days-error">
                                                        <label for="schedules0days6">S</label>
                                                    </div>
                                                    <div class="checkbox-tag checkbox-success d-inline-block">
                                                        <input type="checkbox" class="checkbox schedule-days" name="schedules[0][days][]" data-id-pattern="schedules++days0" id="schedules0days0" value="0" data-error="days-error">
                                                        <label for="schedules0days0">S</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-12 days-error"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 order-lg-3 order-4">
                                    <div class="form-group row">
                                        <label class="col-lg-12 font-weight-medium">Select time</label>
                                        <div class="col-lg-12">
                                            <div class="row">
                                                <div class="col">
                                                    <span class="flatpickr-arrow"></span>
                                                    <input type="text" class="form-control flatpickr flatpickr-time fromTime" name="schedules[0][fromTime]" value="0" placeholder="" data-pattern="schedules[++][fromTime]">
                                                </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-time toTime" name="schedules[0][toTime]" value="60" placeholder="" data-pattern="schedules[++][toTime]">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row border-bottom mb-4 mt-3 mx-n5"></div>
                        </div>
                        <div class="pt-3 btn-div">
                            <button type="button" class="btn btn-success r-btnAdd">Add another</button>
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            @if($is_teacher_exist)
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center mb-3">
                        <div class="col-auto"><h5 class="font-size-18">Add break</h5><p class="mb-sm-0 mb-3">You can add predefined breaks for selected teachers.</p></div>
                    </div>
                    <div class="mt-3 section-repeater" data-startingIndex="1">
                        <div class="r-group d-none">
                            <input type="hidden" class="form-control" name="breaks[0][break]" value="true">
                            <div class="row">
                                <div class="col-lg-4 order-lg-1 order-2">
                                    <div class="form-group row">
                                        <label class="col-lg-12 font-weight-medium">Select start and end time</label>
                                        <div class="col-lg-12">
                                            <div class="row">
                                                <div class="col">
                                                    <span class="flatpickr-arrow"></span>
                                                    <input type="text" class="form-control flatpickr not-validate flatpickr-time fromTime" name="breaks[0][fromTime]" value="0" placeholder="" data-pattern="breaks[++][fromTime]">
                                                </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 not-validate flatpickr-time toTime" name="breaks[0][toTime]" value="60" placeholder="" data-pattern="breaks[++][toTime]">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-1 col-auto ml-auto order-lg-3 order-1 input-group-append justify-content-end" style="visibility:hidden;">
                                    <span class="d-none d-lg-block mt-2">&nbsp;</span>
                                    <span class="input-group-btn mt-lg-4">
                                        <a href="javascript:void(0);" class="text-danger r-btnRemove mt-1"><i class="uil uil-multiply"></i></a>
                                    </span>
                                </div>
                                <div class="col-lg-4 order-lg-2 order-3 px-lg-0 pl-lg-2">
                                    <div class="row">
                                        <div class="col-md-12 custom-control-inline">
                                            <div class="custom-control custom-radio mb-2 mr-3">
                                                <input type="radio" id="breaks0type0" name="breaks[0][dayType]" class="day-type custom-control-input not-validate" data-id-pattern="breaks++type0" value="0" data-error="day-type-error" checked>
                                                <label class="custom-control-label" for="breaks0type0">Weekdays</label>
                                            </div>
                                            <div class="custom-control custom-radio mb-2">
                                                <input type="radio" id="breaks0type1" name="breaks[0][dayType]" class="day-type custom-control-input not-validate" data-id-pattern="breaks++type1" value="1" data-error="day-type-error">
                                                <label class="custom-control-label" for="breaks0type1">Calendar dates</label>
                                            </div>
                                            <div class="day-type-error"></div>
                                        </div>
                                        <div class="col-md-12 calendar-option" style="display:none;">
                                            <div class="row">
                                                <div class="col-lg mb-2 mb-lg-0">
                                                    <div class="flatpickr-custom">
                                                        <span class="flatpickr-arrow"></span>
                                                        <input type="text" class="form-control date-multiple" name="breaks[0][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>
                                        </div>
                                        <div class="col-md-12 weekday-option">
                                            <div class="form-group row">
                                                <div class="col-lg">
                                                    <div class="checkbox-tag checkbox-success d-inline-block">
                                                        <input type="checkbox" class="checkbox schedule-days not-validate" name="breaks[0][days][]" data-id-pattern="breaks++days1" id="breaks0days1" value="1" data-error="days-error">
                                                        <label for="breaks0days1">M</label>
                                                    </div>
                                                    <div class="checkbox-tag checkbox-success d-inline-block">
                                                        <input type="checkbox" class="checkbox schedule-days not-validate" name="breaks[0][days][]" data-id-pattern="breaks++days2" id="breaks0days2" value="2" data-error="days-error">
                                                        <label for="breaks0days2">T</label>
                                                    </div>
                                                    <div class="checkbox-tag checkbox-success d-inline-block">
                                                        <input type="checkbox" class="checkbox schedule-days not-validate" name="breaks[0][days][]" data-id-pattern="breaks++days3" id="breaks0days3" value="3" data-error="days-error">
                                                        <label for="breaks0days3">W</label>
                                                    </div>
                                                    <div class="checkbox-tag checkbox-success d-inline-block">
                                                        <input type="checkbox" class="checkbox schedule-days not-validate" name="breaks[0][days][]" data-id-pattern="breaks++days4" id="breaks0days4" value="4" data-error="days-error">
                                                        <label for="breaks0days4">T</label>
                                                    </div>
                                                    <div class="checkbox-tag checkbox-success d-inline-block">
                                                        <input type="checkbox" class="checkbox schedule-days not-validate" name="breaks[0][days][]" data-id-pattern="breaks++days5" id="breaks0days5" value="5" data-error="days-error">
                                                        <label for="breaks0days5">F</label>
                                                    </div>
                                                    <div class="checkbox-tag checkbox-success d-inline-block">
                                                        <input type="checkbox" class="checkbox schedule-days not-validate" name="breaks[0][days][]" data-id-pattern="breaks++days6" id="breaks0days6" value="6" data-error="days-error">
                                                        <label for="breaks0days6">S</label>
                                                    </div>
                                                    <div class="checkbox-tag checkbox-success d-inline-block">
                                                        <input type="checkbox" class="checkbox schedule-days not-validate" name="breaks[0][days][]" data-id-pattern="breaks++days0" id="breaks0days0" value="0" data-error="days-error">
                                                        <label for="breaks0days0">S</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-12 days-error"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row border-bottom mb-4 mt-3 mx-n5"></div>
                        </div>
                        <div class="no-records d-block mb-2"></div>
                        <div class="pt-3 btn-div">
                            <button type="button" class="btn btn-success r-btnAdd">Add another</button>
                        </div>
                    </div>
                </div>
            </div>
            @endif
            @if($is_teacher_exist)
            <div class="mt-3">
                <button type="submit" class="btn btn-success btn-min-width" id="save">Save</button>
            </div>
            @endif
        </form>
    </div>
</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/validation/validate.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/js/pages/roster-schedule-add.js') }}" type="text/javascript"></script>
@endsection