@extends('frontend.jpt.layout.mainlayout')

@section('title', __('programme.title'))

@section('content')
    <!-- HEADER -->
    <header>
        <h1>{{ __('accommodation.header_title') }}</h1>
        <p>{{ __('accommodation.header_subtitle') }}</p>
        <div class="banner-decoration"></div>
    </header>

    <!-- CONTENU PRINCIPAL -->
    <div class="container">
        <!-- HÔTEL NOVOTEL TUNIS -->
        <section id="novotel">
            <h2 class="section-title">Novotel Tunis</h2>
            <div class="hotels-grid">
                <div class="hotel-card">
                    <div class="hotel-images-grid">
                        <div class="hotel-image">
                            <img src="{{ URL::asset('assets/frontend/jpt/images/novo_3.jpg') }}" alt="Image 1">
                        </div>
                        <div class="hotel-image">
                            <img src="{{ URL::asset('assets/frontend/jpt/images/novo_2.jpg') }}" alt="Image 2">
                        </div>
                        <div class="hotel-image">
                            <img src="{{ URL::asset('assets/frontend/jpt/images/novo_1.jpg') }}" alt="Image 3">
                        </div>
                    </div>
                    <div class="hotel-content">
                        <h3 class="hotel-name">
                            Novotel Tunis
                            <span class="stars">
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                            </span>
                        </h3>
                        <div class="hotel-location">
                            <i class="fas fa-map-marker-alt"></i>
                            Avenue Mohamed V, Tunis
                        </div>
                        <table class="pricing-table">
                            <thead>
                                <tr>
                                    <th>{{ __('accommodation.hotels.room') }}</th>
                                    <th>Arrangement</th>
                                    <th class="price">{{ __('accommodation.hotels.rate_per_night') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Chambre Single</td>
                                    <td>{{ __('accommodation.hotels.accommodation_with_breakfast') }}</td>
                                    <td class="price">450 {{ __('accommodation.currency') }}</td>
                                </tr>
                                <tr>
                                    <td>Chambre Double</td>
                                    <td>{{ __('accommodation.hotels.accommodation_with_breakfast') }}</td>
                                    <td class="price">500 {{ __('accommodation.currency') }}</td>
                                </tr>
                            </tbody>
                        </table>

                        <form action="{{ route('reservation.chooseHotel', ['event' => 'tusamed']) }}" method="POST"
                            class="reservation-form">
                            @csrf
                            <input type="hidden" name="hotel_id" value="1">
                            <button type="submit" class="btn-submit">Réserver au Novotel Tunis</button>
                        </form>
                    </div>
                </div>
            </div>
        </section>

        <!-- RADISSON HOTEL TUNIS (EX-LAICO) -->
        <section id="radisson-laico">
            <h2 class="section-title">Radisson Blu Tunis</h2>
            <div class="hotels-grid">
                <div class="hotel-card">
                    <div class="hotel-images-grid">
                        <div class="hotel-image">
                            <img src="{{ URL::asset('assets/frontend/jpt/images/radisson_tunis_3.jpg') }}" alt="Image 1">
                        </div>
                        <div class="hotel-image">
                            <img src="{{ URL::asset('assets/frontend/jpt/images/radisson_tunis_2.jpg') }}" alt="Image 2">
                        </div>
                        <div class="hotel-image">
                            <img src="{{ URL::asset('assets/frontend/jpt/images/radisson_tunis_1.jpg') }}" alt="Image 3">
                        </div>
                    </div>
                    <div class="hotel-content">
                        <h3 class="hotel-name">Radisson Blu Tunis
                            <span class="stars">
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                            </span>
                        </h3>
                        <div class="hotel-location">
                            <i class="fas fa-map-marker-alt"></i>
                            Avenue Mohamed V, Tunis
                        </div>
                        <table class="pricing-table">
                            <thead>
                                <tr>
                                    <th>{{ __('accommodation.hotels.room') }}</th>
                                    <th>Arrangement</th>
                                    <th class="price">{{ __('accommodation.hotels.rate_per_night') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Suite Deluxe Single</td>
                                    <td>{{ __('accommodation.hotels.accommodation_with_breakfast') }}</td>
                                    <td class="price">1 200 {{ __('accommodation.currency') }}</td>
                                </tr>
                                <tr>
                                    <td>Suite Deluxe Double</td>
                                    <td>{{ __('accommodation.hotels.accommodation_with_breakfast') }}</td>
                                    <td class="price">1 300 {{ __('accommodation.currency') }}</td>
                                </tr>
                                <tr>
                                    <td>Chambre Exécutive Single</td>
                                    <td>{{ __('accommodation.hotels.accommodation_with_breakfast') }}</td>
                                    <td class="price">500 {{ __('accommodation.currency') }}</td>
                                </tr>
                                <tr>
                                    <td>Chambre Exécutive Double</td>
                                    <td>{{ __('accommodation.hotels.accommodation_with_breakfast') }}</td>
                                    <td class="price">600 {{ __('accommodation.currency') }}</td>
                                </tr>
                            </tbody>
                        </table>
                        <!-- <a href="#" class="btn">Réserver maintenant</a> -->
                    </div>
                </div>
            </div>
        </section>

        <!-- RADISSON HOTEL TUNIS CITY CENTER -->
        <section id="radisson-center">
            <h2 class="section-title">Radisson City Center</h2>
            <div class="hotels-grid">
                <div class="hotel-card">
                    <div class="hotel-images-grid">
                        <div class="hotel-image">
                            <img src="{{ URL::asset('assets/frontend/jpt/images/radisson_city_3.jpg') }}" alt="Image 1">
                        </div>
                        <div class="hotel-image">
                            <img src="{{ URL::asset('assets/frontend/jpt/images/radisson_city_2.jpg') }}" alt="Image 2">
                        </div>
                        <div class="hotel-image">
                            <img src="{{ URL::asset('assets/frontend/jpt/images/radisson_city_1.jpg') }}" alt="Image 3">
                        </div>
                    </div>
                    <div class="hotel-content">
                        <h3 class="hotel-name">Radisson City Center
                            <span class="stars">
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                            </span>
                        </h3>
                        <div class="hotel-location">
                            <i class="fas fa-map-marker-alt"></i>
                            13 Avenue Jean Jaurès, Tunis
                        </div>
                        <table class="pricing-table">
                            <thead>
                                <tr>
                                    <th>{{ __('accommodation.hotels.room') }}</th>
                                    <th>Arrangement</th>
                                    <th class="price">{{ __('accommodation.hotels.rate_per_night') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Standard Room Single</td>
                                    <td>{{ __('accommodation.hotels.accommodation_with_breakfast') }}</td>
                                    <td class="price">420 {{ __('accommodation.currency') }}</td>
                                </tr>
                                <tr>
                                    <td>Standard Room Double</td>
                                    <td>{{ __('accommodation.hotels.accommodation_with_breakfast') }}</td>
                                    <td class="price">495 {{ __('accommodation.currency') }}</td>
                                </tr>
                            </tbody>
                        </table>
                        <!-- <a href="#" class="btn">Réserver maintenant</a> -->
                    </div>
                </div>
            </div>
        </section>

        <section id="radisson-laico">
            <h2 class="section-title">Golden Tulip El Mechtel</h2>
            <div class="hotels-grid">
                <div class="hotel-card">
                    <div class="hotel-images-grid">
                        <div class="hotel-image">
                            <img src="{{ URL::asset('assets/frontend/jpt/images/golden_tulip_mechtel_3.jpg') }}"
                                alt="Image 1">
                        </div>
                        <div class="hotel-image">
                            <img src="{{ URL::asset('assets/frontend/jpt/images/golden_tulip_mechtel_2.jpg') }}"
                                alt="Image 2">
                        </div>
                        <div class="hotel-image">
                            <img src="{{ URL::asset('assets/frontend/jpt/images/golden_tulip_mechtel_1.jpg') }}"
                                alt="Image 3">
                        </div>
                    </div>
                    <div class="hotel-content">
                        <h3 class="hotel-name">Golden Tulip El Mechtel
                            <span class="stars">
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                            </span>
                        </h3>
                        <div class="hotel-location">
                            <i class="fas fa-map-marker-alt"></i>
                            Avenue Ouled Hafouz, Tunis
                        </div>
                        <table class="pricing-table">
                            <thead>
                                <tr>
                                    <th>{{ __('accommodation.hotels.room') }}</th>
                                    <th>Arrangement</th>
                                    <th class="price">{{ __('accommodation.hotels.rate_per_night') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Standard Room Single</td>
                                    <td>{{ __('accommodation.hotels.accommodation_with_breakfast') }}</td>
                                    <td class="price">315 {{ __('accommodation.currency') }}</td>
                                </tr>
                                <tr>
                                    <td>Standard Room Double</td>
                                    <td>{{ __('accommodation.hotels.accommodation_with_breakfast') }}</td>
                                    <td class="price">385 {{ __('accommodation.currency') }}</td>
                                </tr>
                            </tbody>
                        </table>
                        <!-- <a href="#" class="btn">Réserver maintenant</a> -->
                    </div>
                </div>
            </div>
        </section>

        <section id="radisson-laico">
            <h2 class="section-title">Campanile El Mechtel</h2>
            <div class="hotels-grid">
                <div class="hotel-card">
                    <div class="hotel-images-grid">
                        <div class="hotel-image">
                            <img src="{{ URL::asset('assets/frontend/jpt/images/campanile_mechtel_3.jpg') }}"
                                alt="Image 1">
                        </div>
                        <div class="hotel-image">
                            <img src="{{ URL::asset('assets/frontend/jpt/images/campanile_mechtel_2.jpg') }}"
                                alt="Image 2">
                        </div>
                        <div class="hotel-image">
                            <img src="{{ URL::asset('assets/frontend/jpt/images/campanile_mechtel_1.jpg') }}"
                                alt="Image 3">
                        </div>
                    </div>
                    <div class="hotel-content">
                        <h3 class="hotel-name">Campanile El Mechtel
                            <span class="stars">
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                            </span>
                        </h3>
                        <div class="hotel-location">
                            <i class="fas fa-map-marker-alt"></i>
                            Avenue Ouled Hafouz, Tunis
                        </div>
                        <table class="pricing-table">
                            <thead>
                                <tr>
                                    <th>{{ __('accommodation.hotels.room') }}</th>
                                    <th>Arrangement</th>
                                    <th class="price">{{ __('accommodation.hotels.rate_per_night') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Standard Room Single</td>
                                    <td>{{ __('accommodation.hotels.accommodation_with_breakfast') }}</td>
                                    <td class="price">265 {{ __('accommodation.currency') }}</td>
                                </tr>
                                <tr>
                                    <td>Standard Room Double</td>
                                    <td>{{ __('accommodation.hotels.accommodation_with_breakfast') }}</td>
                                    <td class="price">305 {{ __('accommodation.currency') }}</td>
                                </tr>
                            </tbody>
                        </table>
                        <!-- <a href="#" class="btn">Réserver maintenant</a> -->
                    </div>
                </div>
            </div>
        </section>

        <!-- RÉSERVATION -->
        <section id="reservation">
            <h2 class="section-title">{{ __('accommodation.reservation.title') }}</h2>
            <div
                style="background: var(--blanc); border-radius: 15px; padding: 40px; box-shadow: var(--ombre); text-align: center;">
                <h3 class="section-subtitle">
                    {{ __('accommodation.reservation.heading') }}</h3>
                <p style="margin-bottom: 30px;">{{ __('accommodation.reservation.description') }}
                </p>

                <div style="display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-bottom: 30px;">
                    <div style="text-align: center;">
                        <i class="fas fa-envelope" style="font-size: 2em; color: var(--vert); margin-bottom: 10px;"></i>
                        <p style="font-weight: 600;">Email</p>
                        <p>{{ __('accommodation.reservation.contact_email') }}</p>
                    </div>
                    <div style="text-align: center;">
                        <i class="fab fa-whatsapp" style="font-size: 2em; color: var(--vert); margin-bottom: 10px;"></i>
                        <p style="font-weight: 600;">WhatsApp</p>
                        <p>{{ __('accommodation.reservation.contact_phone') }}</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- INFORMATIONS SUPPLEMENTAIRES -->
        <section id="informations">
            <h2 class="section-title">{{ __('accommodation.hotels.additional_information') }}</h2>
            <div class="additional-info">
                <div class="info-grid">
                    <div class="info-card">
                        <h3><i class="fas fa-utensils"></i> {{ __('accommodation.hotels.meal_supplement') }}</h3>
                        <p>{{ __('accommodation.hotels.lunch_dinner_buffet_supplement') }}</p>
                    </div>

                    <div class="info-card">
                        <h3><i class="fas fa-receipt"></i> {{ __('accommodation.hotels.stay_tax') }}
                        </h3>
                        <div class="tax-grid">
                            <div class="tax-item">
                                <span>{{ __('accommodation.hotels.tunisian_maghreb_guests') }}</span>
                                <span class="price">3 {{ __('accommodation.currency') }}</span>
                            </div>
                            <div class="tax-item">
                                <span>{{ __('accommodation.hotels.international_guests') }}</span>
                                <span class="price">12 {{ __('accommodation.currency') }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@section('css')
    <style>
        /* === HEADER === */
        header {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80');
            background-size: cover;
            background-position: center;
            color: white;
        }

        /* === CONTENU PRINCIPAL === */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 60px 20px;
        }

        /* === CARTES HÔTELS === */
        .hotels-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin-bottom: 60px;
        }

        .hotel-card {
            background: var(--blanc);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: var(--ombre);
            transition: var(--transition);
        }

        .hotel-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--ombre-hover);
        }

        .hotel-image {
            height: 250px;
            overflow: hidden;
        }

        .hotel-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

        .hotel-card:hover .hotel-image img {
            transform: scale(1.05);
        }

        .hotel-content {
            padding: 25px;
        }

        .hotel-name {
            color: var(--bleu);
            font-size: 1.4em;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .hotel-location {
            color: var(--texte-clair);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .hotel-location i {
            color: var(--vert);
        }

        /* === TABLES DE TARIFS === */
        .pricing-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            font-size: 0.95em;
        }

        .pricing-table th {
            background: var(--vert);
            color: white;
            padding: 12px 15px;
            text-align: left;
            font-weight: 600;
        }

        .pricing-table th.price {
            text-align: right;
        }

        .pricing-table td {
            padding: 12px 15px;
            border-bottom: 1px solid var(--gris);
        }

        .pricing-table tr:nth-child(even) {
            background: var(--gris-clair);
        }

        .pricing-table tr:hover {
            background: rgba(72, 174, 144, 0.1);
        }

        .price {
            color: var(--vert);
            font-weight: 600;
            text-align: right;
            white-space: nowrap;
        }

        /* === INFORMATIONS SUPPLEMENTAIRES === */
        .additional-info {
            background: var(--blanc);
            border-radius: 15px;
            padding: 30px;
            box-shadow: var(--ombre);
            margin-top: 40px;
            overflow: hidden;
            /* Empêche le débordement */
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            /*margin-top: 20px;*/
        }

        .info-card {
            background: var(--gris-clair);
            padding: 20px;
            border-radius: 10px;
            border-left: 4px solid var(--bleu);
            overflow: hidden;
            /* Empêche le débordement */
            word-wrap: break-word;
            /* Permet de casser les mots longs */
        }

        .info-card h3 {
            color: var(--bleu);
            margin-bottom: 10px;
            font-size: 1.2em;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .tax-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
            margin-top: 15px;
        }

        .tax-item {
            display: flex;
            justify-content: space-between;
            padding: 0;
            border-bottom: 1px dashed var(--gris);
        }

        .stars {
            font-size: 17px;
        }

        .stars span {
            display: inline-block;
            color: #ffc107;
        }

        /* === RESPONSIVE === */
        @media (max-width: 768px) {
            header h1 {
                font-size: 2em;
            }

            .hotels-grid {
                grid-template-columns: 1fr;
            }

            .pricing-table {
                font-size: 0.85em;
            }

            .tax-grid {
                grid-template-columns: 1fr;
            }

            /* Correction du débordement sur mobile */
            .info-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .info-card {
                padding: 15px;
            }
        }

        @media (max-width: 480px) {
            .pricing-table {
                display: block;
                overflow-x: auto;
            }

            .container {
                padding: 40px 15px;
            }

            .additional-info {
                padding: 20px;
            }
        }

        /* === GRILLE D'IMAGES HÔTEL === */
        .hotel-images-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            padding: 15px;
            background: var(--gris-clair);
            border-radius: 12px 12px 0 0;
        }

        .hotel-image {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 76.92%;
            /* 100 / 1.3 = 76.92% pour ratio 1.3 */
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            transition: var(--transition);
        }

        .hotel-image:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .hotel-image img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

        .hotel-image:hover img {
            transform: scale(1.05);
        }

        /* Effet de superposition au survol */
        .hotel-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /*background: linear-gradient(45deg, rgba(205, 170, 66, 0.1), rgba(231, 0, 19, 0.1));*/
            opacity: 0;
            transition: var(--transition);
            z-index: 1;
        }

        .hotel-image:hover::before {
            opacity: 1;
        }

        .hotel-image:hover::after {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

        /* Version mobile */
        @media (max-width: 768px) {
            .hotel-images-grid {
                grid-template-columns: 1fr;
                gap: 10px;
                padding: 10px;
            }

            .hotel-image {
                padding-bottom: 76.92%;
                /* Maintient le ratio 1.3 */
            }

            /* Carousel pour mobile */
            .hotel-images-grid {
                display: flex;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                scrollbar-width: none;
                -ms-overflow-style: none;
            }

            .hotel-images-grid::-webkit-scrollbar {
                display: none;
            }

            .hotel-image {
                flex: 0 0 80%;
                scroll-snap-align: start;
                margin-right: 10px;
            }
        }

        /* Version tablette */
        @media (min-width: 769px) and (max-width: 1024px) {
            .hotel-images-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .hotel-image:nth-child(3) {
                grid-column: span 2;
            }
        }

        /* Animation d'apparition */
        @keyframes imageFadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .hotel-image {
            animation: imageFadeIn 0.6s ease forwards;
        }

        .hotel-image:nth-child(2) {
            animation-delay: 0.1s;
        }

        .hotel-image:nth-child(3) {
            animation-delay: 0.2s;
        }

        .reservation-form {
            margin-top: 20px;
        }
    </style>
@endsection