@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" />
<link href="{{ Helper::assets('assets/libs/daterangepicker/daterangepicker.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 holiday</h4>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <form method="post" action="{{ route('schedule.save.holiday') }}" class="holiday-form">
            @csrf
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center mb-3">
                        <div class="col-md-3">
                            <select class="form-control wide" data-plugin="customselect" id="room" name="room" data-placeholder="Select room">
                                @if(isset($rooms) && !empty($rooms))
                                    @foreach ($rooms as $key => $room)
                                        <option value="{{$room->_id}}" {{ $key == 0 ? 'selected' : '' }}>For {{$room->name}}</option>
                                    @endforeach
                                @endif
                                <option value="-1">For entire school</option>
                            </select>
                        </div>
                        <div class="col-auto ml-sm-auto child-field">
                            <div class="checkbox big checkbox-pink">
                                <input type="checkbox" name="selectAll" id="selectAll" value="0">
                                <label for="selectAll" class="pt-2">
                                    Select all children
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="childs row child-field">
                        @if(isset($rooms) && !empty($rooms))
                            @foreach ($rooms as $room)
                                @if(isset($room->childList) && !empty($room->childList))
                                    @foreach ($room->childList as $child)
                                    <div class="col text-center child-item mb-sm-3 mb-2 child-item" data-room="{{$room->_id}}">
                                        <label>
                                            <input type="checkbox" class="checkbox-child" name="childs[]" value="{{$child->_id}}" data-error="child-error">
                                            <div class="child-image position-relative ">
                                                <i class="uil uil-check icon-check"></i>
                                                <img src="{{ $child->profileImage }}" class="img-child medium" alt="Child" />
                                                <h5 class="mt-2 mb-0 font-size-18">{{$child->name}}</h5>
                                            </div>
                                        </label>
                                    </div>
                                    @endforeach
                                @endif
                            @endforeach
                        @endif
                        <div class="child-error col-12"></div>
                    </div>
                    <div class="row border-bottom my-5 mx-n5"></div>
                    <h5 class="font-size-16 pb-3">Set holiday</h5>
                    <div class="row mb-2">
                        <div class="col-md-6 col-xl-4">
                            <div class="form-group">
                                <div class="custom-control-inline">
                                    <div class="custom-control custom-radio mb-2 mr-3">
                                        <input type="radio" id="customRadio112" name="type" class="add-type custom-control-input" checked value="1">
                                        <label class="custom-control-label" for="customRadio112">Select multiple dates</label>
                                    </div>
                                    <div class="custom-control custom-radio mb-2">
                                        <input type="radio" id="customRadio111" name="type" class="add-type custom-control-input" value="2">
                                        <label class="custom-control-label" for="customRadio111">Select date range</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row date-multiple">
                                <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 date-range" style="display: none">
                                <label class="col-xl-4 col-md-4 col-form-label">Select range</label>
                                <div class="col-xl-8 col-md-8">
                                    <div class="position-relative">
                                        <span class="flatpickr-arrow"></span>
                                        <input type="text" class="form-control dates" name="mdates" placeholder="Select date range" value="" data-error="mdates-error">
                                    </div>
                                    <div class="mdates-error"></div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-xl-4 col-md-4 col-form-label">Select Holiday Type</label>
                                <div class="col-xl-8 col-md-8">
                                    <select class="form-control" data-plugin="customselect" id="holidayType" data-placeholder="Select Holiday Type">
                                        {{-- @if(isset($rooms) && !empty($rooms)) --}}
                                        {{-- @foreach($rooms as $room) --}}
                                            <option value="holiday">Holiday</option>
                                            <option value="other">Other</option>
                                        {{-- @endforeach --}}
                                        {{-- @endif --}}
                                    </select>
                                    <input type="text" name="otherHolidayTypeTitle" id="otherHolidayTypeTitle" class="form-control" placeholder="Example: Christmas Break" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-3">
                <button type="submit" class="btn btn-success btn-min-width" id="save">Add holiday</button>
            </div>
        </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/daterangepicker/daterangepicker.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/holiday-add.js') }}?{{time()}}" type="text/javascript"></script>
@endsection