@extends('layouts.usermain')

@section('main-container')
<!-- Page Header -->
<div class="page-header d-print-none mb-3">
    <div class="container-xl">
        <div class="row g-2 align-items-center">
            <div class="col">
                <h2 class="page-title">Post Work Level Measurement</h2>
            </div>
            <div class="col-auto ms-auto d-print-none">
                <div class="btn-list">
                    <a href="{{ route('export.excel') }}" class="btn btn-outline-success">
                        <i class="ti ti-file-spreadsheet me-1"></i> Download Excel Report
                    </a>
                    <a href="{{ route('farmers.create') }}" class="btn btn-primary">
                        <i class="ti ti-plus me-1"></i> Add Baseline
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Flash Messages -->
<div class="container-xl">
    @if(session('success'))
        <div class="alert alert-success alert-dismissible">{{ session('success') }}</div>
    @endif
</div>

<!-- Main Content -->
<div class="container-xl">
    <div class="card shadow-sm mb-4">
        <div class="card-header bg-primary text-white mb-3">
            <h5 class="mb-0">Post Work Level Measurement(Edit)</h5>
        </div>

        <div class="container">
            <form id="levelForm" action="{{ route('postworklevel.update', $id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <!-- Location & Pre/Post details -->
                <div class="border rounded p-3 bg-white shadow-sm">
                    <h5 class="text-primary fw-bold mb-3">W.H.S – Post Level Edit</h5>

                    <div class="row mb-1">
                        <div class="col-md-6 d-flex align-items-center">
                            <label class="fw-semibold text-muted me-2" style="width: 150px;">Village:</label>
                            <div>{{ $postLevel->baseline->village->name ?? '-' }}</div>
                        </div>
                        <div class="col-md-6 d-flex align-items-center">
                            <label class="fw-semibold text-muted me-2" style="width: 150px;">Panchayat:</label>
                            <div>{{ $postLevel->baseline->panchayat->name ?? '-' }}</div>
                        </div>
                    </div>

                    <div class="row mb-1 bg-light py-1 rounded">
                        <div class="col-md-6 d-flex align-items-center">
                            <label class="fw-semibold text-muted me-2" style="width: 150px;">Block:</label>
                            <div>{{ $postLevel->baseline->block->name ?? '-' }}</div>
                        </div>
                        <div class="col-md-6 d-flex align-items-center">
                            <label class="fw-semibold text-muted me-2" style="width: 150px;">District:</label>
                            <div>{{ $postLevel->baseline->district->name ?? '-' }}</div>
                        </div>
                    </div>

                    <div class="row mb-1">
                        <div class="col-md-6 d-flex align-items-center">
                            <label class="fw-semibold text-muted me-2" style="width: 150px;">Beneficiary Name:</label>
                            <div>{{ $postLevel->baseline->name_of_respondent ?? '-' }}</div>
                        </div>
                        <div class="col-md-6 d-flex align-items-center">
                            <label class="fw-semibold text-muted me-2" style="width: 150px;">Plot No.:</label>
                            <div>{{ $postLevel->baseline->land->plot_khata ?? '-' }}</div>
                        </div>
                    </div>

                    <div class="row mb-2 bg-light py-2 rounded">
                        <div class="col-md-6">
                            <div class="mb-1">
                                <span class="fw-semibold text-info">Pre-Level</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-1">
                                <span class="fw-semibold text-info">Post-Level</span>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-1">
                        <div class="col-md-6 d-flex">
                            <label class="fw-semibold text-muted me-2" style="width: 100px;">Lat:</label>
                            <div>{{ $postLevel->baseline->preWorkLevels->first()->lat ?? '-' }}</div>
                            <label class="fw-semibold text-muted ms-3 me-2" style="width: 100px;">Long:</label>
                            <div>{{ $postLevel->baseline->preWorkLevels->first()->long ?? '-' }}</div>
                        </div>
                        <div class="col-md-6 d-flex">
                            <label class="fw-semibold text-muted me-2" style="width: 100px;">Lat:</label>
                            <input type="text" name="lat" class="form-control form-control-sm" style="width: 108px;" value="{{ old('lat', $postLevel->lat ?? '') }}" required readonly>
                            <label class="fw-semibold text-muted ms-3 me-2" style="width: 100px;">Long:</label>
                            <input type="text" name="long" class="form-control form-control-sm" style="width: 108px;" value="{{ old('long', $postLevel->long ?? '') }}" required readonly>
                        </div>
                    </div>

                    <div class="row mt-2 bg-light">
                        <div class="col-md-6">
                            <div class="fw-semibold text-info small mb-1">Pond Dimensions (Pre-level)</div>
                            <div class="d-flex">
                                <label class="fw-semibold text-muted me-2" style="width: 150px;">Size:</label>
                                <div>{{ (int)($postLevel->baseline->waterHarvestingStructuresPlanning->first()->length ?? 0) }}m × {{ (int)($postLevel->baseline->waterHarvestingStructuresPlanning->first()->width ?? 0) }}m × {{ (int)($postLevel->baseline->waterHarvestingStructuresPlanning->first()->depth_or_height ?? 0) }}m</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="fw-semibold text-info small mb-1">Pond Dimensions (Post-level)</div>
                            <div class="d-flex align-items-center gap-2">
                                <input type="text" name="length" class="form-control form-control-sm" style="width: 80px;" value="{{ old('length', $postLevel->length ?? '') }}" required> m
                                <span>×</span>
                                <input type="text" name="width" class="form-control form-control-sm" style="width: 80px;" value="{{ old('width', $postLevel->width ?? '') }}" required> m
                                <span>×</span>
                                <input type="text" name="height" class="form-control form-control-sm" style="width: 80px;" value="{{ old('height', $postLevel->height ?? '') }}" required> m
                            </div>
                        </div>
                    </div>
                </div>

                <h4 class="mt-4 text-success text-center">Survey Data</h4>
                <input type="hidden" name="baseline_id" value="{{ $baseline_id }}">

                @php
                    // Prefer old input first, then $layers passed from controller, otherwise default to 1 layer with 4 stations.
                    $oldLayers = old('layers');
                    if ($oldLayers && is_array($oldLayers) && count($oldLayers) > 0) {
                        $layersData = $oldLayers;
                    } elseif (isset($layers) && is_array($layers) && count($layers) > 0) {
                        $layersData = $layers;
                    } else {
                        $layersData = [
                            1 => ['stations' => array_fill(0, 4, ['is' => null, 'rl' => null, 'remarks' => null]), 'average_rl' => null]
                        ];
                    }

                    // Convert numeric-indexed arrays to associative keyed by 1..n to preserve keys
                    $isAssoc = array_values($layersData) !== $layersData;
                    if (!$isAssoc) {
                        $tmp = [];
                        foreach (array_values($layersData) as $i => $l) {
                            $tmp[$i + 1] = $l;
                        }
                        $layersData = $tmp;
                    }

                    // compute starting nextLayerId (server doesn't need it for new negative-temp IDs)
                    $nextLayerId = 0;
                @endphp

                <div class="row justify-content-center">
                    <div class="col-sm-10">
<table class="table table-sm table-bordered text-center table-striped">
    <thead>
        <tr>
            <th>Station</th>
            <th>B.S</th>
            <th>I.S.</th>
            <th>F.S.</th>
            <th>H.I</th>
            <th>R.L.</th>
            <th>Remarks</th>
        </tr>
    </thead>
    <tbody id="station-body">
        <tr>
            <td>TBM</td>
            <td>
                <input type="number" name="bs" id="bs-input"
                       class="form-control form-control-sm text-center"
                       step="any" value="{{ old('bs', $postLevel->bs ?? '') }}" required>
            </td>
            <td></td>
            <td></td>
            <td>
                <input type="number" name="hi" id="hi"
                       class="form-control form-control-sm text-center"
                       value="{{ old('hi', $postLevel->hi ?? '') }}">
            </td>
            <td>
                <input type="number" name="rl" id="rl"
                       class="form-control form-control-sm text-center"
                       value="{{ old('rl', $postLevel->rl ?? '') }}" readonly>
            </td>
            <td>
                <input type="text" name="remarks" class="form-control form-control-sm"
                       value="{{ old('remarks', $postLevel->remarks ?? '') }}">
            </td>
        </tr>

        {{-- Render layers: preserve layer keys (DB layer_number or temp id) --}}
        @foreach($layersData as $layerKey => $layer)
            @php
                $uid = is_numeric($layerKey) ? (int) $layerKey : $layerKey;
                $stations = $layer['stations'] ?? [];
                $stationCount = max(1, count($stations));
            @endphp

            {{-- Ensure original layer_number is submitted unchanged --}}
            <input type="hidden" name="layers[{{ $uid }}][layer_number]" value="{{ $uid }}">

            <tr class="layer-heading" data-layer="{{ $uid }}">
                <td colspan="7">
                    <strong>
                        {{ is_numeric($uid) ? ($uid . ($uid == 1 ? 'st' : ($uid == 2 ? 'nd' : ($uid == 3 ? 'rd' : 'th')))) : 'New Layer' }} Layer
                    </strong>
                </td>
            </tr>

            @for ($i = 0; $i < $stationCount; $i++)
                @php $s = $stations[$i] ?? ['is' => null, 'rl' => null, 'remarks' => null]; @endphp
                <tr data-layer="{{ $uid }}">
                    <td class="station-no">{{ $i + 1 }}</td>
                    <td></td>
                    <td>
                        <input type="number"
                               name="layers[{{ $uid }}][stations][{{ $i }}][is]"
                               class="form-control form-control-sm is-input text-center"
                               step="any"
                               data-rl-id="rl-{{ $uid }}-{{ $i }}"
                               value="{{ old("layers.$uid.stations.$i.is", $s['is'] ?? '') }}">
                    </td>
                    <td></td>
                    <td></td>
                    <td>
                        <input type="text"
                               name="layers[{{ $uid }}][stations][{{ $i }}][rl]"
                               id="rl-{{ $uid }}-{{ $i }}"
                               class="form-control form-control-sm rl-input text-center"
                               readonly
                               value="{{ old("layers.$uid.stations.$i.rl", $s['rl'] ?? '') }}">
                    </td>
                    <td>
                        <input type="text"
                               name="layers[{{ $uid }}][stations][{{ $i }}][remarks]"
                               class="form-control form-control-sm text-center"
                               value="{{ old("layers.$uid.stations.$i.remarks", $s['remarks'] ?? '') }}">
                    </td>
                </tr>
            @endfor

            {{-- Average row for layer --}}
            <tr class="average-row" data-layer="{{ $uid }}">
                <td colspan="5" class="text-end"><strong>Average</strong></td>
                <td>
                    <input type="text"
                           name="layers[{{ $uid }}][average_rl]"
                           class="form-control form-control-sm avg-input text-center"
                           readonly
                           value="{{ old("layers.$uid.average_rl", $layer['average_rl'] ?? '') }}">
                </td>
                <td></td>
            </tr>

            {{-- Controls row for this layer --}}
            <tr class="layer-header" data-layer="{{ $uid }}">
                <td colspan="3" class="text-start"></td>
                <td class="text-center">
                    <button type="button" class="btn btn-sm btn-primary me-1"
                            onclick="addRowToLayer('{{ $uid }}')">Add Row</button>
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger"
                            onclick="removeRowFromLayer('{{ $uid }}')">Remove Row</button>
                </td>
                <td></td>
            </tr>
        @endforeach
    </tbody>
</table>

{{-- Global controls (layer-level) --}}
<div class="text-center mb-3">
    <button type="button" class="btn btn-sm btn-primary" id="add-layer-btn" onclick="addLayer()">Add Layer</button>
</div>

<script>
(function () {
    // negative temp IDs for new unsaved layers
    let nextTempLayerId = -1;

    function getStationRowsForLayer(layerId) {
        const tbody = document.getElementById('station-body');
        return Array.from(tbody.querySelectorAll(`tr[data-layer="${layerId}"]`))
            .filter(tr => !tr.classList.contains('layer-header') && !tr.classList.contains('average-row') && !tr.classList.contains('layer-heading'));
    }

    function reindexLayerRows(layerId) {
        const rows = getStationRowsForLayer(layerId);
        rows.forEach(function (tr, idx) {
            const stationCell = tr.querySelector('.station-no') || tr.children[0];
            if (stationCell) stationCell.textContent = idx + 1;

            const isInput = tr.querySelector('.is-input');
            if (isInput) {
                isInput.name = `layers[${layerId}][stations][${idx}][is]`;
                isInput.setAttribute('data-rl-id', `rl-${layerId}-${idx}`);
            }

            const rlInput = tr.querySelector('.rl-input');
            if (rlInput) {
                rlInput.id = `rl-${layerId}-${idx}`;
                rlInput.name = `layers[${layerId}][stations][${idx}][rl]`;
            }

            const remarksInput = tr.querySelector('td:last-child input');
            if (remarksInput) {
                remarksInput.name = `layers[${layerId}][stations][${idx}][remarks]`;
            }
        });
    }

    function recalcLayerAverage(layerId) {
        const rows = getStationRowsForLayer(layerId);
        let sum = 0;
        let count = 0;

        rows.forEach(function (tr) {
            const rlInput = tr.querySelector('.rl-input');
            if (!rlInput) return;
            const val = parseFloat(rlInput.value);
            if (!isNaN(val)) {
                sum += val;
                count++;
            }
        });

        const avgInput = document.querySelector(`tr.average-row[data-layer="${layerId}"] input.avg-input`);
        if (avgInput) {
            avgInput.value = count > 0 ? (sum / count).toFixed(3) : '';
        }
    }

    /**
     * Format RL to 3 decimals and avoid "-0.000"
     */
    function formatRlValue(n) {
        if (n === '' || n === null || n === undefined) return '';
        const num = Number(n);
        if (isNaN(num)) return '';
        // treat near-zero as zero to avoid -0.000
        const rounded = Number(num.toFixed(3));
        if (Math.abs(rounded) < 0.0005) return '0.000';
        return rounded.toFixed(3);
    }

    /**
     * compute RL = HI - IS
     */
    function computeRlFromHiAndIs(hi, isVal) {
        const h = parseFloat(hi);
        const i = parseFloat(isVal);
        if (isNaN(h) || isNaN(i)) return '';
        return formatRlValue(h - i);
    }

    function updateRlForRow(rlId, isValue) {
        const rlEl = document.getElementById(rlId);
        if (!rlEl) return;
        const hiEl = document.getElementById('hi');
        const hiVal = hiEl ? hiEl.value : null;
        const newRl = computeRlFromHiAndIs(hiVal, isValue);
        rlEl.value = newRl;
    }

    function recalcAllRlsInLayer(layerId) {
        const rows = getStationRowsForLayer(layerId);
        const hiEl = document.getElementById('hi');
        const hiVal = hiEl ? hiEl.value : null;
        rows.forEach(function (tr) {
            const isInput = tr.querySelector('.is-input');
            if (!isInput) return;
            const rlId = isInput.dataset.rlId;
            if (rlId) {
                updateRlForRow(rlId, isInput.value);
            } else {
                const siblingRl = tr.querySelector('.rl-input');
                if (siblingRl) {
                    const newRl = computeRlFromHiAndIs(hiVal, isInput.value);
                    siblingRl.value = newRl;
                }
            }
        });
        recalcLayerAverage(layerId);
    }

    function recalcAllRls() {
        const all = Array.from(document.querySelectorAll('tr[data-layer]')).map(tr => tr.getAttribute('data-layer'));
        const uniq = [...new Set(all.filter(Boolean))];
        uniq.forEach(lid => recalcAllRlsInLayer(lid));
    }

    function hookRowEvents(layerId) {
        const rows = getStationRowsForLayer(layerId);
        rows.forEach(function (tr) {
            const isInput = tr.querySelector('.is-input');
            const rlInput = tr.querySelector('.rl-input');

            if (rlInput) {
                rlInput.addEventListener('input', function () {
                    recalcLayerAverage(layerId);
                });
            }

            if (isInput) {
                isInput.addEventListener('input', function () {
                    const rlId = isInput.dataset.rlId;
                    if (rlId) updateRlForRow(rlId, isInput.value);
                    else {
                        const siblingRl = tr.querySelector('.rl-input');
                        if (siblingRl) {
                            const hiEl = document.getElementById('hi');
                            const hiVal = hiEl ? hiEl.value : null;
                            siblingRl.value = computeRlFromHiAndIs(hiVal, isInput.value);
                        }
                    }
                    recalcLayerAverage(layerId);
                });

                // initialize RL on hookup
                setTimeout(() => {
                    const rlId = isInput.dataset.rlId;
                    if (rlId) updateRlForRow(rlId, isInput.value);
                }, 0);
            }
        });
    }

    function createStationRow(layerId, index, data = {is: '', rl: '', remarks: ''}) {
        const tr = document.createElement('tr');
        tr.setAttribute('data-layer', layerId);
        tr.innerHTML = `
            <td class="station-no">${index + 1}</td>
            <td></td>
            <td>
                <input type="number"
                       name="layers[${layerId}][stations][${index}][is]"
                       class="form-control form-control-sm is-input text-center"
                       step="any"
                       data-rl-id="rl-${layerId}-${index}"
                       value="${escapeHtml(data.is)}">
            </td>
            <td></td>
            <td></td>
            <td>
                <input type="text"
                       name="layers[${layerId}][stations][${index}][rl]"
                       id="rl-${layerId}-${index}"
                       class="form-control form-control-sm rl-input text-center"
                       readonly
                       value="${escapeHtml(data.rl)}">
            </td>
            <td>
                <input type="text"
                       name="layers[${layerId}][stations][${index}][remarks]"
                       class="form-control form-control-sm text-center"
                       value="${escapeHtml(data.remarks)}">
            </td>
        `;
        return tr;
    }

    window.addRowToLayer = function (layerId) {
        const tbody = document.getElementById('station-body');
        const avgRow = tbody.querySelector(`tr.average-row[data-layer="${layerId}"]`);
        const rows = getStationRowsForLayer(layerId);
        const index = rows.length; // next index

        const newRow = createStationRow(layerId, index);
        if (avgRow) {
            tbody.insertBefore(newRow, avgRow);
        } else {
            tbody.appendChild(newRow);
        }
        reindexLayerRows(layerId);
        hookRowEvents(layerId);
        recalcAllRlsInLayer(layerId);
    };

    window.removeRowFromLayer = function (layerId) {
        const rows = getStationRowsForLayer(layerId);
        if (rows.length <= 1) {
            alert('At least one station row must remain for this layer.');
            return;
        }
        const last = rows[rows.length - 1];
        last.remove();
        reindexLayerRows(layerId);
        recalcLayerAverage(layerId);
    };

    window.addLayer = function () {
        const existingLayerCount = document.querySelectorAll('tr.layer-heading').length;
        if (existingLayerCount >= 4) {
            alert('Maximum 4 layers allowed.');
            return;
        }

        const tbody = document.getElementById('station-body');
        const newLayerId = nextTempLayerId--; // negative IDs -1, -2, -3...

        // heading with hidden layer_number (temp id)
        const heading = document.createElement('tr');
        heading.classList.add('layer-heading');
        heading.setAttribute('data-layer', newLayerId);
        heading.innerHTML = `<td colspan="7"><strong>New Layer</strong>
            <input type="hidden" name="layers[${newLayerId}][layer_number]" value="${newLayerId}">
        </td>`;

        const stationRow = createStationRow(newLayerId, 0);

        const avgTr = document.createElement('tr');
        avgTr.classList.add('average-row');
        avgTr.setAttribute('data-layer', newLayerId);
        avgTr.innerHTML = `
            <td colspan="5" class="text-end"><strong>Average</strong></td>
            <td><input type="text" name="layers[${newLayerId}][average_rl]" class="form-control form-control-sm avg-input text-center" readonly value=""></td>
            <td></td>
        `;

        const headerTr = document.createElement('tr');
        headerTr.classList.add('layer-header');
        headerTr.setAttribute('data-layer', newLayerId);
        headerTr.innerHTML = `
            <td colspan="3" class="text-start"></td>
            <td class="text-center">
                <button type="button" class="btn btn-sm btn-primary me-1" onclick="addRowToLayer('${newLayerId}')">Add Row</button>
            </td>
            <td>
                <button type="button" class="btn btn-sm btn-danger" onclick="removeRowFromLayer('${newLayerId}')">Remove Row</button>
            </td>
            <td></td>
        `;

        tbody.appendChild(heading);
        tbody.appendChild(stationRow);
        tbody.appendChild(avgTr);
        tbody.appendChild(headerTr);

        hookRowEvents(newLayerId);
        recalcAllRlsInLayer(newLayerId);
    };

    window.removeLastLayer = function () {
        const tbody = document.getElementById('station-body');
        const headers = Array.from(tbody.querySelectorAll('tr.layer-header, tr.layer-heading')).reverse();
        if (headers.length === 0) {
            alert('No layers to remove.');
            return;
        }

        const lastHeader = headers[0];
        const layerId = lastHeader.getAttribute('data-layer');

        const nodes = Array.from(tbody.querySelectorAll(`tr[data-layer="${layerId}"]`));
        nodes.forEach(n => n.remove());

        const heading = tbody.querySelector(`tr.layer-heading[data-layer="${layerId}"]`);
        if (heading) heading.remove();
        const control = tbody.querySelector(`tr.layer-header[data-layer="${layerId}"]`);
        if (control) control.remove();
    };

    function escapeHtml(unsafe) {
        if (unsafe === null || unsafe === undefined) return '';
        return String(unsafe)
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    }

    document.addEventListener('DOMContentLoaded', function () {
        const seen = new Set();
        const candidates = Array.from(document.querySelectorAll('tr[data-layer]'));
        candidates.forEach(function (tr) {
            const lid = tr.getAttribute('data-layer');
            if (!lid) return;
            if (!seen.has(lid)) {
                seen.add(lid);
                reindexLayerRows(lid);
                hookRowEvents(lid);
                recalcAllRlsInLayer(lid);
            }
        });

        // When HI changes, recalc all RLs
        const hiEl = document.getElementById('hi');
        if (hiEl) {
            hiEl.addEventListener('input', function () {
                recalcAllRls();
            });
        }
    });
})();
</script>

<script>
(function () {
    let nextTempLayerId = -1;

    function getStationRowsForLayer(layerId) {
        const tbody = document.getElementById('station-body');
        return Array.from(tbody.querySelectorAll(`tr[data-layer="${layerId}"]`))
            .filter(tr => !tr.classList.contains('layer-header') && !tr.classList.contains('average-row') && !tr.classList.contains('layer-heading'));
    }

    function reindexLayerRows(layerId) {
        const rows = getStationRowsForLayer(layerId);
        rows.forEach(function (tr, idx) {
            const stationCell = tr.querySelector('.station-no') || tr.children[0];
            if (stationCell) stationCell.textContent = idx + 1;

            const isInput = tr.querySelector('.is-input');
            if (isInput) {
                isInput.name = `layers[${layerId}][stations][${idx}][is]`;
                isInput.setAttribute('data-rl-id', `rl-${layerId}-${idx}`);
            }

            const rlInput = tr.querySelector('.rl-input');
            if (rlInput) {
                rlInput.id = `rl-${layerId}-${idx}`;
                rlInput.name = `layers[${layerId}][stations][${idx}][rl]`;
            }

            const remarksInput = tr.querySelector('td:last-child input');
            if (remarksInput) {
                remarksInput.name = `layers[${layerId}][stations][${idx}][remarks]`;
            }
        });
    }

    function recalcLayerAverage(layerId) {
        const rows = getStationRowsForLayer(layerId);
        let sum = 0;
        let count = 0;

        rows.forEach(function (tr) {
            const rlInput = tr.querySelector('.rl-input');
            if (!rlInput) return;
            const val = parseFloat(rlInput.value);
            if (!isNaN(val)) {
                sum += val;
                count++;
            }
        });

        const avgInput = document.querySelector(`tr.average-row[data-layer="${layerId}"] input.avg-input`);
        if (avgInput) {
            avgInput.value = count > 0 ? (sum / count).toFixed(3) : '';
        }
    }

    function formatNumber3(n) {
        if (n === '' || n === null || n === undefined) return '';
        const num = Number(n);
        if (isNaN(num)) return '';
        const rounded = Number(num.toFixed(3));
        if (Math.abs(rounded) < 0.0005) return '0.000';
        return rounded.toFixed(3);
    }

    function computeRlFromHiAndIs(hi, isVal) {
        const h = parseFloat(hi);
        const i = parseFloat(isVal);
        if (isNaN(h) || isNaN(i)) return '';
        return formatNumber3(h - i);
    }

    function updateRlForRow(rlId, isValue) {
        const rlEl = document.getElementById(rlId);
        if (!rlEl) return;
        const hiEl = document.getElementById('hi');
        const hiVal = hiEl ? hiEl.value : null;
        rlEl.value = computeRlFromHiAndIs(hiVal, isValue);
    }

    function recalcAllRlsInLayer(layerId) {
        const rows = getStationRowsForLayer(layerId);
        const hiEl = document.getElementById('hi');
        const hiVal = hiEl ? hiEl.value : null;
        rows.forEach(function (tr) {
            const isInput = tr.querySelector('.is-input');
            if (!isInput) return;
            const rlId = isInput.dataset.rlId;
            if (rlId) updateRlForRow(rlId, isInput.value);
            else {
                const siblingRl = tr.querySelector('.rl-input');
                if (siblingRl) siblingRl.value = computeRlFromHiAndIs(hiVal, isInput.value);
            }
        });
        recalcLayerAverage(layerId);
    }

    function recalcAllRls() {
        const all = Array.from(document.querySelectorAll('tr[data-layer]')).map(tr => tr.getAttribute('data-layer'));
        const uniq = [...new Set(all.filter(Boolean))];
        uniq.forEach(lid => recalcAllRlsInLayer(lid));
    }

    function hookRowEvents(layerId) {
        const rows = getStationRowsForLayer(layerId);
        rows.forEach(function (tr) {
            const isInput = tr.querySelector('.is-input');
            if (!isInput) return;
            isInput.addEventListener('input', function () {
                updateRlForRow(isInput.dataset.rlId, isInput.value);
                recalcLayerAverage(layerId);
            });
            setTimeout(() => updateRlForRow(isInput.dataset.rlId, isInput.value), 0);
        });
    }

    /* ===== HI automatically computed as BS + 200 ===== */
    function computeHiFromBs(bsVal) {
        const b = parseFloat(bsVal);
        if (isNaN(b)) return '';
        return formatNumber3(b + 200);
    }

    function syncHiFromBsAndRecalc() {
        const bsEl = document.getElementById('bs-input');
        const hiEl = document.getElementById('hi');
        if (!bsEl || !hiEl) return;

        hiEl.value = computeHiFromBs(bsEl.value);
        recalcAllRls();
    }

    const bsElInit = document.getElementById('bs-input');
    if (bsElInit) bsElInit.addEventListener('input', syncHiFromBsAndRecalc);

    document.addEventListener('DOMContentLoaded', function () {
        const seen = new Set();
        const candidates = Array.from(document.querySelectorAll('tr[data-layer]'));
        candidates.forEach(function (tr) {
            const lid = tr.getAttribute('data-layer');
            if (!lid) return;
            if (!seen.has(lid)) {
                seen.add(lid);
                reindexLayerRows(lid);
                hookRowEvents(lid);
                recalcAllRlsInLayer(lid);
            }
        });

        // Initialize HI from BS on load
        syncHiFromBsAndRecalc();
    });

    /* Existing add/remove row/layer functions remain unchanged */
})();
</script>


                        <h4 class="mt-4 mb-3 text-primary fw-bold">Upload / Replace Post Work Photographs</h4>
                        <div class="row g-3">
    @php
        $files = ['earthwork_photograph', 'inlet', 'masonry_outlet', 'masonry_outlet_outer', 'display_board'];
    @endphp

    @foreach($files as $file)
        <div class="col-md-4">
            <label for="{{ $file }}" class="form-label fw-semibold text-muted">
                {{ ucwords(str_replace('_', ' ', $file)) }}
            </label>

            @if(!empty($postLevel->{$file}))
                <div class="mb-2 text-center">
                    <img src="{{ asset('storage/' . $postLevel->{$file}) }}"
                         alt="{{ $file }}"
                         class="img-fluid rounded border"
                         style="max-height: 150px; object-fit: cover;">
                    <div>
                        <a href="{{ asset('storage/' . $postLevel->{$file}) }}"
                           target="_blank"
                           class="small d-block mt-1 text-decoration-none text-primary">
                           View Full Image
                        </a>
                    </div>
                </div>
            @endif

            <input type="file"
                   class="form-control form-control-sm"
                   name="{{ $file }}"
                   id="{{ $file }}"
                   accept="image/*">
        </div>
    @endforeach
</div>

                        <div class="mt-4 text-center">
                            <button type="submit" class="btn btn-success" id="submit-btn">Update</button>
                            <a href="" class="btn btn-secondary ms-2">Cancel</a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection