22

✏️ Editing: leadp-form-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="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $title; ?></title>
    <meta name="description" content="<?php echo $description; ?>">
  <meta name="keywords" content="Autozone, Balubaid, Cars Offer">
  <meta name="author" content="Khurram Dhedhi">
  <meta property="og:title" content="<?php echo $title; ?>" />
<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; ?>" />
    <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;
    
}

@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;
            
        }
        
        .second-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;
    
}
        
    </style>
</head>
<body>
    <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">Your Next Car is Just a Step Away – Get Started Today!</h3>
            <form id="carPurchaseForm" method="post" action="https://specialoffers.autozone.com.sa/submit-lead/">

<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">Full Name</label>
                    <input type="text" class="form-control" id="fullName" name="fullName" required>
                </div>
                
                <div class="mb-3">
                    <label for="email" class="form-label">Email Address</label>
                    <input type="email" class="form-control" id="email" name="email" required>
                </div>
                
                <div class="mb-3">
                    <label for="mobile" class="form-label">Mobile Number</label>
                    <input type="tel" class="form-control" id="mobile" name="mobile" required>
                </div>
                
                <div class="mb-3">
                    <label for="salary" class="form-label">Salary</label>
                    <input type="tel" class="form-control" id="salary" name="salary" required>
                </div>

<?php if($_GET['car_id'] == ''){ ?>
                
                <div class="mb-3">
                    
                    <label for="model" class="form-label">Model of Interest</label>
                    <select class="form-select model-select" id="model" name="model" required>
                        <option value="">Select Model</option>
                
                <?php foreach ($car_names_en 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">Nationality</label>
                    <select class="form-select nationality-select" id="nationality" name="nationality" required>
                        <option value="">Select Nationality</option>
                        
    <option value="Saudi">Saudi</option>
                        <option value="Afghan">Afghan</option>
    <option value="Albanian">Albanian</option>
    <option value="Algerian">Algerian</option>
    <option value="American">American</option>
    <option value="Andorran">Andorran</option>
    <option value="Angolan">Angolan</option>
    <option value="Argentinian">Argentinian</option>
    <option value="Armenian">Armenian</option>
    <option value="Australian">Australian</option>
    <option value="Austrian">Austrian</option>
    <option value="Azerbaijani">Azerbaijani</option>
    <option value="Bahraini">Bahraini</option>
    <option value="Bangladeshi">Bangladeshi</option>
    <option value="Barbadian">Barbadian</option>
    <option value="Belarusian">Belarusian</option>
    <option value="Belgian">Belgian</option>
    <option value="Belizean">Belizean</option>
    <option value="Beninese">Beninese</option>
    <option value="Bhutanese">Bhutanese</option>
    <option value="Bolivian">Bolivian</option>
    <option value="Bosnian">Bosnian</option>
    <option value="Botswanan">Botswanan</option>
    <option value="Brazilian">Brazilian</option>
    <option value="British">British</option>
    <option value="Bruneian">Bruneian</option>
    <option value="Bulgarian">Bulgarian</option>
    <option value="Burkinabe">Burkinabe</option>
    <option value="Burmese">Burmese</option>
    <option value="Burundian">Burundian</option>
    <option value="Cambodian">Cambodian</option>
    <option value="Cameroonian">Cameroonian</option>
    <option value="Canadian">Canadian</option>
    <option value="Cape Verdean">Cape Verdean</option>
    <option value="Central African">Central African</option>
    <option value="Chadian">Chadian</option>
    <option value="Chilean">Chilean</option>
    <option value="Chinese">Chinese</option>
    <option value="Colombian">Colombian</option>
    <option value="Comorian">Comorian</option>
    <option value="Congolese">Congolese</option>
    <option value="Costa Rican">Costa Rican</option>
    <option value="Croatian">Croatian</option>
    <option value="Cuban">Cuban</option>
    <option value="Cypriot">Cypriot</option>
    <option value="Czech">Czech</option>
    <option value="Danish">Danish</option>
    <option value="Djiboutian">Djiboutian</option>
    <option value="Dominican">Dominican</option>
    <option value="Dutch">Dutch</option>
    <option value="Ecuadorian">Ecuadorian</option>
    <option value="Egyptian">Egyptian</option>
    <option value="Emirati">Emirati</option>
    <option value="Equatorial Guinean">Equatorial Guinean</option>
    <option value="Eritrean">Eritrean</option>
    <option value="Estonian">Estonian</option>
    <option value="Ethiopian">Ethiopian</option>
    <option value="Fijian">Fijian</option>
    <option value="Finnish">Finnish</option>
    <option value="French">French</option>
    <option value="Gabonese">Gabonese</option>
    <option value="Gambian">Gambian</option>
    <option value="Georgian">Georgian</option>
    <option value="German">German</option>
    <option value="Ghanaian">Ghanaian</option>
    <option value="Greek">Greek</option>
    <option value="Guatemalan">Guatemalan</option>
    <option value="Guinean">Guinean</option>
    <option value="Haitian">Haitian</option>
    <option value="Honduran">Honduran</option>
    <option value="Hungarian">Hungarian</option>
    <option value="Icelandic">Icelandic</option>
    <option value="Indian">Indian</option>
    <option value="Indonesian">Indonesian</option>
    <option value="Iranian">Iranian</option>
    <option value="Iraqi">Iraqi</option>
    <option value="Irish">Irish</option>
    <option value="Israeli">Israeli</option>
    <option value="Italian">Italian</option>
    <option value="Ivorian">Ivorian</option>
    <option value="Jamaican">Jamaican</option>
    <option value="Japanese">Japanese</option>
    <option value="Jordanian">Jordanian</option>
    <option value="Kazakhstani">Kazakhstani</option>
    <option value="Kenyan">Kenyan</option>
    <option value="Kuwaiti">Kuwaiti</option>
    <option value="Lao">Lao</option>
    <option value="Latvian">Latvian</option>
    <option value="Lebanese">Lebanese</option>
    <option value="Libyan">Libyan</option>
    <option value="Lithuanian">Lithuanian</option>
    <option value="Luxembourger">Luxembourger</option>
    <option value="Malaysian">Malaysian</option>
    <option value="Maldivian">Maldivian</option>
    <option value="Malian">Malian</option>
    <option value="Maltese">Maltese</option>
    <option value="Mexican">Mexican</option>
    <option value="Moldovan">Moldovan</option>
    <option value="Mongolian">Mongolian</option>
    <option value="Moroccan">Moroccan</option>
    <option value="Mozambican">Mozambican</option>
    <option value="Namibian">Namibian</option>
    <option value="Nepalese">Nepalese</option>
    <option value="New Zealander">New Zealander</option>
    <option value="Nigerian">Nigerian</option>
    <option value="North Korean">North Korean</option>
    <option value="Norwegian">Norwegian</option>
    <option value="Omani">Omani</option>
    <option value="Pakistani">Pakistani</option>
    <option value="Palestinian">Palestinian</option>
    <option value="Panamanian">Panamanian</option>
    <option value="Paraguayan">Paraguayan</option>
    <option value="Peruvian">Peruvian</option>
    <option value="Philippine">Philippine</option>
    <option value="Polish">Polish</option>
    <option value="Portuguese">Portuguese</option>
    <option value="Qatari">Qatari</option>
    <option value="Romanian">Romanian</option>
    <option value="Russian">Russian</option>
    <option value="Saudi">Saudi</option>
    <option value="Singaporean">Singaporean</option>
    <option value="South African">South African</option>
    <option value="South Korean">South Korean</option>
    <option value="Spanish">Spanish</option>
    <option value="Sudanese">Sudanese</option>
    <option value="Swedish">Swedish</option>
    <option value="Swiss">Swiss</option>
    <option value="Syrian">Syrian</option>
    <option value="Thai">Thai</option>
    <option value="Tunisian">Tunisian</option>
    <option value="Turkish">Turkish</option>
    <option value="Ukrainian">Ukrainian</option>
    <option value="Yemeni">Yemeni</option>
                    </select>
                </div>
                
             
                <div class="mb-3">
                    <label for="bank" class="form-label">Bank where Salary is Transferred</label>
                    <select class="form-select bank-select" id="bank" name="bank" required>
                        <option value="">Select Bank</option>
                        <option value="Samba Bank">Samba Bank</option>
                        <option value="SABB Bank">SABB Bank</option>
                        <option value="Bilad Bank">Bilad Bank</option>
                        <option value="Alinma Bank">Alinma Bank</option>
                        <option value="Jazirah Bank">Jazirah Bank</option>
                        <option value="Saudi Investment Bank">Saudi Investment Bank</option>
                        <option value="Emirates NBD">Emirates NBD</option>
                        <option value="Saudi National Bank">Saudi National Bank</option>
                        <option value="Rajhi Bank">Rajhi Bank</option>
                        <option value="Arab National Bank">Arab National Bank</option>
                        <option value="Riyad Bank">Riyad Bank</option>
                        <option value="Saudi Franci Bank">Saudi Franci Bank</option>
                    </select>
                </div>
                
                <div class="mb-3">
                    <label for="gender" class="form-label">Gender</label>
                    <select class="form-select" id="gender" name="gender" required>
                        <option value="">Select</option>
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                    </select>
                </div>

<?php if($_GET['city_id'] == ''){ ?>
                
                <div class="mb-3">
                    <label for="city" class="form-label">City</label>
                    <select class="form-select" id="city" name="city" required>
                        <option value="">Select City</option>
                        <option value="Jeddah">Jeddah</option>
                        <option value="Makkah">Makkah</option>
                        <option value="Taif">Taif</option>
                        <option value="Jazan">Jazan</option>
                        <option value="Khamis">Khamis Mushyat</option>
                        <option value="Yanbu">Yanbu</option>
                        <option value="Buraydah">Buraydah</option>
                        <option value="Madinah">Madinah</option>
                        <option value="Ahsa">Ahsa</option>
                        <option value="Riyadh">Riyadh</option>
                        <option value="Tabuk">Tabuk</option>
                        <option value="Dammam">Dammam</option>
                        <option value="Hail">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">Branch</label>
                    <select class="form-select" id="branch" name="branch" required>
                        <option value="">Select Branch</option>
                    </select>
                </div>
                
                <div class="mb-3">
                    <label for="obligation" class="form-label">Do you have an obligation?</label>
                    <select class="form-select" id="obligation" name="obligation" required>
                        <option value="">Select</option>
                        <option value="yes">Yes</option>
                        <option value="no">No</option>
                    </select>
                </div>
                
                <div class="mb-3 d-none" id="realestateLoanContainer">
                    <label for="realestateLoan" class="form-label">Does your obligation include a real estate loan?</label>
                    <select class="form-select" id="realestateLoan" name="realestateLoan">
                        <option value="">Select</option>
                        <option value="yes">Yes</option>
                        <option value="no">No</option>
                    </select>
                </div>
                
                <div class="mb-3 d-none" id="obligationAmountContainer">
                    <label for="obligationAmount" class="form-label">Monthly Obligation Amount</label>
                    <input type="tel" class="form-control" id="obligationAmount" name="obligationAmount">
                </div>
                
                <div class="mb-3">
                    <label for="purchaseTime" class="form-label">When do you want to purchase the car?</label>
                    <select class="form-select" id="purchaseTime" name="purchaseTime" required>
                        <option value="">Select</option>
                        <option value="Immediate">Immediate</option>
                        <option value="1-3 months">1-3 months</option>
                        <option value="3-6 months">3-6 months</option>
                    </select>
                </div>
                
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="terms" name="terms" required>
                    <label class="form-check-label" for="terms">I agree to the Terms and Conditions and Privacy Policy of Balubaid Automotive</label>
                </div>
                
                <button type="submit" class="btn second-button" id="submitBtn">Submit</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);
    }, "Only English and Arabic letters are allowed. No numbers or special characters.");

$.validator.addMethod("mobileValidation", function(value, element) {
    return this.optional(element) || /^(05|٠٥)[\d\u0660-\u0669]{8}$/.test(value);
}, "Mobile number must start with 05 (English) or ٠٥ (Arabic) and be exactly 10 digits long.");

$.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;
}, "Only numbers (English or Arabic) allowed. Minimum value is 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
    }, "Only numbers (English or Arabic) are allowed.");

$("#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 },
                    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: "Salary must be more than 4500." }
                },
                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 } ?>
    
</body>
</html>
<?php
$conn->close();
?>

MR SKB