@extends('layouts.usermain')
@section('main-container')

<div class="page-header d-print-none">
    <div class="container-xl">
        <div class="row g-2 align-items-center">
            <div class="col">
                <h2 class="page-title">Water Harvesting Structure - Farm Pond</h2>
            </div>
            <div class="col-auto ms-auto d-print-none">
                <div class="btn-list"></div>
            </div>
        </div>
    </div>
</div>

<div class="card-body">
    <div class="container-xl">

        {{-- Flash Messages --}}
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif

        <div class="card mb-2">
            <div class="card-header bg-secondary text-white">
                <h4 class="mb-0">Pre Work Level Measurements (Edit)</h4>
            </div>

            <form action="{{ route('reports.update', $data->baseline_id ?? $data->id) }}" method="POST" enctype="multipart/form-data" class="card-body">
                @csrf
                @method('PUT')

                @php $planning = $data->waterHarvestingStructuresPlannings->first() ?? null; @endphp

                {{-- Beneficiary & Project Info --}}
                <div class="card shadow-sm border mb-4">
                    <div class="card-body">
                        <div class="row g-3">

                            {{-- Beneficiary Name --}}
                            <div class="row g-2">

    {{-- Beneficiary Name --}}
    <div class="col-12 col-md-6">
        <div class="d-flex align-items-center bg-light rounded p-1">
            <label class="form-label form-label-sm fw-bold me-2 mb-0" style="min-width: 140px;">Beneficiary Name:</label>
            <div class="form-control-plaintext flex-grow-1 px-2 py-0">
                {{ $data->baseline->name_of_respondent ?? 'N/A' }}
            </div>
        </div>
    </div>

    {{-- Dimensions --}}
    <div class="col-12 col-md-6">
        <div class="d-flex align-items-center bg-light rounded p-1">
            <label class="form-label form-label-sm fw-bold me-2 mb-0" style="min-width: 140px;">Dimensions (L×W×D):</label>
            <div class="form-control-plaintext flex-grow-1 px-2 py-0">
                {{ $planning->length ?? 'N/A' }} m × {{ $planning->width ?? 'N/A' }} m × {{ $planning->depth_or_height ?? 'N/A' }} m
            </div>
        </div>
    </div>

    {{-- Village, Panchayat, Block --}}
    @foreach (['Village' => $data->baseline?->village?->name, 
               'Panchayat' => $data->baseline?->panchayat?->name, 
               'Block' => $data->baseline?->block?->name] as $label => $value)
        <div class="col-12 col-md-4">
            <div class="d-flex align-items-center bg-light rounded p-1">
                <label class="form-label form-label-sm fw-bold me-2 mb-0" style="min-width: 100px;">{{ $label }}:</label>
                <div class="form-control-plaintext flex-grow-1 px-2 py-0">
                    {{ ucfirst(strtolower($value ?? 'N/A')) }}
                </div>
            </div>
        </div>
    @endforeach

    {{-- District --}}
    <div class="col-12 col-md-6">
        <div class="d-flex align-items-center bg-light rounded p-1">
            <label class="form-label form-label-sm fw-bold me-2 mb-0" style="min-width: 100px;">District:</label>
            <div class="form-control-plaintext flex-grow-1 px-2 py-0">
                {{ ucfirst(strtolower($data->baseline?->district?->name ?? 'N/A')) }}
            </div>
        </div>
    </div>

    {{-- Project Type --}}
    <div class="col-12 col-md-6">
        <div class="d-flex align-items-center bg-light rounded p-1">
            <label class="form-label form-label-sm fw-bold me-2 mb-0" style="min-width: 120px;">Project Type:</label>
            <div class="form-control-plaintext flex-grow-1 px-2 py-0">
                {{ $data->baseline?->projectType->name ?? 'N/A' }}
            </div>
        </div>
    </div>

    {{-- Plot No --}}
    <div class="col-12 col-md-6">
        <div class="d-flex align-items-center bg-light rounded p-1">
            <label for="plot_khata" class="form-label form-label-sm fw-bold me-2 mb-0" style="min-width: 140px;">Plot No:</label>
            <select name="plot_khata" id="plot_khata" class="form-select form-select-sm flex-grow-1">
                @forelse($data->lands as $land)
                    <option value="{{ $land->id }}" {{ old('plot_khata', $planning->land_id ?? '') == $land->id ? 'selected' : '' }}>
                        {{ $land->plot_khata }}
                    </option>
                @empty
                    <option disabled>No plot data</option>
                @endforelse
            </select>
        </div>
    </div>

    {{-- Measurement Date --}}
    <div class="col-12 col-md-6">
        <div class="d-flex align-items-center bg-light rounded p-1">
            <label for="measurement_date" class="form-label form-label-sm fw-bold me-2 mb-0" style="min-width: 140px;">Measurement Date:</label>
            <input type="date" name="measurement_date" id="measurement_date" class="form-control form-control-sm flex-grow-1"
                   value="{{ old('measurement_date', isset($data->measurement_date) ? \Carbon\Carbon::parse($data->measurement_date)->format('Y-m-d') : '') }}" readonly>
        </div>
    </div>

    {{-- Latitude --}}
    <div class="col-12 col-md-6">
        <div class="d-flex align-items-center bg-light rounded p-1">
            <label for="lat" class="form-label form-label-sm fw-bold me-2 mb-0" style="min-width: 100px;">Latitude:</label>
            <input type="text" id="lat" name="lat" value="{{ old('lat', $planning->latitude ?? $data->lat ?? '') }}"
                   class="form-control form-control-sm flex-grow-1"  readonly>
        </div>
    </div>

    {{-- Longitude --}}
    <div class="col-12 col-md-6">
        <div class="d-flex align-items-center bg-light rounded p-1">
            <label for="long" class="form-label form-label-sm fw-bold me-2 mb-0" style="min-width: 100px;">Longitude:</label>
            <input type="text" id="long" name="long" value="{{ old('long', $planning->longitude ?? $data->long ?? '') }}"
                   class="form-control form-control-sm flex-grow-1" readonly>
        </div>
    </div>

</div>


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

                {{-- Station Table --}}
                <div class="card shadow-sm mb-4">
                    <div class="table-responsive">
                      <table class="table table-bordered mb-0">
    <thead class="table-light text-center">
        <tr>
            <th>Station</th>
            <th>Chainage</th>
            <th>BS</th>
            <th>IS</th>
            <th>FS</th>
            <th>HI</th>
            <th>RL</th>
            <th>Remarks</th>
            <th>Action</th>
        </tr>
    </thead>

    <tbody id="stationBody">
        @php
            if (is_string($data->stations)) {
                $stations = json_decode($data->stations, true) ?? [];
            } elseif (is_array($data->stations)) {
                $stations = $data->stations;
            } else {
                $stations = [];
            }
        @endphp

        {{-- TBM row (first fixed row) --}}
        <tr>
            <td class="text-center">TBM</td>
            <td></td>
            <td>
                <input type="number" step="any" name="bs" value="{{ $data->bs }}" id="bs" class="form-control form-control-sm text-center" placeholder="Enter BS" required>
            </td>
            <td></td>
            <td></td>
            <td>
                <input type="text" id="hi_main" name="hi" value="{{ ($data->bs ?? 0) + 200 }}" class="form-control form-control-sm text-center" readonly placeholder="200 + BS">
            </td>
            <td></td>
            <td>
                <input type="text" name="tbm_remarks" value="{{ ($data->tbm_remarks ?? '') }}" class="form-control form-control-sm text-center" placeholder="Remarks">
            </td>
            <td></td>
        </tr>

        @if(!empty($stations))
            @foreach($stations as $index => $s)
                @php $s = is_array($s) ? $s : []; @endphp
                <tr>
                    <td class="text-center fw-semibold">
                        {{ $s['station'] ?? $index + 1 }}
                        <input type="hidden" name="stations[0][{{ $index }}][station]" value="{{ $s['station'] ?? $index + 1 }}">
                    </td>

                    <td>
                        <input type="number" name="stations[0][{{ $index }}][chainage]" value="{{ $s['chainage'] ?? '' }}" class="form-control form-control-sm text-center chainageInput">
                    </td>

                    <td></td>

                    <td>
                        <input type="number" step="any" name="stations[0][{{ $index }}][is]" value="{{ $s['is'] ?? '' }}" class="form-control form-control-sm isInput text-center"  step="0.01"
       min="0">
                    </td>

                    <td></td>

                    <td>
                        <input type="number" step="any" name="stations[0][{{ $index }}][hi]" value="{{ ($data->bs ?? 0) + 200 }}" class="form-control form-control-sm hiInput text-center" readonly>
                    </td>

                    <td>
                        <input type="number" step="any" name="stations[0][{{ $index }}][rl]" value="{{ $s['rl'] ?? '' }}" class="form-control form-control-sm rlInput text-center" readonly>
                    </td>

                    <td>
                        <input type="text" name="stations[0][{{ $index }}][remarks]" value="{{ $s['remarks'] ?? '' }}" class="form-control form-control-sm text-center remarksInput">
                    </td>

                    <td class="text-center">
                        <button type="button" class="btn btn-outline-danger btn-sm" onclick="removeStationRow(this)">Delete</button>
                    </td>
                </tr>
            @endforeach
        @else
            <tr><td colspan="9" class="text-center text-muted py-4">No station readings available.</td></tr>
        @endif
    </tbody>

    <tfoot>
        <tr class="table-secondary">
            <td colspan="6" class="text-end fw-bold">Average RL</td>
            <td>
                <input type="text" id="averageRL" name="average_level" class="form-control form-control-sm text-center" readonly value="{{ $data->average_level ?? '' }}">
            </td>
            <td colspan="2"></td>
        </tr>
    </tfoot>
</table>
                    </div>
                    <div class="card-footer d-flex justify-content-between">
                        <button type="button" class="btn btn-success" onclick="addStationRow()">Add Row</button>
                    </div>
                </div>

                {{-- Hidden identifiers --}}
                <input type="hidden" name="baseline_id" value="{{ $data->baseline_id ?? $data->id }}">
                <input type="hidden" name="project_type_id" value="{{ $data->project_type_id ?? '' }}">
                <input type="hidden" name="application_code" value="{{ $data->application_code ?? '' }}">

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

<script>
/* Helper: get current HI from BS input */
function getCurrentHI() {
    const bsEl = document.getElementById('bs');
    const bsVal = parseFloat(bsEl?.value) || 0;
    return bsVal + 200;
}

/* Remove a station row */
function removeStationRow(btn) {
    const row = btn.closest('tr');
    if (!row) return;
    row.remove();
    renumberStations();
    recalcAverageRL();
}

/* Add a new station row at the bottom (counts only station rows) */
function addStationRow() {
    const tbody = document.getElementById('stationBody');

    // Remove "No station readings available." placeholder row if present
    const placeholder = tbody.querySelector('tr td[colspan="9"]');
    if (placeholder) placeholder.closest('tr').remove();

    // count only rows that are actual station rows (exclude TBM and any non-station rows)
    const stationRows = Array.from(tbody.querySelectorAll('tr'))
        .filter(r => r.querySelector('input[name^="stations"]') || r.querySelector('.isInput'));

    const newIndex = stationRows.length; // correct 0-based new index for stations
    const HI = getCurrentHI();

    const row = document.createElement('tr');
    row.innerHTML = `
        <td class="text-center fw-semibold">
            <input type="hidden" name="stations[0][${newIndex}][station]" value="${newIndex + 1}">
            ${newIndex + 1}
        </td>
        <td><input type="number" name="stations[0][${newIndex}][chainage]" class="form-control form-control-sm text-center chainageInput"></td>
        <td></td>
        <td><input type="number" name="stations[0][${newIndex}][is]" class="form-control form-control-sm isInput text-center" step="0.01"
       min="0"> </td>
        <td></td>
        <td><input type="number" name="stations[0][${newIndex}][hi]" class="form-control form-control-sm hiInput text-center" value="${HI}" readonly></td>
        <td><input type="number" name="stations[0][${newIndex}][rl]" class="form-control form-control-sm rlInput text-center" readonly></td>
        <td><input type="text" name="stations[0][${newIndex}][remarks]" class="form-control form-control-sm text-center remarksInput"></td>
        <td class="text-center">
            <button type="button" class="btn btn-outline-danger btn-sm" onclick="removeStationRow(this)">Delete</button>
        </td>
    `;

    tbody.appendChild(row);

    attachEventsToRow(row); // attach only to this new row
    renumberStations();
    recalcAverageRL();

    const firstInput = row.querySelector('input:not([readonly])');
    if (firstInput) {
        firstInput.focus();
        row.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
}

/* Attach IS -> RL logic for a given row (idempotent per-row) */
function attachEventsToRow(row) {
    if (!row) return;
    const isInput = row.querySelector('.isInput');
    const rlInput = row.querySelector('.rlInput');
    const hiInput = row.querySelector('.hiInput');

    // Only attach if not already attached (avoid duplicate listeners)
    if (isInput && !isInput.dataset.listenerAttached) {
        isInput.addEventListener('input', () => {
            const isVal = parseFloat(isInput.value) || 0;
            const hiVal = parseFloat(hiInput?.value) || getCurrentHI();
            rlInput.value = (hiVal - isVal).toFixed(3);
            recalcAverageRL();
        });
        // mark as attached
        isInput.dataset.listenerAttached = '1';

        // initial calc if IS has value
        const initialVal = parseFloat(isInput.value);
        if (!isNaN(initialVal)) {
            const hiVal = parseFloat(hiInput?.value) || getCurrentHI();
            rlInput.value = (hiVal - initialVal).toFixed(3);
        }
    }
}

/* Recalculate average RL */
function recalcAverageRL() {
    const rlInputs = document.querySelectorAll('.rlInput');
    const values = Array.from(rlInputs)
        .map(i => parseFloat(i.value))
        .filter(v => !isNaN(v));
    const avgEl = document.getElementById('averageRL');
    if (!avgEl) return;
    avgEl.value = values.length ? (values.reduce((a, b) => a + b, 0) / values.length).toFixed(3) : '';
}

/* Renumber only station rows (exclude TBM) and fix input names */
function renumberStations() {
    const tbody = document.getElementById('stationBody');
    // pick only station rows (those that have stations[] inputs or isInput)
    const stationRows = Array.from(tbody.querySelectorAll('tr'))
        .filter(r => r.querySelector('input[name^="stations"]') || r.querySelector('.isInput'));

    stationRows.forEach((row, index) => {
        // ensure there is a hidden station input; if not, create it
        let hiddenStation = row.querySelector('input[type="hidden"][name^="stations"]');
        const firstCell = row.children[0];
        if (!hiddenStation) {
            hiddenStation = document.createElement('input');
            hiddenStation.type = 'hidden';
            firstCell.prepend(hiddenStation);
        }
        hiddenStation.name = `stations[0][${index}][station]`;
        hiddenStation.value = index + 1;

        // update visible station number text
        // remove any existing text nodes then set number
        Array.from(firstCell.childNodes).forEach(n => {
            if (n.nodeType === Node.TEXT_NODE) n.remove();
        });
        firstCell.appendChild(document.createTextNode(index + 1));

        // chainage
        const chainage = row.querySelector('.chainageInput');
        if (chainage) chainage.name = `stations[0][${index}][chainage]`;

        // is
        const isInput = row.querySelector('.isInput');
        if (isInput) isInput.name = `stations[0][${index}][is]`;

        // hi
        const hiInput = row.querySelector('.hiInput');
        if (hiInput) hiInput.name = `stations[0][${index}][hi]`;

        // rl
        const rlInput = row.querySelector('.rlInput');
        if (rlInput) rlInput.name = `stations[0][${index}][rl]`;

        // remarks
        const remarks = row.querySelector('.remarksInput');
        if (remarks) remarks.name = `stations[0][${index}][remarks]`;
    });
}

/* Update HI on all rows when BS changes */
function updateAllHI() {
    const hiVal = getCurrentHI();
    const hiMain = document.getElementById('hi_main');
    if (hiMain) hiMain.value = hiVal;

    document.querySelectorAll('.hiInput').forEach(el => el.value = hiVal);

    // recalc RL for each row using the new HI
    document.querySelectorAll('.isInput').forEach(isEl => {
        const row = isEl.closest('tr');
        const rlEl = row?.querySelector('.rlInput');
        const hiEl = row?.querySelector('.hiInput');
        const hiUsed = parseFloat(hiEl?.value) || hiVal;
        const isVal = parseFloat(isEl.value) || 0;
        if (rlEl) rlEl.value = (hiUsed - isVal).toFixed(3);
    });

    recalcAverageRL();
}

/* Initialize existing rows on DOM ready */
document.addEventListener('DOMContentLoaded', () => {
    // Attach events only to rows that have isInput
    document.querySelectorAll('#stationBody tr').forEach(row => {
        if (row.querySelector('.isInput')) attachEventsToRow(row);
    });

    // Wire BS change to update HI fields
    const bsEl = document.getElementById('bs');
    if (bsEl) bsEl.addEventListener('input', updateAllHI);

    // Sync HI and averages on load
    updateAllHI();
    recalcAverageRL();
});
</script>


@endsection