@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">
                <!-- Page pre-title -->
                <h2 class="page-title">
                    W.H.S Baseline Report
                </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 shadow-sm mx-auto">
            <div class="card-header bg-primary text-white">
                <h5 class="card-title mb-0">Water harvesting for climate resilient project with Citibank N.A.</h5>
            </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 pt-3 pb-2">
    <div class="row g-3">

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

      @php
        $labelStyle = 'min-width: 160px; margin-right: 12px;';
        $inputStyle = 'padding-left: 12px; padding-right: 12px;';
      @endphp

      <!-- Village -->
      <div class="col-md-6">
        <div class="d-flex align-items-center">
          <span class="text-muted small fw-bold" style="{{ $labelStyle }}">Village:</span>
          <div class="form-control-plaintext flex-grow-1 bg-light border rounded" style="{{ $inputStyle }}">
            {{ $data->village->name ?? 'N/A' }}
          </div>
        </div>
      </div>

      <!-- Panchayat -->
      <div class="col-md-6">
        <div class="d-flex align-items-center">
          <span class="text-muted small fw-bold" style="{{ $labelStyle }}">Panchayat:</span>
          <div class="form-control-plaintext flex-grow-1 bg-light border rounded" style="{{ $inputStyle }}">
            {{ $data->panchayat->name ?? 'N/A' }}
          </div>
        </div>
      </div>

      <!-- Block -->
      <div class="col-md-6">
        <div class="d-flex align-items-center">
          <span class="text-muted small fw-bold" style="{{ $labelStyle }}">Block:</span>
          <div class="form-control-plaintext flex-grow-1 bg-light border rounded" style="{{ $inputStyle }}">
            {{ $data->block->name ?? 'N/A' }}
          </div>
        </div>
      </div>

      <!-- District -->
      <div class="col-md-6">
        <div class="d-flex align-items-center">
          <span class="text-muted small fw-bold" style="{{ $labelStyle }}">District:</span>
          <div class="form-control-plaintext flex-grow-1 bg-light border rounded" style="{{ $inputStyle }}">
            {{ $data->district->name ?? 'N/A' }}
          </div>
        </div>
      </div>

      <!-- Beneficiary Name -->
      <div class="col-md-6">
        <div class="d-flex align-items-center">
          <span class="text-muted small fw-bold" style="{{ $labelStyle }}">Beneficiary Name:</span>
          <div class="form-control-plaintext flex-grow-1 bg-light border rounded" style="{{ $inputStyle }}">
            {{ $data->name_of_respondent ?? 'N/A' }}
          </div>
        </div>
      </div>

      <!-- Project Type -->
      <div class="col-md-6">
        <div class="d-flex align-items-center">
          <span class="text-muted small fw-bold" style="{{ $labelStyle }}">Project Type:</span>
          <div class="form-control-plaintext flex-grow-1 bg-light border rounded" style="{{ $inputStyle }}">
            {{ $data->projectType->name ?? 'N/A' }}
          </div>
        </div>
      </div>

      <!-- Dimensions -->
      <div class="col-md-6">
        <div class="d-flex align-items-center">
          <span class="text-muted small fw-bold" style="{{ $labelStyle }}">Dimensions (L×W×D):</span>
          <div class="form-control-plaintext flex-grow-1 bg-light border rounded" style="{{ $inputStyle }}">
            {{ $planning->length ?? 'N/A' }} m × {{ $planning->width ?? 'N/A' }} m × {{ $planning->depth_or_height ?? 'N/A' }} m
          </div>
        </div>
      </div>

      <!-- Plot No -->
      <div class="col-md-6">
        <div class="d-flex align-items-center">
          <label for="plot_khata" class="form-label small mb-0 fw-bold" 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 }}">{{ $land->plot_khata }}</option>
            @empty
              <option disabled>No plot data</option>
            @endforelse
          </select>
        </div>
      </div>

      <!-- Latitude -->
      <div class="col-md-6">
        <div class="d-flex align-items-center">
          <label for="lat" class="form-label small mb-0 fw-bold" style="{{ $labelStyle }}">Latitude:</label>
          <input type="text" id="lat" name="lat" class="form-control form-control-sm flex-grow-1" placeholder="Enter Latitude">
        </div>
      </div>

      <!-- Longitude -->
      <div class="col-md-6">
        <div class="d-flex align-items-center">
          <label for="long" class="form-label small mb-0 fw-bold" style="{{ $labelStyle }}">Longitude:</label>
          <input type="text" id="long" name="long" class="form-control form-control-sm flex-grow-1" placeholder="Enter Longitude">
        </div>
      </div>

      <!-- Measurement Date -->
      <div class="col-md-6">
        <div class="d-flex align-items-center">
          <label for="measurement_date" class="form-label small mb-0 fw-bold" style="{{ $labelStyle }}">Measurement Date:</label>
          <input type="date" name="measurement_date" id="measurement_date" class="form-control form-control-sm flex-grow-1" required>
        </div>
      </div>

    </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>
                                    <td>TBM</td>
                                    <td></td>
                                    <td><input type="number" step="any" name="bs" id="bs" class="form-control" placeholder="Enter BS" required></td>
                                    <td></td>
                                    <td></td>
                                    <td><input type="text" id="hi" name="hi" class="form-control" readonly placeholder="200 + BS"></td>
                                    <td></td>
                                    <td><input type="text" name="tbm_remarks" class="form-control"  placeholder="Remarks"></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">
                                    </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">
                            <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;" required>
                        </div>
                    </div>
                </div>

                <!-- Submit & Reset -->
                <div class="d-flex justify-content-end gap-2">
                    <button type="reset" class="btn btn-secondary">Reset</button>
                    <button type="submit" class="btn btn-primary">Submit</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');

        const createInput = (name, className = '', type = 'number', disabled = false, readOnly = false, defaultValue = '') => {
            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;
            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
        const tdIS = createTdWithInput(createInput(`stations[${newIndex}][is]`, 'is'));
        const tdBlank2 = document.createElement('td'); // Empty cell
        const tdBlank3 = document.createElement('td'); // Empty cell
        const tdRL = createTdWithInput(createInput(`stations[${newIndex}][rl]`, 'rl', 'number', false, true));
        const tdRemarks = createTdWithInput(createInput(`stations[${newIndex}][remarks]`, 'remarks', 'text'));

        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