@extends('layouts.app')

@section('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<style>
    body[dir="rtl"] .select2-container--default .select2-selection--single {
        direction: rtl;
        text-align: right;
    }
    
    .booking-form {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    }
    
    .form-section {
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        padding: 25px;
        margin-bottom: 25px;
        border-left: 4px solid #b51414;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .form-section:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    }
    
    .section-title {
        color: #2c3e50;
        font-weight: 700;
        font-size: 1.25rem;
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 2px solid #f1f3f4;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .section-title i {
        color: #b51414;
    }
    
    .form-label {
        font-weight: 600;
        color: #34495e;
        margin-bottom: 8px;
        font-size: 0.95rem;
    }
    
    .form-control, .form-select {
        border: 2px solid #e9ecef;
        border-radius: 8px;
        padding: 10px 15px;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        background: #fff;
    }
    
    .form-control:focus, .form-select:focus {
        border-color: #b51414;
        box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.15);
        background: #fff;
    }
    
    .form-control[readonly] {
        background-color: #f8f9fa;
        border-color: #dee2e6;
    }
    
    .input-group-icon {
        position: relative;
    }
    
    .input-group-icon .form-control {
        padding-right: 45px;
    }
    
    .input-group-icon i {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #6c757d;
        z-index: 5;
    }
    
    .counter-input {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .counter-btn {
        width: 40px;
        height: 40px;
        border: 2px solid #dee2e6;
        border-radius: 8px;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        font-weight: bold;
        font-size: 1.2rem;
    }
    
    .counter-btn:hover {
        background: #b51414;
        color: white;
        border-color: #b51414;
    }
    
    .counter-input input {
        text-align: center;
        flex: 1;
        max-width: 80px;
    }
    
    .table-responsive {
        border-radius: 10px;
        border: 1px solid #e9ecef;
        overflow-x: auto;
        overflow-y: visible !important;
    }
    
    #reservation-persons-table {
        margin-bottom: 0;
    }
    
    #reservation-persons-table th {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        color: black;
        border: none;
        padding: 15px;
        font-weight: 600;
    }
    
    #reservation-persons-table td {
        padding: 12px;
        vertical-align: middle;
    }
    
    .tarif-info {
        font-size: 0.8rem;
        color: #6c757d;
        margin-top: 2px;
    }
    
    .resto-card {
        border-radius: 10px;
        border: 2px solid #e9ecef;
        padding: 20px;
        background: white;
        margin-bottom: 15px;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    
    .resto-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 4px;
        background: #b51414;
    }
    
    .resto-card:hover {
        transform: translateX(5px);
        border-color: #b51414;
        box-shadow: 0 5px 15px rgba(40, 167, 69, 0.1);
    }
    
    .resto-card .resto-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
    
    .resto-card .resto-name {
        font-weight: 700;
        font-size: 1.1rem;
        color: #2c3e50;
    }
    
    .resto-card .resto-price {
        font-weight: 700;
        font-size: 1.1rem;
        color: #b51414;
    }
    
    .resto-card .resto-desc {
        color: #6c757d;
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .resto-card .resto-details {
        font-size: 0.85rem;
        border-top: 1px dashed #eee;
        padding-top: 8px;
        margin-top: 8px;
        color: #6c757d;
    }
    
    .empty-placeholder {
        text-align: center;
        padding: 40px;
        color: #6c757d;
        font-size: 1rem;
        background: #f8f9fa;
        border-radius: 8px;
        border: 2px dashed #dee2e6;
    }
    
    .card-resume {
        border-radius: 12px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        padding: 25px;
        background: white;
        position: sticky;
        top: 20px;
    }
    
    .card-resume h5 {
        color: #2c3e50;
        font-weight: 700;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 2px solid #f1f3f4;
    }
    
    .summary-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        padding: 8px 0;
        border-bottom: 1px dashed #e9ecef;
    }
    
    .summary-item:last-child {
        border-bottom: none;
    }
    
    .summary-label {
        color: #6c757d;
    }
    
    .summary-value {
        font-weight: 600;
        color: #2c3e50;
    }
    
    .summary-total {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        color: black;
        padding: 20px;
        border-radius: 10px;
        margin-top: 20px;
        text-align: center;
    }
    
    .summary-total .amount {
        font-size: 2rem;
        font-weight: 700;
        margin: 10px 0;
    }
    
#submitBtn {
    background-color: #bb2323;
    border: none;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    width: auto;
    min-width: 200px;
    max-width: 300px;
    margin: 20px auto 0 auto;
    color: white !important;
    display: block;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#submitBtn:hover:not(:disabled) {
    background-color: #a51e1e;
}

#submitBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #8a8a8a;
}

/* Surpasse les styles de Bootstrap pour btn-success */
#submitBtn.btn-success {
    background-color: #bb2323 !important;
    color: white !important;
}

#submitBtn.btn-success:hover:not(:disabled) {
    background-color: #a51e1e !important;
}

#submitBtn.btn-success:disabled {
    background-color: #8a8a8a !important;
}
    
    .alert-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        max-width: 400px;
    }
    
    @media (max-width: 768px) {
        .form-section {
            padding: 20px 15px;
        }
        
        .card-resume {
            position: static;
            margin-top: 30px;
        }
        
        .counter-input {
            flex-wrap: wrap;
        }
        
        #reservation-persons-table {
            font-size: 0.85rem;
        }
        
        #reservation-persons-table th,
        #reservation-persons-table td {
            padding: 8px 5px;
        }
    }
    
    .form-select {
        display: block;
        width: 100%;
        padding: 0.375rem 2.25rem 0.375rem 0.75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 16px 12px;
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .form-select:focus {
        border-color: #86b7fe;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }
    
    .select-fix {
        position: relative;
        overflow: visible !important;
        z-index: 1000;
    }

    .calc-note {
        background-color: #f8f9fa;
        border-left: 4px solid #b51414;
        padding: 10px 15px;
        margin-bottom: 15px;
        border-radius: 5px;
        font-size: 0.9rem;
    }
    
    /* Styles pour la nouvelle section tarif */
    .tarif-block {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        border: 2px solid #e9ecef;
        transition: all 0.3s ease;
    }

    .tarif-block:hover {
        border-color: #b51414;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .tarif-row {
        border-bottom: 1px dashed #dee2e6;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    .tarif-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .tarif-block:last-child {
        margin-bottom: 0;
    }

    .tarif-block .form-label {
        font-size: 0.9rem;
        margin-bottom: 5px;
        color: #495057;
    }

    .tarif-block .form-control {
        background: white;
    }

    @media (max-width: 768px) {
        .tarif-block {
            padding: 15px;
        }
        
        .tarif-row .col-md-2,
        .tarif-row .col-md-3 {
            margin-bottom: 15px;
        }
    }
    
    .tarif-total-row {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-top: 20px;
        border: 1px solid #dee2e6;
    }
</style>
@endsection

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

@section('content')
<div class="it-about-3-area p-relative pt-30 pb-125 booking-form">
    <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.reservation.breadcrumb_home') }}</span>
                    </a>
                </li>
                <li class="breadcrumb-item">
                    <a href="{{ route('reservation.index') }}">
                        <span>{{ __('site.reservation.reservation_index') }}</span>
                    </a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">{{ __('site.reservation.reservation_detail') }}</li>
            </ol>
        </nav>
        
        <div class="text-center mb-5">
            <h1 class="mb-3">
                {{ __('site.reservation.complete_booking', ['name' => trans_field($auberge, 'nom') ?? __('site.reservation.no_value')]) }}
            </h1>
            <!--p class="text-muted">{{ __('site.reservation.form_subtitle') }}</p-->
        </div>
        
        <div class="row">
            <div class="col-lg-8">
                <form method="POST" action="{{ route('reservation.store') }}" id="reservationForm" novalidate>
                    @csrf
                    <input type="hidden" name="id_auberge" value="{{ $auberge->id }}">
                    <input type="hidden" name="user_id" value="{{ auth()->id() ?? '' }}">
                    <input type="hidden" id="total_price" name="total_price" value="0">
                    
                    <!-- Section Informations Personnelles -->
                    <div class="form-section">
                        <h4 class="section-title">
                            <i class="bi bi-person-circle"></i>
                            {{ __('site.reservation.personal_info') }}
                        </h4>
                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <label class="form-label">{{ __('site.reservation.label_name') }}</label>
                                <div class="input-group-icon">
                                    <input type="text" name="nom_prenom" class="form-control" 
                                           value="{{ $user->nom_prenom ?? '' }}" readonly>
                                    <i class="bi bi-person"></i>
                                </div>
                            </div>
                            
                            <div class="col-md-6 mb-4">
                                <label class="form-label">{{ __('site.reservation.label_email') }}</label>
                                <div class="input-group-icon">
                                    <input type="email" name="email" class="form-control" 
                                           value="{{ $user->email ?? '' }}" readonly>
                                    <i class="bi bi-envelope"></i>
                                </div>
                            </div>
                            
                            <div class="col-md-6 mb-4">
                                <label class="form-label">{{ __('site.reservation.label_nationality') }}</label>
                                <div class="input-group-icon">
                                    <input type="text" class="form-control" 
                                           value="{{ $user->id_type_identite == 1 ? __('site.reservation.nationality.tn') : ($user->id_type_identite == 2 ? __('site.reservation.nationality.foreigner') : __('site.reservation.nationality.unspecified')) }}" 
                                           readonly>
                                    <i class="bi bi-globe"></i>
                                </div>
                            </div>
                            
                            <div class="col-md-6 mb-4">
                                <label class="form-label">{{ __('site.reservation.label_phone') }}</label>
                                <div class="input-group-icon">
                                    <input type="text" name="telephone" class="form-control"
                                           value="{{ $user->tel ?? '' }}" readonly>
                                    <i class="bi bi-telephone"></i>
                                </div>
                            </div>
                            
                            <div class="col-12 mb-4">
                                <label class="form-label">{{ __('site.reservation.label_address') }}</label>
                                <div class="input-group-icon">
                                    <input type="text" name="adresse" class="form-control"
                                           value="{{ $user->adresse ?? '' }}" readonly>
                                    <i class="bi bi-geo-alt"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Section Dates de Séjour -->
                    <div class="form-section">
                        <h4 class="section-title">
                            <i class="bi bi-calendar-check"></i>
                            {{ __('site.reservation.stay_dates') }}
                        </h4>
                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <label class="form-label">{{ __('site.reservation.label_date_arrive') }}</label>
                                <div class="input-group-icon">
                                    <input type="date" name="date_arrive" id="date_arrive" class="form-control" required>
                                    <i class="bi bi-calendar-plus"></i>
                                </div>
                            </div>
                            
                            <div class="col-md-6 mb-4">
                                <label class="form-label">{{ __('site.reservation.label_date_depart') }}</label>
                                <div class="input-group-icon">
                                    <input type="date" name="date_depart" id="date_depart" class="form-control" required disabled>
                                    <i class="bi bi-calendar-minus"></i>
                                </div>
                            </div>
                            
                            <div class="col-12 mb-4">
                                <label class="form-label">{{ __('site.reservation.label_nights') }}</label>
                                <div class="counter-input">
                                    <input type="number" id="nights" class="form-control" readonly>
                                    <span class="text-muted">{{ __('site.reservation.nights') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Section Types de Tarifs -->
                    <div class="form-section">
                        <h4 class="section-title">
                            <i class="bi bi-tags"></i>
                            {{ __('site.reservation.tarif_types') }}
                        </h4>
                        
                        <div class="tarif-container" id="tarif-container">
                            <!-- Premier bloc tarif (3 lignes) -->
                            <div class="tarif-block" data-index="0">
                                <!-- Ligne 1: Type de délégation -->
                                <div class="tarif-row">
                                    <div class="row align-items-center">
                                        <div class="col-md-3">
                                            <label class="form-label">{{ __('site.reservation.type_delegation') }}</label>
                                        </div>
                                        <div class="col-md-9">
                                            <div class="select-fix">
                                                <select name="persons[0][id_type_tarif]" 
                                                        class="form-control form-select tarif-select" 
                                                        data-index="0">
                                                    @foreach($tarifs as $type)
                                                        <option value="{{ $type->id_type }}" 
                                                                data-tarif-chambre="{{ $type->tarif_chambre }}"
                                                                data-tarif-tente="{{ $type->tarif_tente }}"
                                                                data-type="{{ $type->type }}">
                                                            @if(app()->getLocale() === 'ar')
                                                                {{ $type->type_ar }}
                                                            @elseif(app()->getLocale() === 'fr')
                                                                {{ $type->type_fr }}
                                                            @else
                                                                {{ $type->type_en }}
                                                            @endif
                                                            @if($type->type == 'groupe')
                                                                ({{ __('site.reservation.group') }})
                                                            @else
                                                                ({{ __('site.reservation.individual') }})
                                                            @endif
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Ligne 2: Type d'hébergement -->
                                <div class="tarif-row">
                                    <div class="row align-items-center">
                                        <div class="col-md-3">
                                            <label class="form-label">{{ __('site.reservation.type_accomodation') }}</label>
                                        </div>
                                        <div class="col-md-9">
                                            <div class="select-fix">
                                                <select name="persons[0][accomodation_type]" 
                                                        class="form-control form-select accomodation-select" 
                                                        data-index="0">
                                                    <option value="chambre">{{ __('site.reservation.accomodation.chambre') }}</option>
                                                    <option value="tente">{{ __('site.reservation.accomodation.tente') }}</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Ligne 3: Champs de saisie -->
                                <div class="tarif-row">
                                    <div class="row align-items-center">
                                        <div class="col-md-2 mb-2 mb-md-0">
                                            <label class="form-label">{{ __('site.reservation.hommes_tarif') }}</label>
                                            <input type="number" name="persons[0][nbr_hommes]" 
                                                   class="form-control nbr_hommes" 
                                                   min="0" value="0" 
                                                   data-index="0">
                                        </div>
                                        
                                        <div class="col-md-2 mb-2 mb-md-0">
                                            <label class="form-label">{{ __('site.reservation.femmes_tarif') }}</label>
                                            <input type="number" name="persons[0][nbr_femmes]" 
                                                   class="form-control nbr_femmes" 
                                                   min="0" value="0" 
                                                   data-index="0">
                                        </div>
                                        
                                        <div class="col-md-2 mb-2 mb-md-0">
                                            <label class="form-label">{{ __('site.reservation.tarif_per_person') }}</label>
                                            <input type="number" name="persons[0][tarif]" 
                                                   class="form-control tarif-input" 
                                                   readonly 
                                                   value="{{ $tarifs->first()->tarif_chambre ?? 0 }}"
                                                   data-index="0">
                                            <small class="tarif-info">{{ __('site.reservation.currency') }}</small>
                                        </div>
                                        
                                        <div class="col-md-2 mb-2 mb-md-0">
                                            <label class="form-label">{{ __('site.reservation.subtotal_tarif') }}</label>
                                            <input type="number" name="persons[0][subtotal]" 
                                                   class="form-control subtotal-input" 
                                                   readonly 
                                                   data-index="0">
                                            <small class="tarif-info">{{ __('site.reservation.currency') }}</small>
                                        </div>
                                        
                                        <div class="col-md-2 mb-2 mb-md-0">
                                            <label class="form-label">{{ __('site.reservation.total_persons') }}</label>
                                            <input type="number" name="persons[0][nbr_total]" 
                                                   class="form-control nbr_total" 
                                                   readonly 
                                                   data-index="0">
                                        </div>
                                        
                                        <div class="col-md-2 mb-2 mb-md-0 d-flex align-items-end">
                                            <button type="button" class="btn btn-danger remove-block w-100" data-index="0" style="display: none;">
                                                <i class="bi bi-trash"></i>
                                                {{ __('site.supprimer_tarif') }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Boutons Ajouter/Supprimer -->
                        <div class="row mt-4">
                            <div class="col-md-6">
                                <button type="button" id="add-block" class="btn btn-outline-success w-100">
                                    <i class="bi bi-plus-circle"></i>
                                    {{ __('site.ajouter_ligne_tarif') }}
                                </button>
                            </div>
                            <div class="col-md-6">
                                <button type="button" id="remove-block" class="btn btn-outline-danger w-100" disabled>
                                    <i class="bi bi-dash-circle"></i>
                                    {{ __('site.supprimer_tarif') }}
                                </button>
                            </div>
                        </div>
                        
                        <!-- Totaux -->
                        <div class="tarif-total-row mt-4">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <span class="form-label fw-bold">{{ __('site.reservation.total_persons') }}:</span>
                                        <span class="fw-bold fs-5">
                                            <input type="number" id="total_persons" class="form-control text-center fw-bold" readonly value="0" style="width: 100px; display: inline-block;">
                                        </span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <span class="form-label fw-bold">{{ __('site.reservation.total_general_tarif') }} ({{ __('site.reservation.per_night') }}):</span>
                                        <span class="fw-bold fs-5">
                                            <input type="number" id="total_general" class="form-control text-center fw-bold" readonly value="0" style="width: 150px; display: inline-block;">
                                            <span class="ms-1">{{ __('site.reservation.currency') }}</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Champs cachés pour le total des personnes -->
                        <input type="hidden" name="nbr_h" id="nbr_h_total" value="0">
                        <input type="hidden" name="nbr_f" id="nbr_f_total" value="0">
                        <input type="hidden" name="nbr_personnes" id="nbr_personnes_total" value="0">
                    </div>
                    
                    <!-- Section Services Restauration -->
                    <div class="form-section">
                        <h4 class="section-title">
                            <i class="bi bi-cup-hot"></i>
                            {{ __('site.reservation.label_resto_services') }}
                        </h4>
                        
                        <div class="calc-note">
                            <i class="bi bi-info-circle"></i>
                            {{ __('site.reservation.resto_calc_note') }}
                        </div>
                        
                        <div class="row">
                            @foreach($restaurations as $res)
                            <div class="col-md-6 mb-3">
                                <div class="form-check card p-3">
                                    <input class="form-check-input rest-option" 
                                           type="checkbox" 
                                           data-price="{{ $res->tarif }}" 
                                           data-description="{{ trans_field($res, 'description') ? \Illuminate\Support\Str::of(trans_field($res, 'description'))->replace('"','&quot;') : '' }}" 
                                           data-nom="{{ trans_field($res, 'nom') ? \Illuminate\Support\Str::of(trans_field($res, 'nom'))->replace('"','&quot;') : '' }}"
                                           id="resto_{{ $res->id_rest }}"
                                           value="{{ $res->id_rest }}" 
                                           name="restaurations_selected[]">
                                    <label class="form-check-label d-flex justify-content-between align-items-center" 
                                           for="resto_{{ $res->id_rest }}">
                                        <span>{{ trans_field($res, 'nom') }}</span>
                                        <span class="badge rounded-pill" style="background-color: #b51414; color: white; border: none;">
                                            {{ number_format($res->tarif, 2) }} {{ __('site.currency') }}
                                        </span>
                                    </label>
                                    <small class="text-muted mt-1">
                                        {{ __('site.reservation.per_person_per_night') }}
                                    </small>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        
                        <div id="restoDetails" class="mt-4">
                            <h6 class="mb-3">{{ __('site.reservation.selected_services') }}</h6>
                            <div class="empty-placeholder">{{ __('site.reservation.resto_none_selected') }}</div>
                        </div>
                    </div>
                    
                    <!-- Section Remarques -->
                    <div class="form-section">
                        <h4 class="section-title">
                            <i class="bi bi-chat-left-text"></i>
                            {{ __('site.reservation.label_notes') }}
                        </h4>
                        <textarea name="remarque" class="form-control" rows="4" 
                                  placeholder="{{ __('site.reservation.notes_placeholder') }}"></textarea>
                    </div>
                    
                    <!-- Section Conditions -->
                    <div class="form-section">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="accept_terms" id="accept_terms" required>
                            <label class="form-check-label" for="accept_terms">
                                {{ __('site.reservation.accept_terms') }}
                            </label>
                        </div>
						<button id="submitBtn" type="submit" class="submit-button" disabled>
							<i class="bi bi-check-circle"></i>
							{{ __('site.reservation.confirm_booking') }}
						</button>
                    </div>
                    
                    <!--button id="submitBtn" type="submit" style="color:white;" class="back-button" disabled>
                        <i class="bi bi-check-circle"></i>
                        {{ __('site.reservation.confirm_booking') }}
                    </button-->
					
					<!--style>
						.back-button {
						background: linear-gradient(135deg, #cf9090 0%, #bb2323 100%);
						border: none;
						padding: 15px 40px;
						font-size: 1.1rem;
						font-weight: 600;
						border-radius: 10px;
						transition: all 0.3s ease;
						width: 100%;
						margin-top: 20px;
						color: white;
						text-decoration: none;
						display: block;
						text-align: center;
					}
					
					.back-button:hover {
						transform: translateY(-2px);
						box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
						color: white;
					}
					</style-->
					
					

<style> /* Style simple pour le bouton submit */
.submit-button {
    background-color: #bb2323;
    border: none;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 0;
    transition: all 0.3s ease;
    color: white !important;
    text-decoration: none;
    display: block;
    width: 100%;
    margin-top: 20px;
    cursor: pointer;
    text-align: center;
}

.submit-button:hover:not(:disabled) {
    background-color: #a51e1e;
}

.submit-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #8a8a8a;
}

.submit-button i {
    margin-right: 8px;
    font-size: 1.2rem;
}
</style>
                </form>
            </div>
            
            <div class="col-lg-4">
                <div class="card card-resume">
                    <h5 class="mb-4">
                        <i class="bi bi-receipt"></i>
                        {{ __('site.reservation.summary_title') }}
                    </h5>
                    
                    <div class="summary-item">
                        <span class="summary-label">{{ __('site.reservation.summary_institution') }}:</span>
                        <span class="summary-value">{{ trans_field($auberge, 'nom') }}</span>
                    </div>
                    
                    <div class="summary-item">
                        <span class="summary-label">{{ __('site.reservation.summary_nights') }}:</span>
                        <span class="summary-value" id="summary_nights">0</span>
                    </div>
                    
                    <div class="summary-item">
                        <span class="summary-label">{{ __('site.reservation.summary_capacity') }}:</span>
                        <span class="summary-value" id="summary_capacity">0</span>
                    </div>
                    
                    <div class="summary-item">
                        <span class="summary-label">{{ __('site.reservation.summary_services') }}:</span>
                        <span class="summary-value" id="summary_services">0 {{ __('site.currency') }}</span>
                    </div>
                    
                    <div class="summary-item">
                        <span class="summary-label">{{ __('site.reservation.summary_tarif_night') }}:</span>
                        <span class="summary-value" id="summary_tarif_night">0 {{ __('site.currency') }}</span>
                    </div>
                    
                    <div class="summary-item">
                        <span class="summary-label">{{ __('site.reservation.summary_total_tarif') }}:</span>
                        <span class="summary-value" id="summary_total_tarif">0 {{ __('site.currency') }}</span>
                    </div>
                    
                    <div class="summary-total">
                        <div class="summary-label">{{ __('site.reservation.summary_total') }}</div>
                        <div class="amount" id="summary_total">0 {{ __('site.currency') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ar.js"></script>

<script>
$(document).ready(function () {
    // Configuration
    const today = new Date();
    const todayStr = today.toISOString().split('T')[0];
    
    // Messages
    const MSG_CHECK_DATES = @json(__('site.reservation.alert_check_dates'));
    const MSG_ENTER_PERSONS = @json(__('site.reservation.alert_enter_person_count'));
    const MSG_RESTO_NONE = @json(__('site.reservation.resto_none_selected'));
    const MSG_RESTO_SERVICE = @json(__('site.reservation.resto_service'));
    const MSG_ALERT_TITLE = '{{ __("site.reservation.alert_title") }}';
    const MSG_OK = '{{ __("site.reservation.ok_button") }}';
    const MSG_AT_LEAST_ONE_TARIF = '{{ __("site.reservation.at_least_one_tarif") }}';
    
    // Éléments DOM
    const $dateArr = $('#date_arrive');
    const $dateDep = $('#date_depart');
    const $nights = $('#nights');
    const $checkbox = $('#accept_terms');
    const $submit = $('#submitBtn');
    const $totalPriceInput = $('#total_price');
    
    // Récupérer les tarifs depuis les options
    const tarifsData = {};
    @foreach($tarifs as $type)
        tarifsData[{{ $type->id_type }}] = {
            chambre: parseFloat("{{ $type->tarif_chambre }}") || 0,
            tente: parseFloat("{{ $type->tarif_tente }}") || 0,
            type: "{{ $type->type }}"
        };
    @endforeach
    
    console.log('Tarifs chargés:', tarifsData);
    
    // Initialisation Flatpickr pour les dates
    const locale = $('html').attr('lang') === 'ar' ? 'ar' : 'fr';
    flatpickr.localize(flatpickr.l10ns[locale]);
    
    $dateArr.attr('min', todayStr);
    $dateDep.prop('disabled', true);
    
    // Gestion des dates
    $dateArr.on('change', function() {
        const arriveDateStr = $(this).val();
        if (arriveDateStr) {
            const arriveDate = new Date(arriveDateStr);
            $dateDep.prop('disabled', false);
            
            const depMin = new Date(arriveDate);
            depMin.setDate(depMin.getDate() + 1);
            const depMinStr = depMin.toISOString().split('T')[0];
            $dateDep.attr('min', depMinStr);
            
            if ($dateDep.val() && $dateDep.val() < depMinStr) {
                $dateDep.val(depMinStr);
            }
        } else {
            $dateDep.prop('disabled', true);
            $dateDep.val('');
        }
        updateSummary();
    });
    
    $dateDep.on('change', updateSummary);
    
    // Calcul des nuits
    function calcNights() {
        const a = new Date($dateArr.val());
        const b = new Date($dateDep.val());
        if ($dateArr.val() && $dateDep.val() && b > a) {
            const diff = Math.ceil((b - a) / (1000 * 60 * 60 * 24));
            $nights.val(diff);
            $('#summary_nights').text(diff);
            return diff;
        }
        $nights.val('');
        $('#summary_nights').text(0);
        return 0;
    }
    
    // Calcul des restaurations
    function calcRestaurations() {
        let total = 0;
        const nbrPersons = parseInt($('#total_persons').val()) || 0;
        const nights = calcNights() || 0;
        
        $('.rest-option:checked').each(function() {
            const price = parseFloat($(this).data('price')) || 0;
            // Multiplier par nombre de personnes ET nombre de nuits
            total += price * nbrPersons * nights;
        });
        $('#summary_services').text(total.toFixed(3) + ' {{ __('site.currency') }}');
        return total;
    }
    
    // Fonction pour mettre à jour le tarif selon le type d'hébergement (adapté pour les blocs)
    function updateTarifForBlock($block) {
        const index = $block.data('index') || 0;
        const tarifId = parseInt($block.find('.tarif-select').val()) || 0;
        const accomodationType = $block.find('.accomodation-select').val();
        const tarifInfo = tarifsData[tarifId] || { chambre: 0, tente: 0 };
        
        let tarif = 0;
        if (accomodationType === 'chambre') {
            tarif = tarifInfo.chambre;
        } else if (accomodationType === 'tente') {
            tarif = tarifInfo.tente;
        }
        
        $block.find('.tarif-input').val(tarif);
        
        // Recalculer le sous-total
        const hommes = parseInt($block.find('.nbr_hommes').val()) || 0;
        const femmes = parseInt($block.find('.nbr_femmes').val()) || 0;
        const total = hommes + femmes;
        const subtotal = total * tarif;
        
        $block.find('.nbr_total').val(total);
        $block.find('.subtotal-input').val(subtotal.toFixed(3));
        
        return {
            hommes: hommes,
            femmes: femmes,
            total: total,
            subtotal: subtotal,
            tarif: tarif,
            tarifId: tarifId,
            accomodationType: accomodationType
        };
    }
    
    // Calculer le total des personnes et le montant des tarifs (adapté pour les blocs)
    function updateTarifTotals() {
        let totalHommes = 0;
        let totalFemmes = 0;
        let totalPersons = 0;
        let totalGeneral = 0;
        
        $('.tarif-block').each(function() {
            const blockData = updateTarifForBlock($(this));
            
            // Mettre à jour les totaux généraux
            totalHommes += blockData.hommes;
            totalFemmes += blockData.femmes;
            totalPersons += blockData.total;
            totalGeneral += blockData.subtotal;
        });
        
        $('#total_persons').val(totalPersons);
        $('#total_general').val(totalGeneral.toFixed(3));
        
        // Mettre à jour les champs cachés
        $('#nbr_h_total').val(totalHommes);
        $('#nbr_f_total').val(totalFemmes);
        $('#nbr_personnes_total').val(totalPersons);
        
        return {
            totalPersons: totalPersons,
            totalGeneral: totalGeneral,
            totalHommes: totalHommes,
            totalFemmes: totalFemmes
        };
    }
    
    // Mise à jour du résumé
    function updateSummary() {
        const nights = calcNights();
        const tarifTotals = updateTarifTotals();
        const nbrPersons = tarifTotals.totalPersons;
        const tarifNightTotal = tarifTotals.totalGeneral;
        
        // Calculer le total hébergement
        const tarifTotal = tarifNightTotal * nights;
        
        // Calculer le total restauration (MULTIPLIÉ par personnes et nuits)
        const restoTotal = calcRestaurations();
        
        // Calculer le total FINAL (sans taxes)
        const totalFinal = tarifTotal + restoTotal;
        
        // Mettre à jour les éléments d'affichage
        $('#summary_capacity').text(nbrPersons);
        $('#summary_tarif_night').text(tarifNightTotal.toFixed(3) + ' {{ __('site.currency') }}');
        $('#summary_total_tarif').text(tarifTotal.toFixed(3) + ' {{ __('site.currency') }}');
        $('#summary_total').text(totalFinal.toFixed(3) + ' {{ __('site.currency') }}');
        
        // Mettre à jour le champ total_price avec le total SANS taxes
        $totalPriceInput.val(totalFinal.toFixed(3));
        
        console.log('Calculs:', {
            nuits: nights,
            tarifParNuit: tarifNightTotal,
            totalHebergement: tarifTotal,
            restauration: restoTotal,
            nbrPersonnes: nbrPersons,
            totalFinal: totalFinal,
            details: `Restauration: ${$('.rest-option:checked').length} service(s) × ${nbrPersons} pers × ${nights} nuits`
        });

        // Mettre à jour l'affichage des services sélectionnés
        renderSelectedRestos();
    }
    
    // Écouteurs d'événements pour les changements de tarifs (adaptés pour les blocs)
    $(document).on('change', '.tarif-select', function() {
        updateTarifForBlock($(this).closest('.tarif-block'));
        updateTarifTotals();
        updateSummary();
    });
    
    $(document).on('change', '.accomodation-select', function() {
        updateTarifForBlock($(this).closest('.tarif-block'));
        updateTarifTotals();
        updateSummary();
    });
    
    $(document).on('input', '.nbr_hommes, .nbr_femmes', function() {
        const $block = $(this).closest('.tarif-block');
        updateTarifForBlock($block);
        updateTarifTotals();
        updateSummary();
    });
    
    // Fonction pour ajouter un nouveau bloc tarif
    $('#add-block').on('click', function() {
        let index = $('.tarif-block').length;
        const firstTarifId = Object.keys(tarifsData)[0] || 0;
        const firstTarif = tarifsData[firstTarifId] || { chambre: 0, tente: 0 };
        
        const newBlock = `
        <div class="tarif-block" data-index="${index}">
            <!-- Ligne 1: Type de délégation -->
            <div class="tarif-row">
                <div class="row align-items-center">
                    <div class="col-md-3">
                        <label class="form-label">{{ __('site.reservation.type_delegation') }}</label>
                    </div>
                    <div class="col-md-9">
                        <div class="select-fix">
                            <select name="persons[${index}][id_type_tarif]" 
                                    class="form-control form-select tarif-select" 
                                    data-index="${index}">
                                @foreach($tarifs as $type)
                                    <option value="{{ $type->id_type }}" 
                                            data-tarif-chambre="{{ $type->tarif_chambre }}"
                                            data-tarif-tente="{{ $type->tarif_tente }}"
                                            data-type="{{ $type->type }}">
                                        @if(app()->getLocale() === 'ar')
                                            {{ $type->type_ar }}
                                        @elseif(app()->getLocale() === 'fr')
                                            {{ $type->type_fr }}
                                        @else
                                            {{ $type->type_en }}
                                        @endif
                                        @if($type->type == 'groupe')
                                            ({{ __('site.reservation.group') }})
                                        @else
                                            ({{ __('site.reservation.individual') }})
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Ligne 2: Type d'hébergement -->
            <div class="tarif-row">
                <div class="row align-items-center">
                    <div class="col-md-3">
                        <label class="form-label">{{ __('site.reservation.type_accomodation') }}</label>
                    </div>
                    <div class="col-md-9">
                        <div class="select-fix">
                            <select name="persons[${index}][accomodation_type]" 
                                    class="form-control form-select accomodation-select" 
                                    data-index="${index}">
                                <option value="chambre">{{ __('site.reservation.accomodation.chambre') }}</option>
                                <option value="tente">{{ __('site.reservation.accomodation.tente') }}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Ligne 3: Champs de saisie -->
            <div class="tarif-row">
                <div class="row align-items-center">
                    <div class="col-md-2 mb-2 mb-md-0">
                        <label class="form-label">{{ __('site.reservation.hommes_tarif') }}</label>
                        <input type="number" name="persons[${index}][nbr_hommes]" 
                               class="form-control nbr_hommes" 
                               min="0" value="0" 
                               data-index="${index}">
                    </div>
                    
                    <div class="col-md-2 mb-2 mb-md-0">
                        <label class="form-label">{{ __('site.reservation.femmes_tarif') }}</label>
                        <input type="number" name="persons[${index}][nbr_femmes]" 
                               class="form-control nbr_femmes" 
                               min="0" value="0" 
                               data-index="${index}">
                    </div>
                    
                    <div class="col-md-2 mb-2 mb-md-0">
                        <label class="form-label">{{ __('site.reservation.tarif_per_person') }}</label>
                        <input type="number" name="persons[${index}][tarif]" 
                               class="form-control tarif-input" 
                               readonly 
                               value="${firstTarif.chambre}"
                               data-index="${index}">
                        <small class="tarif-info">{{ __('site.reservation.currency') }}</small>
                    </div>
                    
                    <div class="col-md-2 mb-2 mb-md-0">
                        <label class="form-label">{{ __('site.reservation.subtotal_tarif') }}</label>
                        <input type="number" name="persons[${index}][subtotal]" 
                               class="form-control subtotal-input" 
                               readonly 
                               data-index="${index}">
                        <small class="tarif-info">{{ __('site.reservation.currency') }}</small>
                    </div>
                    
                    <div class="col-md-2 mb-2 mb-md-0">
                        <label class="form-label">{{ __('site.reservation.total_persons') }}</label>
                        <input type="number" name="persons[${index}][nbr_total]" 
                               class="form-control nbr_total" 
                               readonly 
                               data-index="${index}">
                    </div>
                    
                    <div class="col-md-2 mb-2 mb-md-0 d-flex align-items-end">
                        <button type="button" class="btn btn-danger remove-block w-100" data-index="${index}">
                            <i class="bi bi-trash"></i>
                            {{ __('site.supprimer_tarif') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
        `;
        
        $('#tarif-container').append(newBlock);
        
        // Activer le bouton de suppression si on a plus d'un bloc
        if ($('.tarif-block').length > 1) {
            $('#remove-block').prop('disabled', false);
            $('.tarif-block:first-child .remove-block').show();
        }
        
        updateTarifTotals();
        updateSummary();
    });
    
    // Gestion de la suppression d'un bloc
    $('#remove-block').on('click', function() {
        const blocks = $('.tarif-block');
        if (blocks.length > 1) {
            // Supprimer le dernier bloc
            blocks.last().remove();
            
            // Mettre à jour les indices
            $('.tarif-block').each(function(index) {
                $(this).attr('data-index', index);
                $(this).find('select, input').attr('data-index', index);
                $(this).find('[name]').each(function() {
                    const name = $(this).attr('name');
                    if (name) {
                        $(this).attr('name', name.replace(/persons\[\d+\]/, `persons[${index}]`));
                    }
                });
            });
            
            // Désactiver le bouton si on n'a plus qu'un bloc
            if ($('.tarif-block').length === 1) {
                $('#remove-block').prop('disabled', true);
                $('.remove-block').hide();
            }
            
            updateTarifTotals();
            updateSummary();
        } else {
            Swal.fire({
                icon: 'warning',
                title: MSG_ALERT_TITLE,
                text: MSG_AT_LEAST_ONE_TARIF,
                confirmButtonText: MSG_OK
            });
        }
    });
    
    // Gestion de la suppression d'un bloc spécifique
    $(document).on('click', '.remove-block', function() {
        const $block = $(this).closest('.tarif-block');
        const index = $block.data('index');
        
        if ($('.tarif-block').length > 1) {
            $block.remove();
            
            // Mettre à jour les indices
            $('.tarif-block').each(function(newIndex) {
                $(this).attr('data-index', newIndex);
                $(this).find('select, input').attr('data-index', newIndex);
                $(this).find('[name]').each(function() {
                    const name = $(this).attr('name');
                    if (name) {
                        $(this).attr('name', name.replace(/persons\[\d+\]/, `persons[${newIndex}]`));
                    }
                });
            });
            
            // Désactiver le bouton principal si on n'a plus qu'un bloc
            if ($('.tarif-block').length === 1) {
                $('#remove-block').prop('disabled', true);
                $('.remove-block').hide();
            }
            
            updateTarifTotals();
            updateSummary();
        }
    });
    
    // Gestion des services de restauration - MODIFIÉ POUR AFFICHER LE CALCUL DÉTAILLÉ
    function buildCard(id, nom, description, prix) {
        const nbrPersons = parseInt($('#total_persons').val()) || 0;
        const nights = calcNights() || 0;
        const totalPerService = Number(prix * nbrPersons * nights).toFixed(3);
        
        const html = `
            <div class="resto-card" data-resto-id="${escapeHtml(id)}">
                <div class="resto-header">
                    <div class="resto-name">${escapeHtml(nom)}</div>
                    <div class="resto-price">${totalPerService} {{ __('site.currency') }}</div>
                </div>
                <div class="resto-desc">${escapeHtml(description)}</div>
                <div class="resto-details">
                    <small>
                        ${Number(prix).toFixed(3)} {{ __('site.currency') }} × ${nbrPersons} {{ __('site.reservation.persons') }} × ${nights} {{ __('site.reservation.nights') }}
                    </small>
                </div>
            </div>
        `;
        return html;
    }
    
    function renderSelectedRestos() {
        const $container = $('#restoDetails');
        $container.empty();
        
        const $checked = $('.rest-option:checked');
        const nbrPersons = parseInt($('#total_persons').val()) || 0;
        const nights = calcNights() || 0;
        
        if ($checked.length === 0) {
            $container.append('<div class="empty-placeholder">' + MSG_RESTO_NONE + '</div>');
            return;
        }
        
        // Ajouter un en-tête informatif
        if (nbrPersons > 0 && nights > 0) {
            const headerHtml = `
                <h6 class="mb-3">{{ __('site.reservation.selected_services') }}</h6>
                <div class="alert alert-info mb-3 py-2">
                    <small>
                        <i class="bi bi-info-circle"></i>
                        {{ __('site.reservation.resto_calc_detail', ['persons' => '${nbrPersons}', 'nights' => '${nights}']) }}
                    </small>
                </div>
            `;
            $container.append(headerHtml);
        } else {
            $container.append('<h6 class="mb-3">{{ __('site.reservation.selected_services') }}</h6>');
        }
        
        $checked.each(function() {
            const $this = $(this);
            const id = $this.val();
            const nom = $this.data('nom') || MSG_RESTO_SERVICE;
            const desc = $this.data('description') || '-';
            const prix = $this.data('price') || 0;
            
            $container.append(buildCard(id, nom, desc, prix));
        });
    }
    
    function escapeHtml(str) {
        if (!str) return '';
        return String(str)
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    }
    
    $(document).on('change', '.rest-option', function() {
        updateSummary();
    });
    
    // Validation du formulaire
    $checkbox.on('change', function() {
        $submit.prop('disabled', !$(this).is(':checked'));
    });
    
    $('#reservationForm').on('submit', function(e) {
        // Mettre à jour tous les calculs avant soumission
        updateTarifTotals();
        updateSummary();
        
        // Vérifier que total_price a une valeur valide
        const totalPrice = parseFloat($totalPriceInput.val()) || 0;
        if (totalPrice <= 0) {
            e.preventDefault();
            Swal.fire({
                icon: 'error',
                title: MSG_ALERT_TITLE,
                text: '{{ __("site.reservation.error_total_price_zero") }}',
                confirmButtonText: MSG_OK
            });
            return false;
        }
        
        const nights = calcNights();
        const nbrPersons = parseInt($('#total_persons').val()) || 0;
        
        if (nights <= 0) {
            e.preventDefault();
            Swal.fire({
                icon: 'warning',
                title: MSG_ALERT_TITLE,
                text: MSG_CHECK_DATES,
                confirmButtonText: MSG_OK
            });
            return false;
        }
        
        if (nbrPersons <= 0) {
            e.preventDefault();
            Swal.fire({
                icon: 'warning',
                title: MSG_ALERT_TITLE,
                text: MSG_ENTER_PERSONS,
                confirmButtonText: MSG_OK
            });
            return false;
        }
        
        // Debug: Afficher les données envoyées
        console.log('Données envoyées:', {
            total_price: $totalPriceInput.val(),
            nbr_personnes: $('#nbr_personnes_total').val(),
            nbr_h: $('#nbr_h_total').val(),
            nbr_f: $('#nbr_f_total').val(),
            persons_count: $('.tarif-select').length
        });
    });
    
    // Initialisation
    updateTarifTotals();
    renderSelectedRestos();
    updateSummary();
});
</script>
@endsection