@extends('layouts.app')
@push('styles')
    <style>
        @media (max-width: 768px) {
            body {
                padding-top: 0 !important;
                height: auto !important;
                min-height: 100vh !important;
                overflow-y: auto !important;
            }
        }
    </style>
@endpush

@php
    // جلب بيانات المحطة مباشرة من الرابط المخصص مع تضمين المحلات والمقالات بناءً على طلبك
    $stationId = request()->route('id') ?? request()->id;
    $station = null;
    $citiesMap = []; // خريطة ID المدينة => اسم المدينة

    if ($stationId) {
        $apiBase = config('app.map_api_base') ?? 'https://darbcp.sys.newtouch.sa/api/pages';

        // جلب بيانات المحطة
        $response = \Illuminate\Support\Facades\Http::timeout(10)->get("{$apiBase}/interactive-map/stations/{$stationId}?include=shops,articals");
        if ($response->ok()) {
            $fetchedData = $response->json();
            $station = $fetchedData['data'] ?? $fetchedData;
        }

        // جلب قائمة المدن لترجمة رقم المدينة إلى اسمها
        try {
            $citiesResponse = \Illuminate\Support\Facades\Http::timeout(8)->get("{$apiBase}/interactive-map/cities");
            if ($citiesResponse->ok()) {
                $citiesData = $citiesResponse->json();
                $citiesList = $citiesData['data'] ?? $citiesData ?? [];
                if (is_array($citiesList)) {
                    foreach ($citiesList as $city) {
                        if (isset($city['id'])) {
                            $citiesMap[(string) $city['id']] = $city['name'] ?? '';
                        }
                    }
                }
            }
        } catch (\Throwable $e) {
            // تجاهل الخطأ، سيظهر رقم المدينة كاحتياطي
        }
    }
@endphp

@section('title', $station ? (json_decode($station['name'], true)['ar'] ?? 'تفاصيل المحطة') : __('map.station_details_title'))

@section('meta_title', $station ? (json_decode($station['name'], true)['ar'] ?? 'تفاصيل المحطة') : __('map.station_details_title'))
@section('description', $station ? ($station['about'] ?? $station['description'] ?? __('map.station_details_description')) : __('map.station_details_description'))
@section('keywords', 'محطة درب, خدمات الطرق, ' . ($station ? (json_decode($station['name'], true)['ar'] ?? '') : ''))

@section('og:title', $station ? (json_decode($station['name'], true)['ar'] ?? 'تفاصيل المحطة') : 'تفاصيل المحطة')
@section('og:description', $station ? ($station['about'] ?? $station['description'] ?? 'معلومات تفصيلية عن محطة درب') : 'معلومات تفصيلية عن محطة درب')
@section('og_image', $station && !empty($station['station_images']) ? (is_array($station['station_images']) ? ($station['station_images'][0] ?? asset('images/RFav.png')) : $station['station_images']) : asset('images/RFav.png'))

@push('styles')
    <style>
        .slider-track {
            direction: ltr;
        }

        .station-detail-page {
            padding: 120px 20vh 60px !important;
            min-height: 100vh;
            position: relative;
            z-index: 1; /* فوق الخلفية الثابتة */
            background: transparent !important;
        }
        .station-detail-hero {
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap: 30px;
            align-items: center;
            margin-bottom: 40px;
        }

        .station-detail-card {
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            padding: 32px;
        }

        main.station-detail-page>section {
            margin-bottom: 32px;
        }

        .station-detail-hero-text {
            display: grid;
            gap: 18px;
        }

        .station-detail-headline {
            font-size: clamp(2rem, 2.6vw, 3rem);
            font-weight: 700;
            color: #f3741f;
            margin: 0;
        }

        .station-detail-breadcrumb {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            color: rgba(255, 255, 255, 0.75);
            font-size: 0.95rem;
        }

        .station-detail-breadcrumb span:last-child {
            font-weight: 700;
            color: #ffffff;
        }

        .main-header,
        .main-header.scrolled {
            background: rgba(17, 24, 39, 0.96) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
            backdrop-filter: blur(16px);
        }

        .station-detail-card,
        .contact-card,
        .slider-section,
        .map-section {
            margin-inline: auto;
            width: 100%;
        }

        .station-detail-status {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 18px;
            border-radius: 999px;
            font-weight: 700;
            background: #fde8e8;
            color: #b91c1c;
            width: fit-content;
        }

        .station-detail-status.open {
            background: #dcfce7;
            color: #166534;
        }

        .station-hero-image {
            border-radius: 26px;
            overflow: hidden;
            min-height: 340px;
            background: #111;
            display: grid;
            place-items: center;
        }

        .station-hero-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .section-title {
            font-size: 1.4rem !important;
            font-weight: 700;
            color: #f3741f !important;
            margin-bottom: 20px !important;
        }

        .section-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 24px;
        }

        .info-row {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 12px;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .info-row:last-child {
            border-bottom: none;
        }

        .info-label {
            color: rgb(255, 255, 255);
            font-size: 0.95rem;
        }

        .info-value {
            color: #ffffff;
            font-weight: 600;
        }

        .text-panel {
            line-height: 1.9;
            color: rgba(255, 255, 255, 0.9);
        }

        .slider-section {
            margin-top: 40px;
        }

        .slider-wrapper {
            position: relative;
            overflow: hidden;
            border-radius: 24px;
        }

        .map-section {
            width: calc(97% + 40px);
            margin: 0;
            padding: 32px 20px 22px;
        }

        .map-section iframe {
            width: 100%;
            min-height: 420px;
            border: none;
            border-radius: 22px;
        }

        .slider-track {
            display: flex;
            gap: 20px;
            transition: transform 0.45s ease;
        }

        .slider-card {
            flex: 0 0 calc((100% - 40px) / 3);
            box-sizing: border-box;
        }

        .slider-card img {
            width: 100%;
            height: 320px;
            object-fit: cover;
            border-radius: 24px;
            cursor: pointer;
            display: block;
        }

        .slider-buttons {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .slider-buttons button {
            pointer-events: all;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 46px;
            height: 46px;
            border-radius: 50%;
            border: none;
            background: rgba(17, 24, 39, 0.72);
            color: #fff;
            cursor: pointer;
            display: grid;
            place-items: center;
        }

        .slider-buttons button:hover {
            background: rgba(17, 24, 39, 0.9);
        }

        .slider-buttons .prev-button {
            left: 16px;
        }

        .slider-buttons .next-button {
            right: 16px;
        }

        .vacant-shops-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 18px;
            margin-top: 20px;
        }

        .vacant-shop-card {
            background: #0006;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 18px;
            padding: 20px;
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
        }

        .vacant-shop-card strong {
            display: block;
            color: #ffffff;
        }

        .vacant-shop-card span {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.95rem;
        }

        .contact-card {
            display: grid;
            gap: 18px;
            background: #0006;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            padding: 32px;
            margin-top: 40px;
            box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }

        .contact-card p {
            margin: 0;
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.8;
        }

        .contact-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
        }

        .btn-brand {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 14px 26px;
            border-radius: 999px;
            border: none;
            background: #d76011;
            color: #ffffff;
            font-weight: 700;
            cursor: pointer;
            text-decoration: none;
        }

        .btn-outline {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 14px 26px;
            border-radius: 999px;
            border: 1px solid rgba(17, 24, 39, 0.12);
            background: #ffffff;
            color: #111827;
            font-weight: 700;
            text-decoration: none;
        }

        .image-modal {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.75);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            padding: 20px;
        }

        .image-modal.active {
            display: flex;
        }

        .image-modal img {
            max-width: 100%;
            max-height: 95vh;
            border-radius: 18px;
        }

        .image-modal-close {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: none;
            background: rgba(255, 255, 255, 0.92);
            color: #111827;
            font-size: 1.4rem;
            cursor: pointer;
        }

        @media (max-width: 960px) {
            .station-detail-hero {
                grid-template-columns: 1fr;
            }

            .slider-card {
                flex: 0 0 calc((100% - 20px) / 2);
            }

            .slider-card img {
                height: 320px;
            }
        }

        @media (max-width: 680px) {
            .station-detail-page {
                padding: 20px 14px 40px;
            }

            .station-detail-card {
                padding: 24px;
            }

            .station-detail-hero {
                gap: 20px;
            }

            .station-detail-headline {
                font-size: 2rem;
            }

            .slider-card {
                flex: 0 0 100%;
            }

            .slider-card img {
                height: 260px;
            }

            .section-grid {
                grid-template-columns: repeat(1, minmax(0, 1fr));
            }

            .map-section {
                width: 100%;
                margin: 0;
                padding: 32px 16px 22px;
            }
        }

        body {
            color: #ffffff;
        }

        .slider-track {
            overflow-x: auto;
            scroll-behavior: smooth;

            /* إخفاء السكرول */
            scrollbar-width: none;
            /* Firefox */
        }

        .slider-track::-webkit-scrollbar {
            display: none;
            /* Chrome */
        }

        .slider-buttons button {
            background: rgba(0, 0, 0, 0.6);
            /* خلفية شفافة سوداء */
            color: #fff;
            border: none;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            transition: 0.3s;
        }

        .slider-buttons button:hover {
            background: rgba(0, 0, 0, 0.85);
            /* transform: scale(1.1); */
        }


        /* تحديث الخلفية العامة لتطابق الصورة */

        /* تعديل الكاردات لتصبح شفافة بداكن (كما في الصورة) */
        .station-detail-card {
            background: rgba(255, 255, 255, 0.05);
            /* شفافية بسيطة جداً */
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 20px;
            color: #ffffff;
        }

        /* سكشن المقالات الجديد */
        .articles-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
            margin-top: 30px;
        }

        .article-card {
            background: rgba(255, 255, 255, 0.07);
            border-radius: 20px;
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .article-card:hover {
            transform: translateY(-5px);
        }

        .article-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .article-content {
            padding: 20px;
        }

        .article-title {
            font-size: 1.2rem;
            color: #f3741f;
            margin-bottom: 10px;
            font-weight: bold;
        }

        .article-desc {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.6;
        }

        .station-service-icons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
        }

        .service-icon-group {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            color: #f3741f;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .service-icon-group:hover {
            background: rgba(243, 116, 31, 0.15);
            transform: translateY(-2px);
            border-color: rgba(243, 116, 31, 0.3);
        }

        .service-type-badge {
            position: absolute;
            top: -6px;
            right: -6px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #f3741f;
            color: #111827;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 700;
            border: 2px solid rgba(255, 255, 255, 0.1);
        }

        .article-modal-image {
            width: 100%;
            max-height: 320px;
            object-fit: cover;
            border-radius: 18px;
            margin-bottom: 20px;
        }

        /* سجل اهتمامك */
        .interest-section {
            text-align: center;
            padding: 40px;
            background: linear-gradient(90deg, rgba(243, 116, 31, 0.2), rgba(0, 0, 0, 0.3));
            border-radius: 20px;
            margin-top: 50px;
        }

        .interest-section h3 {
            color: #f3741f !important;
        }

        /* زر اقرأ المزيد */
        .read-more-btn {
            background: transparent;
            border: 1px solid #f3741f;
            color: #f3741f;
            padding: 8px 20px;
            border-radius: 50px;
            cursor: pointer;
            margin-top: 15px;
            transition: 0.3s;
        }

        .read-more-btn:hover {
            background: #f3741f;
            color: #fff;
        }
    </style>
@endpush

@section('content')
    <div class="bg-img"></div>
    <main class="content-area station-detail-page">
        @if(!$station)
            <div class="station-detail-card">
                <h2 class="section-title">{{ __('map.station_details_error_title') }}</h2>
                <p>{{ __('map.station_details_error_message') }}</p>
                <div class="contact-actions" style="margin-top: 24px;">
                    <a href="{{ route('components/map') }}" class="btn-brand">{{ __('map.back_to_map') }}</a>
                </div>
            </div>
        @else
            @php
                $locale = app()->getLocale();
                $stationNameDecoded = json_decode($station['name'] ?? '{}', true) ?: [];
                $stationName = $stationNameDecoded[$locale] ?? $stationNameDecoded['ar'] ?? $station['name'] ?? __('map.darb_station');

                $stationTitleDecoded = json_decode($station['title'] ?? '{}', true) ?: [];
                $stationTitle = $stationTitleDecoded[$locale] ?? $stationTitleDecoded['ar'] ?? $stationTitleDecoded['en'] ?? null;

                $stationSummaryDecoded = json_decode($station['summary'] ?? '{}', true) ?: [];
                $stationSummary = $stationSummaryDecoded[$locale] ?? $stationSummaryDecoded['ar'] ?? $stationSummaryDecoded['en'] ?? null;

                // حل اسم المدينة من خريطة المدن (API يعيد city كرقم فقط مثل "6")
                $cityId = (string) ($station['city'] ?? '');
                $cityName = '-';
                if ($cityId && isset($citiesMap[$cityId])) {
                    $rawCityName = $citiesMap[$cityId];
                    $decoded = is_string($rawCityName) ? json_decode($rawCityName, true) : null;
                    if (is_array($decoded)) {
                        $cityName = $decoded[$locale] ?? $decoded['ar'] ?? $decoded['en'] ?? $rawCityName;
                    } elseif ($rawCityName) {
                        $cityName = $rawCityName;
                    }
                } elseif ($cityId) {
                    $cityName = $cityId;
                }


                $address = $station['street'] ?? $station['address'] ?? '-';
                $stationCode = $station['code'] ?? $station['station_code'] ?? '-';
                $locationUrl = $station['location_url'] ?? null;
                $status = strtolower(trim($station['status'] ?? ''));
                $statusLabel = ($status === 'closed' || $status === '0' || $status === 'false') ? __('map.closed') : __('map.open');
                $statusClass = $statusLabel === __('map.open') ? 'open' : '';

                $imagesRaw = $station['station_images'] ?? [];
                if (is_string($imagesRaw)) {
                    $decodedImages = json_decode($imagesRaw, true);
                    if (is_array($decodedImages)) {
                        $imagesRaw = $decodedImages;
                    } else {
                        $imagesRaw = array_filter(array_map('trim', explode(',', $imagesRaw)));
                    }
                }
                $images = [];
                if (is_array($imagesRaw)) {
                    foreach ($imagesRaw as $imgItem) {
                        if (is_string($imgItem) && trim($imgItem)) {
                            $images[] = trim($imgItem);
                        } elseif (is_array($imgItem) || is_object($imgItem)) {
                            $item = is_object($imgItem) ? (array) $imgItem : $imgItem;
                            $url = $item['url'] ?? $item['path'] ?? $item['link'] ?? $item['image'] ?? $item['thumbnail'] ?? $item['thumb'] ?? '';
                            if ($url) {
                                $images[] = trim($url);
                            }
                        }
                    }
                }
                $images = array_values(array_filter($images));
                $heroImage = $images[0] ?? asset('images/logo.gif');
                $descriptionRaw = $stationSummary ?: $station['description'] ?? $station['details'] ?? $station['about'] ?? '';
                if (is_string($descriptionRaw)) {
                    $description = $descriptionRaw;
                } else {
                    $descriptionDecoded = is_array($descriptionRaw) ? $descriptionRaw : (json_decode($descriptionRaw, true) ?: []);
                    $description = is_array($descriptionDecoded) ? ($descriptionDecoded[$locale] ?? $descriptionDecoded['ar'] ?? $descriptionDecoded['en'] ?? '') : '';
                }

                $shopsRaw = $station['shops'] ?? $station['shops_data'] ?? $station['services'] ?? [];
                if (is_string($shopsRaw)) {
                    $shopsDecoded = json_decode($shopsRaw, true);
                    $shopsRaw = is_array($shopsDecoded) ? $shopsDecoded : [];
                }
                $shops = is_array($shopsRaw) ? array_values($shopsRaw) : [];

                $availableShops = array_values(array_filter($shops, function ($shop) {
                    if (!is_array($shop)) {
                        return false;
                    }

                    $statusData = $shop['shop_status_option_data'] ?? null;
                    if (is_string($statusData)) {
                        $statusData = json_decode($statusData, true);
                    }

                    if (is_array($statusData) && isset($statusData['id']) && $statusData['id'] == 908) {
                        return true;
                    }

                    $statusLabel = $shop['shop_status_label'] ?? '';
                    if ($statusLabel === 'Vacant' || $statusLabel === 'شاغر') {
                        return true;
                    }

                    $statusValue = $shop['shop_status'] ?? '';
                    if ($statusValue === 'opt_1775048228180_40zg') {
                        return true;
                    }

                    return false;
                }));

                $serviceIconMap = [
                    'restaurant' => 'fa-utensils',
                    'cafe' => 'fa-mug-hot',
                    'market' => 'fa-shop',
                    'car_service' => 'fa-car',
                    'fuel' => 'fa-gas-pump',
                    'pharmacy' => 'fa-pills',
                    'other' => 'fa-star',
                ];
                $shopsTypeCount = $station['shops_type_count'] ?? [];
                if (is_object($shopsTypeCount)) {
                    $shopsTypeCount = (array) $shopsTypeCount;
                }
                if (is_string($shopsTypeCount)) {
                    $shopsTypeCount = json_decode($shopsTypeCount, true) ?: [];
                    if (is_object($shopsTypeCount)) {
                        $shopsTypeCount = (array) $shopsTypeCount;
                    }
                }
                $serviceCounts = is_array($shopsTypeCount) ? $shopsTypeCount : [];

                if (empty($serviceCounts)) {
                    $servicesRaw = $station['services'] ?? $station['station_services'] ?? [];
                    if (is_string($servicesRaw)) {
                        $decodedServices = json_decode($servicesRaw, true);
                        $servicesRaw = is_array($decodedServices) ? $decodedServices : [];
                    }
                    if (is_array($servicesRaw) && count($servicesRaw)) {
                        foreach ($servicesRaw as $service) {
                            $type = is_array($service) ? ($service['type'] ?? $service['service_type'] ?? 'other') : ($service ?: 'other');
                            $serviceCounts[$type] = ($serviceCounts[$type] ?? 0) + 1;
                        }
                    } else {
                        foreach ($shops as $shop) {
                            if (!is_array($shop)) {
                                continue;
                            }
                            $type = $shop['type'] ?? $shop['category'] ?? $shop['service_type'] ?? 'other';
                            $serviceCounts[$type] = ($serviceCounts[$type] ?? 0) + 1;
                        }
                    }
                }

                $serviceIcons = [];
                foreach ($serviceCounts as $type => $count) {
                    if ($count <= 0)
                        continue;
                    $serviceIcons[] = [
                        'icon' => $serviceIconMap[$type] ?? $serviceIconMap['other'],
                        'label' => ucfirst(str_replace('_', ' ', $type)),
                        'count' => $count,
                    ];
                }
                if (empty($serviceIcons) && (count($shops) || ($station['shops_count'] ?? 0))) {
                    $serviceIcons[] = [
                        'icon' => 'fa-shop',
                        'label' => __('map.shops_count'),
                        'count' => $station['shops_count'] ?? count($shops),
                    ];
                }

                $articlesRaw = $station['articals_data'] ?? [];
                if (is_string($articlesRaw)) {
                    $articlesRaw = json_decode($articlesRaw, true) ?: [];
                }
                $articles = [];
                if (is_array($articlesRaw)) {
                    foreach ($articlesRaw as $article) {
                        $articleTitleRaw = $article['title'] ?? $article['name'] ?? '';
                        $articleTitleDecoded = is_string($articleTitleRaw) ? json_decode($articleTitleRaw, true) : $articleTitleRaw;
                        $articleTitle = is_array($articleTitleDecoded) ? ($articleTitleDecoded[$locale] ?? $articleTitleDecoded['ar'] ?? $articleTitleDecoded['en'] ?? '') : $articleTitleDecoded;

                        $articleContentRaw = $article['content'] ?? '';
                        $articleContentDecoded = is_string($articleContentRaw) ? json_decode($articleContentRaw, true) : $articleContentRaw;
                        $articleContent = is_array($articleContentDecoded) ? ($articleContentDecoded[$locale] ?? $articleContentDecoded['ar'] ?? $articleContentDecoded['en'] ?? '') : $articleContentDecoded;

                        $articles[] = [
                            'title' => $articleTitle ?: __('map.articles'),
                            'content' => $articleContent,
                            'facility' => $article['facility'] ?? null,
                        ];
                    }
                }
                $articles = array_values(array_filter($articles, function ($item) {
                    return !empty($item['title']) || !empty($item['content']);
                }));

                $mapLat = $station['latitude'] ?? $station['lat'] ?? null;
                $mapLng = $station['longitude'] ?? $station['lng'] ?? null;
                $mapQuery = $mapLat && $mapLng ? urlencode($mapLat . ',' . $mapLng) : urlencode($address . ' ' . $cityName);
            @endphp

            <section class="station-detail-hero station-detail-card">
                <div class="station-detail-hero-text">
                    <div class="station-detail-breadcrumb">
                        <span><a href="{{ route('components/map') }}"
                                style="color: #ffffff; text-decoration: none; opacity: .8;">{{ __('map.map') }}</a></span>
                        <span>{{ __('map.breadcrumb_separator') }}</span>
                        <span>{{ $stationName }}</span>
                    </div>
                    <h1 class="station-detail-headline">{{ $stationTitle ?: $stationName }}</h1>
                    <div class="station-detail-hero-meta"
                        style="display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 14px;">
                        <span class="station-detail-status {{ $statusClass }}">{{ $statusLabel }}</span>
                        @if(count($serviceIcons) > 0)
                            <div class="station-service-icons">
                                @foreach($serviceIcons as $service)
                                    <div class="service-icon-group" title="{{ $service['label'] }}">
                                        <span class="service-icon"><i class="fa-solid {{ $service['icon'] }}"></i></span>
                                        <span class="service-type-badge">{{ $service['count'] }}</span>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
                <div class="station-hero-image">
                    <img src="{{ $heroImage }}" alt="{{ $stationName }}">
                </div>
            </section>

            <section class="section-grid">
                <div class="station-detail-card">
                    <h2 class="section-title">{{ __('map.station_info_title') }}</h2>
                    <div class="info-row"><span class="info-label">{{ __('map.city') }}</span><span
                            class="info-value">{{ $cityName }}</span></div>
                    <div class="info-row"><span class="info-label">{{ __('map.address') }}</span><span
                            class="info-value">{{ $address }}</span></div>
                    <div class="info-row"><span class="info-label">{{ __('map.station_code') }}</span><span
                            class="info-value">{{ $stationCode }}</span></div>
                    @if($locationUrl)
                        <div class="info-row"><span class="info-label">{{ __('map.location') }}</span><span class="info-value"><a
                                    href="{{ $locationUrl }}" target="_blank" rel="noopener noreferrer"
                                    style="color: #ffffff; text-decoration: underline;">{{ __('map.open_in_maps') }}</a></span>
                        </div>
                    @endif
                </div>
                {{-- <div class="info-row"><span class="info-label">{{ __('map.shops_count') }}</span><span
                            class="info-value">{{ $station['shops_count'] ?? count($shops) ?: '-' }}</span></div> --}}
                @if(!empty(strip_tags($description)))
                    <div class="station-detail-card">
                        <h2 class="section-title">{{ __('map.station_overview_title') }}</h2>
                        <p class="text-panel">{{ $description }}</p>
                    </div>
                @endif
            </section>

            @if(count($images) > 0)
                <section class="slider-section station-detail-card">
                    <h2 class="section-title">{{ __('map.station_images_title') }}</h2>
                    <div class="slider-wrapper">
                        <div class="slider-track" id="stationImageSlider">
                            @foreach($images as $img)
                                <div class="slider-card">
                                    <img src="{{ $img }}" alt="{{ $stationName }}" onclick="openImageModal('{{ $img }}')">
                                </div>
                            @endforeach
                        </div>
                        @if(count($images) > 1)
                            <div class="slider-buttons">
                                <button class="prev-button" onclick="prevSlider()">&#10094;</button>
                                <button class="next-button" onclick="nextSlider()">&#10095;</button>
                            </div>
                        @endif
                    </div>
                </section>
            @endif


            <section class="station-detail-card">
                <h2 class="section-title">{{ __('map.articles') }}</h2>
                @if(count($articles) > 0)
                    <div class="articles-grid">
                        @foreach($articles as $article)
                            <div class="article-card">
                                @if(!empty($article['facility']))
                                    <img src="{{ $article['facility'] }}" class="article-image" alt="{{ $article['title'] }}">
                                @else
                                    <img src="/images/article-sample.jpg" class="article-image" alt="{{ $article['title'] }}">
                                @endif
                                <div class="article-content">
                                    <h3 class="article-title">{{ \Illuminate\Support\Str::limit($article['title'], 80) }}</h3>
                                    <p class="article-desc">{{ \Illuminate\Support\Str::limit(strip_tags($article['content']), 120) }}
                                    </p>
                                    <button class="read-more-btn"
                                        onclick="openArticleModal({{ json_encode($article['title']) }}, {{ json_encode($article['content']) }}, {{ json_encode($article['facility'] ?? '') }})">{{ __('map.read_more') }}</button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <p class="text-panel">{{ __('map.no_articles') }}</p>
                @endif

                <div class="interest-section">
                    <h3>{{ __('map.interest_heading') }}</h3>
                    {{--<p>{{ __('map.interest_description') }}</p>--}}
                    <a href="https://wa.me/966920005804" class="btn-brand"
                        style="margin-top: 15px;">{{ __('map.contact_now') }}</a>
                         <a href="{{ route('components/map') }}" class="btn-outline">
                        {{ __('map.back_to_map') }}
                    </a>
                </div>
            </section>
            <div class="image-modal" id="articleModal" onclick="closeArticleModal(event)">
                <div class="station-detail-card"
                    style="max-width: 800px; width: 90%; max-height: 80vh; overflow-y: auto; position: relative;">
                    <button class="image-modal-close"
                        onclick="document.getElementById('articleModal').classList.remove('active')">×</button>
                    <img id="modalArticleImage" class="article-modal-image" src="" alt=""
                        style="display:none; width:100%; max-height:320px; object-fit:cover; border-radius: 18px; margin-bottom:20px;">
                    <h2 id="modalArticleTitle" style="color: #f3741f;"></h2>
                    <hr style="border-color: rgba(255,255,255,0.1)">
                    <div id="modalArticleBody" class="text-panel" style="margin-top: 20px;"></div>
                </div>
            </div>


            @if(count($availableShops) > 0)
                <section class="station-detail-card">
                    <h2 class="section-title">{{ __('map.vacant_shops_title') }}</h2>
                    <div class="vacant-shops-grid">
                        @foreach($availableShops as $shop)
                            @php
                                $shopNameRaw = is_array($shop) ? ($shop['name'] ?? $shop['title'] ?? $shop['shop_name'] ?? __('map.shop')) : $shop;
                                $shopName = is_string($shopNameRaw) ? (json_decode($shopNameRaw, true)['ar'] ?? $shopNameRaw) : $shopNameRaw;
                                $shopType = is_array($shop) ? ($shop['type'] ?? $shop['category'] ?? '') : '';
                                $shopStatus = is_array($shop) ? ($shop['status'] ?? '') : '';
                            @endphp
                            <div class="vacant-shop-card">
                                <strong>{{ $shopName }}</strong>
                            </div>
                        @endforeach
                    </div>
                </section>
            @endif

            {{--<section class="contact-card">
                <h2 class="section-title">{{ __('map.contact_title') }}</h2>

                <p>{{ __('map.contact_desc') }}</p>

                <div class="contact-actions">
                    <a href="{{ route('components/contact') }}" class="btn-brand">
                        {{ __('map.contact_now') }}
                    </a>

                    <a href="{{ route('components/map') }}" class="btn-outline">
                        {{ __('map.back_to_map') }}
                    </a>
                </div>
            </section>--}}

            <section class="station-detail-card map-section">
                <h2 class="section-title">{{ __('map.location') }}</h2>
                <iframe src="https://maps.google.com/maps?q={{ $mapQuery }}&z=15&output=embed" loading="lazy"></iframe>
            </section>

            <div class="image-modal" id="imageModal" onclick="closeImageModal(event)">
                <button type="button" class="image-modal-close" onclick="closeImageModal(event)">&times;</button>
                <img src="" alt="{{ __('map.view_image') }}" id="imageModalContent">
            </div>
        @endif
    </main>
@endsection

@push('scripts')
    <script>
        let modalImages = [];
        let currentModalIndex = 0;
        (function () {
            const slider = document.getElementById('stationImageSlider');
            const slides = slider ? slider.children : [];
            const wrapper = slider ? slider.parentElement : null;
            let currentIndex = 0;

            function getSlideGap() {
                if (!slider) return 20;
                return parseFloat(getComputedStyle(slider).gap) || 20;
            }

            function getSlideWidth() {
                if (!slides.length) return 0;
                const card = slides[0];
                return card.getBoundingClientRect().width + getSlideGap();
            }

            function getVisibleCount() {
                if (!wrapper || !slides.length) return 1;
                const wrapperWidth = wrapper.getBoundingClientRect().width;
                const cardWidth = slides[0].getBoundingClientRect().width;
                const gap = getSlideGap();
                return Math.max(1, Math.floor((wrapperWidth + gap) / (cardWidth + gap)));
            }

            function updateSliderPosition() {
                if (!slider) return;

                slider.scrollTo({
                    left: currentIndex * getSlideWidth(),
                    behavior: 'smooth'
                });
            }

            window.nextSlider = function () {
                if (!slider || slides.length === 0) return;
                const visibleCount = getVisibleCount();
                currentIndex = Math.min(currentIndex + 1, Math.max(0, slides.length - visibleCount));
                updateSliderPosition();
            }

            window.prevSlider = function () {
                if (!slider || slides.length === 0) return;
                currentIndex = Math.max(currentIndex - 1, 0);
                updateSliderPosition();
            }

            window.openImageModal = function (url) {
                const modal = document.getElementById('imageModal');
                const img = document.getElementById('imageModalContent');
                if (!modal || !img) return;
                img.src = url;
                modal.classList.add('active');
            }

            window.addEventListener('resize', updateSliderPosition);
            updateSliderPosition();

            window.closeImageModal = function (event) {
                if (event.target.id === 'imageModal' || event.target.classList.contains('image-modal-close')) {
                    const modal = document.getElementById('imageModal');
                    if (modal) modal.classList.remove('active');
                }
            }
        })();
    </script>

    <script>
        function openArticleModal(title, content, imageUrl = '') {
            const modalTitle = document.getElementById('modalArticleTitle');
            const modalBody = document.getElementById('modalArticleBody');
            const modalImage = document.getElementById('modalArticleImage');

            if (modalTitle) {
                modalTitle.innerText = title;
            }
            if (modalBody) {
                modalBody.innerHTML = content;
            }
            if (modalImage) {
                if (imageUrl) {
                    modalImage.src = imageUrl;
                    modalImage.style.display = 'block';
                } else {
                    modalImage.src = '';
                    modalImage.style.display = 'none';
                }
            }

            document.getElementById('articleModal').classList.add('active');
        }

        function closeArticleModal(event) {
            if (event.target.id === 'articleModal') {
                document.getElementById('articleModal').classList.remove('active');
            }
        }
    </script>
@endpush