@extends('layouts.usermain')

@section('main-container')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<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. Measurement Book Report
                </h2>
            </div>
            <!-- Page title actions -->
            <div class="col-auto ms-auto d-print-none">
                <div class="btn-list">
                    <span class="d-none d-sm-inline">
                        <a href="{{ route('export.excel') }}" class="btn btn-1">Download Excel Report</a>
                    </span>
                    <a href="/measurement_book" class="btn btn-primary btn-5 d-none d-sm-inline-block">
                    
                      Add Measurement
                    </a>  
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Page body -->
<div class="page-body">
    <div class="container-xl">
        <div class="card mb-4 shadow-sm">
            <div class="card-header bg-primary text-white">
         Measurement Sheet
            </div>

      <div class="card-body">
        <div class="table-responsive">
          @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
             
        
        
        <form action="{{ route('measurement_book.store') }}" method="POST">
              @csrf
              
      <input type="hidden" name="baseline_id" value="{{ request('id') }}">

          <!-- Title sections with smaller margin-bottom -->
              <div class="col-sm-12 text-center border p-2 fw-bold fs-5 mb-1">
                Water Harvesting Structure
              </div>

            <!-- Form rows with smaller vertical spacing -->
            <div class="mb-2 row">
                <label class="col-sm-2 col-form-label py-1">Name of Work</label>
                <div class="col-sm-4 ">
                  @php
                $planning = $postLevel->baseline->waterHarvestingStructuresPlanning->first();
            @endphp
<input type="text"  name="dimension" 
       value="{{ $planning->projectType->name ?? 'N/A' }} ({{ (int)($planning->length ?? 0) }} x {{ (int)($planning->width ?? 0) }} x {{ (int)($planning->depth_or_height ?? 0) }})" 
       class="form-control form-control-sm" readonly>
                </div>
            </div>

            <div class="mb-2 row">
                <label class="col-sm-2 col-form-label py-1">Situation of Work</label>
                <div class="col-sm-6  ">
                    <input type="text" name="situation_of_work" value="Earthwork excavation & dressing activities completed" class="form-control form-control-sm">
                </div>
            </div>

  <div class="row g-2 mb-2 align-items-center">
    <!-- Village -->
    <div class="col-sm-3">
      <div class="col-sm-10">
        <div class="d-flex align-items-center">
            <label  class="form-label mb-0 me-1">Village:</label>
            <select name="village_id" id="village_id" class="form-select form-select-sm">
                <option value="{{ $postLevel->baseline->village_id }}">{{ $postLevel->baseline->village->name ?? 'N/A' }}</option>
            </select>
        </div>
      </div>  
    </div>

    <!-- Panchayat -->
    <div class="col-sm-3">
      <div class="col-sm-10">
        <div class="d-flex align-items-center">
            <label for="panchayat_id" class="form-label mb-0 me-1 fw-semibold text-nowrap">Panchayat:</label>
            <select name="panchayat_id" id="panchayat_id" class="form-select form-select-sm">
                <option value="{{ $postLevel->baseline->panchayat_id }}">{{ $postLevel->baseline->panchayat->name ?? 'N/A' }}</option>
            </select>
        </div>
    </div>
  </div>

    <!-- Block -->
    <div class="col-sm-3">
      <div class="col-sm-10">
        <div class="d-flex align-items-center">
            <label for="block_id" class="form-label mb-0 me-1 fw-semibold text-nowrap">Block:</label>
            <select name="block_id" id="block_id" class="form-select form-select-sm">
                <option value="{{ $postLevel->baseline->block_id }}">{{ $postLevel->baseline->block->name ?? 'N/A' }}</option>
            </select>
        </div>
    </div>
  </div>

    <!-- District -->
     <div class="col-sm-3">
      <div class="col-sm-10">
        <div class="d-flex align-items-center">
            <label for="district_id" class="form-label mb-0 me-1 fw-semibold text-nowrap">District:</label>
            <select name="district_id" id="district_id" class="form-select form-select-sm">
                <option value="{{ $postLevel->baseline->district_id }}">{{ $postLevel->baseline->district->name ?? 'N/A' }}</option>
            </select>

<input type="hidden" name="state_id" value="{{ $postLevel->baseline->state_id }}" class="form-select form-select-sm">
<input type="hidden" name="unit_id" value="{{ $postLevel->baseline->unit_id }}" class="form-select form-select-sm">

        </div>
    </div>
  </div>
</div>

            <div class="mb-2 row bg-light">
                <label class="col-sm-3 col-form-label py-1">Agency by which work is Executed</label>
                <div class="col-sm-5">
                    <input type="text" name="agency" class="form-control form-control-sm" required>
                </div>
            </div>

            
  <div class="mb-2 row gx-3 align-items-center">
      <!-- Pre Work Measurement Date -->
      <div class="col-md-8 d-flex align-items-center">
          <label for="date_of_pre_work_measurement" class="form-label mb-0 me-2">
              Date of Pre Work Measurement:
          </label>
          <input type="date"
                name="date_of_pre_work_measurement" id="date_of_pre_work_measurement" value="{{ $preMeasurementDate }}" class="form-control form-control-sm w-auto">
      </div>

      <!-- Post Work Measurement Date -->
      <div class="col-md-4 d-flex align-items-center">
          <label for="date_of_post_work_measurement" class="form-label mb-0 me-2   flex-shrink-0">
              Date of Post Work Measurement:
          </label>
          <input type="date"
                name="date_of_post_work_measurement"
                id="date_of_post_work_measurement"
                value="{{ $postLevel['measurement_date'] ?? '' }}"
                class="form-control form-control-sm w-auto">
      </div>
  </div>

  <div class="mb-2 row gx-3 align-items-center bg-light">
      <!-- Work Start Date -->
      <div class="col-md-8 d-flex align-items-center">
          <label for="work_start_date" class="form-label mb-0 me-2  flex-shrink-0">
              Period of Work (Start Date):
          </label>
          <input type="date" name="work_start_date" id="work_start_date" class="form-control form-control-sm w-auto" required>
      </div>

      <!-- Work End Date -->
      <div class="col-md-4 d-flex align-items-center">
          <label for="work_end_date" class="form-label mb-0 me-2 fw-semibold text-nowrap flex-shrink-0">
              Period of Work (End Date):
          </label>
          <input type="date" name="work_end_date" id="work_end_date" class="form-control form-control-sm w-auto" required>
      </div>
  </div>



            <!-- Beneficiary Section -->
            <h3 class="mt-3 mb-2 text-info">Beneficiary</h3>

            <div class="mb-2 row gx-2 align-items-center">
              <div class="col-md-3 d-flex">
          <label for="name_of_respondent" class="me-2 fw-semibold text-nowrap" style="min-width: 160px;">
              Name of the Beneficiary:
          </label>
          <input type="text" name="name_of_respondent" id="name_of_respondent"
                value="{{ $planning->baseline->name_of_respondent ?? 'N/A' }}" class="form-control form-control-sm">
      </div>

      <div class="col-md-3 d-flex">
          <label for="plot_no" class="me-2 fw-semibold text-nowrap" style="min-width: 80px;">
              Plot No.:
          </label>
          <input type="text" name="plot_no" id="plot_no"
                value="{{ $data['plot_khata'] }}" class="form-control form-control-sm">
      </div>

    <div class="col-md-3 d-flex">
          <label class="me-2 fw-bold"> Latitude:
          </label>
          <input type="text" name="latitude" id="latitude"
                value="{{ $data['lat'] }}" class="form-control form-control-sm">
      </div>

    <div class="col-md-3 d-flex">
          <label class="me-2 fw-bold"> Longitude:
          </label>
          <input type="text" name="longitude" id="longitude"
                value="{{ $data['long'] }}" class="form-control form-control-sm">
      </div>
  </div>
    
<div class="mt-5">              
              <!-- Particulars Section (Dynamic Items) -->
        <h3>Work Items</h3>
<table class="table table-bordered table-sm align-middle">
  <thead class="table-light text-center">
    <tr>
      <th style="width:5%">S.N</th>
      <th style="width:45%">Particulars</th>
      <th style="width:8%">Unit</th>
      <th style="width:10%">Qty</th>
      <th style="width:10%">Rate</th>
      <th style="width:12%">Amount (Rs)</th>
      <th style="width:10%">Remarks</th>
    </tr>
  </thead>
  <tbody>
    <!-- Row 1 -->
    <tr>
      <td rowspan="2" class="text-center">1</td>
      <td style="text-align: justify;">
        Earthwork in excavation (in Mass) in any kind of soil including hard soil, slushy muck, hard moorum soil...
      </td>
      <td colspan="5" class="bg-light text-muted text-center">—</td>
    </tr>
    <tr>
      <td class="text-justify p-2">Excavation for pond</td>
      <td><input type="text" name="items[1][unit]" value="Cum" class="form-control form-control-sm text-center" readonly></td>
      <td><input type="text" name="items[1][qty]" value="{{ $qc['payable_quantity'] }}" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[1][rate]" value="{{ $rateSheet['pond_earth_work'] ?? '' }}" class="form-control form-control-sm text-end"></td>
      <td><input type="number" step="any" name="items[1][amount]" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[1][remarks]" class="form-control form-control-sm"></td>
    </tr>

    <!-- Row 2 -->
    <tr>
      <td class="text-center">2</td>
      <td class="text-justify p-2">Fine Dressing & Levelling of the excavated spoil...</td>
      <td><input type="text" name="items[2][unit]" value="Sqm" class="form-control form-control-sm text-center" readonly></td>
      <td><input type="text" name="items[2][qty]" value="{{ $qc['payable_dressing_quantity'] }}" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[2][rate]" value="{{ $rateSheet['bund_dressing_and_compaction'] ?? '' }}" class="form-control form-control-sm text-end"></td>
      <td><input type="number" step="any" name="items[2][amount]" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[2][remarks]" class="form-control form-control-sm"></td>
    </tr>

    <!-- Row 3 -->
    <tr>
      <td class="text-center">3</td>
      <td class="text-justify p-2">Outlet work – Supplying & laying NP2 RCC spun pipe...</td>
      <td><input type="text" name="items[3][unit]" value="RM" class="form-control form-control-sm text-center" readonly></td>
      <td><input type="text" name="items[3][qty]" value="{{ $qc->outlet_work_estimated_quantity }}" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[3][rate]" value="{{ $rateSheet['outlet_hume_pipe'] ?? '' }}" class="form-control form-control-sm text-end"></td>
      <td><input type="number" step="any" name="items[3][amount]" value="{{ number_format(($qc->outlet_work_payable_quantity ?? 0) * ($rateSheet['outlet_hume_pipe'] ?? 0), 2, '.', '') }}" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[3][remarks]" class="form-control form-control-sm"></td>
    </tr>

    <!-- Row 4 -->
    <tr>
      <td class="text-center">4</td>
      <td class="text-justify p-2">Supplying, constructing random rubble masonry work...</td>
      <td><input type="text" name="items[4][unit]" value="Cum" class="form-control form-control-sm text-center" readonly></td>
      <td><input type="text" name="items[4][qty]" value="{{ $qc['outlet_work_payable_quantity'] }}" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[4][rate]" value="{{ $rateSheet['outlet_masonry'] ?? '' }}" class="form-control form-control-sm text-end"></td>
      <td><input type="number" step="any" name="items[4][amount]" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[4][remarks]" class="form-control form-control-sm"></td>
    </tr>

    <!-- Row 5 -->
    <tr>
      <td class="text-center">5</td>
      <td class="text-justify p-2">Silt trap earthwork in excavation</td>
      <td><input type="text" name="items[5][unit]" value="Cum" class="form-control form-control-sm text-center" readonly></td>
      <td><input type="text" name="items[5][qty]" value="{{ number_format($qc->silt_trap_payable_qty ?? 0, 3) }}" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[5][rate]" value="{{ $rateSheet['inlet_earthwork'] ?? '' }}" class="form-control form-control-sm text-end"></td>
      <td><input type="number" step="any" name="items[5][amount]" value="{{ number_format(($rateSheet['inlet_earthwork'] ?? 0) * ($qc->outlet_work_payable_quantity ?? 0), 2, '.', '') }}" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[5][remarks]" class="form-control form-control-sm"></td>
    </tr>

    <!-- Row 6 -->
    <tr>
      <td class="text-center">6</td>
      <td class="text-justify p-2">Inlet Pitching Work – Earthwork excavation...</td>
      <td><input type="text" name="items[6][unit]" value="Cum" class="form-control form-control-sm text-center" readonly></td>
      <td><input type="text" name="items[6][qty]" value="{{ $qc['inlet_payable_qty'] }}" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[6][rate]" value="{{ $rateSheet['inlet_earthwork'] ?? '' }}" class="form-control form-control-sm text-end"></td>
      <td><input type="number" step="any" name="items[6][amount]" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[6][remarks]" class="form-control form-control-sm"></td>
    </tr>

    <!-- Row 7 -->
    <tr>
      <td class="text-center">7</td>
      <td class="text-justify p-2">Inlet Stone Pitching – Supplying and laying rip-rap...</td>
      <td><input type="text" name="items[7][unit]" value="Sqm" class="form-control form-control-sm text-center" readonly></td>
      <td><input type="text" name="items[7][qty]" value="{{ $qc['stone_pitching_inlet_payable_qty'] }}" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[7][rate]" value="{{ $rateSheet['inlet_stone_pitching'] ?? '' }}" class="form-control form-control-sm text-end"></td>
      <td><input type="number" step="any" name="items[7][amount]" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[7][remarks]" class="form-control form-control-sm"></td>
    </tr>

    <!-- Row 8 Main Header -->
    <tr class="fw-bold bg-light">
      <td class="text-center">8</td>
      <td class="text-justify p-2">Display Board (1m × 1m × 0.3m)</td>
      <td colspan="5" class="bg-light text-muted text-center">—</td>
    </tr>

    <!-- Row 8.A -->
    <tr>
      <td class="text-center">8.A</td>
      <td class="text-justify p-2">Earth work in excavation</td>
      <td><input type="text" name="items[9][unit]" value="Cum" class="form-control form-control-sm text-center" readonly></td>
      <td><input type="text" name="items[9][qty]" value="{{ $qc['payable_excavation_qty'] }}" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[9][rate]" value="{{ $rateSheet['display_board_earthwork'] ?? '' }}" class="form-control form-control-sm text-end"></td>
      <td><input type="number" step="any" name="items[9][amount]" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[9][remarks]" class="form-control form-control-sm"></td>
    </tr>

    <!-- Row 8.B -->
    <tr>
      <td class="text-center">8.B</td>
      <td class="text-justify p-2">Supplying, constructing burnt clay brickwork...</td>
      <td><input type="text" name="items[10][unit]" value="Cum" class="form-control form-control-sm text-center" readonly></td>
      <td><input type="text" name="items[10][qty]" value="{{ $qc['payable_brick_work_qty'] }}" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[10][rate]" value="{{ $rateSheet['display_board_brick_work'] ?? '' }}" class="form-control form-control-sm text-end"></td>
      <td><input type="number" step="any" name="items[10][amount]" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[10][remarks]" class="form-control form-control-sm"></td>
    </tr>

    <!-- Row 8.C -->
    <tr>
      <td class="text-center">8.C</td>
      <td class="text-justify p-2">Supplying and laying plaster with cement mortar (1:6)...</td>
      <td><input type="text" name="items[11][unit]" value="Sqm" class="form-control form-control-sm text-center" readonly></td>
      <td><input type="text" name="items[11][qty]" value="{{ $qc['payable_plaster_work_qty'] }}" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[11][rate]" value="{{ $rateSheet['display_board_plaster'] ?? '' }}" class="form-control form-control-sm text-end"></td>
      <td><input type="number" step="any" name="items[11][amount]" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[11][remarks]" class="form-control form-control-sm"></td>
    </tr>

    <!-- Row 8.D -->
    <tr>
      <td class="text-center">8.D</td>
      <td class="text-justify p-2">Wall writing with synthetic paint as per site in-charge</td>
      <td><input type="text" name="items[12][unit]" value="Sqm" class="form-control form-control-sm text-center" readonly></td>
      <td><input type="text" name="items[12][qty]" value="{{ $qc['payable_wall_writing_qty'] }}" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[12][rate]" value="{{ $rateSheet['display_board_wall_writing'] ?? '' }}" class="form-control form-control-sm text-end"></td>
      <td><input type="number" step="any" name="items[12][amount]" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[12][remarks]" class="form-control form-control-sm"></td>
    </tr>

    <!-- Row 9 -->
    <tr>
      <td class="text-center">9</td>
      <td class="text-justify p-2">Grass Turfing – Fine Dressing of canal banks or embankment...</td>
      <td><input type="text" name="items[13][unit]" value="Sqm" class="form-control form-control-sm text-center" readonly></td>
      <td><input type="text" name="items[13][qty]" value="{{ $qc['grass_payable_qty'] }}" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[13][rate]" value="{{ $rateSheet['grass_turfing'] ?? '' }}" class="form-control form-control-sm text-end"></td>
      <td><input type="number" step="any" name="items[13][amount]" class="form-control form-control-sm text-end" readonly></td>
      <td><input type="text" name="items[13][remarks]" class="form-control form-control-sm"></td>
    </tr>

    <!-- Totals -->
    <tr class="fw-bold table-light">
      <td colspan="5" class="text-end">Total</td>
      <td><input type="number" step="any" id="total_amount" name="total" class="form-control form-control-sm text-end" readonly></td>
      <td></td>
    </tr>
    <tr>
      <td colspan="5" class="text-end fw-bold">GST %</td>
      <td>
        <div class="input-group input-group-sm">
          <input type="number" step="any" id="gst_percent" name="gst_per" value="18" class="form-control text-end">
          <span class="input-group-text">%</span>
        </div>
      </td>
      <td></td>
    </tr>
    <tr class="table-light">
      <td colspan="5" class="text-end fw-bold">GST Amount</td>
      <td><input type="number" step="any" id="gst_amount" name="gst" class="form-control form-control-sm text-end" readonly></td>
      <td></td>
    </tr>
    <tr>
      <td colspan="5" class="text-end fw-bold">Grand Total</td>
      <td><input type="number" step="any" id="grand_total" name="grand_total" class="form-control form-control-sm text-end" readonly></td>
      <td></td>
    </tr>
    <tr class="table-light">
      <td colspan="5" class="text-end fw-bold">Round Grand Total</td>
      <td><input type="number" step="any" id="round_grand_total" name="rounded_total" class="form-control form-control-sm text-end fw-bold bg-light" readonly></td>
      <td></td>
    </tr>
  </tbody>
</table>

      <div class="text-center">
    <button type="submit" class="btn btn-primary">Submit</button>
    <button type="reset" class="btn btn-secondary">Reset</button>
</div>
</form>

<!-- Simple JS to clone item block -->
</div>
            </div>
        </div>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const qtyInputs = document.querySelectorAll('input[name^="items"][name$="[qty]"]');
    const rateInputs = document.querySelectorAll('input[name^="items"][name$="[rate]"]');
    const gstPercentInput = document.getElementById('gst_percent');

    qtyInputs.forEach(input => {
        input.addEventListener('input', updateRowAndTotals);
    });

    rateInputs.forEach(input => {
        input.addEventListener('input', updateRowAndTotals);
    });

    gstPercentInput.addEventListener('input', updateTotals);

    function updateRowAndTotals() {
        const row = this.closest('tr');
        const qty = parseFloat(row.querySelector('input[name$="[qty]"]').value) || 0;
        const rate = parseFloat(row.querySelector('input[name$="[rate]"]').value) || 0;
        const amount = qty * rate;

        const amountInput = row.querySelector('input[name$="[amount]"]');
        amountInput.value = amount.toFixed(2);

        updateTotals();
    }

    function updateTotals() {
        let totalAmount = 0;
        const amountInputs = document.querySelectorAll('input[name^="items"][name$="[amount]"]');

        amountInputs.forEach(input => {
            totalAmount += parseFloat(input.value) || 0;
        });

        document.getElementById('total_amount').value = totalAmount.toFixed(2);

        const gstPercent = parseFloat(gstPercentInput.value) || 0;
        const gstAmount = (totalAmount * gstPercent) / 100;
        document.getElementById('gst_amount').value = gstAmount.toFixed(2);

        const grandTotal = totalAmount + gstAmount;
        document.getElementById('grand_total').value = grandTotal.toFixed(2);

        document.getElementById('round_grand_total').value = Math.round(grandTotal);
    }

    // 👉 New: Also calculate all row amounts once on load:
    function updateAllRowAmounts() {
        const rows = document.querySelectorAll('tbody tr');

        rows.forEach(row => {
            const qtyInput = row.querySelector('input[name$="[qty]"]');
            const rateInput = row.querySelector('input[name$="[rate]"]');
            const amountInput = row.querySelector('input[name$="[amount]"]');

            if (qtyInput && rateInput && amountInput) {
                const qty = parseFloat(qtyInput.value) || 0;
                const rate = parseFloat(rateInput.value) || 0;
                const amount = qty * rate;
                amountInput.value = amount.toFixed(2);
            }
        });

        updateTotals();
    }

    // 👉 Call once on load:
    updateAllRowAmounts();
});

</script>




@endsection