@extends('layouts.app')
@section('title', __('الاستثمار'))
{{-- @section('meta_title', $SEO['meta_title'])
@section('description', $SEO['meta_description'])
@section('keywords', $SEO['meta_keywords'])
@section('og:title', $SEO['og_title'])
@section('og:description', $SEO['og_description'])
@section('og_image', $SEO['image']) --}}
@vite('resources/css/about.css')
@push('styles')
    <script>
        // إخفاء الـ loader فور جاهزية DOM (قبل window.load) لأن الصفحة لا تحتاج بيانات غير متزامنة
        document.addEventListener('DOMContentLoaded', function () {
            var loader = document.getElementById('loader-wrapper');
            if (loader) {
                loader.classList.add('loader-hidden');
                loader.addEventListener('transitionend', function () { loader.remove(); }, { once: true });
            }
        });
    </script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.10/build/css/intlTelInput.css">
    <style>
        .content-section {
            visibility: visible !important;
            opacity: 1 !important;
        }

        @media (max-width: 991.98px) {
            .content-section {
                padding: 40px 15px 45px !important;
            }

            .section-header:after {
                display: none;
            }
        }

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

        input.care-input, select.care-input, .custom-file-input {
            height: 50px;
        }

        textarea.care-input {
            height: auto;
        }

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

        /* --- حقل المرفق الموحد --- */
        .attachment-label {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            background: #313131f2;
            border: 1.5px dashed rgba(229, 126, 58, 0.5);
            padding: 14px 16px;
            border-radius: 10px;
            color: rgba(255,255,255,0.7);
            cursor: pointer;
            transition: 0.3s;
            margin-bottom: 10px;
            font-size: 0.9rem;
            text-align: right;
        }

        .attachment-label:hover {
            border-color: var(--accent-orange);
            background: rgba(229, 126, 58, 0.08);
            color: #fff;
        }

        .attachment-label i {
            color: var(--accent-orange);
            font-size: 1.1rem;
        }

        .attachment-label .file-chosen {
            margin-right: auto;
            font-size: 0.78rem;
            color: #aaa;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 160px;
        }

        [dir="ltr"] .attachment-label .file-chosen {
            margin-right: 0;
            margin-left: auto;
        }

        #document {
            display: none;
        }


        .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);
        }

        .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;
            }
        }

        .popup-content .form-control {
            background: rgba(255, 255, 255, 0.05) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            color: #fff !important;
            /* لون النص عند الكتابة */
            border-radius: 10px;
            padding: 12px;
        }

        .popup-content .form-control:focus {
            background: rgba(255, 255, 255, 0.1) !important;
            border-color: var(--accent-orange) !important;
            box-shadow: 0 0 10px rgba(229, 126, 58, 0.3) !important;
        }

        /* --- جعل الـ Placeholder (النص التوضيحي) أبيض --- */
        .popup-content .form-control::placeholder {
            color: rgba(255, 255, 255, 0.8) !important;
            /* أبيض بنسبة شفافية عالية */
            opacity: 1;
            /* ضروري لمتصفح فايرفوكس */
        }

        /* --- تنسيق زر الإغلاق الجديد (دائري وعصري) --- */
        .close-popup {
            position: absolute;
            left: 20px;
            /* وضعه في اليسار للغة العربية */
            top: 20px;
            width: 35px;
            height: 35px;
            background: rgba(255, 255, 255, 0.1);
            /* خلفية شفافة خفيفة */
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            /* يجعله دائري تماماً */
            color: #fff;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .close-popup:hover {
            background: var(--accent-orange);
            /* يتغير للون البرتقالي عند الماوس */
            border-color: var(--accent-orange);
            transform: rotate(90deg);
            /* حركة دوران لطيفة */
            color: white;
        }

        .btn-send:disabled,
        .btn-send[disabled] {
            background: #888;
            cursor: not-allowed;
            transform: none;
            opacity: 0.8;
            pointer-events: none;
        }

        .error-text:empty {
            display: none;
        }

        /* --- رسائل الخطأ --- */
        .error-text {
            display: block;
            font-size: 0.82rem;
            margin-top: -10px;
            margin-bottom: 4px;
            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);
        }

        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;
        }

        input::placeholder,
        textarea::placeholder {
            direction: inherit;
            text-align: start;
        }

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

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

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

        /* --- intl-tel-input Dark Theme & Positioning --- */
        .iti {
            width: 100% !important;
            margin-bottom: 15px !important;
            display: block !important;
        }

        .iti__dropdown-content {
            background-color: #2a2a3e !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
            border-radius: 12px !important;
            color: #fff !important;
            z-index: 9999 !important;
            margin-top: 2px !important;
            left: 0 !important;
            right: 0 !important;
            max-width: none !important;
        }

        .iti__country {
            padding: 10px !important;
            border-radius: 8px !important;
            transition: 0.2s;
            display: flex;
            align-items: center;
        }

        .iti__country:hover, .iti__country.iti__highlight {
            background-color: rgba(229, 126, 58, 0.1) !important;
        }

        .iti__country-name, .iti__dial-code {
            color: #fff !important;
        }

        .iti__search-input {
            background-color: #1a1a2e !important;
            color: #fff !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            margin: 10px !important;
            padding: 12px !important;
            width: calc(100% - 20px) !important;
            border-radius: 8px !important;
            outline: none !important;
        }

        .iti__selected-country {
            background-color: rgba(255, 255, 255, 0.05) !important;
            border-radius: 10px 0 0 10px !important;
        }
        
        [dir="rtl"] .iti__selected-country {
            border-radius: 0 10px 10px 0 !important;
        }

        .iti--separate-dial-code .iti__selected-dial-code {
            color: #fff !important;
            margin-left: 5px;
        }

        /* --- تنسيق شبكة المربعات (الامتياز التجاري) --- */
        .franchise-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }

        .franchise-card {
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: calc(33.333% - 14px);
            min-height: 180px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        /* حصر تأثير البهتان والتحريك على قسم الامتياز فقط */
        #franchise .franchise-card {
            /* opacity: 0.4; */
            /* transform: translateY(30px); */
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                        opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                        box-shadow 0.3s ease, 
                        border-color 0.3s ease;
        }

        #franchise .franchise-card.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .franchise-scroll-container {
            max-height: 74vh;
            overflow-y: auto;
            padding-bottom: 80px; /* تقليل المسافة لتكون أكثر تناسقاً */
            padding-right: 10px;
            scrollbar-width: thin;
            /* mask-image: linear-gradient(to bottom, black 85%, transparent 100%); */
            /* -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%); */
        }

        .franchise-scroll-container::-webkit-scrollbar {
            width: 6px;
        }

        .franchise-scroll-container::-webkit-scrollbar-thumb {
            background-color: var(--accent-orange);
            border-radius: 10px;
        }

        .franchise-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .franchise-card .card-icon-large {
            font-size: 2.5rem;
            color: var(--accent-orange, #e57e3a);
            margin-bottom: 15px;
        }

        .franchise-card h3 {
            color: #fff;
            font-size: 16px;
            margin: 0 0 10px;
            font-weight: bold;
        }

        .franchise-card p {
            color: #ddd;
            font-size: 13px;
            margin: 0;
        }

        /* --- تنسيق قصص النجاح (السلايدر) --- */
        .slider-wrapper {
            position: relative;
            padding: 0 40px;
        }

        .success-slider {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            padding-bottom: 20px;
            scrollbar-width: none; /* إخفاء السكرول */
            -ms-overflow-style: none;
            scroll-behavior: smooth;
        }

        .success-slider::-webkit-scrollbar {
            display: none;
        }

        .success-card {
            flex: 0 0 calc(100% - 10px);
            scroll-snap-align: center;
        background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
            border: 1px solid rgba(229, 126, 58, 0.3);
            border-radius: 20px;
            display: flex;
            padding: 20px;
            gap: 20px;
            align-items: center;
        }

        @media (min-width: 768px) {
            .success-card {
                flex: 0 0 calc(50% - 10px); /* يعرض بطاقتين في الشاشات الكبيرة */
            }
        }

        .slider-btn {
            position: absolute;
            top: 40%;
            transform: translateY(-50%);
            width: 45px;
            height: 45px;
            background: var(--accent-orange);
            color: #fff;
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: 0.3s;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }

        .slider-btn:hover {
            background: #d66418;
            transform: translateY(-50%) scale(1.1);
        }

        .slider-btn.prev-btn {
            right: -10px;
        }

        .slider-btn.next-btn {
            left: -10px;
        }


        .success-content h3 {
            color: #ffffffff;
            font-size: 18px;
            margin-bottom: 5px;
        }

        .success-content p {
            color: #ffffffff;
            font-size: 14px;
            margin: 0;
            line-height: 1.6;
        }

        /* الزر الجانبي */
        .consultation-btn {
            position: fixed;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background: var(--accent-orange);
            color: #fff;
            padding: 15px 10px;
            border-radius: 0 15px 15px 0;
            font-weight: bold;
            text-align: center;
            z-index: 1000;
            cursor: pointer;
            box-shadow: 2px 0 15px rgba(229, 126, 58, 0.4);
            writing-mode: vertical-rl;
            text-orientation: mixed;
            transition: 0.3s;
        }

        [dir="ltr"] .consultation-btn {
            left: auto;
            right: 0;
            border-radius: 15px 0 0 15px;
        }

        .consultation-btn:hover {
            padding-left: 20px;
        }
        [dir="ltr"] .consultation-btn:hover {
            padding-left: 10px;
            padding-right: 20px;
        }
        
        @media (max-width: 768px) {
            .franchise-card {
                width: calc(50% - 10px);
            }
            .success-card {
                flex: 0 0 calc(85% - 10px);
                flex-direction: column;
                text-align: center;
            }
        }
        @media (max-width: 480px) {
            .franchise-card {
                width: 100%;
            }
        }


        .franchise-scroll-container {
  overflow: auto;

  /* Chrome, Safari, Edge */
  scrollbar-width: none;

  /* Firefox */
  -ms-overflow-style: none;
}

.franchise-scroll-container::-webkit-scrollbar {
  display: none;
}
    </style>
@endpush
@section('content')

    <!-- زر الاستشارة الجانبي -->
    <div class="consultation-btn d-none d-md-block" onclick="showSection('form_section')">
        {{ app()->getLocale() == 'ar' ? 'استشارتك تبدأ من هنا' : 'Consultation Starts Here' }}
    </div>

    <!-- القائمة الجانبية -->
    <aside class="sidebar">
        <div class="logo-area"></div>
        <nav class="nav-icons">
            <button class="sidebar-nav-btn active" onclick="showSection('investment')" title="{{ __('investment.investment') ?? 'الإستثمار' }}">
                <i class="fas fa-play-circle"></i>
                <span class="tab-label d-lg-none">{{ __('investment.investment') ?? 'الإستثمار' }}</span>
            </button>
            <button class="sidebar-nav-btn" onclick="showSection('franchise')" title="الامتياز التجاري">
                <i class="fas fa-network-wired"></i>
                <span class="tab-label d-lg-none">الامتياز التجاري</span>
            </button>
            <button class="sidebar-nav-btn" onclick="showSection('features')" title="المميزات">
                <i class="fas fa-check-circle"></i>
                <span class="tab-label d-lg-none">المميزات</span>
            </button>
            <button class="sidebar-nav-btn" onclick="showSection('form_section')" title="نموذج التقديم">
                <i class="fas fa-envelope"></i>
                <span class="tab-label d-lg-none">نموذج التقديم</span>
            </button>
        </nav>
    </aside>

    <main class="content-area bg-img">

        <!-- القسم الأول: الإستثمار (Video) -->
        <section id="investment" class="content-section active">
            <div class=" text-center d-flex flex-column justify-content-center align-items-center" style="min-height: 70vh;">
                <div class="section-header " style="margin-bottom: 0;">
                    <h1 class="custom-title" style="display:inline-block; padding:10px 40px; background: rgba(255,255,255,0.1); border-radius: 50px; border: 2px solid var(--accent-orange); margin-bottom: 0;">
                        {{ !empty($investmentData) ? (app()->getLocale() == 'ar' ? $investmentData['title_ar'] : $investmentData['title_en']) : 'الإستثمار' }}
                    </h1>
                    <p class="mt-3 text-white fs-5">
                        {{ !empty($investmentData) ? (app()->getLocale() == 'ar' ? $investmentData['description_ar'] : $investmentData['description_en']) : 'شراكتك معنا ليست مجرد امتياز... بل فرصة حقيقية لبناء قصة نجاح طويلة الأمد.' }}
                    </p>
                </div>
                
                @if(!empty($investmentData) && !empty($investmentData['attachment']))
                    @php
                        $ext = pathinfo($investmentData['attachment'], PATHINFO_EXTENSION);
                        $isVideo = in_array(strtolower($ext), ['mp4', 'webm', 'ogg']);
                    @endphp
                    <div class="video-container w-100" style="background: rgba(255,255,255,0.8); border-radius: 20px; height: 350px; overflow: hidden; display: flex; justify-content: center; align-items: center; color: #000; font-weight: bold; font-size: 24px;">
                        @if($isVideo)
                            <video autoplay loop muted playsinline style="width: 100%; height: 100%; object-fit: cover;">
                                <source src="{{ $investmentData['attachment'] }}" type="video/{{ $ext }}">
                            </video>
                        @else
                            <img src="{{ $investmentData['attachment'] }}" alt="" style="width: 100%; height: 100%; object-fit: cover;">
                        @endif
                    </div>
                @else
                    <div class="video-container w-100" style="background: rgba(255,255,255,0.8); border-radius: 20px; height: 350px; display: flex; justify-content: center; align-items: center; color: #000; font-weight: bold; font-size: 24px;">
                        فيديو او Gif
                    </div>
                @endif

                <div class="slider-wrapper w-100 mt-5">
                    <!-- زر السابق (يمين) -->
                    <button class="slider-btn prev-btn" onclick="slideSuccess('prev')">
                        <i class="fas fa-chevron-right"></i>
                    </button>

                    <div class="success-slider" id="successSlider">
                            @foreach($succeedingData as $item)
                                <div class="success-card  ">
                                    <div class="success-image d-flex align-items-center justify-content-center text-white" style="overflow: hidden; padding: 0;">
                                        @if(!empty($item['attachment']))
                                            <img src="{{ $item['attachment'] }}" alt="" style="width: 100%; height: 100%; object-fit: cover; border-radius: inherit;">
                                        @else
                                            صورة
                                        @endif
                                    </div>
                                    <div class="success-content">
                                        <h3>{{ app()->getLocale() == 'ar' ? $item['title_ar'] : $item['title_en'] }}</h3>
                                        <p>{{ app()->getLocale() == 'ar' ? $item['description_ar'] : $item['description_en'] }}</p>
                                    </div>
                                </div>
                            @endforeach
                    
                    </div>

                    <!-- زر التالي (يسار) -->
                    <button class="slider-btn next-btn" onclick="slideSuccess('next')">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                </div>
            </div>
        </section>

        <!-- القسم الثالث: منظومة الامتياز -->
        <section id="franchise" class="content-section">
            <div  >
                <div class="franchise-scroll-container">
                    <div class="section-header text-center">
                        <h1 class="custom-title" style="display:inline-block; padding:10px 40px; background: rgba(255,255,255,0.1); border-radius: 50px; border: 2px solid var(--accent-orange);">
                            {{ !empty($franchiseTitle) ? (app()->getLocale() == 'ar' ? $franchiseTitle['title_ar'] : $franchiseTitle['title_en']) : ' ' }}
                        </h1>
                        <p class="mt-3 text-white fs-5">
                            {{ !empty($franchiseTitle) ? (app()->getLocale() == 'ar' ? $franchiseTitle['description_ar'] : $franchiseTitle['description_en']) : ' ' }}
                        </p>
                    </div>

                    <div class="franchise-grid">
                            @foreach($franchiseData as $item)
                                <div class="franchise-card  ">
                                    <div class="card-icon-large">
                                        @if(!empty($item['attachment']))
                                            <img src="{{ $item['attachment'] }}" alt="" style="width: 60px; height: 60px; object-fit: contain;">
                                        @else
                                            <i class="fas fa-chart-bar"></i>
                                        @endif
                                    </div>
                                    <h3 class="text-white">{{ app()->getLocale() == 'ar' ? $item['title_ar'] : $item['title_en'] }}</h3>
                                    @if(!empty(app()->getLocale() == 'ar' ? $item['description_ar'] : $item['description_en']))
                                        <p class="text-white mt-2" style="font-size: 14px;">{{ app()->getLocale() == 'ar' ? $item['description_ar'] : $item['description_en'] }}</p>
                                    @endif
                                </div>
                            @endforeach
                    </div>
                </div>
            </div>
        </section>

        <!-- القسم الثاني: الميزات -->
        <section id="features" class="content-section">
            <div  >
                <div class="section-header text-center mb-5">
                    <h1 class="custom-title" style="display:inline-block; padding:10px 40px; background: rgba(255,255,255,0.1); border-radius: 50px; border: 2px solid var(--accent-orange);">
                        {{ app()->getLocale() == 'ar' ? ($featuresTitle['ar'] ?? ' ') : ($featuresTitle['en'] ?? ' ') }}
                    </h1>
                </div>

                <div class="row">
                        @foreach($featuresData as $item)
                            <div class="col-md-4 mb-3">
                                <div class="franchise-card w-100 h-100">
                                    <div class="card-icon-large text-center">
                                        @if(!empty($item['attachment']))
                                            <img src="{{ $item['attachment'] }}" alt="" style="width: 50px; height: 50px; object-fit: contain;">
                                        @else
                                            <i class="fas fa-check-circle"></i>
                                        @endif
                                    </div>
                                    <h3 class="text-white">{{ app()->getLocale() == 'ar' ? $item['title_ar'] : $item['title_en'] }}</h3>
                                </div>
                            </div>
                        @endforeach
                </div>
            </div>
        </section>



        <!-- القسم الخامس: النموذج الحالي -->
        <section id="form_section" class="content-section">
            <div  >

                <div class="breadcrumb">
                    <a href="{{ route('components/home') }}">{{ __('investment.home') }}</a>
                    <span>/</span>
                    <span>{{ __('investment.investment') }}</span>
                </div>

                <div class="section-header">
                    <h1 class="custom-title">{{ __('investment.main_title') }}</h1>
                    <p>{{ __('investment.sub_title') }}</p>
                </div>

                <div class="row">
                    <div class="col-lg-8 mx-auto">
                     <form id="investment-form" onsubmit="submitInvestmentForm(event)" enctype="multipart/form-data">

    <div class="row">

        <!-- الاسم -->
        <div class="col-md-6 col-12">

            <input type="text"
                   name="name"
                   class="care-input"
                   oninput="this.value = this.value.replace(/[^A-Za-z\u0600-\u06FF\s]/g, '')"
                   placeholder="{{ __('investment.name') }}"
                   required>

            <span class="error-text" id="error-name"></span>

        </div>

        <!-- رقم التواصل -->
        <div class="col-md-6 col-12">

            <input type="tel"
                   name="phone"
                   class="care-input"
                   oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                   minlength="9"
                   maxlength="15"
                   pattern="[0-9]{9,}"
                   title="يجب إدخال أرقام فقط وبحد أدنى 9 أرقام"
                   placeholder="{{ __('investment.phone') }}"
                   required>

            <span class="error-text" id="error-phone"></span>

        </div>

        <!-- المدينة -->
        <div class="col-md-6 col-12">

            <input type="text"
                   name="city"
                   class="care-input"
                   oninput="this.value = this.value.replace(/[^A-Za-z\u0600-\u06FF\s]/g, '')"
                   placeholder="{{ __('investment.city') }}"
                   required>

            <span class="error-text" id="error-city"></span>

        </div>

        <!-- وصف الاستثمار -->
        <div class="col-md-6 col-12">

            <select id="investment_type"
                    name="investment_type"
                    class="care-input care-input-select"
                    required>

                <option value="" disabled selected hidden>
                    {{ __('investment.investment_type') }}
                </option>

                <option value="franchise">
                    {{ __('investment.franchise') }}
                </option>

                <option value="land_rent">
                    {{ __('investment.land_rent') }}
                </option>

                <option value="station_operation">
                    {{ __('investment.station_operation') }}
                </option>

                <option value="land_investment">
                    {{ __('investment.land_investment') }}
                </option>

                <option value="other">
                    {{ __('investment.other') }}
                </option>

            </select>

            <span class="error-text" id="error-investment_type"></span>

        </div>

        <div class="col-md-6 col-12">
    <input type="text"
           name="area"
           id="area_input"
           class="care-input"
           placeholder="{{ __('investment.area') }}"
           oninput="this.value = this.value.replace(/[^0-9]/g, '');" 
           required>
    <span class="error-text" id="error-area"></span>
</div>

<div class="col-md-6 col-12">
    <input type="text"
           name="location"
           id="location_input"
           class="care-input"
           placeholder="{{ __('investment.location') }}"
           oninput="this.value = this.value.replace(/[0-9]/g, '');"
           required>
    <span class="error-text" id="error-location"></span>
</div>

       

        <!-- نوع الملكية -->
        <div class="col-md-6 col-12">

            <select name="ownership_type"
                    class="care-input care-input-select"
                    required>

                <option value="" disabled selected hidden>
                    {{ __('investment.ownership_type') }}
                </option>

                <option value="broker">
                    {{ __('investment.broker') }}
                </option>

                <option value="marketer">
                    {{ __('investment.marketer') }}
                </option>

                <option value="investor">
                    {{ __('investment.investor') }}
                </option>

                <option value="owner">
                    {{ __('investment.owner') }}
                </option>

                <option value="agent">
                    {{ __('investment.agent') }}
                </option>

            </select>

            <span class="error-text" id="error-ownership_type"></span>

        </div>

        <!-- رفع المستند (PDF, DOC, JPG, PNG) -->
        <div class="col-md-6">
            <label class="attachment-label" for="document">
                <i class="fas fa-paperclip"></i>
                <span>{{ Lang::has('investment.upload_document') ? __('investment.upload_document') : (app()->getLocale() == 'ar' ? 'إرفاق مستند (اختياري)' : 'Upload Document (Optional)') }}</span>
                <span class="file-chosen" id="document-chosen-name">{{ app()->getLocale() == 'ar' ? 'لم يتم اختيار ملف' : 'No file chosen' }}</span>
            </label>
            <input type="file"
                   name="document"
                   id="document"
                   accept=".pdf,.doc,.docx,.jpg,.jpeg,.png">
            <span class="error-text" id="error-document"></span>
        </div>

 <!-- رخصة محطة -->
        <div class="col-md-12 col-12"
             id="station-license-col"
             style="display:none;">

            <select name="station_license"
                    class="care-input care-input-select">

                <option value="" disabled selected hidden>
                    {{ __('investment.station_license') }}
                </option>

                <option value="yes">
                    {{ __('investment.yes') }}
                </option>

                <option value="no">
                    {{ __('investment.no') }}
                </option>

            </select>

            <span class="error-text" id="error-station_license"></span>

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

        <!-- زر الإرسال -->
        <div class="col-md-12 text-center p-2">

            <button type="submit"
                    id="investment-submit-btn"
                    class="btn-send">

                {{ __('investment.send_request') }}

                <i class="fas fa-paper-plane ms-2"></i>

            </button>

        </div>

    </div>

</form>
                    </div>
                </div>

            </div>
        </section>

        @include('partials.footerPages')

    </main>

    <!-- النافذة المنبثقة -->
    <!-- النافذة المنبثقة المحدثة -->
    {{-- <div id="interestPopup" class="popup-overlay">
        <div class="popup-content">
            <!-- زر الإغلاق الجديد -->
            <button class="close-popup" onclick="closePopup()">
                <i class="fas fa-times"></i>
            </button>

            <h3 class="text-center mb-4" style="color: var(--accent-orange); font-weight: bold;">سجل اهتمامك</h3>

            <form onsubmit="event.preventDefault(); alert('تم استلام طلبك!'); closePopup();">
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="الاسم التجاري" required>
                </div>
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="رقم الجوال" required>
                </div>
                <div class="mb-3">
                    <input type="email" class="form-control" placeholder="البريد الإلكتروني" required>
                </div>
                <div class="mb-3">
                    <textarea class="form-control" rows="3" placeholder="ملاحظات إضافية"></textarea>
                </div>
                <button type="submit" class="btn-primary-darb w-100 py-3">إرسال الطلب</button>
            </form>
        </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')
        {{-- ترجمات JavaScript – تُحقن من Laravel لتعمل بحسب اللغة النشطة --}}
        <script>
            window.investmentTrans = {
                field_required: @json(__('investment.field_required')),
                phone_invalid: @json(__('investment.phone_invalid')),
                investment_type_required: @json(__('investment.investment_type_required')),
                ownership_type_required: @json(__('investment.ownership_type_required')),
                station_license_required: @json(__('investment.station_license_required')),
                sending: @json(__('investment.sending')),
                success_title: @json(__('investment.success_title')),
                success_message: @json(__('investment.success_message')),
                error_message: @json(__('investment.error_message')),
                error_title: @json(__('investment.error_title')),
                error_text: @json(__('investment.error_text')),
            };
        </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;
                    avatar.style.animation = 'slideUp 0.3s ease';
                }
            }

            function openPopup() {
                document.getElementById('interestPopup').classList.add('active');
            }

            function closePopup() {
                document.getElementById('interestPopup').classList.remove('active');
            }

            document.getElementById('interestPopup').addEventListener('click', function (e) {
                if (e.target === this) closePopup();
            });
        </script>

        <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.10/build/js/intlTelInput.min.js"></script>
        <script>
            // تهيئة حقل رقم الجوال مع مفتاح الدولة
            const phoneInput = document.querySelector('input[name="phone"]');
            const currentLang = document.documentElement.lang || 'ar';
            const isAr = currentLang.startsWith('ar');

            const iti = window.intlTelInput(phoneInput, {
                initialCountry: "sa",
                separateDialCode: true,
                strictMode: true,
                countryNameLocale: isAr ? "ar" : "en",
                i18n: isAr ? {
                    searchPlaceholder: "بحث عن دولة...",
                    noCountrySelected: "لم يتم اختيار دولة",
                    selectedCountryAriaLabel: "الدولة المختارة",
                    countrySelectorAriaLabel: "قائمة الدول",
                    zeroSearchResults: "لا توجد نتائج",
                    oneSearchResult: "نتيجة واحدة",
                    multipleSearchResults: "${count} نتائج",
                } : {},
                utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.10/build/js/utils.js",
            });

            // تحديث اسم الملف عند اختياره
            document.getElementById('document').addEventListener('change', function () {
                const nameEl = document.getElementById('document-chosen-name');
                if (this.files && this.files.length > 0) {
                    nameEl.textContent = this.files[0].name;
                    nameEl.style.color = '#e57e3a';
                } else {
                    nameEl.textContent = (document.documentElement.lang.startsWith('ar')) ? 'لم يتم اختيار ملف' : 'No file chosen';
                    nameEl.style.color = '';
                }
            });


            document.getElementById('investment_type').addEventListener('change', function () {

                const licenseCol = document.getElementById('station-license-col');

                // ✔ تم تصحيح الشرط حسب القيم الصحيحة
                if (this.value === 'land_rent' || this.value === 'land_investment') {

                    licenseCol.style.display = 'block';

                } else {

                    licenseCol.style.display = 'none';

                    // ✔ تحسين: تفريغ قيمة الحقل عند الإخفاء
                    const licenseSelect = licenseCol.querySelector('select');
                    if (licenseSelect) licenseSelect.value = '';
                }
            });


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

                // مسح جميع الأخطاء السابقة
                document.querySelectorAll('.error-text').forEach(el => el.textContent = '');
                document.querySelectorAll('.input-error').forEach(el => el.classList.remove('input-error'));

                const form = document.getElementById('investment-form');
                let hasError = false;

                function showError(fieldId, errorId, message) {
                    const field = form.querySelector(`[name="${fieldId}"]`);
                    const errorEl = document.getElementById(errorId);
                    if (field && errorEl) {
                        errorEl.textContent = message;
                        field.classList.add('input-error');
                        hasError = true;
                    }
                }

                // --- الاسم ---
                const name = form.querySelector('[name="name"]');
                if (!name.value.trim()) {
                    showError('name', 'error-name', window.investmentTrans.field_required);
                }

                // --- الهاتف ---
                const phone = form.querySelector('[name="phone"]');
                if (!phone.value.trim()) {
                    showError('phone', 'error-phone', window.investmentTrans.field_required);
                } else if (!iti.isValidNumber()) {
                    showError('phone', 'error-phone', window.investmentTrans.phone_invalid);
                }

                // --- المدينة ---
                const city = form.querySelector('[name="city"]');
                if (!city.value.trim()) {
                    showError('city', 'error-city', window.investmentTrans.field_required);
                }

                // --- نوع الاستثمار ---
                const investmentType = form.querySelector('[name="investment_type"]');
                if (!investmentType.value) {
                    showError('investment_type', 'error-investment_type', window.investmentTrans.investment_type_required);
                }

                // --- المساحة ---
                const area = form.querySelector('[name="area"]');
                if (!area.value.trim()) {
                    showError('area', 'error-area', window.investmentTrans.field_required);
                }

                // --- الموقع ---
                const location = form.querySelector('[name="location"]');
                if (!location.value.trim()) {
                    showError('location', 'error-location', window.investmentTrans.field_required);
                }

                // --- نوع الملكية ---
                const ownershipType = form.querySelector('[name="ownership_type"]');
                if (!ownershipType.value) {
                    showError('ownership_type', 'error-ownership_type', window.investmentTrans.ownership_type_required);
                }

                // --- رخصة المحطة (شرط الإظهار الصحيح) ---
                const licenseCol = document.getElementById('station-license-col');
                if (licenseCol && licenseCol.style.display !== 'none') {
                    const stationLicense = form.querySelector('[name="station_license"]');
                    if (!stationLicense.value) {
                        showError('station_license', 'error-station_license', window.investmentTrans.station_license_required);
                    }
                }

                if (hasError) {
                    const firstError = form.querySelector('.input-error');
                    if (firstError) {
                        firstError.scrollIntoView({
                            behavior: 'smooth',
                            block: 'center'
                        });
                    }
                    return;
                }

                // --- الإرسال ---
                const btn = document.getElementById('investment-submit-btn');
                btn.disabled = true;

                const originalText = btn.innerHTML;
                btn.innerHTML = window.investmentTrans.sending + ' <span class="spinner-border spinner-border-sm"></span>';

                const formData = new FormData(form);
                // إضافة الرقم الكامل مع رمز الدولة
                formData.set('phone', iti.getNumber());

                fetch("https://darbcp.sys.newtouch.sa/api/external/submit-form", {
                    method: "POST",
                    body: formData,
                    headers: {
                        'Accept': 'application/json'
                    }
                })
                    .then(response => response.json())
                    .then(result => {
                        if (result.success) {
                            Swal.fire({
                                icon: 'success',
                                title: window.investmentTrans.success_title,
                                text: window.investmentTrans.success_message,
                                confirmButtonColor: '#ff8c42'
                            });

                            form.reset();

                            document.querySelectorAll('.error-text').forEach(el => el.textContent = '');
                            document.querySelectorAll('.input-error').forEach(el => el.classList.remove('input-error'));

                            const licenseBox = document.getElementById('station-license-col');
                            if (licenseBox) licenseBox.style.display = 'none';

                            const msgBox = document.getElementById('investment-message');
                            if (msgBox) msgBox.style.display = 'none';
                        } else {
                            const msgBox = document.getElementById('investment-message');
                            msgBox.style.display = 'block';
                            msgBox.className = 'alert-box alert-error';
                            msgBox.textContent = window.investmentTrans.error_message;

                            msgBox.scrollIntoView({ behavior: 'smooth' });
                        }
                    })
                    .catch(() => {
                        Swal.fire({
                            icon: 'error',
                            title: window.investmentTrans.error_title,
                            text: window.investmentTrans.error_text
                        });
                    })
                    .finally(() => {
                        btn.disabled = false;
                        btn.innerHTML = originalText;
                    });
            }

            // --- التنقل بين الأقسام بالسكرول ---
            const sectionsList = ['investment', 'franchise', 'features', 'form_section'];
            let isScrolling = false;

            // --- التنقل بين الأقسام ---
            function showSection(sectionId) {
                // تحديث المؤشر العالمي للمزامنة مع السكرول
                const idx = sectionsList.indexOf(sectionId);
                if (idx !== -1) window.currentSectionIndex = idx;

                // إظهار/إخفاء زر الاستشارة
                const consultBtn = document.querySelector('.consultation-btn');
                if (consultBtn) {
                    if (sectionId === 'form_section') {
                        consultBtn.style.setProperty('display', 'none', 'important');
                    } else {
                        consultBtn.style.removeProperty('display'); // السماح لـ Bootstrap (d-md-block) بالتحكم
                    }
                }

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

                // إضافة active للزر المضغوط
                const buttons = document.querySelectorAll('.sidebar-nav-btn');
                buttons.forEach(btn => {
                    if(btn.getAttribute('onclick').includes(sectionId)) {
                        btn.classList.add('active');
                    }
                });

                // إخفاء كل الأقسام
                document.querySelectorAll('.content-section').forEach(section => {
                    section.classList.remove('active');
                    section.style.display = 'none'; // التأكد من الإخفاء تماماً
                    section.scrollTop = 0; // إعادة السكرول للأعلى داخل القسم
                });

                // إظهار القسم المطلوب
                const target = document.getElementById(sectionId);
                if(target) {
                    target.style.display = 'block';
                    target.scrollTop = 0; // التأكد من أن القسم الجديد يبدأ من الأعلى
                    
                    // إعادة الهيدر لحالته الأصلية
                    const mainHeader = document.querySelector('.main-header');
                    if (mainHeader) mainHeader.classList.remove('scrolled');

                    // إضافة active بفاصل زمني بسيط للتأثير الحركي
                    setTimeout(() => {
                        target.classList.add('active');
                        target.scrollTop = 0;
                        window.scrollTo({ top: 0, behavior: 'smooth' });
                    }, 50);
                }
            }



            // --- دالة تحريك السلايدر ---
            function slideSuccess(direction) {
                const slider = document.getElementById('successSlider');
                if (!slider) return;

                // حساب عرض البطاقة زائد المسافة
                const firstCard = slider.querySelector('.success-card');
                if (!firstCard) return;
                
                const cardWidth = firstCard.offsetWidth + 20; // 20px gap

                // التحقق من الوصول لنهاية السلايدر للرجوع للبداية
                const maxScroll = slider.scrollWidth - slider.clientWidth;
                const currentScroll = Math.abs(slider.scrollLeft);

                if (direction === 'next' && currentScroll >= maxScroll - 10) {
                    // العودة للبداية بانسيابية
                    slider.scrollTo({ left: 0, behavior: 'smooth' });
                    return;
                }

                // تحديد اتجاه التمرير بناءً على لغة الموقع
                const isLTR = document.documentElement.dir === 'ltr' || document.dir === 'ltr';
                const scrollAmount = isLTR 
                    ? (direction === 'next' ? cardWidth : -cardWidth)
                    : (direction === 'next' ? -cardWidth : cardWidth);

                slider.scrollBy({ left: scrollAmount, behavior: 'smooth' });
            }

            // --- التحكم بالتمرير التلقائي للسلايدر ---
            let autoSlideInterval;
            
            function startAutoSlide() {
                // إيقاف أي مؤقت سابق لضمان عدم التكرار
                stopAutoSlide();
                autoSlideInterval = setInterval(() => {
                    slideSuccess('next');
                }, 3500); // 3.5 ثواني
            }

            function stopAutoSlide() {
                if (autoSlideInterval) {
                    clearInterval(autoSlideInterval);
                }
            }

            // تشغيل القسم الأول افتراضياً عند تحميل الصفحة وتفعيل التمرير التلقائي
            document.addEventListener('DOMContentLoaded', () => {
                showSection('investment');
                
                const sliderWrapper = document.querySelector('.slider-wrapper');
                if(sliderWrapper) {
                    startAutoSlide(); // بدء التمرير التلقائي
                    
                    // إيقاف التمرير عند وضع الماوس أو اللمس
                    sliderWrapper.addEventListener('mouseenter', stopAutoSlide);
                    sliderWrapper.addEventListener('mouseleave', startAutoSlide);
                    sliderWrapper.addEventListener('touchstart', stopAutoSlide);
                    sliderWrapper.addEventListener('touchend', startAutoSlide);
                }

                // --- تفعيل تأثير الظهور للكروت عند السكرول (Intersection Observer) ---
                const scrollContainer = document.querySelector('.franchise-scroll-container');
                if (scrollContainer) {
                    const observerOptions = {
                        root: scrollContainer,
                        threshold: 1.0, // التفعيل فقط عند ظهور الكارت بالكامل كما طلب المستخدم
                        rootMargin: '0px' 
                    };

                    const observer = new IntersectionObserver((entries) => {
                        entries.forEach(entry => {
                            if (entry.isIntersecting) {
                                entry.target.classList.add('visible');
                            } else {
                                // اختياري: إذا أردت أن تعود باهتة عند الخروج من العرض (لأعلى أو لأسفل)
                                const rect = entry.target.getBoundingClientRect();
                                const containerRect = scrollContainer.getBoundingClientRect();
                                if (rect.top > containerRect.bottom - 50) {
                                     entry.target.classList.remove('visible');
                                }
                            }
                        });
                    }, observerOptions);

                    // مراقبة كروت قسم الامتياز التجاري فقط
                    document.querySelectorAll('#franchise .franchise-card').forEach(card => {
                        observer.observe(card);
                    });
                }
            });
        </script>
    @endpush

@endsection