<?php
require_once __DIR__ . '/../magic/auth.php';

$auth = bdr_require_privilege(6, '../logout.php');
$user = $auth['user_id'];
$father = $auth['user_id'];
$branch = $auth['branch'];
$conn = $auth['conn'];
$db = $auth['conn'];

if (!isset($_SESSION)) {
}



?>
<!DOCTYPE html>
<html dir="rtl" lang="ar">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>إضافة عميل</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="./../css25/myCar.css" />
    <link rel="stylesheet" href="./../css25/drop.css" />
    <link rel="icon" href="./../images/perfect.ico">
</head>

<body class="bg-dark">
    <style>
        input[type="text"]:focus,
        input[type="date"]:focus,
        input[type="number"]:focus,
        input[type="tel"]:focus,
        textarea:focus {
            background-color: rgb(147, 227, 225);
            /* Light blue background */
            border-color: #4CAF50;
            /* Green border */
        }

        .bold_num {
            font-size: 15px;
            font-weight: 700;
        }

        .req {
            background-color: rgb(242, 204, 186);
        }

        label {
            float: left;
        }

        .red_text {
            color: rgb(116, 8, 8);
        }
        .star {
            color: rgb(194, 9, 9);
            font-size: 15px;
            font-weight: bold;
        }

        .valid-input {
            border-color: green;

        }

        .invalid-input {
            border-color: red;
        }
    </style>
    <div class="container mt-5">
        <div class="card shadow  bg-secondary bg-gradient">
            <div class="card-header bg-primary text-white">
                <h3 class="text-center">إضافة بيانات شركة</h3>
            </div>
            <br />
            <br />
            <div class="card-body">
                <form id="companyForm" method="POST" enctype="multipart/form-data">
                    <div class="row">
                        <div class="col-md-1"></div>
                        <div class="col-md-10">
                            <div id="msg"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2 mb-3">
                            <label for="idSA" class="form-label">رقم السجل التجاري <span class="star"> * </span></label>
                        </div>
                        <div class="col-md-4 mb-3">
                            <input type="number" class="form-control bold_num" id="idSA" name="idSA" placeholder="رقم السجل التجاري">
                            <div class="red_text" id="idSA_msg"></div>
                        </div>
                        <div class="col-md-2 mb-3">
                            <label for="id_Expire" class="form-label">تاريخ الانتهاء</label>
                        </div>
                        <div class="col-md-4 mb-3">
                            <input type="text" class="form-control bold_num " id="id_Expire" name="id_Expire" value="12-12-2025">
                        </div>

                    </div>

                    <div class="row">
                        <div class="col-md-2 mb-3">
                            <label for="cust_name" class="form-label">اسم الشركة <span class="star"> * </span></label>
                        </div>
                        <div class="col-md-4 mb-3">
                            <input type="text" class="form-control bold_num" id="cust_name" name="cust_name">
                            <div class="red_text" id="cust_name_msg"></div>
                        </div>
                        <div class="col-md-2 mb-3">
                            <label for="cust_vat" class="form-label">الرقم الضريبي <span class="star"> * </span></label>
                        </div>
                        <div class="col-md-4 mb-3">
                            <input type="number" class="form-control bold_num" id="cust_vat" name="cust_vat">
                            <div class="red_text" id="cust_vat_msg"></div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-2 mb-3">
                            <label for="CityName" class="form-label">المدينة <span class="star"> * </span></label>
                        </div>
                        <div class="col-md-4 mb-3">
                            <input type="text" class="form-control bold_num" id="CityName" name="CityName" value="جدة">
                            <div class="red_text" id="CityName_msg"></div>
                        </div>
                        <div class="col-md-2 mb-3">
                            <label for="SubDivisionName" class="form-label">الحي <span class="star"> * </span></label>
                        </div>
                        <div class="col-md-4 mb-3">
                            <input type="text" class="form-control bold_num" id="SubDivisionName" name="SubDivisionName">
                            <div class="red_text" id="SubDivisionName_msg"></div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-2 mb-3">
                            <label for="StreetName" class="form-label">اسم الشارع <span class="star"> * </span></label>
                        </div>
                        <div class="col-md-4 mb-3">
                            <input type="text" class="form-control bold_num" id="StreetName" name="StreetName" placeholder="اسم الشارع">
                            <div class="red_text" id="StreetName_msg"></div>
                        </div>
                        <div class="col-md-2 mb-3">
                            <label for="BuildingNumber" class="form-label">رقم المبنى <span class="star"> * </span></label>
                        </div>
                        <div class="col-md-4 mb-3">
                            <input type="number" class="form-control bold_num" id="BuildingNumber" name="BuildingNumber"placeholder="رقم العقار">
                            <div class="red_text" id="BuildingNumber_msg"></div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-2 mb-3">
                            <label for="PlotIdentification" class="form-label">رقم الوحدة <span class="star"> * </span></label>
                        </div>
                        <div class="col-md-4 mb-3">
                            <input type="text" class="form-control bold_num" id="PlotIdentification" name="PlotIdentification" placeholder="رقم الوحدة داخل العقار">
                            <div class="red_text" id="PlotIdentification_msg"></div>
                        </div>
                        <div class="col-md-2 mb-3">
                            <label for="PostalNumber" class="form-label">الرقم البريدي <span class="star"> * </span></label>
                        </div>
                        <div class="col-md-4 mb-3">
                            <input type="number" class="form-control bold_num" id="PostalNumber" name="PostalNumber" placeholder="الرقم البريدي">
                            <div class="red_text" id="PostalNumber_msg"></div>
                        </div>
                    </div>
                    <hr />
                    <div class="row">
                        <div class="col-md-8 mb-3">
                            <br />
                            <div class="row">
                                <div class="col-md-2 mb-3">
                                    <label for="phone" style="float: left;" class="form-label">تليفون الشركة <span class="star"> * </span></label>
                                </div>
                                <div class="col-md-5 mb-3">
                                    <input type="number" class="form-control bold_num" id="phone" name="phone" placeholder="رقم تليفون الشركة">
                                    <div class="red_text" id="phone_msg"></div>
                                </div>
                                <div class="col-md-5 mb-3">
                                    <input type="number" class="form-control bold_num" id="phone2" name="phone2" placeholder=" تليفون 2 ">
                                    <div class="red_text" id="phone2_msg"></div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-2 mb-3">
                                    <label for="dgree" class="form-label">الدرجة</label>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <input type="number" class="form-control bold_num" id="dgree" name="dgree" max="100" min="1" value="65" placeholder="تقييم">
                                    <div class="red_text" id="dgree_msg"></div>
                                </div>
                            </div>
                            <br />
                            <div class="row">
                                <div class="col-md-2 mb-3">
                                    <label for="working_woner" class="form-label">المسؤول</label>
                                </div>
                                <div class="col-md-10 mb-3">
                                    <input type="text" class="form-control" id="working_woner" name="working_woner" placeholder="اسم الشخص المسؤول">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-2 mb-3">
                                    <label for="w_phone" class="form-label">جوال المسؤول</label>
                                </div>
                                <div class="col-md-5 mb-3">
                                    <input type="number" class="form-control bold_num " id="w_phone" name="w_phone" placeholder="جوال المسؤول">
                                    <div class="red_text" id="w_phone_msg"></div>
                                </div>
                                <div class="col-md-5 mb-3">
                                    <input type="number" class="form-control bold_num " id="w_phone2" name="w_phone2" placeholder="جوال المسؤول">
                                    <div class="red_text" id="w_phone2_msg"></div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <label for="comm" style="float: right;" class="form-label">ملاحظات</label>
                                    <textarea class="form-control" id="comm" name="comm" rows="2"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="row">
                                <div class="col-md-12 mb-3 ">
                                    <div class="drop-area" id="dropArea" style="height:330px;">
                                        سحب وافلات هنا ..<small class="text-muted">(الملفات المدعومة: JPG, PDF)</small>
                                        <div class="file-preview mt-3"></div>
                                    </div>
                                    <input type="file" name="file" id="fileInput" hidden accept=".jpg,.jpeg,.pdf">
                                    <div class="red_text" id="file_msg"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- </div> -->
                    <br />
                    <button type="submit" class="btn btn-primary w-100">حفظ البيانات</button>
                </form>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function validatePhoneNumber(phone) {
            return /^05\d{8}$/.test(phone); // Saudi phone number format
        }

        function validateSAID(id) {
            return /^7\d{9}$/.test(id);
        }

        function validateVAT(vat) {
            return /^3\d{14}$/.test(vat);
        }

        function validateBuilding(building) {
            return /^\d{4}$/.test(building);
        }

        function validatePostal(postal) {
            return /^\d{5}$/.test(postal);
        }
        const dropArea = document.getElementById('dropArea');
        const fileInput = document.getElementById('fileInput');
        const filePreview = document.querySelector('.file-preview');

        const idSA = document.getElementById('idSA');
        const id_Expire = document.getElementById('id_Expire');
        const cust_name = document.getElementById('cust_name');
        const dgree = document.getElementById('dgree');
        const cust_vat = document.getElementById('cust_vat');
        const phone = document.getElementById('phone');
        const phone2 = document.getElementById('phone2');
        const CityName = document.getElementById('CityName');
        const SubDivisionName = document.getElementById('SubDivisionName');
        const StreetName = document.getElementById('StreetName');
        const BuildingNumber = document.getElementById('BuildingNumber');
        const PlotIdentification = document.getElementById('PlotIdentification');
        const PostalNumber = document.getElementById('PostalNumber');
        const working_woner = document.getElementById('working_woner');
        const w_phone = document.getElementById('w_phone');
        const w_phone2 = document.getElementById('w_phone2');
        const comm = document.getElementById('comm');


        idSA.addEventListener('input', function() {
            if (validateSAID(this.value)) {
                this.classList.remove('invalid-input','req');
                this.classList.add('valid-input');
            } else {
                this.classList.remove('valid-input');
                this.classList.add('invalid-input','req');
            }
        });
        cust_vat.addEventListener('input', function() {
            if (validateVAT(this.value)) {
                this.classList.remove('invalid-input','req');
                this.classList.add('valid-input');
            } else {
                this.classList.remove('valid-input');
                this.classList.add('invalid-input','req');
            }
        });
         cust_name.addEventListener('input', function() {
            if (this.value.length > 2) {
                this.classList.remove('invalid-input','req');
                this.classList.add('valid-input');
            } else {
                this.classList.remove('valid-input');
                this.classList.add('invalid-input','req');
            }
        });
        CityName.addEventListener('input', function() {
            if (this.value.length > 2) {
                this.classList.remove('invalid-input','req');
                this.classList.add('valid-input');
            } else {
                this.classList.remove('valid-input');
                this.classList.add('invalid-input','req');
            }
        });
        SubDivisionName.addEventListener('input', function() {
            if (this.value.length >2) {
                this.classList.remove('invalid-input','req');
                this.classList.add('valid-input');
            } else {
                this.classList.remove('valid-input');
                this.classList.add('invalid-input','req');
            }
        });
        PlotIdentification.addEventListener('input', function() {
            if (this.value.length > 0) {
                this.classList.remove('invalid-input','req');
                this.classList.add('valid-input');
            } else {
                this.classList.remove('valid-input');
                this.classList.add('invalid-input','req');
            }
        });
        StreetName.addEventListener('input', function() {
            if (this.value.length >2) {
                this.classList.remove('invalid-input','req');
                this.classList.add('valid-input');
            } else {
                this.classList.remove('valid-input');
                this.classList.add('invalid-input','req');
            }
        });
         BuildingNumber.addEventListener('input', function() {
            if (validateBuilding(this.value)) {
                this.classList.remove('invalid-input','req');
                this.classList.add('valid-input');
            } else {
                this.classList.remove('valid-input');
                this.classList.add('invalid-input','req');
            }
        });
         PostalNumber.addEventListener('input', function() {
            if (validatePostal(this.value)) {
                this.classList.remove('invalid-input','req');
                this.classList.add('valid-input');
            } else {
                this.classList.remove('valid-input');
                this.classList.add('invalid-input','req');
            }
        });
         phone.addEventListener('input', function() {
            if (validatePhoneNumber(this.value)) {
                this.classList.remove('invalid-input','req');
                this.classList.add('valid-input');
            } else {
                this.classList.remove('valid-input');
                this.classList.add('invalid-input','req');
            }
        });
        

        // Highlight drop area when dragging over it
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, preventDefaults, false);
        });

        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }

        ['dragenter', 'dragover'].forEach(eventName => {
            dropArea.addEventListener(eventName, () => dropArea.classList.add('active'), false);
        });

        ['dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, () => dropArea.classList.remove('active'), false);
        });

        // Handle dropped files
        dropArea.addEventListener('drop', handleDrop, false);

        function handleDrop(e) {
            const dt = e.dataTransfer;
            const files = dt.files;

            handleFiles(files);
        }

        // Open file dialog when clicking on the drop area
        dropArea.addEventListener('click', () => fileInput.click());

        // Handle file input change
        fileInput.addEventListener('change', () => {
            handleFiles(fileInput.files);
        });

        function handleFiles(files) {
            if (files.length > 1) {
                alert('يرجى اختيار ملف واحد فقط');
                return;
            }
            const file = files[0];
            const maxSize = 2 * 1024 * 1024; // 5MB

            // Validate file type and size
            if (!['image/jpeg', 'application/pdf'].includes(file.type)) {
                alert('نوع الملف غير مدعوم. يرجى اختار صورة (JPG) أو ملف PDF');
                return;
            }

            if (file.size > maxSize) {
                alert('حجم الملف كبير جداً. الحد الأقصى 5MB');
                return;
            }
            ([...files]).forEach(uploadFile);
        }

        function uploadFile(file) {
            // Validate file type
            if (!['image/jpeg', 'application/pdf'].includes(file.type)) {
                alert('فضلا اختار صور او ملفات pdf شكرا');
                return;
            }

            // Show file preview
            filePreview.innerHTML = ''; // Clear previous preview

            if (file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    filePreview.appendChild(img);
                };
                reader.readAsDataURL(file);
            } else if (file.type === 'application/pdf') {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const iframe = document.createElement('iframe');
                    iframe.src = e.target.result;
                    iframe.className = 'pdf-preview';
                    iframe.height = 260;
                    filePreview.appendChild(iframe);
                };
                reader.readAsDataURL(file);
            }

            // Store file in input field
            const dataTransfer = new DataTransfer();
            dataTransfer.items.add(file);
            fileInput.files = dataTransfer.files;
        }
        //validation
        function validate() {
            var err = 0;
            // Clear all error messages
            document.querySelectorAll('.red_text').forEach(el => el.textContent = '');

            const idSAv = idSA.value;
            const id_Expirev = id_Expire.value;
            const cust_namev = cust_name.value;
            const dgreev = dgree.value;
            const cust_vatv = cust_vat.value;
            const phonev = phone.value;
            const phone2v = phone2.value;
            const CityNamev = CityName.value;
            const SubDivisionNamev = SubDivisionName.value;
            const StreetNamev = StreetName.value;
            const BuildingNumberv = BuildingNumber.value;
            const PlotIdentificationv = PlotIdentification.value;
            const PostalNumberv = PostalNumber.value;
            const working_wonerv = working_woner.value;
            const w_phonev = w_phone.value;
            const w_phone2v = w_phone2.value;
            const commv = comm.value;

            if (!validateSAID(idSAv)) {
                idSA_msg.textContent = 'رقم السجل التجاري يجب أن يكون 10 أرقام';
                err++;
            }

            if (cust_namev.length < 3) {
                cust_name_msg.textContent = 'اسم الشركة يجب أن يكون على الأقل 3 أحرف';
                err++;
            }

            if (!validateVAT(cust_vatv)) {
                cust_vat_msg.textContent = 'الرقم الضريبي يجب أن يكون 15 رقما';
                err++;
            }

            if (!validatePhoneNumber(phonev)) {
                phone_msg.textContent = 'رقم الهاتف يجب أن يبدأ بـ 05 ويتكون من 10 أرقام';
                err++;
            }

            if (phone2v && !validatePhoneNumber(phone2v)) {
                phone2_msg.textContent = 'رقم الهاتف يجب أن يبدأ بـ 05 ويتكون من 10 أرقام';
                err++;
            }

            if (w_phonev && !validatePhoneNumber(w_phonev)) {
                w_phone_msg.textContent = 'رقم الهاتف يجب أن يبدأ بـ 05 ويتكون من 10 أرقام';
                err++;
            }

            if (w_phone2v && !validatePhoneNumber(w_phone2v)) {
                w_phone2_msg.textContent = 'رقم الهاتف يجب أن يبدأ بـ 05 ويتكون من 10 أرقام';
                err++;
            }

            if (CityNamev.length < 3) {
                CityName_msg.textContent = 'فضلا تأكد من اسم المدينة';
                err++;
            }

            if (SubDivisionNamev.length < 3) {
                SubDivisionName_msg.textContent = 'فضلا تأكد من اسم الحي';
                err++;
            }

            if (StreetNamev.length < 3) {
                StreetName_msg.textContent = 'فضلا تأكد من اسم الشارع';
                err++;
            }

            if (!validateBuilding(BuildingNumberv)) {
                BuildingNumber_msg.textContent = 'رقم العقار يجب أن يكون 4 أرقام';
                err++;
            }

            if (PlotIdentificationv.length < 1) {
                PlotIdentification_msg.textContent = 'تأكد من رقم الوحدة داخل العقار';
                err++;
            }

            if (!validatePostal(PostalNumberv)) {
                PostalNumber_msg.textContent = 'فضلا تأكد من الرقم البريدي 5 أرقام';
                err++;
            }

            return err;
        }
        // save data
        document.getElementById('companyForm').addEventListener('submit', async (e) => {
            e.preventDefault();

            // Get form elements
            const msg = document.getElementById('msg');
            const idSAv = idSA.value;
            const id_Expirev = id_Expire.value;
            const cust_namev = cust_name.value;
            const dgreev = dgree.value;
            const cust_vatv = cust_vat.value;
            const phonev = phone.value;
            const phone2v = phone2.value;
            const CityNamev = CityName.value;
            const SubDivisionNamev = SubDivisionName.value;
            const StreetNamev = StreetName.value;
            const BuildingNumberv = BuildingNumber.value;
            const PlotIdentificationv = PlotIdentification.value;
            const PostalNumberv = PostalNumber.value;
            const working_wonerv = working_woner.value;
            const w_phonev = w_phone.value;
            const w_phone2v = w_phone2.value;
            const commv = comm.value;
            // message
            const idSA_msg = document.getElementById('idSA_msg');
            const cust_name_msg = document.getElementById('cust_name_msg');
            const cust_vat_msg = document.getElementById('cust_vat_msg');
            const phone_msg = document.getElementById('phone_msg');
            const phone2_msg = document.getElementById('phone2_msg');
            const w_phone_msg = document.getElementById('w_phone_msg');
            const w_phone2_msg = document.getElementById('w_phone2_msg');
            const CityName_msg = document.getElementById('CityName_msg');
            const SubDivisionName_msg = document.getElementById('SubDivisionName_msg');
            const StreetName_msg = document.getElementById('StreetName_msg');
            const BuildingNumber_msg = document.getElementById('BuildingNumber_msg');
            const PlotIdentification_msg = document.getElementById('PlotIdentification_msg');
            const PostalNumber_msg = document.getElementById('PostalNumber_msg');
            const file_msg = document.getElementById('file_msg');

            if (validate() > 0) {
                return;
            }
// Get form elements
    const submitBtn = e.target.querySelector('button[type="submit"]');
    const originalBtnText = submitBtn.innerHTML;
if (validate() > 0) {
                return;
            }
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> جاري الحفظ...';
    
            const formData = new FormData();

            formData.append('file', fileInput.files[0]);

            formData.append('idSA', idSAv);
            formData.append('id_Expire', id_Expirev);
            formData.append('cust_name', cust_namev);
            formData.append('dgree', dgreev);
            formData.append('cust_vat', cust_vatv);
            formData.append('phone', phonev);
            formData.append('phone2', phone2v);
            formData.append('CityName', CityNamev);
            formData.append('SubDivisionName', SubDivisionNamev);
            formData.append('StreetName', StreetNamev);
            formData.append('BuildingNumber', BuildingNumberv);
            formData.append('PlotIdentification', PlotIdentificationv);
            formData.append('PostalNumber', PostalNumberv);

            formData.append('working_woner', working_wonerv);
            formData.append('w_phone', w_phonev);
            formData.append('w_phone2', w_phone2v);
            formData.append('comm', commv);
            formData.append('action', 'new');
        try {
                const response = await fetch('companyControl.php', {
                    method: 'POST',
                    body: formData,
                });
                const result = await response.json();
        if (result.success) {
                    // alert(result.save_msg);
                    // msg.textContent = result.save_msg;
                    // phone_msg.textContent = result.phone_msg;
                    window.location.href = 'success.html';
                } else {
            msg.textContent = result.save_msg;
            // Display server-side validation errors
            // if (result.errors) {
            //     for (const [field, error] of Object.entries(result.errors)) {
            //         const errorElement = document.getElementById(`${field}_msg`);
            //         if (errorElement) {
            //             errorElement.textContent = error;
            //         }
            //     }
            // }
             idSA_msg.textContent=result.idSA_msg;
                cust_name_msg.textContent=result.cust_name_msg;
                cust_vat_msg.textContent=result.cust_vat_msg;
                phone_msg.textContent=result.phone_msg;
                phone2_msg.textContent=result.phone2_msg;
                w_phone_msg.textContent=result.w_phone_msg;
                w_phone2_msg.textContent=result.w_phone2_msg;
                CityName_msg.textContent=result.CityName_msg;
                SubDivisionName_msg.textContent=result.SubDivisionName_msg;
                StreetName_msg.textContent=result.StreetName_msg;
                BuildingNumber_msg.textContent=result.BuildingNumber_msg;
                PlotIdentification_msg.textContent=result.PlotIdentification_msg;
                PostalNumber_msg.textContent=result.PostalNumber_msg;
        }
    } catch (error) {
        console.error('Error:', error);
        // msg.textContent = error;
        msg.textContent = 'حدث خطأ أثناء محاولة حفظ البيانات';
    } 
    finally {
    //     // Reset button state
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalBtnText;
    }

        });
    </script>

    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <!-- Include Flatpickr Arabic Localization -->
    <script src="https://npmcdn.com/flatpickr/dist/l10n/ar.js"></script>
    <script>
        const today = new Date();

        // Calculate the date 5 years from today
        const fiveYearsFromNow = new Date(today);
        fiveYearsFromNow.setFullYear(today.getFullYear() + 5);
        const expire = new Date(today);
        expire.setMonth(today.getMonth() + 3)

        flatpickr("#id_Expire", {
            dateFormat: "Y-m-d", // Display format: yyyy-mm-dd
            locale: "ar", // Use Arabic localization
            defaultDate: expire, // Set initial value to today's date
            minDate: today, // Set minimum selectable date
            maxDate: fiveYearsFromNow, // Set maximum selectable date
        });
    </script>

</body>

</html>