@extends('layouts.app')

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

@push('styles')
    <link href="{{ asset('/assets/vendor/fullcalendar/css/main.min.css') }}" rel="stylesheet">
    <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-12 col-xxxl-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 events-container-mh-50vh">
                                        @include('calendrier.liste-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-12 col-xxxl-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 multiple class="filtre-planning default-select form-control wide" data-placeholder="Touts les types d'évenement" id="filtreTypeEvenement">
                                    @foreach($typeEvenements as $typeEvenement)
                                        <option value="{{ $typeEvenement->id }}">{{ $typeEvenement->libelle }}</option>
                                    @endforeach
                                    <option value="null">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="legende text-{{ $typeEvenement->couleur }} fw-semibold pe-3" id="legende{{ $typeEvenement->id }}"><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>

            @include('calendrier.new-evenement-modal')

            @include('calendrier.display-evenement-modal')

            @include('calendrier.duplicate-modal')

            @include('calendrier.note-modal')

        </div>
    </div>

@endsection

@push('scripts')
    <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