@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="/userData/create" class="btn btn-primary btn-5 d-none d-sm-inline-block">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-2">
                            <path d="M12 5l0 14" />
                            <path d="M5 12l14 0" />
                        </svg>
                      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">
              <form action="{{ route('measurement_book.store') }}" method="POST">
              @csrf
          <!-- 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-8">
                  @php
                $planning = $postLevel->baseline->waterHarvestingStructuresPlanning->first();
            @endphp

            {{ $planning->projectType->name ?? 'N/A' }}(
            {{ (int)($planning->length ?? 'N/A') }} x {{ (int)($planning->width ?? 'N/A') }} x {{ (int)($planning->depth_or_height ?? 'N/A') }}
            )
                </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>
        </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-6">
                    <input type="text" name="agency" class="form-control form-control-sm">
                </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">
      </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">
      </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">
            <thead>
              <tr>
                <th>S.N</th>
                <th>Particulars</th>
                <th>Unit</th>
                <th>Qty</th>
                <th>Rate</th>
                <th>Amount (Rs)</th>
                <th>Remarks</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td rowspan="2">1</td>
                <td style="text-align: justify; text-justify: inter-word;">
                  Earthwork in excavation(in Mass) in any kind of soil including hard soil, slushy muck, hard moorum soil with the help of crawler mounted Excavator like Poclain / Tata Hitachi up to a depth of 3.00 Metre from the existing bed level for digging of pond, Trench cum bund (TCB)and Field bunding (FB) & disposing/ removing the excavated spoil on the bund (Spoil-bank) as per direction and upto a dist. of 1000.00 Metre, with the help of required dumpers. Rate should include for excavation by Mechanical excavator & disposing the excavated spoil by Dumpers, Marching time of Mechanical equipments.			
                </td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
                <tr class="align-middle">
  <td class="text-wrap text-justify p-2">
    Excavation for pond
  </td>
  <td>
    <input type="text" name="items[1][unit]" class="form-control form-control-sm" value="Cum">
  </td>
  <td>
    <input type="text" name="items[1][qty]" class="form-control form-control-sm" value="{{ $qc['payable_quantity'] }}">
  </td>
  <td>
    <input type="text" name="items[1][rate]" class="form-control form-control-sm" value="{{ $rateSheet['pond_earth_work'] ?? '' }}">
  </td>
  <td>
    <input type="number" step="any" name="items[1][amount]" class="form-control form-control-sm">
  </td>
  <td>
    <input type="text" name="items[1][remarks]" class="form-control form-control-sm">
  </td>
</tr>



              <tr class="align-middle">
  <td>2</td>
  <td class="text-wrap text-justify p-2">
    Fine Dressing & Levelling of the excavated spoil on bund (spoil-bank) with the help of Mechanical excavator for proper compaction & finally by manual labour as per direction. Rate should include the earth cutting & filling to suit the site requirement
  </td>
  <td><input type="text" name="items[2][unit]" class="form-control form-control-sm" value="Sqm"></td>
  <td><input type="text" name="items[2][qty]" class="form-control form-control-sm" value="{{ $qc['payable_dressing_quantity'] }}"></td>
  <td><input type="text" name="items[2][rate]" class="form-control form-control-sm" value="{{ $rateSheet['bund_dressing_and_compaction'] ?? '' }}"></td>
  <td><input type="number" step="any" name="items[2][amount]" class="form-control form-control-sm"></td>
  <td><input type="text" name="items[2][remarks]" class="form-control form-control-sm"></td>
</tr>

<tr class="align-middle">
  <td>3</td>
  <td class="text-wrap text-justify p-2">
    Outlet work – Supplying & laying NP2 RCC spun pipe 300mm dia with collar in lines and level and providing approved jointing materials and joint properly as per direction of E/I
  </td>
  <td><input type="text" name="items[3][unit]" class="form-control form-control-sm" value="RM"></td>
  <td><input type="text" step="any" name="outlet_work_payable_quantity" class="form-control form-control-sm" value="{{ $qc->outlet_work_estimated_quantity }}"></td>
  <td><input type="text" name="outlet_work_payable_quantity_rate" class="form-control form-control-sm" value="{{ $rateSheet['outlet_hume_pipe'] ?? '' }}"></td>
  <td>
    @php
      $amount = ($qc->outlet_work_payable_quantity ?? 0) * ($rateSheet['outlet_hume_pipe'] ?? 0);
    @endphp
    <input type="number" step="any" name="outlet_work_payable_quantity_rate_amount" value="{{ number_format($amount, 2, '.', '') }}" class="form-control form-control-sm" readonly>
  </td>
  <td><input type="text" name="items[3][remarks]" class="form-control form-control-sm"></td>
</tr>

<tr class="align-middle">
  <td>4</td>
  <td class="text-wrap text-justify p-2">
    Supplying, constructing random rubble masonry work using trap stone boulders of 200–300 mm size in cement sand mortar (1:6) in foundations, superstructure, manholes, ducts, drains etc., including fair cutting, waste, bonding, plumbing, lining, levelling, flushing, raking joints, scaffolding and curing, all as per drawings, specifications, and directions of the Engineer/ Consultant. Includes all materials, tools, plant and labour complete in all respects.
  </td>
  <td><input type="text" name="items[4][unit]" class="form-control form-control-sm" value="Cum"></td>
  <td><input type="text" name="items[4][qty]" class="form-control form-control-sm" value="{{ $qc['outlet_work_payable_quantity'] }}"></td>
  <td><input type="text" name="items[4][rate]" class="form-control form-control-sm" value="{{ $rateSheet['outlet_masonry'] ?? '' }}"></td>
  <td><input type="number" step="any" name="items[4][amount]" class="form-control form-control-sm"></td>
  <td><input type="text" name="items[4][remarks]" class="form-control form-control-sm"></td>
</tr>

              <tr class="align-middle">
  <td>5</td>
  <td class="text-wrap text-justify p-2">Silt trap earthwork in excavation</td>
  <td><input type="text" name="items[5][unit]" class="form-control form-control-sm" value="Cum"></td>
  
  
  
  <td><input type="text" name="silt_trap_payable_qty" id="silt_trap_payable_qty" class="form-control form-control-sm" value="{{ number_format($qc->silt_trap_payable_qty ?? 0, 3) }}"></td>
  
  
  
  <td><input type="text" name="items[5][rate]" id="silt_trap_payable_qty_rate" class="form-control form-control-sm" value="{{ $rateSheet['inlet_earthwork'] ?? '' }}"></td>
  <td>
    @php
      $amount = ($rateSheet['inlet_earthwork'] ?? 0) * ($qc->outlet_work_payable_quantity ?? 0);
    @endphp
    <input type="number" step="any" name="silt_trap_payable_qty_amount" id="silt_trap_payable_qty_amount" value="{{ number_format($amount, 2, '.', '') }}" class="form-control form-control-sm" readonly>
  </td>
  <td><input type="text" name="items[5][remarks]" class="form-control form-control-sm"></td>
</tr>

<tr class="align-middle">
  <td>6</td>
  <td class="text-wrap text-justify p-2">
    Inlet Pitching Work – Earthwork excavation in ordinary soil, dressing of soil as per direction of E/I.
  </td>
  <td><input type="text" name="items[6][unit]" class="form-control form-control-sm" value="Cum"></td>
  <td><input type="text" name="items[6][qty]" class="form-control form-control-sm" value="{{ $qc['inlet_payable_qty'] }}"></td>
  <td><input type="text" name="items[6][rate]" class="form-control form-control-sm" value="{{ $rateSheet['inlet_earthwork'] ?? '' }}"></td>
  <td><input type="number" step="any" name="items[6][amount]" class="form-control form-control-sm"></td>
  <td><input type="text" name="items[6][remarks]" class="form-control form-control-sm"></td>
</tr>

<tr class="align-middle">
  <td>7</td>
  <td class="text-wrap text-justify p-2">
    Inlet Stone Pitching – Supplying and laying (properly as per design and drawing) rip-rap with good quality of dry boulders (200–300 mm size), including cost of materials, royalty, taxes etc., excluding carriage, as per specification and direction of E/I.
  </td>
  <td><input type="text" name="items[7][unit]" class="form-control form-control-sm" value="Sqm"></td>
  <td><input type="text" name="items[7][qty]" class="form-control form-control-sm" value="{{ $qc['stone_pitching_inlet_payable_qty'] }}"></td>
  <td><input type="text" name="items[7][rate]" class="form-control form-control-sm" value="{{ $rateSheet['inlet_stone_pitching'] ?? '' }}"></td>
  <td><input type="number" step="any" name="items[7][amount]" class="form-control form-control-sm"></td>
  <td><input type="text" name="items[7][remarks]" class="form-control form-control-sm"></td>
</tr>

<tr class="align-middle bg-light fw-bold">
  <td>8</td>
  <td class="text-wrap text-justify p-2">Display Board (1m × 1m × 0.3m)</td>
  <td colspan="5"></td>
  <td></td>
</tr>

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

<tr class="align-middle">
  <td>8.B</td>
  <td class="text-wrap text-justify p-2">
    Supplying, constructing one or more brick thick burnt clay brickwork (Foundation and Superstructure)
  </td>
  <td><input type="text" name="items[10][unit]" class="form-control form-control-sm" value="Cum"></td>
  <td><input type="text" name="items[10][qty]" class="form-control form-control-sm" value="{{ $qc['payable_brick_work_qty'] }}"></td>
  <td><input type="text" name="items[10][rate]" class="form-control form-control-sm" value="{{ $rateSheet['display_board_brick_work'] ?? '' }}"></td>
  <td><input type="number" step="any" name="items[10][amount]" class="form-control form-control-sm"></td>
  <td><input type="text" name="items[10][remarks]" class="form-control form-control-sm"></td>
</tr>


              <tr class="align-middle">
  <td>8.C</td>
  <td class="text-wrap text-justify p-2">
    Supplying and laying plaster with (1:6) cement sand mortar at all heights and depths, above and below finished ground level, to faces of walls, pillars, columns – 12 mm thick (in one operation)
  </td>
  <td><input type="text" name="items[11][unit]" class="form-control form-control-sm" value="Sqm"></td>
  <td><input type="text" name="items[11][qty]" class="form-control form-control-sm" value="{{ $qc['payable_plaster_work_qty'] }}"></td>
  <td><input type="text" name="items[11][rate]" class="form-control form-control-sm" value="{{ $rateSheet['display_board_plaster'] ?? '' }}"></td>
  <td><input type="number" step="any" name="items[11][amount]" class="form-control form-control-sm"></td>
  <td><input type="text" name="items[11][remarks]" class="form-control form-control-sm"></td>
</tr>

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

            </tbody>
          </table>


              <!-- Totals -->
            <div class="row mb-2 align-items-center">
  <label for="total_amount" class="col-sm-9 col-form-label text-end fw-bold">Total</label>
  <div class="col-sm-3">
    <input type="number" step="any" name="total_amount" id="total_amount" class="form-control form-control-sm">
  </div>
</div>

<div class="row mb-2 align-items-center">
  <label for="gst_percent" class="col-sm-9 col-form-label text-end fw-bold">GST %</label>
  <div class="col-sm-3">
    <input type="number" step="any" name="gst_percent" id="gst_percent" class="form-control form-control-sm" value="18">
  </div>
</div>

<div class="row mb-2 align-items-center">
  <label for="gst_amount" class="col-sm-9 col-form-label text-end fw-bold">GST Amount</label>
  <div class="col-sm-3">
    <input type="number" step="any" name="gst_amount" id="gst_amount" class="form-control form-control-sm">
  </div>
</div>

<div class="row mb-2 align-items-center">
  <label for="grand_total" class="col-sm-9 col-form-label text-end fw-bold">Grand Total</label>
  <div class="col-sm-3">
    <input type="number" step="any" name="grand_total" id="grand_total" class="form-control form-control-sm">
  </div>
</div>

<div class="row mb-2 align-items-center">
  <label for="round_grand_total" class="col-sm-9 col-form-label text-end fw-bold">Round Grand Total</label>
  <div class="col-sm-3">
    <input type="number" step="any" name="round_grand_total" id="round_grand_total" class="form-control form-control-sm">
  </div>
</div>

              <br>
              <button type="submit" class="btn btn-primary">Submit</button>
</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