@extends('layouts.app')
@section('title', __('المركز الإعلامي'))

@section('title', $seo['page_title'] ?? __('المركز الإعلامي'))

@section('meta_title', $seo['meta_title'] ?? '')
@section('description', $seo['meta_description'] ?? '')
@section('keywords', $seo['keywords'] ?? '')

@section('og:title', $seo['og_title'] ?? '')
@section('og:description', $seo['og_description'] ?? '')
@section('og_image', $seo['og_image'] ?? asset('images/RFav.png'))
@section('canonical_url', $seo['canonical_url'] ?? url()->current())
@push('styles')
    @vite(['resources/css/media-center.css', 'resources/css/activities.css'])

    <style>
        /* --- تنسيقات عامة إضافية --- */
        :root {
            --accent-orange: #e57e3a;
        }

        .nav-icons {
            display: flex;
            gap: 40px;
        }

        /* زر الاشتراك الموحد */
        .btn-subscribe-section {
            background-color: var(--accent-orange);
            color: #fff;
            border: none;
            padding: 8px 20px;
            border-radius: 50px;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            text-decoration: none;
            margin-top: 10px;
            cursor: pointer;
        }

        .btn-subscribe-section:hover {
            background-color: #d66418;
            transform: translateY(-2px);
            color: #fff;
        }

        /* --- تنسيق قسم الشهادات (معدل: أول بطاقة بعرض كامل + 4 بطاقات في الصف الواحد) --- */
        .awards-split-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-flow: dense;
            gap: 25px;
            margin-top: 30px;
        }

        .awards-split-grid .award-card.main-award {
            grid-column: span 2;
            grid-row: span 2;
            min-height: 480px;
            padding: 0;
            position: relative;
            overflow: hidden;
            justify-content: flex-end;
            align-items: stretch;
        }

        .awards-split-grid .award-card.main-award .award-img-wrapper {
            position: absolute;
            top: 20px;
            left: 0;
            width: 100%;
            height: 75%;
            margin: 0;
            z-index: 0;
        }

        .awards-split-grid .award-card.main-award .award-img-wrapper img {
            width: 100%;
            padding: 0 20px;

            height: 100%;
            object-fit: contain;
            display: block;
        }

        .awards-split-grid .award-card.main-award h3 {
            position: relative;
            z-index: 1;
            margin: 0;
            padding: 57px 20px 10px;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.4), transparent);
            text-align: center;
        }

        @media (max-width: 991px) {
            .awards-split-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .awards-split-grid .award-card.main-award {
                grid-column: span 2;
                grid-row: span 1;
                min-height: 550px;
            }
        }

        @media (max-width: 768px) {
            .awards-split-grid {
                grid-template-columns: 1fr;
            }

            .awards-split-grid .award-card.main-award {
                grid-column: span 1;
            }
        }

        .award-card {
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 22px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            padding: 24px 15px;
            background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
            transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .award-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18);
            border-color: var(--accent-orange);
        }

        .award-img {
            width: 96px;
            height: 96px;
            object-fit: contain;
            margin-bottom: 18px;
            filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.22));
        }

        .award-card h3 {
            font-size: 1.05rem;
            color: #fff;
            margin: 0;
            line-height: 1.5;
        }

        /* --- تنسيق نشرة تانكي (بطاقات نموذجية بنفس الأبعاد) --- */
        .reels-grid[data-yt-group="tanki"] {
            display: grid;
            grid-template-columns: repeat(4, minmax(250px, 1fr));
            gap: 25px;
            margin-top: 30px;
        }

        .tanki-card {

            position: relative;
            border-radius: 24px;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 28px;
            min-height: 340px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
            cursor: pointer;
        }

        .tanki-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 24px 56px rgba(0, 0, 0, 0.2);
            border-color: var(--accent-orange);
        }

        .tanki-card .tanki-logo,
        .ala-darb-card .ala-darb-logo {
            padding: 15px;
            width: 100%;
            height: 90%;
            border-radius: 18px;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            /* margin-bottom: 22px; */
            flex-shrink: 0;
        }

        .tanki-card .tanki-logo img,
        .tanki-card .tanki-logo i,
        .ala-darb-card .ala-darb-logo img,
        .ala-darb-card .ala-darb-logo i {
            width: 100%;
            height: 100%;
            color: var(--accent-orange);
            object-fit: contain;
        }

        .tanki-card h3,
        .ala-darb-card h3 {
            color: #fff;
            /* margin: 0 0 14px; */
            font-size: 1.15rem;
            line-height: 1.4;
        }

        .tanki-card p,
        .ala-darb-card p {
            color: #dcdcdc;
            opacity: 0.92;
            line-height: 1.75;
            margin: 0 0 24px;
            flex-grow: 1;
        }

        .tanki-card .tanki-action,
        .ala-darb-card .ala-darb-action {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--accent-orange);
            font-weight: 700;
            font-size: 0.95rem;
            justify-content: center;

        }

        .tanki-card .tanki-action i,
        .ala-darb-card .ala-darb-action i {
            font-size: 1.25rem;
        }

        @media (max-width: 992px) {
            .reels-grid[data-yt-group="tanki"] {
                grid-template-columns: repeat(2, minmax(240px, 1fr));
            }
        }

        @media (max-width: 768px) {
            .reels-grid[data-yt-group="tanki"] {
                grid-template-columns: 1fr;
            }
        }

        /* --- تنسيق برنامج على درب --- */
        .ala-darb-controls {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 22px;
            align-items: center;
            justify-content: space-around;
        }

        .ala-darb-tabs,
        .ala-darb-subfilter {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .ala-darb-tabs .filter-tab,
        .ala-darb-subfilter .filter-tab {
            padding: 10px 18px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.04);
            color: #f1f1f1;
            cursor: pointer;
            transition: all 0.25s ease;
            font-size: 0.95rem;
        }

        .ala-darb-tabs .filter-tab.active,
        .ala-darb-subfilter .filter-tab.active {
            background: var(--accent-orange);
            border-color: var(--accent-orange);
            color: #fff;
        }

        .ala-darb-card {
            aspect-ratio: 9 / 16;
            min-height: 420px;
            border-radius: 24px;
            overflow: hidden;
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.15);
            display: flex;
            flex-direction: column;
            transition: all 0.3s ease;
            position: relative;
            cursor: pointer;
            padding: 0 !important;
        }

        .ala-darb-card:hover {
            transform: translateY(-8px);
            border-color: var(--accent-orange);
            box-shadow: 0 20px 40px rgba(229, 126, 58, 0.3);
        }

        .ala-darb-card .ala-darb-logo {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 0 !important;
            margin: 0;
            background: transparent;
            z-index: 1;
            border-radius: 0;
        }

        .ala-darb-card .ala-darb-logo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.7;
            transition: opacity 0.3s ease, transform 0.5s ease;
        }

        .ala-darb-card:hover .ala-darb-logo img {
            opacity: 1;
            transform: scale(1.05);
        }

        .ala-darb-card .ala-darb-content {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 60px 20px 25px;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
            z-index: 3;
            color: #fff;
            margin-top: auto;
        }

        .ala-darb-card h3 {
            font-size: 1.15rem !important;
            margin: 0 0 10px !important;
            font-weight: 700 !important;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
            color: #fff !important;
            text-align: right;
        }

        .ala-darb-card p {
            font-size: 0.9rem !important;
            margin: 0 !important;
            opacity: 0.9 !important;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-align: right;
            line-height: 1.5 !important;
            color: #eee !important;
        }

        /* Play icon overlay */
        .ala-darb-card::after {
            content: '\f04b';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            background: rgba(229, 126, 58, 0.9);
            color: white;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-left: 5px;
            font-size: 22px;
            z-index: 2;
            opacity: 0;
            transition: all 0.3s ease;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
        }

        .ala-darb-card:hover::after {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

        .ala-darb-card .media-center-date {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.8rem;
            margin-top: 10px;
            display: block;
        }

        .ala-darb-year-heading {
            margin: 30px 0 12px;
            color: #fff;
            font-size: 1.25rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
            padding-bottom: 10px;
        }

        .ala-darb-year-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
        }

        @media (max-width: 1200px) {
            .ala-darb-year-grid {
                grid-template-columns: repeat(2, minmax(220px, 1fr));
            }
        }

        @media (max-width: 768px) {
            .ala-darb-year-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .ala-darb-controls {
                flex-direction: column;
                align-items: stretch;
            }
        }

        .newsletter-featured {
            flex: 2;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 20px;
            padding: 30px;
            display: flex;
            align-items: center;
            gap: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .newsletter-archive {
            flex: 1;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 20px;
            padding: 20px;
        }

        .archive-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            color: #ccc;
            text-decoration: none;
            transition: 0.3s;
            cursor: pointer;
        }

        .archive-item:hover {
            background: rgba(255, 255, 255, 0.05);
            color: var(--accent-orange);
        }

        /* --- تنسيق برنامج على درب (معدل: فيديو رئيسي + قائمة جانبية) --- */
        .ala-darb-container {
            display: flex;
            gap: 20px;
            margin-top: 20px;
            height: 500px;
        }

        .ala-darb-main {
            flex: 2;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 15px;
            padding: 10px;
            display: flex;
            flex-direction: column;
        }

        .ala-darb-player-wrapper {
            flex-grow: 1;
            background: #000;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }

        .ala-darb-player-wrapper video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .ala-darb-info {
            padding: 15px 5px;
        }

        .ala-darb-list {
            flex: 1;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 15px;
            padding: 15px;
            overflow-y: auto;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .ala-darb-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            cursor: pointer;
            transition: 0.3s;
            border-radius: 8px;
        }

        .ala-darb-item:hover,
        .ala-darb-item.active {
            background: rgba(229, 126, 58, 0.2);
        }

        .ala-darb-item img {
            width: 80px;
            height: 50px;
            object-fit: cover;
            border-radius: 5px;
        }

        /* --- تنسيق البودكاست (معدل: Grid صور وعناوين) --- */
        .podcast-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
            margin-top: 30px;
        }

        .podcast-simple-card {
            background: rgba(0, 0, 0, 0.5);
            border-radius: 15px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: 0.3s;
            cursor: pointer;
            position: relative;
        }

        .podcast-simple-card:hover {
            transform: translateY(-5px);
            border-color: var(--accent-orange);
        }

        .podcast-thumb {
            width: 100%;
            height: 200px;
            position: relative;
        }

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

        .play-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: 0.3s;
        }

        .podcast-simple-card:hover .play-overlay {
            opacity: 1;
        }

        .podcast-title-area {
            padding: 15px;
        }

        /* --- تنسيقات عامة --- */
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            margin-bottom: 30px;
            justify-content: space-around;

        }

        .section-header div {
            flex: 1;
        }

        /* Video Popup Modal */
        .video-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 100000;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .video-modal-content {
            position: relative;
            width: 100%;
            max-width: 900px;
            background: #000;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(229, 126, 58, 0.5);
        }

        .close-modal {
            position: absolute;
            top: -40px;
            right: 0;
            color: #fff;
            font-size: 30px;
            cursor: pointer;
            z-index: 100001;
        }

        .close-modal:hover {
            color: var(--accent-orange);
        }

        @media (max-width: 992px) {
            .ala-darb-container {
                flex-direction: column;
                height: auto;
            }

            .ala-darb-main {
                height: 400px;
            }

            .ala-darb-list {
                max-height: 300px;
            }

            .newsletter-featured {
                flex-direction: column;
            }
        }

        @media (max-width: 768px) {
            .media-center-card {
                flex-direction: column;
                height: auto;
            }

            .news-img-wrapper,
            .news-content-wrapper {
                width: 100%;
            }

            .news-img-wrapper {
                height: 200px;
            }
        }

        /* --- تنسيقات كروت الأخبار الموجودة مسبقاً --- */
        .media-center-card {
            display: flex !important;
            flex-direction: column;
            padding: 0 !important;
            overflow: hidden;
            align-items: stretch;
            margin-bottom: 20px;
 background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .media-center-card>* {
            flex: 1;
        }

        .news-img-wrapper {
            width: 100%;
            flex-shrink: 0;
            position: relative;
            overflow: hidden;
        }

        .news-img-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .media-center-card:hover .news-img-wrapper img {
            transform: scale(1.1);
        }

        .news-content-wrapper {
            width: 100%;
            padding: 25px;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .news-content-wrapper p {
            font-size: 13px;
            text-align: justify;
            line-height: 1.7;
            font-weight: 400;
        }

        .media-center-card .media-center-tag {
            position: static;
            display: inline-block;
            width: fit-content;
            margin-bottom: 10px;
        }

        .news-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: auto;
            padding-top: 15px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .news-share {
            display: flex;
            gap: 10px;
        }

        .share-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #fff !important;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.1);
            text-decoration: none !important;
        }

        .share-btn:hover {
            transform: translateY(-3px);
            background: var(--accent-orange);
        }

        .share-btn.whatsapp:hover { background: #25D366; }
        .share-btn.twitter:hover { background: #000; }
        .share-btn.facebook:hover { background: #1877F2; }
        .share-btn.linkedin:hover { background: #0077B5; }

        /* Sign Language Styles (Existing) */
        .sign-container {
            display: none;
            position: fixed;
            top: 96px;
            left: 25px;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            border: 4px solid #e57e3a;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
            z-index: 9999;
            overflow: hidden;
            animation: slideUp 0.3s ease;
            background: #2a2a3e;
        }

        .sign-container.visible {
            display: block;
        }

        .sign-close-btn {
            display: none;
            position: fixed;
            z-index: 10000;
            top: calc(0px + 90px - 18px);
            left: calc(25px + 110px - 18px);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #e57e3a;
            border: 3px solid #fff;
            color: white;
            font-size: 18px;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            transition: transform 0.2s, background 0.2s;
            line-height: 1;
            padding: 0;
        }

        .sign-close-btn.visible {
            display: flex;
        }

        .sign-close-btn:hover {
            background: #d06a28;
            transform: scale(1.1);
        }

        .sign-container video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        @media (max-width: 400px) {
            .sign-container {
                width: 180px;
                height: 180px;
                bottom: 15px;
                right: 15px;
            }

            .sign-close-btn {
                bottom: calc(15px + 180px - 16px);
                right: calc(15px + 90px - 16px);
                width: 32px;
                height: 32px;
                font-size: 15px;
            }
        }

        /* تنسيق الشبكة لعرض 3 عناصر في الصف */
        .awards-grid {
            display: grid;
            /* هذا السطر هو المسؤول عن جعلها 3 في الصف */
            grid-template-columns: repeat(auto-fit, minmax(350px, 350px));
            justify-content: center;
            gap: 30px;
            /* المسافة بين الشهادات */
            margin-top: 30px;
        }



        /* تنسيق الصور لجعلها أكبر */
        .award-img {
            width: 100%;
            /* تجعل الصورة تأخذ عرض الكرت بالكامل */
            max-width: 300px;
            /* الحد الأقصى للحجم (تحكم بهذا الرقم لتكبير/تصغير الصور) */
            height: auto;
            /* للحفاظ على دقة الأبعاد */
            object-fit: contain;
            /* لضمان ظهور كامل الشهادة دون قص */
            margin-bottom: 20px;
        }

        .award-card h3 {
            font-size: 1rem;
            font-weight: bold;
            color: #ffffff;
            margin: 0;
        }

        /* تحسين للعرض على الجوال (اختياري: يجعله 1 في الصف للشاشات الصغيرة) */
        @media (max-width: 768px) {
            .awards-grid {
                grid-template-columns: repeat(1, 1fr);
            }
        }

        /* --- تنسيقات كروت الجوائز (صورة غلاف + مودل) --- */
        .award-img-wrapper {
            position: relative;
            width: 100%;
            height: 180px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-radius: 10px;
            cursor: pointer;
        }

        .award-img-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
            transition: transform 0.4s ease;
        }

        /* الطبقة الشفافة التي تظهر عند تمرير الماوس */
        .award-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(229, 126, 58, 0.85);
            /* لون برتقالي شفاف */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;
            opacity: 0;
            transition: opacity 0.3s ease;
            gap: 10px;
            font-size: 1.1rem;
            font-weight: bold;
        }

        .award-card:hover .award-overlay {
            opacity: 1;
        }

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

        /* ==========================================
                                                                                                                                                                           تنسيقات مودل معرض الصور (Gallery Lightbox)
                                                                                                                                                                           ========================================== */
        /* خلفية المودل */
        .gallery-modal-backdrop {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            /* رفعنا الرقم وأضفنا important لنجبره على تغطية الهيدر والأزرار العائمة */
            z-index: 9999999 !important;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        /* زر الإغلاق (تم نقله لليسار وتطوير شكله) */
        .gallery-close {
            position: absolute;
            top: 25px;
            left: 35px;
            right: auto;
            color: #fff;
            background: rgba(255, 255, 255, 0.15);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            font-size: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            border: 1px solid rgba(255, 255, 255, 0.3);
            z-index: 99999999 !important;
            transition: all 0.3s ease;
        }

        .gallery-close:hover {
            background: var(--accent-orange);
            border-color: var(--accent-orange);
            color: #fff;
            transform: scale(1.1) rotate(90deg);
            /* تأثير دوران خفيف عند اللمس */
        }

        /* عنوان الشهادة */
        .gallery-title {
            color: var(--accent-orange);
            font-size: 1.4rem;
            margin-bottom: 25px;
            text-align: center;
            z-index: 2;
            padding: 0 20px;
        }

        /* حاوية الصورة الأساسية */
        .gallery-content {
            position: relative;
            max-width: 80vw;
            max-height: 70vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .gallery-content img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            border-radius: 8px;
            /* توهج خفيف حول الصورة يبرزها */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(229, 126, 58, 0.15);
        }

        /* أزرار التنقل يمين ويسار الشاشة */
        .gallery-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.5);
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: #fff;
            width: 55px;
            height: 55px;
            border-radius: 50%;
            font-size: 22px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .gallery-nav-btn:hover {
            background: var(--accent-orange);
            border-color: var(--accent-orange);
            transform: translateY(-50%) scale(1.1);
        }

        .gallery-nav-right {
            right: 40px;
        }

        .gallery-nav-left {
            left: 40px;
        }

        /* العداد أسفل الصورة */
        .gallery-counter {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1.2rem;
            margin-top: 25px;
            font-weight: bold;
            letter-spacing: 3px;
            /* مهم جداً: إجبار النص من اليسار لليمين ليظهر 1 / 3 بدلاً من 3 / 1 */
            direction: ltr;
        }

        /* تعديلات لشاشات الجوال */
        @media (max-width: 768px) {
            .gallery-content {
                max-width: 95vw;
                max-height: 60vh;
            }

            .gallery-nav-btn {
                width: 45px;
                height: 45px;
                font-size: 18px;
            }

            .gallery-nav-right {
                right: 10px;
            }

            .gallery-nav-left {
                left: 10px;
            }

            .gallery-close {
                top: 15px;
                right: 20px;
                font-size: 35px;
            }

            .gallery-title {
                font-size: 1.1rem;
            }
        }

        /* --- تنسيقات الريلز (الفيديوهات الطولية) --- */
        .reels-grid {
            display: grid;
            /* عرض الكروت: كل كارت يأخذ مساحة مرنة بحد أدنى 220 بكسل */
            grid-template-columns: repeat(4, 280px);
            justify-content: center;
            ;
            gap: 20px;
            margin-top: 30px;
        }

        .reel-card {
            position: relative;
            width: 100%;
            border-radius: 15px;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.1);
            aspect-ratio: 9 / 16;
            width: 100%;
            /* max-width: 260px; */
        }

        .reel-card-ala-darb {
            position: relative;
            width: 100%;
            border-radius: 15px;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.1);
            aspect-ratio: 9 / 16;
            width: 100%;
            /* max-width: 260px; */
        }

        .reel-card:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 10px 25px rgba(229, 126, 58, 0.3);
            border-color: var(--accent-orange);
        }

        /* صورة الخلفية (الثمب نيل) */
        .reel-thumb {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .reel-card:hover .reel-thumb {
            transform: scale(1.1);
        }

        /* طبقة التراكب الداكنة للنص */
        .reel-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            /* تغطي النصف السفلي فقط بتدرج */
            background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 15px;
            z-index: 2;
        }

        /* أيقونة التشغيل في المنتصف */
        .reel-play-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 3rem;
            color: rgba(255, 255, 255, 0.8);
            z-index: 2;
            transition: 0.3s;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        .reel-card:hover .reel-play-icon {
            color: var(--accent-orange);
            transform: translate(-50%, -50%) scale(1.2);
        }

        .reel-title {
            color: #fff;
            font-size: 1rem;
            font-weight: bold;
            margin-bottom: 5px;
            line-height: 1.4;
            text-align: right;
        }

        .reel-description {
            color: #ddd;
            font-size: 0.9rem;
            margin-top: 10px;
            line-height: 1.5;
            text-align: right;
            max-height: 4.2rem;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .reel-action {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            justify-content: center;
            margin-top: 12px;
            padding: 10px 16px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
            color: var(--accent-orange);
            font-weight: 700;
            font-size: 0.95rem;
            cursor: pointer;
            transition: background 0.3s ease, transform 0.2s ease;
        }

        .reel-action i {
            font-size: 1.25rem;
        }

        .reel-action:hover {
            background: rgba(255, 255, 255, 0.16);
            transform: translateY(-1px);
        }

        .reel-date {
            color: #ccc;
            font-size: 0.8rem;
            text-align: right;
        }

        /* استجابة للشاشات الصغيرة جداً */
        @media (max-width: 480px) {
            .reels-grid {
                grid-template-columns: repeat(2, 1fr);
                /* 2 في الصف للجوال */
                gap: 10px;
            }

            .reel-title {
                font-size: 0.9rem;
            }
        }

        /* ==========================================
                                                                                                                                                                                                                                                                                       إصلاحات شاشات الجوال (عنصر واحد في الصف)
                                                                                                                                                                                                                                                                                       ========================================== */
        @media (max-width: 768px) {

            /* قسم الشهادات والجوائز */
            .awards-grid {
                grid-template-columns: 1fr !important;
            }

            /* أقسام الفيديوهات والريلز (نشرة تانكي، على درب، البودكاست) */
            .reels-grid {
                grid-template-columns: 1fr !important;
            }

            /* شبكة البودكاست (في حال استخدامها) */
            .podcast-grid {
                grid-template-columns: 1fr !important;
            }

            /* كروت الأخبار */
            .media-center-card {
                flex-direction: column !important;
                height: auto !important;
                width: 100% !important;
            }
        }

        /* تعديل الشاشات الصغيرة جداً (إلغاء العنصرين في الصف) */
        @media (max-width: 480px) {
            .reels-grid {
                grid-template-columns: 1fr !important;
                /* تم التعديل من 2 إلى 1 */
                gap: 15px;
            }

            /* تقليل الارتفاع قليلاً في الجوال حتى لا تأخذ الشاشة بالكامل */
            .reel-card {
                max-width: 350px;
                margin: 0 auto;
                width: 100%;
            }
        }

        /* ==========================================
                                                                                                                                                                                                                                                                                       إصلاح كروت الأخبار والبيانات لشاشات الجوال
                                                                                                                                                                                                                                                                                       ========================================== */
        @media (max-width: 768px) {
            .section-header {
                display: flex;
                justify-content: space-between;
                align-items: stretch;
                flex-wrap: wrap;
                margin-bottom: 30px;
                flex-direction: column;
                align-content: space-around;
            }

            /* 1. جعل الكارت عمودي (صورة فوق، نص تحت) */
            .media-center-card {
                flex-direction: column !important;
                height: auto !important;
                width: 100% !important;
            }

            /* 2. ضبط مساحة الصورة لتأخذ العرض بالكامل مع ارتفاع مناسب */
            .news-img-wrapper {
                width: 100% !important;
                height: 250px !important;
                /* يمكنك تعديل الرقم حسب رغبتك */
                flex-shrink: 0;
            }

            /* 3. منع تمطيط الصورة وتشويهها */
            .news-img-wrapper img {
                width: 100% !important;
                height: 100% !important;
                object-fit: cover !important;
                /* هذا السطر يمنع ضغط الصورة */
            }

            /* 4. مساحة النص لتأخذ العرض بالكامل مع هوامش مريحة */
            .news-content-wrapper {
                width: 100% !important;
                padding: 20px !important;
            }

            /* 5. تحسين أزرار الفلتر (الكل، إعلانات، عاجل) لكي لا تخرج من الشاشة */
            .media-center-filter {
                display: flex;
                flex-wrap: nowrap !important;
                gap: 10px;
                justify-content: center;
                margin-bottom: 15px;
            }

            .filter-tab {
                flex: 1 1 calc(50% - 15px);
                /* كل زر يأخذ نصف الشاشة تقريباً */
                text-align: center;
                font-size: 14px;
                padding: 8px 5px;
            }
        }

        /* ====== YouTube Reels Modal ====== */
        .yt-modal-backdrop {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            z-index: 100000;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .yt-modal-backdrop.open {
            display: flex;
        }

        .yt-modal-box {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            max-height: 95vh;
        }

        /* زر الإغلاق */
        .yt-modal-box .yt-close {
            position: absolute;
            top: -15px;
            right: -15px;
            color: #fff;
            font-size: 28px;
            cursor: pointer;
            z-index: 10;
            background: rgba(0, 0, 0, 0.7);
            border: 2px solid rgba(255, 255, 255, 0.3);
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            line-height: 1;
        }

        .yt-modal-box .yt-close:hover {
            background: var(--accent-orange);
            border-color: var(--accent-orange);
            transform: scale(1.1);
        }

        /* الفيديو */
        .yt-modal-player {
            position: relative;
            height: 85vh;
            aspect-ratio: 9 / 16;
            max-width: 90vw;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 0 40px rgba(229, 126, 58, 0.35);
            background: #000;
            order: 0;
        }

        .yt-modal-player iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        /* أزرار التنقل */
        .yt-nav-btn {
            background: rgba(0, 0, 0, 0.6);
            border: 2px solid rgba(255, 255, 255, 0.25);
            color: #fff;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            flex-shrink: 0;
        }

        .yt-nav-btn:hover {
            background: var(--accent-orange);
            border-color: var(--accent-orange);
            transform: scale(1.1);
        }

        /* ===== Desktop: الأزرار على أطراف الفيديو ===== */
        .yt-nav-row {
            display: contents;
        }

        .yt-btn-right {
            order: -1;
            /* يظهر قبل الفيديو = على اليمين في RTL */
        }

        .yt-btn-left {
            order: 1;
            /* يظهر بعد الفيديو = على اليسار في RTL */
        }

        /* ===== Mobile & Tablet: الأزرار تحت الفيديو جنب بعض ===== */
        @media (max-width: 768px) {
            .yt-modal-box {
                flex-direction: column;
                align-items: center;
                gap: 15px;
            }

            .yt-modal-player {
                order: 1;
                height: 70vh;
                aspect-ratio: 9 / 16;
                max-width: 85vw;
            }

            .yt-modal-box .yt-close {
                position: absolute;
                top: -10px;
                right: -5px;
            }

            /* الحاوية تتحول من contents إلى flex row */
            .yt-nav-row {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 40px;
                order: 2;
            }

            /* إلغاء order الخاص بالديسكتوب */
            .yt-btn-right,
            .yt-btn-left {
                order: unset;
            }

            .yt-nav-btn {
                width: 50px;
                height: 50px;
                font-size: 18px;
            }
        }

        @media (max-width: 480px) {
            .yt-modal-player {
                height: 65vh;
                max-width: 90vw;
            }

            .yt-nav-row {
                gap: 30px;
            }

            .yt-nav-btn {
                width: 46px;
                height: 46px;
            }
        }

        /* --- تنسيقات البودكاست (عرض أفقي Landscape) --- */
        .podcast-landscape-grid {
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
        }

        .podcast-card-landscape {
            aspect-ratio: 16 / 9 !important;
        }

        /* المودال بوضع أفقي للبودكاست */
        .yt-modal-player.landscape {
            aspect-ratio: 16 / 9 !important;
            height: auto !important;
            width: 85vw !important;
            max-width: 960px;
            max-height: 85vh;
        }

        @media (max-width: 768px) {
            .podcast-landscape-grid {
                grid-template-columns: 1fr !important;
            }

            .yt-modal-player.landscape {
                width: 95vw !important;
                max-width: none;
            }
        }

        @media (max-width: 480px) {
            .podcast-card-landscape {
                max-width: none !important;
            }

            .yt-modal-player.landscape {
                width: 95vw !important;
            }
        }

        /* --- إصلاح صفحة الأخبار فقط --- */
        .media-center-grid {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 20px !important;
            justify-content: flex-start !important;
        }

        .media-center-grid>* {
            flex: 0 0 calc((100% - 40px) / 3) !important;
            max-width: calc((100% - 40px) / 3) !important;
            min-width: calc((100% - 40px) / 3) !important;
            width: calc((100% - 40px) / 3) !important;
        }

        @media (max-width: 1024px) {
            .media-center-grid>* {
                flex: 0 0 calc((100% - 20px) / 2) !important;
                max-width: calc((100% - 20px) / 2) !important;
                min-width: calc((100% - 20px) / 2) !important;
                width: calc((100% - 20px) / 2) !important;
            }
        }

        @media (max-width: 768px) {
            .media-center-grid {
                flex-wrap: nowrap !important;

            }

            .media-center-grid {
                display: flex !important;
                flex-direction: column !important;
                align-items: stretch !important;
                justify-content: flex-start !important;
                gap: 15px !important;
                width: 100% !important;
                overflow-x: hidden !important;
            }

            .media-center-grid>* {
                flex: 0 0 auto !important;
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                box-sizing: border-box !important;
            }

            .media-center-card {
                flex-direction: column !important;
                width: 100% !important;
                min-width: 0 !important;
            }

            .news-img-wrapper,
            .news-content-wrapper {
                width: 100% !important;
                box-sizing: border-box !important;
            }

            .news-img-wrapper {
                height: auto !important;
                max-height: 320px !important;
            }

            .news-img-wrapper img {
                width: 100% !important;
                height: auto !important;
                object-fit: cover !important;
            }

            .news-content-wrapper {
                padding: 20px !important;
            }
        }

        @media (max-width: 768px) {
            .glass-card {
                display: block !important;
            }
        }
    </style>

    <style>
        @media (max-width: 768px) {

            .awards-split-grid .award-card.main-award {
                display: flex;
                flex-direction: column;
                min-height: auto;
                padding: 15px;
            }

            .awards-split-grid .award-card.main-award .award-img-wrapper {
                position: relative;
                top: unset;
                left: unset;
                height: auto;
                margin-bottom: 10px;
            }

            .awards-split-grid .award-card.main-award .award-img-wrapper img {
                width: 100%;
                height: auto;
                object-fit: contain;
                padding: 0;
            }

            .awards-split-grid .award-card.main-award h3 {
                position: static;
                padding: 0;
                margin: 0 0 8px;
                background: none;
                text-align: center;
            }

            .awards-split-grid .award-card.main-award p {
                margin: 0;
                text-align: center;
                line-height: 1.6;
                color: #ddd;
            }

            /* إزالة أي فراغ علوي */
            .awards-split-grid {
                margin-top: 0;
            }
        }
    </style>
@endpush


@section('content')


    <!-- القائمة الجانبية (معدلة لتناسب الأقسام) -->
    <aside class="sidebar">
        <div class="logo-area">
            {{-- <button class="menu-trigger btn-bars btn p-0 border-0 text-white d-none d-lg-block" type="button"
                onclick="app.toggleMenu()">
                <i class="fas fa-bars" style="font-size: 1.5rem;"></i>
            </button> --}}
        </div>

        <nav class="nav-icons">
            <!-- 1. زر الأخبار -->
            <button class="sidebar-nav-btn active" onclick="showSection('media-center')"
                title="{{ __('media.news_title') }}">
                <i class="fas fa-newspaper" style="font-size: 16px;"></i>
                <span class="tab-label d-lg-none">{{ __('media.news') }}</span>
            </button>

            <!-- 2. زر الشهادات -->
            @if (!empty($awardsItems))
                <button class="sidebar-nav-btn" onclick="showSection('awards')" title="{{ __('media.awards_title') }}">
                    <i class="fas fa-medal" style="font-size: 16px;"></i>
                    <span class="tab-label d-lg-none">{{ __('media.awards') }}</span>
                </button>
            @endif

            <!-- 3. تانكي -->
            @if (!empty($tankiReels))
                <button class="sidebar-nav-btn" onclick="showSection('tanki-newsletter')" title="{{ __('media.tanki_title') }}">
                    <i class="fas fa-video" style="font-size: 16px;"></i>
                    <span class="tab-label d-lg-none">{{ __('media.tanki') }}</span>
                </button>
            @endif

            <!-- 4. على درب -->
            @if (!empty($programReels))
                <button class="sidebar-nav-btn" onclick="showSection('ala-darb')" title="{{ __('media.ala_darb_title') }}">
                    <i class="fas fa-road" style="font-size: 16px;"></i>
                    <span class="tab-label d-lg-none">{{ __('media.ala_darb') }}</span>
                </button>
            @endif

            <!-- 5. البودكاست -->
            @if (!empty($podcastReels))
                <button class="sidebar-nav-btn" onclick="showSection('podcasts')" title="{{ __('media.podcasts_title') }}">
                    <i class="fas fa-microphone-alt" style="font-size: 16px;"></i>
                    <span class="tab-label d-lg-none">{{ __('media.podcasts') }}</span>
                </button>
            @endif
        </nav>
    </aside>

    <!-- منطقة المحتوى الرئيسي -->
    <main class="content-area bg-img">

        <!-- ================= قسم 1: الأخبار والبيانات (بدون تعديل) ================= -->
        <section id="media-center" class="content-section active">
            <div  >
                <div class="section-header">
                    <div>
                        <h1 class="custom-title">{{ $newsPageTitle }}</h1>
                    </div>
                </div>

                <div class="media-center-filter">
                    {{-- تبويب الكل ثابت --}}
                    <button class="filter-tab active" onclick="filterMediaCenter('all', this)">
                        {{ __('media.all') }}
                    </button>
                    {{-- التابات الديناميكية حسب المجموعات القادمة من الـ API --}}
                    @foreach ($newsGroups as $group)
                        <button class="filter-tab" onclick="filterMediaCenter('{{ $group['key'] }}', this)">
                            {{ $group['label'] }}
                        </button>
                    @endforeach
                </div>

                <div class="media-center-grid">

                    @forelse($news as $item)
                        <div class="media-center-card" data-category="{{ $item['group_key'] }}">
                            <!-- الصورة الطولية -->
                            <div class="news-img-wrapper">
                                @if ($item['image_url'])
                                    <img src="{{ $item['image_url'] }}" alt="{{ $item['title'] }}" width="200" height="300">
                                @else
                                    <img src="{{ asset('images/drbBg.png') }}" alt="{{ $item['title'] }}">
                                @endif
                            </div>

                            <!-- المحتوى -->
                            <div class="news-content-wrapper">
                                <span class="media-center-tag">
                                    {{ $item['group_label'] ?? __('media.news') }}
                                </span>

                                <div class="media-center-date">
                                    {{ $item['date'] }}
                                </div>

                                <h3>
                                    <a href="{{ route('components/newsDetails', $item['id']) }}" style="color: inherit; text-decoration: none;">
                                        {{ $item['title'] }}
                                    </a>
                                </h3>

                                <p>{!! \App\Helpers\TextHelper::linkify(\Illuminate\Support\Str::limit(strip_tags($item['description']), 150)) !!}</p>

                                <div class="news-footer">
                                    <a href="{{ route('components/newsDetails', $item['id']) }}" class="read-more-link" style="color: var(--accent-orange); font-weight: bold; text-decoration: none; display: inline-flex; align-items: center; gap: 5px;">
                                        {{ __('home.home')}}
                                        <i class="fas fa-arrow-left"></i>
                                    </a>

                                    <div class="news-share">
                                        <a href="https://wa.me/?text={{ urlencode(($item['title'] ?? '') . ' ' . route('components/newsDetails', $item['id'])) }}" target="_blank" class="share-btn whatsapp" title="WhatsApp">
                                            <i class="fab fa-whatsapp"></i>
                                        </a>
                                        <a href="https://twitter.com/intent/tweet?text={{ urlencode($item['title'] ?? '') }}&url={{ urlencode(route('components/newsDetails', $item['id'])) }}"
   target="_blank"
   class="share-btn twitter"
   title="X (Twitter)">
    
    <img src="/images/x.png" alt="X" style="width: 18px; height: 18px;">
</a>
                                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(route('components/newsDetails', $item['id'])) }}" target="_blank" class="share-btn facebook" title="Facebook">
                                            <i class="fab fa-facebook-f"></i>
                                        </a>
                                        <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode(route('components/newsDetails', $item['id'])) }}&title={{ urlencode($item['title'] ?? '') }}" target="_blank" class="share-btn linkedin" title="LinkedIn">
                                            <i class="fab fa-linkedin-in"></i>
                                        </a>
                                        <a href="javascript:void(0)" onclick="copyToClipboard('{{ route('components/newsDetails', $item['id']) }}')" class="share-btn copy" title="{{ __('media.copy_link') ?? 'نسخ الرابط' }}">
                                            <i class="fas fa-link"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        {{-- في حال عدم وجود بيانات --}}
                    @endforelse

                </div>
            </div>
        </section>

        <!-- ================= قسم 2: الشهادات والجوائز (معدل: سلايدر صور) ================= -->
        @if (!empty($awardsItems))
            <section id="awards" class="content-section">
                <div  >
                    <div class="section-header">
                        <div>
                            <h1 class="custom-title">
                                {{ $awardsMeta->title ?? __('media.awards_meta_title') }}
                            </h1>

                            <p>
                                {{ $awardsMeta->description ?? __('media.awards_meta_desc') }}
                            </p>
                        </div>
                    </div>

                    <div class="awards-split-grid">
                        @if (count($awardsItems) > 0)
                            @foreach ($awardsItems as $index => $award)
                                <div class="award-card {{ $index === 0 ? 'main-award' : '' }}" data-title="{{ $award['title'] }}"
                                    data-images='@json($award['images'])' onclick="openGalleryModal(this)">
                                    <div class="award-img-wrapper">
                                        <img src="{{ $award['cover_image'] ?? asset('images/drbBg.png') }}" alt="{{ $award['title'] }}">
                                    </div>
                                    <h3>{{ $award['title'] }}</h3>
                                    <p>{{ $award['description_1'] ?? '' }}</p>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </section>
        @endif

        <!-- ================= قسم 3: نشرة تانكي ================= -->
        @if (!empty($tankiReels))
            <section id="tanki-newsletter" class="content-section">
                <div  >
                    <div class="section-header">
                        <div>
                            <h1 class="custom-title">{{ __('media.tanki_title') }}</h1>
                        </div>
                    </div>

                    <div class="ala-darb-year-grid" data-yt-group="tanki">
                        @foreach ($tankiReels as $reel)
                            <div class="reel-card ala-darb-card" data-yt="{{ $reel['url'] }}" @if (!empty($reel['date_label']))
                            data-date="{{ $reel['date_label'] }}" @endif>

                                {{-- الصورة --}}
                                <div class="ala-darb-logo">
                                    <img src="{{ $reel['photo'] ?? asset('images/tankyLogo.png') }}"
                                        alt="{{ $reel['title'] ?? 'Tanky' }}" class="reel-thumb">
                                </div>

                                {{-- المحتوى --}}
                                <div class="ala-darb-content">

                                    <h3>
                                        {{ $reel['title'] ?? __('media.tanki_title') }}
                                    </h3>

                                    @if (!empty($reel['description']))
                                        <p>
                                            {{ $reel['description'] ?? __('media.tanki_description') }}
                                        </p>
                                    @endif

                                </div>

                            </div>
                        @endforeach
                    </div>
                </div>
            </section>
        @endif

        <!-- ================= قسم 4: برنامج على درب ================= -->
        @if (!empty($programCategories))
            <section id="ala-darb" class="content-section">
                <div  >

                    <div class="section-header">
                        <h1 class="custom-title">{{ __('media.ala_darb_title') }}</h1>
                    </div>

                    <!-- تبويبات التصنيفات -->
                    <div class="ala-darb-controls">
                        <div class="ala-darb-tabs">
                            @foreach ($programCategories as $index => $category)
                                <button class="filter-tab {{ $index === 0 ? 'active' : '' }}"
                                    onclick="filterAlaDarbCategory('{{ $category['id'] }}', this)">
                                    {{ $category['title'] }}
                                </button>
                            @endforeach
                        </div>
                    </div>

                    <!-- الأقسام بحسب التصنيفات -->
                    @foreach ($programCategories as $index => $category)
                        <div class="ala-darb-category-section" id="ala-darb-category-{{ $category['id'] }}"
                            style="{{ $index === 0 ? '' : 'display: none;' }}">

                            @foreach ($category['programs_by_year'] as $year => $programs)
                                <div class="ala-darb-year-group" data-year-group="{{ $year }}">
                                    <h2 class="ala-darb-year-heading">{{ $year }}</h2>

                                    <div class="ala-darb-year-grid">
                                        @foreach ($programs as $reel)
                                            <div class="reel-card ala-darb-card" data-yt="{{ $reel['url'] }}" data-year="{{ $year }}">
                                                <div class="ala-darb-logo">
                                                    @if (!empty($reel['thumb']))
                                                        <img src="{{ $reel['thumb'] }}" class="reel-thumb">
                                                    @endif
                                                </div>

                                                <div class="ala-darb-content">
                                                    <h3>
                                                        {{ $reel['title'] ?? __('media.loading') }}
                                                    </h3>

                                                    @if (!empty($reel['description']))
                                                        <p>{{ $reel['description'] }}</p>
                                                    @endif



                                                </div>
                                                {{--<div class="ala-darb-action">
                                                    <span>{{ __('media.Watch_now') }}</span>
                                                    <i class="fas fa-play-circle"></i>
                                                </div>--}}
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach

                        </div>
                    @endforeach

                </div>
            </section>
        @endif

        <!-- ================= قسم 5: بودكاست درب ================= -->
        @if (!empty($podcastReels))
            <section id="podcasts" class="content-section">
                <div  >
                    <div class="section-header">
                        <div>
                            <h1 class="custom-title">{{ __('media.podcasts_title') }}</h1>
                        </div>
                    </div>

                    <div class="reels-grid podcast-landscape-grid" data-yt-group="podcasts" data-yt-format="landscape">
                        @foreach ($podcastReels as $reel)
                            <div class="reel-card podcast-card-landscape" data-yt="{{ $reel['url'] }}">
                                @if ($reel['thumb'])
                                    <img src="{{ $reel['thumb'] }}" class="reel-thumb" alt="بودكاست">
                                @endif
                                <div class="reel-play-icon"><i class="fas fa-play-circle"></i></div>
                                <div class="reel-overlay">
                                    <div class="reel-title">{{ __('media.loading') }}</div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>
        @endif

        <!-- ================= قسم 5: البودكاست (معدل: كروت صور وعناوين + بوب اب) ================= -->

        @include('partials.footerPages')

        <!-- ===== Gallery Images Modal ===== -->

    </main>
    <!-- ===== Gallery Images Modal (التصميم الجديد) ===== -->
    <div id="galleryModal" class="gallery-modal-backdrop" style="display:none"
        onclick="if(event.target===this) closeGalleryModal()">

        <!-- زر الإغلاق -->
        <button class="gallery-close" onclick="closeGalleryModal()">&times;</button>

        <!-- أزرار التنقل (عائمة على الأطراف) -->
        <!-- السهم الأيمن (للسابق في اللغة العربية) -->
        <button class="gallery-nav-btn gallery-nav-right" onclick="navigateGallery(-1)">
            <i class="fas fa-chevron-right"></i>
        </button>

        <!-- السهم الأيسر (للتالي في اللغة العربية) -->
        <button class="gallery-nav-btn gallery-nav-left" onclick="navigateGallery(1)">
            <i class="fas fa-chevron-left"></i>
        </button>

        <!-- العنوان -->
        <h3 id="galleryTitle" class="gallery-title"></h3>

        <!-- حاوية الصورة -->
        <div class="gallery-content">
            <img id="galleryImage" src="" alt="Certificate">
        </div>

        <!-- العداد (تم إجباره على اليسار لليمين ليظهر 1 / 3 بشكل صحيح) -->
        <div id="galleryCounter" class="gallery-counter"></div>

    </div>
    <!-- ===== YouTube Modal ===== -->
    <div id="ytModal" class="yt-modal-backdrop" style="display:none" onclick="if(event.target===this) closeYtModal()">
        <div class="yt-modal-box">
            <!-- زر الإغلاق -->
            <button class="yt-close" onclick="closeYtModal()">&times;</button>

            <!-- الفيديو -->
            <div class="yt-modal-player">
                <iframe id="ytIframe" src="" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </div>

            <!-- أزرار التنقل -->
            <div class="yt-nav-row">
                <button class="yt-nav-btn yt-btn-right" onclick="navigateYt(1)">
                    <i class="fas fa-chevron-right"></i>
                </button>
                <button class="yt-nav-btn yt-btn-left" onclick="navigateYt(-1)">
                    <i class="fas fa-chevron-left"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- زر إغلاق مترجم لغة الإشارة -->
    <button class="sign-close-btn" id="signCloseBtn" onclick="toggleSign()">✕</button>

    <!-- كارد مترجم لغة الإشارة -->
    <div class="sign-container" id="signAvatar">
        <video autoplay loop muted playsinline preload="auto">
            <source src="{{ asset('images/video.mp4') }}" type="video/mp4">
        </video>
    </div>

    @push('scripts')
        <script>
            // ================== عرض الأقسام (Sidebar Sections) ==================
            function showSection(sectionId) {
                // إخفاء كل الأقسام
                document.querySelectorAll('.content-section').forEach(section => {
                    section.classList.remove('active');
                    section.style.display = 'none';
                });

                // إزالة Active من كل أزرار القائمة الجانبية
                document.querySelectorAll('.sidebar-nav-btn').forEach(btn => {
                    btn.classList.remove('active');
                });

                // إظهار القسم المطلوب
                const targetSection = document.getElementById(sectionId);
                if (targetSection) {
                    targetSection.classList.add('active');
                    targetSection.style.display = 'block';
                    window.scrollTo({
                        top: 0,
                        behavior: 'smooth'
                    });
                }

                // تفعيل الزر المرتبط بالقسم
                const activeBtn = document.querySelector(`button[onclick="showSection('${sectionId}')"]`);
                if (activeBtn) activeBtn.classList.add('active');
            }

            // ================== فلترة الأخبار (Tabs + Cards) ==================
            function filterMediaCenter(category, btn) {
                // 1) تحديث حالة الأزرار (Active)
                const allTabs = document.querySelectorAll('.media-center-filter .filter-tab');
                allTabs.forEach(tab => tab.classList.remove('active'));
                if (btn) {
                    btn.classList.add('active');
                }

                // 2) إظهار/إخفاء الكروت حسب data-category
                const allCards = document.querySelectorAll('.media-center-card');
                allCards.forEach(card => {
                    const cardCategory = card.getAttribute('data-category');

                    if (category === 'all' || category === cardCategory) {
                        // نستخدم flex للحفاظ على التصميم
                        card.style.setProperty('display', 'flex', 'important');
                    } else {
                        card.style.setProperty('display', 'none', 'important');
                    }
                });
            }

            // ================== فلترة برنامج على درب (تبويبات التصنيفات) ==================
            function filterAlaDarbCategory(categoryId, btn) {
                const tabs = document.querySelectorAll('.ala-darb-tabs .filter-tab');
                tabs.forEach(tab => tab.classList.remove('active'));
                if (btn) {
                    btn.classList.add('active');
                }

                document.querySelectorAll('.ala-darb-category-section').forEach(section => {
                    section.style.display = section.id === 'ala-darb-category-' + categoryId ? '' : 'none';
                });
            }

            // ================== لغة الإشارة ==================
            function toggleSign() {
                var avatar = document.getElementById("signAvatar");
                var closeBtn = document.getElementById("signCloseBtn");
                var isVisible = avatar.classList.contains("visible");

                if (isVisible) {
                    avatar.classList.remove("visible");
                    closeBtn.classList.remove("visible");
                } else {
                    avatar.classList.add("visible");
                    closeBtn.classList.add("visible");

                    // إعادة تشغيل الأنيميشن
                    avatar.style.animation = 'none';
                    avatar.offsetHeight;
                    avatar.style.animation = 'slideUp 0.3s ease';
                }
            }

            // ================== YouTube Modal (Shorts + Videos) ==================
            let currentGroupCards = [];
            let currentCardIndex = 0;
            let currentFormat = 'shorts'; // 'shorts' أو 'landscape'

            // استخراج Video ID من أي رابط يوتيوب
            function extractYouTubeId(url) {
                const shortsMatch = url.match(/shorts\/([a-zA-Z0-9_-]{11})/);
                if (shortsMatch) return shortsMatch[1];

                const regExp = /^.*(?:youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
                const match = url.match(regExp);
                return (match && match[1].length === 11) ? match[1] : null;
            }

            // فتح مودال يوتيوب
            function openYtModal(card) {
                const grid = card.closest('.reels-grid') || card.closest('.ala-darb-year-grid');
                currentGroupCards = Array.from(grid.querySelectorAll('.reel-card[data-yt]'));
                currentCardIndex = currentGroupCards.indexOf(card);

                // تحديد الوضع: عمودي (shorts) أم أفقي (landscape)
                currentFormat = grid?.dataset?.ytFormat || 'shorts';
                const player = document.querySelector('.yt-modal-player');

                if (currentFormat === 'landscape') {
                    player.classList.add('landscape');
                } else {
                    player.classList.remove('landscape');
                }

                loadYtVideo(currentCardIndex);

                const modal = document.getElementById('ytModal');
                modal.style.display = 'flex';
                modal.classList.add('open');
                document.body.style.overflow = 'hidden';
            }

            // تحميل فيديو داخل المودال
            function loadYtVideo(index) {
                const card = currentGroupCards[index];
                const videoId = extractYouTubeId(card.dataset.yt);
                const iframe = document.getElementById('ytIframe');
                iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0&loop=1&playlist=${videoId}`;
            }

            // التنقل بين الفيديوهات
            function navigateYt(step) {
                currentCardIndex += step;
                if (currentCardIndex >= currentGroupCards.length) currentCardIndex = 0;
                else if (currentCardIndex < 0) currentCardIndex = currentGroupCards.length - 1;
                loadYtVideo(currentCardIndex);
            }

            // إغلاق مودال يوتيوب
            function closeYtModal() {
                const modal = document.getElementById('ytModal');
                const iframe = document.getElementById('ytIframe');
                iframe.src = '';
                modal.classList.remove('open');
                modal.style.display = 'none';
                document.body.style.overflow = '';
            }

            // دعم لوحة المفاتيح لمودال يوتيوب
            document.addEventListener('keydown', function (e) {
                const modal = document.getElementById('ytModal');
                if (!modal || !modal.classList.contains('open')) return;

                if (e.key === 'Escape') closeYtModal();
                if (e.key === 'ArrowRight') navigateYt(-1); // يمين = السابق (لأن الواجهة عربية)
                if (e.key === 'ArrowLeft') navigateYt(1); // يسار = التالي
            });

            // جلب عنوان الفيديو تلقائياً من YouTube عبر noembed
            function fetchYouTubeTitle(card) {
                const url = card.dataset.yt;
                const titleEl = card.querySelector('.reel-title');
                if (!titleEl) return;

                const videoId = extractYouTubeId(url);
                if (!videoId) return;

                const standardUrl = 'https://www.youtube.com/watch?v=' + videoId;

                fetch('https://noembed.com/embed?url=' + encodeURIComponent(standardUrl))
                    .then(function (res) {
                        return res.json();
                    })
                    .then(function (data) {
                        if (data.title) {
                            titleEl.textContent = data.title;
                        } else {
                            titleEl.textContent = '';
                        }
                    })
                    .catch(function () {
                        titleEl.textContent = '';
                    });
            }

            // ================== Gallery Modal (صور الجوائز) ==================
            let currentGalleryImages = [];
            let currentGalleryIndex = 0;

            // فتح مودال الصور
            function openGalleryModal(card) {
                try {
                    currentGalleryImages = JSON.parse(card.getAttribute('data-images'));
                } catch (e) {
                    console.error("خطأ في قراءة روابط الصور من data-images");
                    return;
                }

                if (!currentGalleryImages || currentGalleryImages.length === 0) return;

                const title = card.getAttribute('data-title') || '';
                document.getElementById('galleryTitle').innerText = title;

                currentGalleryIndex = 0;
                updateGalleryView();

                const modal = document.getElementById('galleryModal');
                modal.style.display = 'flex';
                document.body.style.overflow = 'hidden';
            }

            // إغلاق مودال الصور
            function closeGalleryModal() {
                const modal = document.getElementById('galleryModal');
                modal.style.display = 'none';
                document.body.style.overflow = '';
            }

            // التنقل بين الصور
            function navigateGallery(step) {
                currentGalleryIndex += step;

                if (currentGalleryIndex >= currentGalleryImages.length) {
                    currentGalleryIndex = 0;
                } else if (currentGalleryIndex < 0) {
                    currentGalleryIndex = currentGalleryImages.length - 1;
                }

                updateGalleryView();
            }

            // تحديث الصورة والعداد
            function updateGalleryView() {
                const imgEl = document.getElementById('galleryImage');
                const counterEl = document.getElementById('galleryCounter');

                imgEl.src = currentGalleryImages[currentGalleryIndex];
                counterEl.innerText = `${currentGalleryIndex + 1} / ${currentGalleryImages.length}`;
            }

            // دعم الكيبورد لمودال الصور
            document.addEventListener('keydown', function (e) {
                const galleryModal = document.getElementById('galleryModal');
                if (!galleryModal || galleryModal.style.display !== 'flex') return;

                if (e.key === 'Escape') closeGalleryModal();
                if (e.key === 'ArrowRight') navigateGallery(-1); // يمين = السابق
                if (e.key === 'ArrowLeft') navigateGallery(1); // يسار = التالي
            });

            // ================== عند تحميل الصفحة ==================
            document.addEventListener('DOMContentLoaded', function () {
                // تشغيل القسم الأول
                showSection('media-center');

                // ربط كروت الـ Reels بالمودال + جلب عناوين يوتيوب
                document.querySelectorAll('.reel-card[data-yt]').forEach(card => {
                    // إزالة أي onclick قديم (لو موجود في الـ HTML)
                    card.removeAttribute('onclick');

                    // فتح مودال يوتيوب عند الضغط
                    card.addEventListener('click', function () {
                        openYtModal(this);
                    });

                    // إذا كان هذا الكرت من قسم "على درب" فنستخدم عنوان API المترجم، لا نُبدله بعنوان YouTube.
                    if (!card.classList.contains('ala-darb-card')) {
                        fetchYouTubeTitle(card);
                    }
                });

                // (اختياري) تطبيق فلتر "الكل" عند البداية لو حاب تتحكم يدوياً
                // const firstTab = document.querySelector('.media-center-filter .filter-tab');
                // if (firstTab) filterMediaCenter('all', firstTab);
            });

            // نسخ الرابط إلى الحافظة
            function copyToClipboard(text) {
                if (navigator.clipboard && window.isSecureContext) {
                    navigator.clipboard.writeText(text).then(() => {
                        showCopySuccess();
                    }).catch(err => {
                        console.error('Failed to copy: ', err);
                        fallbackCopyToClipboard(text);
                    });
                } else {
                    fallbackCopyToClipboard(text);
                }
            }

            function fallbackCopyToClipboard(text) {
                const textArea = document.createElement("textarea");
                textArea.value = text;
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();
                try {
                    document.execCommand('copy');
                    showCopySuccess();
                } catch (err) {
                    console.error('Fallback: Oops, unable to copy', err);
                }
                document.body.removeChild(textArea);
            }

            function showCopySuccess() {
                Swal.fire({
                    icon: 'success',
                    title: '{{ __("media.link_copied") ?? "تم نسخ الرابط" }}',
                    showConfirmButton: false,
                    timer: 1500,
                    toast: true,
                    position: 'top-end',
                    background: '#1a1a1a',
                    color: '#fff',
                    iconColor: '#e57e3a'
                });
            }
        </script>
        <script src="{{ asset('js/script.js') }}"></script>
    @endpush
@endsection