<!DOCTYPE html>
<html lang="ur">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title class="urdu">  رجسٹریشن آف ڈيڈز</title>
    <!-- plugins:css -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="vendors/iconfonts/font-awesome/css/all.min.css">
    <link rel="stylesheet" href="vendors/css/vendor.bundle.base.css">
    <link rel="stylesheet" href="vendors/css/vendor.bundle.addons.css">

    <!--<link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/css/slick.css" />
    <link rel="stylesheet" href="/css/slick-theme.css" />
    <link rel="stylesheet" href="/css/animate.min.css">
    <link rel="stylesheet" href="/css/styles.css">-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
    <!--  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> -->

    <style>

     

        /* Close button */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

            .close:hover,
            .close:focus {
                color: black;
                text-decoration: none;
                cursor: pointer;
            }

        body {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .newlist {
            border: 1px solid green;
            border-radius: 10%;
            font-weight: 100;
            font-size: 0.8125rem;
            padding: .2375rem .45rem;
            margin-bottom: .5rem;
        }
        /* Add your custom styles for pagination here */
        .pagination {
            display: inline-block;
        }

            .pagination a {
                color: forestgreen;
                border-radius: 50% !important;
                position: relative;
                display: block;
                font-size: 1rem !important;
                padding: 0.5rem 0.75rem !important;
                margin-left: -1px;
                margin: 0.25rem !important;
                line-height: 1.25;
                text-decoration: none;
            }

                .pagination a.active {
                    background-color: #4CAF50;
                    color: white;
                    text-decoration: none; /* Remove underline on hover */
                    border-radius: 50% !important;
                }

                .pagination a:hover:not(.active) {
                    background-color: darkslategrey;
                    color: greenyellow;
                    border-radius: 50% !important;
                    text-decoration: none; /* Remove underline on hover */
                }

        .page-link {
            background-color: forestgreen !important;
            color: white !important;
            border-radius: 0.5rem !important;
            text-decoration: none; /* Remove underline on hover */
            border: none !important;
        }

        .table-fixed thead {
            width: 100%;
        }

        .table-fixed tbody {
            height: 230px;
            overflow-y: auto;
            width: 100%;
        }

        .flex-container {
            display: flex;
            flex-wrap: nowrap;
            align-items: center; /* Center items vertically */
        }

            .flex-container > div {
                margin: 10px;
                line-height: 15px;
            }
    </style>
    <style>
        /* Existing styles remain... */

        /* Responsive design additions */
        @media (max-width: 768px) {
            /* Mobile-friendly navbar */
            .navbar-brand {
                padding: 10px !important;
            }

                .navbar-brand img {
                    width: 60px !important;
                    height: 50px !important;
                }

                .navbar-brand.urdu {
                    font-size: 1.8rem !important;
                    letter-spacing: 0.2rem;
                }

            .navbar-toggler {
                margin-right: 10px;
            }

            /* Modal adjustments */
            .modal-content {
                width: 95%;
                margin: 10% auto;
                max-width: none;
                top: 0;
            }

            /* Form adjustments */
            .search-filter .row.form-group {
                margin-bottom: 5px;
            }

            .col-sm-4, .col-md-4 {
                width: 100%;
                margin-bottom: 10px !important;
            }

            .search-filter select,
            .search-filter input {
                font-size: 16px; /* Prevents iOS zoom on focus */
                height: 45px;
            }

            #searchButton {
                width: 100%;
                height: 45px;
                font-size: 18px;
                margin-top: 10px;
            }

            /* Table adjustments */
            .table-responsive {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            .table {
                font-size: 14px;
            }

                .table th, .table td {
                    padding: 8px 5px;
                    white-space: nowrap;
                }

            /* Flex container for page info */
            .flex-container {
                flex-wrap: wrap;
                justify-content: center;
                text-align: center;
            }

                .flex-container > div {
                    margin: 5px;
                    min-width: 45%;
                }

            /* Adjust headings */
            h3.card.card-statistics {
                font-size: 1.8vh !important;
                padding: 10px !important;
            }

            /* Footer adjustments */
            .footer {
                font-size: 12px;
                padding: 10px;
            }

                .footer span {
                    display: block;
                    text-align: center;
                    margin-bottom: 5px;
                }

            /* Modal profile adjustments */
            .modal-dialog {
                margin: 10px;
                max-width: 95%;
            }

            /* Card body padding */
            .card-body {
                padding: 15px !important;
            }

            /* Pagination adjustments */
            .pagination {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
            }

                .pagination a {
                    margin: 2px;
                    padding: 8px 12px !important;
                }

            /* Keyboard visibility */
            #keyboard {
                display: none; /* Hide virtual keyboard on mobile by default */
            }

            /* Show keyboard only when needed with proper positioning */
            #editor:focus + #keyboard {
                display: block;
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                z-index: 1000;
            }
        }

        @media (max-width: 480px) {
            /* Extra small devices */
            .navbar-brand.urdu {
                font-size: 1.5rem !important;
                letter-spacing: 0.1rem;
            }

            .table th, .table td {
                font-size: 12px;
                padding: 6px 3px;
            }

            .flex-container > div {
                min-width: 100%;
            }

            /* Adjust dropdown menu */
            .dropdown-menu {
                position: fixed;
                top: 60px;
                left: 10px;
                right: 10px;
                width: auto;
            }

            /* Loading modal */
            .spinner-grow {
                width: 4rem !important;
                height: 4rem !important;
                margin-top: 50% !important;
            }
        }

        /* Touch-friendly improvements for all devices */
        button,
        select,
        .pagination a,
        .dropdown-item {
            min-height: 44px; /* Minimum touch target size */
        }

        input, select {
            min-height: 44px;
            font-size: 16px; /* Prevents zoom on iOS */
        }

        /* Improve table readability on mobile */
        @media (max-width: 768px) {
            .table-striped tbody tr {
                border-bottom: 2px solid #ddd;
            }

            .table thead {
                display: none; /* Hide headers on mobile, consider alternative for accessibility */
            }

            .table tbody td {
                display: block;
                text-align: right;
                position: relative;
                padding-left: 50%;
            }

                .table tbody td:before {
                    content: attr(data-label);
                    position: absolute;
                    left: 10px;
                    width: 45%;
                    padding-right: 10px;
                    text-align: left;
                    font-weight: bold;
                }
        }

        /* Alternative: Keep headers but make table horizontally scrollable */
        .table-responsive {
            display: block;
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* Fix for iOS form elements */
        input[type="text"],
        input[type="number"],
        select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border-radius: 4px;
        }

        /* Ensure dropdowns are readable on mobile */
        .select2-container .select2-selection--single {
            height: 44px !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 44px !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 42px !important;
        }

        /* Loading spinner positioning */
        @media (max-width: 768px) {
            .modal-dialog {
                display: flex;
                align-items: center;
                min-height: 100vh;
            }
        }

        /* Urdu text readability on mobile */
        .urdu {
            line-height: 1.6;
        }

        /* Prevent horizontal scrolling on body */
        body {
            max-width: 100%;
            overflow-x: hidden;
        }

        /* Container adjustments for mobile */
        .container-fluid {
            padding-left: 10px;
            padding-right: 10px;
        }

        /* Card adjustments */
        .card {
            margin-bottom: 15px;
        }

        /* Form label adjustments */
        .form-group label {
            margin-bottom: 5px;
            display: block;
        }

        /* Modal footer buttons stacking */
        @media (max-width: 768px) {
            .modal-footer {
                flex-direction: column;
            }

                .modal-footer .btn {
                    width: 100%;
                    margin-bottom: 10px;
                }
        }

        /* Ensure select2 dropdowns are visible on mobile */
        .select2-container--open .select2-dropdown {
            position: fixed !important;
            top: auto !important;
            bottom: 0;
            left: 0;
            width: 100% !important;
            max-height: 50vh;
            overflow-y: auto;
        }

        /* Adjust the overflow for table body on mobile */
        @media (max-width: 768px) {
            .table-fixed tbody {
                height: auto;
                max-height: 300px;
            }
        }

        /* Welcome Modal Styles */
        #passwordModal .modal-content {
            animation: modalSlideIn 0.5s ease-out;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        #passwordModal .modal-header {
            padding: 20px 30px;
        }

        #passwordModal .modal-body {
            padding: 25px;
            font-size: 1.1rem;
            line-height: 1.8;
        }

            #passwordModal .modal-body::-webkit-scrollbar {
                width: 8px;
            }

            #passwordModal .modal-body::-webkit-scrollbar-track {
                background: #f1f1f1;
                border-radius: 10px;
            }

            #passwordModal .modal-body::-webkit-scrollbar-thumb {
                background: #4CAF50;
                border-radius: 10px;
            }

                #passwordModal .modal-body::-webkit-scrollbar-thumb:hover {
                    background: #388E3C;
                }

        #passwordModal .modal-footer {
            padding: 20px 30px;
            border-top: 1px solid #e0e0e0;
        }

        #passwordModal .card {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            transition: transform 0.2s;
            border-radius: 10px;
        }

            #passwordModal .card:hover {
                transform: translateY(-2px);
            }

        #passwordModal .alert {
            border-radius: 10px;
            padding: 20px;
        }

        #passwordModal .process-steps .step {
            padding: 10px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px dashed #dee2e6;
        }

        #passwordModal .step-number {
            flex-shrink: 0;
            font-weight: bold;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Responsive adjustments for modal */
        @media (max-width: 768px) {
            #passwordModal .modal-dialog {
                margin: 10px;
                max-width: 95%;
            }

            #passwordModal .modal-body {
                padding: 15px;
                max-height: 60vh;
                font-size: 1rem;
            }

            #passwordModal .modal-header {
                padding: 15px;
            }

            #passwordModal .modal-footer {
                flex-direction: column;
                gap: 10px;
            }

                #passwordModal .modal-footer .btn {
                    width: 100%;
                    margin: 5px 0;
                }

            #passwordModal .modal-title {
                font-size: 1.4rem;
            }
        }

        @media (max-width: 480px) {
            #passwordModal .modal-body {
                padding: 10px;
                font-size: 0.95rem;
            }

            #passwordModal .step {
                flex-direction: column;
                align-items: flex-start !important;
            }

            #passwordModal .step-number {
                margin-left: 0 !important;
                margin-bottom: 10px;
            }

            #passwordModal .d-flex.align-items-center {
                flex-direction: column;
                align-items: flex-start !important;
            }

                #passwordModal .d-flex.align-items-center i {
                    margin-right: 0 !important;
                    margin-bottom: 10px;
                }
        }
    </style>


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
    <script src="js/customeJs/custom.js"></script>

    <!-- endinject -->
    <!-- plugin css for this page -->
    <!-- End plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/keyboard.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
    <link rel="stylesheet" href="/css/keyboard.css">
    <!-- endinject -->
    <link rel="shortcut icon" href="/images/favicon.ico" />

</head>
<body class="horizontal-menu ">
    <div class="container-scroller">

        <!-- Modal -->
        <div id="passwordModal" class="modal urdu fade show rtl" style="display: block; font-size: 1.2rem!important; background-color: rgba(0,0,0,0.7);" tabindex="-1" aria-labelledby="welcomeModalLabel" aria-hidden="false">
            <div class="modal-dialog  modal-lg">
                <div class="modal-content" style="border-radius: 15px; border: 3px solid #4CAF50;">
                    <div class="modal-header" style="background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%); border-top-left-radius: 12px; border-top-right-radius: 12px;">
                        <h5 class="modal-title text-white urdu" style="font-size: 1.8rem; font-weight: bold;">
                            <i class="fas fa-door-open mr-2"></i> خوش آمدید - رجسٹری ڈیش بورڈ
                        </h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close" onclick="closeWelcomeModal()" style="opacity: 1;">
                            <span aria-hidden="true" style="font-size: 2rem;">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" style="max-height: 70vh; overflow-y: auto; padding: 25px;">
                        <!-- Welcome Section -->
                        <div class="alert alert-success urdu" style="background-color: #E8F5E9; border-left: 5px solid #4CAF50;">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-hand-wave text-success fa-2x mr-3"></i>
                                <h5 class="mb-0" style="color: #2E7D32;">محترم صارف! رجسٹری ڈیڈز ڈیش بورڈ میں خوش آمدید</h5>
                            </div>
                        </div>

                        <!-- Portal Purpose -->
                        <div class="card mb-3" style="border: none; border-left: 4px solid #2196F3;">
                            <div class="card-body">
                                <div class="d-flex align-items-center mb-2">
                                    <i class="fas fa-search text-primary mr-3 fa-lg"></i>
                                    <h6 class="card-title mb-0 text-primary">پورٹل کا مقصد</h6>
                                </div>
                                <p class="card-text">
                                    اس پورٹل کے ذریعے آپ اپنی رجسٹری کی کاپی تلاش اور ڈاؤنلوڈ کر سکتے ہیں۔
                                </p>
                            </div>
                        </div>

                        <!-- Search Instructions -->
                        <div class="card mb-3" style="border: none; border-left: 4px solid #FF9800;">
                            <div class="card-body">
                                <div class="d-flex align-items-center mb-2">
                                    <i class="fas fa-filter text-warning mr-3 fa-lg"></i>
                                    <h6 class="card-title mb-0 text-warning">تلاش کرنے کا طریقہ</h6>
                                </div>
                                <ol class="pl-3" style="list-style-type: decimal; padding-right: 20px;">
                                    <li class="mb-2">پہلے <strong>ضلع</strong> اور <strong>تحصیل</strong> منتخب کریں</li>
                                    <li class="mb-2">
                                        پھر کسی ایک کے ذریعے فلٹر کریں:
                                        <ul style="list-style-type: disc; padding-right: 20px; margin-top: 5px;">
                                            <li>شناختی کارڈ نمبر (خریدار/بیچنے والا/کمیشن)</li>
                                            <li>نام (خریدار/بیچنے والا/کمیشن)</li>
                                            <li>رجسٹری نمبر</li>
                                        </ul>
                                    </li>
                                    <li>تلاش کریں بٹن پر کلک کریں</li>
                                </ol>
                            </div>
                        </div>

                        <!-- Disclaimer -->
                        <div class="alert alert-warning urdu mb-3" style="background-color: #FFF3E0; border-left: 5px solid #FF9800;">
                            <div class="d-flex">
                                <i class="fas fa-exclamation-triangle text-warning mr-3 fa-lg mt-1"></i>
                                <div>
                                    <h6 class="alert-heading text-warning">اہم نوٹ</h6>
                                    <p class="mb-1">
                                        یہ ریکارڈ ضلعی رجسٹری ریکارڈز کے سکینڈ ڈیٹاسیٹس ہیں۔ اگر آپ کی رجسٹری یہاں موجود نہیں ہے تو براہ کرم پورٹل پر ہم سے رابطہ کریں۔
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- Registration Process -->
                        <div class="card mb-3" style="border: none; border-left: 4px solid #9C27B0;">
                            <div class="card-body">
                                <div class="d-flex align-items-center mb-2">
                                    <i class="fas fa-user-plus text-purple mr-3 fa-lg"></i>
                                    <h6 class="card-title mb-0 text-purple">رجسٹریشن کا طریقہ کار</h6>
                                </div>
                                <div class="process-steps">
                                    <div class="step d-flex align-items-center mb-3">
                                        <div class="step-number" style="background: #9C27B0; color: white; width: 30px; height: 30px; border-radius: 50%; text-align: center; line-height: 30px; margin-left: 10px;">1</div>
                                        <div>
                                            <strong>لاگ ان پیج پر جائیں</strong>، اگر آپ پہلے رجسٹرڈ نہیں ہیں تو "رجسٹر کریں" بٹن پر کلک کریں
                                        </div>
                                    </div>
                                    <div class="step d-flex align-items-center mb-3">
                                        <div class="step-number" style="background: #9C27B0; color: white; width: 30px; height: 30px; border-radius: 50%; text-align: center; line-height: 30px; margin-left: 10px;">2</div>
                                        <div>
                                            <strong>درست ای میل آئی ڈی</strong> درج کریں۔ آپ کو اکاؤنٹ فعال کرنے کے لیے تصدیقی ای میل موصول ہوگا
                                        </div>
                                    </div>
                                    <div class="step d-flex align-items-center mb-3">
                                        <div class="step-number" style="background: #9C27B0; color: white; width: 30px; height: 30px; border-radius: 50%; text-align: center; line-height: 30px; margin-left: 10px;">3</div>
                                        <div>
                                            <strong>تصدیقی لنک</strong> پر کلک کرنے کے بعد آپ کا اکاؤنٹ فعال ہو جائے گا اور آپ لاگ ان کر سکتے ہیں
                                        </div>
                                    </div>
                                    <div class="step d-flex align-items-center mb-3">
                                        <div class="step-number" style="background: #9C27B0; color: white; width: 30px; height: 30px; border-radius: 50%; text-align: center; line-height: 30px; margin-left: 10px;">4</div>
                                        <div>
                                            <strong>لاگ ان</strong> کے بعد رجسٹری تلاش کر سکتے ہیں اور تفصیلات دیکھ سکتے ہیں
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Payment Process -->
                        <div class="card mb-3" style="border: none; border-left: 4px solid #F44336;">
                            <div class="card-body">
                                <div class="d-flex align-items-center mb-2">
                                    <i class="fas fa-money-bill-wave text-danger mr-3 fa-lg"></i>
                                    <h6 class="card-title mb-0 text-danger">ادائیگی کا طریقہ کار</h6>
                                </div>
                                <ol class="pl-3" style="list-style-type: decimal; padding-right: 20px;">
                                    <li class="mb-2">پرنٹ کرنے پر آپ کو <strong>چالان نمبر اور PSID</strong> فراہم کیا جائے گا</li>
                                    <li class="mb-2">PSID کے ذریعے موبائل ایپلیکیشنز (جیسے جازکیش، ایزی پیسا) سے چالان ادا کریں</li>
                                    <li class="mb-2">ادائیگی کے بعد رجسٹری کی کاپی ڈاؤن لوڈ کر سکتے ہیں</li>
                                </ol>
                            </div>
                        </div>

                        <!-- Warning Section -->
                        <div class="alert alert-danger urdu" style="background-color: #FFEBEE; border-left: 5px solid #F44336;">
                            <div class="d-flex">
                                <i class="fas fa-ban text-danger mr-3 fa-lg mt-1"></i>
                                <div>
                                    <h6 class="alert-heading text-danger">انتباہ</h6>
                                    <p class="mb-1">
                                        اگر آپ غلط یا جعلی معلومات استعمال کریں گے تو آپ کا اکاؤنٹ بلاک کیا جا سکتا ہے۔
                                        <br>
                                        تمام ادائیگیاں فراہم کردہ تفصیلات کے مطابق ہوں گی، اس لیے درست معلومات فراہم کریں۔
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- Contact Information -->
                        <div class="card" style="border: none; border-left: 4px solid #00BCD4; background-color: #E0F7FA;">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-headset text-info mr-3 fa-lg"></i>
                                    <div>
                                        <h6 class="card-title mb-1 text-info">مدد کے لیے رابطہ کریں</h6>
                                        <p class="mb-0">
                                            کسی بھی سوال یا مسئلے کے لیے <strong>Contact Us</strong> سیکشن سے رابطہ کریں۔
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                  
                </div>
            </div>
        </div>


        <nav class="navbar horizontal-layout-navbar  navbar-expand-lg">
            <a class="navbar-brand" href="/" style="padding:15px;"><img src="https://www.punjab-zameen.gov.pk/assets/img/PLRA_Logo.gif" width="80px" height="66px" alt="logo"></a>
            <div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-start">
                <a class="navbar-brand brand-logo urdu" style="font-size: 2.5rem !important; color: white !important; letter-spacing: 0.5rem;  " href="../index.html">  پرت رجسٹریشن</a>
                <!--<a class="navbar-brand brand-logo-mini" href="../index.html"><img src="../images/PulseIcon/Asset 2favicon.png " alt="logo" /></a>-->
            </div>
            <div class="navbar-menu-wrapper d-flex flex-grow">
                <ul class="navbar-nav navbar-nav-left collapse navbar-collapse" id="horizontal-top-example">
                </ul>
                <ul class="navbar-nav navbar-nav-left align-self-md-center">
                    <li class="nav-item nav-profile">
                        <a class="nav-link">
                            <div class="nav-profile-text">
                                <!--<script>
                                if (localStorage.getItem('userName')) {
                                    document.write("<span class='urdu text-muted'>خوش آمدید</span> </br>", localStorage.getItem('userName'));
                                }
                                else {
                                    document.write("<span class='urdu text-muted'>سائن ان کریں</span> ");
                                }
                            </script>-->
                            </div>

                        </a>
                    </li>




                    <li class="nav-item nav-profile dropdown rtl">
                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" id="profileDropdown">
                            <img src="../../images/faces/facexx.png" alt="image" class="img-xs rounded-circle ml-3">
                        </a>
                        <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="profileDropdown">
                            <a class="dropdown-item">
                                <div class="nav-item">
                                    <script>
                                        if (localStorage.getItem('userName')) {

                                            document.write("<span class='urdu text-muted'>خوش آمدید</span>");
                                            document.write("<div class='dropdown-divider'></div>");

                                            document.write("<span style='color: forestgreen; font-weight: bold; font-style: italic;'>(", localStorage.getItem('userName'), ")</span>");

                                        }
                                        else {
                                            document.write("<span class='urdu text-muted'>خوش آمدید</span>");
                                        }
                                    </script>
                                </div>

                            </a>
                            <script>
                                if (localStorage.getItem('userName')) {
                                    document.write('<div class="dropdown-divider"></div><a class="dropdown-item urdu" href="challan_page.html" target="_blank"> ادائیگی کی تفصیلات</a>');
                                    document.write('<div class="dropdown-divider"></div><a class="dropdown-item urdu" href="complaints_page.html" target="_blank">  شکایات </a>');
                                    document.write(' <div class="dropdown-divider"></div><a class="dropdown-item urdu" data-toggle="modal"  id="openModalButton" data-target="#editProfileModal"> پروفائل کی تفصیلات تبدیل کریں  </a> ');
                                }
                                else {
                                    //document.write("<span class='urdu text-muted'>سائن ان کریں</span> ");
                                }
                            </script>

                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item">

                                <!-- Show Logout if there's a token, otherwise show Login -->
                                <i onclick="logout()" id="logoutLink" style="display: none;">
                                    <!-- <i class="fas fa-power-off text-danger btn-lg"></i>-->
                                    <span class='urdu text-muted' style="font-style: normal !important; color: darkred !important">سائن آوٹ کریں</span>
                                </i>

                                <i onclick="login()" id="loginLink">
                                    <!--  <i class="fas fa-sign-in-alt text-success btn-lg"></i>-->
                                    <span class='urdu' style="font-style: normal !important">سائن ان کریں</span>
                                </i>
                            </a>
                            <!--<div class="dropdown-divider"></div>
                        <a class="dropdown-item">

                            <i data-toggle="modal" class='urdu' id="openModalButton" data-target="#editProfileModal">
                                Edit Profile
                            </i>


                        </a>-->
                        </div>
                    </li>





                    <!--<li class="nav-item nav-profile-img" style="margin-left:10px !important">

                <div class="dropdown-divider"></div>-->
                    <!-- Show Logout if there's a token, otherwise show Login -->
                    <!--<button class="btn-outline-danger" onclick="logout()" id="logoutLink" style="display: none;">-->
                    <!-- <i class="fas fa-power-off text-danger btn-lg"></i>-->
                    <!--<span class='urdu'>سائن آوٹ کریں</span>
                </button>

                <button class=" btn-sm btn-outline-success" onclick="login()" id="loginLink">-->
                    <!--  <i class="fas fa-sign-in-alt text-success btn-lg"></i>-->
                    <!--<span class='urdu '>سائن ان کریں</span>
                    </button>
                </li>-->
                </ul>
                <!--<button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center ml-auto" type="button" data-toggle="collapse" data-target="#horizontal-top-example">
                <span class="fa fa-bars"></span>
            </button>-->
            </div>
        </nav>
        <div class="container-fluid rtl">
            <div class="main-panel">


                <div class="content-wrapper">
                    <h3 class=" card card-statistics urdu  text-center p-2 " style="font-size: 2.8vh !important; color:white !important; display:block">
                        دستاویزات کی معلومات تلاش کریں
                    </h3>

                    <!--Section Starts here - -- ROD Copied-->

                    <section id="content-area" class="content-area search-page">
                        <div class="row grid-margin">
                            <div class="col-12">
                                <div class="card ">
                                    <div class="card-body" style="padding:1rem !important">

                                        <div class="d-flex flex-column flex-md-row align-items-center justify-content-between ">
                                            <div class="container">

                                                <form method="get" accept-charset="utf-8" id="searchForm">
                                                    <div class="search-filter">
                                                        <div class="row form-group">
                                                            <div class="col-sm-4 col-md-4 mb-2">
                                                                <select class="form-control urdu" id="districtSelect" required="required">
                                                                    <option value="">ضلع منتخب کریں</option>
                                                                </select>
                                                            </div>

                                                            <div class="col-sm-4 col-md-4  mb-2">
                                                                <select class="form-control urdu " id="tehsilSelect" required="required">
                                                                    <option value=""> تحصیل منتخب کریں</option>
                                                                </select>
                                                            </div>
                                                            <div class="col-sm-4 col-md-4  mb-2">
                                                                <input type="text" class="form-control urdu" placeholder="شناختی کارڈ نمبر (خریدار/بیچنے والا/کمیشن)" id="NIC">
                                                            </div>

                                                        </div>
                                                        <div class="row form-group">
                                                            <div class="col-sm-4 col-md-4  mb-2">
                                                                <input type="text" class="form-control urdu " placeholder="نام (خریدار / بیچنے والے / کمیشن)" id="editor" autocomplete="off">
                                                            </div>
                                                            <div class="col-sm-4 col-md-4  mb-2">
                                                                <input type="text" class="form-control urdu" onkeypress="valNum(event);" placeholder=" رجسٹری نمبر" id="RegistryNo" autocomplete="off">
                                                            </div>
                                                            <div class="col-sm-4 col-md-4  mb-2 urdu rtl">
                                                                <input type="text" class="form-control urdu" onkeypress="valNum(event);" placeholder="بہی نمبر" id="BahiNo" autocomplete="off" hidden>
                                                                <button type="button" id="searchButton" onclick="search()" class="form-control btn btn-sm btn-success">تلاش کریں</button>

                                                            </div>

                                                        </div>

                                                    </div>

                                                </form>
                                                <!--<div class="urdu rtl" style="float: left !important;">-->
                                                <!--      <div class="col-sm-4 col-sm-offset-4 col-md-4 col-md-offset-4">-->
                                                <!--   <div class="urdu  gap-2 col-3 mt-auto">-->
                                                <!--<button type="button" id="searchButton" onclick="search()" class="btn btn-sm btn-outline-success">تلاش کریں</button>

                                            </div>-->
                                                <div id="keyboard">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>
                        <div class="col-12">
                            <h3 class="card card-statistics urdu  text-center p-2 " style=" font-size: 2.8vh !important; color: white !important;">
                                ریکارڈ کی تفصیلات

                            </h3>


                            <!--<table class="table table-bordered overflow-auto  table-striped  rtl " style="color:green !important;">
                            <thead class="urdu">
                                <tr>-->
                            <!--  <th class="mytablehead">SR.NO</th>-->
                            <!--<th class="mytablehead">موضع کا نام</th>
                                    <th class="mytablehead">رجسٹریشن نمبر</th>
                                    <th class="mytablehead">ریکارڈ کا سال</th>
                                    <th class="mytablehead">منتخب کریں</th>
                                </tr>
                            </thead>
                        </table>-->
                            <div class="overflow-auto bg-light " style="max-height: 270px; border: 2px solid white; margin-bottom:5px;">
                                <table class="table col-12 table-bordered  table-striped search-data-table rtl " id="searchTable" style="color:green !important; padding:0px !important;">
                                    <thead class="urdu">
                                        <tr class="mytablehead">
                                            <!--  <th class="mytablehead">SR.NO</th>-->
                                            <!--<th style="color: white !important; border:none !important">موضع کا نام</th>
                                        <th style="color: white !important; border: none !important">رجسٹریشن نمبر</th>
                                        <th style="color: white !important; border: none !important">ریکارڈ کا سال</th>
                                        <th style="color: white !important; border: none !important">منتخب کریں</th>-->
                                            <!--  <th class="mytablehead">SR.NO</th>-->
                                            <th class="mytablehead">موضع کا نام</th>
                                            <th class="mytablehead"> رجسٹری نمبر</th>
                                            <th class="mytablehead">ریکارڈ کی تاريخ </th>
                                            <th class="mytablehead">منتخب کریں</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableBody" class="urdu">
                                        <!--     <tr><td colspan="4" class="urdu1" style="color: darkred !important; background-color: white !important">ڈیٹا دیکھنے کے لیے فہرست سے تلاش کریں۔</td></tr>-->
                                        <tr><td colspan="4" class="urdu1" style="color: darkred !important; background-color: white !important"> معلومات دستیاب نہیں!</td></tr>
                                        <!-- Data from search results will be dynamically added here -->
                                    </tbody>

                                </table>
                            </div>
                            <div id="pagination" class=" justify-content-center pagination rounded-flat pagination-success">

                            </div>
                            <div id="pagecaption">
                                <div class="flex-container urdu" style="font-size:1.2em;inset-inline:auto">

                                    <div>
                                        <label>کل ریکارڈ شمار</label>
                                        <label class="text-danger" id="TRC"> 0 </label>
                                    </div>
                                    <div>

                                        <label>صفحہ نمبر</label>
                                        <label class="text-danger" id="TPC"> 0 </label>
                                    </div>
                                    <div>
                                        <label>کل صفحہ شمار</label>
                                        <label class="text-danger" id="CP"> 0 </label>
                                    </div>
                                    <div>
                                        <label class="form-check-label  urdu text-muted" style="font-size:1.1rem !important;margin-left:0.2rem !important;">
                                            <select class="newlist" id="ipp" onchange="search()" style="margin-left:1rem !important">
                                                <option value="5" selected>5</option>
                                                <option value="10">10</option>
                                                <option value="20">20</option>
                                                <option value="50">50</option>
                                                <option value="100">100</option>
                                            </select>
                                            فی صفحہ ریکارڈز

                                        </label>
                                    </div>
                                </div>
                            </div>

                        </div>



                    </section>

                </div>

                <footer class="footer" style="direction:ltr !important">
                    <div class="d-sm-flex justify-content-center justify-content-sm-between">
                        <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">
                            PULSE, Copyright ©
                            <script>
                                document.write(new Date().getFullYear())
                            </script> All rights reserved.
                        </span>
                        <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">
                            Crafted By PULSE Software Development Team
                        </span>
                    </div>
                </footer>
            </div>
        </div>
    </div>
    </div>


    <!-- Bootstrap loading Modal  -->
    <div class="modal fade" id="loadingModal" style="background-color:transparent" tabindex="-1" role="dialog" aria-labelledby="loadingModal" aria-hidden="true">
        <div class="modal-dialog" style="background-color:transparent" role="document">
            <div class="modal-content" style="background-color:transparent; border:hidden">
                <!--<div class="modal-header">-->
                <!-- <h5 class="modal-title" id="loadingModalLabel">Loading...</h5>-->
                <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>-->

                <div class="text-center">
                    <div class="spinner-grow text-success" style="width: 6rem; height: 6rem; margin-top:20rem" role="status">

                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="modal fade rtl urdu" id="editProfileModal" tabindex="-1" role="dialog" aria-labelledby="editProfileModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title urdu" id="editProfileModalLabel">پروفائل کی تفصیلات </h5>

                </div>
                <div class="modal-body">
                    <!-- Bootstrap form controls for user profile -->
                    <div class="form-group" style="text-align:right !important">
                        <label for="fullName" class="urdu"> نام:</label>
                        <input type="text" class="form-control" id="fullName" name="fullName">
                    </div>

                    <div class="form-group" style="text-align:right !important">
                        <label for="cnic" class="urdu">شناختی کارڈ نمبر:</label>
                        <input type="text" class="form-control" id="cnic" name="cnic">
                    </div>

                    <div class="form-group" style="text-align:right !important">
                        <label for="mobileNo" class="urdu">موبائل نمبر:</label>
                        <input type="text" class="form-control" id="mobileNo" name="mobileNo">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">بند کریں</button>
                    <button type="button" class="btn btn-primary" onclick="saveProfileChanges()"> محفوظ کریں</button>
                </div>
            </div>
        </div>
    </div>


    <script src="vendors/js/vendor.bundle.base.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="vendors/js/vendor.bundle.addons.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/highcharts-3d.js"></script>
    <script src="https://code.highcharts.com/modules/cylinder.js"></script>
    <script src="https://code.highcharts.com/modules/drilldown.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <script src="js\customeJs\spotlight.bundle.js"></script>
    <!-- Include SweetAlert library -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>


    <!-- DataTables JS -->
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>

    <script src="js/off-canvas.js"></script>
    <script src="js/hoverable-collapse.js"></script>
    <script src="js/misc.js"></script>
    <script src="js/settings.js"></script>
    <script src="js/todolist.js"></script>
    <script src="js/form-validation.js"></script>
    <script src="js/customeJs/slick.js"></script>
    <script src="js/customeJs/keyboard.js"></script>
    <script src="js/dashboard.js"></script>

    <script src="js/customeJs/main.js"></script>
    <script src="js/customeJs/common.js"></script>
    <script src="js/customeJs/custom.js"></script>
    <script>

        // Get the modal
        var modal = document.getElementById("passwordModal");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the page loads, show the modal
        window.onload = function () {
            modal.style.display = "block";
        };

        // When the user clicks on <span> (x), close the modal
        span.onclick = function () {
            modal.style.display = "none";
        };

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        };


        document.addEventListener('DOMContentLoaded', function () {
            // Assuming this code runs after the modal is displayed and its content is loaded
            const modal = document.getElementById('editProfileModal'); // Example modal ID
            const fullName = modal.querySelector('#fullName');

            fullName.addEventListener('input', function () {
                // Regular expression to allow only English characters from a to z and spaces
                const regex = /^[a-zA-Z ]*$/;

                if (!regex.test(fullName.value)) {
                    // If the input contains invalid characters, clear them
                    fullName.value = fullName.value.replace(/[^a-zA-Z ]/g, '');
                }
            });
        });
        document.addEventListener('DOMContentLoaded', function () {
            const openModalButton = document.getElementById('openModalButton');

            openModalButton.addEventListener('click', function () {

                // Fetch user profile data
                fetchUserProfile();
            });

            function fetchUserProfile() {
                const accessToken = localStorage.getItem('accessToken');
                if (!accessToken) {
                    console.error('Access token not found. Please log in.');
                    return;
                }
                console.error('Access token:' + accessToken);

                fetch('/api/account/get-profile', {
                    method: 'GET',
                    headers: {
                        'Authorization': `Bearer ${accessToken}`,
                        'Content-Type': 'application/json',
                    },
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`HTTP error! Status: ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        // Populate modal with user profile data
                        console.log(data);
                        populateModal(data);
                    })
                    .catch(error => {
                        console.error('Error fetching user profile:', error);
                    });
            }

            function populateModal(userData) {
                const cnic = document.getElementById('cnic');
                const fullName = document.getElementById('fullName');
                const mobileNo = document.getElementById('mobileNo');
                console.log(userData.cnic);
                cnic.value = userData.cnic;
                fullName.value = userData.fullName;
                mobileNo.value = userData.mobileNo;

                // Open the modal (You need to implement your modal logic here)
                // For example, you might have a modal library or custom modal code.
            }
        });


        function saveProfileChanges() {
            // Get the updated values from the modal inputs
            const accessToken = localStorage.getItem('accessToken');
            var fullName = $('#fullName').val();
            var cnic = $('#cnic').val();
            var mobileNo = $('#mobileNo').val();
            //  var password = $('#password').val(); // Add the password input ID if available

            // Create an object with the updated profile data
            var updatedProfile = {
                FullName: fullName,
                CNIC: cnic,
                MobileNo: mobileNo,
                //       Password: password // Include this line if you have a password input
            };

            // Make the AJAX request to update the profile
            $.ajax({
                url: '/api/account/update-profile', // Update the URL based on your actual endpoint
                type: 'PUT',
                contentType: 'application/json',
                headers: {
                    'Authorization': 'Bearer ' + accessToken
                },
                data: JSON.stringify(updatedProfile),
                success: function (data) {
                    // Update the UI or perform additional actions upon success
                    console.log('Profile updated successfully', data);
                    // Hide the loading spinner

                    Swal.fire({
                        icon: "success",

                        showConfirmButton: false,
                        allowOutsideClick: false,
                        timer: 2000,  // Set the time in milliseconds (2 seconds in this example)
                        timerProgressBar: true  // Show a progress bar indicating the time remaining
                    });

                    // Close the modal if needed
                    $('#editProfileModal').modal('hide');
                },
                error: function (error) {
                    // Handle errors or display error messages
                    console.error('Error updating profile', error);
                    // You might want to show an error message to the user here
                }
            });
        }



        $(document).ready(function () {
            //  $("#NIC").mask("99999-9999999-9");
            $('#i2soft-keyboard').hide();
            $('#pagecaption').hide();

            document.getElementById('NIC').focus();
            $('#editor').val('');
            const editorInput = $('#editor');
            const keyboard = $('#i2soft-keyboard');

            // Function to position the keyboard near the editor
            function positionKeyboard() {
                const editorRect = editorInput[0].getBoundingClientRect();


                keyboard.css({
                    left: editorRect.left - editorRect.width,
                    top: editorRect.bottom - (editorRect.bottom / editorRect.top * 120)
                });
            }

            // Show the keyboard when the editor is focused
            editorInput.focus(function () {
                positionKeyboard();
                keyboard.show();
            });

            // Hide the keyboard when the editor loses focus
            editorInput.blur(function (event) {
                // Check if the click event was outside the keyboard
                if (!keyboard.is(event.relatedTarget) && !keyboard.has(event.relatedTarget).length) {
                    keyboard.hide();
                }
            });

            // Update the position of the keyboard when the window is resized
            $(window).resize(positionKeyboard);



            //   $("#NIC").mask("99999-9999999-9");

            //  fetchDataAndPopulateDropdown();

            // Attach the onDistrictSelectChange function to the change event of the district dropdown
            //  document.getElementById('districtSelect').addEventListener('change', onDistrictSelectChange);










        });



        const accessToken = localStorage.getItem('accessToken');
        // Remove the token if it has expired

        if (isTokenExpired(accessToken)) {
            logout();
            console.log('Token has expired. Removed from local storage.');
        }

        // Get references to the login and logout links
        const loginLink = document.getElementById('loginLink');
        const logoutLink = document.getElementById('logoutLink');

        // Display the appropriate link based on the presence of the token
        if (accessToken) {
            // If there's a token, show the logout link and hide the login link
            logoutLink.style.display = 'block';
            loginLink.style.display = 'none';
        } else {
            // If there's no token, hide the logout link and show the login link
            logoutLink.style.display = 'none';
            loginLink.style.display = 'block';
        }

        // Logout function
        function logout() {
            // Clear the token from localStorage
            localStorage.removeItem('accessToken');
            localStorage.removeItem('userName');
            localStorage.removeItem('userId');

            // Redirect to the index page
            window.location.href = '../index.html';
        }
        // Logout function
        function login() {
            sessionStorage.setItem('currentLocation', window.location.href);

            // Redirect to the index page
            window.location.href = 'pages/login.html';
        }

        // Decode the JWT token to get information about expiration
        function getTokenExpirationDate(token) {
            const decoded = JSON.parse(atob(token.split('.')[1])); // Decode the payload
            if (decoded.exp === undefined) return null; // Token has no expiration claim
            const expirationDate = new Date(decoded.exp * 1000); // Convert to milliseconds
            return expirationDate;
        }

        // Check if the token has expired
        function isTokenExpired(token) {
            const expirationDate = getTokenExpirationDate(token);
            if (!expirationDate) return false; // Token has no expiration claim
            return expirationDate < new Date();
        }
    </script>


</body>

</html>


