@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())
@section('content')

@push('styles')
    @vite('resources/css/about.css')
    @vite('resources/css/header.css')
    @vite('resources/css/general.css')

    <style>
        /* تنسيق حقول الإدخال لتتناسب مع الوضع الليلي/الزجاجي */
        .care-input {
            text-align: right;
            width: 100%;
            background: #313131f2;
            border: 1px solid rgb(255 255 255 / 30%);
            padding: 15px;
            border-radius: 10px;
            color: #fff;
            margin-bottom: 15px;
            transition: 0.3s;
        }

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

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

        /* شبكة قنوات التواصل */
        .contact-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .contact-grid.social {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .contact-card {
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            padding: 15px;
            border-radius: 15px;
            text-align: center;
            transition: 0.3s;
            cursor: pointer;
            text-decoration: none !important;
            display: block;
            color: #fff;
            height: max-content;
        }

        @media (min-width: 1200px) {

            .contact-grid .h3,
            .contact-grid h3 {
                font-size: 1.3rem;
            }
        }

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

        .contact-card i {
            font-size: 2.5rem;
            color: var(--accent-orange);
            margin-bottom: 15px;
            display: block;
            transition: color 0.3s;
        }

        /* تنسيقات خاصة لأزرار التواصل الاجتماعي الملونة */
        .social-card.twitter:hover {
            border-color: #fff;
            background: rgba(255, 255, 255, 0.1);
        }

        .social-card.linkedin:hover {
            border-color: #0077b5;
            background: rgba(0, 119, 181, 0.1);
        }

        .social-card.instagram:hover {
            border-color: #e1306c;
            background: rgba(225, 48, 108, 0.1);
        }

        .social-card.snapchat:hover {
            border-color: #fffc00;
            background: rgba(255, 252, 0, 0.1);
        }

        .social-card.youtube:hover {
            border-color: #ff0000;
            background: rgba(255, 0, 0, 0.1);
        }

        .social-card.twitter:hover i {
            color: #fff;
        }

        .social-card.linkedin:hover i {
            color: #0077b5;
        }

        .social-card.instagram:hover i {
            color: #e1306c;
        }

        .social-card.snapchat:hover i {
            color: #fffc00;
        }

        .social-card.youtube:hover i {
            color: #ff0000;
        }

        .social-card.tiktok:hover {
            border-color: #FE2C55;
            background: rgba(254, 44, 85, 0.1);
        }

        .social-card.tiktok:hover i {
            color: #FE2C55;
        }

        .social-card.x-twitter:hover {
            border-color: #1D9BF0;
            background: rgba(29, 155, 240, 0.1);
        }

        .social-card.x-twitter:hover i {
            color: #1D9BF0;
        }

        .social-card.facebook:hover {
            border-color: #1877F2;
            background: rgba(24, 119, 242, 0.1);
        }

        .social-card.facebook:hover i {
            color: #1877F2;
        }

        .social-card.whatsapp:hover {
            border-color: #25D366;
            background: rgba(37, 211, 102, 0.1);
        }

        .social-card.whatsapp:hover i {
            color: #25D366;
        }

        /* تنسيق الأسئلة الشائعة */
        .faq-item {
            background: rgb(0 0 0 / 49%);
            border-radius: 10px;
            margin-bottom: 15px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .faq-item summary {
            background: rgb(0 0 0 / 35%);
            border: 1px solid rgb(255 255 255 / 30%);
            padding: 20px;
            cursor: pointer;
            font-weight: bold;
            color: #fff;
            border-radius: 10px;
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .faq-item p {
            padding: 0 20px 20px 20px;
            color: #ccc;
            line-height: 1.6;
            margin: 0;
        }

        /* زر الإرسال */
        .btn-send {
            background: var(--accent-orange);
            color: #fff;
            border: none;
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: bold;
            cursor: pointer;
            transition: 0.3s;
        }

        .btn-send:hover {
            background: #d66418;
            transform: scale(1.05);
        }

        /* تحسينات الخريطة */
        .map-box {
            height: 400px;
            width: 100%;
            border-radius: 15px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: #2a2a2a;
            position: relative;
        }

        .map-box iframe {
            filter: grayscale(20%) invert(90%) contrast(85%);
            /* تأثير خريطة داكنة لتناسب التصميم */
        }

        input {
            background: #333;
            color: white;
        }

        input::placeholder {
            color: white;
        }

        textarea::placeholder {
            color: white;
        }
    </style>
    <style>
        .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;
            }
        }

        /* أزرار الفلترة */
        .faq-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 30px;
            justify-content: center;
        }

        .faq-tab {
            padding: 10px 20px;
            border-radius: 25px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(0, 0, 0, 0.3);
            color: #ccc;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.9rem;
            font-weight: 500;
        }

        .faq-tab:hover {
            background: rgba(243, 116, 31, 0.2);
            border-color: var(--accent-orange);
            color: #fff;
        }

        .faq-tab.active {
            background: var(--accent-orange);
            border-color: var(--accent-orange);
            color: #fff;
            box-shadow: 0 0 15px rgba(243, 116, 31, 0.4);
        }

        /* إخفاء الأسئلة غير المطابقة للفلتر */
        .faq-item.hidden {
            display: none;
        }

        /* تحسين تأثير التبديل */
        .faq-item {
            transition: all 0.3s ease;
        }

        /* حاوية التخطيط العام للقسم (قائمة + خريطة) */
        .branches-map-layout {
            display: flex;
            gap: 20px;
            margin-top: 25px;
            flex-wrap: wrap;
        }

        /* لوحة القائمة الجانبية للفروع (غير مرتبطة بالـ sidebar العامة) */
        .branches-list-panel {
            flex: 0 0 280px;
            max-width: 280px;
            background: rgba(0, 0, 0, 0.45);
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 15px;
            max-height: 400px;
            overflow-y: auto;
        }

        .branches-list-title {
            color: #fff;
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
        }

        .branches-list-title i {
            color: var(--accent-orange);
        }

        .branches-search {
            width: 100%;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.25);
            border-radius: 10px;
            padding: 8px 12px;
            color: #fff;
            font-size: 0.9rem;
            margin-bottom: 10px;
        }

        .branches-search::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }

        .branches-location-card {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            padding: 10px 12px;
            margin-bottom: 8px;
            cursor: pointer;
            transition: 0.25s;
            border: 1px solid transparent;
        }

        .branches-location-card:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: var(--accent-orange);
            transform: translateX(-3px);
        }

        .branches-location-card.active {
            border-color: var(--accent-orange);
            background: rgba(243, 116, 31, 0.12);
        }

        .branches-location-card h4 {
            color: #fff;
            font-size: 0.95rem;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .branches-location-card h4 i {
            color: var(--accent-orange);
        }

        .branches-location-card p {
            color: #ccc;
            font-size: 0.8rem;
            margin: 0;
        }

        .branches-status-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.7rem;
            margin-top: 6px;
        }

        .branches-status-active {
            background: rgba(0, 255, 136, 0.2);
            color: #00ff88;
        }

        .branches-status-maintenance {
            background: rgba(255, 193, 7, 0.2);
            color: #ffc107;
        }

        .branches-status-inactive {
            background: rgba(255, 82, 82, 0.2);
            color: #ff5252;
        }

        /* الصندوق الذي يحوي الخريطة (تستخدم نفس .map-box الموجودة) */
        .map-box {
            flex: 1;
            min-width: 260px;
            height: 400px;
            border-radius: 15px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: #2a2a2a;
            position: relative;
        }

        #branchesMap {
            width: 100%;
            height: 100%;
        }

        /* إحصائيات بسيطة فوق الخريطة */
        .branches-map-stats {
            position: absolute;
            bottom: 15px;
            right: 15px;
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(6px);
            border-radius: 12px;
            padding: 8px 14px;
            display: flex;
            gap: 18px;
            z-index: 500;
        }

        .branches-stat-item {
            text-align: center;
        }

        .branches-stat-item .number {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--accent-orange);
        }

        .branches-stat-item .label {
            font-size: 0.7rem;
            color: #ddd;
        }
    </style>
    <style>
        /* ===== إصلاح قسم الفروع (خريطة + قائمة + مودال) ===== */

        /* مهم: السماح للمودال أن يظهر بالكامل */
        #branches .glass-card {
            position: relative;
            overflow: visible;
        }

        /* تخطيط القائمة + الخريطة */
        .branches-map-layout {
            display: flex;
            align-items: stretch;
            gap: 20px;
            margin-top: 25px;
            min-height: 450px;
        }

        /* لوحة قائمة الفروع */
        .branches-list-panel {
            flex: 0 0 300px;
            width: 300px;
            background: rgba(0, 0, 0, 0.55);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            padding: 16px;
            display: flex;
            flex-direction: column;
            max-height: 450px;
        }

        .branches-list-title {
            color: #fff;
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            flex-shrink: 0;
        }

        .branches-list-title i {
            color: var(--accent-orange);
        }

        .branches-search {
            width: 100%;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.25);
            border-radius: 10px;
            padding: 10px 14px;
            color: #fff;
            font-size: 0.9rem;
            margin-bottom: 12px;
            flex-shrink: 0;
        }

        .branches-search::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }

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

        /* قائمة الفروع القابلة للتمرير */
        #branchesList {
            flex: 1;
            overflow-y: auto;
            padding-left: 5px;
        }

        #branchesList::-webkit-scrollbar {
            width: 4px;
        }

        #branchesList::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
        }

        #branchesList::-webkit-scrollbar-thumb {
            background: var(--accent-orange);
            border-radius: 10px;
        }

        .branches-location-card {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            padding: 12px 14px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid transparent;
        }

        .branches-location-card:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: var(--accent-orange);
            transform: translateX(-4px);
        }

        .branches-location-card.active {
            border-color: var(--accent-orange);
            background: rgba(243, 116, 31, 0.15);
        }

        .branches-location-card h4 {
            color: #fff;
            font-size: 0.95rem;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .branches-location-card h4 i {
            color: var(--accent-orange);
            font-size: 0.85rem;
        }

        .branches-location-card p {
            color: #aaa;
            font-size: 0.8rem;
            margin: 0;
            line-height: 1.4;
        }

        .branches-status-badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 0.7rem;
            margin-top: 8px;
            font-weight: 600;
        }

        .branches-status-active {
            background: rgba(0, 255, 136, 0.15);
            color: #00ff88;
        }

        .branches-status-maintenance {
            background: rgba(255, 193, 7, 0.15);
            color: #ffc107;
        }

        .branches-status-inactive {
            background: rgba(255, 82, 82, 0.15);
            color: #ff5252;
        }

        /* صندوق الخريطة */
        /* الصندوق الذي يحوي الخريطة */
        .map-box {
            flex: 1;
            min-width: 260px;
            height: 400px;
            border-radius: 15px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: #2a2a2a;
            position: relative;
            flex-shrink: 0;
            /* أضف هذا السطر لمنع انضغاط الخريطة */
        }

        #branchesMap {
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        /* إحصائيات الخريطة */
        .branches-map-stats {
            position: absolute;
            bottom: 16px;
            right: 16px;
            background: rgba(0, 0, 0, 0.75);
            backdrop-filter: blur(10px);
            border-radius: 14px;
            padding: 10px 18px;
            display: flex;
            gap: 20px;
            z-index: 500;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .branches-stat-item {
            text-align: center;
        }

        .branches-stat-item .number {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--accent-orange);
            display: block;
        }

        .branches-stat-item .label {
            font-size: 0.7rem;
            color: #ccc;
        }

        /* ماركر مخصص للـ Leaflet */
        .branches-custom-marker {
            width: 36px;
            height: 36px;
            border-radius: 50% 50% 50% 0;
            transform: rotate(-45deg);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
            cursor: pointer;
            transition: transform 0.2s ease;
            border: 2px solid #fff;
        }

        .branches-custom-marker i {
            transform: rotate(45deg);
            color: #fff;
            font-size: 0.9rem;
        }

        .branches-marker-active {
            background: linear-gradient(135deg, #00ff88, #00cc6a);
        }

        .branches-marker-maintenance {
            background: linear-gradient(135deg, #ffc107, #ff9800);
        }

        .branches-marker-inactive {
            background: linear-gradient(135deg, #ff5252, #d32f2f);
        }

        .branches-custom-marker:hover {
            transform: rotate(-45deg) scale(1.2);
        }

        /* Popup داخل Leaflet */
        .leaflet-popup-content-wrapper {
            background: linear-gradient(145deg, #1e3a5f, #162d4a) !important;
            border-radius: 12px !important;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
        }

        .leaflet-popup-content {
            margin: 0 !important;
        }

        .leaflet-popup-tip {
            background: #162d4a !important;
        }

        .branches-mini-popup {
            padding: 14px 18px;
            text-align: center;
            color: #fff;
            min-width: 180px;
        }

        .branches-mini-popup h4 {
            font-size: 1rem;
            margin-bottom: 6px;
            font-weight: 700;
        }

        .branches-mini-popup p {
            font-size: 0.8rem;
            color: #ccc;
            margin-bottom: 12px;
        }

        .branches-mini-popup button {
            padding: 8px 20px;
            border-radius: 20px;
            border: none;
            background: var(--accent-orange);
            color: #fff;
            font-size: 0.85rem;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .branches-mini-popup button:hover {
            background: #d66418;
            transform: scale(1.05);
        }

        /* ========== المودال الكبير ========== */
        .branches-popup-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(6px);
            z-index: 9998;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .branches-popup-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .branches-popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.85);
            width: 450px;
            max-width: 92vw;
            max-height: 90vh;
            overflow-y: auto;
            background: linear-gradient(145deg, #1e3a5f, #162d4a);
            border-radius: 20px;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7);
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .branches-popup.show {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
            visibility: visible;
        }

        .branches-popup-header {
            background: linear-gradient(135deg, var(--accent-orange), #d66418);
            padding: 20px 24px;
            position: relative;
        }

        .branches-popup-header h2 {
            color: #fff;
            font-size: 1.2rem;
            margin-bottom: 4px;
            padding-left: 40px;
        }

        .branches-popup-header p {
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.9rem;
            margin: 0;
        }

        .branches-popup-close {
            position: absolute;
            top: 50%;
            left: 16px;
            transform: translateY(-50%);
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: none;
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .branches-popup-close:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-50%) scale(1.1);
        }

        .branches-popup-body {
            padding: 20px 24px 24px;
        }

        .branches-info-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
        }

        .branches-info-item {
            background: rgba(255, 255, 255, 0.06);
            border-radius: 12px;
            padding: 14px 16px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .branches-info-item label {
            display: block;
            font-size: 0.7rem;
            color: #999;
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .branches-info-item span {
            font-size: 0.9rem;
            font-weight: 600;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .branches-info-item i {
            color: var(--accent-orange);
            font-size: 0.85rem;
        }

        .branches-popup-actions {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }

        .branches-popup-actions button {
            flex: 1;
            border-radius: 12px;
            border: none;
            padding: 14px 0;
            font-size: 0.95rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .branches-btn-primary {
            background: linear-gradient(135deg, var(--accent-orange), #d66418);
            color: #fff;
        }

        .branches-btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(243, 116, 31, 0.4);
        }

        .branches-btn-secondary {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .branches-btn-secondary:hover {
            background: rgba(255, 255, 255, 0.15);
        }

        /* منع سكرول الخلفية */
        body.branches-modal-open {
            overflow: hidden;
        }

        /* ========== تابلت (<= 992px) ========== */
        @media (max-width: 992px) {
            .branches-map-layout {
                flex-direction: column;
                min-height: auto;
            }

            .branches-list-panel {
                flex: none;
                width: 100%;
                max-width: 100%;
                max-height: 280px;
                order: 2;
            }

            .map-box {
                order: 1;
                height: 350px;
                width: 100%;
            }

            /* المودال كـ Bottom-Sheet */
            .branches-popup {
                top: auto;
                bottom: 0;
                left: 0;
                right: 0;
                transform: translateY(100%);
                width: 100%;
                max-width: 100%;
                border-radius: 24px 24px 0 0;
                max-height: 85vh;
            }

            .branches-popup.show {
                transform: translateY(0);
            }
        }

        /* ========== موبايل (<= 576px) ========== */
        @media (max-width: 576px) {
            .branches-map-layout {
                gap: 14px;
            }

            .branches-list-panel {
                padding: 12px;
                max-height: 250px;
            }

            .map-box {
                height: 300px !important;
                /* زيادة الارتفاع قليلاً لتظهر الخريطة بشكل أوضح */
                min-height: 300px;
            }

            .branches-map-stats {
                bottom: 10px;
                right: 10px;
                padding: 8px 12px;
                gap: 14px;
            }

            .branches-stat-item .number {
                font-size: 1rem;
            }

            .branches-info-grid {
                grid-template-columns: 1fr;
            }

            .branches-popup-header {
                padding: 16px 20px;
            }

            .branches-popup-body {
                padding: 16px 20px 20px;
            }

            .branches-popup-actions {
                flex-direction: column;
            }

            .branches-location-card {
                padding: 10px 12px;
            }

            .branches-location-card h4 {
                font-size: 0.9rem;
            }
        }

        .branches-details-table {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
        }

        .detail-row {
            background: #0f172a;
            padding: 12px 14px;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .detail-row label {
            color: #94a3b8;
            font-size: 13px;
        }

        .detail-row span {
            color: #fff;
            font-weight: 500;
        }

        .x-icon {
            width: 50px;
            height: 50px;
            transition: 0.3s;
            filter: brightness(0) saturate(100%) invert(63%) sepia(63%) saturate(746%) hue-rotate(338deg) brightness(101%) contrast(101%);
        }

        /* عند الهوفر تصبح بيضاء */
        .twitter:hover .x-icon {
            filter: brightness(0) invert(1);
        }

        /* التنسيق الأساسي لحاوية القسم - إعطاء خلفية زجاجية داكنة جداً لعزل المحتوى عن الصورة المزعجة */

        /* تنسيق كروت الأسئلة */
        #faq .faq-item {
            background: #4b4e50;
            /* لون داكن صلب يمنع ظهور الصورة تحته */
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            margin-bottom: 15px;
            transition: all 0.3s ease;
            overflow: hidden;
        }

        /* تأثير عند المرور بالماوس على السؤال */
        #faq .faq-item:hover {
            border-color: #ff7b00;
            /* لون برتقالي (هوية درب) */
            box-shadow: 0 5px 15px rgba(255, 123, 0, 0.1);
            transform: translateY(-2px);
        }

        /* عندما يكون السؤال مفتوحاً */
        #faq .faq-item[open] {
            border-color: #ff7b00;
            background: #4c5052;
        }

        /* تنسيق شريط السؤال (العنوان) */
        #faq .faq-item summary {
            padding: 20px 25px;
            color: #ffffff;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            list-style: none;
            /* إخفاء السهم الافتراضي */
        }

        /* إخفاء السهم الافتراضي للمتصفح */
        #faq .faq-item summary::-webkit-details-marker {
            display: none;
        }

        /* تنسيق أيقونة السهم الخاصة بك */
        #faq .faq-item summary i {
            color: #ff7b00;
            transition: transform 0.3s ease;
        }

        /* دوران السهم عند فتح السؤال */
        #faq .faq-item[open] summary i {
            transform: rotate(180deg);
        }

        /* تنسيق الإجابة */
        #faq .faq-item p {
            padding: 0 25px 20px 25px;
            margin: 0;
            color: #ffffff;
            /* لون رمادي فاتح مريح للقراءة */
            line-height: 1.8;
            font-size: 1rem;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            padding-top: 15px;
            margin-top: -5px;
        }

        /* تنسيق أزرار الفلترة (لتتناسب مع التصميم الجديد) */
        #faq .faq-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            margin-bottom: 30px;
        }

        #faq .faq-tab {
            background: transparent;
            border: 1px solid #ff7b00;
            color: #ffffff;
            padding: 8px 24px;
            border-radius: 30px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        #faq .faq-tab:hover,
        #faq .faq-tab.active {
            background: #ff7b00;
            color: #ffffff;
            box-shadow: 0 4px 10px rgba(255, 123, 0, 0.3);
        }

        /* تنسيق العناوين العلوية */
        #faq .section-header h1 span {
            color: #ff7b00;
        }

        #faq .section-badge {
            background: rgba(255, 123, 0, 0.1);
            color: #ff7b00;
            border: 1px solid rgba(255, 123, 0, 0.2);
            display: inline-block;
            padding: 5px 15px;
            border-radius: 20px;
            margin-bottom: 15px;
        }

        .error-text {
            display: block;
            font-size: 0.82rem;
            margin-top: -10px;
            margin-bottom: 10px;
            padding-right: 5px;
            color: #fff;
            text-shadow: 0 0 8px rgba(255, 77, 77, 0.4);
            font-weight: 600;
        }

        .care-input.input-error {
            border-color: #e57e3a !important;
            box-shadow: 0 0 6px rgba(255, 77, 77, 0.4);
        }

        .alert-box {
            padding: 12px 15px;
            border-radius: 8px;
            margin-bottom: 15px;
            font-size: 14px;
            text-align: center;
        }

        .alert-success {
            background: #e7f9ee;
            color: #1a7f37;
            border: 1px solid #b7ebc6;
        }

        .alert-error {
            background: #fde8e8;
            color: #b42318;
            border: 1px solid #f5c2c7;
        }

        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-box-shadow: 0 0 0px 1000px #313131f2 inset !important;
            box-shadow: 0 0 0px 1000px #313131f2 inset !important;
            -webkit-text-fill-color: #ffffff !important;
            caret-color: #ffffff;
            transition: background-color 5000s ease-in-out 0s;
        }
    </style>
    <style>
        /* ===== تصميم FAQ الداخلي ===== */
        #faq .faq-hero {
            text-align: center;
        }

        #faq .faq-hero h1 {
            font-size: 2rem;
        }

        #faq .search-wrapper {
            position: relative;
            max-width: 700px;
            margin: 0 auto;
        }

        #faq .search-wrapper i {
            position: absolute;
            right: 25px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--accent-orange);
            font-size: 1.2rem;
            pointer-events: none;
        }

        #faq .faq-search-input {
            width: 100%;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 50px;
            padding: 8px 60px 8px 25px;
            color: white;
            font-size: 1rem;
            backdrop-filter: blur(10px);
            transition: all 0.4s ease;
            font-family: 'Cairo', sans-serif;
        }

        #faq .faq-search-input::placeholder {
            color: rgba(255, 255, 255, 0.4);
        }

        #faq .faq-search-input:focus {
            outline: none;
            border-color: var(--accent-orange);
            background: rgba(255, 255, 255, 0.12);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        /* أزرار التصنيف */
        #faq .faq-categories {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin: 10px 0;
            flex-wrap: wrap;
        }

        #faq .cat-btn {
            background: rgb(0 0 0 / 66%);
            border: 1px solid rgba(255, 255, 255, 0.12);
            padding: 10px 22px;
            border-radius: 12px;
            color: #dad3cc;
            cursor: pointer;
            transition: 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: 'Cairo', sans-serif;
            font-size: 0.9rem;
        }

        #faq .cat-btn i {
            color: #d1cdc7;
        }

        #faq .cat-btn.active,
        #faq .cat-btn:hover {
            background: var(--accent-orange);
            color: black;
            border-color: var(--accent-orange);
        }

        #faq .cat-btn.active i,
        #faq .cat-btn:hover i {
            color: black;
        }

        /* شبكة الكروت */
        #faq .faq-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
            gap: 18px;
            align-items: start;
        }

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

        /* كروت الأسئلة */
        #faq .faq-card {
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            padding: 13px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(15px);
        }

        #faq .faq-card:hover {
            transform: translateY(-4px);
            border-color: rgba(243, 146, 0, 0.4);
        }

        #faq .faq-card .question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            font-size: 1rem;
            color: white;
            margin-bottom: 0;
            transition: 0.3s;
            gap: 10px;
        }

        #faq .faq-card.open .question {
            color: var(--accent-orange);
            margin-bottom: 14px;
        }

        #faq .faq-card .answer {
            max-height: 0;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.8;
            font-size: 0.82rem;
        }

        #faq .faq-card.open .answer {
            max-height: 300px;
        }

        #faq .toggle-icon {
            width: 28px;
            height: 28px;
            min-width: 28px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.3s;
            font-size: 0.8rem;
        }

        #faq .faq-card.open .toggle-icon {
            transform: rotate(180deg);
            background: var(--accent-orange);
            color: black;
        }
    </style>
@endpush


@section('content')

    <!-- القائمة الجانبية -->
    <aside class="sidebar">
        <div class="logo-area">

        </div>

        <nav class="nav-icons">

            <!-- زر الرئيسية -->
            <button class="sidebar-nav-btn active" onclick="showSection('care-home')"
                title="{{ __('contact.care_center') }}">

                <i class="fas fa-headset" style="font-size: 22px;"></i>
                <span class="tab-label d-lg-none">
                    {{ __('contact.home') }}
                </span>
            </button>

            <!-- زر راسلنا -->
            <button class="sidebar-nav-btn" onclick="showSection('contact-us')" title="{{ __('contact.contact_us') }}">

                <i class="fas fa-envelope-open-text" style="font-size: 22px;"></i>
                <span class="tab-label d-lg-none">
                    {{ __('contact.contact_us') }}
                </span>
            </button>

            <!-- زر التواصل الاجتماعي -->
            <button class="sidebar-nav-btn" onclick="showSection('social-media')"
                title="{{ __('contact.connect_with_us') }}">

                <i class="fas fa-share-alt" style="font-size: 22px;"></i>
                <span class="tab-label d-lg-none">
                    {{ __('contact.social_media') }}
                </span>
            </button>

            <!-- زر الأسئلة -->
            <button class="sidebar-nav-btn" onclick="showSection('faq')" title="{{ __('contact.faq_title') }}">

                <i class="fas fa-question-circle" style="font-size: 22px;"></i>
                <span class="tab-label d-lg-none">
                    {{ __('contact.faq') }}
                </span>
            </button>

        </nav>


    </aside>


    <!-- ================= منطقة المحتوى (أقسام مركز درب سالم) ================= -->
    <main class="content-area bg-img">

        <!-- القسم 1: الرئيسية لمركز العناية -->
        <section id="care-home" class="content-section active">
            <div  >
                <div class="breadcrumb">
                    <a href="{{ route('components/home') }}">الرئيسية</a>
                    <span>/</span>
                    <span>{{ __('مركز درب سالم') }}</span>
                </div>

                <div class="section-header">
                    <h1 class="custom-title">
                        <span>{{ $careCenter->title }}</span>
                    </h1>
                    <p>{{ $careCenter->description }}</p>
                </div>

                <div class="contact-grid">
                    {{-- الرقم الموحد --}}
                    @if ($careCenter->unified_number)
                        <a href="tel:{{ $careCenter->unified_number }}" class="contact-card">
                            <i class="fas fa-phone-alt"></i>
                            <h3> {{__('contact.Unified_number')}}</h3>
                            <p>{{ $careCenter->unified_number }}</p>
                        </a>
                    @endif

                    {{-- واتساب الأعمال --}}
                    @if ($careCenter->whatsapp_number)
                        @php
                            // تجهيز الرابط بنفس منطقك الحالي تقريباً
                            $whatsNumber = preg_replace('/\D/', '', $careCenter->whatsapp_number);
                            $whatsLink = 'https://wa.me/966' . ltrim($whatsNumber, '0');
                        @endphp
                        <a href="{{ $whatsLink }}" target="_blank" class="contact-card">
                            <i class="fab fa-whatsapp"></i>
                            <h3>{{__('contact.WhatsApp_Business')}}</h3>
                            <p>{{ $careCenter->whatsapp_number }}</p>
                        </a>
                    @endif

                    {{-- البريد الإلكتروني --}}
                    @if ($careCenter->email)
                        <a href="mailto:{{ $careCenter->email }}" class="contact-card">
                            <i class="fas fa-at"></i>
                            <h3> {{__('contact.e-mail')}}</h3>
                            <p>{{ $careCenter->email }}</p>
                        </a>
                    @endif
                </div>

                <div class="text-block mt-4 text-center" style="padding: 12px 16px">
                    <h3 style="color: var(--accent-orange);justify-content:center;">
                        {{ $careCenter->title_1 }}
                    </h3>
                    <p>{{ $careCenter->description_1 }}</p>
                </div>
            </div>
        </section>

        <!-- القسم 2: نموذج راسلنا -->
        <section id="contact-us" class="content-section">
            <div  >
                <div class="breadcrumb">
                    <a href="{{ route('components/home') }}">{{ __('contact.home') }}</a>
                    <span>/</span>
                    <a href="#" onclick="showSection('care-home'); return false;">{{ __('contact.center_name') }}</a>
                    <span>/</span>
                    <span>{{ __('contact.contact_us') }}</span>
                </div>

                <div class="section-header">
                    <h1 class="custom-title">{{ __('contact.connect_with_us') }}</h1>
                    <p>{{ __('contact.response_time') }}</p>
                </div>

                <div class="row">
                    <div class="col-lg-8 mx-auto">
                        <form id="contact-form-inquiry" onsubmit="submitContactForm(event)">
                            <div class="row">
                                <div class="col-md-6">
                                    <input type="text" class="care-input" placeholder="{{ __('contact.full_name') }}"
                                        name="name">
                                    <span class="error-text" id="err-name"></span>
                                </div>

                                <div class="col-md-6">
                                    <input type="tel" class="care-input" placeholder="{{ __('contact.phone') }}"
                                        name="phone">
                                    <span class="error-text" id="err-phone"></span>
                                </div>

                                <div class="col-md-6 col-12">
                                    <input type="email" class="care-input" placeholder="{{ __('contact.email') }}"
                                        name="email">
                                    <span class="error-text" id="err-email"></span>
                                </div>

                                <div class="col-md-6 col-12">
                                    <select class="care-input" name="inquiry_type">
                                        <option value="">{{ __('contact.inquiry_type') }}</option>
                                        <option>{{ __('contact.complaint') }}</option>
                                        <option>{{ __('contact.suggestion') }}</option>
                                        <option>{{ __('contact.general_inquiry') }}</option>
                                        <option>{{ __('contact.lost_items') }}</option>
                                    </select>
                                    <span class="error-text" id="err-inquiry"></span>
                                </div>

                                <div class="col-12">
                                    <textarea class="care-input" rows="5" placeholder="{{ __('contact.message_details') }}"
                                        name="message"></textarea>
                                    <span class="error-text" id="err-message"></span>
                                </div>
                            </div>

                            <!-- الرسالة -->
                            <div id="contact-message" class="alert-box" style="display:none;"></div>

                            <div class="text-center">
                                <button type="submit" id="contact-submit-btn" class="btn-send">
                                    {{ __('contact.send_request') }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>

        <!-- القسم 4 (الجديد): وسائل التواصل الاجتماعي -->
        <section id="social-media" class="content-section">
            <div  >
                <div class="breadcrumb">
                    <a href="{{ route('components/home') }}">{{ __('contact.home') }}</a>
                    <span>/</span>
                    <a href="#" onclick="showSection('care-home'); return false;">
                        {{ __('contact.center_name') }}
                    </a>
                    <span>/</span>
                    <span>{{ $socialMedia->title ?? __('contact.social_media') }}</span>
                </div>

                <div class="section-header">
                    <h1 class="custom-title">
                        <span>{{ $socialMedia->title }}</span>
                    </h1>
                    <p>{{ $socialMedia->description }}</p>
                </div>

                <div class="contact-grid social">

                    @if ($socialMedia->linkedin_url)
                        <a href="{{ $socialMedia->linkedin_url }}" target="_blank" class="contact-card social-card linkedin">
                            <i class="fab fa-linkedin-in"></i>
                            <h3 class="text-white">{{ __('contact.linkedin') }}</h3>
                            <!-- <p>{{ $socialMedia->linkedin_text }}</p> -->
                        </a>
                    @endif

                    @if ($socialMedia->instagram_url)
                        <a href="{{ $socialMedia->instagram_url }}" target="_blank" class="contact-card social-card instagram">
                            <i class="fab fa-instagram"></i>
                            <h3 class="text-white">{{ __('contact.instagram') }}</h3>
                            <!-- <p>{{ $socialMedia->instagram_text }}</p> -->
                        </a>
                    @endif

                    @if ($socialMedia->tiktok_link)
                        <a href="{{ $socialMedia->tiktok_link }}" target="_blank" class="contact-card social-card tiktok">
                            <i class="fab fa-tiktok"></i>
                            <h3 class="text-white">{{ __('contact.tiktok') }}</h3>
                            <!-- <p>{{ $socialMedia->tiktok_text }}</p> -->
                        </a>
                    @endif

                    @if ($socialMedia->x_link)
                        <a href="{{ $socialMedia->x_link }}" target="_blank" class="contact-card social-card twitter">
                            <img src="{{ asset('images/x.png') }}" class="x-icon" alt="X">
                            <h3 class="text-white">{{ __('contact.x') }}</h3>
                            {{--<p>{{ $socialMedia->x_text }}</p>--}}
                        </a>
                    @endif

                    @if ($socialMedia->facebook_url)
                        <a href="{{ $socialMedia->facebook_url }}" target="_blank" class="contact-card social-card facebook">
                            <i class="fab fa-facebook-f"></i>
                            <h3 class="text-white">{{ __('contact.facebook') }}</h3>
                            <!-- <p>{{ $socialMedia->facebook_text }}</p> -->
                        </a>
                    @endif

                    @if ($socialMedia->youtube_url)
                        <a href="{{ $socialMedia->youtube_url }}" target="_blank" class="contact-card social-card youtube">
                            <i class="fab fa-youtube"></i>
                            <h3 class="text-white">{{ __('contact.youtube') }}</h3>
                            <!-- <p>{{ $socialMedia->youtube }}</p> -->
                        </a>
                    @endif

                    @if ($socialMedia->whatsapp_url)
                        <a href="{{ $socialMedia->whatsapp_url }}" target="_blank" class="contact-card social-card whatsapp">
                            <i class="fab fa-whatsapp"></i>
                            <h3 class="text-white">{{ __('contact.whatsapp') }}</h3>
                            <!-- <p>{{ $socialMedia->whatsapp }}</p> -->
                        </a>
                    @endif

                    @if ($socialMedia->snapchat_url)
                        <a href="{{ $socialMedia->snapchat_url }}" target="_blank" class="contact-card social-card snapchat">
                            <i class="fab fa-snapchat-ghost"></i>
                            <h3 class="text-white">{{ __('contact.snapchat') }}</h3>
                            <!-- <p>{{ $socialMedia->snapchat }}</p> -->
                        </a>
                    @endif

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

        <!-- القسم 5: الأسئلة الشائعة -->
        <section id="faq" class="content-section">
            <div  >
                <div class="breadcrumb">
                    <a href="{{ route('components/home') }}">{{ __('contact.home') }}</a>
                    <span>/</span>
                    <a href="#" onclick="showSection('care-home'); return false;">
                        {{ __('contact.center_name') }}
                    </a>
                    <span>/</span>
                    <span>{{ __('contact.faq') }}</span>
                </div>

                <!-- Hero + Search -->
                <div class="faq-hero">
                    <div class="section-header">
                        <h1 class="custom-title">{{ __('contact.faq') }}</h1>
                    </div>
                    <div class="search-wrapper">
                        <i class="fas fa-search"></i>
                        <input type="text" class="faq-search-input" id="faqSearchInner"
                            placeholder="{{ __('contact.faq_search_placeholder') }}">
                    </div>
                </div>

                <!-- أزرار الفلترة -->
                <div class="faq-categories">

                    <button class="cat-btn active" onclick="filterFaqInner('all', this)">
                        <i class="fas fa-th-large"></i>
                        {{ __('contact.all') }}
                    </button>

                    @foreach ($categories as $category)
                        <button class="cat-btn" onclick="filterFaqInner('{{ $category['slug'] }}', this)">
                            <i class="{{ $category['icon'] }}"></i>
                            {{ $category['label'] }}
                        </button>
                    @endforeach

                </div>

                <!-- شبكة الكروت -->
                <div class="faq-grid" id="faqGridInner">

                    @foreach ($faqs as $faq)
                        <div class="faq-card" data-category="{{ $faq['category'] }}">
                            <div class="question">
                                <span>{{ $faq['question'] }}</span>
                                <div class="toggle-icon">
                                    <i class="fas fa-plus"></i>
                                </div>
                            </div>
                            <div class="answer">
                                {!! nl2br(e($faq['answer'])) !!}
                            </div>
                        </div>
                    @endforeach

                </div>

            </div>
        </section>
        @include('partials.footerPages')

    </main>
    <!-- زر إغلاق مترجم لغة الإشارة -->
    <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>
            // ========== سكربت التنقل بين الأقسام (معدل) ==========
            function showSection(sectionId) {
                // إخفاء جميع الأقسام
                document.querySelectorAll('.content-section').forEach(section => {
                    section.classList.remove('active');
                });

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

                // إظهار القسم المطلوب
                const targetSection = document.getElementById(sectionId);
                if (targetSection) {
                    targetSection.classList.add('active');
                }

                // تحديد الزر النشط بناءً على القسم (Mapping الجديد)
                // الترتيب: الرئيسية(0) - راسلنا(1) - الفروع(2) - سوشيال(3) - الأسئلة(4)
                const sectionIndex = {
                    'care-home': 0,
                    'contact-us': 1,
                    'social-media': 2, // القسم الجديد
                    'faq': 3
                };

                const navBtns = document.querySelectorAll('.sidebar-nav-btn');
                if (navBtns[sectionIndex[sectionId]]) {
                    navBtns[sectionIndex[sectionId]].classList.add('active');
                }

                // الصعود لأعلى الصفحة بسلاسة
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            }

            // تحميل القسم الافتراضي عند فتح الصفحة
            document.addEventListener('DOMContentLoaded', function () {
                showSection('care-home');
            });
        </script>

        <script>
            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; // force reflow
                    avatar.style.animation = 'slideUp 0.3s ease';
                }
            }
        </script>
        <!-- استدعاء ملف الجافاسكريبت الرئيسي -->
        <script src="{{ asset('js/script.js') }}"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            window.contactTrans = {
                field_required:  @json(__('contact.field_required')),
                name_min_length: @json(__('contact.name_min_length')),
                email_invalid:   @json(__('contact.email_invalid')),
                inquiry_required: @json(__('contact.inquiry_required')),
                sending:         @json(__('contact.sending')),
                success_message: @json(__('contact.success_message')),
                error_message:   @json(__('contact.error_message')),
            };
        </script>
        <script>
            function validateContactForm() {
                let isValid = true;

                // مسح الأخطاء السابقة
                document.querySelectorAll('#contact-form-inquiry .error-text').forEach(el => el.textContent = '');
                document.querySelectorAll('#contact-form-inquiry .care-input').forEach(el => el.classList.remove(
                    'input-error'));

                const name = document.querySelector('[name="name"]');
                const phone = document.querySelector('[name="phone"]');
                const email = document.querySelector('[name="email"]');
                const inquiryType = document.querySelector('[name="inquiry_type"]');
                const message = document.querySelector('[name="message"]');

                // التحقق من الاسم
                if (!name.value.trim()) {
                    showError(name, 'err-name', window.contactTrans.field_required);
                    isValid = false;
                } else if (name.value.trim().length < 3) {
                    showError(name, 'err-name', window.contactTrans.name_min_length);
                    isValid = false;
                }

                // التحقق من رقم الجوال
                if (!phone.value.trim()) {
                    showError(phone, 'err-phone', window.contactTrans.field_required);
                    isValid = false;
                }

                // التحقق من البريد الإلكتروني
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!email.value.trim()) {
                    showError(email, 'err-email', window.contactTrans.field_required);
                    isValid = false;
                } else if (!emailRegex.test(email.value.trim())) {
                    showError(email, 'err-email', window.contactTrans.email_invalid);
                    isValid = false;
                }

                // التحقق من نوع الاستفسار
                if (!inquiryType.value || inquiryType.value === '') {
                    showError(inquiryType, 'err-inquiry', window.contactTrans.inquiry_required);
                    isValid = false;
                }

                // التحقق من الرسالة
                if (!message.value.trim()) {
                    showError(message, 'err-message', window.contactTrans.field_required);
                    isValid = false;
                }

                return isValid;
            }

            function showError(input, errorId, message) {
                input.classList.add('input-error');
                document.getElementById(errorId).textContent = message;
            }

            function submitContactForm(e) {
                e.preventDefault();

                // مسح أي رسائل سابقة
                const msgBox = document.getElementById('contact-message');
                if (msgBox) {
                    msgBox.style.display = 'none';
                    msgBox.textContent = '';
                }

                // تشغيل التحقق أولاً
                if (!validateContactForm()) return;

                const btn = document.getElementById('contact-submit-btn');
                btn.disabled = true;
                const originalText = btn.innerHTML;
                btn.innerHTML = window.contactTrans.sending + ' <span class="spinner-border spinner-border-sm"></span>';

                const formEl = document.getElementById('contact-form-inquiry');
                const formData = new FormData(formEl);

                // (اختياري) لتسهيل تمييز نوع النموذج في الـ API
                formData.append('form_type', 'contact_request');

                fetch("https://darbcp.sys.newtouch.sa/api/external/submit-form", {
                    method: "POST",
                    body: formData,
                    headers: {
                        'Accept': 'application/json'
                    }
                })
                    .then(response => response.json())
                    .then(data => {
                        if (msgBox) {
                            msgBox.style.display = 'block';
                            if (data.success) {
                                msgBox.className = 'alert-box alert-success';
                                msgBox.textContent = window.contactTrans.success_message;

                                // تفريغ النموذج
                                formEl.reset();

                                // مسح الأخطاء إن وُجدت
                                document.querySelectorAll('#contact-form-inquiry .error-text')
                                    .forEach(el => el.textContent = '');
                                document.querySelectorAll('#contact-form-inquiry .care-input')
                                    .forEach(el => el.classList.remove('input-error'));
                            } else {
                                msgBox.className = 'alert-box alert-error';
                                msgBox.textContent = window.contactTrans.error_message;
                            }
                            msgBox.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        }
                    })
                    .catch(error => {
                        if (msgBox) {
                            msgBox.style.display = 'block';
                            msgBox.className = 'alert-box alert-error';
                            msgBox.textContent = window.contactTrans.error_message;
                            msgBox.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        }
                    })
                    .finally(() => {
                        btn.disabled = false;
                        btn.innerHTML = originalText;
                    });
            }

            // ===== FAQ الداخلي =====

            // فتح/إغلاق الكروت
            document.querySelectorAll('#faq .faq-card').forEach(card => {
                card.addEventListener('click', () => {
                    const isOpen = card.classList.contains('open');

                    // إغلاق كل الكروت المفتوحة
                    document.querySelectorAll('#faq .faq-card').forEach(c => {
                        c.classList.remove('open');
                        c.querySelector('i').classList.replace('fa-minus', 'fa-plus');
                    });

                    // فتح الكرت المختار إذا لم يكن مفتوحاً
                    if (!isOpen) {
                        card.classList.add('open');
                        card.querySelector('i').classList.replace('fa-plus', 'fa-minus');
                    }
                });
            });

            // فلترة التصنيفات
            function filterFaqInner(category, btn) {
                document.querySelectorAll('#faq .cat-btn').forEach(b => b.classList.remove('active'));
                btn.classList.add('active');

                document.querySelectorAll('#faq .faq-card').forEach(card => {
                    if (category === 'all' || card.dataset.category === category) {
                        card.style.display = 'block';
                    } else {
                        card.style.display = 'none';
                        card.classList.remove('open');
                    }
                });
            }

            // البحث
            document.getElementById('faqSearchInner').addEventListener('input', function () {
                const term = this.value.toLowerCase();

                // إعادة تعيين أزرار الفلترة عند البحث
                document.querySelectorAll('#faq .cat-btn').forEach(b => b.classList.remove('active'));
                document.querySelector('#faq .cat-btn[onclick*="all"]').classList.add('active');

                document.querySelectorAll('#faq .faq-card').forEach(card => {
                    const text = card.innerText.toLowerCase();
                    card.style.display = text.includes(term) ? 'block' : 'none';
                });
            });
        </script>
    @endpush