@extends('layouts.app')

@section('styles')
<link rel="stylesheet" href="{{ asset('BackOfficeAR/css/formulaire_edit.css') }}">
<style>
    /* Style pour les champs invalides */
    .is-invalid {
        border-color: #dc3545 !important;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    }

    /* Animation pour attirer l'attention */
    @keyframes highlight-invalid {
        0% { background-color: rgba(220, 53, 69, 0.1); }
        50% { background-color: rgba(220, 53, 69, 0.2); }
        100% { background-color: rgba(220, 53, 69, 0.1); }
    }

    .is-invalid:focus {
        animation: highlight-invalid 1s ease-in-out;
    }

    .swal-wide {
        width: 1000px !important;
        max-width: 95vw !important;
    }

    .swal-title-center {
        text-align: center !important;
        font-size: 22px !important;
        font-weight: 600;
    }

    .swal-text {
        font-size: 15px;
        line-height: 1.8;
        text-align: center;
    }
</style>
@endsection

@section('content')
@if ($errors->any())
    <ul class="alert alert-warning">
        @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
    </ul>
@endif
@if(Auth::check())

<div class="salle-sport-edit it-about-3-area p-relative pt-30 pb-125">
    <img class="it-about-shape-1" src="{{ asset('assets/img/shape/about-1-1.png') }}" alt="">
    <div class="container">
	
		@php
    $types = [
        1 => [
            'title' => __('site.exoneration.cards.1.title'),
        ],
        3 => [
            'title' => __('site.exoneration.cards.3.title'),
        ],
        4 => [
            'title' => __('site.exoneration.cards.4.title'),
        ],
        21 => [
            'title' => __('site.exoneration.cards.21.title'),
        ],
        5 => [
            'title' => __('site.exoneration.cards.5.title'),
        ],
    ];

    $currentTitle = $types[$id_type_formulaire]['title']
        ?? __('site.exoneration.breadcrumb.list_projects');

    $currentRoute = $id_type_formulaire
        ? route('exoneration.index', ['id_type_formulaire' => $id_type_formulaire])
        : route('exoneration.index');
@endphp

	<nav class="breadcrumb-nav" aria-label="breadcrumb">
    <ol class="breadcrumb mb-0">
   <li class="breadcrumb-item">
    <a href="{{ route('dashboard') }}">
        <i class="bi bi-house-fill"></i>
        <span>{{ __('site.investment.breadcrumb.home') }}</span>
    </a>
</li>
<li class="breadcrumb-item">
    <a href="{{ route('investissement_choix') }}">
        <span>{{ __('site.investment.breadcrumb.index') }}</span>
    </a>
</li>
<li class="breadcrumb-item">
            <a href="{{ route('exoneration_choix') }}">
                <span>{{ __('site.exoneration.breadcrumb.exoneration_choice') }}</span>
            </a>
        </li>
		
		<li class="breadcrumb-item">
    <a href="{{ $currentRoute }}">
        <span>{{ $currentTitle }}</span>
    </a>
</li>
<li class="breadcrumb-item active" aria-current="page">{{ __('site.investment.breadcrumb.add_exo') }}</li>

    </ol>
</nav>

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
<form class="card shadow-sm p-4" action="{{ route('exoneration.store') }}" method="POST" enctype="multipart/form-data" id="exonerationGeneralForm">
        @csrf
            <input type="hidden" name="id_formulaire" value="{{ $formulaire->id_type }}">
            <input type="hidden" name="id_type_formulaire" value="{{ $id_type_formulaire ?? $formulaire2?->id_type }}">
            <input type="hidden" name="immobilier_id" value="{{ $immobilier_id }}">

         
            <h4 style="text-align:center;padding-top:20px;">{{ __('site.exoneration.form_title') }}</h4>
            <br>

            <div class="form-section">
                <h4>{{ __('site.exoneration.identity.title') }}</h4>

                <div class="form-group row mb-3"  style="padding-top:20px;">
                    <label class="col-sm-2 col-form-label">{{ __('site.exoneration.identity.full_name') }}</label>
                    <div class="col-sm-4">
                        <input required type="text" disabled class="form-control" name="nom_prenom" value="{{ old('nom_prenom', Auth::user()->nom_prenom ?? '') }}" readonly>
                    </div>

                    <label class="col-sm-2 col-form-label">{{ __('site.exoneration.identity.phone') }}</label>
                    <div class="col-sm-4">
                        <input required type="text" disabled class="form-control" name="tel" value="{{ old('tel', Auth::user()->tel ?? '') }}" readonly>
                    </div>
                </div>

                <div class="form-group row align-items-center">
                    <label class="col-sm-2 col-form-label">{{ __('site.exoneration.identity.identity_label') }}</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control"
                            disabled value="{{ Auth::user()->typeIdentite->{ 'type_' . app()->getLocale() } ?? (Auth::user()->typeIdentite->type_ar ?? '') }}"
                            >
                    </div>

                    @php $user = Auth::user(); @endphp

                    @if($user->id_type_identite == 1)
                        <div class="col-sm-6">
                            <input type="text" disabled class="form-control" value="{{ $user->cin ?? '' }}" readonly>
                        </div>
                    @elseif($user->id_type_identite == 2)
                        <div class="col-sm-6">
                               <input type="text" disabled class="form-control" value="{{ $user->passport ?? '' }}" readonly>
                        </div>
                    @elseif($user->id_type_identite == 3)
                        <div class="col-sm-6">
                            <input type="text" disabled class="form-control" value="{{ $user->num_fiscal ?? '' }}" readonly>
                        </div>
                    @endif
                </div>

                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label">{{ __('site.exoneration.identity.address') }}</label>
                    <div class="col-sm-4">
                        <input required type="text" class="form-control @error('adresse') is-invalid @enderror" 
                               maxlength="100" 
                               name="adresse" 
                               id="adresse"
                               value="{{ old('adresse', Auth::user()->adresse ?? '') }}" 
                               pattern="^[\p{L}0-9\s,.\-\/]+$"
                               oninvalid="this.setCustomValidity('{{ __('site.address_invalid') }}')"
                               oninput="this.setCustomValidity('')">
                    </div>

                    <label class="col-sm-2 col-form-label">{{ __('site.exoneration.identity.email') }}</label>
                    <div class="col-sm-4">
                        <input required type="email" disabled class="form-control" name="email" value="{{ old('email', Auth::user()->email ?? '') }}" readonly>
                    </div>
                </div>

                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label">{{ __('site.exoneration.identity.project_name') }}</label>
                    <div class="col-sm-4">
                        <input required type="text" 
                               maxlength="100" 
                               class="form-control @error('nom_projet') is-invalid @enderror" 
                               name="nom_projet" 
                               id="nom_projet"
                               value="{{ old('nom_projet') }}"
                               pattern="^[\p{L}0-9\s,.\-\/]+$"
                               oninvalid="this.setCustomValidity('{{ __('site.project_name_invalid') }}')"
                               oninput="this.setCustomValidity('')">
                    </div>

                    <label class="col-sm-2 col-form-label">{{ __('site.exoneration.identity.project_place') }}</label>
                    <div class="col-sm-4">
                        <input required type="text" 
                               maxlength="100" 
                               class="form-control @error('adresse_projet') is-invalid @enderror" 
                               name="adresse_projet" 
                               id="adresse_projet"
                               value="{{ old('adresse_projet') }}"
                               pattern="^[\p{L}0-9\s,.\-\/]+$"
                               oninvalid="this.setCustomValidity('{{ __('site.project_address_invalid') }}')"
                               oninput="this.setCustomValidity('')">
                    </div>
                </div>

            </div>

            <div class="form-section mt-4">
                <h4>{{ __('site.exoneration.documents.title') }}</h4>

                <div class="form-group row mb-3">
                    <label class="col-sm-6 col-form-label">{{ __('site.exoneration.documents.1.label') }}</label>
                    <div class="col-sm-10">
                        <input required type="file" class="form-control @error('copie_cahier_des_charges') is-invalid @enderror" id="copie_cahier_des_charges" name="copie_cahier_des_charges">
                    </div>
                </div>
                <span>{{ __('site.exoneration.documents.1.desc') }}</span>

                <div class="form-group row mb-3">
                    <label class="col-sm-6 col-form-label">{{ __('site.exoneration.documents.2.label') }}</label>
                    <div class="col-sm-10">
                        <input required type="file" class="form-control @error('copie_originale') is-invalid @enderror" id="copie_originale" name="copie_originale">
                    </div>
                </div>
                <span>{{ __('site.exoneration.documents.2.desc') }}</span>

                <div class="form-group row mb-3">
                    <label class="col-sm-6 col-form-label">{{ __('site.exoneration.documents.3.label') }}</label>
                    <div class="col-sm-10">
                        <input required type="file" class="form-control @error('facture') is-invalid @enderror" id="facture" name="facture" >
                    </div>
                </div>
                <span>{{ __('site.exoneration.documents.3.desc') }}</span>

                <div class="form-group row mb-3">
                    <label class="col-sm-6 col-form-label">{{ __('site.exoneration.documents.4.label') }}</label>
                    <div class="col-sm-10">
                        <input required type="file" class="form-control @error('contrat') is-invalid @enderror" id="contrat" name="contrat">
                    </div>
                </div>
                <span>{{ __('site.exoneration.documents.4.desc') }}</span>

                <div class="form-group row mb-3">
                    <label class="col-sm-6 col-form-label">{{ __('site.exoneration.documents.5.label') }}</label>
                    <div class="col-sm-10">
                        <input required type="file" class="form-control @error('fichier_arrivage') is-invalid @enderror" id="fichier_arrivage" name="fichier_arrivage">
                    </div>
                </div>
                <span>{{ __('site.exoneration.documents.5.desc') }}</span>

                <div class="form-group row mb-3">
                    <label class="col-sm-6 col-form-label">{{ __('site.exoneration.documents.6.label') }}</label>
                    <div class="col-sm-10">
                        <input required type="file" class="form-control @error('fichier_colisage') is-invalid @enderror" id="fichier_colisage" name="fichier_colisage">
                    </div>
                </div>
                <span>{{ __('site.exoneration.documents.6.desc') }}</span>

                <div class="form-group row mb-3">
                    <label class="col-sm-6 col-form-label">{{ __('site.exoneration.documents.7.label') }}</label>
                    <div class="col-sm-10">
                        <input required type="file" class="form-control @error('copie_registre_fiscal') is-invalid @enderror" id="copie_registre_fiscal" name="copie_registre_fiscal" >
                    </div>
                </div>
                <span>{{ __('site.exoneration.documents.7.desc') }}</span>

                <div class="form-group row mb-3">
                    <label class="col-sm-6 col-form-label">{{ __('site.exoneration.documents.8.label') }}</label>
                    <div class="col-sm-10">
                        <input required type="file" class="form-control @error('copie_registre_national_institutions') is-invalid @enderror" id="copie_registre_national_institutions" name="copie_registre_national_institutions">
                    </div>
                </div>
                <span>{{ __('site.exoneration.documents.8.desc') }}</span>

                <div class="form-group row mb-3">
                    <label class="col-sm-6 col-form-label">{{ __('site.exoneration.documents.9.label') }}</label>
                    <div class="col-sm-10">
                        <input required type="file" class="form-control @error('copie_certificat_propriete') is-invalid @enderror" id="copie_certificat_propriete" name="copie_certificat_propriete">
                    </div>
                </div>
                <span>{{ __('site.exoneration.documents.9.desc') }}</span>

                <div class="form-group row mb-3">
                    <label class="col-sm-6 col-form-label">{{ __('site.exoneration.documents.10.label') }}</label>
                    <div class="col-sm-10">
                        <input required type="file" class="form-control @error('engagement') is-invalid @enderror" id="engagement" name="engagement">
                    </div>
                </div>
                <span>{{ __('site.exoneration.documents.10.desc') }}</span>

                <div class="form-group row mb-3">
                    <label class="col-sm-6 col-form-label">{{ __('site.exoneration.documents.11.label') }}</label>
                    <div class="col-sm-10">
                        <input required type="file" class="form-control @error('exemple_projet') is-invalid @enderror" id="exemple_projet" name="exemple_projet">
                    </div>
                </div>
                <span>{{ __('site.exoneration.documents.11.desc') }}</span>

            </div>

            <div class="form-group row text-center" style="padding-top:50px;">
                 <div class="d-flex justify-content-end mb-4">
                <button type="button" class="btn btn-success font-weight-medium" id="confirmSubmitBtn">
					{{ __('site.exoneration.actions.submit') }}
				</button>
				
				</div>
              
            </div>
        </form>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const submitBtn = document.getElementById('confirmSubmitBtn');
    const form = document.getElementById('exonerationGeneralForm');

    submitBtn.addEventListener('click', function (e) {
        e.preventDefault(); // Empêche la soumission directe

        // Supprimer tous les styles d'erreur précédents
        form.querySelectorAll('.is-invalid').forEach(el => {
            el.classList.remove('is-invalid');
        });

        let firstInvalidElement = null;

        // 1. Vérifier les champs required (sans afficher le message du navigateur)
        const requiredFields = form.querySelectorAll('[required]');
        
        requiredFields.forEach(field => {
            // Pour les inputs de type file
            if (field.type === 'file') {
                if (!field.value) {
                    if (!firstInvalidElement) {
                        firstInvalidElement = field;
                    }
                    field.classList.add('is-invalid');
                }
            }
            // Pour les inputs de type text
            else if (field.type === 'text') {
                if (!field.value.trim()) {
                    if (!firstInvalidElement) {
                        firstInvalidElement = field;
                    }
                    field.classList.add('is-invalid');
                }
            }
            // Pour les inputs de type email
            else if (field.type === 'email') {
                if (!field.value.trim()) {
                    if (!firstInvalidElement) {
                        firstInvalidElement = field;
                    }
                    field.classList.add('is-invalid');
                }
            }
        });

        // Si un champ required est vide, retourner dessus
        if (firstInvalidElement) {
            firstInvalidElement.scrollIntoView({
                behavior: 'smooth',
                block: 'center'
            });
            
            firstInvalidElement.focus();
            
            // NE PAS appeler reportValidity() pour éviter le message du navigateur
            return;
        }

        // 2. Vérifier les patterns des champs texte
        const textFields = [
            {id: 'adresse', pattern: /^[\p{L}0-9\s,.\-\/]+$/u},
            {id: 'nom_projet', pattern: /^[\p{L}0-9\s,.\-\/]+$/u},
            {id: 'adresse_projet', pattern: /^[\p{L}0-9\s,.\-\/]+$/u}
        ];

        let invalidPatternField = null;
        
        textFields.forEach(fieldInfo => {
            const field = document.getElementById(fieldInfo.id);
            if (field && field.value.trim() && !fieldInfo.pattern.test(field.value)) {
                invalidPatternField = field;
                return;
            }
        });

        if (invalidPatternField) {
            invalidPatternField.scrollIntoView({
                behavior: 'smooth',
                block: 'center'
            });
            invalidPatternField.focus();
            invalidPatternField.classList.add('is-invalid');
            return;
        }

        // 3. Vérifier la longueur maximale des champs texte
        const maxLengthFields = [
            {id: 'adresse', maxLength: 100},
            {id: 'nom_projet', maxLength: 100},
            {id: 'adresse_projet', maxLength: 100}
        ];

        let invalidLengthField = null;
        
        maxLengthFields.forEach(fieldInfo => {
            const field = document.getElementById(fieldInfo.id);
            if (field && field.value.trim().length > fieldInfo.maxLength) {
                invalidLengthField = field;
                return;
            }
        });

        if (invalidLengthField) {
            invalidLengthField.scrollIntoView({
                behavior: 'smooth',
                block: 'center'
            });
            invalidLengthField.focus();
            invalidLengthField.classList.add('is-invalid');
            return;
        }

        // 4. Si tout est bon, afficher la popup de confirmation
        Swal.fire({
            title: "{{ __('validation.title') }}",
            icon: 'warning',
            width: '1000px',
            padding: '1.5rem',
            html: `
                <div class="swal-text">
                    <p class="mb-2">
                        {{ __('validation.message_main') }}
                    </p>
                    <p class="text-muted">
                        {{ __('validation.message_note') }}
                    </p>
                </div>
            `,
            showCancelButton: true,
            reverseButtons: true,
            focusCancel: true,
            confirmButtonText: "{{ __('site.confirm') }}",
            cancelButtonText: "{{ __('site.cancel') }}",
            buttonsStyling: false,
            customClass: {
                popup: 'swal-wide',
                title: 'swal-title-center',
                confirmButton: 'btn btn-danger px-4',
                cancelButton: 'btn btn-outline-secondary px-4'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>{{ __("site.exoneration.actions.submit") }}';
                form.submit();
            }
        });
    });

    // Supprimer la classe is-invalid quand l'utilisateur commence à taper
    form.querySelectorAll('input, select, textarea').forEach(element => {
        element.addEventListener('input', function() {
            this.classList.remove('is-invalid');
        });
        element.addEventListener('change', function() {
            this.classList.remove('is-invalid');
        });
    });
});
</script>

@else
    <script>
        window.location.href = "{{ route('login') }}";
    </script>
@endif
</div>
@endsection

@section('scripts')

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Désactiver nice-select pour tous les selects dans le formulaire
        const formSelects = document.querySelectorAll('.jeunesse-form select');
        formSelects.forEach(select => {
            const niceSelect = select.nextElementSibling;
            if (niceSelect && niceSelect.classList.contains('nice-select')) {
                niceSelect.remove();
            }
        });

        // Prévisualisation des fichiers
        const fileInputs = document.querySelectorAll('input[type="file"]');
        fileInputs.forEach(input => {
            input.addEventListener('change', function(e) {
                const fileName = e.target.files[0]?.name;
                if (fileName) {
                    const label = input.closest('.form-group').querySelector('.col-form-label');
                    label.setAttribute('title', `{{ __('site.file_selected_prefix') }} : ${fileName}`);
                }
            });
        });
    });
</script>
@endsection