@extends('layouts.app')

@section('styles')
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('BackOfficeAR/css/formulaire_jeune_enfant.css') }}">
<style>
    /* Reset des styles pour éviter les conflits */
    .jeunesse-form {
        font-family: inherit;
    }

    /* Styles spécifiques pour le header */
    .it-header-height,
    .it-header-wrap,
    .it-header-top-area,
    .it-main-menu-area {
        font-family: inherit !important;
    }

    /* Styles pour les icônes du header */
    .it-header-top-area i,
    .it-main-menu-area i {
        color: #6c757d !important;
    }

    /* Styles pour les liens du header */
    .it-header-top-area a,
    .it-main-menu-area a {
        color: #333 !important;
    }

    /* Styles pour le fond du header */
    .it-header-top-area,
    .it-main-menu-area {
        background-color: #fff !important;
    }

    /* Styles pour le formulaire */
    .jeunesse-form .form-section {
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }

    .jeunesse-form .form-control {
        border: 1px solid #ced4da;
        border-radius: 4px;
        padding: 8px;
    }

    .jeunesse-form .form-control:focus {
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    }

    /* Style pour les champs en lecture seule */
    .jeunesse-form .form-control[readonly] {
        background-color: #e9ecef;
    }

    /* Style pour les labels */
    .jeunesse-form .col-form-label {
        color: #333 !important;
        font-weight: bold;
        font-size: 14px;
    }

    /* Style pour les boutons */
    .jeunesse-form .btn {
        padding: 8px 20px;
        font-size: 14px;
        border-radius: 4px;
        transition: all 0.3s;
    }

    .jeunesse-form .btn-success {
        background-color: #28a745;
        border-color: #28a745;
    }

    .jeunesse-form .btn-success:hover {
        background-color: #218838;
        border-color: #1e7e34;
    }

    .jeunesse-form .btn-primary {
        background-color: #007bff;
        border-color: #007bff;
    }

    .jeunesse-form .btn-primary:hover {
        background-color: #0056b3;
        border-color: #0056b3;
    }

    /* Style pour les liens de fichiers */
    .jeunesse-form .btn-link {
        color: #007bff;
        text-decoration: none;
        padding: 4px 8px;
        border-radius: 4px;
    }

    .jeunesse-form .btn-link:hover {
        background-color: #f8f9fa;
        color: #0056b3;
    }
</style>
@endsection

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

    @if(Auth::check())
    <div class="container">
    <form action="{{ route('salle-sport.exoneration.update', $document->id_doc ) }}" method="POST" enctype="multipart/form-data" lang="ar">
        @csrf
        @method('PUT')
        <input type="hidden" name="id_formulaire" value="{{ $formulaire->id_type }}">
        <input type="hidden" name="id_type_formulaire" value="1">
        <input type="hidden" name="immobilier_id" value="{{ $immobilier->id }}">
 
        <h2>الجمهورية التونسية</h2>
        <h2>وزارة الشباب و الرياضة</h2>
        <h3 style="font-size:25px;">{{ $formulaire->type_ar }}</h3>
        <h4 style="text-align:center;padding-top:20px;">إستمارة تسجيل الإنتفاع بإعفاء جبائي</h4>
        <br>
        <div class="form-section">
            <h4>هوية صاحب المشروع</h4>

            <div class="form-group row mb-3" style="padding-top:20px;">
                <label class="col-sm-2 col-form-label">الاسم و اللقب</label>
                <div class="col-sm-4">
                    <input required type="text" class="form-control" name="nom_prenom" maxlength="50"
                           value="{{ old('nom_prenom', $document->utilisateur->nom_prenom) }}">
                </div>

                <label class="col-sm-2 col-form-label"> رقم الهاتف </label>
                <div class="col-sm-4">
                    <input required type="text" class="form-control" name="tel"
                           value="{{ old('tel', $document->utilisateur->tel) }}">
                </div>
            </div>

            <div class="form-group row align-items-center">
                <label class="col-sm-2 col-form-label">الهوية الشخصية</label>
                <div class="col-sm-4">
                    <select required class="form-control" id="id_type_identite" name="id_type_identite" onchange="showTypeIdentiteInput4()">
                        <option value="" disabled>اختر...</option>
                        @foreach($typesIdentite as $type)
                            <option value="{{ $type->id_type }}" {{ $document->utilisateur->id_type_identite == $type->id_type ? 'selected' : '' }}>
                                {{ $type->type_ar }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-sm-6" id="cin_input_wrapper" style="{{ $document->utilisateur->cin ? '' : 'display:none;' }}">
                    <input type="text" class="form-control" id="cin_input" name="cin" placeholder="أدخل رقم بطاقة التعريف" pattern="^\d{8}$" maxlength="8"
                           value="{{ old('cin', $document->utilisateur->cin) }}">
                </div>
                <div class="col-sm-6" id="passport_field" style="{{ $document->utilisateur->passport ? '' : 'display:none;' }}">
                    <input type="text" class="form-control" id="passport_input" name="passport" placeholder="أدخل رقم جواز السفر" pattern="^\d{8,12}$" minlength="8" maxlength="12"
                           value="{{ old('passport', $document->utilisateur->passport) }}">
                </div>
                <div class="col-sm-6" id="fiscal_field" style="{{ $document->utilisateur->num_fiscal ? '' : 'display:none;' }}">
                    <input type="text" class="form-control" id="num_fiscal_input" name="num_fiscal" placeholder="أدخل رقم المعرف الجبائي" pattern="^\d{12}$" maxlength="12"
                           value="{{ old('num_fiscal', $document->utilisateur->num_fiscal) }}">
                </div>
            </div>

            <div class="form-group row mb-3">
                <label class="col-sm-2 col-form-label"> العنوان الشخصي </label>
                <div class="col-sm-4">
                    <input required type="text" class="form-control" name="adresse" maxlength="50"
                           value="{{ old('adresse', $document->utilisateur->adresse) }}">
                </div>

                <label class="col-sm-2 col-form-label"> البريد الالكتروني </label>
                <div class="col-sm-4">
                    <input required type="email" class="form-control" name="email"
                           value="{{ old('email', $document->utilisateur->email) }}">
                </div>
            </div>

            <div class="form-group row mb-3">
                <label class="col-sm-2 col-form-label"> عنوان المشروع  </label>
                <div class="col-sm-4">
                    <input required type="text" class="form-control" name="nom_projet"
                           value="{{ old('nom_projet', $document->nom_projet) }}">
                </div>

                <label class="col-sm-2 col-form-label"> مكان المشروع </label>
                <div class="col-sm-4">
                    <input required type="text" class="form-control" name="adresse_projet"
                           value="{{ old('adresse_projet', $document->adresse_projet) }}">
                </div>
            </div>

        </div>

        <div class="form-section mt-4">
    <h4> إضافة الوثائق المطلوبة </h4>

    {{-- 1 --}}
    <div class="form-group row mb-3">
        <label class="col-sm-6 col-form-label">1- نسخة من كراس الشروط</label>
        <div class="col-sm-10">
            <input type="file" class="form-control" name="copie_cahier_des_charges">
            @if(!empty($document->copie_cahier_des_charges))
                <a href="{{ asset('storage/'.$document->copie_cahier_des_charges) }}" target="_blank" class="btn btn-link">مشاهدة الملف الحالي</a>
            @endif
        </div>
    </div>
    <span> مؤشر عليها في جميع صفحاتها ...</span>

    {{-- 2 --}}
    <div class="form-group row mb-3">
        <label class="col-sm-6 col-form-label">2- الاصل من شهادة ايداع التصريح</label>
        <div class="col-sm-10">
            <input type="file" class="form-control" name="copie_originale">
            @if(!empty($document->copie_originale))
                <a href="{{ asset('storage/'.$document->copie_originale) }}" target="_blank" class="btn btn-link">مشاهدة الملف الحالي</a>
            @endif
        </div>
    </div>
    <span> مسلمة من قبل مصالح وكالة النهوض بالصناعة ...</span>

    {{-- 3 --}}
    <div class="form-group row mb-3">
        <label class="col-sm-6 col-form-label">3- فاتورة</label>
        <div class="col-sm-10">
            <input type="file" class="form-control" name="facture">
            @if(!empty($document->facture))
                <a href="{{ asset('storage/'.$document->facture) }}" target="_blank" class="btn btn-link">مشاهدة الملف الحالي</a>
            @endif
        </div>
    </div>
    <span> فاتورة نهائية باللغة العربية ...</span>

    {{-- 4 --}}
    <div class="form-group row mb-3">
        <label class="col-sm-6 col-form-label">4- عقد بين المشتري و المورد</label>
        <div class="col-sm-10">
            <input type="file" class="form-control" name="contrat">
            @if(!empty($document->contrat))
                <a href="{{ asset('storage/'.$document->contrat) }}" target="_blank" class="btn btn-link">مشاهدة الملف الحالي</a>
            @endif
        </div>
    </div>
    <span> يحتوي على كل البيانات ...</span>

    {{-- 5 --}}
    <div class="form-group row mb-3">
        <label class="col-sm-6 col-form-label">5- وثيقة الاعلام بالوصول</label>
        <div class="col-sm-10">
            <input type="file" class="form-control" name="fichier_arrivage">
            @if(!empty($document->fichier_arrivage))
                <a href="{{ asset('storage/'.$document->fichier_arrivage) }}" target="_blank" class="btn btn-link">مشاهدة الملف الحالي</a>
            @endif
        </div>
    </div>
    <span> تسلم من قبل الناقل </span>

    {{-- 6 --}}
    <div class="form-group row mb-3">
        <label class="col-sm-6 col-form-label">6- وثيقة الشحن</label>
        <div class="col-sm-10">
            <input type="file" class="form-control" name="fichier_colisage">
            @if(!empty($document->fichier_colisage))
                <a href="{{ asset('storage/'.$document->fichier_colisage) }}" target="_blank" class="btn btn-link">مشاهدة الملف الحالي</a>
            @endif
        </div>
    </div>

    {{-- 7 --}}
    <div class="form-group row mb-3">
        <label class="col-sm-6 col-form-label">7- نسخة من بطاقة التعريف الجبائي</label>
        <div class="col-sm-10">
            <input type="file" class="form-control" name="copie_registre_fiscal">
            @if(!empty($document->copie_registre_fiscal))
                <a href="{{ asset('storage/'.$document->copie_registre_fiscal) }}" target="_blank" class="btn btn-link">مشاهدة الملف الحالي</a>
            @endif
        </div>
    </div>

    {{-- 8 --}}
    <div class="form-group row mb-3">
        <label class="col-sm-6 col-form-label">8- نسخة من مضمون السجل الوطني للمؤسسات</label>
        <div class="col-sm-10">
            <input type="file" class="form-control" name="copie_registre_national_institutions">
            @if(!empty($document->copie_registre_national_institutions))
                <a href="{{ asset('storage/'.$document->copie_registre_national_institutions) }}" target="_blank" class="btn btn-link">مشاهدة الملف الحالي</a>
            @endif
        </div>
    </div>

    {{-- 9 --}}
    <div class="form-group row mb-3">
        <label class="col-sm-6 col-form-label">9- نسخة من شهادة الملكية</label>
        <div class="col-sm-10">
            <input type="file" class="form-control" name="copie_certificat_propriete">
            @if(!empty($document->copie_certificat_propriete))
                <a href="{{ asset('storage/'.$document->copie_certificat_propriete) }}" target="_blank" class="btn btn-link">مشاهدة الملف الحالي</a>
            @endif
        </div>
    </div>
    <span> او نسخة منعقد بيع ...</span>

    {{-- 10 --}}
    <div class="form-group row mb-3">
        <label class="col-sm-6 col-form-label">10- تعهد</label>
        <div class="col-sm-10">
            <input type="file" class="form-control" name="engagement">
            @if(!empty($document->engagement))
                <a href="{{ asset('storage/'.$document->engagement) }}" target="_blank" class="btn btn-link">مشاهدة الملف الحالي</a>
            @endif
        </div>
    </div>
    <span> معرف بالامضاء بعدم التفويت ...</span>

    {{-- 11 --}}
    <div class="form-group row mb-3">
        <label class="col-sm-6 col-form-label">11- مثال هندسي للمشروع</label>
        <div class="col-sm-10">
            <input type="file" class="form-control" name="exemple_projet">
            @if(!empty($document->exemple_projet))
                <a href="{{ asset('storage/'.$document->exemple_projet) }}" target="_blank" class="btn btn-link">مشاهدة الملف الحالي</a>
            @endif
        </div>
    </div>
    <span> معد من قبل مهندس معماري ...</span>
</div>


        <div class="form-group row text-center" style="padding-top:50px;">
            <div class="col-sm-4 mx-auto">
                <button type="submit" class="btn btn-success font-weight-medium" style="width:100px;margin-right:250px;">تحديث</button>
            </div>
            <div class="col-sm-4 mx-auto">
                <a href="{{ route('salle-sport.index2', ['id_type_formulaire' => $id_type_formulaire ?? null]) }}" class="btn btn-primary" style="width:100px;margin-left:250px;">
                    <i class="bi bi-arrow-left"></i> رجوع
                </a>
            </div>
        </div>
    </form>
</div>

    @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', `Fichier sélectionné : ${fileName}`);
                }
            });
        });

        // Gestion des champs d'identité
        function showTypeIdentiteInput4() {
            const selectedType = document.getElementById('id_type_identite').value;
            document.getElementById('cin_input_wrapper').style.display = selectedType === '1' ? '' : 'none';
            document.getElementById('passport_field').style.display = selectedType === '2' ? '' : 'none';
            document.getElementById('fiscal_field').style.display = selectedType === '3' ? '' : 'none';
        }

        // Initialiser l'affichage des champs d'identité
        if (document.getElementById('id_type_identite')) {
            showTypeIdentiteInput4();
            document.getElementById('id_type_identite').addEventListener('change', showTypeIdentiteInput4);
        }
    });
</script>
@endsection