@extends('layouts.app')

@section('content')
<div id="loading-overlay">
    <div class="spinner"></div>
</div>
    <!-- Inner Navbar -->
    <div class="flex items-stretch lg:fixed z-5 top-(--header-height) start-(--sidebar-width) end-5 h-(--navbar-height) mx-5 lg:mx-0 bg-muted"
        id="navbar">
        <div class="rounded-t-xl border border-input border-b-input bg-background filter-container flex items-stretch grow">
            <!-- Container -->
            <div class="kt-container-fluid flex justify-center items-stretch gap-5">
                <div class="grid items-stretch">
                    <div class="kt-scrollable-x-auto flex items-stretch">
                        <div class="kt-menu gap-5 lg:gap-7.5" data-kt-menu="true">
                            @include('includes.admin-forms-navbar')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End of Inner Navbar -->

    <!-- Container -->
    <div class="kt-container-fluid">
        <div class="grid mb-5">
            <div class="flex justify-between items-center">
                <!-- Search Box on Left -->
                  <div id="customSearch" class="flex items-center gap-2">
                     <select id="pageLengthSelect" class="border px-2 py-2 rounded-md">
                        <option value="10" selected>10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                    </select>
                    <input type="text" id="search" placeholder="Search Solarization"
                        class="px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:bg-primary">
                </div>

                <!-- Add New Zone button -->
                @can('solarization of agricultural tube wells create')
                <button type="button" id="openModal"
                class="export-btn flex items-center gap-2 px-4 py-2 text-black font-semibold rounded-lg shadow-sm hover:shadow-md transition-all duration-200">
                + Add New SOLARIZATION OF TUBEWELL
            </button>
            @endcan
            </div>


            <table id="sat_table" class="divide-y divide-gray-200">
                <thead class="bg-primary">
                    <tr>
                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">SR.</th>
                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Status</th>
                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Activity</th>
                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Division</th>
                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">District</th>
                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Tehsil</th>
                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Farmer Name</th>
                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200"> 

                </tbody>
            </table>
        </div>
    </div>
    <!-- End of Container -->

    <!-- Modal -->
    <div id="modal" class="model hidden">
        <div class="modal-content kt-scrollable-y-auto">
            <!-- Modal Header -->
            <div class="modal-header ">
                <h2 id="modalTitle">solarization of tubewell</h2>
                <button id="closeModal">✕</button>
            </div>

            <!-- Modal Body -->
        <div class="modal-body space-y-3">
        <input type="hidden" id="satId" name="sat_id">
 <!-- Status -->
    <div class="grid grid-cols-3 items-center gap-4">
        <label for="status" class="col-span-1 text-left">Status</label>
        <input id="status" type="text" placeholder="In Process"
               class="col-span-2 border p-2 rounded w-full" readonly>
    </div>

    <!-- Activity -->
    <div class="grid grid-cols-3 items-center gap-4">
        <label for="activity" class="col-span-1 text-left">Activity</label>
        <input id="activity" type="text" placeholder="Solarization of Tube Well"
               class="col-span-2 border p-2 rounded w-full" readonly>
    </div>
     <div class="grid grid-cols-3 items-center gap-4">
        <label class="col-span-1 text-left">STW ID</label>
        <input id="stwID" type="text"
               class="col-span-2 border p-2 rounded w-full">
    </div>

<div class="grid grid-cols-3 items-center gap-4 mb-3">
    <label class="col-span-1 text-left">Division*</label>
    <select id="division_id"
            class="select2 col-span-2 border p-2 rounded w-full">
        <option value="">Select Division</option>
    </select>
</div>

<div id="district-wrapper" class="grid grid-cols-3 items-center gap-4 mb-3 hidden">
    <label>District*</label>
    <select id="district_id" class="select2 border p-2 rounded w-full">
        <option value="">Select District</option>
    </select>
</div>

<div id="tehsil-wrapper" class="grid grid-cols-3 items-center gap-4 mb-3 hidden">
    <label>Tehsil*</label>
    <select id="tehsil_id" class="select2 border p-2 rounded w-full">
        <option value="">Select Tehsil</option>
    </select>
</div>


    <!-- Village -->
    <div class="grid grid-cols-3 items-center gap-4">
        <label for="village" class="col-span-1 text-left">Village</label>
        <input id="village" type="text"
               class="col-span-2 border p-2 rounded w-full">
    </div>

    <!-- Village Council -->
    <div class="grid grid-cols-3 items-center gap-4">
        <label for="villageCouncil" class="col-span-1 text-left">Village Council</label>
        <input id="villageCouncil" type="text"
               class="col-span-2 border p-2 rounded w-full">
    </div>

    <!-- Farmer Name -->
    <div class="grid grid-cols-3 items-center gap-4">
        <label for="farmerName" class="col-span-1 text-left">Farmer Name*</label>
        <input id="farmerName" type="text"
               class="col-span-2 border p-2 rounded w-full">
    </div>

       <!-- CNIC No -->
    <div class="grid grid-cols-3 items-center gap-4">
        <label for="cnic" class="col-span-1 text-left">CNIC No</label>
        <input id="cnic" type="text" placeholder="xxxxx-xxxxxxx-x"
            class="col-span-2 border p-2 rounded w-full"
            pattern="\d{5}-\d{7}-\d{1}" title="Format: 12345-1234567-1" maxlength="15">
    </div>

    <!-- Contact No -->
    <div class="grid grid-cols-3 items-center gap-4">
        <label for="contact" class="col-span-1 text-left">Contact No</label>
        <input id="contact" type="text" placeholder="03xx-xxxxxxx"
            class="col-span-2 border p-2 rounded w-full"
            pattern="03\d{2}-\d{7}" title="Format: 03xx-xxxxxxx" maxlength="12">
    </div>

    <!-- Coordinate -->
    <div class="grid grid-cols-3 items-center gap-4">
        <label for="coordinate" class="col-span-1 text-left">Coordinate</label>
        <input id="coordinate" type="text"
               class="col-span-2 border p-2 rounded w-full">
    </div>
      <div class="grid grid-cols-3 items-center gap-4">
        <label for="totalirrigated" class="col-span-1 text-left">Total Irrigated Area (Acres)</label>
        <input id="totalirrigated" type="number" placeholder="8646"
               class="col-span-2 border p-2 rounded w-full">
    </div>
    <div class="grid grid-cols-3 items-center gap-4">
        <label class="col-span-1 text-left">EstablishmentTube of Tube Well By</label>
        <input id="estabTubeWell" type="number" placeholder="DWE"
               class="col-span-2 border p-2 rounded w-full">
    </div>
    <div class="grid grid-cols-3 items-center gap-4 mb-3">
    <label class="col-span-1 text-left">Well Type</label>
    <select id="wellType" class="select2 col-span-2 border p-2 rounded w-full">
        <option value="">Select Well Type</option>
       
    </select>
</div>
     <div class="grid grid-cols-3 items-center gap-4">
        <label class="col-span-1 text-left">Diameter of Tube Well</label>
        <input id="DiaOfTubeWell" type="number" placeholder="0"
               class="col-span-2 border p-2 rounded w-full">
    </div>
     <div class="grid grid-cols-3 items-center gap-4">
        <label class="col-span-1 text-left">Category of Scheme</label>
        <input id="categoryOfScheme" type="number" placeholder="0"
               class="col-span-2 border p-2 rounded w-full">
    </div>
     <div class="grid grid-cols-3 items-center gap-4">
        <label  class="col-span-1 text-left">Depth of Water Table</label>
        <input id="TubewellDepth" type="number" placeholder="0"
               class="col-span-2 border p-2 rounded w-full">
    </div>
    <div class="grid grid-cols-3 items-center gap-4">
        <label  class="col-span-1 text-left">Total depth of Tube Well</label>
        <input id="TotalTubewellDepth" type="number" placeholder="0"
               class="col-span-2 border p-2 rounded w-full">
    </div>
    <div class="grid grid-cols-3 items-center gap-4">
        <label  class="col-span-1 text-left">Installed Pumping System (HP)</label>
        <input id="pumpingSystem" type="number" placeholder="0"
               class="col-span-2 border p-2 rounded w-full">
    </div>
        <div class="grid grid-cols-3 items-center gap-4">
        <label  class="col-span-1 text-left">Discharge (LPS)</label>
        <input id="Discharge" type="number" placeholder="0"
               class="col-span-2 border p-2 rounded w-full">
    </div>
   <div class="grid grid-cols-3 items-center gap-4 mb-3">
    <label class="col-span-1 text-left">Financial Year*</label>
    <select id="financialYear" class="select2 col-span-2 border p-2 rounded w-full">
       <option value="">Select Financial Year</option>
        <option value="2019-2020">2019-2020</option>
        <option value="2020-2021">2020-2021</option>
        <option value="2021-2022">2021-2022</option>
        <option value="2022-2023">2022-2023</option>
        <option value="2023-2024">2023-2024</option>
        <option value="2024-2025">2024-2025</option>
    </select>
</div>
 <div class="grid grid-cols-3 items-center gap-4">
        <label class="col-span-1 text-left">Sactioned Amount of TS (RS)</label>
        <input id="sactionedAmount" type="date" placeholder="0"
               class="col-span-2 border p-2 rounded w-full">
    </div>
    <div class="grid grid-cols-3 items-center gap-4">
        <label class="col-span-1 text-left">Date of Approval of Scheme</label>
        <input id="dateOfApproval"  type="date" placeholder="0"
               class="col-span-2 border p-2 rounded w-full">
    </div>
 <div class="grid grid-cols-3 items-center gap-4">
        <label for="Affidative Signed" class="col-span-1 text-left">Solarization of Tube Well*</label>
        <div class="flex gap-6 items-center">
  <label class="flex items-center gap-2">
    <input type="radio" name="answer" value="yes" class="w-4 h-4">
    <span>Yes</span>
  </label>
  <label class="flex items-center gap-2">
    <input type="radio" name="answer" value="no" class="w-4 h-4">
    <span>No</span>
  </label>
</div>
    </div>
     <div class="grid grid-cols-3 items-center gap-4">
        <label class="col-span-1 text-left">Date of Farmer Share (Demand Draft)</label>
        <input  type="date" id="FarmerShareDate"
               class="col-span-2 border p-2 rounded w-full">
    </div>
     <div class="grid grid-cols-3 items-center gap-4">
        <label  class="col-span-1 text-left">Total Cost of Tube Well(RS)*</label>
        <input type="number" placeholder="0" id="totalCostOFTubewell"
               class="col-span-2 border p-2 rounded w-full">
    </div>
    <div class="grid grid-cols-3 items-center gap-4">
        <label  class="col-span-1 text-left">Govt. Share*</label>
        <input type="number" placeholder="0" id="GovtShare"
               class="col-span-2 border p-2 rounded w-full">
    </div>
     <div class="grid grid-cols-3 items-center gap-4">
        <label  class="col-span-1 text-left">Former Share*</label>
        <input type="number" placeholder="0" id="FormerShare"
               class="col-span-2 border p-2 rounded w-full">
    </div>
    <div class="grid grid-cols-3 items-center gap-4">
        <label class="col-span-1 text-left">Date of Work Order*</label>
        <input  type="date" id="DateOfWorkOrder"
               class="col-span-2 border p-2 rounded w-full">
    </div>
             <div class="grid grid-cols-3 items-center gap-4">
        <label class="col-span-1 text-left">Commencement Date</label>
        <input  type="date" id="commencementDate"
               class="col-span-2 border p-2 rounded w-full">
    </div>
           <div class="grid grid-cols-3 items-center gap-4">
        <label class="col-span-1 text-left">Date of Commisioning </label>
        <input  type="date" id="CommisioningDate"
               class="col-span-2 border p-2 rounded w-full">
    </div>
          <div class="grid grid-cols-3 items-center gap-4">
        <label  class="col-span-1 text-left">Number of Solar Panel Installed</label>
        <input type="number" placeholder="0" id="solarPanel"
               class="col-span-2 border p-2 rounded w-full">
    </div>
        <div class="grid grid-cols-3 items-center gap-4">
        <label  class="col-span-1 text-left">Watts Produced</label>
        <input type="number" placeholder="0" id="watts"
               class="col-span-2 border p-2 rounded w-full">
    </div>
        <div class="grid grid-cols-3 items-center gap-4">
        <label  class="col-span-1 text-left">Total Verified Cost</label>
        <input type="number" placeholder="0" id="totalVerifiedCost"
               class="col-span-2 border p-2 rounded w-full">
    </div>
        <div class="grid grid-cols-3 items-center gap-4">
        <label  class="col-span-1 text-left">Govt. Share Verified</label>
        <input type="number" placeholder="0" id="verifiedGovtShare"
               class="col-span-2 border p-2 rounded w-full">
    </div>
        <div class="grid grid-cols-3 items-center gap-4">
        <label  class="col-span-1 text-left">Farmer Share Verified</label>
        <input type="number" placeholder="0" id="verifiedFormerShare"
               class="col-span-2 border p-2 rounded w-full">
    </div>
    <div class="grid grid-cols-3 items-center gap-4">
        <label class="col-span-1 text-left">Date of FCR*</label>
        <input  type="date" id="dateFCR"
               class="col-span-2 border p-2 rounded w-full">
    </div>
    <div class="grid grid-cols-3 items-center gap-4">
        <label class="col-span-1 text-left">Date of Verified by Consultants*</label>
        <input  type="date" id="consultantVerifiedDate"
               class="col-span-2 border p-2 rounded w-full">
    </div>
   
</div>
            <!-- Modal Footer -->
            <div class="modal-footer">
                <button id="cancel">Cancel</button>
                <button id="saveBtn">Submit</button>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    @vite('resources/js/admin-forms/solarization-of-tubewell.js')
@endsection

</rewritten_file>