@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

@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 annual leave</h4>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <form method="post" action="{{ route('roster.save.holiday') }}" class="holiday-form" enctype="multipart/form-data">
            @csrf
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center mb-3">
                        <div class="col-auto">
                            <h5 class="font-size-18">ECS educators</h5>
                            <p class="mb-sm-0 mb-3">Tap to select the educators.</p>
                        </div>
                        <div class="col-auto ml-sm-auto">
                            <div class="checkbox big checkbox-pink">
                                <input type="checkbox" class="selectAll" id="selectAll" value="0" data-type="teachers">
                                <label for="selectAll" class="pt-2">Select all educators</label>
                            </div>
                        </div>
                    </div>
                    <div class="teachers row">
                        @if(isset($rosters->teachers->scheduled) && !empty($rosters->teachers->scheduled))
                            @foreach($rosters->teachers->scheduled as $teacher)
                            <div class="col text-center child-item mb-sm-3 mb-2">
                                <label>
                                    <input type="checkbox" class="checkbox-child teacher-check" name="teachers[]" value="{{$teacher->_id}}" data-error="teachers-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>
                            @endforeach
                        @endif
                        @if(isset($rosters->teachers->nonScheduled) && !empty($rosters->teachers->nonScheduled))
                            @foreach($rosters->teachers->nonScheduled as $teacher)
                            <div class="col text-center child-item mb-sm-3 mb-2">
                                <label>
                                    <input type="checkbox" class="checkbox-child teacher-check" name="teachers[]" value="{{$teacher->_id}}" data-error="teachers-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>
                            @endforeach
                        @endif
                        <div class="teachers-error col-12"></div>
                    </div>
                    <div class="row border-bottom my-5 mx-n5"></div>
                    <div class="row align-items-center mb-3">
                        <div class="col-auto">
                            <h5 class="font-size-18">Other staff</h5>
                            <p class="mb-sm-0 mb-3">Tap to select the staff members.</p>
                        </div>
                        <div class="col-auto ml-sm-auto">
                            <div class="checkbox big checkbox-pink">
                                <input type="checkbox" class="selectAll" id="selectAll1" value="0" data-type="staffs">
                                <label for="selectAll1" class="pt-2">Select all staff</label>
                            </div>
                        </div>
                    </div>
                    <div class="staffs row">
                        @if(isset($rosters->staffs->scheduled) && !empty($rosters->staffs->scheduled))
                            @foreach($rosters->staffs->scheduled as $staff)
                            <div class="col text-center child-item mb-sm-3 mb-2">
                                <label>
                                    <input type="checkbox" class="checkbox-child staff-check" name="staffs[]" value="{{$staff->_id}}" data-error="staffs-error">
                                    <div class="child-image position-relative ">
                                        <i class="uil uil-check icon-check"></i>
                                        <img src="{{ $staff->profileImage }}" class="img-child medium" alt="staff" />
                                        <h5 class="mt-2 mb-0 font-size-18">{{$staff->firstName}} {{$staff->lastName}}</h5>
                                    </div>
                                </label>
                            </div>
                            @endforeach
                        @endif
                        @if(isset($rosters->staffs->nonScheduled) && !empty($rosters->staffs->nonScheduled))
                            @foreach($rosters->staffs->nonScheduled as $staff)
                            <div class="col text-center child-item mb-sm-3 mb-2">
                                <label>
                                    <input type="checkbox" class="checkbox-child staff-check" name="staffs[]" value="{{$staff->_id}}" data-error="staffs-error">
                                    <div class="child-image position-relative ">
                                        <i class="uil uil-check icon-check"></i>
                                        <img src="{{ $staff->profileImage }}" class="img-child medium" alt="staff" />
                                        <h5 class="mt-2 mb-0 font-size-18">{{$staff->firstName}} {{$staff->lastName}}</h5>
                                    </div>
                                </label>
                            </div>
                            @endforeach
                        @endif
                        <div class="staffs-error col-12"></div>
                    </div>
                    <div class="row border-bottom my-5 mx-n5"></div>
                    <div class="row mb-2">
                        <div class="col-md-6 col-xl-5">
                            <h5 class="font-size-16 pb-3">Set Annual Leave</h5>
                            <div class="form-group row">
                                <label class="col-xl-4 col-md-4 col-form-label">Select date</label>
                                <div class="col-xl-8 col-md-8">
                                    <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 dates</span>
                                    </div>
                                    <div class="dates-error"></div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-xl-4 col-md-4 col-form-label">Select reason</label>
                                <div class="col-xl-8 col-md-8">
                                    <select class="form-control" data-plugin="customselect" name="reason" id="holidayType" data-placeholder="Select reason">
                                        <option value="">Select reason</option>
                                        @foreach (config('constant.annual_leave_types') as $lt)
                                            <option value="{{$lt}}">{{$lt}}</option>
                                        @endforeach
                                    </select>
                                    <input type="text" name="otherHolidayTypeTitle" id="otherHolidayTypeTitle" class="form-control mt-3" placeholder="Example: Christmas Break" />
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-xl-4 col-md-4 col-form-label pt-0">Is the leave(s) paid?</label>
                                <div class="col-xl-8 col-md-8">
                                    <div class="custom-control-inline mb-3">
                                        <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>
                        <div class="col-md-6 col-xl-7">
                            <div class="row">
                                <div class="col-md-7">
                                    <div class="form-group">
                                        <label class="col-form-label pt-1 mb-1">Your comments</label>
                                        <textarea class="form-control" name="comment" value="" placeholder="Type your comments here…"  rows="5"></textarea>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="form-group">
                                        <label class="col-form-label pt-1 mb-1">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" class="image" data-error="uploadfile-error">
                                                <input type="hidden" class="remove-image" name="removeEvidence" value="0">
                                            </div>
                                            <div class="uploadfile-error"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-3">
                <button type="submit" class="btn btn-success btn-min-width" id="save">Add annual leave</button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('script-bottom')
<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-holiday-add.js') }}?{{time()}}" type="text/javascript"></script>
@endsection