
­­­­­­­­­­­­­­­­­­
<!DOCTYPE html>
<html>
<?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_offers2 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_details2 WHERE offer_id = '$subpage' and isactive = '1' order by rand()";
$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'];
$row3[] = $row2;
    
}

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'];


$_GET['formtype'] = 'installment';
$_GET['bypass_otp'] = '1';
$campaign = $_GET['campaign'];

//temp change campaign name
$campaign = "Summer-2025";
$sourcee = $_GET['sourcee'];

?>

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

<!-- Google Tag Manager -->
<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-TWXSWFRR');</script>
<!-- End Google Tag Manager -->
    
    <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://hyundaimynaghioffers.com/lead-form-ar/1/" />
<meta property="og:image" content="https://www.hyundai.com/content/dam/hyundai/mynaghi/en/images/build-a-car/special-offers25/rm25/Santafe%20WEB%20BANNERS_HP-PC%201860x720_AR.jpg" />
<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">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
    
    <style>
        body {
            font-family: 'cairo', serif;
            background-color: #f8f9fa;
            direction:rtl;
        }
        

/* Small Mobile (up to 320px) */
@media only screen and (max-width: 320px) {
 .boxInner {
        padding: 11px;
        font-size: 8px;
        min-height: 110px;
    }
}

/* Mobile (321px - 480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) {
  .boxInner {
        padding: 11px;
        font-size: 8px;
        min-height: 110px;
    }
}

/* Large Mobile (481px - 600px) */
@media only screen and (min-width: 481px) and (max-width: 600px) {
  .boxInner {
        padding: 11px;
        font-size: 11px;
        min-height: 110px;
    }
}

/* Tablet (601px - 768px) */
@media only screen and (min-width: 601px) and (max-width: 768px) {
  .boxInner {
        padding: 11px;
        font-size: 11px;
        min-height: 110px;
    }
}

/* Small Laptop (769px - 1024px) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .boxInner {
        padding: 11px;
        font-size: 12px;
        min-height: 110px;
    }
}

/* Laptop (1025px - 1366px) */
@media only screen and (min-width: 1025px) and (max-width: 1366px) {
  .boxInner {
        padding: 11px;
        font-size: 12px;
        min-height: 110px;
    }
}

/* Large Laptop (1367px and above) */
@media only screen and (min-width: 1367px) {
  .boxInner {
        padding: 11px;
        font-size: 12px;
        min-height: 110px;
    }
}        
        
        h5{
        font-size: 0.9rem;    
        }
        
        .navbar {
            background-color: #FFFFFF;
        }
        .navbar-brand img {
            height: 1em;
        }
        .navbar-brand-l img {
            height: 1em;
            float:left;
        }
        .footer {
            background-color: #000000;
            color: #FFFFFF;
            text-align: center;
            padding: 15px 0;
            margin-top: 30px;
        }
        .social-icons a {
            color: #ffb612;
            margin: 0 10px;
            font-size: 20px;
            text-decoration: none;
        }
        .card {
            border: none;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .countdown-container {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
        
        .flip-clock-divider .flip-clock-label {
 
    right: -5em;

}

.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;
    border-radius: 0px;
    background: #002c5f; 
    color: #FFFFFF;
            
        }
        
        .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;
}

    
    
    .boxInner{
    
    overflow-y: hidden;
    line-height: 1.428;
    box-sizing: border-box;
    transition: all .5s;
        
    }
    
    
    .scrollBox {
    margin-top: 6px;
    margin-bottom: 45px;
    border: 1px solid #e4dcd3;
    box-sizing: border-box;
}

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


.slider-container { max-width: 100%; overflow: hidden; position: relative; }
        .slide { width: 100%; display: none; top: 0; left: 0; }
        .slide img { width: 100%; display: block; }
        .slide.active { display: block; }
        
    </style>
</head>
<body>

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TWXSWFRR"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->  
    
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="/../assets/ico-logo.png" alt="Hyundai Logo">
            </a>
            
            <a class="navbar-brand-l" href="#">
                <img src="/../assets/hyundai-mynaghi-ci.png" alt="Hyundai Logo">
            </a>
        </div>
    </nav>
 <div class="container mt-5">
        <div class="card shadow p-4">

     <div class="slider-container">
        <img src="/../assets/slider/4a.jpg" alt="Image 1" class="slide active">
        <img src="/../assets/slider/4a.jpg" alt="Image 2" class="slide">
        <img src="/../assets/slider/4a.jpg" alt="Image 3" class="slide">
    </div>

<div style="height:10px;"></div>     

            <h4 class="mb-4">سيارتك المثالية بانتظارك!</h4>
            <h5 class="mb-4">اطلب عرض السعر وابدأ رحلتك اليوم</h5>
            
<?php //print_r($_SESSION); ?>            
<?php if($_GET['bypass_otp']=='1'){ ?> 

<form id="carPurchaseForm" method="post" action="https://hyundaimynaghioffers.com/submit-lead-ar/">

<?php }else{ ?>
            <form id="carPurchaseForm" method="post" action="https://hyundaimynaghioffers.com/submit-lead-ar/">
<?php } ?>

<input type="hidden" value="<?php echo $utm_source ?>" name="utm_source">
<input type="hidden" value="<?php echo $utm_campaign; ?>" name="utm_campaign">
<input type="hidden" value="<?php echo $campaign; ?>" name="campaign">
<input type="hidden" value="<?php echo $sourcee; ?>" name="sourcee">
<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" placeholder="الاسم الأول" required>
                </div>
                
                <div class="mb-3">
                <!--    <label for="lastname" class="form-label">اسم العائلة</label> -->
                    <input type="text" class="form-control" id="lastname" name="lastname" placeholder="اسم العائلة" required>
                </div>
                
                <div class="mb-3">
                  <!--  <label for="email" class="form-label">البريد الإلكتروني</label>  -->
                    <input type="email" class="form-control" id="email" name="email" placeholder="البريد الإلكتروني" 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" placeholder="رقم الجوال" required>
   
</div>


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

<input type="hidden" name="salary" value="4502">

<?php }else{?>
                
                <div class="mb-3">
                  <!--  <label for="salary" class="form-label">الراتب</label>  -->
                    
<select class="form-select salary-select" id="salary" name="salary" required>
<option value="">اختر الراتب الشهري</option>
<!-- <option value="Below 5,000">أقل من 5,000</option> -->
<option value="Between 5,000 and 10,000">من 5,000 الى 10,000</option>
<option value="Above 10,000">اكثر من 10,000 </option>
<option value="Cash Deal">شراء نقدي  (كاش)</option>
    
    </select>
    
                </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 ($row3 as $row3v) {
                
                echo '<option value="'.$row3v['car_name'].'">'.$row3v['car_name_ar'].'</option>';   
                    
                }
                
                ?>        
                    </select>
                </div>
<?php }else{ ?>


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

<?php }?>
                <div class="mb-3" style="display:none;">
                    <label for="nationality" class="form-label">الجنسية</label>
                    <select class="form-select nationality-select" id="nationality" name="nationality" >
                        <option value="">اختر الجنسية</option>
                        
    <option value="Saudi">سعودي</option>
    
    <option value="Non-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'){ ?>

<input type="hidden" name="bank" value="OTHERS">

<?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="AlRajhi Bank">البنك الراجحي</option>
<option value="Alinma Bank">بنك الإنماء</option>
<option value="AlJazira Bank">بنك الجزيرة</option>
<option value="Anb">البنك العربي الوطني</option>
<option value="Emirates NBD">بنك الامارات</option>
<option value="Riyad Bank">بنك الرياض</option>
<option value="SABB">بنك ساب</option>
<option value="Saudi Fransi Bank">بنك الفرنسي</option>
<option value="Saudi National Bank (SNB)">البنك الأهلي السعودي</option>
<option value="Others">أخرى</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 (!in_array($_GET['city_id'], ["Jeddah", "Makkah", "Taif", "Jazan", "Khamis", "Yanbu", "Buraydah", "Madinah", "Ahsa", "Riyadh", "Tabuk", "Dammam", "Hail"])) {

 ?>


                
                <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="Medina">مدينة المنورة</option>
<option value="Yanbu">ينبع</option>
<option value="Abha">أبها</option>
<option value="Tabuk">تبوك</option>
<option value="Najran">نجران</option>
                    </select>
                </div>

<?php } else{?>


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

<script>

$(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" >
                        <option value="">اختر الفرع المفضل</option>
                    </select>
                </div>
 
<?php if($_GET['formtype'] == 'cash'){ ?>

<input type="hidden" name="obligation" value="no">

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

<?php } ?>                  
                
                <div class="mb-3 d-none" id="realestateLoanContainer" style="display:none;">
                    <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" style="display:none;">
                    <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="1 month">1 شهر </option>
<option value="2-3 months">2-3 أشهر</option>
<option value="After 3 months">بعد 3 أشهر</option>
                    </select>
                </div>

<div class="mb-3 form-check">
                    <input type="checkbox" checked class="form-check-input" id="privacypolicy" name="privacypolicy" required>
                    <label class="form-check-label" style="margin-right: 26px;
    text-align: right;
    direction: rtl;" for="privacypolicy"><span style="font-size:15px;">أوافق على شروط وأحكام لمجموعة محمد يوسف ناغي<a style="color:#002c5f!important;" href="https://www.hyundai.com/mynaghi/ar/utility/privacy-policy"><u>(الشروط والأحكام)</u></a> وسياسة الخصوصية لمجموعة محمد يوسف ناغي<a style="color:#002c5f!important;" href="https://www.hyundai.com/mynaghi/ar/utility/privacy-policy"><u>(سياسة الخصوصية)</u></a></span></label>
                </div>
                
                <div class="mb-3 form-check">
                    <input type="checkbox" checked class="form-check-input" id="terms2" name="terms2" required>
                    <label class="form-check-label" style="margin-right: 26px;
    text-align: right;
    direction: rtl;" for="terms2"><span style="font-size:15px;">لا أرغب في تلقي معلومات تجارية في المستقبل عن هيونداي أو شبكة وكلائها الرسميين.</span></label>
                </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">لقد قرأت واستعرض.<br>
    <div class="scrollBox">
    <div class="boxInner" style="height: auto; visibility: visible;">
        
        بقبولي، فإنني أوافق على أن تقوم هيونداي شركة محمد يوسف ناغي للسيارات والشركات التابعة لها بالتواصل معي عبر البريد أو البريد الإلكتروني لأغراض تسويقية. بالإضافة إلى ذلك، من خلال تقديم رقم هاتفي وتقديم الطلب، فإنني أوافق على تلقي المكالمات والرسائل النصية التلقائية من شركة محمد يوسف ناغي للسيارات والشركات التابعة لها لأغراض تسويقية. أفهم أن موافقتي ليست شرطًا لشراء أي منتج أو خدمة وأنه يمكنني إلغاء موافقتي في أي وقت. يرجى زيارة سياسة الخصوصية لشركة محمد يوسف ناغي لمزيد من المعلومات حول كيفية جمع بياناتك واستخدامها وحمايتها.
        
    </div></div></label>
                </div>
                

                
                
                
                
                
                
                <button type="submit" class="btn second-button" id="submitBtn">إرسال</button>
            </form>
        </div>
    </div>

    <footer class="footer">
        <div class="container">
                <p style="direction:ltr;" >&copy; <?php echo date("Y"); ?> Mohamed Yousuf Naghi Motors Co. All rights reserved.</p>
    <p>جميع الحقوق محفوظة لشركة محمد يوسف ناغي للسيارات.</p>
           
            </div>
        </div>
    </footer>


<script>
        $(document).ready(function () {
            $(".nationality-select").select2();
            
            $(".bank-select").select2();
            $(".salary-select").select2();
            
            $(".model-select").select2();
            
             $("#obligation").change(function() {
                if ($(this).val() === "yes") {
                    $("#realestateLoanContainer, #obligationAmountContainer").removeClass("d-none");
                } else {
                    $("#realestateLoanContainer, #obligationAmountContainer").addClass("d-none");
                    $("#obligationAmount").val(""); // Clear value when hiding the field
                }
            });
            
            let branches = {
                "Jeddah": ["معرض السيارات - طريق الحرمين",
"معرض السيارات - اتو مول",
"معرض السيارات - طريق الملك عبدالله .الشرفية",
"معرض السيارات - طريق المدينة",
"معرض السيارات - التحلية"],

    "Makkah": ["معرض السيارات - التنم",
    "معرض السيارات - الكعكية"],
    
    "Taif": ["معرض السيارات - الطائف"],
    "Medina": ["معرض السيارات - طريق المطار"],
    "Khamis": ["خميس مشيط طريق الملك فهد"],
    "Yanbu": [" معرض السيارات - ينبع"],
    "Abha": ["معرض السيارات - ابها"],
    "Tabuk": ["معرض السيارات - تبوك"],
    "Najran": ["معرض السيارات - نجران"]
                
                
            };
            
            
            $("#city").change(function () {
                let city = $(this).val();
                let branchSelect = $("#branch");
                branchSelect.empty().append('<option value="">اختر الفرع المفضل</option>');
                if (city && branches[city]) {
                    branches[city].forEach(branch => {
                        branchSelect.append(`<option value="${branch}">${branch}</option>`);
                    });
                }
            });


$.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: false, email: true },
                    mobile: { required: true, mobileValidation: true },
                    salary: { required: true },
                    model: { required: true },
                    bank: { required: true },
                    gender: { required: true },
                    city: { required: true },
                    branch: { required: true },
                    terms: { required: true }
                },
                messages: {
                    salary: { min: "يجب أن يكون الراتب أكثر من 4500" }
                },
                errorClass: "text-danger"
            });
        });
        
        
        
    </script>  
    

<script>
        let index = 0;
        const slides = document.querySelectorAll('.slide');
        const totalSlides = slides.length;
        
        function nextSlide() {
            slides[index].classList.remove('active');
            index = (index + 1) % totalSlides;
            slides[index].classList.add('active');
        }
        
        setInterval(nextSlide, 5000);
    </script>   
    
    
    <?php if($_GET['city_id'] == ''){ ?>


<?php } else{?>


<script>

$(document).ready(function () {

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

});

</script>




<?php } ?>



    
</body>
</html>
<?php
$conn->close();
?>
