@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);
    }

    .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>
@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.store', $immobilier->id_imm) }}" method="POST" enctype="multipart/form-data" lang="ar">
        @csrf
            <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 }}"> 
            <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" value="{{ old('nom_prenom', Auth::user()->nom_prenom ?? '') }}" readonly>
                    </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', Auth::user()->tel ?? '') }}" readonly>
                    </div>
                </div>

                <div class="form-group row align-items-center">
                    <label class="col-sm-2 col-form-label">الهوية الشخصية</label>  
                    <div class="col-sm-4">
                        <input type="text" class="form-control" 
                            value="{{ Auth::user()->typeIdentite->type_ar ?? '' }}" 
                            readonly>
                    </div>

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

                    @if($user->id_type_identite == 1)
                        <div class="col-sm-6">
                            <input type="text" class="form-control" value="{{ $user->cin ?? '' }}" readonly>
                        </div>
                    @elseif($user->id_type_identite == 2)
                        <div class="col-sm-6">
                               <input type="text" class="form-control" value="{{ $user->passport ?? '' }}" readonly>
                        </div>
                    @elseif($user->id_type_identite == 3)
                        <div class="col-sm-6">
                            <input type="text" 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"> العنوان الشخصي </label>
                    <div class="col-sm-4">
                        <input required type="text" class="form-control" name="adresse" value="{{ old('adresse', Auth::user()->adresse ?? '') }}" readonly >
                    </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', Auth::user()->email ?? '') }}" readonly>
                    </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">
                    </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">
                    </div>
                </div>

            </div>

            <div class="form-section mt-4">
                <h4> إضافة الوثائق المطلوبة </h4>
                <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" id="copie_cahier_des_charges" name="copie_cahier_des_charges">
                    </div>
                </div>
                <span> مؤشر عليها في جميع صفحاتها من قبل الباعث الخاص و مصحوبة بنسخة من وصل الإيداع او تحتوي على ختم المندوبية الجهوية للشباب و الرياضة مرجع النظر ترابيا لمكان تركيز المشروع</span>

                <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" id="copie_originale" name="copie_originale">
                    </div>
                </div>
                <span> مسلمة من قبل مصالح وكالة النهوض بالصناعة و التحديد مرجع النظر ترابيا لمكان تركيز المشروع على قائمة التجهيزات التي سيتم اقتنائها فعليا </span>

                <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" id="facture" name="facture" >
                    </div>
                </div>
                <span> فاتورة نهائية باللغة العربية او الفرنسية تحتوي حصرا على قائمة التجهيزات المزمن اقتنائها موضوع طلب الامتياز الجبائي و مطابقة للقائمة المضمنة بشهادة ايداع التصريح</span>

                <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" id="contrat" name="contrat">
                    </div>
                </div>
                <span> يحتوي على كل البيانات الافصال و الكمية و الثمن و العلامة التجارية للتجهيزات ممضى من قبل الطرفين</span>

                <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" id="fichier_arrivage" name="fichier_arrivage">
                    </div>      
                </div>
                <span>تسلم من قبل الناقل</span>
                

                <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" id="fichier_colisage" name="fichier_colisage">
                    </div>
                </div>

                <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" id="copie_registre_fiscal" name="copie_registre_fiscal" >
                    </div>
                </div>

                <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" id="copie_registre_national_institutions" name="copie_registre_national_institutions">
                    </div>
                </div>

                <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" id="copie_certificat_propriete" name="copie_certificat_propriete">
                    </div>
                </div>
                <span> او نسخة منعقد بيع او هبة او كراء للعقار الموظف لتركيز المشروع ساري المفعول مسجل بالقباضة المالية</span>

                <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" id="engagement" name="engagement">
                    </div>
                </div>
                <span>معرف بالامضاء بعدم التفويت في التجهيزات المقتناة لمدة 5 سنوات مع ذكر التجهيزات بالتفصيل</span>

                <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" id="exemple_projet" name="exemple_projet">
                    </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">
                        رجوع
                    </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}`);
                }
            });
        });
    });
</script>
@endsection