@extends('layouts.vertical')

@section('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-sm">
        <h4 class="mb-1 mt-0 font-weight-medium">Overlapping schedules</h4>
        <p class="font-size-16">If a child has any overlapping schedules, you can manage it here. We recommend removing any overlapping schedules, otherwise the child's invoice may show duplicate sessions and charges.</p>
    </div>
    <div class="col-md-auto">
        <div class="form-inline float-sm-right mt-3 mt-md-0">
            <div class="">
                <a href="{{route('schedule')}}" class="btn btn-pink btn-min-width m-1 btn-show" style="display: none">Manage attendance</a>
            </div>
        </div>
    </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 align-items-center">
                            <div class="col-xl-5 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="{{date('F Y')}}" data-date-end-date="0d">
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6">
                        <div class="row form-group">
                            <div class="col-md-6 mb-3 mb-md-0">
                                <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
                                </select>
                            </div>
                            <div class="col-md-6">
                                <select class="form-control wide select2-custom" name="child" id="children" data-placeholder="Select child">
                                    <option value="" selected>Select child</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>
                <div class="row border-bottom mt-3 mb-5 mx-n5"></div>
                <div class="has-data" style="display: none">
                    <div class="font-size-16 pb-3 d-none table-title">List of sessions</div>
                    <table id="datatable" class="table table-striped table-merging-rows dt-responsive" data-nodata="">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Sessions</th>
                                <th>Session timings</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <div class="no-data py-5 text-center">
                    <h3>No schedules</h3>
                    <p>This child has no overlapping schedules.</p>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    td.hidden { display: none }
    .table-striped tbody tr:nth-of-type(odd){background: transparent}
    .table-striped tbody tr.odd-column{background: #f4f4f4}
    .table th, .table td{border-top:none}
    .child-loader {position: absolute;width: 100%;z-index: 111;background: #ffffffd4;height: 100%;}
    </style>
@endsection

@section('script-bottom')
<script defer src="{{ Helper::assets('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/moment/moment.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/sweetalert/sweetalert.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/select2/select2.min.js') }}" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('[data-toggle="tooltip-info"]').tooltip({template:'<div class="tooltip tooltip-big" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'})
    })
</script>
<script type="text/javascript">var getChildSchedule = "{{route('billing.overlapping.schedules.list')}}"; </script>
<script defer src="{{ Helper::assets('assets/js/pages/overlapping-schedule.js') }}?{{time()}}" type="text/javascript"></script>
@endsection