@extends('layouts.app')

@section('title', 'تذاكر الفعاليات الترفيهية في أبوظبي')

@section('content')
<div class="container2 padded">
    
    <!-- Country Media Slider (Dynamic) -->
    <!-- Country Media Slider (Dynamic) -->
    <div id="home-slider-wrapper"></div>

    <!-- Discover Events Title with City Selector -->
    <div class="discover-events-section">
        <h2 class="discover-title">
            {{ __('messages.discover_events_in') }} 
            <button class="city-selector-trigger" id="citySelectorTrigger">
                <span id="currentCityName">{{ isset($selectedCity) ? $selectedCity->translatedName : __('messages.select_city') }}</span>
                <svg class="trigger-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
        </h2>
    </div>
    
    <!-- Hidden data for circles (will be inserted dynamically after first category) -->
    <div id="circles-data" style="display: none;">
        @if(isset($subCitiesWithImages) && $subCitiesWithImages->count() > 0)
            @foreach($subCitiesWithImages as $subCity)
                <div class="circle-data-item" 
                     data-id="{{ $subCity->id }}"
                     data-name="{{ $subCity->translatedName }}"
                     data-image="{{ asset('storage/' . $subCity->image) }}">
                </div>
            @endforeach
        @endif
    </div>

    <!-- قسم عرض المنتجات (التذاكر) -->
    <div class="tickets-section" id="ticketsSection">
        <div class="tickets-loading" id="ticketsLoading" style="display: none;">
            <div class="loading-spinner"></div>
            <p>جاري تحميل الفعاليات...</p>
        </div>
        
        <div class="tickets-empty" id="ticketsEmpty" style="display: none;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="48" height="48">
                <circle cx="12" cy="12" r="10"></circle>
                <path d="M16 16s-1.5-2-4-2-4 2-4 2"></path>
                <line x1="9" y1="9" x2="9.01" y2="9"></line>
                <line x1="15" y1="9" x2="15.01" y2="9"></line>
            </svg>
            <p>لا توجد فعاليات متاحة في هذه المنطقة</p>
        </div>
        
        <div class="tickets-grid" id="ticketsGrid">
            <!-- المنتجات ستظهر هنا ديناميكياً -->
        </div>
    </div>
</div>

<!-- City Selection Modal -->
<div class="city-modal-backdrop" id="cityModal">
    <div class="city-modal-content">
        <!-- Search Header -->
        <div class="city-modal-header">
            <div class="search-wrapper">
                <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="11" cy="11" r="8"></circle>
                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>
                <input type="text" id="citySearchInput" placeholder="ابحث عن المدينة" class="city-search-input">
            </div>
            <button class="close-modal-btn" id="closeCityModal">✕</button>
        </div>

        <!-- Cities List -->
        <div class="city-modal-body">
            @isset($cities)
                @foreach($cities as $city)
                    <div class="city-option" data-city-name="{{ $city->translatedName }}" data-city-id="{{ $city->id }}">
                        @if($city->subCities && $city->subCities->count() > 0)
                            <div class="city-main-item has-subs" data-city-id="{{ $city->id }}">
                                <span>{{ $city->translatedName }}</span>
                                <svg class="sub-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M19 9l-7 7-7-7"/>
                                </svg>
                            </div>
                            <div id="subCitiesList-{{ $city->id }}" class="sub-cities-list">
                                @foreach($city->subCities as $subCity)
                                    <div class="city-option sub-city-option" data-city-name="{{ $subCity->translatedName }}" data-city-id="{{ $city->id }}" data-subcity-id="{{ $subCity->id }}">
                                        {{ $subCity->translatedName }}
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="city-main-item" data-city-id="{{ $city->id }}">
                                {{ $city->translatedName }}
                            </div>
                        @endif
                    </div>
                @endforeach
            @endisset
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
/* ==================== Circles Section ==================== */
.circles-section {
    padding: 20px 0;
    margin-bottom: 10px;
}

.circles-scroll-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.circles-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.circles-container {
    display: flex;
    gap: 20px;
    padding: 10px 20px;
    min-width: max-content;
    justify-content: center; /* Center on Desktop */
}
@media (max-width: 768px) {
    .circles-container {
        justify-content: flex-start; /* Scroll naturally on mobile */
    }
}

.circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.circle-item:hover {
    transform: scale(1.05);
}

/* CSS Removed */

.circle-item.active .circle-image-wrapper {
    border-color: #2b70e4;
    box-shadow: 0 0 0 3px rgba(43, 112, 228, 0.3);
}

.circle-image-wrapper {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #e0e0e0;
    background: #f5f5f5;
    transition: all 0.2s ease;
}

.circle-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.circle-name {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    text-align: center;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.circle-item:hover .circle-name {
    color: #2b70e4;
}

/* Responsive */
@media (max-width: 768px) {
    .circles-container {
        gap: 15px;
        padding: 10px 15px;
    }
    
    .circle-image-wrapper {
        width: 110px;
        height: 110px;
    }
    
    .circle-name {
        font-size: 13px;
        max-width: 90px;
    }
}

@media (max-width: 480px) {
    .circles-container {
        gap: 12px;
        padding: 10px;
    }
    
    .circle-image-wrapper {
        width: 80px;
        height: 80px;
        border-width: 2px;
    }
    
    .circle-name {
        font-size: 11px;
        max-width: 65px;
    }
}

/* ==================== End Circles Section ==================== */

/* Trigger Section */
.discover-events-section {
    padding: 30px 0;
    text-align: center;
}

.discover-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #000;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.city-selector-trigger {
    background: transparent;
    border: none;
    color: #2b70e4; /* Platinumlist Blue */
    font-weight: 800;
    font-size: 2.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    transition: color 0.2s;
}

.city-selector-trigger:hover {
    color: #1a5bc0;
}

.trigger-arrow {
    width: 24px;
    height: 24px;
    margin-top: 5px;
}

/* Modal Backdrop */
.city-modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.city-modal-backdrop.show {
    display: flex;
}

/* Modal Content */
.city-modal-content {
    background: #fff;
    width: 90%;
    max-width: 500px;
    height: 80vh;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Modal Header */
.city-modal-header {
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
}

.search-wrapper {
    flex: 1;
    position: relative;
    background: #f5f5f5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 12px;
}

.search-icon {
    width: 18px;
    height: 18px;
    color: #888;
}

.city-search-input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 12px 10px;
    font-size: 1rem;
    outline: none;
    text-align: right;
}

.close-modal-btn {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #888;
    cursor: pointer;
    padding: 5px;
}

/* Modal Body */
.city-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
}

.country-group {
    margin-bottom: 10px;
}

.country-header {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.1rem;
    color: #000;
}

.country-flag {
    width: 24px;
    height: auto;
    border-radius: 2px;
}

.country-cities {
    padding-right: 20px;
}

.city-option {
    cursor: pointer;
}

.city-main-item {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s;
    font-size: 1rem;
}

.city-main-item:hover {
    background: #f9f9f9;
    color: #2b70e4;
}

.city-main-item.has-subs {
    font-weight: 500;
}

.sub-arrow {
    width: 16px;
    height: 16px;
    color: #aaa;
    transition: transform 0.2s;
}

.city-main-item.open .sub-arrow {
    transform: rotate(180deg);
}

.sub-cities-list {
    display: none;
    background: #f8f8f8;
}

.sub-cities-list.show {
    display: block;
}

.sub-city-option {
    padding: 10px 40px;
    font-size: 0.95rem;
    color: #555;
    transition: background 0.2s;
}

.sub-city-option:hover {
    background: #eee;
    color: #2b70e4;
}

/* Tickets Section */
.tickets-section {
    padding: 20px 0;
    min-height: 200px;
}

.tickets-loading,
.tickets-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #888;
    text-align: center;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #2b70e4;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.tickets-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 0 20px;
}

@media (max-width: 1200px) {
    .tickets-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .tickets-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .tickets-grid { grid-template-columns: 1fr; gap: 16px; }
    
    /* 1. First Category: Horizontal scroll with columns of 3 items */
    .first-category-scroll {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 16px;
        padding-bottom: 15px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .first-category-scroll::-webkit-scrollbar { display: none; }
    
    .first-category-scroll.active-drag,
    .horizontal-scroll-mobile.active-drag {
        cursor: grabbing;
        user-select: none;
    }
    
    .first-category-scroll,
    .horizontal-scroll-mobile {
        cursor: grab;
        touch-action: pan-x;
    }
    
    .first-category-column {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 85vw; /* Each column takes most of the screen */
        flex-shrink: 0;
    }
    
    /* 2. Horizontal Scroll Container (For Other Categories - Small Cards) */
    .horizontal-scroll-mobile {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding-bottom: 15px;
        -webkit-overflow-scrolling: touch; 
        scrollbar-width: none;
    }
    .horizontal-scroll-mobile::-webkit-scrollbar { display: none; }

    /* باقي الأقسام - كاردات كبيرة عمودية */
    .horizontal-scroll-mobile .ticket-card {
        min-width: 280px;
        width: 280px;
        flex-shrink: 0;
    }
    
    /* سحب مباشر بدون تأخير */
    .horizontal-scroll-mobile {
        scroll-snap-type: none;
    }
    
    .horizontal-scroll-mobile .ticket-card-image-wrapper {
        padding-bottom: 100%; /* مربع */
        border-radius: 16px;
    }
    
    .horizontal-scroll-mobile .ticket-card-content {
        padding: 12px 4px;
    }
    
    .horizontal-scroll-mobile .ticket-card-title {
        font-size: 16px;
        font-weight: 700;
        text-align: right;
    }
    
    .horizontal-scroll-mobile .ticket-card-price-row {
        justify-content: flex-end;
        gap: 8px;
    }
    
    .horizontal-scroll-mobile .ticket-card-badges {
        top: 12px;
        right: 12px;
        display: flex;
        gap: 8px;
    }
    
    .horizontal-scroll-mobile .ticket-card-bestseller {
        display: inline-block;
        background: #25d366;
        color: #fff;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 600;
    }
    
    .horizontal-scroll-mobile .ticket-card-rating {
        background: #25d366;
        color: #fff;
        padding: 6px 10px;
        border-radius: 20px;
        font-size: 13px;
    }

    /* 3. Horizontal Card Style - القسم الأول */
    .horizontal-card {
        display: flex;
        flex-direction: row; /* الصورة على اليسار والمحتوى على اليمين */
        align-items: stretch; 
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        border: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        min-height: 130px;
    }

    .horizontal-card .ticket-card-image-wrapper {
        width: 130px; 
        min-width: 130px;
        height: auto;
        padding-bottom: 0; 
        flex-shrink: 0;
        border-radius: 12px;
        position: relative;
        overflow: hidden;
    }
    
    .horizontal-card .ticket-card-image-wrapper img {
        position: absolute; 
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .horizontal-card .ticket-card-content {
        flex: 1;
        padding: 12px 16px;
        text-align: right; 
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
    }

    .horizontal-card .ticket-card-title {
        font-size: 16px;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 0;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .horizontal-card .ticket-card-price {
        font-size: 15px;
        font-weight: 600;
        color: #333;
    }

    /* Badge يُباع سريعاً */
    .horizontal-card .ticket-card-selling-fast {
        color: #25d366;
        font-size: 13px;
        font-weight: 600;
        text-decoration: underline;
    }
    
    .horizontal-card .ticket-card-guarantee {
        color: #25d366;
        font-size: 13px;
        font-weight: 600;
        text-decoration: underline;
    }

    /* Badges for Horizontal Card */
    .horizontal-card .ticket-card-badges {
        display: flex;
        position: absolute;
        top: 8px;
        right: 8px;
        gap: 6px;
    }
    
    .horizontal-card .ticket-card-rating {
        background: #25d366;
        color: #fff;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: bold;
    }

    .horizontal-card .ticket-card-bestseller,
    .horizontal-card .ticket-card-favorite {
        display: none;
    }
    
    .horizontal-card .ticket-card-discount {
        background: #25d366;
        color: #fff;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 12px;
        display: inline-block;
        margin-top: 4px;
        width: fit-content;
    }
}

/* Show More Button */
.section-show-more-btn {
    display: block;
    width: fit-content; /* Fix: changed from 100% to fit text */
    min-width: 200px;
    margin: 20px auto 30px; /* Center horizontally */
    padding: 12px 40px;
    text-align: center;
    background: #fff;
    border: 1px solid #e0e0e0;
    color: #333;
    font-weight: 700;
    border-radius: 50px; /* Rounded pill shape */
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.section-show-more-btn:hover {
    background: #f8f8f8;
    border-color: #ccc;
    transform: translateY(-1px);
}

/* Circles Section Title */
.circles-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 15px;
    width: 100%;
}
.circles-section-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #000;
}

/* Wrapper spacing */
.category-section-wrapper {
    margin-bottom: 20px;
}
   Platinumlist Exact Card Design - Matching Reference Images
   ============================================ */

/* Card Container */
.ticket-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}

.ticket-card:hover {
    transform: translateY(-4px);
}

/* Image Wrapper - 4:3 Aspect Ratio like Platinumlist */
.ticket-card-image-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 Aspect Ratio */
    border-radius: 12px;
    overflow: hidden;
    background: #e9e9e9;
}

.ticket-card-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

/* Favorite Heart Icon - Top Left (RTL: Right) */
.ticket-card-favorite {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.ticket-card-favorite:hover {
    transform: scale(1.1);
    background: #fff;
}

.ticket-card-favorite svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #888;
    stroke-width: 2;
}

.ticket-card-favorite.active svg {
    fill: #e91e63;
    stroke: #e91e63;
}

/* Badges Container - Top Right (RTL: Left) */
.ticket-card-badges {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: row;
    gap: 6px;
    z-index: 3;
}

/* Rating Badge - Green rounded pill with star */
.ticket-card-rating {
    background: #64b010;
    color: #fff;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
}

.ticket-card-rating svg {
    width: 10px;
    height: 10px;
    fill: #fff;
}

/* Best Seller Badge - Yellow/Gold */
.ticket-card-bestseller {
    background: #ffc107;
    color: #000;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

/* Card Content - Below Image */
.ticket-card-content {
    padding: 12px 0 0 0;
    text-align: right;
}

/* Title */

.ticket-card-category {
    font-size: 14px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
}

.category-arrow {
    font-weight: 700;
    font-size: 14px;
    color: #1a1a1a;
    line-height: 1;
    margin-top: 2px;
}

/* RTL Support */
html[dir="rtl"] .category-arrow {
    /* No rotation needed if using › and text order is correct */
}

.ticket-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #58585b;
    margin: 0 0 6px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ticket-card-title:hover {
    color: #37a7f8;
}

/* Price Section */
.ticket-card-price-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.ticket-card-price {
    font-size: 14px;
    font-weight: 600;
    color: #58585b;
}

.ticket-card-old-price {
    font-size: 13px;
    color: #9b9b9b;
    text-decoration: line-through;
}

/* Discount Badge - Green */
.ticket-card-discount {
    display: inline-block;
    background: #25d366;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

/* Date/Location */
.ticket-card-date {
    font-size: 14px;
    color: #9b9b9b;
    margin-top: 4px;
}

/* New Category Section Styles */
.tickets-grid {
    display: block !important; /* Override current grid display */
    padding: 0 20px;
}

.category-section-header {
    margin-top: 40px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.category-section-header:first-child {
    margin-top: 10px;
}

.category-section-title {
    font-size: 32px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.category-section-arrow {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    padding-top: 5px;
}

.category-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 20px;
}

.category-header-link {
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.category-header-link:hover {
    opacity: 0.8;
}

.tickets-section {
    position: relative;
    z-index: 1;
    margin-top: 20px;
}

@media (max-width: 1200px) {
    .category-products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .category-products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .category-products-grid { grid-template-columns: 1fr; gap: 16px; }
    .category-section-title { font-size: 24px; }
    .category-section-arrow { font-size: 24px; }
}

/* Cleanup previously added classes if any */
.ticket-card-category { display: none; }

/* Home Slider Styles (Copied from Ticket Page - Exact Match) */
.event-hero {
    position: relative;
    width: 100%;
    height: 500px; /* Increased Height */
    margin-bottom: 30px;
}

.event-hero__slider {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background-color: #f0f0f0;
}

.event-hero__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    display: none; /* JS will handle display */
}

.event-hero__image.active {
    opacity: 1;
    display: block !important;
    z-index: 1;
}

.event-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px; /* Larger size for desktop */
    height: 56px;
    background: #ffffff; /* Solid white */
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Stronger shadow */
    z-index: 2;
    transition: all 0.2s;
}

.event-hero__arrow:hover {
    transform: translateY(-50%) scale(1.05);
    background: #ffffff;
}

.event-hero__arrow svg {
    width: 24px;
    height: 24px;
}

.event-hero__arrow .icon-desktop {
    color: #000000;
    display: block;
}

.event-hero__arrow .icon-mobile {
    display: none;
}

.event-hero__arrow--prev { left: -28px; }
.event-hero__arrow--next { right: -28px; }

/* Mobile Responsive */
@media (max-width: 768px) {
    .event-hero {
        height: 250px; /* Mobile Height matches ticket page logic */
        border-radius: 12px;
        margin-left: -20px;
        margin-right: -20px;
        width: calc(100% + 40px);
    }
    
    .event-hero__arrow {
        width: 40px;
        height: 40px;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
    }
    
    .event-hero__arrow:hover {
        background: transparent;
        transform: translateY(-50%);
    }

    .event-hero__arrow .icon-desktop {
        display: none !important;
    }

    .event-hero__arrow .icon-mobile {
        display: block !important;
        width: 32px; /* Large chevron */
        height: 32px;
        stroke: #ffffff; /* White chevron */
        stroke-width: 2.5;
        filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); /* Shadow for visibility */
    }

    .event-hero__arrow--prev { left: 4px; }
    .event-hero__arrow--next { right: 4px; }
}
</style>
@endpush

@push('scripts')
<script>
    // تمرير الترجمات من لارافيل إلى جافاسكريبت
    window.translations = {
        best_seller: "{{ __('messages.best_seller') }}",
        save: "{{ __('messages.save_discount') }}",
        egp: "{{ session('currency', 'EGP') }}" // أو العملة المختارة
    };

    // Touch Swipe للسحب الأفقي على الموبايل
    function enableTouchSwipe(container) {
        let isDown = false;
        let startX;
        let scrollLeft;
        let velX = 0;
        let momentumID;

        container.addEventListener('mousedown', (e) => {
            isDown = true;
            container.classList.add('active-drag');
            startX = e.pageX - container.offsetLeft;
            scrollLeft = container.scrollLeft;
            cancelMomentum();
        });

        container.addEventListener('mouseleave', () => {
            if (isDown) startMomentum();
            isDown = false;
            container.classList.remove('active-drag');
        });

        container.addEventListener('mouseup', () => {
            isDown = false;
            container.classList.remove('active-drag');
            startMomentum();
        });

        container.addEventListener('mousemove', (e) => {
            if (!isDown) return;
            e.preventDefault();
            const x = e.pageX - container.offsetLeft;
            const walk = (x - startX) * 3;
            velX = walk;
            container.scrollLeft = scrollLeft - walk;
        });

        // Touch Events للموبايل - سريع وسلس
        let lastX = 0;
        let lastTime = 0;
        
        container.addEventListener('touchstart', (e) => {
            startX = e.touches[0].pageX;
            lastX = startX;
            lastTime = Date.now();
            scrollLeft = container.scrollLeft;
            velX = 0;
            cancelMomentum();
        }, { passive: true });

        container.addEventListener('touchmove', (e) => {
            const x = e.touches[0].pageX;
            const now = Date.now();
            const deltaTime = now - lastTime || 1;
            const deltaX = lastX - x;
            
            // حساب السرعة الفعلية
            velX = (deltaX / deltaTime) * 20;
            container.scrollLeft += deltaX;
            
            lastX = x;
            lastTime = now;
        }, { passive: true });

        container.addEventListener('touchend', () => {
            startMomentum();
        }, { passive: true });

        // Momentum Scrolling - استمرار سلس بعد رفع الإصبع
        function startMomentum() {
            cancelMomentum();
            momentumID = requestAnimationFrame(momentumLoop);
        }

        function cancelMomentum() {
            cancelAnimationFrame(momentumID);
        }

        function momentumLoop() {
            container.scrollLeft += velX * 0.3;
            velX *= 0.92; // التباطؤ التدريجي
            if (Math.abs(velX) > 0.5) {
                momentumID = requestAnimationFrame(momentumLoop);
            }
        }

        // منع النقر أثناء السحب
        let isDragging = false;
        let dragStartX = 0;
        
        container.addEventListener('mousedown', (e) => {
            dragStartX = e.pageX;
            isDragging = false;
        });
        
        container.addEventListener('mousemove', (e) => {
            if (Math.abs(e.pageX - dragStartX) > 5) {
                isDragging = true;
            }
        });
        
        // منع فتح الرابط إذا كان يسحب
        container.querySelectorAll('a').forEach(link => {
            link.addEventListener('click', (e) => {
                if (isDragging) {
                    e.preventDefault();
                    e.stopPropagation();
                }
            });
        });
        
        // السماح بالسحب من الصور
        container.querySelectorAll('img').forEach(img => {
            img.style.pointerEvents = 'none';
            img.setAttribute('draggable', 'false');
        });
    }

    // تفعيل السحب بعد تحميل الصفحة
    function initSwipeContainers() {
        document.querySelectorAll('.first-category-scroll, .horizontal-scroll-mobile').forEach(container => {
            enableTouchSwipe(container);
        });
    }

    // Home Slider Logic
    let currentHomeSlide = 0;

    // Toggle Video Sound
    window.toggleVideoSound = function(videoId) {
        const video = document.getElementById(videoId);
        if (!video) return;
        
        const btn = video.parentElement.querySelector('.video-sound-toggle');
        const muteIcon = btn.querySelector('.icon-mute');
        const unmuteIcon = btn.querySelector('.icon-unmute');
        
        if (video.muted) {
            video.muted = false;
            muteIcon.style.display = 'none';
            unmuteIcon.style.display = 'block';
        } else {
            video.muted = true;
            muteIcon.style.display = 'block';
            unmuteIcon.style.display = 'none';
        }
    };
    
    // Intersection Observer for videos
    const videoObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.target.tagName === 'VIDEO') {
                if (entry.isIntersecting) {
                    // Try playing with sound first
                    const playPromise = entry.target.play();
                    
                    if (playPromise !== undefined) {
                        playPromise.catch(error => {
                            console.log('Autoplay with sound failed, falling back to muted:', error);
                            // Fallback: Mute and play
                            entry.target.muted = true;
                            entry.target.play();
                            
                            // Update the toggle button UI to show "Muted" state
                            const btn = entry.target.parentElement.querySelector('.video-sound-toggle');
                            if (btn) {
                                const muteIcon = btn.querySelector('.icon-mute');
                                const unmuteIcon = btn.querySelector('.icon-unmute');
                                if (muteIcon && unmuteIcon) {
                                    muteIcon.style.display = 'block';
                                    unmuteIcon.style.display = 'none';
                                }
                            }
                        });
                    }
                } else {
                    entry.target.pause();
                }
            }
        });
    }, { threshold: 0.5 });

    function showHomeSlide(index) {
        const slides = document.querySelectorAll('#countryMediaSlider .home-slide');
        if (slides.length === 0) return;
        
        slides.forEach(slide => {
            slide.classList.remove('active');
            slide.style.display = 'none';
            // Pause video if found inside
            const video = slide.querySelector('video');
            if (video) {
                video.pause();
                video.currentTime = 0;
            }
        });
        
        if (slides[index]) {
            const activeSlide = slides[index];
            activeSlide.classList.add('active');
            activeSlide.style.display = 'block';
            
            // If video, observe it (or let observer handle it if already observed)
            const video = activeSlide.querySelector('video');
            if (video) {
                // We don't force play() here, we let the observer interaction handle it
                // But we ensure it's unpaused if observer doesn't fire immediately
                setTimeout(() => {
                   if (video.paused) {
                        video.play().catch(() => {
                            video.muted = true;
                            video.play();
                        });
                   }
                }, 50);
            }
        }
    }
    
    function nextHomeSlide() {
        const slides = document.querySelectorAll('#countryMediaSlider .home-slide');
        if (slides.length <= 1) return;
        currentHomeSlide = (currentHomeSlide + 1) % slides.length;
        showHomeSlide(currentHomeSlide);
    }
    
    function prevHomeSlide() {
        const slides = document.querySelectorAll('#countryMediaSlider .home-slide');
        if (slides.length <= 1) return;
        currentHomeSlide = (currentHomeSlide - 1 + slides.length) % slides.length;
        showHomeSlide(currentHomeSlide);
    }
    
    // Render Slider Function (Dynamic)
    function renderSlider(mediaItems) {
        const container = document.getElementById('home-slider-wrapper');
        if (!container) return; // robustness check

        if (!mediaItems || mediaItems.length === 0) {
            container.innerHTML = '';
            return;
        }

        let slidesHtml = '';
        mediaItems.forEach((item, index) => {
            const activeClass = index === 0 ? 'active' : '';
            const displayStyle = index === 0 ? 'display: block;' : 'display: none;';
            const uniqueId = `slide-video-${index}`;
            
            if (item.file_type === 'video') {
                slidesHtml += `
                    <div class="home-slide ${activeClass}" style="${displayStyle} width: 100%; height: 100%; position: relative; background: #000;">
                        <video id="${uniqueId}"
                               src="${item.file_path}" 
                               style="object-fit: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;"
                               loop playsinline></video>
                        <button class="video-sound-toggle" onclick="toggleVideoSound('${uniqueId}')" style="position: absolute; bottom: 20px; left: 20px; z-index: 10; background: rgba(0,0,0,0.5); border: none; border-radius: 50%; width: 40px; height: 40px; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;">
                            <svg class="icon-mute" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; display: none;">
                                <line x1="1" y1="1" x2="23" y2="23"></line>
                                <path d="M9 9v6a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"></path>
                                <path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"></path>
                                <line x1="12" y1="19" x2="12" y2="23"></line>
                                <line x1="8" y1="23" x2="16" y2="23"></line>
                            </svg>
                            <svg class="icon-unmute" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: block; width: 20px; height: 20px;">
                                <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
                                <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
                                <line x1="12" y1="19" x2="12" y2="23"></line>
                                <line x1="8" y1="23" x2="16" y2="23"></line>
                            </svg>
                        </button>
                    </div>
                `;
            } else {
                slidesHtml += `
                    <div class="home-slide ${activeClass}" style="${displayStyle} width: 100%; height: 100%;">
                        <img src="${item.file_path}" 
                             alt="Media" 
                             style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                `;
            }
        });

        let arrowsHtml = '';
        if (mediaItems.length > 1) {
            arrowsHtml = `
                <button class="event-hero__arrow event-hero__arrow--prev" onclick="prevHomeSlide()" style="z-index: 100;">
                    <svg class="icon-desktop" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M19 12H5"></path>
                        <path d="M12 19l-7-7 7-7"></path>
                    </svg>
                    <svg class="icon-mobile" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: none;">
                        <polyline points="15 18 9 12 15 6"></polyline>
                    </svg>
                </button>
                <button class="event-hero__arrow event-hero__arrow--next" onclick="nextHomeSlide()" style="z-index: 100;">
                    <svg class="icon-desktop" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M5 12h14"></path>
                        <path d="M12 5l7 7-7 7"></path>
                    </svg>
                    <svg class="icon-mobile" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: none;">
                        <polyline points="9 18 15 12 9 6"></polyline>
                    </svg>
                </button>
            `;
        }

        container.innerHTML = `
            <div class="event-hero" style="margin-bottom: 30px; margin-top: 20px;">
                <div class="event-hero__slider" id="countryMediaSlider">
                    ${slidesHtml}
                </div>
                ${arrowsHtml}
            </div>
        `;
        
        // IMPORTANT: Attach observers to all videos now that they are in the DOM
        const videos = container.querySelectorAll('video');
        videos.forEach(video => {
            videoObserver.observe(video);
        });
        
        // Reset slider state
        currentHomeSlide = 0;
    }

document.addEventListener('DOMContentLoaded', function() {
    const modal = document.getElementById('cityModal');
    const trigger = document.getElementById('citySelectorTrigger');
    const closeBtn = document.getElementById('closeCityModal');
    const searchInput = document.getElementById('citySearchInput');
    const currentCityName = document.getElementById('currentCityName');
    
    // Open Modal
    trigger.addEventListener('click', function(e) {
        e.stopPropagation();
        modal.classList.add('show');
        searchInput.focus();
    });
    
    // Close Modal
    function closeModal() {
        modal.classList.remove('show');
    }
    
    closeBtn.addEventListener('click', closeModal);
    
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            closeModal();
        }
    });
    
    // Toggle Sub-cities
    document.querySelectorAll('.city-main-item.has-subs').forEach(function(item) {
        item.addEventListener('click', function(e) {
            e.stopPropagation();
            const cityId = this.getAttribute('data-city-id');
            const subList = document.getElementById('subCitiesList-' + cityId);
            
            // Toggle
            this.classList.toggle('open');
            if (subList.style.display === 'block') {
                subList.style.display = 'none';
            } else {
                subList.style.display = 'block';
            }
        });
    });
    
    // Select City (for items without sub-cities or sub-city items)
    const selectableItems = document.querySelectorAll('.city-main-item:not(.has-subs), .sub-city-option');
    selectableItems.forEach(function(item) {
        item.addEventListener('click', function() {
            const cityName = this.innerText.trim();
            // Get city ID and subcity ID from the element
            const cityId = this.getAttribute('data-city-id') || this.closest('[data-city-id]')?.getAttribute('data-city-id');
            const subCityId = this.getAttribute('data-subcity-id');
            
            // Update displayed city name
            currentCityName.innerText = cityName;
            
            // Also update header city name for consistency
            const headerCityName = document.querySelector('.main-header__city-name');
            if(headerCityName) headerCityName.innerText = cityName;

            closeModal();
            
            // If we have a sub_city ID, fetch categories and tickets for sub_city
            if (subCityId) {
                updateHeaderCategoriesBySubCity(subCityId, cityName);
                fetchTicketsBySubCity(subCityId);
            } else if (cityId) {
                // Otherwise fetch categories and tickets for city
                updateHeaderCategories(cityId);
                fetchTicketsByCity(cityId);
            }
        });
    });
    
    // Function to update header categories based on sub_city
    function updateHeaderCategoriesBySubCity(subCityId, locationName) {
        console.log('Fetching categories for subCityId:', subCityId);
        fetch('/api/categories-by-subcity/' + subCityId)
            .then(response => response.json())
            .then(data => {
                console.log('API Response:', data);
                if (data.success && data.categories) {
                    console.log('Calling renderHeaderCategories with', data.categories.length, 'categories');
                    renderHeaderCategories(data.categories, locationName);
                }
            })
            .catch(error => console.error('Error:', error));
    }
    
    // Function to update header categories based on city
    function updateHeaderCategories(cityId) {
        fetch('/api/categories-by-city/' + cityId)
            .then(response => response.json())
            .then(data => {
                if (data.success && data.categories) {
                    renderHeaderCategories(data.categories);
                }
            })
            .catch(error => console.error('Error fetching categories:', error));
    }
    
    // Function to render categories in header
    function renderHeaderCategories(categories, locationName) {
        const headerCategoriesList = document.querySelector('.main-header-links__list');
        if (!headerCategoriesList) return;
        
        // Clear existing items
        headerCategoriesList.innerHTML = '';
        
        categories.forEach(function(category) {
            const li = document.createElement('li');
            li.className = 'main-header-links__item';
            
            if (category.children && category.children.length > 0) {
                li.innerHTML = `
                    <a href="javascript:void(0)" class="main-header-links__link link" data-dropdown-toggle data-dropdown-target="category-${category.id}">
                        ${category.name}
                        <svg class="icon icon-slider-arrow-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:12px;height:12px;">
                            <path d="M19 9l-7 7-7-7"/>
                        </svg>
                    </a>
                `;
                
                // Create dropdown for sub-categories
                let dropdown = document.querySelector(`[data-dropdown-content="category-${category.id}"]`);
                if (!dropdown) {
                    dropdown = document.createElement('div');
                    dropdown.className = 'main-header-links__dropdown';
                    dropdown.setAttribute('data-dropdown-content', 'category-' + category.id);
                    dropdown.innerHTML = `
                        <div class="main-header-links__dropdown-item-list">
                            <ul>
                                <li class="main-header-links__dropdown-item border-bottom">
                                    <a href="${category.url}" class="main-header-links__dropdown-link main-header-links__dropdown-link--top link">
                                        كل ${category.name}
                                    </a>
                                </li>
                                ${category.children.map(child => `
                                    <li class="main-header-links__dropdown-item">
                                        <a href="${child.url}" class="main-header-links__dropdown-link link">
                                            ${child.name}
                                        </a>
                                    </li>
                                `).join('')}
                            </ul>
                        </div>
                    `;
                    document.querySelector('.main-header-links').appendChild(dropdown);
                }
            } else {
                li.innerHTML = `<a href="${category.url}" class="main-header-links__link link">${category.name}</a>`;
            }
            
            headerCategoriesList.appendChild(li);
        });
        
        // Re-attach dropdown event listeners
        attachDropdownListeners();
    }
    
    // Function to attach dropdown listeners
    function attachDropdownListeners() {
        document.querySelectorAll('[data-dropdown-toggle]').forEach(function(toggle) {
            toggle.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                const targetId = this.getAttribute('data-dropdown-target');
                const dropdown = document.querySelector('[data-dropdown-content="' + targetId + '"]');
                
                document.querySelectorAll('.main-header-links__dropdown').forEach(function(d) {
                    if (d !== dropdown) {
                        d.classList.remove('active');
                        d.style.display = 'none';
                    }
                });
                
                if (dropdown) {
                    dropdown.classList.toggle('active');
                    dropdown.style.display = dropdown.classList.contains('active') ? 'block' : 'none';
                }
            });
        });
    }
    
    // Search Filtering
    searchInput.addEventListener('input', function() {
        const query = this.value.toLowerCase().trim();
        const countryGroups = document.querySelectorAll('.country-group');
        
        countryGroups.forEach(function(group) {
            let hasVisibleCity = false;
            const cities = group.querySelectorAll('.city-option');
            
            cities.forEach(function(cityWrapper) {
                const cityName = cityWrapper.getAttribute('data-city-name') || '';
                
                if (query === '' || cityName.includes(query)) {
                    cityWrapper.style.display = 'block';
                    hasVisibleCity = true;
                } else {
                    cityWrapper.style.display = 'none';
                }
            });
            
            if (hasVisibleCity) {
                group.style.display = 'block';
            } else {
                group.style.display = 'none';
            }
        });
    });
    
    // Tickets Elements
    const ticketsGrid = document.getElementById('ticketsGrid');
    const ticketsLoading = document.getElementById('ticketsLoading');
    const ticketsEmpty = document.getElementById('ticketsEmpty');
    
    // Removed duplicate renderSlider function to prevent conflicts

    // Function called when clicking on circle items
    function loadTicketsBySubCity(subCityId, subCityName) {
        // Remove active class from all circles
        document.querySelectorAll('.circle-item').forEach(item => {
            item.classList.remove('active');
        });
        
        // Add active class to clicked circle
        const clickedCircle = document.querySelector(`.circle-item[data-subcity-id="${subCityId}"]`);
        if (clickedCircle) {
            clickedCircle.classList.add('active');
        }
        
        // Update city name display if needed
        const cityNameElement = document.getElementById('currentCityName');
        if (cityNameElement && subCityName) {
            cityNameElement.textContent = subCityName;
        }
        
        // Fetch tickets for this sub-city
        fetchTicketsBySubCity(subCityId);
    }

    // Global variable to store current tickets for resizing
    let currentTicketsData = [];
    let lastIsMobile = window.innerWidth <= 600;

    // Window Resize Handler
    window.addEventListener('resize', () => {
        const isMobile = window.innerWidth <= 600;
        if (isMobile !== lastIsMobile && currentTicketsData.length > 0) {
            lastIsMobile = isMobile;
            renderTickets(currentTicketsData);
        }
    });

    // Toggle Video Sound
    window.toggleVideoSound = function(videoId) {
        const video = document.getElementById(videoId);
        if (!video) return;
        
        const btn = video.parentElement.querySelector('.video-sound-toggle');
        const muteIcon = btn.querySelector('.icon-mute');
        const unmuteIcon = btn.querySelector('.icon-unmute');
        
        if (video.muted) {
            video.muted = false;
            muteIcon.style.display = 'none';
            unmuteIcon.style.display = 'block';
        } else {
            video.muted = true;
            muteIcon.style.display = 'block';
            unmuteIcon.style.display = 'none';
        }
    };

    // Function to fetch tickets by sub_city
    function fetchTicketsBySubCity(subCityId) {
        showLoading();
        const currentLang = document.documentElement.lang || 'ar';
        fetch('/api/tickets-by-subcity/' + subCityId + '?lang=' + currentLang)
            .then(response => response.json())
            .then(data => {
                hideLoading();
                
                // Render Slider if media exists
                if (data.media) {
                    renderSlider(data.media);
                } else {
                    renderSlider([]);
                }

                if (data.success && data.tickets) {
                    currentTicketsData = data.tickets; // Save for resize
                    renderTickets(data.tickets);
                } else {
                    showEmpty();
                }
            })
            .catch(error => {
                console.error('Error fetching tickets:', error);
                hideLoading();
                showEmpty();
                renderSlider([]); 
            });
    }
    
    // Function to fetch tickets by city
    function fetchTicketsByCity(cityId) {
        showLoading();
        // Clear slider when fetching by city
        renderSlider([]);
        const currentLang = document.documentElement.lang || 'ar';

        fetch('/api/tickets-by-city/' + cityId + '?lang=' + currentLang)
            .then(response => response.json())
            .then(data => {
                hideLoading();
                if (data.success && data.tickets) {
                    currentTicketsData = data.tickets; // Save for resize
                    renderTickets(data.tickets);
                } else {
                    showEmpty();
                }
            })
            .catch(error => {
                console.error('Error fetching tickets:', error);
                hideLoading();
                showEmpty();
            });
    }
    
    // Show loading state
    function showLoading() {
        ticketsGrid.innerHTML = '';
        ticketsLoading.style.display = 'flex';
        ticketsEmpty.style.display = 'none';
    }
    
    // Hide loading state
    function hideLoading() {
        ticketsLoading.style.display = 'none';
    }
    
    // Show empty state
    function showEmpty() {
        ticketsGrid.innerHTML = '';
        ticketsEmpty.style.display = 'flex';
    }

    
    // Render tickets grouped by category
    function renderTickets(tickets) {
        ticketsGrid.innerHTML = '';
        ticketsEmpty.style.display = 'none';
        
        if (tickets.length === 0) {
            showEmpty();
            return;
        }

        // Group tickets by category
        const categories = {};
        
        tickets.forEach(ticket => {
            const catName = ticket.category_name || (window.translations.other_events || 'Other Events');
            
            if (!categories[catName]) {
                categories[catName] = { 
                    tickets: [], 
                    id: ticket.category_id 
                };
            }
            categories[catName].tickets.push(ticket);
        });
        
        const currentLang = document.documentElement.lang || 'en';
        const isMobileScreen = window.innerWidth <= 600;

        // Render each category section
        Object.keys(categories).forEach((catName, index) => {
            const catData = categories[catName];
            const catId = catData.id;
            const catTickets = catData.tickets;
            
            // Build URL
            let catUrl = '#';
            if (catId) {
                catUrl = `/${currentLang}/category/${catId}`;
            }

            // 1. Create Section Wrapper
            const sectionWrapper = document.createElement('div');
            sectionWrapper.className = 'category-section-wrapper';
            
            // 2. Section Header
            const sectionHeader = document.createElement('div');
            sectionHeader.className = 'category-section-header';
            sectionHeader.innerHTML = `
                <a href="${catUrl}" class="category-header-link">
                    <h2 class="category-section-title">
                        ${catName} 
                    </h2>
                    <span class="category-section-arrow">›</span>
                </a>
            `;
            sectionWrapper.appendChild(sectionHeader);

            // 3. Create Grid/Slider Container
            // Only apply special layout for first category IF on mobile
            const useMobileFirstCatLayout = (index === 0 && isMobileScreen);
            
            const categoryGrid = document.createElement('div');
            
            if (useMobileFirstCatLayout) {
                // Mobile View for First Category: Horizontal scroll with columns of 3 items each
                categoryGrid.className = 'category-products-grid first-category-scroll';
                
                // Group tickets into chunks of 3
                const chunkSize = 3;
                const maxVisible = 6; // Show max 2 columns (6 items) initially
                const visibleTickets = catTickets.slice(0, maxVisible);
                const hasMore = catTickets.length > maxVisible;
                
                for (let i = 0; i < visibleTickets.length; i += chunkSize) {
                    const chunk = visibleTickets.slice(i, i + chunkSize);
                    
                    // Create a column for each chunk
                    const column = document.createElement('div');
                    column.className = 'first-category-column';
                    
                    chunk.forEach(function(ticket) {
                        const card = createHorizontalCard(ticket);
                        column.appendChild(card);
                    });
                    
                    categoryGrid.appendChild(column);
                }
                
                sectionWrapper.appendChild(categoryGrid);
                
                // Show More button for mobile
                if (hasMore) {
                    const showMoreBtn = document.createElement('a');
                    showMoreBtn.href = catUrl;
                    showMoreBtn.className = 'section-show-more-btn';
                    showMoreBtn.innerText = currentLang === 'ar' ? 'أظهر المزيد' : 'Show More';
                    sectionWrapper.appendChild(showMoreBtn);
                }
                
            } else {
                // Desktop View OR Other Categories: Standard Grid / Horizontal Scroll
                // We use 'horizontal-scroll-mobile' which handles mobile scrolling
                // On desktop, we need CSS to make this a grid (we added that in CSS block previously, or need to check)
                
                // Note: The user said "display like rest of sections". 
                // The "rest of sections" use createVerticalCard.
                
                categoryGrid.className = 'category-products-grid horizontal-scroll-mobile';
                
                catTickets.forEach(function(ticket) {
                    const card = createVerticalCard(ticket);
                    categoryGrid.appendChild(card);
                });
                
                sectionWrapper.appendChild(categoryGrid);
                
                // Always show "Show More"
                const showMoreBtn = document.createElement('a');
                showMoreBtn.href = catUrl;
                showMoreBtn.className = 'section-show-more-btn';
                showMoreBtn.innerText = currentLang === 'ar' ? 'أظهر المزيد' : 'Show More';
                sectionWrapper.appendChild(showMoreBtn);
            }

            ticketsGrid.appendChild(sectionWrapper);
            
            // Add Circles Section after first category
            if (index === 0) {
                const circlesSection = createCirclesSection();
                if (circlesSection) {
                    ticketsGrid.appendChild(circlesSection);
                }
            }
        });
        
        // Init swipe
        if (typeof initSwipeContainers === 'function') {
            initSwipeContainers();
        }
    }
    
    // Helper: Create Circles Section
    function createCirclesSection() {
        const circlesDataContainer = document.getElementById('circles-data');
        if (!circlesDataContainer) return null;
        
        const circleItems = circlesDataContainer.querySelectorAll('.circle-data-item');
        if (circleItems.length === 0) return null;
        
        const currentLang = document.documentElement.lang || 'ar';
        const sectionTitle = currentLang === 'ar' ? 'الفئات' : 'Categories';
        
        const circlesSection = document.createElement('div');
        circlesSection.className = 'circles-section';
        circlesSection.innerHTML = `
            <div class="circles-section-header">
                <h2 class="circles-section-title">${sectionTitle}</h2>
            </div>
            <div class="circles-scroll-wrapper">
                <div class="circles-container">
                    ${Array.from(circleItems).map(item => {
                        const id = item.getAttribute('data-id');
                        const name = item.getAttribute('data-name');
                        const image = item.getAttribute('data-image');
                        const url = `/${currentLang}/subcity/${id}`;
                        
                        return `
                            <a href="${url}" class="circle-item" data-subcity-id="${id}">
                                <div class="circle-image-wrapper">
                                    <img src="${image}" 
                                         alt="${name}"
                                         onerror="this.src='https://via.placeholder.com/100x100'">
                                </div>
                                <span class="circle-name">${name}</span>
                            </a>
                        `;
                    }).join('')}
                </div>
            </div>
        `;
        
        return circlesSection;
    }
    
    // Helper: Create Horizontal Card (for first category list view)
    function createHorizontalCard(ticket) {
        const currentLang = document.documentElement.lang || 'ar';
        const card = document.createElement('a');
        card.href = ticket.url;
        card.className = 'ticket-card horizontal-card';
        
        const hasDiscount = Math.random() > 0.5;
        const discountPercent = hasDiscount ? Math.floor(Math.random() * 50) + 10 : 0;
        const oldPrice = hasDiscount ? Math.round(parseFloat(ticket.price) * 1.2) : null;
        const rating = (Math.random() * 1.5 + 3.5).toFixed(1);
        const priceFormatted = parseFloat(ticket.price).toLocaleString();
        
        // Translations
        const textSellingFast = currentLang === 'ar' ? 'يُباع سريعًا' : 'Selling Fast';
        const textBestPrice = currentLang === 'ar' ? 'نضمن أفضل الأسعار' : 'Best Price Guarantee';
        const textDiscount = currentLang === 'ar' ? `احصل على خصم ${discountPercent}%` : `Get ${discountPercent}% Off`;

        // Badge Logic
        const badgeType = Math.floor(Math.random() * 3); 
        let badgeHtml = '';
        if (badgeType === 0) {
            badgeHtml = `<span class="ticket-card-selling-fast">${textSellingFast}</span>`;
        } else if (badgeType === 1) {
            badgeHtml = `<span class="ticket-card-guarantee">${textBestPrice}</span>`;
        } else if (hasDiscount) {
            badgeHtml = `<div class="ticket-card-discount">${textDiscount}</div>`;
        }
        
        card.innerHTML = `
            <div class="ticket-card-image-wrapper">
                <img src="${ticket.image}" alt="${ticket.title}" onerror="this.src='https://via.placeholder.com/300x200'">
                <div class="ticket-card-badges">
                    <div class="ticket-card-rating">
                        ${rating}
                    </div>
                </div>
            </div>
            <div class="ticket-card-content">
                <h3 class="ticket-card-title">${ticket.title || (currentLang === 'ar' ? 'فعالية' : 'Event')}</h3>
                <div class="ticket-card-price-row">
                    <span class="ticket-card-price">${window.translations.egp} ${priceFormatted}</span>
                    ${oldPrice ? `<span class="ticket-card-old-price">${window.translations.egp} ${oldPrice.toLocaleString()}</span>` : ''}
                </div>
                ${badgeHtml}
            </div>
        `;
        return card;
    }
    
    // Helper: Create Vertical Card (for other categories carousel)
    function createVerticalCard(ticket) {
        const currentLang = document.documentElement.lang || 'ar';
        const card = document.createElement('a');
        card.href = ticket.url;
        card.className = 'ticket-card';
        
        const hasDiscount = Math.random() > 0.5;
        const discountPercent = hasDiscount ? Math.floor(Math.random() * 50) + 10 : 0;
        const oldPrice = hasDiscount ? Math.round(parseFloat(ticket.price) * 1.2) : null;
        const rating = (Math.random() * 1.5 + 3.5).toFixed(1);
        const isBestSeller = Math.random() > 0.6;
        const priceFormatted = parseFloat(ticket.price).toLocaleString();
        
        const textSave = currentLang === 'ar' ? 'وفر' : 'Save';
        
        card.innerHTML = `
            <div class="ticket-card-image-wrapper">
                <img src="${ticket.image}" alt="${ticket.title}" onerror="this.src='https://via.placeholder.com/300x200'">
                <button class="ticket-card-favorite" onclick="toggleFavorite(this, ${ticket.id}); event.preventDefault();">
                    <svg class="icon-heart" viewBox="0 0 24 24">
                        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                    </svg>
                </button>
                <div class="ticket-card-badges">
                    ${isBestSeller ? `<div class="ticket-card-bestseller">${window.translations.best_seller}</div>` : ''}
                    <div class="ticket-card-rating">
                        <svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                        ${rating}
                    </div>
                </div>
            </div>
            <div class="ticket-card-content">
                <h3 class="ticket-card-title">${ticket.title || (currentLang === 'ar' ? 'فعالية' : 'Event')}</h3>
                <div class="ticket-card-price-row">
                    <span class="ticket-card-price">${priceFormatted} ${window.translations.egp}</span>
                    ${oldPrice ? `<span class="ticket-card-old-price">${oldPrice.toLocaleString()} ${window.translations.egp}</span>` : ''}
                </div>
                ${hasDiscount ? `<div class="ticket-card-discount">${textSave} ${discountPercent}%</div>` : ''}
            </div>
        `;
        return card;
    }
    // Initial Load - Auto select default sub-city if available
    @if(isset($defaultSubCity))
        setTimeout(() => {
            console.log('Auto-selecting default sub-city: {{ $defaultSubCity->id }}');
            fetchTicketsBySubCity({{ $defaultSubCity->id }});
            
            const currentCityName = document.getElementById('currentCityName');
            if (currentCityName) {
                currentCityName.innerText = "{{ $defaultSubCity->translatedName }}";
            }
            
            // Trigger header update if function exists (it's defined in this scope)
            if (typeof updateHeaderCategoriesBySubCity === 'function') {
                updateHeaderCategoriesBySubCity({{ $defaultSubCity->id }}, "{{ $defaultSubCity->translatedName }}");
            }
        }, 100);
    @endif
});
</script>
@endpush