@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">Plot to Plot Planning</h2>
            </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">State</th>
                        <th  class="bg-info text-white">District</th>
                        <th  class="bg-info text-white">Block</th>
                        <th  class="bg-info text-white">Watetshed Name</th>
                        <th  class="bg-info text-white">Watershed Code</th>
                        <th  class="bg-info text-white" colspan="3">Action</th>
                    </tr>
                </thead>


                State 



                <tbody>
                    {{-- Data will come from controller --}}
                    @forelse($householdSurveys ?? [] as $survey)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $survey->state ?? '-' }}</td>
                            <td>{{ $survey->district_name }}</td>
                            <td>{{ $survey->block_name }}</td>
                    
                            <td>{{ $survey->watershed_name  ?? '-' }}</td>
                            <td>{{ $survey->micro_watershed_code  ?? '-' }}</td>
                            

                            
                            
                        <td class="text-center">
                            @if(!empty($survey->netPlanningExists)) {{-- check if Net Planning data exists --}}
                                <a href="{{ route('watershed.net-planning.show', $survey->netPlanningId) }}" 
                                class="badge bg-success text-decoration-none">
                                    Added
                                </a>
                            @else
                                <a href="{{ route('watershed.net-planning.create', $survey->id) }}" 
                                    class="btn btn-sm btn-info">
                                    Add
                                    </a>
                            @endif
                        </td>

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

                            <td>
                                <form action="{{ route('watershed.net-planning.destroy', $survey->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="12" class="text-center">No records found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>

            {{-- Pagination --}}
            <div class="mt-3">
        
            </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