@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">W.H.S – Post Level Entry</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">W.H.S – Pre and Post Level Entry</h5>
        </div>
    
<div class="container">
        <!-- Project Details -->




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

<div class="row mb-2">
    <div class="col-md-6">
        <div class="d-flex">
            <label class="fw-semibold text-muted me-2" style="width: 140px;">Block:</label>
            <div>{{ $query->block->name ?? '-' }}</div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="d-flex">
            <label class="fw-semibold text-muted me-2" style="width: 140px;">District:</label>
            <div>{{ $query->district->name ?? '-' }}</div>
        </div>
    </div>
</div>


<div class="row mb-2">
    <div class="col-md-6 d-flex align-items-center">
        <label class="fw-semibold text-muted me-2" style="width: 160px;">Name of Beneficiary:</label>
        <div>{{ $query->name_of_respondent ?? '-' }}</div>
    </div>
</div>

<div class="row mb-2 bg-light">
    <div class="col-md-6 d-flex align-items-center">
        <label class="fw-semibold text-muted me-2" style="width: 160px;">Plot No.:</label>
        <div>{{ $query->plot_khata ?? '-' }}</div>
    </div>
    <div class="col-md-6 d-flex align-items-center">
        <label class="fw-semibold text-muted me-2" style="width: 160px;">Measurement Date:</label>
        <div>{{ $query->measurement_date ? \Carbon\Carbon::parse($query->measurement_date)->format('Y-m-d') : '-' }}</div>
    </div>
</div>

<div class="row mb-2">
    <div class="col-md-6 d-flex align-items-center">
        <label class="fw-semibold text-muted me-2" style="width: 160px;">Latitude:</label>
        <div>{{ $query->lat ?? '-' }}</div>
    </div>
    <div class="col-md-6 d-flex align-items-center">
        <label class="fw-semibold text-muted me-2" style="width: 160px;">Longitude:</label>
        <div>{{ $query->long ?? '-' }}</div>
    </div>
</div>

<div class="row mb-2 bg-light">
    <div class="col-md-6 d-flex align-items-center">
        <label class="fw-semibold text-muted me-2" style="width: 160px;">Pond Dimensions:</label>
        <div>
            {{ (int)($query->length ?? 0) }}m X {{ (int)($query->width ?? 0) }}m X {{ (int)($query->depth_or_height ?? 0) }}m
        </div>
    </div>
</div>



<h4 class="mt-4 text-success text-center">Survey Data</h4>    
<form id="levelForm" action="{{ route('postworklevel.store') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <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>BM</td>
                        <td><input type="number" name="bs" id="bs-input" class="form-control form-control-sm" step="0.001"></td>
                        <td></td>
                        <td></td>
                        <td><input type="number" name="hi" id="hi" class="form-control form-control-sm" readonly></td>
                        <td><input type="number" name="rl" id="rl" value="200" class="form-control form-control-sm"></td>
                        <td></td>
                    </tr>

                    <!-- First Layer -->
                    <tr class="layer-header" data-layer="1">
                        <td colspan="6"><strong>1st Layer</strong></td>
                        <td><button type="button" class="btn btn-sm btn-danger" onclick="removeLayer(1)">Remove</button></td>
                    </tr>

                    @for ($i = 0; $i < 4; $i++)
                        <tr data-layer="1">
                            <td>{{ $i + 1 }}</td>
                            <td></td>
                            <td><input type="number" name="layers[1][stations][{{ $i }}][is]" class="form-control form-control-sm" step="0.001"></td>
                            <td></td>
                            <td></td>
                            <td><input type="text" name="layers[1][stations][{{ $i }}][rl]" class="form-control form-control-sm" readonly></td>
                            <td></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]" class="form-control form-control-sm" readonly></td>
                        <td><input type="text" name="layers[1][prepostdiff]" class="form-control form-control-sm" readonly></td>
                    </tr>
                </tbody>
            </table>

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

            <h4 class="mt-4">Upload Post Work Photographs</h4>

            <div class="mb-3">
                <label for="inlet" class="form-label">Inlet Photo</label>
                <input type="file" class="form-control" name="inlet" id="inlet" accept="image/*">
            </div>
            <div class="mb-3">
                <label for="masonry_outlet" class="form-label">Masonry Outlet (Inner)</label>
                <input type="file" class="form-control" name="masonry_outlet" id="masonry_outlet" accept="image/*">
            </div>
            <div class="mb-3">
                <label for="masonry_outlet_outer">Masonry Outlet Outer</label>
                <input type="file" class="form-control" name="masonry_outlet_outer" id="masonry_outlet_outer" accept="image/*">
            </div>

            <div class="mt-4">
                <button type="submit" class="btn btn-success">Save</button>
            </div>
        </div>
    </div>
</form>

<script>
let layerCount = 1;

// Pass your backend $averageRl safely into JS variable
const backendAverageRl = parseFloat(@json($averageRl));

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

    const calculateHI = () => {
        const bs = parseFloat(bsInput.value);
        const rl = parseFloat(rlInput.value);
        if (!isNaN(bs) && !isNaN(rl)) {
            const hi = bs + rl;
            hiInput.value = hi.toFixed(3);
            updateAllRLs(hi);
        } else {
            hiInput.value = '';
            clearAllRLs();
        }
    };

    bsInput.addEventListener('input', calculateHI);
    rlInput.addEventListener('input', calculateHI);

    // Update RL when IS input changes dynamically
    document.addEventListener('input', function (e) {
        if (e.target.name && e.target.name.match(/\[is\]$/)) {
            updateAllRLs();
        }
    });
});

function addLayer() {
    layerCount++;
    const stationBody = document.getElementById('station-body');
    const layerId = layerCount;

    // Add layer header
    const header = document.createElement('tr');
    header.classList.add('layer-header');
    header.setAttribute('data-layer', layerId);
    header.innerHTML = `
        <td colspan="6"><strong>${layerId} Layer</strong></td>
        <td><button type="button" class="btn btn-sm btn-danger" onclick="removeLayer(${layerId})">Remove</button></td>
    `;
    stationBody.appendChild(header);

    // Add 4 station rows
    for (let i = 0; i < 4; i++) {
        const row = document.createElement('tr');
        row.setAttribute('data-layer', layerId);
        row.innerHTML = `
            <td>${i + 1}</td>
            <td></td>
            <td><input type="number" name="layers[${layerId}][stations][${i}][is]" class="form-control form-control-sm" step="0.001"></td>
            <td></td>
            <td></td>
            <td><input type="text" name="layers[${layerId}][stations][${i}][rl]" class="form-control form-control-sm" readonly></td>
            <td></td>
        `;
        stationBody.appendChild(row);
    }

    // Add average and prepostdiff row
    const avgRow = document.createElement('tr');
    avgRow.classList.add('average-row');
    avgRow.setAttribute('data-layer', layerId);
    avgRow.innerHTML = `
        <td colspan="5" class="text-end"><strong>Average</strong></td>
        <td><input type="text" name="layers[${layerId}][average]" class="form-control form-control-sm" readonly></td>
        <td><input type="text" name="layers[${layerId}][prepostdiff]" class="form-control form-control-sm" readonly></td>
    `;
    stationBody.appendChild(avgRow);
}

function removeLayer(layerId) {
    document.querySelectorAll(`tr[data-layer="${layerId}"]`).forEach(row => row.remove());
    updateAllRLs();
}

function updateAllRLs(currentHI = null) {
    const hi = currentHI !== null ? parseFloat(currentHI) : parseFloat(document.getElementById('hi').value);
    if (isNaN(hi)) {
        clearAllRLs();
        return;
    }

    // Collect unique layer IDs present in the table
    const layerIds = new Set();
    document.querySelectorAll('#station-body tr[data-layer]').forEach(row => {
        layerIds.add(row.getAttribute('data-layer'));
    });

    layerIds.forEach(layerId => {
        const isInputs = document.querySelectorAll(`input[name^="layers[${layerId}][stations]"][name$="[is]"]`);
        const rlInputs = document.querySelectorAll(`input[name^="layers[${layerId}][stations]"][name$="[rl]"]`);
        let total = 0, count = 0;

        isInputs.forEach((input, index) => {
            const isVal = parseFloat(input.value);
            const rlField = rlInputs[index];
            if (!isNaN(isVal) && rlField) {
                const rl = (hi - isVal).toFixed(3);
                rlField.value = rl;
                total += parseFloat(rl);
                count++;
            } else if (rlField) {
                rlField.value = '';
            }
        });

        const avgInput = document.querySelector(`input[name="layers[${layerId}][average]"]`);
        const diffInput = document.querySelector(`input[name="layers[${layerId}][prepostdiff]"]`);

        if (avgInput && diffInput && count > 0) {
            const avg = (total / count).toFixed(3);
            avgInput.value = avg;

            // Calculate difference with backend average RL for every layer
            diffInput.value = (( backendAverageRl).toFixed(3)-avg);
        } else if (avgInput && diffInput) {
            avgInput.value = '';
            diffInput.value = '';
        }
    });
}

function clearAllRLs() {
    document.querySelectorAll('input[name$="[rl]"]').forEach(input => input.value = '');
    document.querySelectorAll('input[name$="[average]"]').forEach(input => input.value = '');
    document.querySelectorAll('input[name$="[prepostdiff]"]').forEach(input => input.value = '');
}
</script>

</div>
</div>

@endsection