@extends('layouts.admin')
@section('content')
    <div class="row pb-3">
        <div class="col-8">
            <font class="titulo">
                <i class="fa-regular fa-calendar-days"></i> Agenda
            </font>
        </div>
        <div class="col-4">
            <div class="botao-float-right" style="text-align: right;">
                <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#modalCalendar">
                    <i class="fas fa-plus-circle"></i>
                    {{ trans('global.add') }}
                </button>
                @include('_partials.faq')
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            @include('admin._includes.alerts')
            {{-- @include('admin.calendar.modal-calendar') --}}
            <div id="calendar" data-route-load-events="{{ route('admin.routeLoadEvents') }}"
                data-route-update-event="{{ route('admin.routeUpdateEvent') }}"
                data-route-store-event="{{ route('admin.routeStoreEvent') }}"
                data-route-delete-event="{{ route('admin.routeDeleteEvent') }}">
            </div>
            <div class="pt-3">
                <a href="{{ route('admin.home') }}" class="btn   btn-secondary"><i
                        class="fas fa-caret-left"></i> {{ trans('global.back') }}
                </a>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalCalendar" tabindex="-1" aria-labelledby="titleModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <div style="flex-direction:column;">
                        <h4 class="modal-title">Agenda</h4>
                        <span style="font-size:12px; color:rgb(0, 140, 255);">
                            Se a agenda for para o dia inteiro, deixar data inicial e data final com 01 (um) dia de
                            diferença, hora inicial e hora final como 00:00
                        </span>
                    </div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body pb-0 pt-2">
                    <div id="message"></div>
                    <form id="formEvent">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="title">
                                        Título
                                    </label>
                                    <input type="hidden" name="id">
                                    <input type="text" id="title" name="title" class="form-control" autofocus>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-xl-6 col-sm-6">
                                <div class="form-group">
                                    <label for="start_date">
                                        Data Inicial
                                    </label>
                                    <input type="date" max="2999-12-31" name="start_date" id="start_date" class="form-control">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-xl-6 col-sm-6">
                                <div class="form-group">
                                    <label for="title">
                                        Hora Inicial
                                    </label>
                                    <input type="time" name="start_time" id="start_time" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-xl-6 col-sm-3">
                                <div class="form-group">
                                    <label for="end_date">
                                        Data Final
                                    </label>
                                    <input type="date" max="2999-12-31" name="end_date" id="end_date" class="form-control">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-xl-6 col-sm-3">
                                <div class="form-group">
                                    <label for="title">
                                        Hora Final
                                    </label>
                                    <input type="time" name="end_time" id="end_time" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="color">
                                        Cor da Agenda
                                    </label>
                                    <input type="color" name="color" id="color" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="description">
                                        Descrição
                                    </label>
                                    <textarea name="description" id="description" cols="40" rows="2" class="form-control"></textarea>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="row ml-2 mr-2 pb-3">
                    <div class="col-6">
                        <button type="button" class="btn btn-sm btn-success saveEvent"><i class="fas fa-save"></i>
                            Gravar</button>
                        <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal"><i
                                class="fas fa-undo-alt"></i> Voltar</button>
                    </div>
                    <div class="col-6 botao-float-right" style="text-align:right;">
                        <button type="button" class="btn btn-sm btn-danger deleteEvent"><i class="fas fa-trash"></i>
                            Excluir</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('scripts')
    <script src='{{ asset('assets/fullcalendar/lib/main.js') }}'></script>
    <script>
        let objCalendar;
    </script>
    <script src='{{ asset('assets/fullcalendar/js/script.js') }}'></script>
    <script src='{{ asset('assets/fullcalendar/lib/locales-all.js') }}'></script>
    <script src='{{ asset('assets/fullcalendar/js/calendar.js') }}'></script>
    <script>
        $('#modalCalendar').on('shown.bs.modal', function() {
            $('#title').focus()
        })
    </script>
@stop