@extends('layouts.main')

@section('main-container')
<div class="container-xl">

    {{-- Page Header --}}
    <div class="page-header d-print-none mb-3">
        <div class="row align-items-center">
            <div class="col">
                <h2 class="page-title">Net Planning</h2>
            </div>
            <div class="col-auto">
                <a href="{{ route('watershed.net-planning.create') }}" class="btn btn-primary">
                    ➕ Add Planning
                </a>
            </div>
        </div>
    </div>

    {{-- Success Message --}}
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    {{-- Search Form --}}
    <div class="card mb-3">
        <div class="card-body">
            <form method="GET" class="row g-2 mb-3">

                {{-- District --}}
                <div class="col-md-2">
                    <label class="form-label">District</label>
                    <select name="district_id" id="district_id" class="form-select" required>
                        <option value="">Select District</option>
                        @foreach ($districts as $district)
                            <option value="{{ $district->id }}" 
                                {{ request('district_id') == $district->id ? 'selected' : '' }}>
                                {{ $district->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Block --}}
                <div class="col-md-2">
                    <label class="form-label">Block</label>
                    <select name="block_id" id="block_id" class="form-select" required>
                        <option value="">Select Block</option>
                    </select>
                </div>

                {{-- Panchayat --}}
                <div class="col-md-2">
                    <label class="form-label">Panchayat</label>
                    <select name="panchayat_id" id="panchayat_id" class="form-select">
                        <option value="">Select Panchayat</option>
                    </select>
                </div>

                {{-- Village --}}
                <div class="col-md-2">
                    <label class="form-label">Village</label>
                    <select name="village_id" id="village_id" class="form-select">
                        <option value="">Select Village</option>
                    </select>
                </div>

                {{-- Watershed Code (Multiple codes possible) --}}
                <div class="col-md-2">
                    <label class="form-label">Watershed Code</label>
                    <select name="watershed_code" id="watershed_code" class="form-select">
                        <option value="">--Select Watershed Code--</option>
                    </select>
                </div>

                {{-- Buttons --}}
                <div class="col-md-2 d-flex flex-column gap-2">
                    <label class="form-label mb-0">Search</label>
                    <button type="submit" class="btn btn-primary w-100">🔍 Search</button>
                </div>

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

    {{-- Table --}}
    <div class="card">
        <div class="card-body table-responsive p-0">
            <table class="table table-bordered table-striped align-middle">
                <thead class="bg-primary-lt text-center">
                    <tr>
                        <th class="bg-info text-white">#</th>
                        <th  class="bg-info text-white">District</th>
                        <th  class="bg-info text-white">Block</th>
                        <th  class="bg-info text-white">Panchayat</th>
                        <th  class="bg-info text-white">Village</th>
                        <th  class="bg-info text-white">M.W - Code</th>
                        <th  class="bg-info text-white">Present Land Use</th>
                    
                        <th  class="bg-info text-white">F.Size</th>
                        
                        <th  class="bg-info text-white" colspan="3">Action</th>
                    </tr>
                </thead>
                <tbody>
@forelse($NetPlanning ?? [] as $planning)
    <tr>
        <td class="text-center">{{ $NetPlanning->firstItem() + $loop->index }}</td>
        <td class="text-center">{{ $planning->district->name?? '-' }}</td>
        <td class="text-center">{{ $planning->block->name ?? '-' }}</td>
        <td class="text-center">{{ $planning->panchayat->name ?? '-' }}</td>
        <td class="text-center">{{ $planning->village->name ?? '-' }}</td>
        <td class="text-center">{{ $planning->micro_watershed_code ?? '-' }}</td>
        <td class="text-center">{{ $planning->present_land_use ?? '-' }}</td>
        <td class="text-center">{{ $planning->category ?? '-' }}</td>
        
        

        <td>
            <a href="{{ route('watershed.net-planning.show', $planning->id) }}" 
               class="btn btn-sm btn-success">
               Show
            </a>
        </td>

        <td>
           <a href="{{ route('watershed.whs.create', ['household_survey_id' => $planning->id,
            'netplanning_id' => $planning->id]) }}" class="btn btn-sm btn-success">
                    Add
            </a>


        </td>

        <td>
            <form action="{{ route('watershed.net-planning.destroy', $planning->id) }}" 
                  method="POST" 
                  onsubmit="return confirm('Are you sure?');">
                @csrf
                @method('DELETE')
                <button class="btn btn-sm btn-danger">Delete</button>
            </form>
        </td>
    </tr>
@empty
    <tr>
        <td colspan="13" class="text-center">No records found.</td>
    </tr>
@endforelse
</tbody>
            </table>

            {{-- Pagination --}}
            <div class="mt-3">
                {{ $NetPlanning->links() ?? '' }}
            </div>
        </div>
    </div>

</div>

{{-- AJAX Scripts --}}
<script>
$(document).ready(function () {

    function capitalize(text) {
        return text.toLowerCase().replace(/\b\w/g, l => l.toUpperCase());
    }

    // District → Block
    $('#district_id').on('change', function () {
        let districtId = $(this).val();
        $('#block_id, #panchayat_id, #village_id, #watershed_code').html('<option value="">Select</option>');

        if (!districtId) return;

        $.getJSON(`/geo/get-blocks/${districtId}`, function (data) {
            data.forEach(block => {
                $('#block_id').append(`<option value="${block.id}">${capitalize(block.name)}</option>`);
            });
        });
    });

    // Block → Panchayat
    $('#block_id').on('change', function () {
        let blockId = $(this).val();
        $('#panchayat_id, #village_id, #watershed_code').html('<option value="">Select</option>');

        if (!blockId) return;

        $.getJSON(`/geo/get-panchayats/${blockId}`, function (data) {
            data.forEach(p => {
                $('#panchayat_id').append(`<option value="${p.id}">${capitalize(p.name)}</option>`);
            });
        });
    });

    // Panchayat → Village
    $('#panchayat_id').on('change', function () {
        let panchayatId = $(this).val();
        $('#village_id, #watershed_code').html('<option value="">Select</option>');

        if (!panchayatId) return;

        $.getJSON(`/geo/get-villages/${panchayatId}`, function (data) {
            data.forEach(v => {
                $('#village_id').append(`<option value="${v.id}">${capitalize(v.name)}</option>`);
            });
        });
    });

    // Village → Watershed Codes
    $('#village_id').on('change', function () {
        let districtId  = $('#district_id').val();
        let blockId     = $('#block_id').val();
        let panchayatId = $('#panchayat_id').val();
        let villageId   = $(this).val();

        $('#watershed_code').html('<option value="">Loading...</option>');

        if (!districtId || !blockId || !villageId) return;

        $.ajax({
            url: "{{ url('/watershed/get-code') }}",
            type: "GET",
            data: {
                district_id: districtId,
                block_id: blockId,
                panchayat_id: panchayatId,
                village_id: villageId
            },
            success: function (res) {
                let options = '<option value="">--Select Watershed Code--</option>';
                if(res.codes && res.codes.length > 0){
                    res.codes.forEach(code => {
                        options += `<option value="${code}">${code}</option>`;
                    });
                } else {
                    options = '<option value="">No Watershed Codes Found</option>';
                }
                $('#watershed_code').html(options);
            }
        });
    });

});
</script>

@endsection