@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')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.10/build/css/intlTelInput.css">
    <style>
        @media (max-width: 991.98px) {
            .content-section {
                padding: 40px 15px 45px !important;
            }

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

        /* --- sidebar nav btns --- */
        .sidebar-nav-btn {
            width: 52px;
            height: 52px;
            border-radius: 15px;
            background: transparent;
            border: none;
            color: var(--text-dim, #aebdbb);
            cursor: pointer;
            transition: all .3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            font-size: 0.6rem;
            font-weight: 600;
            padding: 6px 2px;
        }
        .sidebar-nav-btn i {
            font-size: 1.2rem;
        }
        .sidebar-nav-btn:hover {
            background: rgba(255,255,255,0.06);
            color: var(--accent-orange);
        }
        .sidebar-nav-btn.active {
            background: var(--accent-orange);
            color: #fff;
            box-shadow: 0 0 15px rgba(229,126,58,0.35);
        }

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

        .care-input-select {
            padding: 6.5px
        }

        .care-input:focus {
            border-color: var(--accent-orange);
            outline: 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;
            }
        }

        /* --- تنسيقات قسم قصص النجاح (شعارات الشركات) --- */
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 25px;
            margin-top: 30px;
        }

        .testi-card {
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 30px;
            position: relative;
            transition: 0.3s ease;
            display: flex;
            flex-direction: column;
            backdrop-filter: blur(10px);
        }

        .testi-card:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.06);
            border-color: var(--accent-orange);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }

        .client-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        /* حاوية الشعار (الدائرة) */
        .brand-logo-wrapper {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
            border: 1px solid rgba(255, 166, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 15px;
            font-size: 1.6rem;
            color: var(--accent-orange);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        .client-info {
            display: flex;
            flex-direction: column;
        }

        .client-info h4 {
            margin: 0 0 4px 0;
            color: #fff;
            font-size: 1.1rem;
            font-weight: 700;
        }

        .client-info span {
            font-size: 0.8rem;
            color: #aaa;
            font-weight: normal;
        }

        .rating {
            color: #ffc107;
            margin-bottom: 15px;
            font-size: 0.85rem;
        }

        .testi-text {
            color: #ccc;
            font-size: 0.95rem;
            line-height: 1.7;
        }

        .bg-quote {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 3rem;
            color: rgba(255, 255, 255, 0.03);
            z-index: 0;
            pointer-events: none;
        }

        /* --- تنسيق حقول الإدخال (Inputs) --- */
        .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;
        }

        .section-header {
            text-align: center;
        }

        /* الحاوية الخارجية: نجبرها على اتجاه LTR لمنع المتصفح من عكس المحاور */
        .stores-marquee {
            width: 100%;
            margin: 20px auto;
            overflow: hidden;
            position: relative;
            display: flex;
            direction: ltr !important;
            justify-content: flex-start;
            /* بدل center */
        }

        .stores-track {
            display: flex;
            width: max-content;
            /* Animation handled via JS to support drag and resume */
        }

        .stores-group {
            display: flex;
            gap: 18px;
            padding-left: 18px;
            /* تأكد أن الفراغ من جهة اليسار لأن الاتجاه LTR */
        }

        /* تنسيق الأيقونات */
        .store-item {
            width: 130px;
            height: auto;
            display: flex;
            align-items: center;
            /* border: 1px solid #e57e3a; */
            border-radius: 10px;
            justify-content: center;
            padding: 5px;
        }

        /* الأنيميشن الافتراضية (سيتم تحديث القيم بواسطة JS) */
        @keyframes marquee-scroll-fixed {
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(-50%);
            }
        }


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

        /* --- حقل المرفق --- */
        .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;
        }

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

        #attachment-input {
            display: none;
        }

        /* --- سكشن لماذا تختارنا --- */
        .why-us-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 22px;
            margin-top: 30px;
        }

        .why-us-card {
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 30px 24px;
            text-align: center;
            transition: 0.3s ease;
            backdrop-filter: blur(10px);
        }

        /* .why-us-card:hover {
            transform: translateY(-6px);
            border-color: var(--accent-orange);
            background: rgba(255, 255, 255, 0.06);
            box-shadow: 0 12px 28px rgba(0,0,0,0.25);
        } */

        .why-us-icon {
            width: 68px;
            height: 68px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(229,126,58,0.25), rgba(229,126,58,0.05));
            border: 1px solid rgba(229,126,58,0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 18px;
            font-size: 1.6rem;
            color: var(--accent-orange);
        }

        .why-us-card h4 {
            color: #fff;
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .why-us-card p {
            color: #aaa;
            font-size: 0.85rem;
            line-height: 1.6;
            margin: 0;
        }

        /* --- سكشن الإحصائيات --- */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .stat-card {
            background: rgba(0, 0, 0, 0.35);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 18px;
            padding: 28px 20px;
            text-align: center;
            backdrop-filter: blur(8px);
            transition: 0.3s;
        }

        .stat-card:hover {
            border-color: var(--accent-orange);
            background: rgba(229, 126, 58, 0.08);
        }

        .stat-number {
            font-size: 2.4rem;
            font-weight: 800;
            color: var(--accent-orange);
            line-height: 1;
            margin-bottom: 8px;
        }

        .stat-label {
            color: #ccc;
            font-size: 0.88rem;
        }

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

        .rental-success-slider {
            display: flex;
            gap: 24px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            padding-bottom: 20px;
            scrollbar-width: none;
            -ms-overflow-style: none;
            scroll-behavior: smooth;
        }

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

        .rental-success-card {
            flex: 0 0 calc(50% - 12px);
            scroll-snap-align: center;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(229, 126, 58, 0.3);
            border-radius: 24px;
            padding: 32px 28px;
            display: flex;
            gap: 24px;
            align-items: flex-start;
            transition: 0.3s;
            backdrop-filter: blur(8px);
        }

        /* .rental-success-card:hover {
            background: rgba(229, 126, 58, 0.14);
            border-color: var(--accent-orange);
            transform: translateY(-4px);
            box-shadow: 0 12px 30px rgba(0,0,0,0.25);
        } */

        .rental-card-icon {
            width: 72px;
            height: 72px;
            flex-shrink: 0;
            border-radius: 18px;
            background: linear-gradient(135deg, rgba(229,126,58,0.3), rgba(229,126,58,0.08));
            border: 1px solid rgba(229,126,58,0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: var(--accent-orange);
        }

        .rental-card-body {
            flex: 1;
        }

        .rental-card-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 14px;
        }

        .rental-card-top h3 {
            color: #fff;
            font-size: 1.15rem;
            font-weight: 700;
            margin: 0 0 4px;
        }

        .rental-sector {
            font-size: 0.8rem;
            color: var(--accent-orange);
            font-weight: 600;
        }

        .rental-stars {
            color: #ffc107;
            font-size: 1.1rem;
            letter-spacing: 2px;
            white-space: nowrap;
        }

        .rental-card-body > p {
            color: #ccc;
            font-size: 0.92rem;
            line-height: 1.75;
            margin: 0;
        }

        .rental-slider-btn {
            position: absolute;
            top: 40%;
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            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 12px rgba(0,0,0,0.3);
        }

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

        .rental-prev-btn { right: 0; }
        .rental-next-btn { left: 0; }

        @media (max-width: 768px) {
            .rental-success-card {
                flex: 0 0 calc(85% - 12px);
                flex-direction: column;
            }
            .rental-slider-wrapper {
                padding: 0 36px;
            }
        }

        .store-item {
            width: 140px;
            height: 140px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .store-item img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            display: block;
            border-radius: 20px;
        }

        .stores-wrapper {
            position: relative;
        }

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

        .iti__dropdown-content, 
        .iti__dropdown-content[id^="iti-"] {
            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: 999999999 !important;
            margin-top: 2px !important;
            width: 100% !important;
            min-width: max-content;
            left: 0 !important;
            right: 0 !important;
            max-width: none !important;
            box-sizing: border-box !important;
            max-height: 190px !important;
            flex-direction: column !important;
            overflow: hidden !important;
        }

        .iti__country-list {
            overflow-y: auto !important;
            overflow-x: hidden !important;
            flex-grow: 1 !important;
            margin: 0 !important;
            padding: 0 !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;
        }

        /* الزر الجانبي */
        .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;
        }
    </style>
@endpush

@section('content')

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

            <button class="sidebar-nav-btn active" onclick="showSection('why-choose-us')" title="لماذا درب؟">
                <i class="fas fa-question-circle"></i>
                <span class="tab-label d-lg-none">لماذا درب؟</span>
            </button>


            <button class="sidebar-nav-btn" onclick="showSection('partner-testimonials')" title="آراء الشركاء">
                <i class="fas fa-star"></i>
                <span class="tab-label d-lg-none">آراء الشركاء</span>
            </button>

            <button class="sidebar-nav-btn" onclick="showSection('rental-request-form')" title="طلب التأجير">
                <i class="fas fa-file-invoice"></i>
                <span class="tab-label d-lg-none">طلب التأجير</span>
            </button>

        </nav>
    </aside>

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

        {{-- ===== سكشن لماذا تختارنا ===== --}}
        <section id="why-choose-us" class="content-section active">
            <!-- زر الاستشارة الجانبي -->
            <div class="consultation-btn d-none d-md-block" onclick="showSection('rental-request-form')">
                {{ app()->getLocale() == 'ar' ? 'استشارتك تبدأ من هنا' : 'Consultation Starts Here' }}
            </div>
            <div>
                <div class="section-header">
                    <h2 class="custom-title">
                        {{ app()->getLocale() == 'ar' ? ($whyDrbTitle['title_ar'] ?? 'لماذا تختار درب؟') : ($whyDrbTitle['title_en'] ?? 'Why choose Darb?') }}
                    </h2>
                    <p>
                        {{ app()->getLocale() == 'ar' ? ($whyDrbTitle['description_ar'] ?? 'نقدم لك بيئة تجارية متكاملة تضمن نجاح علامتك التجارية') : ($whyDrbTitle['description_en'] ?? 'We provide an integrated commercial environment that ensures your brand\'s success') }}
                    </p>
                </div>

                <div class="why-us-grid">
                    @php
                        $icons = ['fa-map-marker-alt', 'fa-users', 'fa-shield-alt', 'fa-handshake', 'fa-chart-line', 'fa-star', 'fa-check-circle'];
                        $locale = app()->getLocale();
                    @endphp
                    @if(isset($whyDrbData) && count($whyDrbData) > 0)
                        @foreach($whyDrbData as $index => $item)
                            <div class="why-us-card">
                                <div class="why-us-icon">
                                    @if(!empty($item['image']))
                                        <img src="{{ $item['image'] }}" alt="" style="width: 34px; height: 34px; object-fit: contain;">
                                    @else
                                        <i class="fas {{ $icons[$index % count($icons)] }}"></i>
                                    @endif
                                </div>
                                <h4>{{ $locale == 'en' ? $item['title_en'] : $item['title_ar'] }}</h4>
                                <p>{{ $locale == 'en' ? $item['description_en'] : $item['description_ar'] }}</p>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </section>


        {{-- ===== سكشن آراء الشركاء (سلايدر) ===== --}}
        <section id="partner-testimonials" class="content-section">
            <!-- زر الاستشارة الجانبي -->
            <div class="consultation-btn d-none d-md-block" onclick="showSection('rental-request-form')">
                {{ app()->getLocale() == 'ar' ? 'استشارتك تبدأ من هنا' : 'Consultation Starts Here' }}
            </div>
            <div>
                <div class="section-header text-center mb-5">
                    <h2 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' ? ($partnersOpinionsTitle['title_ar'] ?? 'ماذا يقول شركاؤنا؟') : ($partnersOpinionsTitle['title_en'] ?? 'What our partners say?') }}
                    </h2>
                    <p class="mt-3"  >
                        {{ app()->getLocale() == 'ar' ? 'قصص نجاح حقيقية من علامات تجارية تثق بدرب' : 'Real success stories from brands that trust Darb' }}
                    </p>
                </div>

                <div class="rental-slider-wrapper">
                    <!-- زر السابق -->
                    <button class="rental-slider-btn rental-prev-btn" onclick="slideRental('prev')">
                        <i class="fas fa-chevron-right"></i>
                    </button>

                    <div class="rental-success-slider" id="rentalSuccessSlider">
                        @php $locale = app()->getLocale(); @endphp
                            @foreach($partnersOpinions as $opinion)
                                <div class="rental-success-card">
                                    <div class="rental-card-icon">
                                            <img src="{{ $opinion['attachment'] }}" alt="" style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover;">
                                     
                                    </div>
                                    <div class="rental-card-body">
                                        <div class="rental-card-top">
                                            <div>
                                                <h3>{{ $locale == 'ar' ? $opinion['name_ar'] : $opinion['name_en'] }}</h3>
                                            </div>
                                        </div>
                                        <p>{{ $locale == 'ar' ? $opinion['opinion_ar'] : $opinion['opinion_en'] }}</p>
                                    </div>
                                </div>
                            @endforeach
                    
                    </div>

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

        {{-- ===== سكشن الفورم ===== --}}
        <section id="rental-request-form" class="content-section">
            <div  >

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

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

                    <div class="stores-wrapper">
                        {{-- <button class="arrow left" id="arrowLeft">&#10094;</button>
                        <button class="arrow right" id="arrowRight">&#10095;</button> --}}

                        <div class="stores-marquee">
                            <div class="stores-track" id="storesTrack">
                                <div class="stores-group" id="originalGroup">
                                    @foreach ($partners as $partner)
                                        <div class="store-item">
                                            <img src="{{ $partner['logo'] }}">
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    <p>{{ __('rental.sub_title') }}</p>
                </div>

                <div class="row">
                    <div class="col-lg-8 mx-auto">
                   <form id="rental-form" onsubmit="submitForm(event)">

    <div class="row">

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

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

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

        </div>

        <!-- رقم الهاتف -->
        <div class="col-md-6">

            <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="{{ __('rental.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="{{ __('rental.city') }}"
                   required>

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

        </div>

        <!-- نوع النشاط -->
        <div class="col-md-6 col-12">

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

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

                <option value="shop">
                    {{ __('rental.shop') }}
                </option>

                <option value="kiosk">
                    {{ __('rental.kiosk') }}
                </option>

                <option value="drive_thru">
                    {{ __('rental.drive_thru') }}
                </option>

                <option value="supermarket">
                    {{ __('rental.supermarket') }}
                </option>

            </select>

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

        </div>

        <!-- عدد الفروع -->
        <div class="col-md-6 col-12">

            <input type="text"
                   inputmode="numeric"
                   name="branches"
                   class="care-input"
                   min="0"
                   oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                   placeholder="{{ __('rental.branches') }}"
                   required>

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

        </div>

        <!-- اسم العلامة التجارية -->
        <div class="col-md-6 col-12">

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

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

        </div>

        <!-- المرفق (اختياري) -->
        <div class="col-12">

            <label class="attachment-label" for="attachment-input">
                <i class="fas fa-paperclip"></i>
                <span>أرفق ملف (اختياري) — PDF, صورة, Word</span>
                <span class="file-chosen" id="file-chosen-name">لم يتم اختيار ملف</span>
            </label>

            <input type="file"
                   id="attachment-input"
                   name="attachment"
                   accept=".pdf,.doc,.docx,.jpg,.jpeg,.png">

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

        </div>

    </div>

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

    <!-- زر الإرسال -->
    <div class="text-center mt-3">

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

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

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

        </button>

    </div>

</form>
                    </div>
                </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 src="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.10/build/js/intlTelInput.min.js"></script>
        <script>
            // ===== التنقل بين الأقسام =====
            function showSection(sectionId) {
                document.querySelectorAll('.content-section').forEach(s => {
                    s.classList.remove('active');
                    s.scrollTop = 0; // إعادة السكرول للأعلى داخل القسم
                });
                document.querySelectorAll('.sidebar-nav-btn').forEach(b => b.classList.remove('active'));

                const target = document.getElementById(sectionId);
                if (target) {
                    target.classList.add('active');
                    target.scrollTop = 0; // التأكد من أن القسم الجديد يبدأ من الأعلى
                }

                // إعادة الهيدر لحالته الأصلية
                const mainHeader = document.querySelector('.main-header');
                if (mainHeader) mainHeader.classList.remove('scrolled');

                const map = {
                    'why-choose-us': 0,
                    'partner-testimonials': 1,
                    'rental-request-form': 2
                };
                const btns = document.querySelectorAll('.sidebar-nav-btn');
                if (btns[map[sectionId]] !== undefined) btns[map[sectionId]].classList.add('active');

                window.scrollTo({ top: 0, behavior: 'smooth' });
            }

            function slideRental(dir) {
                const slider = document.getElementById('rentalSuccessSlider');
                if (!slider) return;
                const card = slider.querySelector('.rental-success-card');
                const amount = card ? card.offsetWidth + 24 : 300;
                
                // Clear existing auto-play timer to reset it on manual interaction
                if (window.rentalInterval) clearInterval(window.rentalInterval);
                window.startRentalAutoPlay();

                // RTL scroll logic: next moves left (negative), prev moves right (positive)
                if (dir === 'next') {
                    // Check if we've reached the end
                    const isAtEnd = Math.abs(slider.scrollLeft) + slider.clientWidth >= slider.scrollWidth - 50;
                    if (isAtEnd) {
                        slider.scrollTo({ left: 0, behavior: 'smooth' });
                    } else {
                        slider.scrollBy({ left: -amount, behavior: 'smooth' });
                    }
                } else {
                    // Check if we're at the beginning
                    const isAtStart = Math.abs(slider.scrollLeft) <= 50;
                    if (isAtStart) {
                        slider.scrollTo({ left: -(slider.scrollWidth - slider.clientWidth), behavior: 'smooth' });
                    } else {
                        slider.scrollBy({ left: amount, behavior: 'smooth' });
                    }
                }
            }

            // Auto-play logic
            window.startRentalAutoPlay = () => {
                window.rentalInterval = setInterval(() => {
                    const slider = document.getElementById('rentalSuccessSlider');
                    if (slider && !slider.matches(':hover')) {
                        slideRental('next');
                    }
                }, 4000);
            };

            // Initialize auto-play
            document.addEventListener('DOMContentLoaded', () => {
                window.startRentalAutoPlay();
                
                // Pause on hover
                const slider = document.getElementById('rentalSuccessSlider');
                if (slider) {
                    slider.addEventListener('mouseenter', () => clearInterval(window.rentalInterval));
                    slider.addEventListener('mouseleave', () => window.startRentalAutoPlay());
                }
            });
        </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",
            });

            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="{{ asset('js/tenants.js') }}"></script>
        <script src="{{ asset('js/script.js') }}"></script>

        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            function submitForm(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('rental-form');
                let hasError = false;

                // --- التحقق من الاسم ---
                const name = form.querySelector('[name="name"]');
                if (!name.value.trim()) {
                    hasError = true;
                    document.getElementById('error-name').textContent = "{{ __('rental.field_required') }}";
                    name.classList.add('input-error');
                }

                // --- التحقق من رقم التواصل ---
                const phone = form.querySelector('[name="phone"]');
                if (!phone.value.trim()) {
                    hasError = true;
                    document.getElementById('error-phone').textContent = "{{ __('rental.field_required') }}";
                    phone.classList.add('input-error');
                } else if (!iti.isValidNumber()) {
                    hasError = true;
                    document.getElementById('error-phone').textContent = "{{ __('rental.phone_invalid') }}";
                    phone.classList.add('input-error');
                }

                // --- التحقق من المدينة ---
                const city = form.querySelector('[name="city"]');
                if (!city.value.trim()) {
                    hasError = true;
                    document.getElementById('error-city').textContent = "{{ __('rental.field_required') }}";
                    city.classList.add('input-error');
                }

                // --- التحقق من نوع النشاط ---
                const businessType = form.querySelector('[name="business_type"]');
                if (!businessType.value) {
                    hasError = true;
                    document.getElementById('error-business_type').textContent = "{{ __('rental.business_type_required') }}";
                    businessType.classList.add('input-error');
                }

                // --- التحقق من عدد الفروع ---
                const branches = form.querySelector('[name="branches"]');
                if (!branches.value.trim()) {
                    hasError = true;
                    document.getElementById('error-branches').textContent = "{{ __('rental.branches_required') }}";
                    branches.classList.add('input-error');
                } else if (parseInt(branches.value) < 0) {
                    hasError = true;
                    document.getElementById('error-branches').textContent = "{{ __('rental.branches_min') }}";
                    branches.classList.add('input-error');
                }

                // --- التحقق من اسم العلامة التجارية ---
                const brandName = form.querySelector('[name="brand_name"]');
                if (!brandName.value.trim()) {
                    hasError = true;
                    document.getElementById('error-brand_name').textContent = "{{ __('rental.field_required') }}";
                    brandName.classList.add('input-error');
                }

                // إيقاف الإرسال إذا يوجد خطأ
                if (hasError) {
                    const firstError = form.querySelector('.input-error');
                    if (firstError) {
                        firstError.scrollIntoView({
                            behavior: 'smooth',
                            block: 'center'
                        });
                    }
                    return;
                }
                // --- الإرسال ---
                const btn = document.getElementById('submit-btn');
                btn.disabled = true;
                const originalText = btn.innerHTML;
                btn.innerHTML = '{{ __('rental.sending') }} <span class="spinner-border spinner-border-sm"></span>';

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

                // (اختياري) لو حاب تميز هذا النموذج في لوحة التحكم:
                formData.append('form_type', 'rental_request'); // يمكنك تغييره أو حذفه حسب الحاجة

                fetch("https://darbcp.sys.newtouch.sa/api/external/submit-form", {
                    method: "POST",
                    body: formData,
                    headers: {
                        'Accept': 'application/json'
                        // لا تضع Content-Type مع FormData، المتصفح يضبطه تلقائياً
                    }
                })
                    .then(response => response.json())
                    .then(result => {
                        if (result.success) {
                            const msgBox = document.getElementById('rental-message');
                            msgBox.style.display = 'block';
                            msgBox.className = 'alert-box alert-success';
                            msgBox.textContent = "{{ __('rental.success_message') }}";

                            msgBox.scrollIntoView({
                                behavior: 'smooth'
                            });

                            form.reset();

                            // مسح الأخطاء بعد الإرسال الناجح
                            document.querySelectorAll('.error-text').forEach(el => el.textContent = '');
                            document.querySelectorAll('.input-error').forEach(el => el.classList.remove('input-error'));
                        } else {
                            const msgBox = document.getElementById('rental-message');
                            msgBox.style.display = 'block';
                            msgBox.className = 'alert-box alert-error';
                            msgBox.textContent = "{{ __('rental.error_message') }}";

                            msgBox.scrollIntoView({
                                behavior: 'smooth'
                            });
                        }
                    })
                    .catch(() => {
                        Swal.fire({
                            icon: 'error',
                            title: "{{ __('rental.error_title') }}",
                            text: "{{ __('rental.error_text') }}"
                        });
                    })
                    .finally(() => {
                        btn.disabled = false;
                        btn.innerHTML = originalText;
                    });
            }
        </script>

        <script>
            // عرض اسم الملف عند اختياره
            document.getElementById('attachment-input').addEventListener('change', function() {
                const nameEl = document.getElementById('file-chosen-name');
                if (this.files && this.files.length > 0) {
                    nameEl.textContent = this.files[0].name;
                    nameEl.style.color = '#e57e3a';
                } else {
                    nameEl.textContent = 'لم يتم اختيار ملف';
                    nameEl.style.color = '';
                }
            });
        </script>

        <script>
            (function() {
                const initSlider = () => {
                    const track = document.getElementById("storesTrack");
                    const originalGroup = document.getElementById("originalGroup");

                    if (!originalGroup || !track) return;

                    // Clone for infinite loop if not already cloned
                    if (track.children.length === 1) {
                        const clone = originalGroup.cloneNode(true);
                        track.appendChild(clone);
                    }

                    let groupWidth = originalGroup.offsetWidth;
                    const gap = 18;
                    let totalDistance = groupWidth + gap;

                    let currentTranslate = 0;
                    let isDragging = false;
                    let isHovered = false;
                    let speed = 0.7;

                    function update() {
                        if (totalDistance <= gap) {
                            groupWidth = originalGroup.offsetWidth;
                            totalDistance = groupWidth + gap;
                        }

                        if (!isDragging && !isHovered) {
                            currentTranslate -= speed;
                            if (Math.abs(currentTranslate) >= totalDistance) {
                                currentTranslate += totalDistance;
                            }
                        }
                        track.style.transform = `translateX(${currentTranslate}px)`;
                        requestAnimationFrame(update);
                    }

                    update();

                    // Re-calculate after a delay to catch late-loading images
                    setTimeout(() => {
                        groupWidth = originalGroup.offsetWidth;
                        totalDistance = groupWidth + gap;
                    }, 1000);

                    track.addEventListener("mouseenter", () => isHovered = true);
                    track.addEventListener("mouseleave", () => isHovered = false);

                    window.addEventListener('resize', () => {
                        groupWidth = originalGroup.offsetWidth;
                        totalDistance = groupWidth + gap;
                    });
                };

                if (document.readyState === "complete") {
                    initSlider();
                } else {
                    window.addEventListener("load", initSlider);
                }
            })();
        </script>
    @endpush


@endsection