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

    /* Style pour les champs en lecture seule */
    .jeunesse-form .form-control.bg-white.border-0 {
        background-color: #f8f9fa !important;
        padding: 8px;
        border-radius: 4px;
        min-height: 38px;
        display: flex;
        align-items: center;
    }

    /* Style pour les étiquettes d'état */
    .jeunesse-form .status-label {
        padding: 8px 16px;
        border-radius: 4px;
        display: inline-block;
        font-weight: bold;
    }

    .jeunesse-form .status-success {
        background-color: #d4edda;
        color: #155724;
    }

    .jeunesse-form .status-danger {
        background-color: #f8d7da;
        color: #721c24;
    }

    .jeunesse-form .status-warning {
        background-color: #fff3cd;
        color: #856404;
    }

    /* Style pour les commentaires */
    .jeunesse-form .comment-box {
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 15px;
        margin-bottom: 20px;
    }

    .jeunesse-form .comment-box .comment-label {
        font-weight: bold;
        margin-bottom: 8px;
    }

    .jeunesse-form .comment-box .comment-text {
        background-color: #f8f9fa;
        padding: 10px;
        border-radius: 4px;
        margin: 0;
    }

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

    /* 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;
    }

    @media print {
        .d-print-none {
            display: none !important;
        }
    }
</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="" method="POST" enctype="multipart/form-data" lang="ar">

            <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="mb-3">
                <h5 class="fw-bold mb-1">الوضعية الحالية:</h5>
                @if($document->id_statut == 1)
                    <span><strong>موافقة</strong></span>
                @elseif($document->id_statut == 3)
                    <span><strong>عدم موافقة</strong></span>
                @elseif($document->id_statut == 4)
                    <span><strong>موافقة شريطة</strong></span>
                @elseif($document->id_statut == 5)
                    <span><strong>ارجاء لابداء الراي</strong></span>
                @else
                    <span><strong>في الانتظار</strong></span>
                @endif
            </div>

            @if($document->id_statut == 3 && !empty($document->commentaire_motif))
                <div class="mb-3">
                    <label class="fw-bold text-danger mb-0">سبب الرفض:</label>
                    <p class="mb-0 border p-2 rounded shadow-sm text-muted">{{ $document->commentaire_motif }}</p>
                </div>
            @endif

            @if($document->id_statut == 4 && !empty($document->commentaire_acceptation))
                <div class="mb-3">
                    <label class="fw-bold text-warning mb-0">تعليق:</label>
                    <p class="mb-0 border p-2 rounded shadow-sm text-muted">{{ $document->commentaire_acceptation }}</p>
                </div>
            @endif

            @if($document->id_statut == 5 && !empty($document->commentaire_avis))
                <div class="mb-3">
                    <label class="fw-bold text-primary mb-0">تعليق:</label>
                    <p class="mb-0 border p-2 rounded shadow-sm text-muted">{{ $document->commentaire_avis }}</p>
                </div>
            @endif

            <div class="form-section">
                <h4>هوية صاحب المشروع</h4>

                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label">الاسم و اللقب</label>
                    <div class="col-sm-10">
                        <div class="form-control bg-white border-0">{{ $document->utilisateur->nom_prenom ?? '-' }}</div>
                    </div>
                </div>

                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label">رقم الهاتف</label>
                    <div class="col-sm-4">
                        <div class="form-control bg-white border-0">{{ $document->utilisateur->tel ?? '-' }}</div>
                    </div>

                    <label class="col-sm-2 col-form-label">البريد الالكتروني</label>
                    <div class="col-sm-4">
                        <div class="form-control bg-white border-0">{{ $document->utilisateur->email ?? '-' }}</div>
                    </div>
                </div>

                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label">العنوان الشخصي</label>
                    <div class="col-sm-10">
                        <div class="form-control bg-white border-0">{{ $document->utilisateur->adresse ?? '-' }}</div>
                    </div>
                </div>

                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label">عنوان المشروع</label>
                    <div class="col-sm-4">
                        <div class="form-control bg-white border-0">{{ $document->nom_projet ?? '-' }}</div>
                    </div>

                    <label class="col-sm-2 col-form-label">مكان المشروع</label>
                    <div class="col-sm-4">
                        <div class="form-control bg-white border-0">{{ $document->adresse_projet ?? '-' }}</div>
                    </div>
                </div>
            </div>

            <div class="form-section mt-4">
                <h4>الوثائق المرفقة</h4>
                @php
                    $files = [
                        'copie_cahier_des_charges','copie_originale','facture','contrat','fichier_arrivage','fichier_colisage',
                        'copie_registre_fiscal','copie_registre_national_institutions','copie_certificat_propriete','engagement','exemple_projet'
                    ];
                    $labels = [
                        '1- نسخة من كراس الشروط','2- الاصل من شهادة ايداع التصريح','3- فاتورة','4- عقد بين المشتري و المورد','5- وثيقة الاعلام بالوصول',
                        '6- وثيقة الشحن','7- نسخة من بطاقة التعريف الجبائي','8- نسخة من مضمون السجل الوطني للمؤسسات','9- نسخة من شهادة الملكية',
                        '10- تعهد','11- مثال هندسي للمشروع'
                    ];
                @endphp

                @foreach($files as $index => $file)
                    <div class="form-group row mb-3">
                        <label class="col-sm-6 col-form-label">{{ $labels[$index] }}</label>
                        <div class="col-sm-6">
                            @if(!empty($document->$file))
                                <a href="{{ asset('storage/'.$document->$file) }}" target="_blank" class="btn btn-link">مشاهدة الملف</a>
                            @else
                                <span>-</span>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="form-group row justify-content-center d-print-none" style="padding-top:50px;">
                <div class="col-auto">
                    <button type="button" onclick="window.print()" class="btn btn-success d-flex align-items-center">
                        <i class="fa fa-print me-2"></i> طباعة
                    </button>
                </div>
                <div class="col-auto">
                    <a href="{{ route('salle-sport.index2', ['id_type_formulaire' => $id_type_formulaire ?? null]) }}" class="btn btn-primary">
                        <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();
            }
        });
    });
</script>
@endsection