@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/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-md-auto">
        <h4 class="mb-1 mt-0 font-weight-medium">Ratios</h4>
        <p class="mb-0">Select a date to view ratios for all rooms. To add or edit room ratios, select <a href="{{route('room') }}">Rooms</a>, three grey dots next to the room name you’d like to edit > edit room > room ratio</p>
    </div>
</div>
@endsection

@section('content')
<div class="row attendancce-calendar ratios">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-auto">
                        <div class="row form-group">
                            <label class="col-auto col-form-label font-weight-medium">Select month</label>
                            <div class="col-xl-6 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')}}">
                            </div>
                        </div>
                    </div>
                </div>
                <div id="calendar"></div>
                <div class="row border-bottom mt-3 mb-5 mx-n5"></div>
                <div class="row ratios-listing"></div>
            </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 type="text/javascript"> var getRosterSchedule = "{{ route('roster.ratios') }}"; </script>
<script defer src="{{ Helper::assets('assets/js/pages/roster-ratios-calendar.js') }}" type="text/javascript"></script>
@endsection