@extends('admin.layouts.full')

@section('title', 'Tableau de bord')
@push('styles')
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
    <style>
        .fc-slats tr {height: 50px; }
        .fc-axis { vertical-align: top; }
    </style>
@endpush

@section('content')
    <div class="row mb-5">
        <div class="col-12 col-md-4">
            <div class="card">
                <div class="card-header"><h5>Filtres</h5></div>
                <div class="card-body">
                    {{ Form::open(['route' => 'admin_dashboard', 'method' => 'GET']) }}
                        @if(!session()->get('refinery_id'))
                            {{ Form::select('refinery_id', $refineries, request()->get('refinery_id'), ['id' => 'refinery_id', 'class' => 'form-control']) }}<br>
                        @endif
                        {{ Form::select('admin_id', $admins, request()->get('admin_id'), ['id' => 'admin_id', 'class' => 'form-control']) }}<br>
                        {{ Form::select('room_id', $rooms, request()->get('room_id'), ['id' => 'room_id', 'class' => 'form-control']) }}<br>
                        {{ Form::select('module_id', $modules, request()->get('module_id'), ['id' => 'module_id', 'class' => 'form-control']) }}<br>
                        <button class="btn btn-primary">Filtrer</button>
                    {{ Form::close() }}
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header"><h5>Calendrier</h5></div>
        <div class="card-body">
            <div id="calendar"></div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/locale-all.js"></script>
    <script>
        $("#calendar").fullCalendar({
            defaultView: 'agendaWeek',
            header: {
                left: 'prev,next today',
                center: 'title',
                right : 'month,agendaWeek,agendaDay'
            },
            locale: 'fr',
            height: 700,
            firstDay: 1,
            allDaySlot: false,
            selectOverlap: true,
            views: {
                month: { columnHeaderFormat: 'ddd', displayEventEnd: true, eventLimit: 3 },
                week: { columnHeaderFormat: 'ddd DD', titleRangeSeparator: ' \u2013 ' },
                day: { columnHeaderFormat: 'dddd' },
            },
            minTime: '08:00',
            maxTime: '20:00',
            slotDuration: {hours: '1'},
            slotLabelInterval: {hours: '4'},
            slotEventOverlap: true,

            eventTextColor: '#fff',
            displayEventTime: true,
            events: {!! $calendar !!},
        });
    </script>
@endpush