@extends('layouts.base2')

@section('title', "Interface d'envoi de la pièce à un tiers")

@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput.min.js"></script>
@endpush

@section('titlePage')
     <h3 class="m-0" style="color:  #18528d;"><i class="fa-solid fa-file-arrow-up"></i> Envoi de pièce</h3>
@endsection

@section('content')
    <div class="container py-4">

        <div class="row justify-content-center">
            <div class="col-lg-8 col-sm-8">
                <form method="POST" action="{{ route('envoyer.piece') }}" autocomplete="on" enctype="multipart/form-data" class="card shadow-lg border-0 rounded-4">
                    @csrf
                    <div class="card-header card-header text-white border-0 text-center" style="background-color:  #18528d; color: #fff">
                        <h5 class="mb-0"><i class="fa-solid fa-file-arrow-up me-2"></i>
                            Envoyer une pièce à un utilisateur de la plateforme
                        </h5>
                    </div>
                    <div class="card-body p-4">

                        {{-- Dossier & procédure --}}
                        <div class="mb-3">
                            <label for="dossier_procedure" class="fw-bold">Dossiers & procédures</label>
                            <input type="text" name="dossier_procedure" class="form-control" value="{{ old('dossier_procedure') }}" required placeholder="Dossiers et procédure">
                            <span class="text-danger">@error('dossier_procedure') {{ $message }} @enderror</span>
                        </div>

                        {{-- Titre de la pièce --}}
                        <div class="mb-3">
                            <label for="titre" class="fw-bold">Titre de la pièce</label>
                            <input type="text" name="titre" class="form-control" value="{{ old('titre') }}" required placeholder="Titre de la pièce">
                            <span class="text-danger">@error('titre') {{ $message }} @enderror</span>
                        </div>

                        {{-- Fichier joint --}}
                        @include('layouts.form-file')


                    </div>
                    {{-- Actions --}}
                    <div class="row mt-4">
                        <div class="col-md-6">
                            <a href="{{ route('vue.liste.piece') }}" class="btn btn-danger w-100">
                                <i class="fa fa-arrow-left"></i> Retour
                            </a>
                        </div>
                        <div class="col-md-6">
                            <button type="submit" class="btn btn-success w-100">
                                <i class="fa-solid fa-paper-plane"></i> Envoyer
                                <span wire:loading class="spinner-border spinner-border-sm ms-2" role="status" aria-hidden="true"></span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput.min.js"></script>

    <script>
        // Chargement dynamique du nom et prénom du destinataire
        $('#destinataire').on('change', function() {
            var destinataire = $(this).val();

            $.ajax({
                url: '/chargerlenometprenomajax/' + destinataire,
                type: 'GET',
                success: function (response) {
                    let select = $('#userSelect');
                    select.empty().append('<option value="">Sélectionnez un utilisateur</option>');

                    if (response.users && response.users.length > 0) {
                        response.users.forEach(function(user) {
                            select.append('<option value="' + user.id + '">' + user.nom + ' ' + user.prenom + '</option>');
                        });
                    } else {
                        select.append('<option value="">Aucun utilisateur trouvé</option>');
                    }
                },
                error: function () {
                    alert("Erreur, aucun utilisateur trouvé.");
                }
            });
        });

        // Définir la date maximale à la fin de l'année
        $(document).ready(function() {
            //GESTION DES ERREURS
            var Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 5000
            });

            $('.swalDefaultWarning').ready(function() {
                @if (session('warning'))
                    Toast.fire({
                        icon: 'warning',
                        title: '{{ session('warning') }}',
                        timer: 10000
                    })
                @endif
            });

            $('.swalDefaultSuccess').ready(function() {
                @if (session('status'))
                    Toast.fire({
                        icon: 'success',
                        title: '{{ session('status') }}'
                    })
                @endif
            });

            $('.swalDefaultSuccess').ready(function() {
                @if (session('error'))
                    Toast.fire({
                        icon: 'error',
                        title: "{{ session('error') }}",
                        timer: 10000
                    })
                @endif
            });

            $('.swalDefaultSuccess').ready(function() {
                @if (session('info'))
                    Toast.fire({
                        icon: 'info',
                        title: "{{ session('info') }}",
                        timer: 10000
                    })
                @endif
            });
            //Fin gestion des Erreur

            var currentDate = new Date();
            var year = currentDate.getFullYear();
            var endOfYear = new Date(year, 11, 31);
            var formattedEndDate = endOfYear.toISOString().split('T')[0];
            $('#date_cloture').attr('max', formattedEndDate);
        });
    </script>
@endpush