@extends('layouts.app')

@section('content')
<!-- 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 nav-color">
            <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">
                <input type="text" id="search" placeholder="Search Pll"
                    class="form-search px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:bg-primary">
            </div>

            <!-- Add New Zone button -->
            @can('pll 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 PLL
            </button>
            @endcan
        </div>


        <table id="pll_table" class="divide-y divide-gray-200">
            <thead class="bg-primary form-title">
                <!-- <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">Watercourse</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Created At</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Actions</th> -->

                <tr>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">ID</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">Zone</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">Village</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Beneficiary Name</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">SSC</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Make & Model</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Coordinates</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Financial Year</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Work Order Cancelled</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600 text-mono">Actions</th>
                </tr>

                <!-- </tr> -->
            </thead>
            <tbody class="divide-y divide-gray-200 form-body">

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

<!-- Modal -->
<div id="modal"
    class="zone-model hidden fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">

    <div class="watercourse-form-model modal-content bg-white rounded-lg w-full max-w-3xl max-h-[90vh] overflow-hidden flex flex-col">

        <!-- Modal Header -->
        <div class="modal-header flex justify-between items-center p-4 border-b">
            <h2 id="modalTitle" class="text-lg font-semibold">Pll</h2>
            <button id="closeModal" class="text-xl">✕</button>
        </div>

        <div class="tabs-wrapper">
            <ul id="formTabs" class="tabs-list" style="display:flex;justify-content:center;gap:20px">

                <li class="tab-item">
                    <a href="#" data-step="step1" class="tab-link active">Identification</a>
                </li>

                <li class="tab-item">
                    <a href="#" data-step="step2" class="tab-link">Payment</a>
                </li>
            </ul>
        </div>
        <!-- Modal Body (Scrollable) -->
        <div class="modal-body overflow-y-auto p-4">

            <!-- ===== Scrollable Tabs ===== -->
            <!-- <div class="tabs-wrapper">
                <ul id="formTabs" class="tabs-list">

                    <li class="tab-item">
                        <a href="#" data-step="step1" class="tab-link active">Identification</a>
                    </li>

                    <li class="tab-item">
                        <a href="#" data-step="step2" class="tab-link">Payment</a>
                    </li>
                </ul>
            </div> -->


            <!-- ===== END Tabs ===== -->

            <!-- ===== TAB CONTENT ===== -->
            <form id="pllForm" enctype="multipart/form-data">
                <div id="step1" class="tab-content">

                    <div class="form-row">
                        <label>Status</label>
                        <input id="status" name="status" type="text" placeholder="Under Progress" value="Under Progress" readonly>
                    </div>

                    <div class="form-row">
                        <label>Zone*</label>
                        <select id="zoneSelect" name="zone_id" required></select>
                    </div>

                    <div class="form-row">
                        <label>Division*</label>
                        <select id="divisionSelect" name="division_id" required></select>
                    </div>

                    <div class="form-row">
                        <label>District*</label>
                        <select id="districtSelect" name="district_id" required></select>
                    </div>

                    <div class="form-row">
                        <label>Tehsil*</label>
                        <select id="tehsilSelect" name="tehsil_id" required></select>
                    </div>

                    <div class="form-row">
                        <label>Village*</label>
                        <input name="village" id="village" type="text" placeholder="" required>
                    </div>

                    <div class="form-row">
                        <label>Beneficiary Name*</label>
                        <input name="beneficiary_name" id="beneficiary_name" type="text" placeholder="" required>
                    </div>

                    <div class="form-row">
                        <label>Father Name</label>
                        <input name="father_name" id="father_name" type="text" placeholder="" required>
                    </div>

                    <div class="form-row">
                        <label>Cnic No.</label>
                        <input name="cnic_no" id="cnic_no" type="number" placeholder="0" required>
                    </div>

                    <div class="form-row">
                        <label>Contact No.</label>
                        <input name="contact_no" id="contact_no" type="number" placeholder="0" required>
                    </div>

                    <div class="form-row">
                        <label>Name of SSC*</label>
                        <input name="ssc" id="ssc" type="text" placeholder="" required>

                        <!-- <select name="ssc" id="ssc" class="col-span-2 border p-2 rounded w-full">
                            <option value="">Select SSC</option>
                            <option value="Cross Field Agro">Cross Field Agro</option>
                            <option value="Haji&Sons International">Haji&Sons International</option>
                            <option value="MOdern Farming Laser">MOdern Farming Laser</option>
                            <option value="Next Level">Next Level</option>
                            <option value="Ruba Digital">Ruba Digital</option>
                        </select> -->
                    </div>

                    <div class="form-row">
                        <label>Make & Model*</label>
                        <input name="make_model" id="make_model" type="text" placeholder="" required>
                    </div>

                    <div class="form-row">
                        <label>Coordinates</label>
                        <input name="coordinates" id="coordinates" type="text" placeholder="" required>
                    </div>

                    <div class="form-row">
                        <label>Picture of PLL</label>
                        <input name="picture" type="file" id="pictureInput">
                    </div>

                    <div class="form-row">
                        <label>Financial Year</label>
                        <select name="financial_year" id="financial_year" required>
                            <option value="">Select Year</option>
                            <option value="2024-25">2024-25</option>
                            <option value="2023-24">2023-24</option>
                            <option value="2022-23">2022-23</option>
                            <option value="2021-22">2021-22</option>
                            <option value="2020-21">2020-21</option>
                            <option value="2019-20">2019-20</option>
                        </select>
                    </div>

                    <div class="form-row">
                        <label>Comment</label>
                        <input name="comment" id="comment" type="text" placeholder="">
                    </div>

                    <label id="completedWrapper" class="hidden">
                        <span>Completed</span>
                        <input name="work_order_cancelled" id="work_order_cancelled" type="checkbox" value="1">
                    </label>

                </div>

                <div id="step2" class="tab-content">
                    <!-- <label class="option-line mb-2">PLL Payments:Dir:DD</label> -->

                    <div class="form-row">
                        <label>Total Unit Cost(Rs.)*</label>
                        <input name="total_unit_cost" id="total_unit_cost" type="number" placeholder="0">
                    </div>

                    <div class="form-row">
                        <label>Govt Share(Rs.)</label>
                        <input name="govt_share" id="govt_share" type="number" placeholder="0">
                    </div>

                    <div class="form-row">
                        <label>Farmer Share(Rs.)</label>
                        <input name="farmer_share" id="farmer_share" type="number" placeholder="0">
                    </div>

                    <div class="form-row">
                        <label>Delivery Date</label>
                        <input name="delivery_date" id="delivery_date" type="date">
                    </div>

                    <div class="form-row">
                        <label>Payment Status</label>
                        <input name="payment_status" id="payment_status" type="text" placeholder="">
                    </div>
                </div>

                <div class="modal-footer flex justify-end gap-2 p-4 border-t">
                    <button id="cancelBtn" type="button" class="px-4 py-2 bg-gray-400 rounded">Cancel</button>
                    <button id="prevBtn" type="button" class="px-4 py-2 bg-gray-300 rounded hidden">Previous</button>
                    <button id="nextBtn" type="button" class="px-4 py-2 bg-primary text-white rounded hidden">Next</button>
                    <button id="submitBtn" type="submit" class="px-4 py-2 bg-green-600 text-white rounded hidden">Submit</button>

                </div>
            </form>

        </div>
    </div>



    @endsection

    @section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    @vite('resources/js/admin-forms/admin-pll.js')
    @endsection

    </rewritten_file>