@extends('layouts.base2')

@section('title', 'Envoyer un document à 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('content')
    @section('titlePage')
        <h3 class="m-0" style="color:  #18528d;"><i class="fa-solid fa-file-arrow-up"></i> Envoi de document</h3>
    @stop

    <div class="container py-4">
        {{-- @include('layouts.flash-message') --}}

        <div class="row justify-content-center">
            <div class="col-lg-8 col-sm-8">
                <form method="POST" action="{{ route('envoyer.document') }}" 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 un document à un utilisateur de la plateforme
                        </h5>
                    </div>

                    <div class="card-body p-4">

                        <div class="mb-3">
                            <label for="dossier_procedure" class="form-label fw-bold">Dossier & procédure</label>
                            <input type="text" class="form-control" name="dossier_procedure" placeholder="Ex : Demande de visa..." value="{{ old('dossier_procedure') }}" required>
                            @error('dossier_procedure')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="titre" class="form-label fw-bold">Objet de la lettre</label>
                            <input type="text" class="form-control" name="titre" placeholder="Ex : Lettre d'invitation..." value="{{ old('titre') }}" required>
                            @error('titre')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        @include('layouts.form-file') {{-- Composant pour le fichier --}}

                    </div>
                    <div class="row mt-4">
                        <div class="col-md-6">
                            <a href="{{ route('vue.liste.document') }}" 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>
@stop

@section('footer')
    <script>
        $('#destinataire').on('change', function() {
            var destinataire = $(this).val();
            $.ajax({
                url: '/chargerlenometprenomajax/' + destinataire,
                type: 'GET',
                success: function(response) {
                    $('#userSelect').empty().append('<option value="">Sélectionnez un utilisateur</option>');
                    if (response.users && response.users.length > 0) {
                        response.users.forEach(function(user) {
                            $('#userSelect').append(`<option value="${user.id}">${user.nom} ${user.prenom}</option>`);
                        });
                    } else {
                        $('#userSelect').append('<option value="">Aucun utilisateur trouvé</option>');
                    }
                },
                error: function() {
                    alert("Erreur : Aucun utilisateur trouvé.");
                }
            });
        });

        $(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
        });
    </script>
@stop