@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">
	
<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.jeunesse.breadcrumb.home') }}</span>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ route('investissement_choix') }}">
                <span>{{ __('site.jeunesse.breadcrumb.investment') }}</span>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ route('jeunesse.index') }}">
                <span>{{ __('site.jeunesse.breadcrumb.institutions') }}</span>
            </a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">{{ __('site.investment.breadcrumb.add_activ') }}</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('debut_activite_jeunesse.store2') }}" method="POST" enctype="multipart/form-data" id="jeunesseInstitutionForm" lang="{{ app()->getLocale() }}">
@csrf

<div class="d-flex justify-content-between align-items-center mb-3">
    <div class="text-start">
    <strong>{{ __('site.start_activity.form_number_label') }} </strong>
    @php
        $userIdent = optional($institution->utilisateur)->cin
                     ?? optional($institution->utilisateur)->passport
                     ?? optional($institution->utilisateur)->num_fiscal
                     ?? '---';
        $formNumber = str_pad($id_insts ?? ($debutActivite->id_insts ?? 0), 3, '0', STR_PAD_LEFT)
                      . '_' . $userIdent
                      . '_' . \Carbon\Carbon::now()->format('Y');
    @endphp
    {{ $formNumber }}
</div>


    <div style="width: 150px;"></div>
</div>

<input type="hidden" name="id_insts" value="{{ $id_insts ?? ($debutActivite->id_insts ?? '') }}">
<input type="hidden" name="utilisateur_id" id="utilisateur_id" value="{{ $institution->utilisateur->id ?? ($debutActivite->institution->utilisateur->id ?? '') }}">

<h3 class="mb-3">{{ __('site.start_activity.form_title') }}</h3>

<div id="sectionIdentite" class="d-block">
    <h5>{{ __('site.start_activity.owner_identity_title') }}</h5>

    <div class="form-group row">
        <label class="col-sm-2 col-form-label">{{ __('site.start_activity.owner_name_label') }}</label>
        <div class="col-sm-10">
            <input disabled type="text" class="form-control" 
                   style="text-transform: none; direction: {{ (app()->getLocale() === 'ar') ? 'rtl' : 'ltr' }};" 
                   value="{{ auth()->user()->nom_prenom ?? '' }}" >
        </div>
    </div>

    <div class="form-group row">
        <label class="col-sm-2 col-form-label">{{ __('site.start_activity.owner_email_label') }}</label>
        <div class="col-sm-10">
            <input disabled type="email" class="form-control" 
                   style="text-transform: none; direction: {{ (app()->getLocale() === 'ar') ? 'rtl' : 'ltr' }};" 
                   value="{{ auth()->user()->email ?? '' }}" >
        </div>
    </div>

    <div class="form-group row align-items-center">
        {{-- identity type --}}
        <label class="col-sm-2 col-form-label">{{ __('site.start_activity.identity_type_label') }}</label>
        <div class="col-sm-4">
            {{-- Prefer translated field for typeIdentite if available --}}
            <input disabled type="text" class="form-control"
                   style="text-transform: none; direction: {{ (app()->getLocale() === 'ar') ? 'rtl' : 'ltr' }};"
                   value="{{ trans_field(auth()->user()->typeIdentite ?? [], 'type') ?? (auth()->user()->typeIdentite->type_ar ?? '') }}" >
        </div>

        @if(auth()->user()->id_type_identite == 1)
            <label class="col-sm-2 col-form-label">{{ __('site.start_activity.id_card_label') }}</label>
            <div class="col-sm-4">
                <input disabled type="text" class="form-control"
                       style="text-transform: none; direction: {{ (app()->getLocale() === 'ar') ? 'rtl' : 'ltr' }};"
                       value="{{ auth()->user()->cin ?? '' }}" >
            </div>
        @elseif(auth()->user()->id_type_identite == 2)
            <label class="col-sm-2 col-form-label">{{ __('site.start_activity.passport_label') }}</label>
            <div class="col-sm-4">
                <input disabled type="text" class="form-control"
                       style="text-transform: none; direction: {{ (app()->getLocale() === 'ar') ? 'rtl' : 'ltr' }};"
                       value="{{ auth()->user()->passport ?? '' }}" >
            </div>
        @elseif(auth()->user()->id_type_identite == 3)
            <label class="col-sm-2 col-form-label">{{ __('site.start_activity.fiscal_label') }}</label>
            <div class="col-sm-4">
                <input disabled type="text" class="form-control"
                       style="text-transform: none; direction: {{ (app()->getLocale() === 'ar') ? 'rtl' : 'ltr' }};"
                       value="{{ auth()->user()->num_fiscal ?? '' }}" >
            </div>
        @endif
    </div>

    <div class="form-group row">
        <label class="col-sm-2 col-form-label">{{ __('site.start_activity.phone_label') }}</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" 
                   value="{{ auth()->user()->tel ?? '' }}" disabled>
        </div>
        <label class="col-sm-2 col-form-label">{{ __('site.start_activity.personal_address_label') }}</label>
        <div class="col-sm-4">
			<input type="text" class="form-control @error('adresse') is-invalid @enderror"
				   style="text-transform: none; direction: {{ (app()->getLocale() === 'ar') ? 'rtl' : 'ltr' }};"
				   name="adresse"
				   id="adresse"
				   value="{{ old('adresse', auth()->user()->adresse ?? '') }}"
				   required
				   maxlength="100"
				   pattern="^[\p{L}0-9\s,.\-\/]+$"
                   oninvalid="this.setCustomValidity('{{ __('site.address_invalid') }}')"
                   oninput="this.setCustomValidity('')"
				  >
			@error('adresse')
				<span class="text-danger">{{ $message }}</span>
			@enderror
		</div>

    </div>

    <div class="form-group row">
        <label class="col-sm-2 col-form-label">{{ __('site.start_activity.regional_delegation_label') }}</label>
        @php
$lastActivite = auth()->user()->activites->last(); // récupère le dernier
$gouvernoratNom = $lastActivite->gouvernorat ? trans_field($lastActivite->gouvernorat, 'nom') : __('site.not_specified');
@endphp

<div class="col-sm-10">
    <input type="text" class="form-control" 
           style="text-transform: none; direction: {{ (app()->getLocale() === 'ar') ? 'rtl' : 'ltr' }};" 
           value="{{ $gouvernoratNom }}" disabled >
</div>

    </div>
</div>

<h4 class="mt-4">{{ __('site.start_activity.start_date_label') }}</h4>
<div class="form-group row">
    <div class="col-sm-11">
        <input required type="date" class="form-control @error('date_debut_activite') is-invalid @enderror" 
               id="date_debut_activite" 
               name="date_debut_activite" 
               placeholder=""
               min="{{ date('Y-m-d') }}"
               value="{{ old('date_debut_activite') }}">
    </div>
</div>

<div class="mb-3"><small class="text-muted">{{ __('site.start_activity.start_date_hint') }}</small></div>

<h4 class="mt-4">{{ __('site.start_activity.attached_documents') }}</h4>

<div class="form-group row">
    <label for="preuve_propriete_location" class="col-sm-8 col-form-label">
        {{ __('site.start_activity.documents.preuve_propriete_location.label') }}
    </label>
    <div class="col-sm-3">
        <input required type="file" class="form-control @error('preuve_propriete_location') is-invalid @enderror" id="preuve_propriete_location" name="preuve_propriete_location" placeholder="">
        <small class="text-muted">{{ __('site.start_activity.documents.preuve_propriete_location.desc') }}</small>
    </div>
</div>

<div class="form-group row">
    <label for="plan_architectural" class="col-sm-8 col-form-label">
        {{ __('site.start_activity.documents.plan_architectural.label') }}
    </label>
    <div class="col-sm-3">   
        <input required type="file" class="form-control @error('plan_architectural') is-invalid @enderror" id="plan_architectural" name="plan_architectural">
        <small class="text-muted">{{ __('site.start_activity.documents.plan_architectural.desc') }}</small>
    </div>
</div>

<div class="form-group row">
    <label for="declaration_investissement" class="col-sm-8 col-form-label">
        {{ __('site.start_activity.documents.declaration_investissement.label') }}
    </label>
    <div class="col-sm-3">   
        <input required type="file" class="form-control @error('declaration_investissement') is-invalid @enderror" id="declaration_investissement" name="declaration_investissement">
        <small class="text-muted">{{ __('site.start_activity.documents.declaration_investissement.desc') }}</small>
    </div>
</div>

<div class="form-group row">
    <label for="identification" class="col-sm-8 col-form-label">
        {{ __('site.start_activity.documents.identification.label') }}
    </label>
    <div class="col-sm-3">   
        <input required type="file" class="form-control @error('identification') is-invalid @enderror" id="identification" name="identification">
        <small class="text-muted">{{ __('site.start_activity.documents.identification.desc') }}</small>
    </div>
</div>

<div class="form-group row">
    <label for="extrait_registre_national_entreprise" class="col-sm-8 col-form-label">
        {{ __('site.start_activity.documents.extrait_registre_national_entreprise.label') }}
    </label>
    <div class="col-sm-3">   
        <input required type="file" class="form-control @error('extrait_registre_national_entreprise') is-invalid @enderror" id="extrait_registre_national_entreprise" name="extrait_registre_national_entreprise">
        <small class="text-muted">{{ __('site.start_activity.documents.extrait_registre_national_entreprise.desc') }}</small>
    </div>
</div>

<div class="form-group row">
    <label for="certificat_prevention" class="col-sm-8 col-form-label">
        {{ __('site.start_activity.documents.certificat_prevention.label') }}
    </label>
    <div class="col-sm-3">   
        <input required type="file" class="form-control @error('certificat_prevention') is-invalid @enderror" id="certificat_prevention" name="certificat_prevention">
        <small class="text-muted">{{ __('site.start_activity.documents.certificat_prevention.desc') }}</small>
    </div>
</div>

<div class="form-group row">
    <label for="contrat_assurance" class="col-sm-8 col-form-label">
        {{ __('site.start_activity.documents.contrat_assurance.label') }}
    </label>
    <div class="col-sm-3">   
        <input required type="file" class="form-control @error('contrat_assurance') is-invalid @enderror" id="contrat_assurance" name="contrat_assurance">
        <small class="text-muted">{{ __('site.start_activity.documents.contrat_assurance.desc') }}</small>
    </div>
</div>

<div class="form-group row">
    <label for="approbation_autorite_minicipale" class="col-sm-8 col-form-label">
        {{ __('site.start_activity.documents.approbation_autorite_minicipale.label') }}
    </label>
    <div class="col-sm-3">   
        <input required type="file" class="form-control @error('approbation_autorite_minicipale') is-invalid @enderror" id="approbation_autorite_minicipale" name="approbation_autorite_minicipale">
        <small class="text-muted">{{ __('site.start_activity.documents.approbation_autorite_minicipale.desc') }}</small>
    </div>
</div>

 <div class="form-group row text-center">
    <div class="d-flex justify-content-end mb-4">
        <button type="button" class="btn btn-success font-weight-medium" id="confirmSubmitBtn">
            {{ __('site.investment.form.button.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('jeunesseInstitutionForm');

    // Script pour la date minimum (début d'activité)
    const dateInput = document.getElementById('date_debut_activite');
    if (dateInput) {
        const today = new Date().toISOString().split('T')[0]; // format YYYY-MM-DD
        dateInput.setAttribute('min', today);
    }

    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 date
            else if (field.type === 'date') {
                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');
                }
            }
        });

        // 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 la date (doit être >= aujourd'hui)
        if (dateInput && dateInput.value) {
            const selectedDate = new Date(dateInput.value);
            const today = new Date();
            today.setHours(0, 0, 0, 0); // Reset hours for comparison
            
            if (selectedDate < today) {
                dateInput.scrollIntoView({
                    behavior: 'smooth',
                    block: 'center'
                });
                dateInput.focus();
                dateInput.classList.add('is-invalid');
                
                // Afficher un message d'erreur
                Swal.fire({
                    title: "{{ __('site.start_activity.date_error_title') }}",
                    text: "{{ __('site.start_activity.date_error_text') }}",
                    icon: 'error',
                    confirmButtonText: "{{ __('site.ok') }}",
                    customClass: {
                        popup: 'swal-wide',
                        title: 'swal-title-center'
                    }
                });
                return;
            }
        }

        // 3. Vérifier les patterns des champs texte
        const textFields = [
            {id: 'adresse', 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;
        }

        // 4. Vérifier la longueur maximale des champs texte
        const maxLengthFields = [
            {id: 'adresse', 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;
        }

        // 5. 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.investment.form.button.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>

<script src="{{ asset('BackOfficeAR/js/script.js') }}"></script>

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