@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">Water Harvesting Structure - Farm Pond</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</h5>
        </div>

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

<!-- Location & Pre/Post details (unchanged) -->
<div class="border rounded p-3 bg-white shadow-sm">
    <h5 class="text-primary fw-bold mb-3">W.H.S – Post Level Entry</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>{{ $query->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>{{ $query->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>{{ $query->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>{{ $query->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>{{ $query->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>{{ $query->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 class="d-flex align-items-center">
                <label class="fw-semibold text-muted me-2" style="width: 150px;">Measurement Date:</label>
                {{ optional($query->preWorkLevels->first())->measurement_date ? \Carbon\Carbon::parse($query->preWorkLevels->first()->measurement_date)->format('d/m/Y') : '-' }}
            </div>
        </div>

        <div class="col-md-6">
            <div class="mb-1">
                <span class="fw-semibold text-info">Post-Level</span>
            </div>
            <div class="d-flex align-items-center">
                <label class="fw-semibold text-muted me-2" style="width: 150px;">Measurement Date:</label>
                <span><input type="date" name="measurement_date" class="form-control form-control-sm"  required></span>
            </div>
        </div>
    </div>

    <div class="row mb-1">
        <div class="col-md-6">
            <div class="d-flex">
                <label class="fw-semibold text-muted me-2" style="width: 100px;">Lat:</label>
                <div>{{ $query->preWorkLevels->first()->lat ?? '-' }}</div>
                <label class="fw-semibold text-muted ms-3 me-2" style="width: 100px;">Long:</label>
                <div>{{  $query->preWorkLevels->first()->long ?? '-' }}</div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="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;" required>
                <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;" required>
            </div>
        </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)($query->waterHarvestingStructuresPlanning->first()->length ?? 0) }}m × {{ (int)($query->waterHarvestingStructuresPlanning->first()->width ?? 0) }}m × {{ (int)($query->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">
                <label class="fw-semibold text-muted me-2" style="width: 100px;">Size:</label>
                <div class="d-flex align-items-center gap-2">
                    <input type="text" name="length" class="form-control form-control-sm" style="width: 80px;" required> <span>m</span>
                    <span class="mx-1">×</span>
                    <input type="text" name="width" class="form-control form-control-sm" style="width: 80px;" required> <span>m</span>
                    <span class="mx-1">×</span>
                    <input type="text" name="height" class="form-control form-control-sm" style="width: 80px;"  required> <span>m</span>
                </div>
            </div>
        </div>
    </div>
</div>

<h4 class="mt-4 text-success text-center">Survey Data</h4>

<input type="hidden" name="baseline_id" value="{{ $baseline_id }}">

<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">
                <!-- BM Row -->
                <tr>
                    <td>TBM</td>
                    <td>
                        <input type="number" name="bs" id="bs-input"
                               class="form-control form-control-sm text-center" step="0.001" required>
                    </td>
                    <td></td>
                    <td></td>
                    <td>
                        <input type="number" name="hi" id="hi"
                               class="form-control form-control-sm text-center" readonly>
                    </td>
                    <td>
                        <input type="number" name="rl" id="rl" value="200"
                               class="form-control form-control-sm text-center">
                    </td>
                    <td>
                        <input type="text" name="remarks" class="form-control form-control-sm">
                    </td>
                </tr>

                <!-- First Layer header (static) -->
                <tr class="layer-header" data-layer="1">
                    <td colspan="5"><strong>1st Layer</strong></td>
                    <td></td>
                    <td></td>
                </tr>

                @php $uid = 1; @endphp
                @for ($i = 0; $i < 4; $i++)
                    <tr data-layer="{{ $uid }}">
                        <td>{{ $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="0.001"
                                   data-rl-id="rl-{{ $uid }}-{{ $i }}" required>
                        </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>
                        </td>
                        <td>
                            <input type="text"
                                   name="layers[{{ $uid }}][stations][{{ $i }}][remarks]"
                                   class="form-control form-control-sm text-center">
                        </td>
                    </tr>
                @endfor

                <tr class="average-row" data-layer="1">
                    <td colspan="5" class="text-end"><strong>Average</strong></td>
                    <td>
                        <input type="text"
                               name="layers[1][average_rl]"
                               class="form-control form-control-sm avg-input text-center"
                               readonly>
                    </td>
                    <td></td>
                </tr>
            </tbody>
        </table>

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

            

            <button type="button" class="btn btn-sm btn-danger ms-2" id="remove-layer-btn" onclick="removeLastLayer()">Remove Layer</button>
            <button type="button" class="btn btn-sm btn-success ms-2" id="add-row-btn" onclick="addRowToLastLayer()">Add Rows</button>
        </div>

        <h4 class="mt-4 mb-3 text-primary fw-bold">Upload Post Work Photographs</h4>

        <div class="row g-3">
            <div class="col-md-4">
                <label for="earthwork_photograph" class="form-label fw-semibold text-muted">Earthwork Photograph</label>
                <input type="file" class="form-control form-control-sm" name="earthwork_photograph"
                       id="earthwork_photograph" accept="image/*" required>
            </div>

            <div class="col-md-4">
                <label for="inlet" class="form-label fw-semibold text-muted">Inlet Photograph</label>
                <input type="file" class="form-control form-control-sm" name="inlet" id="inlet" accept="image/*" required>
            </div>

            <div class="col-md-4">
                <label for="masonry_outlet" class="form-label fw-semibold text-muted">Masonry Outlet (Inner) Photograph</label>
                <input type="file" class="form-control form-control-sm" name="masonry_outlet" id="masonry_outlet" accept="image/*" required>
            </div>

            <div class="col-md-4">
                <label for="masonry_outlet_outer" class="form-label fw-semibold text-muted">Masonry Outlet (Outer) Photograph</label>
                <input type="file" class="form-control form-control-sm" name="masonry_outlet_outer" id="masonry_outlet_outer" accept="image/*" required>
            </div>

            <div class="col-md-4">
                <label for="display_board" class="form-label fw-semibold text-muted">Display Board Photograph</label>
                <input type="file" class="form-control form-control-sm" name="display_board" id="display_board" accept="image/*" required>
            </div>
        </div>

        <div class="mt-4 text-center">
            <div class="mt-4 text-center" id="form-buttons">
                <button type="submit" class="btn btn-success" id="submit-btn" style="display:none;">Submit</button>
                <button type="reset" class="btn btn-secondary me-2" id="reset-btn">Reset</button>
            </div>
        </div>
    </div>
</div>


<script>
/* ====== CONFIG ====== */
let layerUID = (function() {
    const headers = document.querySelectorAll ? document.querySelectorAll('.layer-header') : [];
    let max = 1;
    headers.forEach(h => {
        const v = parseInt(h.getAttribute('data-layer')) || 0;
        if (v > max) max = v;
    });
    return max + 1;
})();
const MAX_LAYERS = 4;

/* ====== UTILS ====== */
function ordinal(n) {
    return (n === 1) ? '1st' : (n === 2) ? '2nd' : (n === 3) ? '3rd' : `${n}th`;
}

/* ====== LAYER / ROW GENERATION ====== */
function generateLayerRows(uid) {
    const fragment = document.createDocumentFragment();

    // Header row (no per-layer buttons)
    const header = document.createElement('tr');
    header.classList.add('layer-header');
    header.setAttribute('data-layer', uid);
    header.innerHTML = `
        <td colspan="5"><strong></strong></td>
        <td></td>
        <td></td>
    `;
    fragment.appendChild(header);

    // Default 4 station rows
    for (let i = 0; i < 4; i++) {
        const row = document.createElement('tr');
        row.setAttribute('data-layer', uid);
        row.innerHTML = `
            <td>${i + 1}</td>
            <td></td>
            <td><input type="number" class="form-control form-control-sm is-input text-center" step="0.001"></td>
            <td></td><td></td>
            <td><input type="text" class="form-control form-control-sm rl-input text-center" readonly></td>
            <td><input type="text" class="form-control form-control-sm remarks-input text-center"></td>
        `;
        fragment.appendChild(row);
    }

    // Average row
    const avgRow = document.createElement('tr');
    avgRow.classList.add('average-row');
    avgRow.setAttribute('data-layer', uid);
    avgRow.innerHTML = `
        <td colspan="5" class="text-end"><strong>Average</strong></td>
        <td><input type="text" class="form-control form-control-sm avg-input text-center" readonly></td>
        <td></td>
    `;
    fragment.appendChild(avgRow);

    return fragment;
}

/* add row to a specific layer (keeps working for programmatic usage) */
function addRowToLayer(uid) {
    const avgRow = document.querySelector(`tr.average-row[data-layer="${uid}"]`);
    if (!avgRow) return;

    const newRow = document.createElement('tr');
    newRow.setAttribute('data-layer', uid);
    newRow.innerHTML = `
        <td>0</td>
        <td></td>
        <td><input type="number" class="form-control form-control-sm is-input text-center" step="0.001"></td>
        <td></td><td></td>
        <td><input type="text" class="form-control form-control-sm rl-input text-center" readonly></td>
        <td><input type="text" class="form-control form-control-sm remarks-input text-center"></td>
    `;
    avgRow.parentNode.insertBefore(newRow, avgRow);

    reindexLayers();
    updateRLFields();
}

/* add row to the last layer (global +Row) */
function addRowToLastLayer() {
    const headers = Array.from(document.querySelectorAll('.layer-header'));
    if (headers.length === 0) return;
    const lastHeader = headers[headers.length - 1];
    const uid = lastHeader.getAttribute('data-layer');
    if (uid) addRowToLayer(uid);
}

/* ====== REINDEX / NAMING ====== */
function reindexLayers() {
    const layerHeaders = document.querySelectorAll('.layer-header');
    let layerIndex = 1;

    layerHeaders.forEach(header => {
        const uid = header.getAttribute('data-layer');
        const strong = header.querySelector('strong');
        if (strong) strong.innerText = `${ordinal(layerIndex)} Layer`;

        const stationRows = Array.from(document.querySelectorAll(`tr[data-layer="${uid}"]`))
            .filter(r => !r.classList.contains('layer-header') && !r.classList.contains('average-row') && !r.classList.contains('add-row-btn-row'));

        stationRows.forEach((row, stationIndex) => {
            const tds = row.querySelectorAll('td');
            if (tds[0]) tds[0].innerText = stationIndex + 1;

            const isInput = row.querySelector('.is-input') || row.querySelector('input[type="number"]');
            const rlInput = row.querySelector('.rl-input') || row.querySelector('input[readonly]');
            const remarksInput = row.querySelector('.remarks-input');

            const rlId = `rl-${layerIndex}-${stationIndex}`;

            if (isInput) {
                isInput.classList.add('is-input');
                isInput.setAttribute('name', `layers[${layerIndex}][stations][${stationIndex}][is]`);
                isInput.setAttribute('data-rl-id', rlId);
            }
            if (rlInput) {
                rlInput.classList.add('rl-input');
                rlInput.setAttribute('name', `layers[${layerIndex}][stations][${stationIndex}][rl]`);
                rlInput.setAttribute('id', rlId);
                rlInput.readOnly = true;
            }
            if (remarksInput) {
                remarksInput.setAttribute('name', `layers[${layerIndex}][stations][${stationIndex}][remarks]`);
            }
        });

        // update avg input name
        const avgRow = document.querySelector(`tr.average-row[data-layer="${uid}"]`);
        if (avgRow) {
            const avgInput = avgRow.querySelector('input.avg-input');
            if (avgInput) avgInput.setAttribute('name', `layers[${layerIndex}][average_rl]`);
        }

        layerIndex++;
    });
}

/* ====== RL / HI CALC ====== */
/* Delegated listener approach so listeners survive DOM changes */
function setupDelegatedListeners() {
    const stationBody = document.getElementById('station-body');
    if (!stationBody) return;
    if (stationBody._delegationSetup) return;

    stationBody.addEventListener('input', function (e) {
        if (e.target && e.target.matches('.is-input')) {
            updateRLFields();
        }
    });

    stationBody._delegationSetup = true;
}

function updateRLFields() {
    const hiEl = document.getElementById('hi');
    const hiVal = hiEl ? parseFloat(hiEl.value) : NaN;
    if (isNaN(hiVal)) {
        document.querySelectorAll('.rl-input').forEach(r => r.value = '');
        updateAllRLs();
        return;
    }

    document.querySelectorAll('.is-input').forEach(input => {
        const isVal = parseFloat(input.value);
        const rlId = input.getAttribute('data-rl-id');
        const rlInput = rlId ? document.getElementById(rlId) : (input.closest('tr') ? input.closest('tr').querySelector('.rl-input') : null);

        if (rlInput) {
            rlInput.value = (!isNaN(isVal)) ? (hiVal - isVal).toFixed(3) : '';
        }
    });

    updateAllRLs();
}

function updateAllRLs() {
    document.querySelectorAll('.layer-header').forEach(header => {
        const uid = header.getAttribute('data-layer');
        const rlInputs = Array.from(document.querySelectorAll(`tr[data-layer="${uid}"] .rl-input`));
        let sum = 0, count = 0;
        rlInputs.forEach(i => {
            const v = parseFloat(i.value);
            if (!isNaN(v)) { sum += v; count++; }
        });
        const avgInput = document.querySelector(`tr.average-row[data-layer="${uid}"] input.avg-input`);
        if (avgInput) avgInput.value = count ? (sum / count).toFixed(3) : '';
    });
}

/* ====== ADD / REMOVE LAYERS ====== */
function addLayer() {
    const currentLayers = document.querySelectorAll('.layer-header').length;
    if (currentLayers >= MAX_LAYERS) {
        alert("You can only add up to " + MAX_LAYERS + " layers.");
        return;
    }
    const stationBody = document.getElementById('station-body');
    const uid = layerUID++;
    const layerRows = generateLayerRows(uid);
    stationBody.appendChild(layerRows);

    reindexLayers();
    updateRLFields();

    updateButtonVisibility();
    toggleSubmitButton();
}

function removeLayer(uid) {
    document.querySelectorAll(`[data-layer="${uid}"]`).forEach(row => row.remove());
    reindexLayers();
    updateRLFields();
    updateAllRLs();
    updateButtonVisibility();
    toggleSubmitButton();
}

/* Remove the last layer in DOM order (used by global Remove button) */
function removeLastLayer() {
    const headers = Array.from(document.querySelectorAll('.layer-header'));
    if (headers.length === 0) return;
    // keep at least 1 layer — change this if you want to allow zero layers
    if (headers.length <= 1) {
        return;
    }
    const lastHeader = headers[headers.length - 1];
    const uid = lastHeader.getAttribute('data-layer');
    if (uid) removeLayer(uid);
}

/* ====== Button Visibility & Submit toggle ====== */
function updateButtonVisibility() {
    const addLayerBtn = document.getElementById('add-layer-btn');
    const removeLayerBtn = document.getElementById('remove-layer-btn');
    const currentLayers = document.querySelectorAll('.layer-header').length;

    if (addLayerBtn) {
        if (currentLayers < MAX_LAYERS) addLayerBtn.classList.remove('d-none');
        else addLayerBtn.classList.add('d-none');
    }

    if (removeLayerBtn) {
        if (currentLayers > 1) removeLayerBtn.classList.remove('d-none');
        else removeLayerBtn.classList.add('d-none');
    }
}

function toggleSubmitButton() {
    const submitBtn = document.getElementById('submit-btn');
    const resetBtn = document.getElementById('reset-btn');
    const currentLayers = document.querySelectorAll('.layer-header').length;

    if (submitBtn) submitBtn.style.display = (currentLayers <= MAX_LAYERS) ? 'inline-block' : 'none';
    if (resetBtn) resetBtn.style.display = 'inline-block';
}

/* ====== INITIALIZE ====== */
document.addEventListener('DOMContentLoaded', () => {
    const bsInput = document.getElementById('bs-input');
    const rlInput = document.getElementById('rl');
    const hiInput = document.getElementById('hi');

    function updateHI() {
        const bs = parseFloat(bsInput ? bsInput.value : NaN);
        const rl = parseFloat(rlInput ? rlInput.value : NaN);
        if (!isNaN(bs) && !isNaN(rl)) {
            if (hiInput) hiInput.value = (bs + rl).toFixed(3);
        } else {
            if (hiInput) hiInput.value = '';
        }
        updateRLFields();
    }

    if (bsInput) bsInput.addEventListener('input', updateHI);
    if (rlInput) rlInput.addEventListener('input', updateHI);
    if (hiInput) hiInput.addEventListener('input', updateRLFields);

    // delegated listeners
    setupDelegatedListeners();

    // initial indexing & calculation
    reindexLayers();
    updateRLFields();

    updateButtonVisibility();
    toggleSubmitButton();
});
</script>

@endsection