@extends('layouts.app')

@section('title', 'Calendrier - L\'unique Création')

@push('styles')
    <link href="{{ asset('/assets/vendor/fullcalendar/css/main.min.css') }}" rel="stylesheet">
    <!-- Toastr -->
    <link rel="stylesheet" href="{{ asset('/assets/vendor/toastr/css/toastr.min.css') }}">
    <link href="{{ asset('/assets/vendor/sweetalert2/dist/sweetalert2.min.css') }}" rel="stylesheet">
@endpush

@section('content')

    <div class="container-fluid">

        <div class="row">
            @role('admin')
            <div class="col-xl-3 col-xxl-4">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-intro-title mb-3">A PLANIFIER</h4>
                                <div id="external-events">
                                    <p class="mb-2">Glissez-déposez l'événement non planifié</p>
                                    <div class="input-group search-area w-100">
                                        <input type="text" class="form-control" placeholder="Rechercher un projet" id="searchUnplannedEvents">
                                        <span class="input-group-text"><div class=""><i class="flaticon-381-search-2 fs-4"></i></div></span>
                                    </div>
                                    <hr>
                                    <div id="loaderUnplannedEvents" class="loader d-none"></div>
                                    <div class="unplanned-events">
                                        @include('calendrier.evenements-non-planifies', ['typeEvenements' => $typeEvenements])
                                    </div>
                                    <hr>
                                    @foreach ($typeEvenementsNonPrestation as $typeEvenementNonPrestation)
                                        <div class="external-event my-1 btn-{{ $typeEvenementNonPrestation->couleur }} light justify-content-between permanent-event" data-icon="{{ $typeEvenementNonPrestation->icon }}" data-class="bg-{{ $typeEvenementNonPrestation->couleur }}" data-type-id="{{ $typeEvenementNonPrestation->id }}">
                                            <div>
                                                <i class="fa fa-move"></i>
                                                <span class="client">{{ $typeEvenementNonPrestation->libelle }}</span>
                                            </div>
                                            <i class="fa-solid fa-{{ $typeEvenementNonPrestation->icon }} me-1"></i>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endrole
            <div class="@role('admin') col-xl-9 col-xxl-8 @else col-12 @endrole">
                <div class="card">
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-12 text-end order-0 order-xl-1">
                                <a href="webcal://{{ request()->getHost() }}/{{ auth()->user()->calendar_token }}/calendar.ics" class="btn btn-outline-primary" ><i class="fa-solid fa-rss me-1"></i>S'abonner</a>
                                <button type="button" class="btn btn-outline-dark" id="resetFiltresPlanning"><i class="fa-solid fa-times me-1"></i>Réinitialiser filtres</button>
                            </div>
                        </div>
                        @role('admin')
                        <div class="row">
                            <div class="col-lg-4 mb-3">
                                <label class="control-label form-label">Collaborateur(s)</label>
                                <select multiple class="filtre-planning default-select form-control wide" data-placeholder="Tous les collaborateurs" id="filtreCollaborateur">
                                    @foreach($planningUsers as $user)
                                        <option value="{{ $user['id'] }}" data-prenom="{{ substr($user['name'], 0, 1) }}">{{ $user['name'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-4 mb-3">
                                <label class="control-label form-label">Types d'événement</label>
                                <select class="filtre-planning form-control form-white" data-placeholder="Touts les types d'évenement" id="filtreTypeEvenement">
                                    <option value="">Tous les types d'événement</option>
                                    @foreach($typeEvenements as $typeEvenement)
                                        <option value="{{ $typeEvenement->id }}">{{ $typeEvenement->libelle }}</option>
                                    @endforeach
                                    <option value="autre">Autre</option>
                                </select>
                            </div>
                            <div class="col-lg-4 mb-3">
                                <label class="control-label form-label">Zone</label>
                                <select class="filtre-planning form-control form-white" data-placeholder="Toutes les zones" id="filtreZone">
                                    <option value="">Toutes les zones</option>
                                    <option value="nord">Nord</option>
                                    <option value="sud">Sud</option>
                                </select>
                            </div>
                        </div>
                        @endrole
                        <div class="row">
                            <div class="col-12 mb-3 order-1 order-xl-0">
                                <p class="control-label form-label">Légende</p>
                                @foreach($typeEvenements as $typeEvenement)
                                    <span class="text-{{ $typeEvenement->couleur }} fw-semibold pe-3"><i class="fa-solid fa-{{ $typeEvenement->icon }} me-1"></i>{{ $typeEvenement->libelle }}</span>
                                @endforeach
                            </div>
                        </div>
                        <div id="calendar" class="app-fullcalendar"></div>
                    </div>
                </div>
            </div>
            <div class="modal fade none-border" id="add-event">
                <form class="modal-dialog" id="newEventForm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title"><strong>Ajouter Evenement</strong></h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-12 mb-4">
                                    <label class="control-label form-label">Option 1 : Planifier un événement prédéfini</label>
                                    <select class="form-control dropdown-groups-planning w-100" name="id" id="selectEvent">
                                        <option value="" selected></option>
                                        @foreach ($typeEvenements as $typeEvenement)
                                            @if ($typeEvenement->plannings->isNotEmpty())
                                                <optgroup label="{{ $typeEvenement->libelle }}" id="select-{{ $typeEvenement->icon }}" data-order="{{ $typeEvenement->ordre }}">
                                                    @foreach ($typeEvenement->plannings as $event)
                                                    <option value="{{ $event->id }}" >#{{ $event->demande->id }} {{ $event->demande->client->nom }} {{ $event->demande->client->prenom }} - {{ $event->demande->client->ville }}</option>
                                                    @endforeach
                                                </optgroup>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label class="control-label form-label">Option 2 : Créer un autre événement</label>
                                    <input class="form-control form-white" type="text" name="customEvent" id="otherEvent">
                                </div>
                                <div class="feedbacks-form feedback-id"></div>
                            </div>
                            <hr>

                            <div class="row mb-2">
                                <div class="col-4">
                                    <div class="form-check custom-checkbox mb-0 text-dark">
                                        <label class="form-check-label" for="newJourneeEntiere">Jour entier</label>
                                        <input type="checkbox" class="form-check-input" name="isJourEntier" id="newJourneeEntiere">
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="form-check custom-checkbox mb-0 text-dark">
                                        <label class="form-check-label" for="newMatin">Matin</label>
                                        <input type="checkbox" class="form-check-input" name="isMatin" id="newMatin">
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="form-check custom-checkbox mb-0 text-dark">
                                        <label class="form-check-label" for="newApresMidi">Après-midi</label>
                                        <input type="checkbox" class="form-check-input" name="isApresMidi" id="newApresMidi">
                                    </div>
                                </div>
                            </div>

                            <div class="row align-items-end">
                                <div class="col-md-6 mb-4">
                                    <div class="mb-2">
                                        <label class="form-label font-w600">Début</label>
                                        <div class="input-hasicon">
                                            <input class="form-control bt-datepicker" name="startDate" id="newEventStartDate">
                                            <div class="icon"><i class="far fa-calendar"></i></div>
                                        </div>
                                    </div>
                                    <div>
                                        <select class="form-control form-white" name="startTime" id="newEventStartTime">
                                            <option value="06:00">6h00</option>
                                            <option value="06:30">6h30</option>
                                            <option value="07:00">7h00</option>
                                            <option value="07:30">7h30</option>
                                            <option value="08:00">8h00</option>
                                            <option value="08:30">8h30</option>
                                            <option value="09:00">9h00</option>
                                            <option value="09:30">9h30</option>
                                            <option value="10:00">10h00</option>
                                            <option value="10:30">10h30</option>
                                            <option value="11:00">11h00</option>
                                            <option value="11:30">11h30</option>
                                            <option value="12:00">12h00</option>
                                            <option value="12:30">12h30</option>
                                            <option value="13:00">13h00</option>
                                            <option value="13:30">13h30</option>
                                            <option value="14:00">14h00</option>
                                            <option value="14:30">14h30</option>
                                            <option value="15:00">15h00</option>
                                            <option value="15:30">15h30</option>
                                            <option value="16:00">16h00</option>
                                            <option value="16:30">16h30</option>
                                            <option value="17:00">17h00</option>
                                            <option value="17:30">17h30</option>
                                            <option value="18:00">18h00</option>
                                            <option value="18:30">18h30</option>
                                            <option value="19:00">19h00</option>
                                            <option value="19:30">19h30</option>
                                            <option value="20:00">20h00</option>
                                            <option value="20:30">20h30</option>
                                            <option value="21:00">21h00</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="mb-2">
                                        <label class="form-label font-w600">Fin</label>
                                        <div class="input-hasicon">
                                            <input class="form-control bt-datepicker" name="endDate" id="newEventEndDate">
                                            <div class="icon"><i class="far fa-calendar"></i></div>
                                        </div>
                                    </div>
                                    <div>
                                        <select class="form-control form-white" name="endTime" id="newEventEndTime">
                                            <option value="06:00">6h00</option>
                                            <option value="06:30">6h30</option>
                                            <option value="07:00">7h00</option>
                                            <option value="07:30">7h30</option>
                                            <option value="08:00">8h00</option>
                                            <option value="08:30">8h30</option>
                                            <option value="09:00">9h00</option>
                                            <option value="09:30">9h30</option>
                                            <option value="10:00">10h00</option>
                                            <option value="10:30">10h30</option>
                                            <option value="11:00">11h00</option>
                                            <option value="11:30">11h30</option>
                                            <option value="12:00">12h00</option>
                                            <option value="12:30">12h30</option>
                                            <option value="13:00">13h00</option>
                                            <option value="13:30">13h30</option>
                                            <option value="14:00">14h00</option>
                                            <option value="14:30">14h30</option>
                                            <option value="15:00">15h00</option>
                                            <option value="15:30">15h30</option>
                                            <option value="16:00">16h00</option>
                                            <option value="16:30">16h30</option>
                                            <option value="17:00">17h00</option>
                                            <option value="17:30">17h30</option>
                                            <option value="18:00">18h00</option>
                                            <option value="18:30">18h30</option>
                                            <option value="19:00">19h00</option>
                                            <option value="19:30">19h30</option>
                                            <option value="20:00">20h00</option>
                                            <option value="20:30">20h30</option>
                                            <option value="21:00">21h00</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="feedbacks-form feedback-start feedback-end"></div>
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-12 mb-4">
                                    <label class="control-label form-label" for="newParticipantsEvent">Participant(s)</label>
                                    <select multiple class="default-select form-control wide" data-placeholder="Sélectionnez une ou plusieurs personnes..." name="participant" id="newParticipantsEvent">
                                        @foreach($planningUsers as $user)
                                            <option value="{{ $user['id'] }}" data-prenom="{{ substr($user['name'], 0, 1) }}">{{ $user['name'] }}</option>
                                        @endforeach
                                    </select>
                                    <div class="feedbacks-form feedback-participants"></div>
                                </div>
                                <div class="col-12">
                                    <label class="form-label" for="newInfosEvent">Informations complémentaires</label>
                                    <textarea class="form-control" rows="3" name="description" id="newInfosEvent"></textarea>
                                </div>
                            </div>
                        </div>
                        @role('admin')
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light waves-effect" data-bs-dismiss="modal">Fermer</button>
                            <button type="submit" class="btn btn-primary waves-effect waves-light">Ajouter</button>
                        </div>
                        @endrole
                    </div>
                </form>
            </div>

            @include('calendrier.evenement-modal')

        </div>
    </div>

@endsection

@push('scripts')
    <!-- Toastr -->
    <script src="{{ asset('assets/vendor/toastr/js/toastr.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/moment/moment.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/fullcalendar/js/main.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/sweetalert2/dist/sweetalert2.min.js') }}"></script>

    <script src="{{ asset('assets/js/plugins-init/fullcalendar-init.js') }}"></script>
@endpush