﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Land Record Form</title>

    <!-- Fonts and icons -->
    <!-- Google Fonts (Urdu + English) -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu&family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">

    <!-- Urdu Font (Jameel Noori Nastaleeq) -->
    <style>
        @font-face {
            font-family: 'Jameel Noori Nastaleeq';
            src: url('/assets/fonts/JameelNooriNastaleeq.ttf') format('truetype');
            font-display: swap;
        }

        /* Global Urdu Typography Baseline */
        body {
            font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
        }

        /* Explicitly enforce Urdu font on form controls */
        label,
        input,
        select,
        textarea,
        option {
            font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif !important;
            direction: rtl;
            text-align: right;
        }

        /* Utility class for Urdu blocks */
        .urdu-text {
            font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif !important;
            direction: rtl;
            text-align: right;
        }

        /* Height & vertical alignment normalization */
        input,
        select,
        textarea {
            height: 44px;
            line-height: 44px;
            padding: 6px 12px;
        }

        /* Fix select text vertical alignment */
        select {
            padding-top: 6px;
            padding-bottom: 6px;
        }

            /* Options rendering (critical for some browsers) */
            select option {
                font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif !important;
                direction: rtl;
                text-align: right;
            }

        /* Labels spacing polish */
        label {
            display: inline-block;
            margin-bottom: 6px;
        }
    </style>

    <link href="/assets/css/nucleo-icons.css" rel="stylesheet" />
    <link href="/assets/css/nucleo-svg.css" rel="stylesheet" />
    <script src="https://kit.fontawesome.com/349ee9c857.js" crossorigin="anonymous"></script>
    <link href="/assets/css/corporate-ui-dashboard.css?v=1.0.0" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <!-- SweetAlert2 Library -->
    <script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>  <!-- QR-Code Library -->    <!-- SweetAlert & jQuery -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>-->

</head>

<body class="bg-gray-100">
    <div class="container top-0 z-index-sticky">
        <div class="row">
            <div class="col-12">
                <nav class="navbar navbar-expand-lg bg-white rounded-2 top-0 mt-4 z-index-3 shadow position-absolute my-3 py-2 start-0 end-0 mx-4">
                    <div class="container-fluid">
                        <!-- Brand Logo that redirects to Home -->
                        <a class="navbar-brand ms-lg-0 ms-3" href="/">
                            <img src="/assets/img/pulse-logo-Green.png" alt="Pulse Logo" class="img-fluid" style="height: 40px; width: auto;">
                        </a>

                        <!-- Toggle Button for Mobile -->
                        <button class="shadow-none navbar-toggler ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="mt-2 navbar-toggler-icon">
                                <span class="navbar-toggler-bar bar1"></span>
                                <span class="navbar-toggler-bar bar2"></span>
                                <span class="navbar-toggler-bar bar3"></span>
                            </span>
                        </button>

                        <!-- Navigation Links -->
                        <div class="collapse navbar-collapse w-100 py-lg-0 justify-content-lg-end" id="navigation">
                            <ul class="navbar-nav ms-auto text-start text-lg-end">
                                <li class="nav-item" data-mode="all">
                                    <a class="nav-link text-dark fw-bold mx-2" href="/">Home</a>
                                </li>
                                <li class="nav-item" data-mode="all">
                                    <a class="nav-link text-dark fw-bold mx-2" href="/appstatus.html">Track Your Application</a>
                                </li>
                                <!--<li class="nav-item">
                                    <a class="nav-link text-dark fw-bold mx-2" href="https://grmis.pulse.gop.pk/citizen/">Complaints</a>
                                </li>-->
                                <li class="nav-item" data-mode="all">
                                    <a class="nav-link text-dark fw-bold mx-2" href="/Mauzajat.html">Mauza List</a>
                                </li>
                                <li class="nav-item" data-mode="all">
                                    <a class="nav-link text-dark fw-bold mx-2" href="/takseem-listing.html">Application List</a>
                                </li>
                                <li class="nav-item" data-mode="dev">
                                    <a class="nav-link text-dark fw-bold mx-2" href="/TrackApplication.html">Update Application</a>
                                </li>
                                <li class="nav-item" data-mode="dev">
                                    <a class="nav-link text-dark fw-bold mx-2" href="/upload.html">Upload File</a>
                                </li>
                                <li class="nav-item" data-mode="dev">
                                    <a class="nav-link text-dark fw-bold mx-2" href="/BlockedKhewats.html">Update Blocked Khewats</a>
                                </li>
                                <li class="nav-item" data-mode="dev">
                                    <a class="nav-link text-dark fw-bold mx-2" href="/ParcelMap.html">Esri Layers</a>
                                </li>
                                <li class="nav-item" data-mode="dev">
                                    <a class="nav-link text-dark fw-bold mx-2" href="/OpenLayers.html">Open Layers</a>
                                </li>
                                <li class="nav-item" data-mode="dev">
                                    <a class="nav-link text-dark fw-bold mx-2" href="/valuation.html">Valuation</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </div>

    <main class="main-content mt-0">
        <!-- Urdu font applied -->
        <div class="pt-5 m-3 page-header align-items-start min-vh-50 pb-11 border-radius-lg  urdu-text"
             style="background-image: url('/assets/img/background1.jpg'); background-position-y: 20%;">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="mx-auto text-center col-lg-5">
                        <h1 class="mt-5 mb-2 text-white">خوش آمدید!</h1>
                    </div>
                </div>
            </div>
        </div>

        <!-- Form Section -->
        <div class="container urdu-text">
            <!-- Loader (Initially Hidden) -->
            <div id="loaderForFard" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999;">
                <img src="/assets/img/loader.gif" alt="Loading..." width="300">
            </div>

            <div class="row mt-lg-n10 mt-md-n11 mt-n10 justify-content-center">
                <div class="mx-auto col-xl-8 col-lg-9 col-md-10">
                    <div class="border-0 card z-index-0">
                        <div class="pt-4 text-center card-header d-flex align-items-center justify-content-center">
                            <h5 class="urdu-text m-0">کھیوٹ کی تقسیم کی درخواست</h5>
                        </div>
                        <div class="card-body">
                            <!-- Loader (Initially Hidden) -->
                            <div id="loader" class="text-center my-3" style="display: none;">
                                <div class="spinner-border text-success" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                <p class="text-success">براہ کرم انتظار کریں...</p>
                            </div>
                            <form id="landRecordForm">
                                <!-- First Row -->
                                <div class="row g-3">
                                    <div class="col-12 col-sm-6">
                                        <label for="district" class="form-label fw-bold urdu-text">ضلع</label>
                                        <select class="form-select w-100" id="district" name="district" required>
                                            <option value="">--- ضلع منتخب کریں ---</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-sm-6">
                                        <label for="tehsil" class="form-label fw-bold urdu-text">تحصیل</label>
                                        <select class="form-select w-100" id="tehsil" name="tehsil" required>
                                            <option value="">--- تحصیل منتخب کریں ---</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- Second Row -->
                                <div class="row g-3 mt-2">
                                    <div class="col-12 col-sm-6">
                                        <label for="mouza" class="form-label fw-bold urdu-text">موضع</label>
                                        <select class="form-select rounded-3 w-100" id="mouza" name="mouza" required>
                                            <option value="">-- موضع منتخب کریں --</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-sm-6">
                                        <label for="khewat" class="form-label fw-bold urdu-text">کھیوٹ نمبر</label>
                                        <select class="form-select rounded-3 w-100" id="khewat" name="khewat" required>
                                            <option value="">-- کھیوٹ نمبر منتخب کریں --</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- Third Row -->
                                <!--<div class="row g-3 mt-2">
                                    <div class="col-12 col-sm-6">
                                        <label for="fardNumber" class="form-label fw-bold urdu-text">
                                            کمپیوٹرائزڈ فرد نمبر

                                            <svg id="infoIcon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="blue" class="bi bi-info-circle" viewBox="0 0 16 16" style="cursor: pointer;">
                                                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
                                                <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0" />
                                            </svg>
                                        </label>
                                        <input type="text" class="form-control rounded-3 w-100" id="fardNumber" name="fardNumber" required placeholder="فرد کا نمبر درج کریں">
                                    </div>


                                    <div class="col-12 col-sm-6">
                                        <label for="fard" class="form-label fw-bold urdu-text">فرد لف کریں</label>
                                        <input type="file" accept=".png,.jpg,.jpeg,.pdf" class="form-control rounded-3 w-100" id="fileUpload" name="fileUpload" required>
                                    </div>
                                </div>-->
                                <!-- Fourth Row -->
                                <div class="row g-3 mt-2">
                                    <!-- Name -->
                                    <div class="col-12 col-md-5">
                                        <label for="name" class="form-label fw-bold urdu-text">نام</label>
                                        <input type="text"
                                               class="form-control rounded-3 w-100 urdu-text"
                                               id="name"
                                               name="name"
                                               placeholder="اپنا نام درج کریں"
                                               required
                                               autocomplete="name"
                                               title="براہ کرم صرف نام درج کریں">
                                    </div>

                                    <!-- Relationship -->
                                    <div class="col-12 col-md-3">
                                        <label for="guardianType" class="form-label fw-bold urdu-text">رشتہ (والد یا شوہر)</label>
                                        <select class="form-select rounded-3 w-100 urdu-text"
                                                id="guardianType"
                                                name="guardianType"
                                                required>
                                            <option value="" disabled selected>انتخاب کریں</option>
                                            <option value="ولد">ولد</option>
                                            <option value="زوجہ">زوجہ</option>
                                        </select>
                                    </div>

                                    <!-- Father / Husband Name -->
                                    <div class="col-12 col-md-4">
                                        <label for="fathername" class="form-label fw-bold urdu-text">والد یا شوہر کا نام</label>
                                        <input type="text"
                                               class="form-control rounded-3 w-100 urdu-text"
                                               id="fathername"
                                               name="fathername"
                                               placeholder="والد یا شوہر کا نام درج کریں"
                                               required
                                               autocomplete="additional-name"
                                               title="براہ کرم صرف نام درج کریں">
                                    </div>

                                    <!-- CNIC -->
                                    <div class="col-12 col-md-4">
                                        <label for="cnic" class="form-label fw-bold urdu-text">شناختی کارڈ نمبر</label>
                                        <input type="text"
                                               class="form-control rounded-3 w-100"
                                               id="cnic"
                                               name="cnic"
                                               placeholder="33XXXXXXXXXXX"
                                               required>
                                    </div>

                                    <!-- Phone -->
                                    <div class="col-12 col-md-4">
                                        <label for="phone" class="form-label fw-bold urdu-text">فون نمبر</label>
                                        <input type="text"
                                               class="form-control rounded-3 w-100"
                                               id="phone"
                                               name="phone"
                                               placeholder="03XXXXXXXXX"
                                               required>
                                    </div>
                                </div>


                                <!-- OTP Row -->
                                <div class="row g-3 mt-3">
                                    <div class="col-12 col-sm-4">
                                        <button type="button" id="getOtpBtn" class="btn btn-outline-primary w-100 fw-bold" onclick="sendOtp()">پاس کوڈ حاصل کریں</button>
                                    </div>
                                    <div class="col-12 col-sm-4">
                                        <input type="text" id="otpInput" class="form-control rounded-3 w-100" required placeholder="6 ہندسوں کا پاس کوڈ درج کریں" maxlength="6" oninput="validateOtpInput()">
                                    </div>
                                    <div class="col-12 col-sm-4">
                                        <button type="submit" id="submitBtn" class="btn btn-primary w-100 fw-bold" disabled>جمع کروائیں</button>
                                    </div>
                                </div>

                                <!-- Note -->
                                <p class="text-center urdu-text mt-4 text-danger fw-bold">
                                    نوٹ: درخواست اسی صورت قبول ہو گی اگر درخواست دہندہ کا نام و شناختی کارڈ نمبر فرد میں موجود کسی مالک کے نام سے مطابقت رکھتا ہو۔
                                </p>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="pt-5 pb-3 mt-auto footer">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12 text-center">
                        <p class="text-sm mb-0">
                            Copyright ©
                            <script>document.write(new Date().getFullYear())</script>
                            <a href="https://pulse.gop.pk/" class="text-sm text-dark fw-bold">Pulse</a>
                        </p>
                    </div>
                </div>
            </div>
        </footer>


    </main>

    <script>
        fetch('/api/config/mode')
            .then(res => res.json())
            .then(data => {
                const mode = data.mode.toLowerCase();
                document.querySelectorAll('li[data-mode="dev"]').forEach(li => {
                    if (mode !== 'dev') li.style.display = 'none';
                });
            });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {

            // Name / Father Name: Only Urdu + English + space
            function enforceNameOnly(event) {
                let input = event.target;
                // Allow Urdu (\u0600-\u06FF), English letters, spaces
                input.value = input.value.replace(/[^A-Za-z\u0600-\u06FF ]+/g, '');
            }

            // CNIC / Phone: Digits only
            function enforceDigitsOnly(event, maxLength) {
                let input = event.target;
                input.value = input.value.replace(/\D/g, '').slice(0, maxLength);
            }

            // Attach real-time events
            const nameFields = document.querySelectorAll('#name, #fathername');
            nameFields.forEach(field => {
                field.addEventListener('input', enforceNameOnly);
                field.addEventListener('paste', function (e) {
                    setTimeout(() => enforceNameOnly(e), 0);
                });
            });

            const cnicField = document.getElementById('cnic');
            cnicField.addEventListener('input', (e) => enforceDigitsOnly(e, 13));
            cnicField.addEventListener('paste', (e) => setTimeout(() => enforceDigitsOnly(e, 13), 0));

            const phoneField = document.getElementById('phone');
            phoneField.addEventListener('input', (e) => enforceDigitsOnly(e, 11));
            phoneField.addEventListener('paste', (e) => setTimeout(() => enforceDigitsOnly(e, 11), 0));

        });
    </script>


    <script>
        $(document).ready(function () {
            $('select').select2({
                placeholder: '-- منتخب کریں --',
                allowClear: true,
                width: '100%'
            });

            function showLoader() {
                $('#loader').show();
            }

            function hideLoader() {
                $('#loader').hide();
            }

            // Fetch Districts on page load
            showLoader();
            getDistricts();

            // Fetch Tehsils when a District is selected
            $('#district').change(function () {
                const districtId = $(this).val();
                if (districtId) {
                    showLoader();
                    getTehsils(districtId);
                } else {
                    $('#tehsil').html('<option value="">-- تحصیل منتخب کریں --</option>');
                    $('#mouza').html('<option value="">-- موضع منتخب کریں --</option>');
                    $('#khewat').html('<option value="">-- کھیوٹ نمبر منتخب کریں --</option>');
                }
            });

            // Fetch Mouzas when a Tehsil is selected
            $('#tehsil').change(function () {
                const tehsilId = $(this).val();
                if (tehsilId) {
                    showLoader();
                    getMouzas(tehsilId);
                } else {
                    $('#mouza').html('<option value="">-- موضع منتخب کریں --</option>');
                    $('#khewat').html('<option value="">-- کھیوٹ نمبر منتخب کریں --</option>');
                }
            });

            // Fetch Khewat Nos when a Mouza is selected
            $('#mouza').change(function () {
                const mouzaId = $(this).val();
                if (mouzaId) {
                    showLoader();
                    getKhewats(mouzaId);
                } else {
                    $('#khewat').html('<option value="">-- کھیوٹ نمبر منتخب کریں --</option>');
                }
            });

            // Function to fetch and populate Districts
            function getDistricts() {
                $.ajax({
                    url: '/api/LandRecord/Districts',
                    type: 'GET',
                    success: function (response) {
                        let options = '<option value="">-- ضلع منتخب کریں --</option>';
                        response.forEach(district => {
                            options += `<option value="${district.districtId}">${district.districtName}</option>`;
                        });
                        $('#district').html(options);
                        hideLoader();
                    },
                    error: function (error) {
                        console.error('Error fetching districts:', error);
                        hideLoader();
                    }
                });
            }
            // Function to fetch and populate Tehsils
            function getTehsils(districtId) {
                $.ajax({
                    url: `/api/LandRecord/Tehsils/${districtId}`,
                    type: 'GET',
                    success: function (response) {
                        let options = '<option value="">-- تحصیل منتخب کریں --</option>';
                        response.forEach(tehsil => {
                            options += `<option value="${tehsil.tehsilId}">${tehsil.tehsilName}</option>`;
                        });
                        $('#tehsil').html(options);
                        hideLoader();
                    },
                    error: function (error) {
                        console.error('Error fetching tehsils:', error);
                        hideLoader();
                    }
                });
            }

            // Function to fetch and populate Mouzas
            function getMouzas(tehsilId) {
                $.ajax({
                    url: `/api/LandRecord/Mauzas/${tehsilId}`,
                    type: 'GET',
                    success: function (response) {
                        let options = '<option value="">-- موضع منتخب کریں --</option>';
                        response.forEach(mouza => {
                            options += `<option value="${mouza.mauzaId}">${mouza.mauzaName}</option>`;
                        });
                        $('#mouza').html(options);
                        hideLoader();
                    },
                    error: function (error) {
                        console.error('Error fetching mouzas:', error);
                        hideLoader();
                    }
                });
            }

            // Function to fetch and populate Khewats
            function getKhewats(mauzaId) {
                let newmauzaId = parseInt(mauzaId);
                $.ajax({
                    url: `/api/LandRecord/GetDistinctKhewatsByMauzaId/${newmauzaId}`,
                    type: 'GET',
                    success: function (response) {
                        let options = '<option value="">-- کھیوٹ نمبر منتخب کریں --</option>';
                        response.forEach(khewat => {
                            options += `<option value="${khewat.khewatId}">${khewat.khewatNo}</option>`;
                        });
                        $('#khewat').html(options);
                        hideLoader();
                    },
                    error: function (error) {
                        console.error('Error fetching khewats:', error);
                        hideLoader();
                    }
                });
            }

            $('#landRecordForm').submit(function (event) {
                event.preventDefault();
                showLoader(); // Show loader before form submission

                let otpNo = $('#otpInput').val();
                if (!otpNo || otpNo.length !== 6) {
                    Swal.fire({
                        icon: "warning",
                        title: "Invalid OTP",
                        text: "Please enter a valid 6-digit OTP before submitting."
                    });
                    hideLoader();
                    return;
                }
                debugger
                var personMobile = $('#phone').val();
                var khewatid = $('#khewat').val();
                var cnic = $('#cnic').val();
                var personName = $('#name').val();
                var relation = $('#guardianType').val();
                var fatherName = $('#fathername').val();
                if (!personMobile || personMobile.length != 11) {
                    Swal.fire({
                        icon: "warning",
                        title: "Invalid Mobile Number",
                        text: "Please enter a valid mobile number."
                    });
                    return;
                }
                if (!khewatid) {
                    Swal.fire({
                        icon: "warning",
                        title: "Invalid khewat",
                        text: "Please Select khewat"
                    });
                    return;
                }
                if (!cnic || cnic.length != 13) {
                    Swal.fire({
                        icon: "warning",
                        title: "Invalid CNIC",
                        text: "Please enter a valid 13 digit cnic"
                    });
                    return;
                }
                if (!personName || personName.length < 3) {
                    Swal.fire({
                        icon: "warning",
                        title: "Invalid Name",
                        text: "Please enter a valid name"
                    });
                    return;
                }
                if (!relation || relation.length < 2) {
                    Swal.fire({
                        icon: "warning",
                        title: "Invalid Relation",
                        text: "Please enter a valid relation"
                    });
                    return;
                }
                if (!fatherName || fatherName.length < 3) {
                    Swal.fire({
                        icon: "warning",
                        title: "Invalid Father/Husband",
                        text: "Please enter a valid Father/Husband"
                    });
                    return;
                }

                var personDetail = personName + " " + relation + " " + fatherName;

                var formData = new FormData();
                formData.append('DistrictId', $('#district').val());
                formData.append('TehsilId', $('#tehsil').val());
                formData.append('MauzaID', $('#mouza').val());
                formData.append('DistrictName', $('#district option:selected').text());
                formData.append('TehsilName', $('#tehsil option:selected').text());
                formData.append('MauzaName', $('#mouza option:selected').text());
                formData.append('KhewatID', $('#khewat').val());
                formData.append('KhewatNo', $('#khewat option:selected').text());
                formData.append('PersonName', personDetail);
                formData.append('PersonDetails', ''); // Add any additional details if needed
                formData.append('PersonCNIC', $('#cnic').val());
                formData.append('PersonMobile', $('#phone').val());
                //formData.append('FardNo', $('#fardNumber').val());
                formData.append('Status', 1);

                //var fileInput = $('#fileUpload')[0].files[0];
                //if (fileInput) {
                //    formData.append('FileUpload', fileInput);
                //}

                $.ajax({
                    url: 'api/account/SavePublicInfoAndSendSms/' + otpNo,
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        getQrCode(response.message).then(qrCodeUrl => {
                            Swal.fire({
                                title: `TAQ-${response.applicationId}`,
                                html: `<p >آپ کی درخواست وصول ہو چکی ہے۔</p>
                                                                                 <img id="qrCodeImg" src="${qrCodeUrl}" alt="QR Code" />`,
                                icon: "success",
                                confirmButtonText: "ٹھیک ہے"
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    //downloadPDF(response.applicationId); // Download the modal content as PDF
                                    location.reload(); // Refresh the page after popup closes
                                }
                            });
                        });
                        hideLoader();
                    },
                    error: function (xhr) {
                        var errorMessage = 'An error occurred while submitting the form.';
                        var title = "Error!"; // Default title

                        if (xhr.responseJSON.code === 409) {
                            title = "Warning!"; // Change title for conflict
                        }

                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }

                        Swal.fire({
                            icon: xhr.responseJSON.code === 409 ? "warning" : "error", // Change icon for conflict
                            title: title,
                            html: xhr.responseJSON.message, // Use API response message
                            confirmButtonText: "OK"
                        });

                        hideLoader();
                    }

                });
            });

            $('#cnic').on('paste', function (e) {
                let pastedData = (e.originalEvent.clipboardData || window.clipboardData).getData('text');
                if (!/^\d{13}$/.test(pastedData)) {
                    e.preventDefault(); // Block invalid paste
                    Swal.fire({
                        icon: "warning",
                        title: "Invalid CNIC Number",
                        text: "Please enter only 13 digits without dashes."
                    });
                }
            });
            $('#phone').on('paste', function (e) {
                let pastedData = (e.originalEvent.clipboardData || window.clipboardData).getData('text');
                if (!/^\d{11}$/.test(pastedData)) {
                    e.preventDefault(); // Block invalid paste
                    Swal.fire({
                        icon: "warning",
                        title: "Invalid Mobile Number",
                        text: "Please enter only 11 digits without dashes."
                    });
                }
            });
        });


        // Function to generate the QR code and return it as a base64 image URL
        function getQrCode(message) {
            return new Promise((resolve, reject) => {
                if (!message) {
                    reject('Message cannot be empty.');
                }
                const canvas = document.createElement('canvas');
                QRCode.toCanvas(canvas, message, { width: 200 }, function (error) {
                    if (error) {
                        console.error(error);
                        reject('Failed to generate QR code.');
                    } else {
                        resolve(canvas.toDataURL());
                    }
                });
            });
        }
        function validateOtpInput() {
            let otpInput = document.getElementById("otpInput").value;
            let submitBtn = document.getElementById("submitBtn");

            // Enable submit button only if OTP is exactly 6 digits
            submitBtn.disabled = otpInput.length !== 6;
        }
        // Function to extract the last part of FardNo
        function extractLastPart(input) {
            const parts = input.split('-'); // Split by '-'
            const lastPart = parts[parts.length - 1]; // Get the last part

            return /^\d+$/.test(lastPart) ? lastPart : null; // Validate if it's a number
        }
        async function verifyFard() {
            const fardNumberInput = document.getElementById('fardNumber');
            const fardNumber = parseInt(extractLastPart(fardNumberInput.value));
            const loader = document.getElementById("loaderForFard");
            if (fardNumber) {
                loader.style.display = "block";  // Show loader
                try {
                    // Call API to check if Fard number exists
                    const response = await fetch(`/api/Account/GetFardDetail?FardNo=${fardNumber}`, {
                        method: "GET",
                        headers: {
                            "Content-Type": "application/json"
                        }
                    });

                    const textResponse = await response.text(); // Get raw response

                    console.log("Raw Response:", textResponse); // Debug response

                    if (!response.ok) {
                        throw new Error(`API Error: ${response.status} ${response.statusText}`);
                    }
                    if (!textResponse.includes("Exception")) {
                        const jsonResponse = JSON.parse(textResponse); // Convert to JSON // StatusMessage
                        console.log("Parsed JSON:", jsonResponse);

                        // Hide loader
                        document.getElementById("loaderForFard").style.display = "none";

                        if (jsonResponse.StatusMessage == "Success") {
                            document.getElementById('fardNumber').disabled = true;
                            sendOtp();
                        } else {
                            Swal.fire({
                                icon: "warning",
                                title: "غلط فرد نمبر کا اندراج",
                                text: "آپ نے جو فرد نمبر درج کیا ہے اس پر کوئی فرد موجود نہ ہے اس لیے آپ کی درخواست جمع نہیں کی جاسکتی۔",
                                allowOutsideClick: false,  // Prevent closing when clicking outside
                                allowEscapeKey: false,  // Prevent closing with the Escape key
                                showCloseButton: true  // Show the close button
                            });
                            return;
                        }
                    }
                    else {
                        document.getElementById("loaderForFard").style.display = "none";
                        sendOtp();
                    }

                } catch (error) {
                    console.error("Error:", error.message);
                    alert("Error fetching Fard details. Check console for details.");
                    document.getElementById("loaderForFard").style.display = "none";
                }
            } else {
                alert("Invalid Fard Number format.");
            }
        }
        function sendOtp() {
            debugger
            var personMobile = $('#phone').val();
            var khewatid = $('#khewat').val();
            var cnic = $('#cnic').val();
            var personName = $('#name').val();
            var relation = $('#guardianType').val();
            var fatherName = $('#fathername').val();
            var personDetail = personName + " " + relation + " " + fatherName;
            if (!personMobile || personMobile.length != 11) {
                Swal.fire({
                    icon: "warning",
                    title: "Invalid Mobile Number",
                    text: "Please enter a valid mobile number."
                });
                return;
            }
            if (!khewatid) {
                Swal.fire({
                    icon: "warning",
                    title: "Invalid khewat",
                    text: "Please Select khewat"
                });
                return;
            }
            if (!cnic || cnic.length != 13) {
                Swal.fire({
                    icon: "warning",
                    title: "Invalid CNIC",
                    text: "Please enter a valid 13 digit cnic"
                });
                return;
            }
            if (!personName || personName.length < 3) {
                Swal.fire({
                    icon: "warning",
                    title: "Invalid Name",
                    text: "Please enter a valid name"
                });
                return;
            }
            if (!relation || cnic.length < 2) {
                Swal.fire({
                    icon: "warning",
                    title: "Invalid Relation",
                    text: "Please enter a valid relation"
                });
                return;
            }
            if (!fatherName || fatherName.length < 3) {
                Swal.fire({
                    icon: "warning",
                    title: "Invalid Father/Husband",
                    text: "Please enter a valid Father/Husband"
                });
                return;
            }
            fetch("api/Account/SendOtp", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({ personMobile: personMobile, khewatid: khewatid == "" ? 0 : khewatid, cnic: cnic })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        Swal.fire({
                            icon: "success",
                            title: "OTP Sent",
                            text: "6 ہندسوں پر مشتمل پاس کوڈ اپ کے موبائل پر بھیج دیا گیا ہے۔",
                            timer: 3000
                        });
                    } else {
                        Swal.fire({
                            icon: "error",
                            title: "Failed to Send OTP",
                            text: data.message || "Please try again."
                        });
                    }
                })
                .catch(error => {
                    console.error("Error sending OTP:", error);
                    Swal.fire({
                        icon: "error",
                        title: "Error",
                        text: "An error occurred. Please try again later."
                    });
                });
        }
        function downloadPDF(applicationId) {
            const { jsPDF } = window.jspdf;
            const doc = new jsPDF();

            // Create a temporary div to hold the modal content
            let content = document.createElement("div");
            content.innerHTML = `
                                        <h2>TAQ-${applicationId}</h2>
                                        <p>آپ کی درخواست وصول ہو چکی ہے۔</p>
                                        <img src="${document.getElementById('qrCodeImg').src}" alt="QR Code" style="width:150px; height:150px;">
                                    `;
            document.body.appendChild(content);

            // Convert the content to canvas and then to PDF
            html2canvas(content).then(canvas => {
                const imgData = canvas.toDataURL("image/png");
                const imgWidth = 180;
                const imgHeight = (canvas.height * imgWidth) / canvas.width;
                doc.addImage(imgData, "PNG", 15, 20, imgWidth, imgHeight);
                doc.save(`Application_${applicationId}.pdf`);

                // Remove temporary content after generating PDF
                document.body.removeChild(content);
            });
        }
        //document.getElementById('infoIcon').addEventListener('click', function () {
        //    Swal.fire({
        //        title: '<span class="urdu-text" style="font-size: 24px;">فرد حاصل کرنے کے طریقے</span>',
        //        html: `
        //                    <ul class="urdu-text" style="text-align: right; direction: rtl; font-size: 20px; font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;">
        //                        <li>📌 <strong>ویب سائٹ یا موبائل ایپ:</strong>
        //                            <a href="https://onlinefard.punjab-zameen.gov.pk/" target="_blank" style="color:#ff0000 !important">پنجاب لینڈ ریکارڈ اتھارٹی کی ویب سائٹ </a> یا
        //                            <a href="https://play.google.com/store/apps/details?id=com.digitalapp.android&hl=en&pli=1" target="_blank" style="color:#ff0000 !important">اراضی ریکارڈ موبائل ایپ</a> کے ذریعے فرد حاصل کریں۔
        //                        </li>
        //                        <li>📌 <strong>اراضی ریکارڈ سنٹر سے:</strong> اپنے ضلع میں موجود اراضی ریکارڈ سنٹر کا دورہ کریں اور فرد کی کاپی حاصل کریں۔</li>
        //                    </ul>
        //                `,
        //        confirmButtonText: 'بند کریں',
        //        customClass: {
        //            popup: 'urdu-text'
        //        }
        //    });
        //});


    </script>
</body>
</html>
