@extends('layouts.app')

@section('title', __('الخريطة التفاعلية'))

@push('styles')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        :root {
            --primary-dark: #002b28;
            --primary-medium: #003d38;
            --primary-light: #004d47;
            --accent-teal: #e57e3a;
            --accent-gold: #e57e3a;
            --text-white: #ffffff;
            --text-dim: #aebdbb;
            --glass-bg: rgba(255, 255, 255, 0.05);
            --border-color: rgba(255, 255, 255, 0.1);
        }

        /* Fix for header changing color on scroll - match home.blade.php style */
        body .main-header.scrolled {
            background: rgba(81, 76, 82, 0.7) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
        }

        /* Essential Body Fix for Fullscreen Map */
        html,
        body {
            min-height: 100%;
            height: 100%;
        }

        body {
            overflow: hidden !important;
            height: 100vh !important;
            background: #4A4C4F !important;
            padding-top: 0 !important;
        }


        .error-toast {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%) translateY(-100px);
            background: #e74c3c;
            color: white;
            padding: 12px 25px;
            border-radius: 10px;
            font-family: 'DIN Next Regular', sans-serif;
            font-size: 14px;
            z-index: 99999;
            transition: transform 0.4s ease;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        }

        .error-toast.show {
            transform: translateX(-50%) translateY(0);
        }

        /* Map Layout */
        .map-wrapper {
            display: flex;
            height: calc(100vh - 70px);
            min-height: calc(100vh - 70px);
            margin-top: 70px;
            transition: all 0.3s ease;
            position: relative;
        }

        .map-sidebar {
            width: 400px;
            background: #4A4C4F;
            backdrop-filter: blur(10px);
            border-left: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: width 0.3s ease, transform 0.3s ease;
            flex-shrink: 0;
            position: relative;
            z-index: 800;
        }

        .map-sidebar.collapsed {
            width: 0;
            border-left: none;
            overflow: hidden;
        }

        .sidebar-header {
            padding: 15px 20px 8px;
            border-bottom: 1px solid var(--border-color);
        }

        .sidebar-title {
            font-size: 22px;
            color: var(--accent-teal);
            margin-bottom: 5px;
        }

        .sidebar-subtitle {
            font-size: 13px;
            color: var(--text-dim);
        }

        .sidebar-tabs {
            display: flex;
            padding: 0 10px;
            border-bottom: 1px solid var(--border-color);
            background: rgba(0, 0, 0, 0.1);
        }

        .tab-btn {
            flex: 1;
            padding: 10px;
            background: transparent;
            border: none;
            color: var(--text-dim);
            font-family: 'DIN Next Regular', sans-serif;
            font-weight: 600;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: 0.3s;
        }

        .tab-btn.active {
            color: var(--accent-teal);
            border-bottom-color: var(--accent-teal);
            background: var(--accent-teal) !important;
        }

        .tab-content {
            display: none;
            flex: 1;
            flex-direction: column;
            overflow: hidden;
        }

        .tab-content.active {
            display: flex;
        }

        .search-container {
            padding: 0;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border-bottom: 0 solid transparent;
        }

        .search-container.show {
            padding: 8px 18px 15px;
            max-height: 80px;
            opacity: 1;
            border-bottom: 1px solid var(--border-color);
        }

        .search-box {
            position: relative;
        }

        .search-input {
            width: 100%;
            padding: 12px 45px 12px 15px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-color);
            border-radius: 25px;
            color: var(--text-white);
            font-family: inherit;
            font-size: 14px;
        }

        .search-input:focus {
            outline: none;
            border-color: var(--accent-teal);
        }

        .search-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-dim);
        }

        .filters-section {
            padding: 10px 20px;
            border-bottom: 1px solid var(--border-color);
            overflow: visible;
        }

        .filter-dropdown-wrapper {
            position: relative;
        }

        .city-filters-container {
            display: inline-flex;
            gap: 8px;
            overflow-x: auto;
            overflow-y: hidden;
            width: 100%;
            padding: 5px 0 10px;
            white-space: nowrap;
            scrollbar-width: none;
            -ms-overflow-style: none;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-x;
            cursor: grab;
        }

        .city-filters-container::-webkit-scrollbar {
            display: none;
        }

        .city-chip {
            flex: 0 0 auto;
            white-space: nowrap;
            padding: 6px 15px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid var(--border-color);
            border-radius: 18px;
            color: var(--text-dim);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            user-select: none;
            min-width: max-content;
        }

        .city-filters-container.grabbing {
            cursor: grabbing;
        }

        .city-chip:hover {
            border-color: var(--accent-teal);
            background: rgba(229, 126, 58, 0.08);
            color: var(--text-white);
        }

        .city-chip.active {
            background: var(--accent-teal);
            color: var(--primary-dark);
            border-color: var(--accent-teal);
            box-shadow: 0 4px 12px rgba(229, 126, 58, 0.3);
        }

        .stations-list,
        .articles-list {
            flex: 1;
            overflow-y: auto;
            padding: 15px;
            touch-action: pan-y;
            -webkit-overflow-scrolling: touch;
        }

        .station-card,
        .article-card {
            background: var(--glass-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 12px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
        }

        .station-card:hover,
        .article-card:hover {
            border-color: var(--accent-teal);
            transform: translateX(-5px);
        }

        .station-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 10px;
        }

        .station-name {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-white);
            margin-bottom: 5px;
        }

        .station-location {
            font-size: 12px;
            color: var(--text-dim);
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .station-status,
        .unified-panel-status {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 10px;
            font-weight: 600;
            color: white;
        }

        .station-status.open,
        .unified-panel-status.open {
            background: #2ecc71;
        }

        .station-status.closed,
        .unified-panel-status.closed {
            background: #e74c3c;
        }

        .action-btn {
            flex: 1;
            padding: 8px;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-white);
            font-family: inherit;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .action-btn:hover {
            background: var(--accent-teal);
            color: var(--primary-dark);
            border-color: var(--accent-teal);
        }

        .station-services-icons {
            display: flex;
            gap: 10px;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .service-icon-group {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            font-size: 16px;
        }

        .service-icon {
            color: #fff;
        }

        .service-type-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: var(--accent-teal);
            color: var(--primary-dark);
            font-size: 9px;
            font-weight: 800;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #4A4C4F;
        }

        .map-container {
            flex: 1;
            position: relative;
            min-height: 0;
        }

        #map {
            width: 100%;
            height: 100%;
            min-height: 100%;
            background: #ddd;
        }

        .leaflet-popup {
            display: none !important;
        }

        .custom-marker {
            width: 0;
            height: 0;
            background: #555759;
            /* Gray Identity */
            border-radius: 50% 50% 50% 1px;
            transform: rotate(-45deg);
            border: 3px solid #555759;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            padding: 6px;
        }

        .custom-marker:hover {
            transform: rotate(-45deg) scale(1.15) translateY(-5px);
            /* background: var(--accent-teal); */
            z-index: 1000 !important;
        }

        .custom-marker.selected {
            background: #e57e3a !important;
            border-color: #e57e3a !important;
            transform: rotate(-45deg) scale(1.3) translateY(-10px);
            z-index: 1001 !important;
            box-shadow: 0 0 25px rgba(229, 126, 58, 0.6);
        }

        .custom-marker .marker-icon {
            transform: rotate(45deg);
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .custom-marker .marker-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .map-controls {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 500;
        }

        .map-control-btn {
            width: 37px;
            height: 37px;
            background: #2F3133 !important;
            backdrop-filter: blur(10px);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            color: var(--text-white);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

        .map-control-btn:hover {
            background: #e57e3a !important;
            color: #fff;
            transform: scale(1.1);
        }

        .map-control-btn svg {
            width: 20px !important;
            height: 20px !important;
        }

        .toggle-sidebar-btn {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            width: 28px;
            height: 70px;
            color: #fff;
            background: #2F3133 !important;
            border: 1px solid var(--border-color);
            border-right: none;
            border-radius: 10px 0 0 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 801;
        }

        .toggle-sidebar-btn.sidebar-open {
            right: 400px;
        }


        html[dir="ltr"] .toggle-sidebar-btn.sidebar-closed {
            left: 0;
            right: auto !important;
            transform: rotate(180deg)
        }

        html[dir="ltr"] .toggle-sidebar-btn.sidebar-open {
            left: 400px;
            right: auto !important;
            transform: rotate(180deg);
        }


        .toggle-sidebar-btn svg {
            width: 18px;
            height: 18px;
            transition: transform 0.3s ease;
        }

        .toggle-sidebar-btn.sidebar-open svg {
            transform: rotate(180deg);
        }

        .toggle-sidebar-btn:hover {
            background: #e57e3a !important;
            color: #fff;
        }

        .unified-panel {
            position: absolute;
            top: 20px;
            right: 20px;
            left: auto;
            width: 400px;
            max-height: 460px;
            /* Reduced overall height */
            background: rgba(47, 49, 51, 0.95);
            backdrop-filter: blur(15px);
            border: 1px solid var(--border-color);
            border-radius: 18px;
            overflow: hidden;
            z-index: 1000;
            box-shadow: 0 10px 50px rgba(0, 0, 0, 0.6);
            transform: translateY(-20px);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: transform 0.4s, opacity 0.3s, right 0.3s ease, left 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .unified-panel.sidebar-is-open {
            right: 420px;
        }

        .unified-panel.active {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .unified-panel-header {
            padding: 10px 13px;
            /* Reduced padding */
            background: linear-gradient(135deg, rgba(229, 126, 58, 0.15), rgba(0, 0, 0, 0.3));
            /* border-bottom: 1px solid var(--border-color); */
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .unified-panel-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--accent-teal);
            margin-bottom: 2px;
        }

        .unified-shops-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            /* Back to two columns */
            gap: 12px;
            /* padding: 12px 0; */
            width: 100%;
        }

        .shop-category-box {
            /* background: rgba(255, 255, 255, 0.03);
                                                                                                                        border: 1px solid rgba(255, 255, 255, 0.05); */
            border-radius: 10px;
            padding: 10px;
        }

        .shop-category-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 700;
            color: var(--accent-gold);
            margin-bottom: 8px;
            padding-bottom: 6px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .shop-items-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .shop-item-name {
            font-size: 12px;
            color: var(--text-dim);
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 6px;
            /* background: rgba(255, 255, 255, 0.02); */
            border-radius: 4px;
        }

        .shop-item-name::before {
            content: '•';
            color: var(--accent-teal);
            font-weight: bold;
        }

        .close-unified-btn {
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 50%;
            color: var(--text-dim);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }

        .unified-panel-tabs {
            display: flex;
            border-bottom: 1px solid var(--border-color);
            background: rgba(0, 0, 0, 0.15);
        }

        .unified-tab-btn {
            flex: 1;
            padding: 12px 10px;
            background: transparent;
            border: none;
            color: var(--text-dim);
            font-family: 'DIN Next Regular', sans-serif;
            font-weight: 600;
            font-size: 13px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .unified-tab-btn.active {
            color: var(--accent-teal);
            border-bottom-color: var(--accent-teal);
            background: rgba(229, 126, 58, 0.05);
        }

        .unified-tab-content {
            display: none;
            flex: 1;
            overflow-y: auto;
        }

        .unified-tab-content.active {
            display: block;
        }

        .info-section {
            padding: 12px 18px;
            /* Reduced horizontal padding */
        }

        .info-services-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 15px;
        }

        .info-service-chip {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--text-white);
        }

        .info-overview-text {
            color: #fff;
            line-height: 1.7;
            font-size: 13px;
            margin-bottom: 16px;
            white-space: pre-line;
        }

        .info-detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            font-size: 13px;
            color: #fff;
        }

        .unified-panel-location,
        .unified-panel-status.open {
            color: #fff;
            margin-bottom: 3px;
        }

        .gallery-grid-inline {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            padding: 15px;
        }

        .gallery-thumb {
            border-radius: 10px;
            overflow: hidden;
            aspect-ratio: 16/10;
            cursor: pointer;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .gallery-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .unified-panel-actions {
            padding: 12px 18px;
            border-top: 1px solid var(--border-color);
            display: flex;
            gap: 10px;
            background: rgba(0, 0, 0, 0.2);
        }

        .unified-action-btn {
            flex: 1;
            padding: 5px;
            border-radius: 10px;
            font-family: 'DIN Next Regular', sans-serif;
            font-weight: 700;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            border: none;
        }

        .unified-action-btn.primary {
            background: var(--accent-teal) !important;
            color: var(--primary-dark);
        }

        .unified-action-btn.secondary {
            background: rgb(255 255 255 / 29%) !important;
            color: var(--text-white);
            border: 1px solid rgba(255, 255, 255, 0.15);
        }

        .fullscreen-viewer {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.95);
            z-index: 99999;
            display: none;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            cursor: pointer;
        }

        .fullscreen-viewer.active {
            display: flex;
        }

        .fullscreen-viewer img {
            max-width: 90%;
            max-height: 80vh;
            border-radius: 12px;
        }

        @media (max-width: 768px) {
            .map-wrapper {
                height: calc(100vh - 60px);
                margin-top: 60px;
                flex-direction: column-reverse;
            }

            .map-sidebar {
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                top: auto;
                width: 100% !important;
                height: 65vh;
                z-index: 900;
                border: none;
                border-top: 2px solid var(--accent-teal);
                border-radius: 20px 20px 0 0;
                transform: translateY(100%);
                transition: transform 0.35s ease;
            }

            .map-sidebar.active {
                transform: translateY(0);
            }

            .toggle-sidebar-btn {
                position: fixed !important;
                top: auto !important;
                bottom: 0 !important;
                left: 50% !important;
                right: auto !important;
                transform: translateX(-50%) !important;
                width: 60px !important;
                height: 36px !important;
                border-radius: 18px 18px 0 0 !important;
                z-index: 1002 !important;
            }

            .toggle-sidebar-btn.sidebar-open {
                top: auto !important;
                bottom: 65vh !important;
                left: 50% !important;
                right: auto !important;
                transform: translateX(-50%) !important;
            }

            .toggle-sidebar-btn.sidebar-closed {
                top: auto !important;
                bottom: 0 !important;
                left: 50% !important;
                right: auto !important;
                transform: translateX(-50%) !important;
            }
        }

        .unified-panel {
            position: fixed !important;
            top: 54% !important;
            bottom: auto !important;
            left: 50% !important;
            right: auto !important;
            transform: translate(-50%, -50%) scale(0);
            width: min(calc(100vw - 24px), 420px);
            max-width: 420px;
            max-height: 80vh;
            margin: 0 auto;
            border-radius: 20px !important;
            overflow: hidden;
            z-index: 1002 !important;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: transform 0.4s ease, opacity 0.3s ease, visibility 0.3s ease;
        }

        .unified-panel.active {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .unified-panel .unified-tab-content {
            max-height: calc(90vh - 170px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .unified-panel.sidebar-is-open {
            top: 10% !important;
            bottom: auto !important;
            transform: translate(-50%, 0) scale(1) !important;
            max-height: calc(45vh);
        }
        }

        .article-title {
            font-size: 1.3rem;
            margin-bottom: 1rem;

        }

        #unifiedPanel {
            width: 400px;
            /* أو العرض الذي تراه مناسباً */
            max-width: 90vw;
            height: 550px;
            /* توحيد الارتفاع */
            display: flex;
            flex-direction: column;
        }

        .unified-tab-content {
            flex: 1;
            overflow-y: auto;
            /* السماح بالتمرير داخل التبويب فقط */
            display: none;
            padding: 0 15px;
        }

        .unified-tab-content.active {
            display: block;
        }

        .info-title {
            color: white;
            font-size: 16px;
            margin-top: 16px;
        }

        .info-more-link {
            color: rgb(229 126 58);
            text-decoration: none;
            font-size: 12px;
            font-weight: bold;
        }

        .unified-panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .unified-panel-meta {
            display: flex;
            padding: 0 11px 5px;
            border-bottom: 1px solid #474442;
            align-items: center;
            gap: 10px;
            width: 100%;
            /* margin-top: 8px; */
            justify-content: space-between;
            background: linear-gradient(135deg, rgba(229, 126, 58, 0.15), rgba(0, 0, 0, 0.3));
        }

        .unified-panel-location {
            margin: 0;
        }
    </style>
@endpush

@section('content')

    <div class="error-toast" id="errorToast"></div>

    <button class="toggle-sidebar-btn sidebar-open" id="toggleSidebarBtn" onclick="toggleMapSidebar()">
        <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
        </svg>
    </button>

    <div class="map-wrapper" id="mapWrapper">
        <div class="map-sidebar" id="mapSidebar">
            <div class="sidebar-header">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;">
                    <h2 class="sidebar-title" style="margin-bottom: 0;">{{ __('map.stations_title') }}</h2>
                    <button class="map-control-btn" onclick="toggleMapSearch()" title="بحث"
                        style="width: 32px; height: 32px; border-radius: 8px;">
                        <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
                            <circle cx="11" cy="11" r="8"></circle>
                            <line x1="21" y1="21" x2="16.65" y2="16.65" stroke="currentColor" stroke-width="2"></line>
                        </svg>
                    </button>
                </div>
                <p class="sidebar-subtitle">
                    {{ __('map.discover') }}
                    <span id="stationsCount">0</span>
                    {{ __('map.station_in') }}
                    <span id="currentCityName">{{ __('map.default_city') }}</span>
                </p>
            </div>
            {{-- <div class="sidebar-tabs">
                <button class="tab-btn active" onclick="switchMapSideTab('stations')">
                    {{ __('map.stations') }}
                </button>

                <button class="tab-btn" onclick="switchMapSideTab('articles')">
                    {{ __('map.articles') }}
                </button>
            </div> --}}
            <div id="stations-tab" class="tab-content active">
                <div class="search-container">
                    <div class="search-box">
                        <input type="text" class="search-input" placeholder="{{ __('map.search_placeholder') }}"
                            id="searchInput" oninput="debounceMapSearch(this.value)">
                        <svg class="search-icon" viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
                            <circle cx="11" cy="11" r="8"></circle>
                            <line x1="21" y1="21" x2="16.65" y2="16.65" stroke="currentColor" stroke-width="2"></line>
                        </svg>
                    </div>
                </div>
                <div class="filters-section">
                    <div class="filter-dropdown-wrapper">
                        <div class="city-filters-container" id="cityFiltersContainer">
                            <div class="city-chip active" onclick="mapFilterByCity('all', this)">🏙️
                                {{ __('map.all_cities') }}
                            </div>
                            <!-- City chips will be injected here -->
                        </div>
                    </div>
                </div>
                <div class="stations-list" id="stationsList">
                    <div class="empty-state">
                        <p>{{ __('map.loading_stations') }}</p>
                    </div>
                </div>


            </div>
            {{-- <div id="articles-tab" class="tab-content">
                <div class="articles-list" id="articlesList">
                    <!-- يتم تعبئة المقالات هنا ديناميكياً -->
                </div>
            </div> --}}
        </div>

        <div class="map-container">
            <div id="map"></div>
            <div class="map-controls">
                <button class="map-control-btn" onclick="mapZoomIn()" title="تكبير"><svg viewBox="0 0 24 24"
                        fill="currentColor">
                        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
                    </svg></button>
                <button class="map-control-btn" onclick="mapZoomOut()" title="تصغير"><svg viewBox="0 0 24 24"
                        fill="currentColor">
                        <path d="M19 13H5v-2h14v2z" />
                    </svg></button>
                <button class="map-control-btn" onclick="mapReset()" title="إعادة ضبط"><svg viewBox="0 0 24 24"
                        fill="currentColor">
                        <path
                            d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" />
                    </svg></button>
                <button class="map-control-btn" onclick="mapToggleFullscreen()" title="ملء الشاشة"><svg viewBox="0 0 24 24"
                        fill="currentColor">
                        <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
                    </svg></button>
            </div>
        </div>
    </div>

    <div class="unified-panel" id="unifiedPanel">
        <div class="unified-panel-header">

            <div class="unified-panel-info">
                <h3 class="unified-panel-title" id="unifiedTitle">محطة درب</h3>
            </div>

            <button class="close-unified-btn" onclick="closeMapUnifiedPanel()">✕</button>
        </div>

        <div class="unified-panel-meta">
            <p class="unified-panel-location" id="unifiedLocation">📍 الموقع</p>
            <span class="unified-panel-status open" id="unifiedStatus">مفتوح</span>
        </div>
        <div class="unified-panel-tabs">

            <button class="unified-tab-btn active" onclick="switchUnifiedMapTab('info', this)">
                <img width="16" src="{{ asset('images/info.png') }}" class="tab-icon" alt="">
                {{ __('map.tabs.info') }}
            </button>

            <button class="unified-tab-btn" onclick="switchUnifiedMapTab('gallery', this)">
                <img width="16" src="{{ asset('images/gallery.png') }}" class="tab-icon" alt="">
                {{ __('map.tabs.gallery') }}
            </button>

            <button class="unified-tab-btn" onclick="switchUnifiedMapTab('shops', this)">
                <img width="16" src="{{ asset('images/sev.png') }}" class="tab-icon" alt="">
                {{ __('map.services') }}
            </button>

        </div>
        <div class="unified-tab-content active" id="unified-info-tab">
            <div class="info-section">
                <div class="info-card">
                    <div class="info-image" id="unifiedImage"></div>

                    <h3 class="info-title" id="unifiedInfoTitle"></h3>

                    <div class="info-overview-text" id="unifiedOverview"></div>

                    <a href="#" class="info-more-link" id="unifiedMoreLink">
                        {{ __('map.details') }}
                    </a>
                </div>
            </div>
        </div>
        <div class="unified-tab-content" id="unified-shops-tab">
            <div class="info-section">
                <div class="info-services-grid" id="unifiedServices"></div>
            </div>
        </div>
        <div class="unified-tab-content" id="unified-gallery-tab">
            <div class="gallery-section">
                <div class="gallery-grid-inline" id="unifiedGallery"></div>
            </div>
        </div>
        <div class="unified-panel-actions">
            <button class="unified-action-btn primary" onclick="getMapDirections()">
                {{ __('map.directions') }}
            </button>

            <button class="unified-action-btn primary" onclick="shareMapStation()">
                {{ __('map.share') }}
            </button>

            <button class="unified-action-btn primary" onclick="window.open('{{ route('components/rental') }}', '_blank')">
                {{ __('map.your_interest') }}
            </button>
        </div>
    </div>

    <div class="fullscreen-viewer" id="fullscreenViewer" onclick="closeMapFullscreenViewer()">
        <button class="close-viewer" onclick="event.stopPropagation(); closeMapFullscreenViewer()">✕</button>
        <img id="fullscreenImage" src="" alt="">
        <p class="viewer-caption" id="fullscreenCaption"></p>
    </div>
@endsection

@push('scripts')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
        const API_BASE = 'https://darbcp.sys.newtouch.sa/api/pages';
        const LANG = document.documentElement.lang || 'ar';
        const SERVICE_TYPE_MAP = {
            restaurant: {
                icon: '🍔',
                label: 'مطعم'
            },
            cafe: {
                icon: '☕',
                label: 'كافيه'
            },
            market: {
                icon: '🛒',
                label: 'ماركت'
            },
            car_service: {
                icon: '🔧',
                label: 'خدمات سيارات'
            },
            other: {
                icon: '',
                label: 'أخرى'
            }
        };

        let leafletMap, mapMarkers = [],
            currentMapCityFilter = 'all',
            mapActiveStation = null;
        let mapStationsData = [],
            mapCitiesData = [],
            mapSearchTimeout = null;
        let mapSidebarOpen = window.innerWidth >= 768;

        function getLocalizedName(field) {
            if (!field) return '';
            const currentLang = (document.documentElement.lang || 'ar').split('-')[0].toLowerCase();
            
            if (typeof field === 'string') {
                if (field.trim().startsWith('{') || field.trim().startsWith('[')) {
                    try {
                        const parsed = JSON.parse(field);
                        if (typeof parsed === 'object' && parsed !== null) {
                            return parsed[LANG] || parsed[currentLang] || parsed['ar'] || parsed['en'] || '';
                        }
                    } catch (e) {
                        return field;
                    }
                }
                return field;
            }
            
            if (typeof field === 'object' && field !== null) {
                return field[LANG] || field[currentLang] || field['ar'] || field['en'] || '';
            }
            
            return String(field);
        }

        /**
         * extracts coordinates from a Google Maps URL
         */
        function extractCoordsFromUrl(url) {
            if (!url) return null;
            try {
                // Try to find coordinates in various formats
                // 1. Specific pin location in Google Maps (!3d...!4d...)
                const pinMatch = url.match(/!3d(-?\d+(?:\.\d+)?)\s*!4d(-?\d+(?:\.\d+)?)/);
                if (pinMatch) {
                    return { lat: parseFloat(pinMatch[1]), lng: parseFloat(pinMatch[2]) };
                }

                // 2. Query or Search parameter (q=lat,lng or ll=lat,lng)
                const queryMatch = url.match(/[?&](?:q|query|ll|loc|location)=(-?\d+(?:\.\d+)?)\s*,\s*(-?\d+(?:\.\d+)?)/);
                if (queryMatch) {
                    return { lat: parseFloat(queryMatch[1]), lng: parseFloat(queryMatch[2]) };
                }

                // 3. Viewport/Center coordinate (@lat,lng)
                const centerMatch = url.match(/@(-?\d+(?:\.\d+)?)\s*,\s*(-?\d+(?:\.\d+)?)/);
                if (centerMatch) {
                    return { lat: parseFloat(centerMatch[1]), lng: parseFloat(centerMatch[2]) };
                }

                // 4. Any /lat,lng/ in path
                const pathMatch = url.match(/\/(-?\d+(?:\.\d+)?)\s*,\s*(-?\d+(?:\.\d+)?)/);
                if (pathMatch) {
                    return { lat: parseFloat(pathMatch[1]), lng: parseFloat(pathMatch[2]) };
                }
            } catch (e) {
                console.warn('⚠️ Error parsing coordinates from URL:', e);
            }
            return null;
        }

        function showError(message) {
            console.warn('⚠️ Map Error:', message);
            const toast = document.getElementById('errorToast');
            if (toast) {
                toast.textContent = message;
                toast.classList.add('show');
                setTimeout(() => toast.classList.remove('show'), 4000);
            }
        }


        function getServiceTypeEmoji(type, fallbackIcon = null) {
            if (fallbackIcon) {
                if (fallbackIcon.includes('fa-') || fallbackIcon.includes('bi-')) {
                    return `<i class="${fallbackIcon}"></i>`;
                }
                return fallbackIcon;
            }
            return SERVICE_TYPE_MAP[type]?.icon || '';
        }

        function getServiceTypeLabel(type, fallbackLabel = null) {
            return fallbackLabel || SERVICE_TYPE_MAP[type]?.label || 'أخرى';
        }

        function getMapShopDisplayIcon(shop) {
            // 1. Specific shop icon (URL)
            if (shop.icon && typeof shop.icon === 'string' && (shop.icon.startsWith('http') || shop.icon.startsWith('/'))) {
                return `<img src="${shop.icon}" width="16" height="16" style="border-radius:3px;" alt="${getLocalizedName(shop.name)}">`;
            }

            // 2. Type icon from API or fallback
            return getServiceTypeEmoji(shop.type, shop.type_icon);
        }

        function normalizeMapStatus(status) {
            return (status === '1' || status === 1 || status === 'open' || status === true) ? 'open' : 'closed';
        }

        function transformMapStationData(city, station) {
            const cityName = getLocalizedName(city.name);
            let rawShops = station.shops_data || station.shops || station.services || station.features || [];
            if (typeof rawShops === 'string' && rawShops.trim()) {
                try {
                    rawShops = JSON.parse(rawShops);
                } catch (e) {
                    rawShops = [];
                }
            }
            if (!Array.isArray(rawShops)) rawShops = [];

            const servicesGrouped = {};
            rawShops.forEach(shop => {
                const type = shop.type || 'other';
                if (!servicesGrouped[type]) {
                    // Try to get localized label from option data if the main label is not correct
                    const optData = shop[type + '_option_data'] || shop.type_option_data || {};
                    const localizedLabel = optData['label_' + LANG] || shop[type + '_label'] || shop.type_label;

                    servicesGrouped[type] = {
                        type: type,
                        icon: getMapShopDisplayIcon(shop),
                        label: getServiceTypeLabel(type, localizedLabel),
                        shops: []
                    };
                }
                servicesGrouped[type].shops.push({
                    name: getLocalizedName(shop.name),
                    icon: shop.icon || ''
                });
            });

            let images = [];
            if (station.station_images) {
                let imgData = station.station_images;
                if (typeof imgData === 'string' && imgData.trim()) {
                    if (imgData.startsWith('[') || imgData.startsWith('{')) {
                        try {
                            imgData = JSON.parse(imgData);
                        } catch (e) {
                            imgData = [];
                        }
                    } else {
                        imgData = imgData.split(',').map(s => s.trim());
                    }
                }

                if (Array.isArray(imgData)) {
                    images = imgData.map((img, i) => {
                        let url = '';
                        let thumb = '';
                        let caption = `صورة ${i + 1}`;

                        if (typeof img === 'string') {
                            url = thumb = img;
                        } else if (img && typeof img === 'object') {
                            url = img.url || img.path || img.link || '';
                            thumb = img.thumbnail || img.thumb || img.small || url;
                            caption = img.caption || img.title || caption;
                        }

                        return {
                            url,
                            thumb,
                            caption
                        };
                    }).filter(item => item.url); // Only include items with a valid URL
                }
            }

            const locationUrl = station.location_url || '';
            let lat = 0;
            let lng = 0;

            // Priority 1: Extract from URL (more likely to be correct/updated if provided)
            if (locationUrl) {
                const extracted = extractCoordsFromUrl(locationUrl);
                if (extracted) {
                    lat = extracted.lat;
                    lng = extracted.lng;
                    console.log(`📍 Using coordinates from URL for ${station.name || 'station'}: ${lat}, ${lng}`);
                }
            }

            // Priority 2: Fallback to direct fields if URL didn't work or was missing
            if (!lat || !lng) {
                lat = parseFloat(station.latitude) || 0;
                lng = parseFloat(station.longitude) || 0;
                if (lat && lng) {
                    console.log(`📍 Using DB coordinates for ${station.name || 'station'}: ${lat}, ${lng}`);
                }
            }

            return {
                id: station.id,
                name: getLocalizedName(station.name || station.title) || `محطة درب - ${cityName}`,
                code: station.code || '',
                city: cityName,
                cityId: city.id,
                address: station.street || '',
                lat: lat,
                lng: lng,
                locationUrl: locationUrl,
                status: normalizeMapStatus(station.status),
                phone: station.phone || '',
                description: getLocalizedName(station.description || station.about || station.summary || station.overview ||
                    station.note || ''),
                services: servicesGrouped,
                images: images
            };
        }

        function selectMapStation(stationId) {
            const station = mapStationsData.find(s => s.id == stationId);
            if (!station) return;

            // 1. تمييز الدبوس المختار بصرياً على الخريطة
            mapMarkers.forEach(marker => {
                const markerEl = marker.getElement()?.querySelector('.custom-marker');
                if (markerEl) {
                    if (marker.stationId == stationId) {
                        markerEl.classList.add('selected');
                        marker.setZIndexOffset(1000);
                    } else {
                        markerEl.classList.remove('selected');
                        marker.setZIndexOffset(0);
                    }
                }
            });

            // 2. طباعة البيانات في الـ Console للتأكد
            console.log(`%c 📍 بيانات المحطة: ${station.name}`, "color: #e57e3a; font-weight: bold; font-size: 12px;");
            console.log(`🗺️ الإحداثيات المستخدمة: ${station.lat}, ${station.lng}`);
            if (station.locationUrl) {
                console.log(`🔗 رابط الموقع: ${station.locationUrl}`);
            }

            // 3. تحديث الحالة وفتح المودل (اللوحة الجانبية)
            mapActiveStation = station;
            showUnifiedMapPanel(station);

            // 4. الزوم على الموقع
            if (station.lat && station.lng && leafletMap) {
                leafletMap.flyTo([station.lat, station.lng], 15, {
                    duration: 1.5,
                    easeLinearity: 0.25
                });
            }

            // 5. إغلاق sidebar دائماً عند فتح unified-panel لإظهار الخريطة
            if (mapSidebarOpen) toggleMapSidebar();
        }

        async function drbFetchStationsFromAPI() {
            try {
                const CACHE_KEY = `drb_map_data_cache_v9_${LANG}`;
                const CACHE_TTL = 3600000;

                // التحقق مما إذا كان المستخدم قد قام بعمل Refresh للصفحة (مثل Ctrl+Shift+R)
                const navigationType = performance.getEntriesByType("navigation")[0]?.type;
                if (navigationType === 'reload') {
                    console.log('🔄 Reload detected, clearing map cache...');
                    localStorage.removeItem(CACHE_KEY);
                }

                const cached = localStorage.getItem(CACHE_KEY);
                if (cached) {
                    try {
                        const {
                            timestamp,
                            data,
                            cities
                        } = JSON.parse(cached);
                        if (Date.now() - timestamp < CACHE_TTL && Array.isArray(data) && data.length > 0) {
                            console.log('📦 Using cached map data');
                            mapStationsData = data;
                            mapCitiesData = cities;
                            return true;
                        }
                    } catch (e) {
                        console.warn('⚠️ Cache parsing failed');
                        localStorage.removeItem(CACHE_KEY);
                    }
                }

                console.log('🌐 Fetching fresh map data...');
                const firstPageUrl = `${API_BASE}/interactive-map/cities?include=stations.shops&page=1&lang=${LANG}`;
                const firstRes = await fetch(firstPageUrl);
                const firstResult = await firstRes.json();
                let allCitiesFromApi = firstResult.data || [];
                const lastPageCount = firstResult.meta?.last_page || 1;

                if (lastPageCount > 1) {
                    const promises = [];
                    for (let p = 2; p <= lastPageCount; p++) {
                        promises.push(fetch(
                            `${API_BASE}/interactive-map/cities?include=stations.shops&page=${p}&lang=${LANG}`)
                            .then(r => r.json()));
                    }
                    const resultsFromAllPages = await Promise.all(promises);
                    resultsFromAllPages.forEach(res => {
                        allCitiesFromApi = allCitiesFromApi.concat(res.data || []);
                    });
                }

                mapStationsData = [];
                mapCitiesData = [];
                allCitiesFromApi.forEach(city => {
                    const cityName = getLocalizedName(city.name);
                    let cityStations = city.stations_data || city.stations || city.items || [];
                    if (typeof cityStations === 'string' && cityStations.trim()) {
                        try {
                            cityStations = JSON.parse(cityStations);
                        } catch (e) {
                            cityStations = [];
                        }
                    }
                    if (Array.isArray(cityStations) && cityStations.length > 0) {
                        mapCitiesData.push({
                            id: city.id,
                            name: cityName,
                            stationsCount: cityStations.length
                        });
                        cityStations.forEach(station => {
                            try {
                                if (station && typeof station === 'object') {
                                    mapStationsData.push(transformMapStationData(city, station));
                                }
                            } catch (e) {
                                console.error('❌ Station Transform Error:', e, station);
                            }
                        });
                    }
                });

                try {
                    localStorage.setItem(CACHE_KEY, JSON.stringify({
                        timestamp: Date.now(),
                        data: mapStationsData,
                        cities: mapCitiesData
                    }));
                } catch (e) {
                    console.warn('⚠️ LocalStorage full, skipping cache');
                }
                return true;
            } catch (error) {
                console.error('❌ Error drbFetchStationsFromAPI:', error);
                showError('تعذر تحميل البيانات');
                return false;
            }
        }

        function buildMapCityFilters() {
            const container = document.getElementById('cityFiltersContainer');
            if (!container) return;
            container.innerHTML =
                `<div class="city-chip active" onclick="mapFilterByCity('all', this)">{{ __('map.all_cities') }}  (${mapStationsData.length})</div>`;
            mapCitiesData.forEach(city => {
                const chip = document.createElement('div');
                chip.className = 'city-chip';
                chip.textContent = `${city.name} (${city.stationsCount})`;
                chip.onclick = () => mapFilterByCity(city.id, chip);
                container.appendChild(chip);
            });
        }

        function toggleMapSearch() {
            const container = document.querySelector('.search-container');
            if (container) {
                container.classList.toggle('show');
                if (container.classList.contains('show')) {
                    setTimeout(() => document.getElementById('searchInput').focus(), 400);
                }
            }
        }

        function getMapLanguage() {
            if (!LANG) return 'ar';
            if (LANG.toLowerCase().startsWith('en')) return 'en';
            return 'ar';
        }

        function refreshLeafletMap(delay = 0) {
            if (!leafletMap) return;
            const run = () => {
                leafletMap.invalidateSize(true);
                const center = leafletMap.getCenter();
                if (center) leafletMap.setView(center);
            };
            if (delay > 0) {
                setTimeout(() => requestAnimationFrame(run), delay);
                setTimeout(run, delay + 150);
                setTimeout(run, delay + 350);
            } else {
                requestAnimationFrame(run);
                setTimeout(run, 150);
                setTimeout(run, 300);
            }
        }

        function positionUnifiedPanel(station) {
            const panel = document.getElementById('unifiedPanel');
            const mapEl = document.getElementById('map');
            if (!panel || !mapEl || !leafletMap || window.innerWidth <= 768) return;

            const point = leafletMap.latLngToContainerPoint([station.lat, station.lng]);
            const mapWidth = mapEl.clientWidth;
            const sideMargin = 20;
            const panelWidth = panel.offsetWidth || 400;

            if (point.x > mapWidth - panelWidth - sideMargin - 20) {
                panel.style.left = `${sideMargin}px`;
                panel.style.right = 'auto';
            } else {
                panel.style.left = 'auto';
                panel.style.right = `${sideMargin}px`;
            }
        }

        function initializeLeafletMap() {
            leafletMap = L.map('map', {
                zoomControl: false,
                attributionControl: true
            }).setView([24.7136, 44.0], 6);
            const tileLang = getMapLanguage();
            L.tileLayer(`https://mt1.google.com/vt/lyrs=m&hl=${tileLang}&x={x}&y={y}&z={z}`, {
                attribution: '&copy; Google Maps',
                maxZoom: 20
            }).addTo(leafletMap);

            refreshLeafletMap(300);
        }

        function addMapMarkers() {
            mapMarkers.forEach(m => leafletMap.removeLayer(m));
            mapMarkers = [];
            mapStationsData.forEach(station => {
                if (station.lat && station.lng) {
                    const icon = L.divIcon({
                        className: 'custom-marker-container',
                        html: `<div class="custom-marker"><span class="marker-icon"><img src="https://darb.newtouch.dev/images/map-pin.png" alt="Marker" style="width:45px;height:50px;display:block;"></span></div>`,
                        iconSize: [44, 44],
                        iconAnchor: [22, 44]
                    });
                    const marker = L.marker([station.lat, station.lng], {
                        icon
                    }).addTo(leafletMap);

                    marker.on('click', () => selectMapStation(station.id));
                    marker.stationId = station.id;
                    mapMarkers.push(marker);
                }
            });
        }

        function renderMapStationsList(cityFilter = 'all', searchQuery = '') {
            const list = document.getElementById('stationsList');
            if (!list) return;
            let filtered = [...mapStationsData];
            if (cityFilter !== 'all') filtered = filtered.filter(s => s.cityId == cityFilter);
            if (searchQuery.length >= 2) {
                const q = searchQuery.toLowerCase();
                filtered = filtered.filter(s => s.name.toLowerCase().includes(q) || s.city.toLowerCase().includes(q));
            }
            list.innerHTML = filtered.map(s => renderMapStationCard(s)).join('');
            const countEl = document.getElementById('stationsCount');
            if (countEl) countEl.textContent = filtered.length;
        }

        function renderMapStationCard(station) {
            const categories = Object.values(station.services || {});
            const servicesHtml = categories.length > 0 ? `
                                                                                                                            <div class="station-services-icons">
                                                                                                                                ${categories.map(cat => `
                                                                                                                                        <div class="service-icon-group" title="${cat.label || ''}">
                                                                                                                                            <span class="service-icon">${cat.icon || ''}</span>
                                                                                                                                            <span class="service-type-badge">${(cat.shops || []).length}</span>
                                                                                                                                        </div>
                                                                                                                                    `).join('')}
                                                                                                                            </div>` : '';

            return `
                                                                                                                            <div class="station-card" onclick="selectMapStation('${station.id}')">
                                                                                                                                <div class="station-card-header">
                                                                                                                                    <div>
                                                                                                                                        <h3 class="station-name">(${station.code}) ${station.name} </h3>
                                                                                                                                        <p class="station-location">📍 ${station.city}</p>
                                                                                                                                    </div>
                                                                                                                                    <div class="station-status ${station.status}">${station.status === 'open' ? '{{ __('map.open') }}' : '{{ __('map.closed') }}'}</div>
                                                                                                                                </div>
                                                                                                                                ${servicesHtml}
                                                                                                                            </div>`;
        }

        function showUnifiedMapPanel(station) {
            console.log("station", station);

            const titleEl = document.getElementById('unifiedTitle');
            const locEl = document.getElementById('unifiedLocation');
            const statusEl = document.getElementById('unifiedStatus');
            const panel = document.getElementById('unifiedPanel');
            const galleryEl = document.getElementById('unifiedGallery');

            // Clear old content first
            if (galleryEl) galleryEl.innerHTML = '';

            // البحث عن هذا السطر وتعديله
            if (titleEl) {
                // عرض الكود بجانب الاسم مع تنسيق خفيف
                titleEl.innerHTML = `(${station.code}) ${station.name}  `;
            }
            if (locEl) locEl.textContent = '📍 ' + (station.city || station.address);
            if (statusEl) statusEl.className = 'unified-panel-status ' + station.status;
            if (statusEl) statusEl.textContent = station.status === 'open' ? '{{ __('map.open') }}' :
                '{{ __('map.closed') }}';
            if (panel) {
                panel.classList.add('active');
                panel.classList.toggle('sidebar-is-open', mapSidebarOpen);
            }
            switchUnifiedMapTab('info');

            // إغلاق sidebar عند فتح unified-panel
            if (mapSidebarOpen) {
                mapSidebarOpen = false;
                applyMapSidebarState();
            }

            positionUnifiedPanel(station);
            renderMapUnifiedInfo(station);

            // If gallery tab is active, refresh it too
            const gTab = document.getElementById('unified-gallery-tab');
            if (gTab && gTab.classList.contains('active')) {
                renderMapGallery(station);
            }
        }

        function renderMapUnifiedInfo(station) {
            const activeStation = station || mapActiveStation;
            console.log('ff', activeStation);
            if (!activeStation) return;


            try {

                const imageEl = document.getElementById('unifiedImage');
                const titleEl = document.getElementById('unifiedInfoTitle');
                const overviewEl = document.getElementById('unifiedOverview');
                const linkEl = document.getElementById('unifiedMoreLink');

                // ======================
                // IMAGE
                // ======================
                if (imageEl) {
                    let imgUrl = '/images/default-station.jpg';

                    if (activeStation.images?.length > 0) {
                        imgUrl =
                            activeStation.images[0]?.thumb ||
                            activeStation.images[0]?.url ||
                            imgUrl;
                    }

                    imageEl.innerHTML = `
                                                                                    <img src="${imgUrl}" 
                                                                                         style="width:100%;height:180px;object-fit:cover;border-radius:10px;"
                                                                                         onerror="this.src='/images/default-station.jpg'">
                                                                                `;
                }

                // ======================
                // TITLE (IMPORTANT FIX)
                // ======================
                if (titleEl) {
                    const title = activeStation.name || '  ';
                    titleEl.textContent = title;
                }

                // ======================
                // OVERVIEW
                // ======================
                if (overviewEl) {
                    overviewEl.textContent = (activeStation.description || '').trim() || ' ';
                }

                // ======================
                // LINK
                // ======================
                if (linkEl) {
                    linkEl.href = getStationDetailsUrl(activeStation.id);
                }

                // ======================
                // SERVICES (لا تلمسه)
                // ======================
                const servicesContainer = document.getElementById('unifiedServices');
                if (servicesContainer && activeStation.services) {
                    const categories = Object.values(activeStation.services || []);

                    if (categories.length === 0) {
                        servicesContainer.innerHTML =
                            '<p style="text-align:center;color:#999">لا توجد خدمات مسجلة</p>';
                    } else {
                        servicesContainer.innerHTML = `
                                                                                        <div class="unified-shops-grid">
                                                                                            ${categories.map(cat => `
                                                                                                    <div class="shop-category-box">
                                                                                                        <div class="shop-category-header">
                                                                                                            <span>${cat.icon || ''}</span>
                                                                                                            <span>${cat.label || ''}</span>
                                                                                                        </div>
                                                                                                        <div class="shop-items-list">
                                                                                                            ${(cat.shops || []).map(shop =>
                            `<div class="shop-item-name">${shop.name || ''}</div>`
                        ).join('')}
                                                                                                        </div>
                                                                                                    </div>
                                                                                                `).join('')}
                                                                                        </div>
                                                                                    `;
                    }
                }

            } catch (e) {
                console.error('Unified panel error:', e);
            }
        }

        function closeMapUnifiedPanel() {
            const panel = document.getElementById('unifiedPanel');
            if (panel) panel.classList.remove('active');
        }

        // function switchMapSideTab(tab) {
        //     document.querySelectorAll('.tab-btn').forEach(b => b.classList.toggle('active', b.innerText.includes(tab === 'stations' ? 'المحطات' : 'المقالات')));
        //     const sTab = document.getElementById('stations-tab');
        //     const aTab = document.getElementById('articles-tab');
        //     if (sTab) sTab.classList.toggle('active', tab === 'stations');
        //     if (aTab) aTab.classList.toggle('active', tab === 'articles');
        // }

        function switchUnifiedMapTab(tab, btn = null) {
            document.querySelectorAll('.unified-tab-btn')
                .forEach(b => b.classList.remove('active'));

            if (btn) btn.classList.add('active');
            else {
                const autoBtn = document.querySelector(
                    `.unified-tab-btn[onclick*="${tab}"]`
                );
                if (autoBtn) autoBtn.classList.add('active');
            }

            const iTab = document.getElementById('unified-info-tab');
            const sTab = document.getElementById('unified-shops-tab');
            const gTab = document.getElementById('unified-gallery-tab');

            if (iTab) iTab.classList.toggle('active', tab === 'info');
            if (sTab) sTab.classList.toggle('active', tab === 'shops');
            if (gTab) gTab.classList.toggle('active', tab === 'gallery');

            if (tab === 'gallery') {
                renderMapGallery(mapActiveStation);
            }
        }

        function renderMapGallery(station) {
            const activeStation = station || mapActiveStation;
            if (!activeStation) return;

            const gallery = document.getElementById('unifiedGallery');
            if (!gallery) return;
            const images = activeStation.images || [];
            if (images.length === 0) {
                gallery.innerHTML =
                    '<p style="grid-column: 1/-1; text-align: center; color: var(--text-dim); padding: 20px;">لا توجد صور متوفرة</p>';
                return;
            }
            gallery.innerHTML = images.map((img, i) => `
                                                                                                                            <div class="gallery-thumb" onclick="openMapFullscreenImage(${i})">
                                                                                                                                <img src="${img.thumb || img.url || ''}" alt="${img.caption || ''}" 
                                                                                                                                     onerror="this.src='/images/favicon.png'; this.style.padding='10px'; this.onerror=null;"
                                                                                                                                     loading="lazy">
                                                                                                                            </div>`).join('');
        }

        function openMapFullscreenImage(i) {
            const img = mapActiveStation.images[i];
            const fsImg = document.getElementById('fullscreenImage');
            const fsCap = document.getElementById('fullscreenCaption');
            const fsView = document.getElementById('fullscreenViewer');
            if (fsImg) fsImg.src = img.url;
            if (fsCap) fsCap.textContent = img.caption;
            if (fsView) fsView.classList.add('active');
        }

        function closeMapFullscreenViewer() {
            const fsView = document.getElementById('fullscreenViewer');
            if (fsView) fsView.classList.remove('active');
        }

        function flyToMapStation(id) {
            const s = mapStationsData.find(x => x.id == id);
            if (s && leafletMap) leafletMap.flyTo([s.lat, s.lng], 14, {
                duration: 1
            });
        }

        function applyMapSidebarState() {
            const sidebar = document.getElementById('mapSidebar');
            const btn = document.getElementById('toggleSidebarBtn');
            const panel = document.getElementById('unifiedPanel');

            if (sidebar) {
                sidebar.classList.toggle('active', mapSidebarOpen);
                sidebar.classList.toggle('collapsed', !mapSidebarOpen);
            }
            if (panel) {
                panel.classList.toggle('sidebar-is-open', mapSidebarOpen);
            }
            if (btn) {
                btn.classList.toggle('sidebar-open', mapSidebarOpen);
                btn.classList.toggle('sidebar-closed', !mapSidebarOpen);
            }
        }

        function toggleMapSidebar() {
            mapSidebarOpen = !mapSidebarOpen;
            if (mapSidebarOpen) {
                // إغلاق unified-panel عند فتح sidebar
                closeMapUnifiedPanel();
            }
            applyMapSidebarState();
            refreshLeafletMap(400);
        }

        function mapZoomIn() {
            if (leafletMap) leafletMap.zoomIn();
        }

        function mapZoomOut() {
            if (leafletMap) leafletMap.zoomOut();
        }

        function mapReset() {
            window.location.reload();
        }

        function mapToggleFullscreen() {
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen();
                setTimeout(() => {
                    if (leafletMap) {
                        leafletMap.invalidateSize(true);
                        leafletMap.setView(leafletMap.getCenter());
                    }
                }, 300);
            } else if (document.exitFullscreen) {
                document.exitFullscreen();
                setTimeout(() => {
                    if (leafletMap) {
                        leafletMap.invalidateSize(true);
                        leafletMap.setView(leafletMap.getCenter());
                    }
                }, 300);
            }
        }

        function debounceMapSearch(val) {
            clearTimeout(mapSearchTimeout);
            mapSearchTimeout = setTimeout(() => renderMapStationsList('all', val), 300);
        }

        function mapFilterByCity(id, chipEl) {
            // Update active state for chips
            document.querySelectorAll('.city-chip').forEach(c => c.classList.remove('active'));
            if (chipEl) chipEl.classList.add('active');

            // 👇 تحديث اسم المدينة
            const cityNameEl = document.getElementById('currentCityName');

            if (id === 'all') {
                cityNameEl.textContent = 'المملكة';
            } else {
                const city = mapCitiesData.find(c => c.id == id);
                cityNameEl.textContent = city ? city.name : 'المملكة';
            }

            renderMapStationsList(id, '');
        }
        document.addEventListener('DOMContentLoaded', async () => {
            console.log('🚀 DOMContentLoaded: Starting map initialization');
            try {
                initializeLeafletMap();
                applyMapSidebarState();
                const fetched = await drbFetchStationsFromAPI();
                if (fetched) {
                    buildMapCityFilters();
                    addMapMarkers();
                    renderMapStationsList();
                    const params = new URLSearchParams(window.location.search);
                    if (params.get('station')) selectMapStation(params.get('station'));
                    console.log("station", params);
                } else {
                    console.warn('⚠️ Data fetch returned false');
                }

                // fetchArticles() is disabled because the articles endpoint is not used here.
                initializeCityFilterDrag();

                window.addEventListener('resize', () => {
                    refreshLeafletMap(300);
                });

                window.addEventListener('orientationchange', () => {
                    refreshLeafletMap(350);
                });

                const sidebarElement = document.getElementById('mapSidebar');
                if (sidebarElement) {
                    sidebarElement.addEventListener('transitionend', event => {
                        if (event.propertyName === 'transform' || event.propertyName === 'width') {
                            refreshLeafletMap(50);
                        }
                    });
                }
            } catch (error) {
                console.error('💥 Critical Map Initialization Error:', error);
                showError('حدث خطأ أثناء تحميل الخريطة. يرجى تحديث الصفحة.');
            }


        });

        function getStationDetailsUrl(id) {
            const basePath = window.location.pathname.replace(/\/map\/?$/, '');
            return `${basePath}/stationDetails/${id}`;
        }

        function initializeCityFilterDrag() {
            const container = document.getElementById('cityFiltersContainer');
            if (!container) return;
            let isDragging = false;
            let startX = 0;
            let scrollLeft = 0;

            container.addEventListener('mousedown', e => {
                isDragging = true;
                container.classList.add('grabbing');
                startX = e.pageX - container.offsetLeft;
                scrollLeft = container.scrollLeft;
                e.preventDefault();
            });

            container.addEventListener('mouseleave', () => {
                isDragging = false;
                container.classList.remove('grabbing');
            });

            container.addEventListener('mouseup', () => {
                isDragging = false;
                container.classList.remove('grabbing');
            });

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

            container.addEventListener('touchstart', () => container.classList.add('grabbing'));
            container.addEventListener('touchend', () => container.classList.remove('grabbing'));
        }

        function goToStationDetails(stationCode) {
            const id = stationCode || mapActiveStation?.id;
            if (!id) {
                showError('يرجى اختيار محطة أولاً');
                return;
            }
            window.location.href = getStationDetailsUrl(id);
        }
        // ---------- Articles ----------
        let allArticles = [];

        // async function fetchArticles() {
        //     try {
        //         const res = await fetch(`${API_BASE}/articals`);
        //         const result = await res.json();

        //         allArticles = result.data || [];

        //         // 👇 هنا التعديل
        //         renderArticles(allArticles);

        //     } catch (e) {
        //         console.error('❌ Error fetching articles:', e);
        //         showError('تعذر تحميل المقالات');
        //     }
        // }
        // function renderArticles(articles) {
        //     const container = document.querySelector('#articles-tab .articles-list');
        //     if (!container) return;
        //     if (articles.length === 0) { container.innerHTML = '<p class="text-white">لا توجد مقالات حالياً</p>'; return; }
        //     const currentLang = document.documentElement.lang || 'ar';
        //     container.innerHTML = articles.map(article => {
        //         const title = getLocalizedName(article.title);
        //         const content = getLocalizedName(article.content);
        //         const tempDiv = document.createElement('div'); tempDiv.innerHTML = content;
        //         const text = tempDiv.textContent || tempDiv.innerText || '';
        //         const excerpt = text.substring(0, 120) + '...';
        //         const detailUrl = `/${currentLang}/blogDetails/${article.id}`;
        //         return `<div class="article-card"><h3 class="article-title text-white">${title}</h3><p class="article-excerpt text-white">${excerpt}</p></div>`;
        //     }).join('');
        // }

        function getMapDirections() {
            if (!mapActiveStation) return;

            // استخدام رابط الموقع من الـ API أولاً، وإذا لم يوجد نستخدم الإحداثيات
            const url = mapActiveStation.locationUrl || 
                       (mapActiveStation.lat && mapActiveStation.lng ? 
                        `https://www.google.com/maps/dir/?api=1&destination=${mapActiveStation.lat},${mapActiveStation.lng}` : null);

            if (!url) {
                showError('لا يوجد موقع للمحطة');
                return;
            }

            window.open(url, '_blank');
        }

        function shareMapStation() {
            if (!mapActiveStation) return;

            const name = mapActiveStation.name;
            // استخدام رابط الموقع من الـ API أولاً، وإذا لم يوجد نستخدم الإحداثيات
            const shareUrl = mapActiveStation.locationUrl || 
                            (mapActiveStation.lat && mapActiveStation.lng ? 
                             `https://www.google.com/maps?q=${mapActiveStation.lat},${mapActiveStation.lng}` : null);

            if (!shareUrl) {
                showError('لا يوجد رابط مشاركة متاح');
                return;
            }

            // إذا المتصفح يدعم Web Share API
            if (navigator.share) {
                navigator.share({
                    title: name,
                    text: `📍 ${name}`,
                    url: shareUrl
                }).catch(err => console.warn('Share failed:', err));
            } else {
                // fallback
                navigator.clipboard.writeText(shareUrl);
                alert('تم نسخ رابط الموقع 👍');
            }
        }

        function safeParseLocalized(field) {
            if (!field) return {};

            try {
                if (typeof field === 'string') {
                    return JSON.parse(field);
                }
                if (typeof field === 'object') return field;
            } catch (e) { }

            return {};
        }
    </script>
@endpush