<!DOCTYPE html>
<html lang="en">


<!-- Mirrored from www.urbanui.com/melody/template/pages/ui-features/dragula.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 15 Sep 2018 06:06:24 GMT -->
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>DE Dashboard</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="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" /><!-- endinject -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- plugin css for this page -->
  <!-- End plugin css for this page -->
  <!-- inject:css -->
  <link rel="stylesheet" href="../../css/style.css">
  <!-- endinject -->
  <link rel="shortcut icon" href="../../images/favicon.png" />

    <style>
        .select2-selection {
            padding: 0 0 !important;
            text-align: left !important;
            text-decoration: none !important;
        }
        
    
        .select2-selection--single {
            padding: .19000rem 0 !important;
            text-align: left !important;
            text-decoration: none !important;
        }
        h6 {
            font-weight: bold;
            color: darkmagenta; /* Change the color to match the border color */
        }
        .wanda-palette {
            background-color: #f8f9fa; /* Light gray background */
            border: 2px solid gray; /* Light border */
            border-radius: 1rem; /* Rounded corners */
            padding: 20px; /* Padding */
            margin: 20px; /* Margin */
            color: #495057; /* Text color */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Shadow effect */
            max-height: 400px;
           
            height: 400px;
            text-align:center;
          
            overflow-y: auto;
        }
        .mywidth {
            
            width:1200px
        }
        .hh6 {
            border: 2px solid white; /* Light border */
            border-radius: 1rem; /* Rounded corners */
            background-color: rebeccapurple; /* Light gray background */
            color: white;
        }
        .custom-input {
            /* Define custom styles */
            border: 1px solid #ccc; /* Border color */
            background-color: #f4f4f4; /* Background color */
            padding: 10px; /* Padding */
            font-size: 16px; /* Font size */
            color: #333; /* Text color */
            border-radius: 5px; /* Border radius */
            width: 300px; /* Width */
        }
        .mysettings {
            /* Define custom styles */
            margin-left : 30px !important
            }

            /* Style the input on focus */
            .custom-input:focus {
                outline: none; /* Remove default focus outline */
                border-color: purple; /* Change border color on focus */
                background-color: #fff; /* Change background color on focus */
            }

            /* Style placeholder text */
            .custom-input::placeholder {
                color: #999; /* Placeholder text color */
            }

            /* Style disabled input */
            .custom-input:disabled {
                background-color: #eee; /* Background color for disabled input */
                cursor: not-allowed; /* Change cursor for disabled input */
            }
            /* Style disabled input */
        .changecolor {
            background-color: green !important; /* Background color for disabled input */
            cursor: not-allowed; /* Change cursor for disabled input */
        }


        @-webkit-keyframes pulse {
            0% {
                box-shadow: 0 0 8px green, inset 0 0 0px #ea4c89;
            }

            50% {
                box-shadow: 0 0 16px green, inset 0 0 2px #ea4c89;
            }

            100% {
                box-shadow: 0 0 8px green, inset 0 0 0px #ea4c89;
            }
        }

        .inner2 {
            border: dotted 2px green !important; 
           
            -webkit-animation: pulse 2s linear 1s infinite;
        }

    </style>
</head>

<body>
    <div class="container-scroller urdu">
        <!-- partial:../../partials/_navbar.html -->
        <nav class="navbar horizontal-layout-navbar  navbar-expand-lg">
            <div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-start">
                <a class="navbar-brand brand-logo urdu p-0 m-0" style="font-size: 2.5rem !important; color: white !important; letter-spacing: 0.5rem;" href="index.html">PULSE</a>
                <!--<a class="navbar-brand brand-logo-mini" href="../index.html"><img src="../images/PulseIcon/Asset 2favicon.png " alt="logo" /></a>-->


            </div>

        </nav>   <!-- partial -->
        <div class="container-fluid">
            <!-- partial:../../partials/_settings-panel.html -->
            <!-- partial -->
            <div class="main-panel" style="width:100% !important">
                <div class="content-wrapper">
                    <div class="col-sm-2 col-md-12">
                        <form method="get" accept-charset="utf-8" id="searchForm">
                            <div class="search-filter" id="filtersPanel">
                                <div class="row form-group">
                                    <div class="col-sm-2 col-md-2">
                                        <select class="form-control rtl pr-5 " id="districtSelect" required="required">
                                            <option value=""> ضلع</option>
                                        </select>
                                    </div>

                                    <div class="col-sm-2 col-md-2">
                                        <select class="form-control   rtl pr-5" id="tehsilSelect" required="required">
                                            <option value="">تحصیل </option>
                                        </select>
                                    </div>

                                    <div class="col-sm-2 col-md-2">
                                        <select class="form-control   rtl pr-5" id="zoneSelect" required="required">
                                            <option value="">موضع </option>
                                        </select>
                                    </div>
                                    <div class="col-sm-2 col-md-3">
                                        <select class="form-control " style="padding:0 0 !important; height:39px !important" id="khewatSelect" required="required">
                                            <option value="">کھیوٹ</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-2 col-md-3 d-flex">

                                        <select class="form-control " id="selectWanda">
                                            <option value="">ونڈا</option>

                                        </select>
                                        <span id="plusButton"> <i class="fa fa-plus m-1 p-2 text-success"></i></span>
                                        <span id="plusButtonCheck"> <i class="fa fa-check m-1 p-2 text-success"></i></span>

                                    </div>

                                </div>

                                <div class="col-sm-2 col-md-12 d-flex m-2 ">
                                    <div class="col-sm-2 col-md-6">
                                        <div class="card rtl">
                                            <div class="card-body p-1">
                                                <div class="col-sm-2 col-md-12 d-flex">

                                                    <div class="col-sm-2 col-md-6 d-flex">
                                                        <h6 class="mb-1">منتخب کھیوٹ:</h6>
                                                    </div>
                                                    <div class="col-sm-2 col-md-5 d-flex">
                                                        <span class="mb-0 text-muted" id="selectedkhewatfromlist"></span>
                                                    </div>
                                                    <div class="col-sm-2 col-md-1 d-flex">
                                                        <span class="mb-0 text-muted" onclick="openmodalforkhewat()"><i class="fa fa-eye text-success" aria-hidden="true"></i></span>
                                                        <span class="mb-0 text-muted ml-2 mr-2" onclick="openmodalforNaqshaJeem()"><i class="fa fa-print text-success" aria-hidden="true"></i></span>
                                                    </div>

                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-2 col-md-6">
                                        <div class="card rtl">
                                            <div class="card-body p-1">
                                                <div class="col-sm-2 col-md-12 d-flex">

                                                    <div class="col-sm-2 col-md-6 d-flex">
                                                        <h6 class="mb-1">منتخب ونڈا:</h6>
                                                    </div>
                                                    <div class="col-sm-2 col-md-5 d-flex">
                                                        <span class="mb-0 text-muted" id="selectedwandafromlist"></span>
                                                    </div>

                                                    <div class="col-sm-2 col-md-1 d-flex">
                                                        <span class="mb-0 text-muted" onclick="openmodaltoviewwandadetails()"><i class="fa fa-eye text-success" aria-hidden="true"></i></span>
                                                    </div>

                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-2 col-md-12 d-flex" id="statistictsForKhewat">

                                    <div class="col-sm-2 col-md-3">
                                        <div class="card">
                                            <div class="card-body p-2 ">

                                                <h6 class="mb-1">کل رقبہ (کھیوٹ) </h6>
                                                <div class="row">
                                                    <div class=" col-12 d-flex">

                                                        <div class="col-6">
                                                            <h6 class="m-0 text-muted " id="totalKhewatArea">دستیاب نہیں ہے۔</h6>
                                                        </div>
                                                        <div class="col-6">
                                                            <h6 class="m-0 text-success" id="totalKhewatAreaKMF">دستیاب نہیں ہے۔</h6>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-sm-2 col-md-3" hidden>
                                        <div class="card">
                                            <div class="card-body p-2">

                                                <h6 class="mb-1">منتخب کھیوٹ کا الاٹ شدہ رقبہ</h6>
                                                <div class="row">
                                                    <div class=" col-12 d-flex">

                                                        <div class="col-6">
                                                            <h6 class="mb-1 text-muted ml-lg-5" id="totalAssignedKhewatArea">دستیاب نہیں ہے۔</h6>

                                                        </div>
                                                        <div class="col-6">

                                                            <h6 class="m-0 ml-1  text-success" id="totalAssignedKhewatAreaKMF">دستیاب نہیں ہے۔</h6>
                                                        </div>

                                                    </div>
                                                </div>

                                            </div>
                                        </div>


                                    </div>
                                    <div class="col-sm-2 col-md-3">
                                        <div class="card">
                                            <div class="card-body p-2">

                                                <h6 class="mb-1">منتخب کھیوٹ کا غیر الاٹ شدہ رقبہ</h6>
                                                <div class="row">
                                                    <div class=" col-12 d-flex">

                                                        <div class="col-6">
                                                            <h6 class="mb-1 text-muted ml-lg-5" id="totalunAssignedKhewatArea">دستیاب نہیں ہے۔</h6>

                                                        </div>
                                                        <div class="col-6">

                                                            <h6 class="m-0 ml-1  text-success" id="totalunAssignedKhewatAreaKMF">دستیاب نہیں ہے۔</h6>
                                                        </div>

                                                    </div>
                                                </div>

                                            </div>
                                        </div>


                                    </div>
                                    <div class="col-sm-2 col-md-3">
                                        <div class="card">
                                            <div class="card-body p-2 ">

                                                <h6 class="mb-1">منتخب ونڈا کا کل رقبہ</h6>

                                                <div class="row">
                                                    <div class=" col-12 d-flex">

                                                        <div class="col-6">
                                                            <h6 class="mb-1 text-muted ml-lg-5" id="TotalAreaWanda">دستیاب نہیں ہے۔</h6>

                                                        </div>
                                                        <div class="col-6">

                                                            <h6 class="m-0 ml-1  text-success" id="TotalAreaWandaKMF">دستیاب نہیں ہے۔</h6>
                                                        </div>

                                                    </div>
                                                </div>


                                            </div>
                                            <div class="">
                                                <span class="mb-0 " id="newAreaKhasra"></span>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-2 col-md-3">
                                        <div class="card">
                                            <div class="card-body p-2">

                                                <h6 class="mb-1">منتخب ونڈا کا غیر الاٹ شدہ رقبہ</h6>
                                                <div class="row">
                                                    <div class=" col-12 d-flex">

                                                        <div class="col-6">
                                                            <h6 class="mb-1 text-muted ml-lg-5" id="AvailableAreaWanda">دستیاب نہیں ہے۔</h6>

                                                        </div>
                                                        <div class="col-6">

                                                            <h6 class="m-0 ml-1  text-success" id="AvailableAreaWandaKMF">دستیاب نہیں ہے۔</h6>
                                                        </div>

                                                    </div>
                                                </div>


                                            </div>
                                            <div class="m-0 p-0" style="position:relative !important">
                                                <span class="mb-0  text-success" id="newAreaKhasra2"></span>

                                            </div>
                                            <div class="m-0 p-0" style="position:relative !important">
                                                <span class="mb-0  text-danger" id="newAreaOwner"></span>

                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <!--<div class="col-sm-2 col-md-12 d-flex" id="selectedWandaDetails" style="max-height: 120px; height: 120px; overflow-y: auto;">


                    <div class="col-sm-2 col-md-6">

                        <div id="newTableContainer"></div>
                    </div>
                    <div class="col-sm-3 col-md-6">

                        <div id="newTableContainer2"></div>
                    </div>

                </div>-->

                                <h6 class="text-center">ونڈا میں تفصیلات شامل کریں۔</h6>



                            </div>
                        </form>
                    </div>

                 

                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-12  d-flex">

                                <div class="col-md-3 m-2 text-center" style="border: gray dashed 2px">
                                    <h6 class="card-title ">دستیاب خسرہ</h6>
                                    <div class="row d-flex m-2">
                                    <input class="urdu custom-input " type="text" id="searchkhasrabymuraba" autocomplete="off" style="height:20px; width: 50%;" placeholder="مربع تلاش کریں۔" />
                                    <input class="urdu custom-input " type="text" id="searchkhasrabykhasra" autocomplete="off" style="height: 20px; width: 50%; " placeholder="خسرہ تلاش کریں۔" />
                                        </div>

                                    <div id="dragula-event-left" class="p-2 scrollbar scrollbar-primary" style="max-height: 420px; height: 420px; overflow-y: auto;">

                                        <!--<div class="card rounded border mb-2 draggable" data-id="1">

                            <div class="card-body p-3">
                                <div class="media"><i class="fa fa-check icon-sm text-primary align-self-center mr-3"></i><div class="media-body"><h6 class="mb-1">2</h6><span class="text-muted font-weight-bold">Muraba No: </span><span class="mb-0 text-muted">49</span><div class="d-flex align-items-center"><span class="text-muted font-weight-bold"> Area: </span><input class="form-control form-control-sm" value="5545"><button class="btn btn-secondary btn-sm ml-2">Reset</button></div></div></div>

                            </div>
                        </div>-->
                                        <!-- Add more available items here -->

                                    </div>
                                </div>
                                <div class=" col-md-6 d-flex" style="background-color:white; border: dashed 2px" ;>

                                    <div class="col-md-6">
                                        <h6 class="card-title">منتخب خسرہ</h6>
                                        <div id="dragula-event-right" class="py-2" style="max-height: 420px; height: 420px; overflow-y: auto;">

                                            <!-- Selected items will be moved here -->

                                        </div>
                                    </div>



                                    <div class="col-md-6">
                                        <h6 class="card-title">منتخب مالکان</h6>
                                        <div id="dragula-right" class="py-2" style="max-height: 420px; height: 420px; overflow-y: auto;">

                                            <!-- Selected items will be moved here -->

                                        </div>
                                    </div>

                                </div>

                                <div class="col-md-3 m-2" style="border: gray dashed 2px">
                                    <h6 class="card-title  m-0">دستیاب مالکان</h6>

                                    <input class="col-12 urdu custom-input" type="text" id="searchownerbyname" autocomplete="off" style="height:20px;" placeholder="مالک تلاش کریں۔" />
                                    <div id="dragula-left" style="max-height: 420px; height: 420px; overflow-y: auto;" class="p-2 scrollbar scrollbar-primary">
                                        <!--<div class="card rounded border mb-2 draggable" data-id="2">
                            <div class="card-body p-3"><div class="media"><i class="fa fa-user icon-sm text-primary align-self-center mr-3"></i><div class="media-body"><h6 class="mb-1">مختار احمدولداحمد علی</h6><span class="text-muted font-weight-bold">Area: </span><span class="mb-0 text-muted">40-1-0</span></div></div></div>


                        </div>-->
                                        <!-- Add more available items here -->

                                    </div>
                                </div>




                            </div>

                        </div>
                    </div>



                    <!-- Validate button -->
                    <div class=" col-12 d-flex">
                        <button id="validateBtn" class="btn btn-info btn-sm col-10 p-1 m-1 urdu2">تصدیق کریں</button>
                        <button id="FinalBtn" class="btn btn-success btn-sm col-2 p-1 m-1 urdu2">اندراج کریں</button>
                        <span class="mb-0 text-muted ml-2 mr-2" onclick="POSTtoRO()">
                        <i class="fa fa-arrow-down text-success" aria-hidden="true"></i>
                        </span>


                    </div>


                    <!-- Bootstrap modal -->
                    <div class="modal fade" id="selectedItemsModal" tabindex="-1" aria-labelledby="selectedItemsModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="selectedItemsModalLabel">منتخب ونڈا کے لیے تفصیلات</h5>
                                </div>
                                <div class="modal-body">
                                    <h6>خسرہ کا انتخاب:</h6>
                                    <table class="table">
                                        <thead>
                                            <tr>

                                                <th>خسرہ شناخت</th>
                                                <th>خسرہ نمبر</th>
                                                <th>مربع نمبر</th>
                                                <th>خسرہ رقبہ</th>
                                                <th>ذیلی خسرہ</th>

                                            </tr>
                                        </thead>
                                        <tbody id="selectedItemsTableBody"></tbody>
                                    </table>

                                    <h6>مالک کا انتخاب:</h6>
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>شناخت مالک</th>
                                                <th>مالک کا نام</th>
                                                <th>نمبر CNIC </th>
                                                <th>مالک کا رقبہ </th>

                                            </tr>
                                        </thead>
                                        <tbody id="selectedItemsTableBodyO"></tbody>
                                    </table>
                                    <!--<h6>Existing Record:</h6>

    <div id="newTableContainer"></div>-->

                                </div>
                                <div class="modal-footer">
                                    <!-- Button to display new table -->
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>




            </div>

            <!-- content-wrapper ends -->
            <!-- partial:../../partials/_footer.html -->
            <footer class="footer">
                <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">Copyright © 2024 <a href="https://www.pulse.gop.pk/" target="_blank">Pulse</a>. All rights reserved.</span>
                    <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">Created by PULSE ICT Team</span>
                </div>
            </footer>


            <!-- Modal for editing record -->
            <div class="modal fade" id="editRecordModal" tabindex="-1" aria-labelledby="editRecordModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="editRecordModalLabel">Edit Record</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <!-- Form for editing record attributes -->
                            <form id="editRecordForm">
                                <!-- Input fields for editing attributes -->
                                <div class="mb-3">
                                    <label for="editKhasraNo" class="form-label">Khasra No</label>
                                    <input type="text" class="form-control" id="editKhasraNo">
                                </div>
                                <div class="mb-3">
                                    <label for="editMurabaNo" class="form-label">Muraba No</label>
                                    <input type="text" class="form-control" id="editMurabaNo">
                                </div>
                                <div class="mb-3">
                                    <label for="editKhasraArea" class="form-label">Khasra Area</label>
                                    <input type="text" class="form-control" id="editKhasraArea">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <!--    <button type="button" class="btn btn-primary" onclick="saveEditedRecord()">Save Changes</button>-->
                        </div>
                    </div>
                </div>
            </div>


            <!-- Modal for editing record -->
            <div class="modal fade" id="existingRecordModal" tabindex="-1" aria-labelledby="existingRecordModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title rtl" id="editRecordModalLabel">منتخب کھیوٹ کی تفصیلات</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body rtl ">
                            <div class="col-sm-2 col-md-12 d-flex" id="selectedWandaDetails">


                                <div class="col-sm-2 col-md-6 align-items-center" style="max-height: 400px; height: 400px; overflow-y: auto;">
                                    <h6 class="modal-title mr-2" id="editRecordModalLabel">منتخب شدہ خسرہ </h6>

                                    <div id="newTableContainer"></div>
                                </div>
                               

                                <div class="col-sm-3 col-md-6 align-items-center" style="max-height: 400px; height: 400px; overflow-y: auto;">
                                    <h6 class="modal-title mr-2" id="editRecordModalLabel">منتخب شدہ مالکان  </h6>

                                    <div id="newTableContainer2"></div>
                                </div>

                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                       </div>
                    </div>
                </div>
            </div> 
            
    <!-- Modal for editing record -->
            <div class="modal fade" id="khewatRecordModal" tabindex="-1" aria-labelledby="existingRecordModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header rtl">
                            <h5 class="modal-title" id="editRecordModalLabel">منتخب کھیوٹ کی تفصیلات</h5>
                         
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body " id="khewatmodalbody" style="max-height:600px; overflow-y:auto">
                            <div class="row rtl" style="border: 1px solid gray; border-radius: 10px" >
                                <div class="d-flex  align-items-center m-3">
                                    <h6 class="modal-title mr-2" id="editRecordModalLabel">منتخب شدہ کھیوٹ </h6>
                                    <h6 class="modal-title mr-2" id="editRecordModalLabel"></h6>
                                    <h5 class="modal-title ml-2" id="selectedKhewatNoModal"></h5>

                                </div>
                                <div class="d-flex  align-items-center m-3">
                                    <h6 class="modal-title mr-2" id="editRecordModalLabel">کل رقبہ (کھیوٹ)</h6>
                                    <h8 class="modal-title mr-2" id="editRecordModalLabel">(K-M-F)</h8>
                                    <h5 class="modal-title ml-2" id="selectedKhewatAreaModal"></h5>
                                </div>
                                <div class="d-flex align-items-center m-3">
                                    <h6 class="modal-title mr-2" id="editRecordModalLabel"> الاٹ شدہ رقبہ</h6>
                                    <h8 class="modal-title mr-2" id="editRecordModalLabel">(K-M-F)</h8>
                                    <h5 class="modal-title ml-2" id="selectedKhewatAllottedAreaModal"></h5>
                                </div>
                                <div class="d-flex align-items-center m-3">
                                    <h6 class="modal-title mr-2" id="editRecordModalLabel">غیر الاٹ شدہ رقبہ</h6>
                                    <h8 class="modal-title mr-2" id="editRecordModalLabel">(K-M-F)</h8>
                                    <h5 class="modal-title ml-2" id="selectedKhewatunAllottedAreaModal"></h5>
                                </div>

                            </div>
                            <div  class="row rtl">
                            <div id="wandaPalettesContainer" class="m-1 p-1">
                                <p class="m-0">No Data</p>
                            </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                       </div>
                    </div>
                </div>
            </div>
        
            <!-- partial -->
        </div>
        <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
    </div>
    <!-- container-scroller -->
    <!-- plugins:js -->
    <script src="../../vendors/js/vendor.bundle.base.js"></script>
    <script src="../../vendors/js/vendor.bundle.addons.js"></script>
    <!-- Include SweetAlert library -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

    <!-- endinject -->
    <!-- inject:js -->
    <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>
    <!-- endinject -->
    <!-- Custom js for this page-->
    <script src="../../js/dragula.js"></script>
    <script src="js/customeJs/main.js"></script>


    <!-- End custom js for this page-->


    <script>

        // filter the owner by owner name---
        document.getElementById('searchownerbyname').addEventListener('input', function () {
            
            // Select all cards
            var cards = document.querySelectorAll('.filterName');
            var name = document.getElementById('searchownerbyname').value.trim().toLowerCase(); // Get the trimmed and lowercase value for name

          //  alert(murabaNo);
            resetCardDisplayO();
            // Iterate through each card
            cards.forEach(function (card) {
                // Get Muraba No value from the card
                var cardName = card.querySelector('.newOwnerCard').textContent.trim().toLowerCase();;

                // Check if the Muraba No filter is provided
                if (name && !cardName.includes(name)) {
                    // Hide the card if it does not match the filter
                    card.style.display = 'none';
                } else {
                    // Show the card if no filter is provided or if it matches the filter
                    card.style.display = 'block';
                    
                }
            });

        });

        //filtering the muraba in khasra cards
        document.getElementById('searchkhasrabymuraba').addEventListener('input', function () {
            
            // Select all cards
            var cards = document.querySelectorAll('.filterMuraba');
            var murabaNo = document.getElementById('searchkhasrabymuraba').value;
         //   alert(murabaNo);
            resetCardDisplay();
            // Iterate through each card
            cards.forEach(function (card) {
                // Get Muraba No value from the card
                var cardMurabaNo = card.querySelector('.newcardmuraba').textContent.trim();

                // Check if the Muraba No filter is provided
                if (murabaNo && cardMurabaNo !== murabaNo) {
                    // Hide the card if it does not match the filter
                    card.style.display = 'none';
                } else {
                    // Show the card if no filter is provided or if it matches the filter
                    card.style.display = 'block';
                    
                }
            });

        });

        //filter the khasra in khasra card---
        document.getElementById('searchkhasrabykhasra').addEventListener('input', function () {
            
            // Select all cards
            var cards = document.querySelectorAll('.filterKhasra');
            var murabaNo = document.getElementById('searchkhasrabykhasra').value;
          //  alert(murabaNo);
            resetCardDisplay();
            // Iterate through each card
            cards.forEach(function (card) {
                // Get Muraba No value from the card
                var cardMurabaNo = card.querySelector('.newcardkhasra').textContent.trim();

                // Check if the Muraba No filter is provided
                if (murabaNo && cardMurabaNo !== murabaNo) {
                    // Hide the card if it does not match the filter
                    card.style.display = 'none';
                } else {
                    // Show the card if no filter is provided or if it matches the filter
                    card.style.display = 'block';
                    
                }
            });

        });

        // Function to reset display of all cards
        function resetCardDisplay() {
            // Select all cards
            var cards = document.querySelectorAll('.filterMuraba');

            // Reset display property of all cards
            cards.forEach(function (card) {
                card.style.display = 'block';
            });
        }
          // Function to reset display of all cards
        function resetCardDisplayO() {
            // Select all cards
            var cards = document.querySelectorAll('.filterName');

            // Reset display property of all cards
            cards.forEach(function (card) {
                card.style.display = 'block';
            });
        }

        document.getElementById('validateBtn').addEventListener('click', function () {
            if (checkDefault()) {
                // Get selected items from Khasra Selection card
                // var khasraSelectionItems = getSelectedItemsK('dragula-event-right');


                var khasraSelectionItems = getSelectedItemsK('dragula-event-right');

                var sumofallselectedkhasra = sumKhasraAreas(khasraSelectionItems);
                var allareaavaiableforthiskhewat2 = allareaavaiableforthiskhewat();





                // Get selected items from Members Selection card
                var membersSelectionItems = getSelectedItems('dragula-right');

                var sumofallselectedowner = sumOwnerAreas(membersSelectionItems);
                //for owners------
                // var allareaavaiableforthiskhewat2 = allareaavaiableforthiskhewat();
                var totalwandaarea = document.getElementById('AvailableAreaWanda').textContent.trim();

                var myownersum = parseInt(totalwandaarea) + parseInt(sumofallselectedkhasra);
                // alert(myownersum);

                if (allareaavaiableforthiskhewat2 < sumofallselectedkhasra) {
                    Swal.fire({
                        icon: "error",

                        title: '<p class="urdu" style="color:red; font-size:1.2em">منتخب شدہ خسرہ کا رقبہ منتخب شدہ کھیوٹ کے کل رقبے سے زیادہ ہے۔</p>',


                        showConfirmButton: false,
                        timer: 4000,

                        allowOutsideClick: true,

                        //customClass: {
                        //    popup: 'custom-popup-class',
                        //}
                    });

                }

                else if (myownersum < sumofallselectedowner) {
                    Swal.fire({
                        icon: "error",

                        title: '<p class="urdu" style="color:red; font-size:1.2em">منتخب شدہ مالک کا رقبہ منتخب شدہ ونڈا کے دستیاب رقبے سے زیادہ ہے۔</p>',


                        showConfirmButton: false,
                        timer: 4000,

                        allowOutsideClick: true,

                        //customClass: {
                        //    popup: 'custom-popup-class',
                        //}
                    });
                }

                else if (allareaavaiableforthiskhewat2 >= sumofallselectedkhasra && myownersum >= sumofallselectedowner) {
                    // Call the function with the selected items array
                    displaySelectedItemsK(khasraSelectionItems);
                    displaySelectedItems(membersSelectionItems);

                    //// Display the modal
                    var modal = new bootstrap.Modal(document.getElementById('selectedItemsModal'));
                    modal.show();
                    // Call the function with the selected items array
                    //SendKhasraToDB(khasraSelectionItems);
                    //SendOwnerToDB(membersSelectionItems);
                    // document.getElementById('khewatSelect').value = ''
                   // onkhewatSelectChange();



                }

                else {
                    Swal.fire({
                        icon: "error",

                        title: '<p class="urdu" style="color:red; font-size:1.2em">خرابی واقع ہوگئی ہے، کھیوٹ اور ونڈا دوبارہ منتخب کریں۔</p>',


                        showConfirmButton: false,
                        timer: 4000,

                        allowOutsideClick: true,

                        //customClass: {
                        //    popup: 'custom-popup-class',
                        //}
                    });
                }

                // Output selected items from both cards to console
                ////console.log("Selected items from Khasra Selection:");
                ////console.log(khasraSelectionItems);

                ////console.log("Selected items from Members Selection:");
                ////console.log(membersSelectionItems);


            }
        });
     
        //document.getElementById('FinalBtn').addEventListener('click', function () {
        //    // Get selected items from Khasra Selection card

        //    checkDefault();
        //    var khasraSelectionItems = getSelectedItemsK('dragula-event-right');

        //    var sumofallselected = sumKhasraAreas(khasraSelectionItems);
           
        //    SendKhasraToDB(khasraSelectionItems);
        //  //  SendOwnerToDB(membersSelectionItems);

        //  //  var totalareaofkhasraselected = khasraSelectionItems
         
        //    // Get selected items from Members Selection card
        //    var membersSelectionItems = getSelectedItems('dragula-right');

        
        //    // Output selected items from both cards to console
        //    ////console.log("Selected items from Khasra Selection:");
        //    ////console.log(khasraSelectionItems);
        //    SendOwnerToDB(membersSelectionItems);

        //    ////console.log("Selected items from Members Selection:");
        //    ////console.log(membersSelectionItems);

           
        //});
        function getSelectedItems(containerId) {
            var selectedItems = [];

            // Get all selected items from the container
            var items = document.querySelectorAll('#' + containerId + ' .draggable');

            // Iterate over each item
            items.forEach(function (item) {
                ////console.log(item);
                var title = item.querySelector('.media-body h6').textContent.trim();
                var cnic = item.querySelector('.media-body p').textContent.trim();
                var mediaBody = item.querySelector('.media-body'); // Get the media body for the current item

                // Extracting description
                //var descriptionLabel = item.querySelector('.media-body .text-muted.font-weight-bold');
                //var description = descriptionLabel ? descriptionLabel.nextSibling.textContent.trim() : '';


                var ownerAreaValue = null;

                // Check if the input element exists
                var ownerAreaInput = mediaBody.querySelector('input');
                if (ownerAreaInput) {
                    // If the input element exists, retrieve its value
                    ownerAreaValue = ownerAreaInput.value.trim();
                } else {
                    // If the input element doesn't exist, try to retrieve the value from the text content
                    var ownerAreaLabel = descriptionLabel.nextElementSibling.nextElementSibling;
                    ownerAreaValue = ownerAreaLabel ? ownerAreaLabel.nextSibling.nodeValue.trim() : '';
                }


                selectedItems.push({
                    personId: item.getAttribute('data-id'),
                    Name: title,
                    Cnic: cnic,
                    personArea: ownerAreaValue,

                });
            });

            return selectedItems;
        }
        function getSelectedItemsK(containerId) {
            var selectedItems = [];

            // Get all selected items from the container
            var items = document.querySelectorAll('#' + containerId + ' .draggable');

            // Iterate over each item
            items.forEach(function (item) {
                ////console.log(item);
                var title = item.querySelector('.media-body h6').textContent.trim();

                // Extracting description
                var descriptionLabel = item.querySelector('.media-body .text-muted.font-weight-bold');
                var description = descriptionLabel ? descriptionLabel.nextSibling.textContent.trim() : '';

               var totalarea = item.querySelector('.tk').textContent.trim();

                // Extracting khasraArea
                //var khasraAreaLabel = descriptionLabel.nextElementSibling.nextElementSibling;
                //var khasraArea = khasraAreaLabel ? khasraAreaLabel.nextSibling.nodeValue.trim() : '';
                var mediaBody = item.querySelector('.media-body'); // Get the media body for the current item

                var khasraAreaValue = null;

                // Check if the input element exists
                var khasraAreaInput = mediaBody.querySelector('input');
             
                if (khasraAreaInput) {
                    // If the input element exists, retrieve its value
                    khasraAreaValue = khasraAreaInput.value.trim();
                } else {
                    // If the input element doesn't exist, try to retrieve the value from the text content
                    var khasraAreaLabel = descriptionLabel.nextElementSibling.nextElementSibling;
                    khasraAreaValue = khasraAreaLabel ? khasraAreaLabel.nextSibling.nodeValue.trim() : '';
                }


                selectedItems.push({
                    KhasraId: item.getAttribute('data-id'),
                    khasraNo: title,
                    SubkhasraNo: totalarea,
                    MurabaNo: description,
                    KhasraArea: khasraAreaValue
                });
            });

            return selectedItems;
        }
        function SendKhasraToDB(data) {
            var zoneSelect = document.getElementById('zoneSelect');
            var SelectedZone = zoneSelect.value;
           // alert(SelectedZone);
            var khewatSelect = document.getElementById('khewatSelect');
            var selectedKhewatId = khewatSelect.value;
            var selectedkhewatNo = khewatSelect.options[khewatSelect.selectedIndex].textContent;
            var wandaSelect = document.getElementById('selectWanda');
            var selectedwandaId = wandaSelect.value;   
            
            data.forEach(function (item) {
                // Create a new postData object for each item
             

                var postData = {
                    "id": 0,
                    "muazaId": SelectedZone,
                    "khewatId": selectedKhewatId,
                    "khewatNo": selectedkhewatNo,
                    "wandaNo": selectedwandaId,
                    "khasraId": item.KhasraId, // Assuming data is accessible via item
                    "khasraNo": item.khasraNo,
                    "newKhasraNo": item.khasraNo,
                    "subKhasraNo": parseInt(getFeetByArea(item.SubkhasraNo)),
                    "murabaNo": item.MurabaNo,
                    "khasraArea": parseInt(getFeetByArea(item.KhasraArea))
                };

                ////console.log("postData wise details----------------");
                ////console.log(item);

                // Define the API endpoint URL
                var apiUrl = '../api/KhasraWiseWanda';

                // Fetch data from the API
                fetch(apiUrl, {
                    method: 'POST',
                    headers: {
                        'Accept': 'text/plain',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(postData) // Convert data to JSON string
                })
                    .then(response => {
                        // Check if response is successful
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        // Parse response as text
                        return response.text();
                    })
                    .then(data => {
                        // Process the response data
                        ////console.log("Response:", data);
                        // Handle success
                        Swal.fire({
                            icon: "success",

                            title: '<p class="urdu" style="color:green; font-size:1.2em">Record added for Khasra!</p><br> ' ,


                            showConfirmButton: false,
                            timer: 5000,

                            allowOutsideClick: true,

                            //customClass: {
                            //    popup: 'custom-popup-class',
                            //}
                        });
                    })
                    .catch(error => {
                        // Handle errors
                        console.error('Error adding KhasraWiseWanda:', error);
                    });
 
            });

// Now you have an array of postData objects, postDataArray, which you can use as needed
            // Handle errors
          
            //document.getElementById("totalKhewatArea").innerHTML = 'Not Available'
            //document.getElementById("dragula-event-left").innerHTML = ''
            //document.getElementById("dragula-event-right").innerHTML = ''
            //document.getElementById("dragula-left").innerHTML = ''
            //document.getElementById("dragula-right").innerHTML = ''
        
            }
        function SendOwnerToDB(data) {
            var zoneSelect = document.getElementById('zoneSelect');

            var SelectedZone = zoneSelect.value;
          //  alert(SelectedZone);
            var khewatSelect = document.getElementById('khewatSelect');
            var selectedKhewatId = khewatSelect.value;
            // alert(selectedKhewatId);

            var selectedkhewatNo = khewatSelect.options[khewatSelect.selectedIndex].textContent;

            // alert(selectedkhewatNo);

            var wandaSelect = document.getElementById('selectWanda');
            var selectedwandaId = wandaSelect.value;

            data.forEach(function (item) {
            // Example data object
            var postData = {
                "id": 0,
                "muazaId": SelectedZone,
                "khewatId": selectedKhewatId,
                "wandaNo": selectedwandaId,
                "khewatNo": selectedkhewatNo,
                "personId": item.personId,
                "personCnic": item.Cnic,
                "personArea": parseInt(getFeetByArea(item.personArea)),
                "personName": item.Name
                };
           

            // Define the API endpoint URL
            var apiUrl = '../api/OwnerwiseWanda';


                // Fetch data from the API
                fetch(apiUrl, {
                    method: 'POST',
                    headers: {
                        'Accept': 'text/plain',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(postData) // Convert data to JSON string
                })
                    .then(response => {
                        // Check if response is successful
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        // Parse response as text
                        return response.text();
                    })
                    .then(data => {
                        // Process the response data
                        ////console.log("Response:", data);
                        // Handle success
                        Swal.fire({
                            icon: "success",

                            title: '<p class="urdu" style="color:green; font-size:1.2em">Record added</p><br> ',


                            showConfirmButton: false,
                            timer: 5000,

                            allowOutsideClick: true,

                            //customClass: {
                            //    popup: 'custom-popup-class',
                            //}
                        });
                    })
                    .catch(error => {
                        // Handle errors
                        console.error('Error adding KhasraWiseWanda:', error);
                    });


            });
        } 
        // Wait for the document to be ready
        document.addEventListener('DOMContentLoaded', function () {
            // Initialize Select2 on the <select> element
        //    $('#districtSelect').select2();
        //    $('#tehsilSelect').select2();
        //    $('#zoneSelect').select2();
           $('#khewatSelect').select2();
        });
        function displaySelectedItemsK(selectedItems) { 
            // Get the table body element
            var tableBody = document.getElementById('selectedItemsTableBody');

            // Clear existing rows
            tableBody.innerHTML = '';

            // Iterate over selected items array
            selectedItems.forEach(function (item) {
                // Create a new table row
                var row = document.createElement('tr');

                // Create table data cells for each property
                var khasraIdCell = document.createElement('td');
                khasraIdCell.textContent = item.KhasraId;

                var khasraNoCell = document.createElement('td');
                khasraNoCell.textContent = item.khasraNo;

                var murabaNoCell = document.createElement('td');
                murabaNoCell.textContent = item.MurabaNo;

                var khasraAreaCell = document.createElement('td');
                khasraAreaCell.textContent = item.KhasraArea;

                var subkhasra = document.createElement('td');
                subkhasra.textContent = 0;

                // Append cells to the row
                row.appendChild(khasraIdCell);
                row.appendChild(khasraNoCell);
                row.appendChild(murabaNoCell);
                row.appendChild(khasraAreaCell);
                row.appendChild(subkhasra);

                // Append the row to the table body
                tableBody.appendChild(row);
            });

            // Assign a single value to all records
            // var singleValueInput = document.getElementById('singleValueInput').value;

            //// Update all rows with the single value
            //var khasraAreaCells = tableBody.querySelectorAll('td:nth-child(4)'); // Select all cells in the 4th column (Khasra Area)
            //khasraAreaCells.forEach(function (cell) {
            //    cell.textContent = singleValueInput;
            //});
        }
        function displaySelectedItems(selectedItems) {

          //  ////console.log("seelctednjsnads", selectedItems)
            // Get the table body element
            var tableBody = document.getElementById('selectedItemsTableBodyO');

            // Clear existing rows
            tableBody.innerHTML = '';

            // Iterate over selected items array
            selectedItems.forEach(function (item) {
                // Create a new table row
                var row = document.createElement('tr');

                // Create table data cells for each property
                var personId = document.createElement('td');
                personId.textContent = item.personId;

                var Name = document.createElement('td');
                Name.textContent = item.Name;

                var Cnic = document.createElement('td');
                Cnic.textContent = item.Cnic;

                var personArea = document.createElement('td');
                personArea.textContent = item.personArea;

           

                // Append cells to the row
                row.appendChild(personId);
                row.appendChild(Name);
                row.appendChild(Cnic);
                row.appendChild(personArea);
              

                // Append the row to the table body
                tableBody.appendChild(row);
            });

            // Assign a single value to all records
            // var singleValueInput = document.getElementById('singleValueInput').value;

            // Update all rows with the single value
            //var khasraAreaCells = tableBody.querySelectorAll('td:nth-child(4)'); // Select all cells in the 4th column (Khasra Area)
            //khasraAreaCells.forEach(function (cell) {
            //    cell.textContent = singleValueInput;
            //});
        }
        //document.getElementById('selectWanda').addEventListener('click', function () {
        //    // Get input values from existing fields
        //    var khasraId = 10;
        //    var khasraNo = 10;
        //    var murabaNo = 10;
        //    var khasraArea = 10

        //    // Generate new table HTML with input values
        //    var newTableHTML =
        //        '<table class="table">' +
        //        '<thead>' +
        //        '<tr>' +
        //        '<th>Khasra Id</th>' +
        //        '<th>Khasra No</th>' +
        //        '<th>Muraba No</th>' +
        //        '<th>Khasra Area</th>' +
        //        '</tr>' +
        //        '</thead>' +
        //        '<tbody>' +
        //        '<tr>' +
        //        '<td>' + khasraId + '</td>' +
        //        '<td>' + khasraNo + '</td>' +
        //        '<td>' + murabaNo + '</td>' +
        //        '<td>' + khasraArea + '</td>' +
        //        '</tr>' +
        //        '</tbody>' +
        //        '</table>';


        //    // Generate new table HTML with input values
        //    var newTableHTML =
        //        '<table class="table">' +
        //        '<thead>' +
        //        '<tr>' +
        //        '<th>Khasra Id</th>' +
        //        '<th>Khasra No</th>' +
        //        '<th>Sub Khasra No</th>' +
        //        '<th>Muraba No</th>' +
        //        '<th>Khasra Area</th>' +
        //        '<th>Action</th>' +
        //        '</tr>' +
        //        '</thead>' +
        //        '<tbody>' +
        //        '<tr>' +
        //        '<td>' + khasraId + '</td>' +
        //        '<td>' + khasraNo + '</td>' +
        //        '<td>' + 0 + '</td>' +
        //        '<td>' + murabaNo + '</td>' +
        //        '<td>' + khasraArea + '</td>' +
        //        '<td>' +
        //        '<span   onclick="openEditModal(' + khasraId + ')"><i class="fas fa-edit"></i></span>&nbsp;' + 
        //        '<span class="text-danger"  onclick="deleteRecord(' + khasraId + ')"><i class="fas fa-trash"></i></span>' +
        //        '</td>' +
        //        '</tr>' +
        //        '</tbody>' +
        //        '</table>';

         


        //   //  Generate new table HTML with input values
        //    var newTableHTML2 = 
        //        '<table class="table">' +
        //        '<thead>' +
        //        '<tr>' +
        //        '<th>Person Id</th>' +
        //        '<th>Person Name</th>' +
        //        '<th>Person Area</th>' +
        //        '<th>Action</th>' +
        //        '</tr>' +
        //        '</thead>' +
        //        '<tbody>' +
        //        '<tr>' +
        //        '<td>' + khasraId + '</td>' +
        //        '<td>' + 'umar farooq' + '</td>' +
        //        '<td>' + murabaNo + '</td>' +
        //        '<td>' +
        //        '<span   onclick="openEditModal(' + khasraId + ')"><i class="fas fa-edit"></i></span>&nbsp;' +
        //        '<span class="text-danger"  onclick="deleteRecord(' + khasraId + ')"><i class="fas fa-trash"></i></span>' +
        //        '</td>' +
        //       '</tr>' +
        //        '<tr>' +
        //        '<td>' + khasraId + '</td>' +
        //        '<td>' + 'umar farooq' + '</td>' +
        //        '<td>' + murabaNo + '</td>' +
        //        '<td>' +
        //        '<span   onclick="openEditModal(' + khasraId + ')"><i class="fas fa-edit"></i></span>&nbsp;' +
        //        '<span class="text-danger"  onclick="deleteRecord(' + khasraId + ')"><i class="fas fa-trash"></i></span>' +
        //        '</td>' +
        //        '</tr>' +
        //        '</tbody>' +
        //        '</table>';


        //    // Append the new table to the modal body
        //    document.getElementById('newTableContainer').innerHTML = newTableHTML;
        //    document.getElementById('newTableContainer2').innerHTML = newTableHTML2;
        //});

       //  Function to open edit modal and populate it with data
        function openEditModal(khasraId) {
            // Here, you can write your logic to fetch the data of the record with the given Khasra Id and populate the modal input fields
            ////console.log('Editing record with Khasra Id:', khasraId);

            // Populate modal input fields with data of the selected record
            document.getElementById('editKhasraNo').value = ''; // Set the value for Khasra No input field
            document.getElementById('editMurabaNo').value = ''; // Set the value for Muraba No input field
            document.getElementById('editKhasraArea').value = ''; // Set the value for Khasra Area input field

            // Show the modal
            $('#editRecordModal').modal('show');
        }
        // Function to save edited record
        function saveEditedRecord() {
            // Here, you can write your logic to save the edited record by retrieving the values from the modal input fields
            ////console.log('Saving edited record...');
            // Close the modal
            $('#editRecordModal').modal('hide');
        }
        // Function to delete record
        function deleteRecord(khasraId) {
            // Here, you can write your logic to delete the record with the given Khasra Id
            ////console.log('Deleting record with Khasra Id:', khasraId);
        }
        //document.getElementById('plusButton').addEventListener('click', function () {
        //    // Get the select element
        //    var selectWanda = document.getElementById('selectWanda');

        //    // Get the maximum value among the options
        //    var maxValue = 0;
        //    for (var i = 0; i < selectWanda.options.length; i++) {
        //        var optionValue = parseInt(selectWanda.options[i].value);
        //        if (!isNaN(optionValue) && optionValue > maxValue) {
        //            maxValue = optionValue;
        //        }
        //    }

        //    // Set the new value as the maximum value plus one
        //    var newValue = maxValue + 1;

        //    // Create a new option element
        //    var newOption = document.createElement('option');
        //    newOption.value = newValue;
        //    newOption.text = newValue;

        //    // Add the new option to the select element
        //    selectWanda.appendChild(newOption);

        //    // Set the new value as the selected value
        //    selectWanda.value = newValue.toString();
        //});
       
        document.getElementById('plusButton').addEventListener('click', function () {
            // Get the select element
            var selectWanda = document.getElementById('selectWanda');

            // Get the maximum value among the options
            var maxValue = 0;
            for (var i = 0; i < selectWanda.options.length; i++) {
                var optionValue = parseInt(selectWanda.options[i].value);
                if (!isNaN(optionValue) && optionValue > maxValue) {
                    maxValue = optionValue;
                }
            }

            // Set the new value as the maximum value plus one
            var newValue = maxValue + 1;

            // Create a new option element
            var newOption = document.createElement('option');
            newOption.value = newValue;
            newOption.text = newValue;

            // Add the new option to the select element
            selectWanda.appendChild(newOption);

            // Set the new value as the selected value
            selectWanda.value = newValue.toString(); // Convert newValue to string before setting it
           

        });
        function sumKhasraAreas(khasraList) {
            // Initialize total area variable
            var totalArea = 0;
            // Iterate through each object in the array
            khasraList.forEach(function (khasra) {
                // Parse KhasraArea value to integer and add it to totalArea
                totalArea += parseInt(getFeetByArea(khasra.KhasraArea));
                ////console.log("my converted area is::::::::::::::::::::::;;");
                ////console.log(totalArea);
            });
            // Return the total area
            return totalArea;
        }
        function sumOwnerAreas(ownerlist) {
            // Initialize total area variable
            var totalArea = 0;
            // Iterate through each object in the array
            ownerlist.forEach(function (owner) {
                // Parse KhasraArea value to integer and add it to totalArea
                totalArea += parseInt(getFeetByArea(owner.personArea));
                ////console.log("my converted area owners is::::::::::::::::::::::;;");
                ////console.log(totalArea);
            });
            // Return the total area
            return totalArea;
        }
        // Function to handle the hover event and display the converted area in a popup
        function displayConvertedArea(event) {
            // Get the text content of the area element
            const areaText = event.target.textContent.trim();

            // Convert the area to kmf using the sqmTOkmf function
            const areaKmf = sqmTOkmf(parseFloat(areaText));

            // Create a popup element
            const popup = document.createElement('div');
            popup.classList.add('popup' ,'urdu' ,'text-success');
            popup.textContent = `Area (KMF): ${areaKmf}`;

            // Position the popup near the mouse pointer
            popup.style.position = 'absolute';
            popup.style.left = `${event.pageX + 5}px`;
            popup.style.top = `${event.pageY + 5}px`;

            // Append the popup to the body
            document.body.appendChild(popup);

            // Remove the popup when mouse leaves the area element
            event.target.addEventListener('mouseleave', () => {
                document.body.removeChild(popup);
            });
        }
        // Function to display converted area from input
        function displayConvertedAreafrominput(event) {
            // Get the text content of the area element
            const areaText = event.target.value.trim();

            // Convert the area to kmf using the sqmTOkmf function
            const areaKmf = sqmTOkmf(parseFloat(areaText));

            // Create a popup element
            const popup = document.createElement('div');
            popup.classList.add('popup', 'urdu', 'text-success');
            popup.textContent = `Area (KMF): ${areaKmf}`;

            // Position the popup near the mouse pointer
            popup.style.position = 'absolute';
            popup.style.left = `${event.pageX + 5}px`;
            popup.style.top = `${event.pageY + 5}px`;

            // Append the popup to the body
            document.body.appendChild(popup);

            // Remove the popup when mouse leaves the area element
            event.target.addEventListener('mouseleave', () => {
                document.body.removeChild(popup);
            });
        }
        // Add event listeners to the elements containing the area values
        document.getElementById('totalKhewatArea').addEventListener('mouseenter', displayConvertedArea);
        document.getElementById('totalAssignedKhewatArea').addEventListener('mouseenter', displayConvertedArea);
        document.getElementById('TotalAreaWanda').addEventListener('mouseenter', displayConvertedArea);
        document.getElementById('AvailableAreaWanda').addEventListener('mouseenter', displayConvertedArea);

        function validatechecks() {
            if (checkDefault()) {
                // Get selected items from Khasra Selection card
                // var khasraSelectionItems = getSelectedItemsK('dragula-event-right');


                var khasraSelectionItems = getSelectedItemsK('dragula-event-right');

                var sumofallselectedkhasra = sumKhasraAreas(khasraSelectionItems);
                var allareaavaiableforthiskhewat2 = allareaavaiableforthiskhewat();





                // Get selected items from Members Selection card
                var membersSelectionItems = getSelectedItems('dragula-right');

                var sumofallselectedowner = sumOwnerAreas(membersSelectionItems);
                //for owners------
                // var allareaavaiableforthiskhewat2 = allareaavaiableforthiskhewat();
                var totalwandaarea = document.getElementById('AvailableAreaWanda').textContent.trim();

                var myownersum = parseInt(totalwandaarea) + parseInt(sumofallselectedkhasra);
                // alert(myownersum);

                if (allareaavaiableforthiskhewat2 < sumofallselectedkhasra) {
                    Swal.fire({
                        icon: "error",

                        title: '<p class="urdu" style="color:red; font-size:1.2em">منتخب شدہ خسرہ کا رقبہ منتخب کردہ کھیوٹ کے کل رقبے سے زیادہ ہے۔</p>',


                        showConfirmButton: false,
                        timer: 4000,

                        allowOutsideClick: true,

                        //customClass: {
                        //    popup: 'custom-popup-class',
                        //}
                    });

                }

                else if (myownersum < sumofallselectedowner) {
                    Swal.fire({
                        icon: "error",

                        title: '<p class="urdu" style="color:red; font-size:1.2em">منتخب شدہ مالک کا رقبہ منتخب کردہ وانڈے کے دستیاب رقبے سے زیادہ ہے۔</p>',


                        showConfirmButton: false,
                        timer: 4000,

                        allowOutsideClick: true,

                        //customClass: {
                        //    popup: 'custom-popup-class',
                        //}
                    });
                }

                else if (allareaavaiableforthiskhewat2 >= sumofallselectedkhasra && myownersum >= sumofallselectedowner) {
                    // Call the function with the selected items array
                  //  displaySelectedItemsK(khasraSelectionItems);
                  //  displaySelectedItems(membersSelectionItems);

                    //// Display the modal
                  //  var modal = new bootstrap.Modal(document.getElementById('selectedItemsModal'));
                  //  modal.show();
                    // Call the function with the selected items array
                    //SendKhasraToDB(khasraSelectionItems);
                    //SendOwnerToDB(membersSelectionItems);
                    // document.getElementById('khewatSelect').value = ''
                    // onkhewatSelectChange();



                }

                else {
                    Swal.fire({
                        icon: "error",

                        title: '<p class="urdu" style="color:red; font-size:1.2em"> دوبارہ کھیوٹ اور ونڈا منتخب کریں۔</p>',


                        showConfirmButton: false,
                        timer: 4000,

                        allowOutsideClick: true,

                        //customClass: {
                        //    popup: 'custom-popup-class',
                        //}
                    });
                }

                // Output selected items from both cards to console
                ////console.log("Selected items from Khasra Selection:");
                ////console.log(khasraSelectionItems);

                ////console.log("Selected items from Members Selection:");
                ////console.log(membersSelectionItems);


            }
        }
    </script>

</body>


<!-- Mirrored from www.urbanui.com/melody/template/pages/ui-features/dragula.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 15 Sep 2018 06:06:26 GMT -->
</html>
