@extends('layouts.usermain')

@section('main-container')
<div class="container-xl my-4">
    <div class="page-header d-print-none">
        <div class="row g-2 align-items-center">
            <div class="col">
                <h2 class="page-title">Edit Well Monitoring</h2>
            </div>
        </div>
    </div>

    @if (session('success'))
        <div id="success-message" class="alert alert-success">
            {{ session('success') }}
        </div>
        <script>
            setTimeout(function() {
                const el = document.getElementById('success-message');
                if (el) el.style.display = 'none';
            }, 5000);
        </script>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach ($errors->all() as $err)
                    <li>{{ $err }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card">
        <div class="card-header bg-info">
            <h4 class="card-title text-white">Edit Well</h4>
        </div>

        <div class="card-body">
            <form action="{{ route('well_monitorings.update', $well->id) }}" method="POST" novalidate>
                @csrf
                @method('PUT')

                <div class="row gx-3 gy-2">

                    {{-- Unit --}}
                    <div class="row mb-3 w-100">
    <div class="col-md-3 d-flex align-items-center">
        <label class="form-label mb-0">Unit</label>
    </div>
    <div class="col-md-9">
        <input type="text" class="form-control" 
               value="{{ optional($well->unit)->name ?? ($unit->name ?? '') }}" readonly>

        {{-- keep the id in a hidden field so it submits --}}
        <input type="hidden" name="unit_id" value="{{ old('unit_id', $well->unit_id) }}">
    </div>
</div>

                    {{-- State --}}
                   {{-- State --}}
<div class="row mb-3 w-100">
    <div class="col-md-3 d-flex align-items-center">
        <label class="form-label required mb-0">State Name:</label>
    </div>
    <div class="col-md-9">
        <input type="text" class="form-control"
               value="{{ optional($well->state)->name ?? ($state->name ?? '') }}" readonly>

        {{-- keep the id for form submit --}}
        <input type="hidden" name="state_id" value="{{ old('state_id', $well->state_id) }}">
    </div>
</div>

{{-- District --}}
<div class="row mb-3 w-100">
    <div class="col-md-3 d-flex align-items-center">
        <label class="form-label required mb-0">District Name:</label>
    </div>
    <div class="col-md-9">
        <input type="text" class="form-control"
               value="{{ optional($well->district)->name ?? ($districts->name ?? '') }}" readonly>

        {{-- keep the id for form submit --}}
        <input type="hidden" name="district_id" value="{{ old('district_id', $well->district_id) }}">
    </div>
</div>

                    {{-- Block --}}
                    <div class="row mb-3 w-100">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label required mb-0">Block Name:</label>
                        </div>
                        <div class="col-md-9">
                            <select name="block_id" id="block_id" class="form-control" required>
                                <option value="">--Select Block--</option>
                                @if(isset($blocks))
                                    @foreach($blocks as $block)
                                        <option value="{{ $block->id }}" {{ (old('block_id', $well->block_id) == $block->id) ? 'selected' : '' }}>
                                            {{ $block->name }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>

                    {{-- Panchayat --}}
                    <div class="row mb-3 w-100">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label required mb-0">Panchayat Name:</label>
                        </div>
                        <div class="col-md-9">
                            <select name="panchayat_id" id="panchayat_id" class="form-control" required>
                                <option value="">--Select Panchayat--</option>

                                {{-- If controller passed panchayats collection, populate; else try to show selected --}}
                                @if(isset($panchayats) && $panchayats->count())
                                    @foreach($panchayats as $p)
                                        <option value="{{ $p->id }}" {{ (old('panchayat_id', $well->panchayat_id) == $p->id) ? 'selected' : '' }}>
                                            {{ $p->name }}
                                        </option>
                                    @endforeach
                                @elseif(isset($well->panchayat_id))
                                    {{-- fallback show the related name if available --}}
                                    <option value="{{ $well->panchayat_id }}" selected>
                                        {{ optional($well->panchayat)->name ?? 'Selected Panchayat' }}
                                    </option>
                                @endif
                            </select>
                        </div>
                    </div>

                    {{-- Village --}}
                    <div class="row mb-3 w-100">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label required mb-0">Village Name:</label>
                        </div>
                        <div class="col-md-9">
                            <select name="village_id" id="village_id" class="form-control" required>
                                <option value="">--Select Village--</option>

                                @if(isset($villages) && $villages->count())
                                    @foreach($villages as $v)
                                        <option value="{{ $v->id }}" {{ (old('village_id', $well->village_id) == $v->id) ? 'selected' : '' }}>
                                            {{ $v->name }}
                                        </option>
                                    @endforeach
                                @elseif(isset($well->village_id))
                                    <option value="{{ $well->village_id }}" selected>
                                        {{ optional($well->village)->name ?? 'Selected Village' }}
                                    </option>
                                @endif
                            </select>
                        </div>
                    </div>

                    {{-- Date of Survey --}}
                    <div class="row mb-3 w-100">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label required mb-0">Date of Survey:</label>
                        </div>
                        <div class="col-md-9">
                            <input type="date" name="date_of_survey" value="{{ old('date_of_survey', optional($well)->date_of_survey ? $well->date_of_survey->format('Y-m-d') : '') }}" class="form-control" placeholder="Enter Date" required>
                        </div>
                    </div>

                    {{-- Financial Year select --}}
                    <div class="row mb-3 w-100">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label required mb-0">Year of Baseline Survey:</label>
                        </div>
                        <div class="col-md-9">
                            <select id="financial_year_id" name="financial_year_id" class="form-control" required>
                                <option value="">--Financial Year--</option>
                                @if(isset($financialyears))
                                    @foreach($financialyears as $fy)
                                        <option value="{{ $fy->id }}" {{ (old('financial_year_id', $well->financial_year_id) == $fy->id) ? 'selected' : '' }}>
                                            {{ $fy->name ?? $fy->display_name ?? $fy->start_year }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>

                    {{-- Micro Watershed Code --}}
                    <div class="row mb-3 w-100">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label mb-0">Micro Watershed Code</label>
                        </div>
                        <div class="col-md-9">
                            <input type="text" name="micro_watershed_code" value="{{ old('micro_watershed_code', $well->micro_watershed_code) }}" class="form-control">
                        </div>
                    </div>

                    {{-- Financial Year numeric (optional) --}}
                    <div class="row mb-3 w-100">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label mb-0">Financial Year (numeric)</label>
                        </div>
                        <div class="col-md-9">
                            <input type="number" name="financial_year" value="{{ old('financial_year', $well->financial_year) }}" class="form-control" min="2000" max="2100">
                        </div>
                    </div>

                    {{-- Name of Beneficiary --}}
                    <div class="row mb-3 w-100">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label required mb-0">Name of Beneficiary</label>
                        </div>
                        <div class="col-md-9">
                            <input type="text" name="name_of_beneficiary" value="{{ old('name_of_beneficiary', $well->name_of_beneficiary) }}" class="form-control" required>
                        </div>
                    </div>

                    {{-- Location --}}
                    <div class="row mb-3 w-100">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label required mb-0">Location</label>
                        </div>
                        <div class="col-md-9">
                            <select name="location" id="location" class="form-control" required>
                                <option value="">Select</option>
                                <option value="Upland" {{ (old('location', $well->location) == 'Upland') ? 'selected' : '' }}>Upland</option>
                                <option value="Medium Land" {{ (old('location', $well->location) == 'Medium Land') ? 'selected' : '' }}>Medium Land</option>
                                <option value="Low Land" {{ (old('location', $well->location) == 'Low Land') ? 'selected' : '' }}>Low Land</option>
                            </select>
                        </div>
                    </div>

                    {{-- Latitude & Longitude --}}
                    <div class="row mb-3 w-100">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label mb-0">Latitude</label>
                        </div>
                        <div class="col-md-3">
                            <input type="text" name="latitude" value="{{ old('latitude', $well->latitude) }}" class="form-control">
                        </div>

                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label mb-0">Longitude</label>
                        </div>
                        <div class="col-md-3">
                            <input type="text" name="longitude" value="{{ old('longitude', $well->longitude) }}" class="form-control">
                        </div>
                    </div>

                    {{-- Plot No --}}
                    <div class="row mb-3 w-100">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label mb-0">Plot No</label>
                        </div>
                        <div class="col-md-9">
                            <input type="text" name="plot_no" value="{{ old('plot_no', $well->plot_no) }}" class="form-control">
                        </div>
                    </div>

                    {{-- Depth & Diameter --}}
                    <div class="row mb-3 w-100">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label mb-0">Depth of Well (mt from GL)</label>
                        </div>
                        <div class="col-md-3">
                            <input type="number" step="0.01" name="depth_of_well" value="{{ old('depth_of_well', $well->depth_of_well) }}" class="form-control">
                        </div>

                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label mb-0">Diameter of Well (mt)</label>
                        </div>
                        <div class="col-md-3">
                            <input type="number" step="0.01" name="dia_of_well" value="{{ old('dia_of_well', $well->dia_of_well) }}" class="form-control">
                        </div>
                    </div>

                    {{-- Quarterly readings --}}
                    <div class="row mb-3 w-100">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label mb-0">First Quarter</label>
                        </div>
                        <div class="col-md-3">
                            <input type="number" step="0.01" name="first_quarter" id="first_quarter" value="{{ old('first_quarter', $well->first_quarter) }}" class="form-control">
                        </div>

                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label mb-0">Second Quarter</label>
                        </div>
                        <div class="col-md-3">
                            <input type="number" step="0.01" name="second_quarter" id="second_quarter" value="{{ old('second_quarter', $well->second_quarter) }}" class="form-control">
                        </div>
                    </div>

                    <div class="row mb-3 w-100">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label mb-0">Third Quarter</label>
                        </div>
                        <div class="col-md-3">
                            <input type="number" step="0.01" name="third_quarter" id="third_quarter" value="{{ old('third_quarter', $well->third_quarter) }}" class="form-control">
                        </div>

                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label mb-0">Fourth Quarter</label>
                        </div>
                        <div class="col-md-3">
                            <input type="number" step="0.01" name="fourth_quarter" id="fourth_quarter" value="{{ old('fourth_quarter', $well->fourth_quarter) }}" class="form-control">
                        </div>
                    </div>

                    {{-- Average --}}
                    <div class="row mb-3 w-100">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label mb-0">Average</label>
                        </div>
                        <div class="col-md-9">
                            <input type="number" step="0.01" name="average" id="average" value="{{ old('average', $well->average) }}" class="form-control" readonly>
                        </div>
                    </div>

                    {{-- Status --}}
                    <div class="row mb-3 w-100">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label mb-0">Status</label>
                        </div>
                        <div class="col-md-9">
                            <select name="status" id="status" class="form-control">
                                <option value="Active" {{ (old('status', $well->status) == 'Active') ? 'selected' : '' }}>Active</option>
                                <option value="Inactive" {{ (old('status', $well->status) == 'Inactive') ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>
                    </div>

                </div> {{-- end row container --}}

                <div class="mt-4 d-flex gap-2 justify-content-center">
                    <button type="submit" class="btn btn-primary">Update</button>
                    <a href="{{ url()->previous() }}" class="btn btn-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- jQuery is used for the dependent selects (blocks -> panchayats -> villages) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

{{-- Average calculation script --}}
<script>
    function calculateAverage() {
        let q1 = parseFloat(document.getElementById('first_quarter').value) || 0;
        let q2 = parseFloat(document.getElementById('second_quarter').value) || 0;
        let q3 = parseFloat(document.getElementById('third_quarter').value) || 0;
        let q4 = parseFloat(document.getElementById('fourth_quarter').value) || 0;

        let count = 0;
        let sum = 0;

        if (!isNaN(q1) && q1 !== 0) { sum += q1; count++; }
        if (!isNaN(q2) && q2 !== 0) { sum += q2; count++; }
        if (!isNaN(q3) && q3 !== 0) { sum += q3; count++; }
        if (!isNaN(q4) && q4 !== 0) { sum += q4; count++; }

        let avg = (count > 0) ? (sum / count) : 0;
        document.getElementById('average').value = avg.toFixed(2);
    }

    // Attach event listeners safely
    document.addEventListener('DOMContentLoaded', function() {
        ['first_quarter','second_quarter','third_quarter','fourth_quarter'].forEach(id => {
            const el = document.getElementById(id);
            if (el) el.addEventListener('input', calculateAverage);
        });

        // initial calc
        calculateAverage();
    });
</script>

{{-- Dependent selects: blocks -> panchayats --}}
<script>
    $(document).ready(function() {
        $('#block_id').change(function() {
            var blockId = $(this).val();

            if (blockId) {
                $.ajax({
                    url: '/geo/get-panchayats/' + blockId,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#panchayat_id').empty().append('<option value="">--Select Panchayat--</option>');
                        $.each(data, function(key, panchayat) {
                            $('#panchayat_id').append(
                                $('<option>', {
                                    value: panchayat.id,
                                    text: panchayat.name,
                                    selected: (panchayat.id == {{ json_encode(old('panchayat_id', $well->panchayat_id)) }})
                                })
                            );
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error("AJAX Error:", error);
                        alert("Failed to fetch Panchayats. Please try again.");
                    }
                });
            } else {
                $('#panchayat_id').empty().append('<option value="">--Select Panchayat--</option>');
            }
        });

        // trigger change if block already selected to prefill panchayats
        if ($('#block_id').val()) {
            $('#block_id').trigger('change');
        }
    });
</script>

{{-- Dependent selects: panchayats -> villages --}}
<script>
    $(document).ready(function() {
        $('#panchayat_id').on('change', function() {
            var panchayatId = $(this).val();

            if (panchayatId) {
                $.ajax({
                    url: '/geo/get-villages/' + panchayatId,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#village_id').empty().append('<option value="">--Select Village--</option>');
                        $.each(data, function(index, village) {
                            $('#village_id').append(
                                $('<option>', {
                                    value: village.id,
                                    text: village.name,
                                    selected: (village.id == {{ json_encode(old('village_id', $well->village_id)) }})
                                })
                            );
                        });
                    },
                    error: function(xhr) {
                        alert("Something went wrong while fetching villages.");
                        console.error(xhr.responseText);
                    }
                });
            } else {
                $('#village_id').empty().append('<option value="">--Select Village--</option>');
            }
        });

        // trigger change if panchayat already selected to prefill villages
        if ($('#panchayat_id').val()) {
            $('#panchayat_id').trigger('change');
        }
    });
</script>

@endsection