22

✏️ Editing: lead-form-ar-backup.php

<?php
$servername = "localhost";  // Change this if necessary
$username = "balubaid_autozoneoffers";         // Your database username
$password = "Vision@2050";             // Your database password
$database = "balubaid_autozoneoffers";  // Your database name

// Set timezone to Riyadh
date_default_timezone_set('Asia/Riyadh');

// Create a connection
$conn = new mysqli($servername, $username, $password, $database);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Ensure database timezone matches Riyadh timezone
$conn->query("SET time_zone = '+03:00'");

// Function to convert images to WebP
function convertToWebP($source, $destination, $quality = 65) {
    $info = getimagesize($source);
    if ($info['mime'] == 'image/jpeg' || $info['mime'] == 'image/jpg') {
        $image = imagecreatefromjpeg($source);
    } elseif ($info['mime'] == 'image/png') {
        $image = imagecreatefrompng($source);
        imagepalettetotruecolor($image);
        imagealphablending($image, true);
        imagesavealpha($image, true);
    } else {
        return false;
    }
    return imagewebp($image, $destination, $quality);
}

$subpage = $_GET['subpage'];

// Fetch only valid and active special offers from database
$sql = "SELECT * FROM special_offers WHERE id = '$subpage'";
$result = $conn->query($sql);

// Check if query was successful
if (!$result) {
    die("Error in SQL query: " . $conn->error);
}

//Fetch Offer Details
while ($row1 = $result->fetch_assoc()) {
$title = $row1['title'];
$title_ar = $row1['title_ar'];
$description = $row1['description'];
$description_ar = $row1['description_ar'];
$offer_id = $row1['id'];
$offer_slug = $row1['offer_name'];
$ogimage_url = $row1['image_url'];
    
}

// Fetch only select offer car details from database
$sql = "SELECT * FROM offers_details WHERE offer_id = '$offer_id'";
$result = $conn->query($sql);

// Check if query was successful
if (!$result) {
    die("Error in SQL query: " . $conn->error);
}

while ($row2 = $result->fetch_assoc()) {
$car_names_en[] = $row2['car_name'];
$car_names_ar[] = $row2['car_name_ar'];
    
}

if($_GET['car_id'] == ''){

}else{
    
$car_id = $_GET['car_id'];

// Fetch only select offer car details from database
$sql = "SELECT * FROM offers_details WHERE id = '$car_id'";
$result = $conn->query($sql);

// Check if query was successful
if (!$result) {
    die("Error in SQL query: " . $conn->error);
}

while ($row3 = $result->fetch_assoc()) {
$single_car_names_en = $row3['car_name'];
$single_car_names_ar = $row3['car_name_ar'];
    
}    
    
}

$utm_campaign = $_SESSION['utm_campaign'];
$utm_source =  $_SESSION['utm_source'];

<!DOCTYPE html>
<html lang="ar">
<head>

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5QL8T48Q');</script>

    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $title_ar; ?></title>
    <meta name="description" content="<?php echo $description_ar; ?>">
  <meta name="keywords" content="اوتوزون - بالبيد - عروض السيارات">
  <meta name="author" content="Khurram Dhedhi">
  <meta property="og:title" content="<?php echo $title_ar; ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://specialoffers.autozone.com.sa/offers/<?php echo $subpage; ?>" />
<meta property="og:image" content="<?php echo $ogimage_url; ?>" />
<meta property="og:description" content="<?php echo $description_ar; ?>" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap" rel="stylesheet">

}

.flip-clock-divider.minutes .flip-clock-label {
    right: -6em;
}

.flip-clock-divider.seconds .flip-clock-label {
    right: -5.7em;
}

.flip-clock-wrapper ul li a div div.inn{
            
            font-size:3rem;    
                
            }

.flip-clock-wrapper {
            transform: scale(0.8);
            max-width: 100%;
            margin: 0em;
        }
.flip-clock-dot {
left: -0.3em;
    width: 0.5em;
    height: 0.5em;        
}

.flip-clock-divider{

margin-left:0.3em;
margin-right:0.3em;
    
}

.form-check .form-check-input {
    float: right;
    margin-right: 0em;
}

.select2-results{

text-align:right;    
    
}

.select2-selection__rendered{

text-align:right;       
    
}

@media (max-width: 1024px) {
            .flip-clock-wrapper {
                transform: scale(0.6);
            }
            
            .flip-clock-wrapper ul li a div div.inn{
            
            font-size:3rem;    
                
            }
        }
        
        @media (max-width: 768px) {
            .flip-clock-wrapper {
                transform: scale(0.6);
            }
            
            .flip-clock-wrapper ul li a div div.inn{
            
            font-size:3rem;    
                
            }
        }
        @media (max-width: 480px) {
            .flip-clock-wrapper {
                transform: scale(0.8);
            }
            
            .flip-clock-wrapper ul li a div div.inn{
            
            font-size:3.0rem;    
                
            }
        }
        
        .first-button{
        width: 100%;
    margin-bottom: 10px;
    transform: skew(-6deg, -0deg);
    border-radius: 0px;
    background: #55556F;    
    color: #ffb612;        
        }
        
        
        .second-button{
        width: 100%;
    margin-bottom: 10px;
    transform: skew(-6deg, -0deg);
    border-radius: 0px;
    background: #ffb612; 
    color: #55556F;
            
        }
        
        .third-button{
border: 0px;
    margin-bottom: 10px;
    transform: skew(-6deg, -0deg);
    border-radius: 0px;
    background: #ffb612; 
    color: #55556F;
            
        }        
        
        .second-button:hover{
    background: #55556F;
    color:#FFFFFF;
            
        }

.third-button:hover{
    background: #55556F;
    color:#FFFFFF;
            
        }        
        
        .first-button:hover{
   background: #ffb612; 
    color: #55556F;
            
        }
        .card-title{
    color: #ffb612;         
        }
.form-control{
border-radius: 25px;    
}

.form-select{
border-radius: 25px;     
}

.select2-container--default .select2-selection--single{

border-radius: 25px;  
 display: block;
    width: 100%;
    height: 43px;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    transition: border-color .15sease-in-out, box-shadow .15sease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
}

.form-select {
    --bs-form-select-bg-img: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
    display: block;
    width: 100%;
    padding: .375rem .375rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: left .75rem center;
    background-size: 16px 12px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15sease-in-out, box-shadow .15sease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 1px;
    left: 1px;
    width: 20px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    display: block;
    padding-left: 8px;
    padding-right: 0px;
    margin-right: -27px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
        
    </style>
</head>
<body>

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5QL8T48Q"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    
    
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="https://autozone.com.sa/wp-content/uploads/2018/08/Logo-L-For-Web.png" alt="Autozone Logo">
            </a>
        </div>
    </nav>
 <div class="container mt-5">
        <div class="card shadow p-4">
            <h3 class="mb-4">سيارتك القادمة على بُعد خطوة واحدة – ابدأ اليوم!</h3>
            <form id="carPurchaseForm" method="post" action="https://specialoffers.autozone.com.sa/submit-lead-ar/">

<input type="hidden" value="<?php echo $utm_source ?>" name="utm_source">
<input type="hidden" value="<?php echo $offer_slug."|".$utm_campaign."|".$utm_source ?>" name="utm_campaign">
<input type="hidden" value="<?php echo $_GET['formtype'] ?>" name="formtype">
<input type="hidden" value="<?php echo $offer_id ?>" name="offer_id">

<div class="mb-3">
                    <label for="fullName" class="form-label">الاسم الكامل</label>
                    <input type="text" class="form-control" id="fullName" name="fullName" required>
                </div>
                
                <div class="mb-3">
                    <label for="email" class="form-label">البريد الإلكتروني</label>
                    <input type="email" class="form-control" id="email" name="email" required>
                </div>
                
<div class="mb-3">
    <label for="mobile" class="form-label">رقم الجوال</label>
    <input type="tel" style="text-align:right;" class="form-control" id="mobile" name="mobile" required>
    <button type="button" id="sendOTP" class="btn btn-primary mt-2 third-button">إرسال رمز التحقق</button>
</div>

<div class="mb-3 d-none" id="otpSection">
    <label for="otp" class="form-label">أدخل رمز التحقق</label>
    <input type="text" class="form-control" id="otp" name="otp">
    <button type="button" id="verifyOTP" class="btn btn-success mt-2 third-button">تحقق من رمز التحقق</button>
    <p class="text-danger mt-1 d-none" id="otpMessage"></p>
    <p class="text-warning mt-1 d-none" id="otpCooldown"></p>
</div>

<?php if($_GET['formtype'] == 'cash'){ ?>

<?php }else{?>
                
                <div class="mb-3">
                    <label for="salary" class="form-label">الراتب</label>
                    <input type="tel" style="text-align:right;" class="form-control" id="salary" name="salary" required>
                </div>
                
<?php } ?>

<?php if($_GET['car_id'] == ''){ ?>
                
                <div class="mb-3">
                    
                    <label for="model" class="form-label">السيارة المطلوبة</label>
                    <select class="form-select model-select" id="model" name="model" required>
                        <option value="">اختر السيارة</option>
                
                <?php foreach ($car_names_ar as $carsf) {
                
                echo '<option value="'.$carsf.'">'.$carsf.'</option>';   
                    
                }
                
                ?>        
                    </select>
                </div>
<?php }else{ ?>

<input type="hidden" value="<?php echo $single_car_names_en; ?>" name="model" >

<?php }?>
                <div class="mb-3">
                    <label for="nationality" class="form-label">الجنسية</label>
                    <select class="form-select nationality-select" id="nationality" name="nationality" required>
                        <option value="">اختر الجنسية</option>
                        
    <option value="Saudi">سعودي</option>
<option value="Afghan">أفغاني</option>
<option value="Albanian">ألباني</option>
<option value="Algerian">جزائري</option>
<option value="American">أمريكي</option>
<option value="Andorran">أندوري</option>
<option value="Angolan">أنغولي</option>
<option value="Argentinian">أرجنتيني</option>
<option value="Armenian">أرميني</option>
<option value="Australian">أسترالي</option>
<option value="Austrian">نمساوي</option>
<option value="Azerbaijani">أذربيجاني</option>
<option value="Bahraini">بحريني</option>
<option value="Bangladeshi">بنغلاديشي</option>
<option value="Barbadian">بربادوسي</option>
<option value="Belarusian">بيلاروسي</option>
<option value="Belgian">بلجيكي</option>
<option value="Belizean">بيليزي</option>
<option value="Beninese">بنيني</option>
<option value="Bhutanese">بوتاني</option>
<option value="Bolivian">بوليفي</option>
<option value="Bosnian">بوسني</option>
<option value="Botswanan">بوتسواني</option>
<option value="Brazilian">برازيلي</option>
<option value="British">بريطاني</option>
<option value="Bruneian">بروني</option>
<option value="Bulgarian">بلغاري</option>
<option value="Burkinabe">بوركيني</option>
<option value="Burmese">بورمي</option>
<option value="Burundian">بوروندي</option>
<option value="Cambodian">كمبودي</option>
<option value="Cameroonian">كاميروني</option>
<option value="Canadian">كندي</option>
<option value="Cape Verdean">الرأس الأخضر</option>
<option value="Central African">أفريقي وسطي</option>
<option value="Chadian">تشادي</option>
<option value="Chilean">تشيلي</option>
<option value="Chinese">صيني</option>
<option value="Colombian">كولومبي</option>
<option value="Comorian">جزر القمر</option>
<option value="Congolese">كونغولي</option>
<option value="Costa Rican">كوستاريكي</option>
<option value="Croatian">كرواتي</option>
<option value="Cuban">كوبي</option>
<option value="Cypriot">قبرصي</option>
<option value="Czech">تشيكي</option>
<option value="Danish">دنماركي</option>
<option value="Djiboutian">جيبوتي</option>
<option value="Dominican">دومينيكاني</option>
<option value="Dutch">هولندي</option>
<option value="Ecuadorian">إكوادوري</option>
<option value="Egyptian">مصري</option>
<option value="Emirati">إماراتي</option>
<option value="Equatorial Guinean">غيني استوائي</option>
<option value="Eritrean">إريتري</option>
<option value="Estonian">إستوني</option>
<option value="Ethiopian">إثيوبي</option>
<option value="Fijian">فيجي</option>
<option value="Finnish">فنلندي</option>
<option value="French">فرنسي</option>
<option value="Gabonese">غابوني</option>
<option value="Gambian">غامبي</option>
<option value="Georgian">جورجي</option>
<option value="German">ألماني</option>
<option value="Ghanaian">غاني</option>
<option value="Greek">يوناني</option>
<option value="Guatemalan">غواتيمالي</option>
<option value="Guinean">غيني</option>
<option value="Haitian">هايتي</option>
<option value="Honduran">هندوراسي</option>
<option value="Hungarian">هنغاري</option>
<option value="Icelandic">آيسلندي</option>
<option value="Indian">هندي</option>
<option value="Indonesian">إندونيسي</option>
<option value="Iranian">إيراني</option>
<option value="Iraqi">عراقي</option>
<option value="Irish">إيرلندي</option>
<option value="Israeli">إسرائيلي</option>
<option value="Italian">إيطالي</option>
<option value="Ivorian">إيفواري</option>
<option value="Jamaican">جامايكي</option>
<option value="Japanese">ياباني</option>
<option value="Jordanian">أردني</option>
<option value="Kazakhstani">كازاخستاني</option>
<option value="Kenyan">كيني</option>
<option value="Kuwaiti">كويتي</option>
<option value="Lao">لاوسي</option>
<option value="Latvian">لاتفي</option>
<option value="Lebanese">لبناني</option>
<option value="Libyan">ليبي</option>
<option value="Lithuanian">لتواني</option>
<option value="Luxembourger">لوكسمبورغي</option>
<option value="Malaysian">ماليزي</option>
<option value="Maldivian">مالديفي</option>
<option value="Malian">مالي</option>
<option value="Maltese">مالطي</option>
<option value="Mexican">مكسيكي</option>
<option value="Moldovan">مولدوفي</option>
<option value="Mongolian">منغولي</option>
<option value="Moroccan">مغربي</option>
<option value="Mozambican">موزمبيقي</option>
<option value="Namibian">ناميبي</option>
<option value="Nepalese">نيبالي</option>
<option value="New Zealander">نيوزيلندي</option>
<option value="Nigerian">نيجيري</option>
<option value="North Korean">كوري شمالي</option>
<option value="Norwegian">نرويجي</option>
<option value="Omani">عماني</option>
<option value="Pakistani">باكستاني</option>
<option value="Palestinian">فلسطيني</option>
<option value="Panamanian">بنمي</option>
<option value="Paraguayan">باراغوياني</option>
<option value="Peruvian">بيروفي</option>
<option value="Philippine">فلبيني</option>
<option value="Polish">بولندي</option>
<option value="Portuguese">برتغالي</option>
<option value="Qatari">قطري</option>
<option value="Romanian">روماني</option>
<option value="Russian">روسي</option>
<option value="Saudi">سعودي</option>
<option value="Singaporean">سنغافوري</option>
<option value="South African">جنوب أفريقي</option>
<option value="South Korean">كوري جنوبي</option>
<option value="Spanish">إسباني</option>
<option value="Sudanese">سوداني</option>
<option value="Swedish">سويدي</option>
<option value="Swiss">سويسري</option>
<option value="Syrian">سوري</option>
<option value="Thai">تايلاندي</option>
<option value="Tunisian">تونسي</option>
<option value="Turkish">تركي</option>
<option value="Ukrainian">أوكراني</option>
<option value="Yemeni">يمني</option>
                    </select>
                </div>

<?php if($_GET['formtype'] == 'cash'){ ?>

<?php }else{ ?>                
             
                <div class="mb-3">
                    <label for="bank" class="form-label">البنك الذي يتم تحويل الراتب إليه</label>
                    <select class="form-select bank-select" id="bank" name="bank" required>
                        <option value="">اختر البنك</option>
                        <option value="Samba Bank">بنك سامبا</option>
<option value="SABB Bank">البنك السعودي البريطاني (ساب)</option>
<option value="Bilad Bank">بنك البلاد</option>
<option value="Alinma Bank">بنك الإنماء</option>
<option value="Jazirah Bank">بنك الجزيرة</option>
<option value="Saudi Investment Bank">البنك السعودي للاستثمار</option>
<option value="Emirates NBD">بنك الإمارات دبي الوطني</option>
<option value="Saudi National Bank">البنك الأهلي السعودي</option>
<option value="Rajhi Bank">بنك الراجحي</option>
<option value="Arab National Bank">البنك العربي الوطني</option>
<option value="Riyad Bank">بنك الرياض</option>
<option value="Saudi Franci Bank">البنك السعودي الفرنسي</option>
                    </select>
                </div>

<?php } ?>
                
                <div class="mb-3">
                    <label for="gender" class="form-label">الجنس</label>
                    <select class="form-select" id="gender" name="gender" required>
                        <option value="">اختر</option>
                        <option value="Male">ذكر</option>
<option value="Female">أنثى</option>
                    </select>
                </div>

<?php if($_GET['city_id'] == ''){ ?>
                
                <div class="mb-3">
                    <label for="city" class="form-label">المدينة</label>
                    <select class="form-select" id="city" name="city" required>
                       <option value="">اختر المدينة</option>
<option value="Jeddah">جدة</option>
<option value="Makkah">مكة المكرمة</option>
<option value="Taif">الطائف</option>
<option value="Jazan">جازان</option>
<option value="Khamis">خميس مشيط</option>
<option value="Yanbu">ينبع</option>
<option value="Buraydah">بريدة</option>
<option value="Madinah">المدينة المنورة</option>
<option value="Ahsa">الأحساء</option>
<option value="Riyadh">الرياض</option>
<option value="Tabuk">تبوك</option>
<option value="Dammam">الدمام</option>
<option value="Hail">حائل</option>
                    </select>
                </div>

<?php } else{?>

<input type="hidden" id="city" name="city" value="<?php echo $_GET['city_id'] ?>" required>

$(document).ready(function () {

$("#city").val("<?php echo $_GET['city_id'] ?>").trigger("change");

});

</script>

<?php } ?>
                <div class="mb-3">
                    <label for="branch" class="form-label">الفرع</label>
                    <select class="form-select" id="branch" name="branch" required>
                        <option value="">اختر الفرع المفضل</option>
                    </select>
                </div>
 
<?php if($_GET['formtype'] == 'cash'){ ?>

<?php }else{ ?> 
                
                <div class="mb-3">
                    <label for="obligation" class="form-label">هل لديك أي التزامات مالية؟</label>
                    <select class="form-select" id="obligation" name="obligation" required>
                        <option value="">اختر</option>
<option value="yes">نعم</option>
<option value="no">لا</option>
                    </select>
                </div>

<?php } ?>                  
                
                <div class="mb-3 d-none" id="realestateLoanContainer">
                    <label for="realestateLoan" class="form-label">هل تشمل التزاماتك قرضًا عقاريًا؟</label>
                    <select class="form-select" id="realestateLoan" name="realestateLoan">
                        <option value="">اختر</option>
<option value="yes">نعم</option>
<option value="no">لا</option>
                    </select>
                </div>
                
                <div class="mb-3 d-none" id="obligationAmountContainer">
                    <label for="obligationAmount" class="form-label">مبلغ الالتزامات الشهرية</label>
                    <input type="tel" style="text-align:right;" class="form-control" id="obligationAmount" name="obligationAmount">
                </div>
                
                <div class="mb-3">
                    <label for="purchaseTime" class="form-label">متى ترغب في شراء السيارة؟</label>
                    <select class="form-select" id="purchaseTime" name="purchaseTime" required>
                        <option value="">اختر</option>
                        <option value="Immediate">فوري</option>
<option value="1-2 weeks">١-٢ أسابيع</option>
<option value="3-4 weeks">٣-٤ أسابيع</option>
<option value="1-3 months">١-٣ أشهر</option>
<option value="3-6 months">٣-٦ أشهر</option>
                    </select>
                </div>
                
                <div class="mb-3 form-check">
                    <input type="checkbox" checked class="form-check-input" id="terms" name="terms" required>
                    <label class="form-check-label" style="margin-right: 26px;
    text-align: right;
    direction: rtl;" for="terms"><span style="font-size:15px;">أوافق على شروط وأحكام شركة بالبيد للسيارات <a style="color:#ffb612!important;" href="https://lp.autozone.com.sa/privacy-policy/"><u>(الشروط والأحكام)</u></a> وسياسة الخصوصية شركة بالبيد للسيارات <a style="color:#ffb612!important;" href="https://lp.autozone.com.sa/privacy-policy/"><u>(سياسة الخصوصية)</u></a></span></label>
                </div>
                
                <button type="submit" class="btn second-button" id="submitBtn">إرسال</button>
            </form>
        </div>
    </div>

<footer class="footer">
        <div class="container">
            <p>&copy; <?php echo date('Y'); ?> Balubaid Automotives. All rights reserved.</p>
            <p>Toll-Free: 800-760-6000</p>
            <div class="social-icons">
                <a href="#"><i class="fa-brands fa-facebook"></i></a>
                <a href="#"><i class="fa-brands fa-twitter"></i></a>
                <a href="#"><i class="fa-brands fa-instagram"></i></a>
                <a href="#"><i class="fa-brands fa-linkedin"></i></a>
            </div>
        </div>
    </footer>

$.validator.addMethod("onlyEnglishArabicWithSpaces", function (value, element) {
        return this.optional(element) || /^[A-Za-z\u0600-\u06FF ]+$/.test(value);
    }, "يُسمح فقط بالحروف الإنجليزية والعربية. غير مسموح بالأرقام أو الرموز الخاصة");

$.validator.addMethod("mobileValidation", function(value, element) {
    return this.optional(element) || /^(05|٠٥)[\d\u0660-\u0669]{8}$/.test(value);
}, "يجب أن يبدأ رقم الجوال بـ 05 (بالإنجليزية) أو ٠٥ (بالعربية) وأن يكون مكونًا من 10 أرقام بالضبط");

$.validator.addMethod("numericArabicEnglishsalary", function(value, element) {
    if (value.trim() === "") return false; // Prevent empty values

// Convert Arabic numbers (٠-٩) to English numbers (0-9)
    let arabicToEnglish = value.replace(/[\u0660-\u0669]/g, function (d) {
        return String.fromCharCode(d.charCodeAt(0) - 0x0660 + 48);
    });

// Ensure only numbers (Arabic or English) and validate min value
    return /^\d+$/.test(arabicToEnglish) && parseInt(arabicToEnglish, 10) >= 4501;
}, "يُسمح بالأرقام فقط (بالإنجليزية أو العربية). الحد الأدنى للقيمة هو 4501");

// Custom validation method to accept both English and Arabic numbers
    $.validator.addMethod("numericArabicEnglish", function(value, element) {
        if (value === "") return true; // Allow empty if not required
        let arabicToEnglish = value.replace(/[\u0660-\u0669]/g, function (d) {
            return d.charCodeAt(0) - 0x0660; // Convert Arabic numerals to English
        });

return /^\d+$/.test(arabicToEnglish); // Ensure it's a number
    }, "يُسمح بالأرقام فقط (بالإنجليزية أو العربية)");

jQuery.validator.setDefaults({
        ignore: [] // This ensures hidden fields are also validated
    });

$("#carPurchaseForm").validate({
                submitHandler: function(form, event) {
                    event.preventDefault(); // Prevent default form submission
                    if ($("#carPurchaseForm").valid()) { // Ensure the whole form is valid
                        $("#submitBtn").prop("disabled", true);
                        form.submit();
                    }
                },
                rules: {
                    fullName: { required: true,onlyEnglishArabicWithSpaces: true },
                    email: { required: true, email: true },
                    mobile: { required: true, mobileValidation: true },
                    salary: { required: true, numericArabicEnglishsalary: true },
                    model: { required: true },
                    nationality: { required: true },
                    otp: { required: true, minlength: 6 },
                    bank: { required: true },
                    gender: { required: true },
                    city: { required: true },
                    branch: { required: true },
                    terms: { required: true },
                     obligationAmount: {
                required: function() {
                    return $("#obligation").val() === "yes"; // Required only if obligation is "yes"
                },
                numericArabicEnglish: true
            }
                },
                messages: {
                    salary: { min: "يجب أن يكون الراتب أكثر من 4500" },
                    otp: { required: "رمز التحقق مطلوب", minlength: "يجب أن يكون رمز التحقق مكونًا من 6 أرقام" }
                },
                errorClass: "text-danger"
            });
        });
        
        
        
    </script>  
    
    
    <?php if($_GET['city_id'] == ''){ ?>

<?php } else{?>

$(document).ready(function () {

$("#city").val("<?php echo $_GET['city_id'] ?>").trigger("change");

});

</script>

<?php } ?>

$("#sendOTP").click(function () {
        let mobile = $("#mobile").val();
        if (!mobile.match(/^(05|٠٥)[\d\u0660-\u0669]{8}$/)) {
            alert("أدخل رقم جوال سعودي صالح");
            return;
        }

$("#sendOTP").prop("disabled", true);
        $("#otpMessage").addClass("d-none");
        
        $.post("https://specialoffers.autozone.com.sa/send-otp/", { mobile: mobile }, function (data) {
            if (data.success) {
                $("#otpSection").removeClass("d-none");
                startCooldown();
            } else {
                alert("Error sending OTP. Try again later.");
                $("#sendOTP").prop("disabled", false);
            }
        }, "json");
    });

$("#verifyOTP").click(function () {
        let otp = $("#otp").val();
        let mobile = $("#mobile").val();

if (!otp || otp.length !== 6) {
            alert("Enter a valid 6-digit OTP.");
            return;
        }

$.post("https://specialoffers.autozone.com.sa/verify-otp/", { mobile: mobile, otp: otp }, function (data) {
            if (data.success) {
                $("#otpMessage").removeClass("d-none text-danger").addClass("text-success").text("OTP Verified!");
                $("#otpVerified").val("1");
                $("#verifyOTP").prop("disabled", true);
                $("#submitBtn").prop("disabled", false);
            } else {
                otpAttempts--;
                $("#otpMessage").removeClass("d-none").text(`رمز التحقق غير صحيح. المحاولات المتبقية: ${otpAttempts}`);
                
                if (otpAttempts === 0) {
                    $("#verifyOTP").prop("disabled", true);
                    $("#otpMessage").text("عدد كبير جدًا من المحاولات غير الصحيحة. حاول مرة أخرى لاحقًا");
                }
            }
        }, "json");
    });

// Ensure form is submitted ONLY after OTP verification
    $("#carPurchaseForm").submit(function (event) {
        if ($("#otpVerified").val() !== "1") {
            alert("يجب عليك التحقق من رمز التحقق قبل الإرسال");
            event.preventDefault(); // Stop form submission
        }
    });
});
</script>
    
</body>
</html>
<?php
$conn->close();
?>

MR SKB