<!DOCTYPE html>
<html lang="ur">

<head>
<script src="/components/portal-runtime.js"></script>
<script src="/components/vendor/jquery.js"></script>
<script src="/components/vendor/bootstrap.js"></script>
<script src="/components/vendor/sweetalert.js"></script>
<script src="/components/vendor/mask.js"></script>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>دستاویزات کی معلومات تلاش کریں | PULSE</title>
    <!-- plugins:css -->
    
    <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">-->
    
    <!--   -->

    <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>


    
    


    <!-- 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">
    

    <!-- DataTables CSS -->
    
    <link rel="stylesheet" href="/css/keyboard.css">
    <!-- endinject -->
    <link rel="shortcut icon" href="/images/favicon.ico" />

<link rel="stylesheet" href="/css/search-page.css">
<link rel="stylesheet" href="/components/vendor/bootstrap.css">
<link rel="stylesheet" href="/components/vendor/select2.css">
<link rel="stylesheet" href="/components/portal.css">
<script src="/components/vendor/dropzone.js"></script>
<script src="/components/vendor/select2.js"></script>
<script src="/components/vendor/moment.js"></script>
<script src="/components/legacy-bridge.js"></script>
<script src="/components/portal-shell.js" defer></script>
</head>
<body class="horizontal-menu pulse-search" data-portal-page="search">
    <div class="container-scroller">

        <!-- Modal -->
        <div id="passwordModal" class="modal urdu fade show rtl" style="display: none; 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="pulse-brand" href="/" aria-label="PULSE home"><span class="plra-mark" aria-hidden="true"></span><span><strong>PULSE</strong><small class="urdu">پنجاب لینڈ ریکارڈ اتھارٹی</small></span></a><button class="notice-button" type="button" aria-label="Portal information" onclick="document.getElementById('passwordModal').style.display='block'"><i class="far fa-bell" aria-hidden="true"></i><span></span></button>            <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" aria-label="Account menu">
                            <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" 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>
<main class="search-main">
<section class="search-hero" aria-labelledby="search-title">
<div dir="rtl">
<h1 id="search-title">دستاویزات کی معلومات تلاش کریں</h1>
<p>درج ذیل معیار کی بنیاد پر ریکارڈ تلاش کریں</p>
</div>
<span class="hero-fort" aria-hidden="true">
</span>
</section>
<span class="hero-documents" aria-hidden="true">
</span>
<section class="search-card" aria-label="Record search">
<form id="searchForm" novalidate method="get" accept-charset="utf-8" dir="rtl">
<div class="search-fields">
<div class="search-field">
<label for="districtSelect">انتخاب کریں</label>
<div class="field-control ">
<svg class="ui-icon" aria-hidden="true">
<use href="/images/search-icons.svg#map-marker-alt">
</use>
</svg>
<select id="districtSelect" class="form-control urdu" required>
<option value="">ضلع کا انتخاب کریں</option>
</select>
</div>
</div>
<div class="search-field">
<label for="tehsilSelect">انتخاب کریں</label>
<div class="field-control ">
<svg class="ui-icon" aria-hidden="true">
<use href="/images/search-icons.svg#building">
</use>
</svg>
<select id="tehsilSelect" class="form-control urdu" required>
<option value="">تحصیل کا انتخاب کریں</option>
</select>
</div>
</div>
<div class="search-field">
<label for="NIC">شناختی کارڈ نمبر (بغیر ڈیش کے درج کریں)</label>
<div class="field-control ">
<svg class="ui-icon" aria-hidden="true">
<use href="/images/search-icons.svg#address-card">
</use>
</svg>
<input id="NIC" class="form-control urdu" placeholder="شناختی کارڈ نمبر درج کریں" autocomplete="off" inputmode="numeric">
</div>
</div>
<div class="search-field">
<label for="editor">نام (اردو / انگریزی میں درج کریں)</label>
<div class="field-control ">
<svg class="ui-icon" aria-hidden="true">
<use href="/images/search-icons.svg#user">
</use>
</svg>
<input id="editor" class="form-control urdu" placeholder="نام درج کریں" autocomplete="off" >
</div>
</div>
<div class="search-field">
<label for="RegistryNo">رجسٹری نمبر</label>
<div class="field-control ">
<svg class="ui-icon" aria-hidden="true">
<use href="/images/search-icons.svg#hashtag">
</use>
</svg>
<input id="RegistryNo" class="form-control urdu" placeholder="رجسٹری نمبر درج کریں" autocomplete="off" inputmode="numeric">
</div>
</div>
<div class="search-field">
<label for="RegistryDateID">ریکارڈ کا سال</label>
<div class="field-control year-control">
<svg class="ui-icon" aria-hidden="true">
<use href="/images/search-icons.svg#calendar-alt">
</use>
</svg>
<select id="RegistryDateID" class="form-control urdu" >
<option value="">سال کا انتخاب کریں</option>
</select>
</div>
</div>
</div>
<input id="registered" type="hidden" value="">
<div class="search-actions">
<button type="submit" id="searchButton">
<svg class="ui-icon" aria-hidden="true">
<use href="/images/search-icons.svg#search">
</use>
</svg>تلاش کریں</button>
<button type="reset" class="reset-button">
    <svg class="ui-icon" aria-hidden="true">
        <use href="/images/search-icons.svg#sync-alt">
        </use>
    </svg>دوبارہ انتخاب کریں
</button>
</div>
</form>
<div id="keyboard">
</div>
</section>
<section class="results-card" aria-labelledby="results-title">
<div class="results-heading">
<h2 id="results-title">
<span>
<svg class="ui-icon" aria-hidden="true">
<use href="/images/search-icons.svg#file-alt">
</use>
</svg>
</span>ریکارڈ کی تفصیلات</h2>
<div class="result-count" dir="rtl">کل نتائج: <strong id="TRC" aria-live="polite">0</strong>
</div>
</div>
<div class="results-table-wrap">
<table id="searchTable" class="search-data-table" dir="rtl">
<thead>
<tr>
<th scope="col">
<svg class="ui-icon" aria-hidden="true">
<use href="/images/search-icons.svg#user">
</use>
</svg>تحصیل کا نام</th>
<th scope="col">
<svg class="ui-icon" aria-hidden="true">
<use href="/images/search-icons.svg#address-card">
</use>
</svg>موضع کا نام</th>
<th scope="col">
<svg class="ui-icon" aria-hidden="true">
<use href="/images/search-icons.svg#hashtag">
</use>
</svg>رجسٹری نمبر</th>
<th scope="col">
<svg class="ui-icon" aria-hidden="true">
<use href="/images/search-icons.svg#calendar-alt">
</use>
</svg>ریکارڈ کی تاریخ</th>
<th scope="col">
<svg class="ui-icon" aria-hidden="true">
<use href="/images/search-icons.svg#file-alt">
</use>
</svg>دست ریکارڈ</th>
</tr>
</thead>
<tbody id="tableBody" class="urdu">
</tbody>
</table>
</div>
<div id="emptyResults" class="empty-results" dir="rtl" role="status">
<span class="empty-art" aria-hidden="true">
</span>
<h3>کوئی معلومات دستیاب نہیں!</h3>
<p>براہ کرم تلاش کے معیار تبدیل یا دوبارہ کوشش کریں</p>
</div>
<div id="pagination" class="pagination" dir="rtl">
</div>
<div id="pagecaption" dir="rtl">
<span>صفحہ نمبر <b id="TPC">0</b>
</span>
<span>کل صفحہ شمار <b id="CP">0</b>
</span>
<label for="ipp">فی صفحہ ریکارڈز</label>
<select id="ipp" onchange="search()">
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
</section>
</main>
<footer class="pulse-footer"><span>PULSE, Copyright © <script>document.write(new Date().getFullYear())</script> All rights reserved.</span><span>Crafted By PULSE Software Development Team <i class="fas fa-heart" aria-hidden="true"></i></span></footer></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>


    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    <!-- Include SweetAlert library -->
    


    
    


    <!-- DataTables JS -->
    

    
    
    
    
    

    
    
    

    
    

    <script src="/js/customeJs/spotlight.bundle.js"></script>
<script src="/js/customeJs/keyboard.js"></script>
<script src="/js/customeJs/main.js"></script>
<script src="/js/customeJs/common.js"></script>
<script src="/js/search-page.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 = "none";
        };

        // 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();

            // Leave initial focus to the user.
            $('#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 (accessToken && 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>


