@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/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/datatables/responsive.bootstrap4.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/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@php
    $selected_child = $selected_room = "";
    if(app('request')->input('child')){
        $selected_child = app('request')->input('child');
    }
    if(app('request')->input('room')){
        $selected_room = app('request')->input('room');
    }
@endphp

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-xl">
        <h4 class="mb-1 mt-0 font-weight-medium">Holidays</h4>
        <p>If you are using Billing Parents, please note that any holidays added here, will not be included in parental invoices (e.g. parents are not charged for any holiday periods). Any holidays added here are also reflected in the attendance schedule. <b>Subscription packages are not linked to attendance schedules or holidays. If you are using subscription packages, you’ll need to stop recurring billing manually for any holiday periods.</b></p>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-xl-6">
                        <div class="row form-group">
                            <div class="col-xl-6 mb-3 mb-xl-0 mb-3">
                                <select class="form-control wide single-arrow" data-plugin="customselect" name="room" id="room" data-placeholder="Select room">
                                    @if(isset($rooms) && !empty($rooms))
                                        @foreach ($rooms as $key => $room)
                                            @if(isset($room->childList) && !empty($room->childList))
                                                <option value="{{ $room->_id }}" {{ ($selected_room != "" && $selected_room == $room->_id) || ($selected_room == "" && $key== 0) ? 'selected' : ''}}>{{ $room->name }}</option>
                                            @endif
                                        @endforeach
                                    @endif
                                    <option value="-1">For entrire school</option>
                                </select>
                            </div>
                            <div class="col-xl-6 section-child">
                                <select class="form-control wide select2-custom" name="child" id="children" data-placeholder="Select child">
                                    <option value="-1" selected data-count="0">All children</option>
                                    @if(isset($rooms) && !empty($rooms))
                                        @foreach ($rooms as $key => $room)
                                            @if(isset($room->childList) && !empty($room->childList))
                                                @foreach ($room->childList as $child)
                                                    <option value="{{ $child->_id }}" {{ ($selected_room != "" && $selected_room == $room->_id) || ($selected_room == "" && $key== 0) ? '' : 'disabled'}} {{ ($selected_child != "" && $selected_child == $child->_id) ? 'selected' : ''}} data-room="{{ $room->_id }}" data-image="{{ $child->profileImage }}">{{ $child->name }}</option>
                                                @endforeach
                                            @endif
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 text-right">
                        <a href="{{ route('schedule.add.holiday') }}" class="btn btn-success btn-min-width mb-md-0 mb-2 mr-2">Add holiday</a>
                    </div>
                </div>
                <div class="border-bottom mx-n5 my-4"></div>
                <div class="">
                    <div class="row justify-content-between">
                        <div class="col-xl-3 col-md-6 mb-3 mb-md-0">
                            <span class="flatpickr-arrow"></span>
                            <input type="text" class="form-control" id="month" name="month" value="{{date('F Y')}}">
                        </div>
                        <div class="col-md-auto">
                            <div class="btn-group" role="group" aria-label="Basic example">
                                <button id="calendarView" type="button" class="btn btn-pink">Calendar</button>
                                <button id="listView" type="button" class="btn btn-light-pink">List</button>
                            </div>
                        </div>
                    </div>
                    <div id="calendar"></div>
                    <div id="list" class="mt-3" style="display: none">
                        <div class="event-loader pt-3" style="display:none;">Loading...</div>
    
                        <table id="datatable" class="table table-striped dt-responsive has-data" data-nodata="" style="display: none">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Holiday</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        <div class="no-data" style="display: none">
                            Holidays not found
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal modal-extra-large fade" id="removeHolidays" 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">
                <div class="row">
                    <div class="col-md">
                        <div class="media">
                            <div class="media-body media-right">
                                <h3 class="modal-title mb-1 child-name" id="">Holiday</h3>
                                <p class="mb-0">You’ve added this holiday for <span class="selected-children">all children</span> in <span class="room-name"></span>.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-auto mt-2 mt-md-0 child-field">
                        <div class="checkbox big checkbox-pink">
                            <input type="checkbox" name="selectAll" id="selectAll" value="0">
                            <label for="selectAll" class="pt-2">
                                Deselect all children
                            </label>
                        </div>
                    </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">
                    <div class="col-md-12 children-list"></div>
                    <div class="col-md child-errors"></div>
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-pink btn-min-width update-holiday">Update holiday</button>
            </div>
        </div>
    </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/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/datatables/jquery.dataTables.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/datatables/dataTables.responsive.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/datatables/dataTables.bootstrap4.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 type="text/javascript"> var getHolidayUrl = "{{ route('holidays.list') }}", removeHolidayUrl="{{ route('schedule.remove.holiday') }}", removeMultipleHolidayUrl="{{ route('schedule.remove.multiple.holiday') }}"; </script>
<script defer src="{{ Helper::assets('assets/js/pages/holiday.js') }}?v=2" type="text/javascript"></script>
@endsection