@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>
<link rel="stylesheet" href="{{ asset('BackOfficeAR/css/formulaire_edit.css') }}">
<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(181, 20, 20, 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(181, 20, 20, 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;
    }

    #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;
        }
    }
    
    .tarif-select, .accomodation-select {
        width: 100%;
        padding: 12px 15px;
        border: 2px solid #e9ecef;
        border-radius: 8px;
        background-color: white;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        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: left 0.75rem center;
        background-size: 16px 12px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        text-align: right;
        direction: rtl;
    }

    .tarif-select:hover, .accomodation-select:hover {
        border-color: #b51414;
    }

    .tarif-select:focus, .accomodation-select:focus {
        border-color: #b51414;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(181, 20, 20, 0.25);
    }

    .tarif-option {
        padding: 10px 15px;
        font-size: 1rem;
        direction: rtl;
        text-align: right;
    }
    
    .select-fix {
        position: relative;
        overflow: visible !important;
    }

    .calc-note {
        background-color: #f8f9fa;
        border-right: 4px solid #b51414;
        padding: 10px 15px;
        margin-bottom: 15px;
        border-radius: 5px;
        font-size: 0.9rem;
    }
    
    .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-total-row {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-top: 20px;
        border: 1px solid #dee2e6;
    }
    
    .wafd-options {
        display: flex;
        gap: 30px;
        margin-top: 10px;
    }
    
    .wafd-option {
        flex: 1;
        padding: 15px;
        border: 2px solid #e9ecef;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .wafd-option.selected {
        border-color: #b51414;
        background-color: rgba(181, 20, 20, 0.05);
    }
    
    .wafd-option .form-check {
        margin: 0;
    }
    
    .limit-warning {
        color: #b51414;
        font-size: 0.85rem;
        margin-top: 5px;
        display: none;
    }
    
    .limit-warning.visible {
        display: block;
    }

    .tarif-select option, .accomodation-select option {
        direction: rtl;
        text-align: right;
        padding: 10px;
        font-size: 0.95rem;
    }

    /* Nouveaux styles pour la restauration par jour */
    .days-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 20px;
        border-bottom: 2px solid #e9ecef;
        padding-bottom: 15px;
    }
    
    .day-tab {
        padding: 10px 20px;
        background: #f8f9fa;
        border: 2px solid #e9ecef;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: 600;
        color: #6c757d;
    }
    
    .day-tab:hover {
        border-color: #b51414;
        background: #fff;
    }
    
    .day-tab.active {
        background: #b51414;
        border-color: #b51414;
        color: white;
    }
    
    .day-tab .date-badge {
        font-size: 0.75rem;
        opacity: 0.8;
        margin-left: 5px;
    }
    
    .day-resto-container {
        display: none;
    }
    
    .day-resto-container.active {
        display: block;
    }
    
    .day-resto-header {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .day-resto-header .day-title {
        font-weight: 700;
        color: #2c3e50;
        font-size: 1.1rem;
    }
    
    .day-resto-header .day-subtitle {
        color: #6c757d;
        font-size: 0.9rem;
    }
    
    .day-resto-header .day-total {
        background: #b51414;
        color: white;
        padding: 5px 15px;
        border-radius: 20px;
        font-weight: 600;
    }
    
    .resto-option-card {
        border: 2px solid #e9ecef;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 15px;
        transition: all 0.3s ease;
        cursor: pointer;
        background: white;
    }
    
    .resto-option-card:hover {
        border-color: #b51414;
        box-shadow: 0 4px 12px rgba(181, 20, 20, 0.1);
    }
    
    .resto-option-card.selected {
        border-color: #b51414;
        background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    }
    
    .resto-option-card .resto-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
    
    .resto-option-card .resto-name {
        font-weight: 700;
        color: #2c3e50;
    }
    
    .resto-option-card .resto-price {
        color: #b51414;
        font-weight: 700;
    }
    
    .resto-option-card .resto-check {
        margin-left: 10px;
    }
    
    .resto-option-card .resto-check input {
        width: 20px;
        height: 20px;
        cursor: pointer;
        accent-color: #b51414;
    }
    
    .multiple-selector {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
        border: 2px solid #e9ecef;
    }
    
    .multiple-selector-title {
        font-weight: 600;
        margin-bottom: 15px;
        color: #2c3e50;
    }
    
    .multiple-selector-buttons {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .multiple-selector-btn {
        padding: 8px 15px;
        background: white;
        border: 2px solid #e9ecef;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.9rem;
    }
    
    .multiple-selector-btn:hover {
        border-color: #b51414;
        color: #b51414;
    }
    
    .multiple-selector-btn.active {
        background: #b51414;
        border-color: #b51414;
        color: white;
    }
    
    .resto-summary {
        background: white;
        border-radius: 10px;
        padding: 20px;
        margin-top: 20px;
        border: 2px solid #e9ecef;
    }
    
    .resto-summary-title {
        font-weight: 700;
        margin-bottom: 15px;
        color: #2c3e50;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .resto-summary-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px dashed #e9ecef;
    }
    
    .resto-summary-item:last-child {
        border-bottom: none;
    }
    
    .resto-summary-day {
        font-weight: 600;
        color: #2c3e50;
        min-width: 100px;
    }
    
    .resto-summary-services {
        flex: 1;
        margin: 0 15px;
        color: #6c757d;
        font-size: 0.9rem;
    }
    
    .resto-summary-price {
        font-weight: 600;
        color: #b51414;
        min-width: 100px;
        text-align: left;
    }
    
    .badge-resto {
        background: #b51414;
        color: white;
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 0.75rem;
        margin-left: 5px;
    }

    /* Styles pour la pause café */
    .cafe-counter {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        margin-top: 10px;
    }
    
    .cafe-counter-btn {
        width: 40px;
        height: 40px;
        border: 2px solid #e9ecef;
        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;
    }
    
    .cafe-counter-btn:hover {
        background: #b51414;
        color: white;
        border-color: #b51414;
    }
    
    .cafe-quantity {
        text-align: center;
        font-size: 1.2rem;
        font-weight: bold;
        width: 60px;
        border: 2px solid #e9ecef;
        border-radius: 8px;
        padding: 5px;
    }
</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>
        </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">
                    <input type="hidden" id="reservation_type" name="reservation_type" value="groupe">
                    <input type="hidden" name="resto_data" id="resto_data" value="">
                    <input type="hidden" name="cafe_data" id="cafe_data" value="">
                    
                    <!-- 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 class="col-md-6 mb-4">
                                <label class="form-label">{{ __('site.reservation.label_type_wafd') }}</label>
                                <div class="wafd-options">
                                    <div class="wafd-option" id="option-groupe">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" 
                                                   name="type_wafd" 
                                                   id="type_groupe"
                                                   value="groupe" checked>
                                            <label class="form-check-label" for="type_groupe">
                                                {{ __('site.reservation.label_group_wafd') }}
                                            </label>
                                        </div>
                                    </div>

                                    <div class="wafd-option" id="option-single">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" 
                                                   name="type_wafd" 
                                                   id="type_single"
                                                   value="single">
                                            <label class="form-check-label" for="type_single">
                                                {{ __('site.reservation.label_single_wafd') }}
                                            </label>
                                        </div>
                                    </div>
                                </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 id="limit-warning" class="limit-warning">
                                    <i class="bi bi-exclamation-triangle"></i>
                                    {{ __('site.reservation.single_limit_warning') }}
                                </div>
                            </div>

                            <div class="col-md-6 mb-4">
                                <label class="form-label">{{ __('site.reservation.heure_arrive') }}</label>  
                                <div class="input-group-icon">
                                    <input type="time" name="heure_arrivee" class="form-control">
                                    <i class="bi bi-clock"></i>
                                </div>
                            </div>

                            <div class="col-md-6 mb-4">
                                <label class="form-label">{{ __('site.reservation.heure_depart') }}</label>
                                <div class="input-group-icon">
                                    <input type="time" name="heure_depart" class="form-control">
                                    <i class="bi bi-clock-history"></i>
                                </div>
                            </div>

                            <div class="col-12 mb-4">
                                <label class="form-label">{{ __('site.reservation.label_days') }}</label>
                                <div class="counter-input">
                                    <input type="number" id="days" class="form-control" readonly>
                                    <span class="text-muted">{{ __('site.reservation.days') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
					
					
					
					
					
					
                    <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">
                            <div class="tarif-block" id="tarif-block" data-index="0">
                                <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]" 
                                                        id="tarif-select"
                                                        class="form-control tarif-select" 
                                                        data-index="0">
                                                    @foreach($tarifs as $type)
                                                        @php
                                                            $typeClass = '';
                                                            if($type->type == 'groupe') {
                                                                $typeClass = 'groupe-option';
                                                            } else {
                                                                $typeClass = 'individual-option';
                                                            }
                                                        @endphp
                                                        <option value="{{ $type->id_type }}" 
                                                                data-tarif-chambre="{{ $type->tarif_chambre }}"
                                                                data-tarif-tente="{{ $type->tarif_tente }}"
                                                                data-type="{{ $type->type }}"
                                                                class="tarif-option {{ $typeClass }}">
                                                            @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>
                                
                                <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]" 
                                                        id="accomodation-select"
                                                        class="form-control 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>
                                
                                <div class="tarif-row">
                                    <div class="row align-items-center">
                                        <div class="col-md-3 mb-2 mb-md-0">
                                            <label class="form-label">{{ __('site.reservation.hommes_tarif') }}</label>
                                            <input type="number" name="persons[0][nbr_hommes]" 
                                                   id="nbr_hommes"
                                                   class="form-control nbr_hommes" 
                                                   min="0" value="0" 
                                                   data-index="0">
                                        </div>
                                        
                                        <div class="col-md-3 mb-2 mb-md-0">
                                            <label class="form-label">{{ __('site.reservation.femmes_tarif') }}</label>
                                            <input type="number" name="persons[0][nbr_femmes]" 
                                                   id="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]" 
                                                   id="tarif-input"
                                                   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]" 
                                                   id="subtotal-input"
                                                   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]" 
                                                   id="nbr_total"
                                                   class="form-control nbr_total" 
                                                   readonly 
                                                   data-index="0">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <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_day') }}):</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>
                        
                        <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 par Jour -->
                    <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>
                        
                        
                        
                        <!-- Conteneur pour les onglets des jours (restauration) -->
                        <div id="daysRestoContainer"></div>
                        
                        <!-- Résumé de la restauration -->
                        <div class="resto-summary" id="restoSummary">
                            <div class="resto-summary-title">
                                <i class="bi bi-receipt"></i>
                                {{ __('site.reservation.resto_summary') }}
                            </div>
                            <div id="restoSummaryContent">
                                <div class="empty-placeholder">
                                    {{ __('site.reservation.resto_none_selected') }}
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Section Pause Café -->
                    <div class="form-section">
                        <h4 class="section-title">
                            <i class="bi bi-cup-hot-fill"></i>
                            {{ __('site.reservation.pause_cafe') }}
                        </h4>
                        
                        @if($auberge->pause_cafe && $auberge->tarif_cafe > 0)
                        <div class="calc-note">
                            <i class="bi bi-info-circle"></i>
                            {{ __('site.reservation.cafe_calc_note', ['price' => number_format($auberge->tarif_cafe, 3)]) }}
                        </div>
                        
                        
                        
                        <!-- Conteneur pour les onglets des jours (café) -->
                        <div id="daysCafeContainer"></div>
                        
                        <!-- Résumé du café -->
                        <div class="resto-summary" id="cafeSummary">
                            <div class="resto-summary-title">
                                <i class="bi bi-cup-hot-fill"></i>
                                {{ __('site.reservation.cafe_summary') }}
                            </div>
                            <div id="cafeSummaryContent">
                                <div class="empty-placeholder">
                                    {{ __('site.reservation.cafe_none_selected') }}
                                </div>
                            </div>
                        </div>
                        @else
                        <div class="alert alert-info">
                            <i class="bi bi-info-circle"></i>
                            {{ __('site.reservation.cafe_not_available') }}
                        </div>
                        @endif
                    </div>
                    
                    <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>
                    
                    <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>
                </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_days') }}:</span>
                        <span class="summary-value" id="summary_days">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_day') }}:</span>
                        <span class="summary-value" id="summary_tarif_day">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 () {
    const today = new Date();
    const todayStr = today.toISOString().split('T')[0];
    
    const MSG_CHECK_DATES = @json(__('site.reservation.alert_check_dates'));
    const MSG_ENTER_PERSONS = @json(__('site.reservation.alert_enter_person_count'));
    const MSG_ALERT_TITLE = '{{ __("site.reservation.alert_title") }}';
    const MSG_OK = '{{ __("site.reservation.ok_button") }}';
    const MSG_SINGLE_LIMIT = '{{ __("site.reservation.single_limit_exceeded") }}';
    
    const $dateArr = $('#date_arrive');
    const $dateDep = $('#date_depart');
    const $days = $('#days');
    const $checkbox = $('#accept_terms');
    const $submit = $('#submitBtn');
    const $totalPriceInput = $('#total_price');
    const $typeGroupe = $('#type_groupe');
    const $typeSingle = $('#type_single');
    const $limitWarning = $('#limit-warning');
    const $reservationType = $('#reservation_type');
    const $tarifSelect = $('#tarif-select');
    const $accomodationSelect = $('#accomodation-select');
    
    // Données des restaurants
    var restaurants = [];
    @foreach($restaurations as $res)
    restaurants.push({
        id: {{ $res->id_rest }},
        nom: {!! json_encode(trans_field($res, 'nom')) !!},
        description: {!! json_encode(trans_field($res, 'description')) !!},
        tarif: parseFloat({{ $res->tarif }})
    });
    @endforeach
    
    // Données du café
    const cafeTarif = parseFloat({{ $auberge->tarif_cafe ?? 0 }});
    const cafeDisponible = {{ $auberge->pause_cafe ? 'true' : 'false' }};
    
    // Structures pour stocker les sélections
    let selectedRestosByDay = {};
    let selectedCafeByDay = {};
    
    // Récupérer les tarifs
    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
    
    // Initialisation Flatpickr
    const locale = $('html').attr('lang') === 'ar' ? 'ar' : 'fr';
    flatpickr.localize(flatpickr.l10ns[locale]);
    
    $dateArr.attr('min', todayStr);
    $dateDep.prop('disabled', true);
    
    // Style pour les options wafd
    $('.wafd-option').on('click', function() {
        $('.wafd-option').removeClass('selected');
        $(this).addClass('selected');
        $(this).find('input[type="radio"]').prop('checked', true);
        
        const type = $(this).find('input[type="radio"]').val();
        $reservationType.val(type);
        applyDateLimitByType(type);
        filterTarifOptions();
        calcDays();
    });
    
    $('#option-groupe').addClass('selected');
    
    function filterTarifOptions() {
        const selectedType = $('input[name="type_wafd"]:checked').val();
        
        $('.tarif-option').each(function() {
            const $option = $(this);
            const optionType = $option.data('type');
            
            if (selectedType === 'groupe') {
                if (optionType === 'groupe') {
                    $option.show();
                } else {
                    $option.hide();
                }
            } else {
                if (optionType === 'groupe') {
                    $option.hide();
                } else {
                    $option.show();
                }
            }
        });
        
        const $firstVisible = $('.tarif-option:visible').first();
        if ($firstVisible.length > 0) {
            $tarifSelect.val($firstVisible.val()).trigger('change');
        }
    }
    
    $('input[name="type_wafd"]').on('change', function() {
        filterTarifOptions();
        updateTarifForBlock($('#tarif-block'));
        updateTarifTotals();
        updateSummary();
    });
    
    filterTarifOptions();
    
    function applyDateLimitByType(type) {
        if (type === 'single') {
            $limitWarning.addClass('visible');
            
            if ($dateArr.val() && $dateDep.val()) {
                const arriveDate = new Date($dateArr.val());
                const depDate = new Date($dateDep.val());
                const diffDays = Math.ceil((depDate - arriveDate) / (1000 * 60 * 60 * 24));
                
                if (diffDays > 7) {
                    const maxDate = new Date(arriveDate);
                    maxDate.setDate(maxDate.getDate() + 7);
                    $dateDep.val(maxDate.toISOString().split('T')[0]);
                    
                    Swal.fire({
                        icon: 'warning',
                        title: MSG_ALERT_TITLE,
                        text: MSG_SINGLE_LIMIT,
                        confirmButtonText: MSG_OK
                    });
                }
            }
        } else {
            $limitWarning.removeClass('visible');
        }
        
        updateDateMax();
    }
    
    function updateDateMax() {
        if ($dateArr.val()) {
            const arriveDate = new Date($dateArr.val());
            
            if ($typeSingle.is(':checked')) {
                const maxDate = new Date(arriveDate);
                maxDate.setDate(maxDate.getDate() + 7);
                $dateDep.attr('max', maxDate.toISOString().split('T')[0]);
            } else {
                $dateDep.removeAttr('max');
            }
        }
    }
    
    $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);
            $dateDep.attr('min', depMin.toISOString().split('T')[0]);
            
            updateDateMax();
            
            if ($dateDep.val() && new Date($dateDep.val()) < depMin) {
                $dateDep.val(depMin.toISOString().split('T')[0]);
            }
            
            if ($typeSingle.is(':checked') && $dateDep.val()) {
                const depDate = new Date($dateDep.val());
                const diffDays = Math.ceil((depDate - arriveDate) / (1000 * 60 * 60 * 24));
                
                if (diffDays > 7) {
                    const maxDate = new Date(arriveDate);
                    maxDate.setDate(maxDate.getDate() + 7);
                    $dateDep.val(maxDate.toISOString().split('T')[0]);
                }
            }
        } else {
            $dateDep.prop('disabled', true);
            $dateDep.val('');
        }
        calcDays();
        updateSummary();
        generateDaysTabs();
        if (cafeDisponible && cafeTarif > 0) {
            generateCafeTabs();
        }
    });
    
    $dateDep.on('change', function() {
        if ($typeSingle.is(':checked') && $dateArr.val() && $(this).val()) {
            const arriveDate = new Date($dateArr.val());
            const depDate = new Date($(this).val());
            const diffDays = Math.ceil((depDate - arriveDate) / (1000 * 60 * 60 * 24));
            
            if (diffDays > 7) {
                const maxDate = new Date(arriveDate);
                maxDate.setDate(maxDate.getDate() + 7);
                $(this).val(maxDate.toISOString().split('T')[0]);
                
                Swal.fire({
                    icon: 'warning',
                    title: MSG_ALERT_TITLE,
                    text: MSG_SINGLE_LIMIT,
                    confirmButtonText: MSG_OK
                });
            }
        }
        calcDays();
        updateSummary();
        generateDaysTabs();
        if (cafeDisponible && cafeTarif > 0) {
            generateCafeTabs();
        }
    });
    
    function calcDays() {
        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));
            $days.val(diff);
            $('#summary_days').text(diff);
            return diff;
        }
        $days.val('');
        $('#summary_days').text(0);
        return 0;
    }
    
    function formatDate(dateStr) {
        const date = new Date(dateStr);
        return date.toLocaleDateString($('html').attr('lang') === 'ar' ? 'ar-SA' : 'fr-FR', {
            weekday: 'short',
            day: 'numeric',
            month: 'short'
        });
    }
    
    // Fonctions pour la restauration
    function generateDaysTabs() {
        const startDate = $dateArr.val();
        const endDate = $dateDep.val();
        
        if (!startDate || !endDate) return;
        
        const days = calcDays();
        if (days <= 0) return;
        
        let html = '<div class="days-tabs" id="daysTabs">';
        const dates = [];
        
        for (let i = 0; i < days; i++) {
            const currentDate = new Date(startDate);
            currentDate.setDate(currentDate.getDate() + i);
            const dateStr = currentDate.toISOString().split('T')[0];
            dates.push(dateStr);
            
            if (!selectedRestosByDay[dateStr]) {
                selectedRestosByDay[dateStr] = [];
            }
            
            html += `
                <div class="day-tab ${i === 0 ? 'active' : ''}" data-day="${i}" data-date="${dateStr}">
                    {{ __('site.reservation.day') }} ${i + 1}
                    <span class="date-badge">${formatDate(dateStr)}</span>
                </div>
            `;
        }
        html += '</div>';
        
        for (let i = 0; i < days; i++) {
            const currentDate = dates[i];
            html += `
                <div class="day-resto-container ${i === 0 ? 'active' : ''}" data-day="${i}" data-date="${currentDate}">
                    <div class="day-resto-header">
                        <div>
                            <span class="day-title">{{ __('site.reservation.day') }} ${i + 1}</span>
                            <span class="day-subtitle">${formatDate(currentDate)}</span>
                        </div>
                        <div class="day-total" id="dayTotal-${i}">0 {{ __('site.currency') }}</div>
                    </div>
                    <div class="row" id="restoDay-${i}">
            `;
            
            for (var j = 0; j < restaurants.length; j++) {
                var resto = restaurants[j];
                const isSelected = selectedRestosByDay[currentDate]?.includes(resto.id) || false;
                html += `
                    <div class="col-md-6 mb-3">
                        <div class="resto-option-card ${isSelected ? 'selected' : ''}" data-resto-id="${resto.id}" data-day="${i}">
                            <div class="resto-header">
                                <div class="resto-name">${resto.nom}</div>
                                <div class="resto-price">${resto.tarif.toFixed(3)} {{ __('site.currency') }}</div>
                            </div>
                            <div class="resto-desc">${resto.description || '-'}</div>
                            <div class="resto-check text-left mt-2">
                                <input type="checkbox" 
                                       class="resto-day-checkbox" 
                                       data-day="${i}" 
                                       data-date="${currentDate}"
                                       data-resto-id="${resto.id}"
                                       data-price="${resto.tarif}"
                                       data-nom="${resto.nom}"
                                       ${isSelected ? 'checked' : ''}>
                                <label>{{ __('site.reservation.select_service') }}</label>
                            </div>
                        </div>
                    </div>
                `;
            }
            
            html += '</div></div>';
        }
        
        $('#daysRestoContainer').html(html);
        
        initDaysTabsEvents();
        initRestoCheckboxes();
        updateDayTotals();
        updateRestoSummary();
    }
    
    function initDaysTabsEvents() {
        $('.day-tab').on('click', function() {
            const day = $(this).data('day');
            
            $('.day-tab').removeClass('active');
            $(this).addClass('active');
            
            $('.day-resto-container').removeClass('active');
            $(`.day-resto-container[data-day="${day}"]`).addClass('active');
        });
    }
    
    function initRestoCheckboxes() {
        $('.resto-day-checkbox').on('change', function() {
            const $checkbox = $(this);
            const day = $checkbox.data('day');
            const date = $checkbox.data('date');
            const restoId = $checkbox.data('resto-id');
            const isChecked = $checkbox.is(':checked');
            
            const $card = $checkbox.closest('.resto-option-card');
            if (isChecked) {
                $card.addClass('selected');
            } else {
                $card.removeClass('selected');
            }
            
            if (!selectedRestosByDay[date]) {
                selectedRestosByDay[date] = [];
            }
            
            if (isChecked) {
                if (!selectedRestosByDay[date].includes(restoId)) {
                    selectedRestosByDay[date].push(restoId);
                }
            } else {
                const index = selectedRestosByDay[date].indexOf(restoId);
                if (index > -1) {
                    selectedRestosByDay[date].splice(index, 1);
                }
            }
            
            updateDayTotals();
            updateRestoSummary();
            updateSummary();
        });
    }
    
    function updateDayTotals() {
        const nbrPersons = parseInt($('#total_persons').val()) || 0;
        
        $('.day-resto-container').each(function() {
            const $container = $(this);
            const day = $container.data('day');
            let dayTotal = 0;
            
            $(`input.resto-day-checkbox[data-day="${day}"]:checked`).each(function() {
                const price = parseFloat($(this).data('price')) || 0;
                dayTotal += price * nbrPersons;
            });
            
            $(`#dayTotal-${day}`).text(dayTotal.toFixed(3) + ' {{ __('site.currency') }}');
        });
    }
    
    function updateRestoSummary() {
        const $summary = $('#restoSummaryContent');
        $summary.empty();
        
        const nbrPersons = parseInt($('#total_persons').val()) || 0;
        const dates = Object.keys(selectedRestosByDay).filter(date => selectedRestosByDay[date].length > 0);
        
        if (dates.length === 0) {
            $summary.html('<div class="empty-placeholder">{{ __('site.reservation.resto_none_selected') }}</div>');
            return;
        }
        
        let totalGlobal = 0;
        
        dates.sort().forEach(date => {
            const restoIds = selectedRestosByDay[date];
            if (restoIds.length === 0) return;
            
            const restos = restaurants.filter(r => restoIds.includes(r.id));
            const dayTotal = restos.reduce((sum, r) => sum + (r.tarif * nbrPersons), 0);
            totalGlobal += dayTotal;
            
            const servicesList = restos.map(r => r.nom).join(', ');
            
            $summary.append(`
                <div class="resto-summary-item">
                    <span class="resto-summary-day">${formatDate(date)}</span>
                    <span class="resto-summary-services">${servicesList}</span>
                    <span class="resto-summary-price">${dayTotal.toFixed(3)} {{ __('site.currency') }}</span>
                </div>
            `);
        });
        
        if (totalGlobal > 0) {
            $summary.append(`
                <div class="resto-summary-item" style="border-top: 2px solid #b51414; margin-top: 10px; padding-top: 10px;">
                    <span class="resto-summary-day fw-bold">{{ __('site.reservation.total') }}</span>
                    <span class="resto-summary-services"></span>
                    <span class="resto-summary-price fw-bold">${totalGlobal.toFixed(3)} {{ __('site.currency') }}</span>
                </div>
            `);
        }
    }
    
    // Gestionnaire pour les sélections multiples (restauration)
    $('#multipleSelector').on('click', '.multiple-selector-btn', function() {
        const action = $(this).data('action');
        const nbrPersons = parseInt($('#total_persons').val()) || 0;
        
        if (nbrPersons === 0) {
            Swal.fire({
                icon: 'warning',
                title: MSG_ALERT_TITLE,
                text: MSG_ENTER_PERSONS,
                confirmButtonText: MSG_OK
            });
            return;
        }
        
        const startDate = $dateArr.val();
        const endDate = $dateDep.val();
        
        if (!startDate || !endDate) {
            Swal.fire({
                icon: 'warning',
                title: MSG_ALERT_TITLE,
                text: MSG_CHECK_DATES,
                confirmButtonText: MSG_OK
            });
            return;
        }
        
        const days = calcDays();
        
        if (action === 'all') {
            for (let i = 0; i < days; i++) {
                const date = new Date(startDate);
                date.setDate(date.getDate() + i);
                const dateStr = date.toISOString().split('T')[0];
                selectedRestosByDay[dateStr] = restaurants.map(r => r.id);
            }
        } else if (action === 'none') {
            selectedRestosByDay = {};
        } else if (action === 'copy-first') {
            const firstDate = new Date(startDate).toISOString().split('T')[0];
            const firstDaySelection = selectedRestosByDay[firstDate] || [];
            
            for (let i = 1; i < days; i++) {
                const date = new Date(startDate);
                date.setDate(date.getDate() + i);
                const dateStr = date.toISOString().split('T')[0];
                selectedRestosByDay[dateStr] = [...firstDaySelection];
            }
        }
        
        generateDaysTabs();
        updateSummary();
    });
    
    // Fonctions pour le café
    function generateCafeTabs() {
        const startDate = $dateArr.val();
        const endDate = $dateDep.val();
        
        if (!startDate || !endDate || !cafeDisponible || cafeTarif <= 0) return;
        
        const days = calcDays();
        if (days <= 0) return;
        
        let html = '<div class="days-tabs mt-4" id="daysCafeTabs">';
        const dates = [];
        
        for (let i = 0; i < days; i++) {
            const currentDate = new Date(startDate);
            currentDate.setDate(currentDate.getDate() + i);
            const dateStr = currentDate.toISOString().split('T')[0];
            dates.push(dateStr);
            
            if (!selectedCafeByDay[dateStr]) {
                selectedCafeByDay[dateStr] = 0;
            }
            
            html += `
                <div class="day-tab ${i === 0 ? 'active' : ''}" data-cafe-day="${i}" data-date="${dateStr}">
                    {{ __('site.reservation.day') }} ${i + 1}
                    <span class="date-badge">${formatDate(dateStr)}</span>
                </div>
            `;
        }
        html += '</div>';
        
        for (let i = 0; i < days; i++) {
            const currentDate = dates[i];
            const currentQty = selectedCafeByDay[currentDate] || 0;
            
            html += `
                <div class="day-resto-container ${i === 0 ? 'active' : ''}" data-cafe-day="${i}" data-date="${currentDate}">
                    <div class="day-resto-header">
                        <div>
                            <span class="day-title">{{ __('site.reservation.day') }} ${i + 1}</span>
                            <span class="day-subtitle">${formatDate(currentDate)}</span>
                        </div>
                        <div class="day-total" id="cafeDayTotal-${i}">${(cafeTarif * currentQty * (parseInt($('#total_persons').val()) || 0)).toFixed(3)} {{ __('site.currency') }}</div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="card p-4">
                                <div class="row align-items-center">
                                    <div class="col-md-6">
                                        <h5 class="mb-2">{{ __('site.reservation.cafe_price') }}: <span class="text-danger">${cafeTarif.toFixed(3)} {{ __('site.currency') }}</span> / {{ __('site.reservation.per_person') }}</h5>
                                        <p class="text-muted">{{ __('site.reservation.cafe_description') }}</p>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">{{ __('site.reservation.cafe_quantity') }}</label>
                                        <div class="cafe-counter">
                                            <button type="button" class="cafe-counter-btn cafe-decrement" data-day="${i}" data-date="${currentDate}">-</button>
                                            <input type="number" 
                                                   class="cafe-quantity" 
                                                   data-day="${i}" 
                                                   data-date="${currentDate}"
                                                   value="${currentQty}" 
                                                   min="0" 
                                                   max="10"
                                                   readonly>
                                            <button type="button" class="cafe-counter-btn cafe-increment" data-day="${i}" data-date="${currentDate}">+</button>
                                        </div>
                                        <small class="text-muted">{{ __('site.reservation.cafe_quantity_note') }}</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }
        
        $('#daysCafeContainer').html(html);
        
        initCafeTabsEvents();
        initCafeControls();
        updateCafeSummary();
    }
    
    function initCafeTabsEvents() {
        $('[data-cafe-day]').on('click', function() {
            const day = $(this).data('cafe-day');
            
            $('[data-cafe-day]').removeClass('active');
            $(this).addClass('active');
            
            $('.day-resto-container[data-cafe-day]').removeClass('active');
            $(`.day-resto-container[data-cafe-day="${day}"]`).addClass('active');
        });
    }
    
    function initCafeControls() {
        $('.cafe-increment').on('click', function() {
            const day = $(this).data('day');
            const date = $(this).data('date');
            const $input = $(`.cafe-quantity[data-day="${day}"]`);
            let value = parseInt($input.val()) || 0;
            if (value < 10) {
                value++;
                $input.val(value);
                updateCafeQuantity(date, value, day);
            }
        });
        
        $('.cafe-decrement').on('click', function() {
            const day = $(this).data('day');
            const date = $(this).data('date');
            const $input = $(`.cafe-quantity[data-day="${day}"]`);
            let value = parseInt($input.val()) || 0;
            if (value > 0) {
                value--;
                $input.val(value);
                updateCafeQuantity(date, value, day);
            }
        });
    }
    
    function updateCafeQuantity(date, quantity, day) {
        selectedCafeByDay[date] = quantity;
        
        const nbrPersons = parseInt($('#total_persons').val()) || 0;
        const dayTotal = cafeTarif * quantity * nbrPersons;
        $(`#cafeDayTotal-${day}`).text(dayTotal.toFixed(3) + ' {{ __('site.currency') }}');
        
        updateCafeSummary();
        updateSummary();
    }
    
    function updateCafeSummary() {
        const $summary = $('#cafeSummaryContent');
        $summary.empty();
        
        const nbrPersons = parseInt($('#total_persons').val()) || 0;
        const dates = Object.keys(selectedCafeByDay).filter(date => selectedCafeByDay[date] > 0);
        
        if (dates.length === 0) {
            $summary.html('<div class="empty-placeholder">{{ __('site.reservation.cafe_none_selected') }}</div>');
            return;
        }
        
        let totalGlobal = 0;
        
        dates.sort().forEach(date => {
            const quantity = selectedCafeByDay[date];
            if (quantity === 0) return;
            
            const dayTotal = cafeTarif * quantity * nbrPersons;
            totalGlobal += dayTotal;
            
            $summary.append(`
                <div class="resto-summary-item">
                    <span class="resto-summary-day">${formatDate(date)}</span>
                    <span class="resto-summary-services">{{ __('site.reservation.cafe_quantity') }}: ${quantity} × ${cafeTarif.toFixed(3)} {{ __('site.currency') }} × ${nbrPersons} {{ __('site.reservation.persons') }}</span>
                    <span class="resto-summary-price">${dayTotal.toFixed(3)} {{ __('site.currency') }}</span>
                </div>
            `);
        });
        
        if (totalGlobal > 0) {
            $summary.append(`
                <div class="resto-summary-item" style="border-top: 2px solid #b51414; margin-top: 10px; padding-top: 10px;">
                    <span class="resto-summary-day fw-bold">{{ __('site.reservation.total') }}</span>
                    <span class="resto-summary-services"></span>
                    <span class="resto-summary-price fw-bold">${totalGlobal.toFixed(3)} {{ __('site.currency') }}</span>
                </div>
            `);
        }
    }
    
    // Gestionnaire pour les sélections multiples du café
    $('body').on('click', '[data-cafe-action]', function() {
        const action = $(this).data('cafe-action');
        const quantity = $(this).data('quantity') || 1;
        const nbrPersons = parseInt($('#total_persons').val()) || 0;
        
        if (nbrPersons === 0) {
            Swal.fire({
                icon: 'warning',
                title: MSG_ALERT_TITLE,
                text: MSG_ENTER_PERSONS,
                confirmButtonText: MSG_OK
            });
            return;
        }
        
        const startDate = $dateArr.val();
        const endDate = $dateDep.val();
        
        if (!startDate || !endDate) {
            Swal.fire({
                icon: 'warning',
                title: MSG_ALERT_TITLE,
                text: MSG_CHECK_DATES,
                confirmButtonText: MSG_OK
            });
            return;
        }
        
        const days = calcDays();
        
        if (action === 'all') {
            for (let i = 0; i < days; i++) {
                const date = new Date(startDate);
                date.setDate(date.getDate() + i);
                const dateStr = date.toISOString().split('T')[0];
                selectedCafeByDay[dateStr] = quantity;
            }
        } else if (action === 'none') {
            selectedCafeByDay = {};
        } else if (action === 'copy-first') {
            const firstDate = new Date(startDate).toISOString().split('T')[0];
            const firstDayQty = selectedCafeByDay[firstDate] || 0;
            
            for (let i = 1; i < days; i++) {
                const date = new Date(startDate);
                date.setDate(date.getDate() + i);
                const dateStr = date.toISOString().split('T')[0];
                selectedCafeByDay[dateStr] = firstDayQty;
            }
        }
        
        generateCafeTabs();
        updateSummary();
    });
    
    function updateTarifForBlock($block) {
        if (!$block || $block.length === 0) {
            $block = $('#tarif-block');
        }
        
        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 = accomodationType === 'chambre' ? tarifInfo.chambre : tarifInfo.tente;
        
        $block.find('.tarif-input').val(tarif);
        
        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
        };
    }
    
    function updateTarifTotals() {
        const blockData = updateTarifForBlock($('#tarif-block'));
        
        $('#total_persons').val(blockData.total);
        $('#total_general').val(blockData.subtotal.toFixed(3));
        
        $('#nbr_h_total').val(blockData.hommes);
        $('#nbr_f_total').val(blockData.femmes);
        $('#nbr_personnes_total').val(blockData.total);
        
        return {
            totalPersons: blockData.total,
            totalGeneral: blockData.subtotal,
            totalHommes: blockData.hommes,
            totalFemmes: blockData.femmes
        };
    }
    
    function calcRestaurations() {
        let total = 0;
        const nbrPersons = parseInt($('#total_persons').val()) || 0;
        
        Object.keys(selectedRestosByDay).forEach(date => {
            const restoIds = selectedRestosByDay[date];
            restoIds.forEach(restoId => {
                const resto = restaurants.find(r => r.id === restoId);
                if (resto) {
                    total += resto.tarif * nbrPersons;
                }
            });
        });
        
        return total;
    }
    
    function calcTotalCafe() {
        let total = 0;
        const nbrPersons = parseInt($('#total_persons').val()) || 0;
        
        Object.keys(selectedCafeByDay).forEach(date => {
            const quantity = selectedCafeByDay[date] || 0;
            total += cafeTarif * quantity * nbrPersons;
        });
        
        return total;
    }
    
    function updateSummary() {
        const days = calcDays();
        const tarifTotals = updateTarifTotals();
        const nbrPersons = tarifTotals.totalPersons;
        const tarifDayTotal = tarifTotals.totalGeneral;
        
        const tarifTotal = tarifDayTotal * days;
        const restoTotal = calcRestaurations();
        const cafeTotal = calcTotalCafe();
        const servicesTotal = restoTotal + cafeTotal;
        const totalFinal = tarifTotal + servicesTotal;
        
        $('#summary_capacity').text(nbrPersons);
        $('#summary_tarif_day').text(tarifDayTotal.toFixed(3) + ' {{ __('site.currency') }}');
        $('#summary_total_tarif').text(tarifTotal.toFixed(3) + ' {{ __('site.currency') }}');
        $('#summary_services').text(servicesTotal.toFixed(3) + ' {{ __('site.currency') }}');
        $('#summary_total').text(totalFinal.toFixed(3) + ' {{ __('site.currency') }}');
        
        $totalPriceInput.val(totalFinal.toFixed(3));
        
        $('#resto_data').val(JSON.stringify(selectedRestosByDay));
        $('#cafe_data').val(JSON.stringify(selectedCafeByDay));
    }
    
    $(document).on('change', '.tarif-select', function() {
        updateTarifForBlock($(this).closest('.tarif-block'));
        updateTarifTotals();
        updateSummary();
        updateDayTotals();
        if (cafeDisponible && cafeTarif > 0) {
            updateCafeSummary();
        }
    });
    
    $(document).on('change', '.accomodation-select', function() {
        updateTarifForBlock($(this).closest('.tarif-block'));
        updateTarifTotals();
        updateSummary();
        updateDayTotals();
        if (cafeDisponible && cafeTarif > 0) {
            updateCafeSummary();
        }
    });
    
    $(document).on('input', '.nbr_hommes, .nbr_femmes', function() {
        const $block = $(this).closest('.tarif-block');
        updateTarifForBlock($block);
        updateTarifTotals();
        updateSummary();
        updateDayTotals();
        updateRestoSummary();
        if (cafeDisponible && cafeTarif > 0) {
            updateCafeSummary();
        }
    });
    
    $checkbox.on('change', function() {
        $submit.prop('disabled', !$(this).is(':checked'));
    });
    
    $('#reservationForm').on('submit', function(e) {
        updateTarifTotals();
        updateSummary();
        
        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 days = calcDays();
        const nbrPersons = parseInt($('#total_persons').val()) || 0;
        
        if (days <= 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;
        }
        
        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(),
            type_wafd: $reservationType.val(),
            resto_data: selectedRestosByDay,
            cafe_data: selectedCafeByDay
        });
    });
    
    // Initialisation
    updateTarifTotals();
    updateSummary();
    if (cafeDisponible && cafeTarif > 0) {
        generateCafeTabs();
    }
});
</script>
@endsection