@extends('backoffice.dashboard')

@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
    .dir-rtl { direction: rtl; text-align: right; }
    .block-card { border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.06); background:#fff; }
    .block-card-header { padding:20px; border-bottom:1px solid #eee; }
    .block-card-body { padding:20px; }
    .small-muted { color:#6c757d; font-size:.9rem; }
    .room-box { border:1px solid #eee; border-radius:10px; padding:15px; transition:.2s; position: relative; }
    .room-box:hover { box-shadow:0 4px 15px rgba(0,0,0,0.08); }
    .btn-choose { border-radius:8px; padding:8px; }
    .room-disabled { border: 2px solid #dc3545 !important; background: #ffe5e5 !important; opacity: 0.85;}
    .room-disabled:hover {box-shadow: 0 0 10px rgba(220,53,69,0.6) !important;}
    .btn-disabled {background: #dc3545 !important;border: none;cursor: not-allowed !important;opacity: 0.9;}
    .progress-bar.bg-pink {background-color: #ff6b81;}
    .assigned-rooms .badge {font-size: 0.85rem;}
    
    /* Styles pour les actions */
    .assigned-room-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        margin-bottom: 10px;
        background: #f8f9fa;
        border-radius: 8px;
        border-right: 4px solid #c51b01;
        transition: all 0.3s ease;
    }
    
    .assigned-room-item:hover {
        background: #fff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .room-actions {
        display: flex;
        gap: 8px;
    }
    
    .btn-action {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .btn-edit {
        background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
        color: white;
    }
    
    .btn-edit:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(26, 35, 126, 0.3);
    }
    
    .btn-delete {
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        color: white;
    }
    
    .btn-delete:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    }
    
    /* Modal styles */
    .modal-content {
        border-radius: 12px;
        border: none;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }
    
    .modal-header {
        background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
        color: white;
        border-radius: 12px 12px 0 0;
        padding: 15px 20px;
    }
    
    .modal-header .btn-close {
        filter: brightness(0) invert(1);
    }
    
    .modal-body {
        padding: 25px;
    }
    
    .modal-footer {
        border-top: 1px solid #eee;
        padding: 15px 20px;
    }
    
    .btn-save {
        background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
        color: white;
        border: none;
        padding: 10px 25px;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
    }
    
    .btn-save:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(26, 35, 126, 0.3);
    }
    
    .btn-cancel {
        background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
        color: white;
        border: none;
        padding: 10px 25px;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
    }
    
    .btn-cancel:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
    }
    
    .info-badge {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
        border-right: 4px solid #c51b01;
    }
    
    .info-badge p {
        margin-bottom: 5px;
    }
    
    .info-badge .highlight {
        color: #c51b01;
        font-weight: 700;
        font-size: 1.2rem;
    }
    
    .total-badge {
        background: linear-gradient(135deg, #c51b01 0%, #a01500 100%);
        color: white;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
        display: inline-block;
        margin-right: 5px;
    }
    
    /* Nouveaux styles pour les badges de sexe */
    .sex-badge {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        margin: 2px;
    }
    
    .sex-badge-male {
        background: #1a237e;
        color: white;
    }
    
    .sex-badge-female {
        background: #c51b01;
        color: white;
    }
    
    .sex-badge-mixed {
        background: #ffc107;
        color: #000;
    }
    
    /* Style modifié pour current-assignment - couleur bleue au lieu de verte */
    .current-assignment {
        background: #e8eaf6;  /* Fond bleu très clair */
        border-right: 4px solid #1a237e;  /* Bordure bleu foncé comme le bouton */
        padding: 10px;
        border-radius: 8px;
        margin-bottom: 10px;
        font-size: 0.9rem;
    }
    
    /* Style pour le bouton "تم التعيين ✓" modifié */
    .btn-assigned {
        background: linear-gradient(135deg, #1a237e 0%, #283593 100%) !important;
        color: white !important;
        border: none !important;
        cursor: default !important;
        opacity: 0.9 !important;
    }
    
    .btn-assigned:hover {
        transform: none !important;
        box-shadow: none !important;
    }
</style>

@php
    $reservationId = $reservation->id_reserv;
@endphp

<div class="container dir-rtl mt-4">
    <div class="row mt-4">
        <div class="col-lg-9">
            <div class="block-card mb-4">
                @php
                    $affectations = \App\Models\ReservationChambreTente::where('reservation_id', $reservationId)->get();
                    $total_aff_male = $affectations->sum('male_personnes');
                    $total_aff_female = $affectations->sum('female_personnes');
                    $allAssigned = ($total_aff_male >= $male) && ($total_aff_female >= $female);
                @endphp
                
                <div class="block-card-header">
                    <div class="row align-items-start">
                        <div class="col-md-6">
                            <h3 class="mb-1">
                                تعيين غرفة للحجز رقم:
                                <strong class="text-danger">{{ $reservationId }}</strong>
                            </h3>
                            <div class="small-muted">
                                المركب:
                                <strong>{{ $reservation->auberge->nom_ar }}</strong>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="block-card-body">
                    <div class="info-badge">
                        <p class="mb-1">
                            <strong>تاريخ الوصول:</strong> {{ $reservation->date_arrive }} —
                            <strong>تاريخ المغادرة:</strong> {{ $reservation->date_depart }}
                        </p>
                        <p class="mb-1">
                            <strong>عدد الذكور:</strong> <span class="highlight">{{ $male }}</span>
                            <strong>عدد الاناث:</strong> <span class="highlight">{{ $female }}</span>
                            <strong>المجموع:</strong> <span class="highlight">{{ $reservation->nbr_personnes }}</span>
                        </p>
                        <small class="small-muted">اختر غرفة مناسبة من القائمة التالية.</small>
                    </div>
                    
                    <div class="row g-3">
                        @forelse($chambres as $ch)
                        @php
                            $aff = \App\Models\ReservationChambreTente::where('chambre_tente_id',$ch->id_chambre_tente)->sum('total_personnes');
                            $reste = $ch->capacite - $aff;
                            
                            // Récupérer les affectations actuelles de cette chambre pour CETTE réservation
                            $currentAffectation = \App\Models\ReservationChambreTente::where('chambre_tente_id', $ch->id_chambre_tente)
                                ->where('reservation_id', $reservationId)
                                ->first();
                            
                            $hasCurrentAssignment = $currentAffectation ? true : false;
                            $currentMale = $currentAffectation ? $currentAffectation->male_personnes : 0;
                            $currentFemale = $currentAffectation ? $currentAffectation->female_personnes : 0;
                            
                            // Déterminer le type de la chambre pour cette réservation
                            if ($hasCurrentAssignment) {
                                if ($currentMale > 0 && $currentFemale == 0) {
                                    $assignmentType = 'male';
                                    $assignmentLabel = 'رجال فقط';
                                    $assignmentClass = 'sex-badge-male';
                                } elseif ($currentFemale > 0 && $currentMale == 0) {
                                    $assignmentType = 'female';
                                    $assignmentLabel = 'نساء فقط';
                                    $assignmentClass = 'sex-badge-female';
                                } else {
                                    $assignmentType = 'mixed';
                                    $assignmentLabel = 'مختلط';
                                    $assignmentClass = 'sex-badge-mixed';
                                }
                            }
                            
                            // Récupérer toutes les affectations de cette chambre (toutes réservations)
                            $allAffectationsChambre = \App\Models\ReservationChambreTente::where('chambre_tente_id', $ch->id_chambre_tente)->get();
                            $totalMaleInRoom = $allAffectationsChambre->sum('male_personnes');
                            $totalFemaleInRoom = $allAffectationsChambre->sum('female_personnes');
                            
                            $remainMale = $male - $total_aff_male;
                            $remainFemale = $female - $total_aff_female;
                            
                            // Vérifier si la chambre peut être assignée (disponible et besoins restants)
                            $canAssignRoom = ($reste > 0) && !$allAssigned;
                        @endphp

                        <div class="col-md-4">
                            <div class="room-box {{ $reste == 0 ? 'room-disabled' : '' }}">

                                <h5 class="mb-2">الغرفة رقم: <strong>{{ $ch->num_chambre }}</strong></h5>
                                
                                
                                
                                <p class="small-muted">الطاقة الإجمالية: {{ $ch->capacite }}</p>
                                
                                <!-- Affichage des occupants actuels (toutes réservations) -->
                                @if($totalMaleInRoom > 0 || $totalFemaleInRoom > 0)
                                    <div class="small-muted mb-2">
                                        <strong>المشغول حالياً:</strong><br>
                                        @if($totalMaleInRoom > 0)
                                            <span class="sex-badge sex-badge-male"> {{ $totalMaleInRoom }} رجال</span>
                                        @endif
                                        @if($totalFemaleInRoom > 0)
                                            <span class="sex-badge sex-badge-female"><i class="bi bi-gender-female"></i> {{ $totalFemaleInRoom }} نساء</span>
                                        @endif
                                    </div>
                                @endif
                                
                                <!-- Affichage de l'affectation actuelle de cette réservation (style modifié) -->
                                @if($hasCurrentAssignment)
                                    <div class="current-assignment">
                                        <strong>تعيينك الحالي:</strong><br>
                                        @if($currentMale > 0)
                                            <span class="sex-badge sex-badge-male"> {{ $currentMale }} رجال</span>
                                        @endif
                                        @if($currentFemale > 0)
                                            <span class="sex-badge sex-badge-female"><i class="bi bi-gender-female"></i> {{ $currentFemale }} نساء</span>
                                        @endif
                                    </div>
                                @endif
                                
                                <p class="small-muted {{ $reste == 0 ? 'text-danger' : 'text-success' }}">
                                    <i class="la la-chair"></i> الطاقة المتبقية: {{ $reste }}
                                </p>

                                <!-- Toujours afficher le bouton "اختيار هذه الغرفة" quand il y a de la place -->
                                @if($canAssignRoom)
                                    <button class="btn w-100 btn-choose"
                                            onclick="showForm({{ $ch->id_chambre_tente }})"
                                            style="background-color: #1a237e; color: white;">
                                        اختيار هذه الغرفة
                                    </button>
                                @else
                                    <!-- Si la chambre est pleine ou plus de besoins, bouton désactivé -->
                                    <button class="btn w-100 btn-choose" 
                                            style="background-color: #dc3545; color: white; border: none; cursor: not-allowed; opacity: 0.9;" 
                                            disabled>
                                        {{ $reste == 0 ? 'الغرفة ممتلئة' : 'لا يمكن التعيين' }}
                                    </button>
                                @endif

                                <!-- Formulaire d'assignation (caché par défaut) -->
                                <form id="form-{{ $ch->id_chambre_tente }}"
                                      action="{{ route('reservation.assignChambre', $reservationId) }}"
                                      method="POST"
                                      class="mt-3 d-none"
                                      data-reste="{{ $reste }}"
                                      onsubmit="return validateForm(this, {{ $male }}, {{ $female }})">

                                    @csrf
                                    <input type="hidden" name="chambre_id" value="{{ $ch->id_chambre_tente }}">

                                    <div class="mb-2">
                                        <label>اختيار الجنس:</label>

                                        @php
                                            $remainMale = $male - $total_aff_male;
                                            $remainFemale = $female - $total_aff_female;
                                            $defaultSex = '';

                                            if ($remainMale == 0 && $remainFemale > 0) {
                                                $defaultSex = 'female';
                                            } elseif ($remainFemale == 0 && $remainMale > 0) {
                                                $defaultSex = 'male';
                                            }
                                        @endphp

                                        <select class="form-control sexe-select"
                                                name="sexe"
                                                onchange="toggleInputs(this)"
                                                data-remaining-male="{{ $remainMale }}"
                                                data-remaining-female="{{ $remainFemale }}"
                                                required>

                                            @if($defaultSex == '')
                                                <option value="">-- اختر --</option>
                                                <option value="male">ذكور</option>
                                                <option value="female">إناث</option>
                                            @elseif($defaultSex == 'male')
                                                <option value="male" selected>ذكور</option>
                                            @elseif($defaultSex == 'female')
                                                <option value="female" selected>إناث</option>
                                            @endif

                                        </select>
                                    </div>
                                    
                                    <div class="mb-2 input-male d-none">
                                        <label>عدد الذكور:</label>
                                        <input type="number" name="male_personnes" class="form-control" min="0" value="0" max="{{ $remainMale }}">
                                    </div>

                                    <div class="mb-2 input-female d-none">
                                        <label>عدد الاناث:</label>
                                        <input type="number" name="female_personnes" class="form-control" min="0" value="0" max="{{ $remainFemale }}">
                                    </div>
                                    
                                    <button class="btn w-100 mt-2" 
                                            style="background-color: #1a237e; color: white; border: none; padding: 8px; border-radius: 8px;"
                                            type="submit">
                                        تأكيد التعيين
                                    </button>
                                </form>
                            </div>
                        </div>
                        @empty
                        <div class="col-12 text-center text-danger">
                            لا توجد غرف متاحة حاليا في هذا المركب.
                        </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3">
            <div class="block-card p-3">
                <h5 class="mb-4" style="color:#c51b01;"><i class="la la-list-check me-2"></i>ملخص التعيينات</h5>

                <div class="mb-4 d-flex justify-content-around text-center">
                    <div>
                        <div class="h5" style="color:#1a237e;">{{ $total_aff_male }}/{{ $male }}</div>
                        <small class="small-muted d-block">ذكور</small>
                        <div class="progress rounded-pill" style="height: 10px; width: 80px; margin: auto;">
                            <div class="progress-bar" role="progressbar" 
                                style="background-color:#1a237e; width: {{ $total_aff_male / max($male,1) * 100 }}%">
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="h5" style="color:#c51b01;">{{ $total_aff_female }}/{{ $female }}</div>
                        <small class="small-muted d-block">إناث</small>
                        <div class="progress rounded-pill" style="height: 10px; width: 80px; margin: auto;">
                            <div class="progress-bar bg-pink" role="progressbar"
                                style="background-color:#c51b01;width: {{ $total_aff_female / max($female,1) * 100 }}%">
                            </div>
                        </div>
                    </div>
                </div>
                
                <hr>
                
                <h6 class="mb-2" style="color:#c51b01;">
                    <i class="la la-bed me-1"></i>الغرف المعيّنة
                    <button class="btn-action btn-edit float-start" onclick='openEditModal({{ json_encode($affectations->first()->id ?? null) }}, {{ json_encode($affectations->first()->chambre_id ?? null) }}, {{ json_encode($affectations->first()->male_personnes ?? null) }}, {{ json_encode($affectations->first()->female_personnes ?? null) }})'>
                        <i class="la la-edit"></i>
                    </button>
                </h6>
                <div class="assigned-rooms" style="max-height: 400px; overflow-y: auto;">
                    @forelse($affectations as $aff)
                        <div class="assigned-room-item" id="room-{{ $aff->id }}">
                            <div>
                                <strong>الغرفة {{ $aff->chambre->num_chambre ?? 'غير معروف' }}</strong>
                                <div class="small text-muted mt-1">
                                    @if($aff->male_personnes > 0)
                                        👨 {{ $aff->male_personnes }}
                                    @endif
                                    @if($aff->female_personnes > 0)
                                        👩 {{ $aff->female_personnes }}
                                    @endif
                                    <span class="total-badge">الإجمالي: {{ $aff->total_personnes }}</span>
                                </div>
                            </div>
                            <div class="room-actions">
                                
                                <button class="btn-action btn-delete" onclick='confirmDelete({{ $aff->id }}, {{ $reservationId }})'>
                                    <i class="la la-trash"></i>
                                </button>
                            </div>
                        </div>
                    @empty
                        <div class="text-muted text-center py-3">لا توجد تعيينات بعد.</div>
                    @endforelse

                    <div class="text-center mt-3">
                        <a href="{{ route('reservation.index') }}" style="background-color:#1a237e;" class="btn btn-primary w-100">
                            <i class="la la-arrow-right me-1"></i> العودة
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal d'édition -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">تعديل التعيين</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editForm" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <input type="hidden" name="affectation_id" id="edit_affectation_id">
                    <input type="hidden" name="reservation_id" value="{{ $reservationId }}">
                    
                    <div class="mb-3">
                        <label class="form-label">الغرفة</label>
                        <select class="form-control" name="chambre_id" id="edit_chambre_id" required>
                            <option value="">-- اختر الغرفة --</option>
                            @foreach($chambres as $chambre)
                                <option value="{{ $chambre->id_chambre_tente }}">
                                    الغرفة {{ $chambre->num_chambre }} (السعة: {{ $chambre->capacite }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">عدد الذكور</label>
                        <input type="number" class="form-control" name="male_personnes" id="edit_male_personnes" min="0" value="0" required>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">عدد الاناث</label>
                        <input type="number" class="form-control" name="female_personnes" id="edit_female_personnes" min="0" value="0" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-save">حفظ التعديلات</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Forms for delete (hidden) -->
@foreach($affectations as $aff)
    <form id="delete-form-{{ $aff->id }}" action="{{ route('deleteAffectation', $aff->id) }}" method="POST" style="display: none;">
        @csrf
        @method('DELETE')
        <input type="hidden" name="reservation_id" value="{{ $reservationId }}">
    </form>
@endforeach

<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
// Variable globale pour l'ID de la réservation
const reservationId = {{ $reservationId }};

// Fonctions globales
window.showForm = function(id) {
    // Cacher tous les formulaires
    document.querySelectorAll("form[id^='form-']").forEach(f => f.classList.add('d-none'));
    // Afficher le formulaire sélectionné
    let form = document.getElementById('form-' + id);
    form.classList.remove('d-none');
}

window.toggleInputs = function(select) {
    let form = select.closest("form");
    let maleRemain = parseInt(select.dataset.remainingMale);
    let femaleRemain = parseInt(select.dataset.remainingFemale);

    let maleInput = form.querySelector(".input-male");
    let femaleInput = form.querySelector(".input-female");

    maleInput.classList.add("d-none");
    femaleInput.classList.add("d-none");

    if (select.value === "male") {
        maleInput.classList.remove("d-none");
        if (form.male_personnes) {
            form.male_personnes.max = maleRemain;
        }
    }

    if (select.value === "female") {
        femaleInput.classList.remove("d-none");
        if (form.female_personnes) {
            form.female_personnes.max = femaleRemain;
        }
    }
}

window.validateForm = function(form, maxMale, maxFemale) {
    let sexe = form.sexe?.value;
    let male = parseInt(form.male_personnes?.value || 0);
    let female = parseInt(form.female_personnes?.value || 0);
    let total = male + female;
    let errors = [];

    if (!sexe) errors.push("❗ الرجاء اختيار الجنس");
    if (total === 0) errors.push("❗ الرجاء إدخال عدد الأشخاص");

    let capaciteRestante = parseInt(form.getAttribute("data-reste"));
    if (total > capaciteRestante)
        errors.push("⚠️ العدد يتجاوز الطاقة المتبقية (" + capaciteRestante + ")");

    if (male > maxMale)
        errors.push("⚠️ عدد الرجال يتجاوز العدد المتبقي (" + maxMale + ")");

    if (female > maxFemale)
        errors.push("⚠️ عدد النساء يتجاوز العدد المتبقي (" + maxFemale + ")");

    if (errors.length > 0) {
        Swal.fire({
            icon: 'error',
            title: "خطأ",
            html: errors.join("<br>"),
        });
        return false;
    }

    return true;
}

window.confirmDelete = function(id, reservationId) {
    Swal.fire({
        title: 'تأكيد الحذف',
        text: "هل أنت متأكد من حذف هذا التعيين؟",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'نعم، احذف',
        cancelButtonText: 'إلغاء'
    }).then((result) => {
        if (result.isConfirmed) {
            let form = document.getElementById('delete-form-' + id);
            if (form) {
                // Ajouter les paramètres de redirection
                let redirectInput = document.createElement('input');
                redirectInput.type = 'hidden';
                redirectInput.name = 'redirect';
                redirectInput.value = 'chambres';
                form.appendChild(redirectInput);
                
                form.submit();
            }
        }
    });
}

// Nouvelle fonction pour ouvrir le modal d'édition
window.openEditModal = function(id, chambreId, male, female) {
    // Récupérer le modal
    let modal = new bootstrap.Modal(document.getElementById('editModal'));
    
    // Remplir les champs du formulaire
    document.getElementById('edit_affectation_id').value = id;
    document.getElementById('edit_chambre_id').value = chambreId;
    document.getElementById('edit_male_personnes').value = male;
    document.getElementById('edit_female_personnes').value = female;
    
    // Définir l'action du formulaire
    document.getElementById('editForm').action = '/admin/reservation/update-affectation/' + id;
    
    // Afficher le modal
    modal.show();
}

// Validation du formulaire d'édition
document.addEventListener('DOMContentLoaded', function() {
    const editForm = document.getElementById('editForm');
    if (editForm) {
        editForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            let male = parseInt(document.getElementById('edit_male_personnes').value) || 0;
            let female = parseInt(document.getElementById('edit_female_personnes').value) || 0;
            let total = male + female;
            
            if (total === 0) {
                Swal.fire({
                    icon: 'error',
                    title: 'خطأ',
                    text: 'الرجاء إدخال عدد الأشخاص'
                });
                return;
            }
            
            // Soumettre le formulaire
            this.submit();
        });
    }
});

// Initialisation au chargement du document
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM chargé');
    
    // Initialiser les selects
    document.querySelectorAll(".sexe-select").forEach(sel => {
        if (sel.value === "male" || sel.value === "female") {
            toggleInputs(sel);
        }
    });
    
    // Messages Flash
    @if(session('success'))
        Swal.fire({
            icon: 'success',
            title: 'تم بنجاح',
            text: '{{ session('success') }}',
            timer: 3000,
            showConfirmButton: false
        }).then(() => {
            window.location.href = "{{ route('reservation.chambres', $reservationId) }}";
        });
    @endif

    @if(session('error'))
        Swal.fire({
            icon: 'error',
            title: 'خطأ',
            text: '{{ session('error') }}'
        });
    @endif

    @if($errors->any())
        Swal.fire({
            icon: 'error',
            title: 'خطأ',
            html: '{!! implode("<br>", $errors->all()) !!}'
        });
    @endif
});
</script>
@endsection