@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>
            <!-- Page title actions -->
            <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">
        @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 d-flex justify-content-between align-items-center">
    <h4 class="mb-0">Pre Work Level Measurements</h4>
            </div>

            <form action="{{ route('storeMb') }}" method="POST" enctype="multipart/form-data" class="card-body">
                @csrf

<div class="card shadow-sm border mb-4">
  <div class="card-body p-2">
    <div class="row g-2">

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

      <!-- Beneficiary -->
      <div class="row g-2">

    <!-- Beneficiary Name -->
    <div class="col-12 col-md-6">
        <div class="d-flex align-items-center bg-light rounded px-2 py-1">
            <label class="small fw-semibold text-muted me-2 mb-0"
                   style="min-width:120px;">
                Beneficiary:
            </label>

            <div class="small flex-grow-1">
                {{ ucfirst($data->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 px-2 py-1">
            <label class="small fw-semibold text-muted me-2 mb-0"
                   style="min-width:120px;">
                L × W × D:
            </label>

            <div class="small flex-grow-1">
                {{ $planning->length ?? 'N/A' }}m ×
                {{ $planning->width ?? 'N/A' }}m ×
                {{ $planning->depth_or_height ?? 'N/A' }}m
            </div>
        </div>
    </div>

</div>

      <!-- Village -->
<div class="row g-2">

    @php
        $labelStyle = "min-width:105px;";
        $boxClass = "d-flex align-items-center bg-light rounded px-2 py-1";
        $valueClass = "small flex-grow-1";
    @endphp

    <!-- Village -->
    <div class="col-12 col-md-4">
        <div class="{{ $boxClass }}">
            <label class="small fw-semibold text-muted me-2 mb-0" style="{{ $labelStyle }}">
                Village:
            </label>
            <div class="{{ $valueClass }}">
                {{ ucfirst(strtolower($data->village->name ?? 'N/A')) }}
            </div>
        </div>
    </div>

    <!-- Panchayat -->
    <div class="col-12 col-md-4">
        <div class="{{ $boxClass }}">
            <label class="small fw-semibold text-muted me-2 mb-0" style="{{ $labelStyle }}">
                Panchayat:
            </label>
            <div class="{{ $valueClass }}">
                {{ ucfirst(strtolower($data->panchayat->name ?? 'N/A')) }}
            </div>
        </div>
    </div>

    <!-- Block -->
    <div class="col-12 col-md-4">
        <div class="{{ $boxClass }}">
            <label class="small fw-semibold text-muted me-2 mb-0" style="{{ $labelStyle }}">
                Block:
            </label>
            <div class="{{ $valueClass }}">
                {{ ucfirst(strtolower($data->block->name ?? 'N/A')) }}
            </div>
        </div>
    </div>

    <!-- District -->
    <div class="col-12 col-md-6">
        <div class="{{ $boxClass }}">
            <label class="small fw-semibold text-muted me-2 mb-0" style="{{ $labelStyle }}">
                District:
            </label>
            <div class="{{ $valueClass }}">
                {{ ucfirst(strtolower($data->district->name ?? 'N/A')) }}
            </div>
        </div>
    </div>

    <!-- Project Type -->
    <div class="col-12 col-md-6">
        <div class="{{ $boxClass }}">
            <label class="small fw-semibold text-muted me-2 mb-0" style="{{ $labelStyle }}">
                Project:
            </label>
            <div class="{{ $valueClass }}">
                {{ $data->projectType->name ?? 'N/A' }}
            </div>
        </div>
    </div>

    <!-- Plot No -->
    <div class="col-12 col-md-6">
        <div class="{{ $boxClass }}">
            <label class="small fw-semibold text-muted me-2 mb-0" style="{{ $labelStyle }}">
                Plot No:
            </label>
            <select name="plot_khata" id="plot_khata"
                    class="form-select form-select-sm flex-grow-1" required>
                @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="{{ $boxClass }}">
            <label class="small fw-semibold text-muted me-2 mb-0" style="{{ $labelStyle }}">
                Meas. Date:
            </label>
            <input type="date"
                   name="measurement_date"
                   class="form-control form-control-sm flex-grow-1"
                   value="{{ old('measurement_date', optional($data->measurement_date)->format('Y-m-d')) }}"
                   required>
        </div>
    </div>

    <!-- Latitude -->
    <div class="col-12 col-md-6">
        <div class="{{ $boxClass }}">
            <label class="small fw-semibold text-muted me-2 mb-0" style="{{ $labelStyle }}">
                Latitude:
            </label>
            <input type="text"
                   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="{{ $boxClass }}">
            <label class="small fw-semibold text-muted me-2 mb-0" style="{{ $labelStyle }}">
                Longitude:
            </label>
            <input type="text"
                   name="long"
                   value="{{ old('long', $planning->longitude ?? $data->long ?? '') }}"
                   class="form-control form-control-sm flex-grow-1"
                   readonly>
        </div>
    </div>

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

                <!-- BS/HI and Lat/Long -->
                <div class="row mb-1">
                    </div>

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

    <td class="fw-semibold">TBM</td>

    <td></td>

    <!-- BS -->
    <td>
        <input type="number"
               step="any"
               name="bs"
               id="bs"
               class="form-control form-control-sm text-center py-0"
               placeholder="BS"
               required>
    </td>

    <td></td>
    <td></td>

    <!-- HI -->
    <td>
        <input type="text"
               id="hi"
               name="hi"
               class="form-control form-control-sm text-center py-0"
               placeholder="200 + BS"
               readonly>
    </td>

    <td></td>

    <!-- Remarks -->
    <td>
        <input type="text"
               name="tbm_remarks"
               class="form-control form-control-sm py-0"
               placeholder="Remarks"
               required>
    </td>

    <td></td>

</tr>



                            <tbody id="stationBody">
                                <tr>
                                    <td>
                                        <input type="number" step="any" name="stations[1][station]" value="1" class="form-control form-control-sm text-center bg-light" readonly>
                                    </td>

                                    <td>
                                    <input type="number" step="any" name="stations[1][chainage]" value="0" class="form-control form-control-sm text-center bg-light">


                                    </td>
                                    <td></td>
                                    <td>
                                        <input type="number" step="any" name="stations[1][is]" class="form-control form-control-sm text-center is" data-row="1" required>
                                    </td>
                                    
                                    <td></td>
                                    <td></td>
                                    <td>
                                        <input type="number" step="any" name="stations[1][rl]" class="form-control form-control-sm text-center rl" readonly>
                                    </td>
                                    <td><input type="tex"  name="stations[1][remarks]" class="form-control form-control-sm text-center" ></td>

                                    <td>
                                        <button type="button" class="btn btn-sm btn-danger remove-row">Remove</button>
                                    </td>
                                </tr>
                                <tr class="table-secondary">
                                    <td colspan="6" class="text-end fw-bold">Average RL</td>
                                    
                                    <td class="fw-bold text-center"><input type="text" 
           id="averageRL" 
           name="average_level" 
           class="form-control form-control-sm text-center fw-bold bg-light border-primary rounded" 
           placeholder="Auto-calculated Avg RL" 
           readonly></td>
                                    
                                    <td class="fw-bold text-center"></td>
                                    <td class="fw-bold text-center"></td>
                                
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="card-footer d-flex justify-content-between align-items-center">
                        <button type="button" class="btn btn-success" onclick="addStationRow()">Add Row</button>
                        <div class="d-flex align-items-center gap-3 d-none">
                            <label for="picture" class="form-label fw-bold m-0">Add Picture:</label>
                            <input class="form-control" type="file" id="picture" name="picture" accept="image/*" style="max-width: 300px;">
                        </div>
                    </div>
                </div>

                <!-- Submit & Reset -->
            <div class="d-flex justify-content-center gap-2 mt-3">
  
              <button type="submit" class="btn btn-primary"> Submit</button>
              <button type="reset" class="btn btn-secondary"> Reset</button>
            </div>
            </form>
        </div>
    </div>
</div>

<!-- JavaScript for Dynamic Table Logic -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    let baseRL = 200.000;

    const bsInput = document.getElementById('bs');
    const hiInput = document.getElementById('hi');
    const stationBody = document.getElementById('stationBody');
    const averageRLDisplay = document.getElementById('averageRL');

    hiInput.value = baseRL.toFixed(3);

    bsInput.addEventListener('input', () => {
        const bsValue = parseFloat(bsInput.value);
        if (!isNaN(bsValue)) {
            const newHI = baseRL + bsValue;
            hiInput.value = newHI.toFixed(3);
            updateRLValues(newHI);
        } else {
            hiInput.value = '';
            clearRLValues();
        }
    });

    function updateRLValues(hi) {
        const rows = stationBody.querySelectorAll('tr');
        let sumRL = 0;
        let count = 0;

        rows.forEach(row => {
            if (row.classList.contains('table-secondary')) return;

            const isInput = row.querySelector('input.is');
            const rlInput = row.querySelector('input.rl');

            if (isInput && rlInput) {
                const isVal = parseFloat(isInput.value);
                if (!isNaN(isVal)) {
                    const rlVal = hi - isVal;
                    rlInput.value = rlVal.toFixed(3);
                    sumRL += rlVal;
                    count++;
                } else {
                    rlInput.value = '';
                }
            }
        });

        averageRLDisplay.value = count > 0 ? (sumRL / count).toFixed(3) : '';
    }

    function clearRLValues() {
        const rows = stationBody.querySelectorAll('tr');
        rows.forEach(row => {
            if (row.classList.contains('table-secondary')) return;
            const rlInput = row.querySelector('input.rl');
            if (rlInput) rlInput.value = '';
        });
        averageRLDisplay.value = '';
    }

    function renumberStations() {
        const rows = stationBody.querySelectorAll('tr:not(.table-secondary)');
        rows.forEach((row, index) => {
            const i = index + 1;

            const stationInput = row.querySelector('input[name^="stations"][name*="[station]"]');
            const chainageInput = row.querySelector('input[name^="stations"][name*="[chainage]"]');
            const isInput = row.querySelector('input.is');
            const rlInput = row.querySelector('input.rl');
            const remarksInput = row.querySelector('input.remarks');

            if (stationInput) {
                stationInput.name = `stations[${i}][station]`;
                stationInput.value = i;
            }
            if (chainageInput) chainageInput.name = `stations[${i}][chainage]`;
            if (isInput) isInput.name = `stations[${i}][is]`;
            if (rlInput) rlInput.name = `stations[${i}][rl]`;
            if (remarksInput) remarksInput.name = `stations[${i}][remarks]`;
        });
    }

    stationBody.addEventListener('input', function (event) {
        if (event.target.classList.contains('is')) {
            const hiVal = parseFloat(hiInput.value);
            if (!isNaN(hiVal)) {
                const row = event.target.closest('tr');
                const rlInput = row.querySelector('input.rl');
                const isVal = parseFloat(event.target.value);

                if (!isNaN(isVal)) {
                    const rlVal = hiVal - isVal;
                    rlInput.value = rlVal.toFixed(3);
                } else {
                    rlInput.value = '';
                }

                updateRLValues(hiVal);
            }
        }
    });

    stationBody.addEventListener('click', function (event) {
        if (event.target.classList.contains('remove-row')) {
            const row = event.target.closest('tr');
            const rowsCount = stationBody.querySelectorAll('tr:not(.table-secondary)').length;
            if (rowsCount > 1) {
                row.remove();
                const hiVal = parseFloat(hiInput.value);
                if (!isNaN(hiVal)) updateRLValues(hiVal);
                renumberStations();
            } else {
                alert('At least one station row must remain.');
            }
        }
    });

    window.addStationRow = function () {
        const currentRows = stationBody.querySelectorAll('tr:not(.table-secondary)');
        const newIndex = currentRows.length + 1;

        const tr = document.createElement('tr');

        // Updated createInput signature (added `required` parameter as last)
        const createInput = (name, className = '', type = 'number', disabled = false, readOnly = false, defaultValue = '', required = false) => {
            const input = document.createElement('input');
            input.type = type;
            input.name = name;
            input.className = `form-control form-control-sm text-center ${className}`.trim();
            input.step = 'any';
            input.disabled = disabled;
            input.readOnly = readOnly;
            input.value = defaultValue;
            if (required) input.required = true;
            return input;
        };

        const createTdWithInput = (input) => {
            const td = document.createElement('td');
            td.appendChild(input);
            return td;
        };

        // === 9 columns to match the first row ===
        const tdStation = createTdWithInput(createInput(`stations[${newIndex}][station]`, 'bg-light', 'number', false, true, newIndex));
        const tdChainage = createTdWithInput(createInput(`stations[${newIndex}][chainage]`, '', 'number', false, false, 0));
        const tdBlank1 = document.createElement('td'); // Empty cell

        // Make IS required — pass required=true as the last arg. Ensure type is 'number' and not boolean.
        const tdIS = createTdWithInput(createInput(`stations[${newIndex}][is]`, 'is', 'number', false, false, '', true));

        const tdBlank2 = document.createElement('td'); // Empty cell
        const tdBlank3 = document.createElement('td'); // Empty cell

        // RL should be readonly (computed), pass readOnly=true
        const tdRL = createTdWithInput(createInput(`stations[${newIndex}][rl]`, 'rl', 'number', false, true, '', false));
        const tdRemarks = createTdWithInput(createInput(`stations[${newIndex}][remarks]`, 'remarks', 'text', false, false, ''));

        const tdRemove = document.createElement('td');
        const removeBtn = document.createElement('button');
        removeBtn.type = 'button';
        removeBtn.className = 'btn btn-sm btn-danger remove-row';
        removeBtn.textContent = 'Remove';
        tdRemove.appendChild(removeBtn);

        // Append exactly 9 TDs
        [tdStation, tdChainage, tdBlank1, tdIS, tdBlank2, tdBlank3, tdRL, tdRemarks, tdRemove].forEach(td => tr.appendChild(td));

        const averageRow = stationBody.querySelector('.table-secondary');
        stationBody.insertBefore(tr, averageRow);

        renumberStations();
    };

    document.querySelectorAll('input[type="number"]').forEach(input => {
        input.step = 'any';
    });
});
</script>

@endsection