@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">Water Harvesting Structure – Farm Pond</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> Excel Report
                    </a>
                    <a href="{{ route('farmers.create') }}" class="btn btn-primary">
                        <i class="ti ti-plus me-1"></i> Add Quantity Calculation
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Flash Messages -->
<div class="container-xl">
   @if (session('success'))
    <div class="alert alert-success mt-2">{{ session('success') }}</div>
@endif

@if (session('error'))
    <div class="alert alert-danger mt-2">{{ session('error') }}</div>
@endif

@if (session('info'))
    <div class="alert alert-info mt-2">{{ session('info') }}</div>
@endif
</div>

<!-- Main Content -->
<div class="container-xl">
     <div class="card mb-4">
                        <div class="card-header bg-info text-white">
            <h4 class="mb-0">Add Quantity Calculation</h4>
        </div>

        <div class="card-body">

            <!-- Project Details -->
            <div class="row mb-2">
                <div class="col-md-6 d-flex">
                    <label class="me-2 fw-bold">Village:</label>
                    <div>{{ $query->village->name ?? '-' }}</div>
                </div>
                <div class="col-md-6 d-flex">
                    <label class="me-2 fw-bold">Panchayat:</label>
                    <div>{{ $query->panchayat->name ?? '-' }}</div>
                </div>
            </div>

<div class="row mb-2 bg-light">
    <div class="col-md-6 d-flex">
        <label class="me-2 fw-bold">Block:</label>
        <div>{{ $query->block->name ?? '-' }}</div>
    </div>
    <div class="col-md-6 d-flex">
        <label class="me-2 fw-bold">District:</label>
        <div>{{ $query->district->name ?? '-' }}</div>
    </div>
</div>

<div class="row mb-2">
    <div class="col-md-6 d-flex">
        <label class="me-2 fw-bold">Name of Beneficiary:</label>
        <div>{{ $query->name_of_respondent ?? '-' }}</div>
    </div>
    <div class="col-md-6 d-flex">
        <label class="me-2 fw-bold">Plot No.:</label>
        <div>{{ $query->land->plot_khata ?? '-' }}</div>
    </div>
</div>

<div class="row mb-2 bg-light">
    <div class="col-md-6 d-flex">
        <label class="me-2 fw-bold">Measurement Date:</label>
        <div>{{ $date }}</div>
    </div>
    <div class="col-md-3 d-flex">
        <label class="me-2 fw-bold">Latitude:</label>
        <div>{{ $query->postLevel->lat ?? '-' }}</div>
    </div>
     <div class="col-md-3 d-flex">
        <label class="me-2 fw-bold">Longitude:</label>
        <div>{{ $query->postLevel->long ?? '-' }}</div>
    </div>
</div>

<div class="row mb-2">
   
    <div class="col-md-6 d-flex align-items-center">
  <label class="me-2 fw-bold mb-0">Pond Dimensions:</label>
  <input type="text" name="dimension" class="form-control-plaintext"
         value="{{ (int)($query->postLevel->length ?? 0) }}m × {{ (int)($query->postLevel->width ?? 0) }}m × {{ (int)($query->postLevel->height ?? 0) }}m"
         readonly>
</div>
</div>
</div>

            <!-- Survey Data -->
            
<form id="levelForm" action="{{ route('QuantityCalculation.store') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <input type="hidden" name="baseline_id" value="{{ $query->id  }}">

 <div class="card mb-4">
     <div class="card-header bg-secondary text-white">
        <h4 class="mb-0">Earthwork Quantity Calculation</h4>
    </div>
    <div class="card-body px-2 py-3">
        <div class="table-responsive">


<table class="table card-table table-bordered table-vcenter text-center">
    <thead class="bg-light">
        <tr>
            <td>Avg. Top Level</td>
            <td>Avg. Bottom Level</td>
            <td>Avg. Depth (mtr)</td>
            <td>Avg. Length (mtr)</td>
            <td>Avg. Width (mtr)</td>
            <td>Avg. Area (Sqm)</td>
            <td>Qty (Cum)</td>
        </tr>
    </thead>
    <tbody>
        @for($i = 1; $i <= $layer; $i++)
            @php
                $layerName = match($i) {
                    1 => '1st Layer',
                    2 => '2nd Layer',
                    3 => '3rd Layer',
                    4 => '4th Layer',
                };
            @endphp

            <tr style="font-weight: bold; background-color: #e8f4ff; text-align: left;">
                <td colspan="7" class="text-center py-1 px-1">
                    {{ $layerName }} Layer
                </td>
            </tr>

            <tr style="background-color: white; text-align: center;">
                {{-- Top Level --}}
                <td>
                    <input type="number" step="0.001"
                           name="average_estimates[{{ $layerName }}][avg_top_level]"
                           value="{{ $i == 1 
                                        ? number_format((float)$averageRl, 3, '.', '') 
                                        : number_format($post_averages[$i-2]->average_rl ?? 0, 3) }}"
                           style="width: 100%; box-sizing: border-box; text-align: center;">
                </td>

                {{-- Bottom Level --}}
                @if($post_averages->isNotEmpty())
                    <td>
                        <input type="number" step="0.001"
                               name="average_estimates[{{ $layerName }}][avg_bottom_level]"
                               value="{{ number_format($post_averages[$i-1]->average_rl ?? 0, 3) }}"
                               style="width: 100%; box-sizing: border-box; text-align: center;">
                    </td>
                @endif

                {{-- Depth --}}
                <td>
                    <input type="number" step="0.001"
                           name="average_estimates[{{ $layerName }}][avg_depth]"
                           value=""
                           style="width: 100%; box-sizing: border-box; text-align: center;">
                </td>

                {{-- Length --}}
                <td>
                    <input type="number" step="0.001"
                           name="average_estimates[{{ $layerName }}][avg_length]"
                           style="width: 100%; box-sizing: border-box; text-align: center;" required>
                </td>

                {{-- Width --}}
                <td>
                    <input type="number" step="0.001"
                           name="average_estimates[{{ $layerName }}][avg_width]"
                           style="width: 100%; box-sizing: border-box; text-align: center;" required>
                </td>

                {{-- Area --}}
                <td>
                    <input type="number" step="0.001"
                           name="average_estimates[{{ $layerName }}][avg_area]"
                           style="width: 100%; box-sizing: border-box; text-align: center;">
                </td>

                {{-- Quantity --}}
                <td>
                    <input type="number" step="0.001"
                           name="average_estimates[{{ $layerName }}][qty]"
                           style="width: 100%; box-sizing: border-box; text-align: center;">
                </td>
            </tr>
        @endfor

        {{-- Totals and Remarks --}}
        <tr style="background-color: white; text-align: center;">
            <td></td>
            <td>Total Depth</td>
            <td><input type="number" step="0.001" name="total_depth" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
            <td></td>
            <td></td>
            <td>Total Quantity</td>
            <td><input type="number" step="0.001" name="total_quantity" value="old" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
        </tr>
        <tr style="background-color: white; text-align: center;">
            <td colspan="6" class="text-end">Estimated quantity</td>
            <td><input type="number" step="0.001" name="estimated_quantity" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
        </tr>
        <tr style="background-color: white; text-align: center;">
            <td colspan="6" class="text-end"><strong>Payable Quantity</strong></td>
            <td><input type="number" step="0.001" name="payable_quantity" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
        </tr>
        <tr style="background-color: white; text-align: center;">
            <td colspan="3" class="text-end">Remarks for Depth:-</td>
            <td colspan="4"><input type="text" name="remarks_for_depth" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
        </tr>
        <tr style="background-color: white; text-align: center;">
            <td colspan="3" class="text-end">Remarks for length, Width and Area :-</td>
            <td colspan="4"><input type="text" name="remarks_for_length" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
        </tr>
        <tr style="background-color: white; text-align: center;">
            <td colspan="3" class="text-end">Remarks for Volume of earth work:-</td>
            <td colspan="4"><input type="text" name="remarks_for_volume" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
        </tr>
    </tbody>
</table>

</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Get unique layer keys from input names like average_estimates[...][...]
    function getLayerKeys() {
        const keys = new Set();
        document.querySelectorAll('input[name^="average_estimates["]').forEach(inp => {
            const name = inp.getAttribute('name') || '';
            const m = name.match(/^average_estimates\[([^\]]+)\]\[/);
            if (m) keys.add(m[1]);
        });
        return Array.from(keys);
    }

    // Core calculator: computes depth, area, qty for each layer and totals
    function calculateAll() {
        const layerKeys = getLayerKeys();
        let totalDepth = 0;
        let totalQuantity = 0;

        layerKeys.forEach(key => {
            // use CSS.escape to safely select names containing spaces etc.
            const top     = document.querySelector(`input[name="average_estimates[${CSS.escape(key)}][avg_top_level]"]`);
            const bottom  = document.querySelector(`input[name="average_estimates[${CSS.escape(key)}][avg_bottom_level]"]`);
            const depth   = document.querySelector(`input[name="average_estimates[${CSS.escape(key)}][avg_depth]"]`);
            const length  = document.querySelector(`input[name="average_estimates[${CSS.escape(key)}][avg_length]"]`);
            const width   = document.querySelector(`input[name="average_estimates[${CSS.escape(key)}][avg_width]"]`);
            const area    = document.querySelector(`input[name="average_estimates[${CSS.escape(key)}][avg_area]"]`);
            const qty     = document.querySelector(`input[name="average_estimates[${CSS.escape(key)}][qty]"]`);

            // compute depth (top - bottom)
            let depthVal = NaN;
            if (top && bottom && depth) {
                const t = parseFloat(top.value);
                const b = parseFloat(bottom.value);
                if (isFinite(t) && isFinite(b)) {
                    depthVal = +(t - b).toFixed(3);
                    depth.value = depthVal.toFixed(3);
                    totalDepth += depthVal;
                } else {
                    depth.value = '';
                }
            }

            // compute area (length * width)
            let areaVal = NaN;
            if (length && width && area) {
                const L = parseFloat(length.value);
                const W = parseFloat(width.value);
                if (isFinite(L) && isFinite(W)) {
                    areaVal = +(L * W).toFixed(3);
                    area.value = areaVal.toFixed(3);
                } else {
                    area.value = '';
                }
            }

            // compute qty = depth * area (if both numeric), else keep manual qty if provided
            if (qty) {
                if (isFinite(depthVal) && isFinite(areaVal)) {
                    const q = +(depthVal * areaVal).toFixed(3);
                    qty.value = q.toFixed(3);
                    totalQuantity += q;
                } else {
                    const manual = parseFloat(qty.value);
                    if (isFinite(manual)) {
                        totalQuantity += manual;
                    } else {
                        qty.value = '';
                    }
                }
            }
        });

        // Write totals (always show with 3 decimals)
        const totalDepthEl = document.querySelector('input[name="total_depth"]');
        if (totalDepthEl) totalDepthEl.value = totalDepth.toFixed(3);

        const totalQtyEl = document.querySelector('input[name="total_quantity"]');
        if (totalQtyEl) totalQtyEl.value = totalQuantity.toFixed(3);
    }

    // Run on load
    calculateAll();

    // Recalculate on any input change (delegated)
    document.addEventListener('input', function (e) {
        const el = e.target;
        if (!el || el.tagName !== 'INPUT') return;
        // If the changed input is related to average_estimates (top/bottom/length/width/qty), recalc.
        // We simply call calculateAll() — it's fast and robust.
        calculateAll();
    });

    // Recalculate when DOM changes (rows/layers added or removed)
    const container = document.getElementById('station-body') || document.body;
    const mo = new MutationObserver(() => {
        setTimeout(calculateAll, 40); // small delay to allow DOM changes to settle
    });
    mo.observe(container, { childList: true, subtree: true });

    // Expose for manual calls (optional)
    window.recalculateDepthsAndTotals = calculateAll;
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    function updatePayableQuantity() {
        const estInput = document.querySelector('input[name="estimated_quantity"]');
        const totalInput = document.querySelector('input[name="total_quantity"]');
        const payableInput = document.querySelector('input[name="payable_quantity"]');

        if (estInput && totalInput && payableInput) {
            const estQty = parseFloat(estInput.value);
            const totalQty = parseFloat(totalInput.value);

            if (!isNaN(estQty) && !isNaN(totalQty)) {
                const minQty = Math.min(estQty, totalQty);
                payableInput.value = minQty.toFixed(3);
            } else {
                payableInput.value = '';
            }
        }
    }

    // Initial run
    updatePayableQuantity();

    // Recalculate on changes
    document.querySelectorAll('input[name="estimated_quantity"], input[name="total_quantity"]').forEach(input => {
        input.addEventListener('input', updatePayableQuantity);
    });
});
</script>

 <div class="card mb-4">
        <div class="card-header bg-info text-white">
            <h4 class="mb-0">Measurements for Bund and Quantity Calculation for Dressing Area</h4>
    </div>

    <div class="card-body">
        <div class="table-responsive">
            <table class="table card-table table-bordered table-vcenter text-center">
                <thead class="bg-light">
                    <tr>
                        <td>Particulars</td>
                        <td>Avg Length (mtr)</td>
                        <td>Avg Bottom Width (mtr)</td>
                        <td>Avg Height (mtr)</td>
                        <td>Top Width (mtr)</td>
                        <td>Slant Length (mtr)</td>
                        <td>Frequency</td>
                        <td>Dressing Area (sqm)</td>
                    </tr>
                </thead>
                <tbody>
                    @for($i = 0; $i < 4; $i++)
                        <tr>
                            <td>
                                <input type="text" name="bunds[{{ $i }}][particular]"
                                       value="Bund {{ ['I','II','III','IV'][$i] }}"
                                       class="text-center" style="width: 100%; box-sizing: border-box; text-align: center;" readonly>
                            </td>
                            <td><input type="number" step="0.001" name="bunds[{{ $i }}][avg_length]" class="avg-length" style="width: 100%; box-sizing: border-box; text-align: center;"  required></td>
                            <td><input type="number" step="0.001" name="bunds[{{ $i }}][avg_bottom_width]" class="avg-bottom-width" style="width: 100%; box-sizing: border-box; text-align: center;" required></td>
                            <td><input type="number" step="0.001" name="bunds[{{ $i }}][avg_height]" class=" avg-height" style="width: 100%; box-sizing: border-box; text-align: center;" required></td>
                            <td><input type="number" step="0.001" name="bunds[{{ $i }}][top_width]" class="text-center top-width" style="width: 100%; box-sizing: border-box; text-align: center;" required></td>
                            <td><input type="number" step="0.001" name="bunds[{{ $i }}][slant_length]" class="slant-length" style="width: 100%; box-sizing: border-box; text-align: center;" required></td>
                            <td><input type="number" step="0.001" name="bunds[{{ $i }}][frequency]" class="frequency" style="width: 100%; box-sizing: border-box; text-align: center;" required></td>
                            <td><input type="number" step="0.001" name="bunds[{{ $i }}][dressing_area]" class="dressing-area" style="width: 100%; box-sizing: border-box; text-align: center;" readonly></td>
                        </tr>
                    @endfor

                    <tr class="bg-light fw-bold">
                        <td>Avg/Total</td>
                        <td><input type="text" id="avg_length" class="text-center" style="width: 100%; box-sizing: border-box; text-align: center;" readonly></td>
                        <td><input type="text" id="avg_bottom_width" class="text-center" style="width: 100%; box-sizing: border-box; text-align: center;" readonly></td>
                        <td><input type="text" id="avg_height" class="" style="width: 100%; box-sizing: border-box; text-align: center;" readonly></td>
                        <td></td>
                        <td><input type="text" id="avg_slant_length" class="text-center" style="width: 100%; box-sizing: border-box; text-align: center;" readonly></td>
                        <td></td>
                        <td><input type="text" id="avg_dressing_area" class="text-center" style="width: 100%; box-sizing: border-box; text-align: center;" readonly></td>
                    </tr>

                    <tr>
                        <td colspan="7" class="text-end"> Estimated Dressing Area</td>
                        <td colspan="1">
                            <input type="number" step="0.001" name="estimated_dressing_area" id="estimated_dressing_area"   value="{{ old('estimated_dressing_area') }}"  style="width: 100%; box-sizing: border-box; text-align: center;">
                        </td>
                    </tr>

                    <tr>
                        <td colspan="7"  class="text-end"><strong>Payable Quantity</strong></td>
                        <td colspan="1">
                            <input type="number" step="0.001" id="payable_dressing_quantity" name="payable_dressing_quantity" value="{{ old('payable_dressing_quantity') }}" style="width: 100%; box-sizing: border-box; text-align: center;">
                        </td>
                    </tr>

                    <tr>
                        <td colspan="4"  class="text-end">Remarks for bund and bund volume</td>
                        <td colspan="4">
                            <input type="text" name="remarks" style="width: 100%; box-sizing: border-box; text-align: center;">
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    function updatePayableQuantity() {
        const avgArea = parseFloat(document.getElementById('avg_dressing_area').value) || 0;
        const estimatedArea = parseFloat(document.getElementById('estimated_dressing_area').value) || 0;

        const lesser = Math.min(avgArea, estimatedArea);
        document.getElementById('payable_dressing_quantity').value = lesser.toFixed(3);
    }

    document.getElementById('estimated_dressing_area').addEventListener('input', updatePayableQuantity);

    // If avg_dressing_area can also change dynamically, add event listener for it:
    // document.getElementById('avg_dressing_area').addEventListener('input', updatePayableQuantity);
</script>




<script>
    document.addEventListener('DOMContentLoaded', function () {
        const calculate = () => {
            const rows = document.querySelectorAll('tbody tr');

            let totalLength = 0, totalBottomWidth = 0, totalHeight = 0, totalSlantLength = 0, totalDressingArea = 0;
            let count = 0;

            rows.forEach(row => {
                const lengthInput = row.querySelector('.avg-length');
                const bottomWidthInput = row.querySelector('.avg-bottom-width');
                const heightInput = row.querySelector('.avg-height');
                const slantLengthInput = row.querySelector('.slant-length');
                const topWidthInput = row.querySelector('.top-width');
                const frequencyInput = row.querySelector('.frequency');
                const dressingAreaInput = row.querySelector('.dressing-area');

                if (!lengthInput || !slantLengthInput || !frequencyInput || !topWidthInput || !dressingAreaInput) return;

                const avgLength = parseFloat(lengthInput.value) || 0;
                const avgBottomWidth = parseFloat(bottomWidthInput?.value) || 0;
                const avgHeight = parseFloat(heightInput?.value) || 0;
                const slantLength = parseFloat(slantLengthInput.value) || 0;
                const topWidth = parseFloat(topWidthInput.value) || 0;
                const frequency = parseFloat(frequencyInput.value) || 0;

                // Dressing Area Calculation for row
                const dressingArea = (avgLength * slantLength * frequency) + (avgLength * topWidth);
                if (!isNaN(dressingArea)) {
                    dressingAreaInput.value = dressingArea.toFixed(3);
                }

                // Totals for average and sum
                totalLength += avgLength;
                totalBottomWidth += avgBottomWidth;
                totalHeight += avgHeight;
                totalSlantLength += slantLength;
                totalDressingArea += dressingArea;
                count++;
            });

            // Set Averages and Sum
            if (count > 0) {
                document.getElementById('avg_length').value = (totalLength / count).toFixed(3);
                document.getElementById('avg_bottom_width').value = (totalBottomWidth / count).toFixed(3);
                document.getElementById('avg_height').value = (totalHeight / count).toFixed(3);
                document.getElementById('avg_slant_length').value = (totalSlantLength / count).toFixed(3);

                // SUM for dressing area
                document.getElementById('avg_dressing_area').value = totalDressingArea.toFixed(3);
            }
        };

        // Trigger on input changes
        document.querySelectorAll('.avg-length, .avg-bottom-width, .avg-height, .slant-length, .top-width, .frequency')
            .forEach(input => {
                input.addEventListener('input', calculate);
            });

        // Trigger on page load
        calculate();
    });
</script>




 <div class="card mb-4">
            <div class="card-header bg-secondary text-white">
            <h4 class="mb-0">Outlet Work </h4>
    </div>
    <div class="card-body px-2 py-3">
       <table class="table card-table table-bordered table-vcenter text-center">
    <thead class="bg-light">

                <tr class="bg-light">
                    <td>Particulars</td>
                    <td>Avg Length (mtr)</td>
                    <td>Avg Width (mtr)</td>
                    <td>AVG Thickness/Dia (mtr)</td>
                    <td>Qty(Cum)</td>
                </tr>
            </thead>
            <tbody id="masonryTable">
                <tr>
                    <td>Hume Pipe's Length and Diameter</td>
                    <td><input type="number" step="0.001" name="hume_pipe_length" id="hume_pipe_length" style="width: 100%; text-align: center;" required></td>
                    <td></td>
                    <td><input type="number" step="0.001" name="hume_pipe_avg_thickness" id="hume_pipe_avg_thickness" style="width: 100%; text-align: center;" required></td>
                    <td></td>
                </tr>

                <tr>
                    <td>Estimated qty(m)</td>
                    <td><input type="number" step="0.001" name="estimated_qty_only" id="estimated_qty" style="width: 100%; text-align: center;"required></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>

                <tr>
                    <td><strong>Payable quantity (m)</strong></td>
                    <td><input type="number" step="0.001" name="outlet_work_estimated_quantity" id="outlet_work_estimated_quantity" style="width: 100%; text-align: center;" required></td>
                    <td colspan="2"></td>
                    <td></td>
                </tr>

                <!-- Masonry Work Inner -->
                <tr>
                    <td><input type="text" name="particulars[]"  value="Masonry work (inner side of pond)" 
       style="width: 100%; text-align: center; border: none; outline: none; background: transparent;" readonly>
                    </td>
                    <td><input type="text" name="avg_length[]" class="avg_length" style="width: 100%; text-align: center;" required></td>
                    <td><input type="text" name="avg_width[]" class="avg_width" style="width: 100%; text-align: center;" required></td>
                    <td><input type="text" name="avg_depth[]" id="avg_depth_inner" class="avg_depth" style="width: 100%; text-align: center;" required></td>
                    <td><input type="text" name="qty[]" class="qty" style="width: 100%; text-align: center;" readonly></td>
                </tr>

                <!-- Masonry Work Outer -->
                <tr>
                    <td><input type="text" name="particulars[]" value="Masonry work (outer side of pond)" style="width: 100%; text-align: center; border: none; outline: none; background: transparent;" readonly></td>
                    <td><input type="text" name="avg_length[]" class="avg_length" style="width: 100%; text-align: center;"></td>
                    <td><input type="text" name="avg_width[]" class="avg_width" style="width: 100%; text-align: center;"></td>
                    <td><input type="text" name="avg_depth[]" id="avg_depth_outer" class="avg_depth" style="width: 100%; text-align: center;"></td>
                    <td><input type="text" name="qty[]" class="qty" style="width: 100%; text-align: center;" readonly></td>
                </tr>

                <!-- Both Side -->
                <tr>
                    <td><input type="text" name="particulars[]" value="Masonry work (both side)" style="width: 100%; text-align: center; border: none; outline: none; background: transparent;" readonly></td>
                    <td><input type="text" name="avg_length[]" id="avg_length_total" class="avg_length_total" style="width: 100%; text-align: center;" ></td>
                    <td><input type="text" name="avg_width[]" id="avg_width_both" class="avg_width" style="width: 100%; text-align: center;" ></td>
                    <td><input type="text" name="avg_depth[]" id="avg_depth_avg" class="avg_depth" style="width: 100%; text-align: center;"     ></td>
                    <td><input type="text" name="qty[]" id="qtycal" class="qty" style="width: 100%; text-align: center;" readonly></td>
                </tr>

                <!-- Deduction -->
                <tr>
                    <td class="text-end" colspan="4">Deduction of hume pipe</td>
                    
                    <td><input type="text" name="deduction_of_hume_pipe" id="deduction_of_hume_pipe" style="width: 100%; text-align: center;" readonly></td>
                </tr>

                <!-- After Deduction -->
                <tr>
                    <td class="text-end" colspan="4">Masonry work after deduction of hume pipe volume (Cum)</td>
    
                    <td><input type="text" name="masonry_work_after_deduction" id="masonry_work_after_deduction" style="width: 100%; text-align: center;" readonly></td>
                </tr>

                <!-- Estimated Qty (Again) -->
                <tr>
                    <td class="text-end" colspan="4">Estimated qty</td>
            
                    <td><input type="text" name="estimated_qty_outlet" id="estimated_qty_final" style="width: 100%; text-align: center;"></td>
                </tr>

                <!-- Payable Final -->
                <tr>
                    <td  class="text-end" colspan="4"><strong>Payable Quantity (after deduction)</strong></td>
            
                    <td><input type="text" name="outlet_work_payable_quantity" id="lesser_qty" style="width: 100%; text-align: center;" readonly></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const lengthInput = document.getElementById('hume_pipe_length');
    const estimatedInput = document.getElementById('estimated_qty');
    const outletInput = document.getElementById('outlet_work_estimated_quantity');

    function updateOutletWorkQuantity() {
        const lengthVal = parseFloat(lengthInput.value) || 0;
        const estVal = parseFloat(estimatedInput.value) || 0;

        if (lengthVal > 0 && estVal > 0) {
            const minVal = Math.min(lengthVal, estVal);
            outletInput.value = minVal.toFixed(3);
        } else {
            outletInput.value = '';
        }
    }

    [lengthInput, estimatedInput].forEach(el => {
        el.addEventListener('input', updateOutletWorkQuantity);
    });
});
</script>


<!-- ... your <div class="card"> ... (same as provided) ... -->

<script>
document.addEventListener("DOMContentLoaded", function () {
    // === Shared Element References ===
    const thicknessInput = document.getElementById('hume_pipe_avg_thickness');
    const widthInput = document.getElementById('avg_width_both');
    const deductionOutput = document.getElementById('deduction_of_hume_pipe');
    const masonryQty = document.getElementById('qtycal');
    const estimatedQty = document.getElementById('estimated_qty_final');
    const masonryAfterDeductionField = document.getElementById('masonry_work_after_deduction');
    const finalPayableField = document.getElementById('lesser_qty');

    const avgLengthInputs = document.querySelectorAll('.avg_length'); // inner + outer
    const avgWidthInputs = document.querySelectorAll('.avg_width');   // inner + outer
    const avgDepthInputs = document.querySelectorAll('.avg_depth');   // inner + outer

    const totalLength = document.getElementById('avg_length_total');
    const totalWidth = document.getElementById('avg_width_both');
    const avgDepthAvg = document.getElementById('avg_depth_avg');

    const innerDepth = document.getElementById('avg_depth_inner');
    const outerDepth = document.getElementById('avg_depth_outer');

    const qtyInputs = document.querySelectorAll('.qty'); // 0: inner, 1: outer
    const bothSideQty = document.getElementById('qtycal');

    // === Calculation Functions ===
    function roundDown(value, decimals) {
        const factor = Math.pow(10, decimals);
        return Math.floor(value * factor) / factor;
    }

    function updateTotalLength() {
        let sum = 0;
        avgLengthInputs.forEach(input => {
            sum += parseFloat(input.value) || 0;
        });
        totalLength.value = sum.toFixed(3);
    }

    function updateAverageWidth() {
        const width1 = parseFloat(avgWidthInputs[0]?.value) || 0;
        const width2 = parseFloat(avgWidthInputs[1]?.value) || 0;
        const avg = (width1 + width2) / 2;
        totalWidth.value = avg.toFixed(3);
    }

    function updateAverageDepth() {
        const d1 = parseFloat(innerDepth.value) || 0;
        const d2 = parseFloat(outerDepth.value) || 0;
        const avg = (d1 + d2) / 2;
        avgDepthAvg.value = avg.toFixed(3);
    }

    function updateQty() {
        for (let i = 0; i < 2; i++) {
            const l = parseFloat(avgLengthInputs[i]?.value) || 0;
            const w = parseFloat(avgWidthInputs[i]?.value) || 0;
            const d = parseFloat(avgDepthInputs[i]?.value) || 0;
            const qty = l * w * d;
            if (qtyInputs[i]) {
                qtyInputs[i].value = qty.toFixed(3);
            }
        }

        const totalL = parseFloat(totalLength.value) || 0;
        const totalW = parseFloat(totalWidth.value) || 0;
        const avgD = parseFloat(avgDepthAvg.value) || 0;
        const totalQty = totalL * totalW * avgD;
        bothSideQty.value = totalQty.toFixed(3);
    }

    function calculateDeduction() {
        const t = parseFloat(thicknessInput.value) || 0;
        const w = parseFloat(widthInput.value) || 0;
        const deduction = 3.142 * t * t * w * 2 / 4;
        const rounded = roundDown(deduction, 2);
        deductionOutput.value = rounded.toFixed(2);
        calculateAfterDeduction(rounded);
    }

    function calculateAfterDeduction(deduction) {
        const masonry = parseFloat(masonryQty.value) || 0;
        const estimated = parseFloat(estimatedQty.value) || 0;

        const afterDeduction = masonry - deduction;
        masonryAfterDeductionField.value = afterDeduction.toFixed(3);

        const payable = Math.min(afterDeduction, estimated);
        finalPayableField.value = payable.toFixed(3);
    }

    function calculateAll() {
        updateTotalLength();
        updateAverageWidth();
        updateAverageDepth();
        updateQty();
        calculateDeduction();
    }

    // === Event Listeners ===
    document.querySelectorAll('.avg_length, .avg_width, .avg_depth').forEach(input => {
        input.addEventListener('input', calculateAll);
    });

    thicknessInput.addEventListener('input', calculateDeduction);
    widthInput.addEventListener('input', calculateDeduction);
    masonryQty.addEventListener('input', () => {
        const d = parseFloat(deductionOutput.value) || 0;
        calculateAfterDeduction(d);
    });
    estimatedQty.addEventListener('input', () => {
        const d = parseFloat(deductionOutput.value) || 0;
        calculateAfterDeduction(d);
    });

    // === Initial Load ===
    calculateAll();
});
</script>




 <div class="card mb-4">
                        <div class="card-header bg-info text-white">
            <h4 class="mb-0">Excavation for Silt Trap</h4>
    </div>
    <div class="card-body px-2 py-3">



<table class="table card-table table-bordered table-vcenter text-center">
    <thead class="bg-light">

        <tr class="bg-light">
            <td>Avg Length (mtr)</td>
            <td>Avg Width (mtr)</td>
            <td>Avg Depth (mtr)</td>
            <td>Qty (Cum)</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" name="excavation_for_silt_trap[avg_length]"  id="length"  class="form-control text-center" />
            </td>
            <td>
                <input type="text" name="excavation_for_silt_trap[avg_width]"  id="width"   class="form-control text-center" />
            </td>
            <td>
                <input type="text" name="excavation_for_silt_trap[avg_depth]"  id="depth"  class="form-control text-center" />
            </td>
            <td>
                <input type="text" name="excavation_for_silt_trap[qty]"   id="qty" class="form-control text-center" readonly />
            </td>
        </tr>
    </tbody>
</table>

<script>
document.querySelectorAll('#length, #width, #depth').forEach(input => {
    input.addEventListener('input', calculateQty);
});

function calculateQty() {
    const length = parseFloat(document.getElementById('length').value) || 0;
    const width = parseFloat(document.getElementById('width').value) || 0;
    const depth = parseFloat(document.getElementById('depth').value) || 0;

    const qty = (length * width * depth).toFixed(3);
    document.getElementById('qty').value = qty;
}
</script>



        </div>
        </div>


<table class="table card-table table-bordered table-vcenter text-center">
    <thead class="bg-light">

        <tr>
            <td style="width: 75%;" class="text-end">Estimated silt trap qty</td>
            <td style="width: 75%; padding: 8px;">
                <input type="text" name="silt_trap_est_qty" id="est_qty" class="form-control text-center" />
            </td>
        </tr>
        <tr>
            <td class="text-end"><strong>Payable Quantity</strong></td>
            <td style="padding: 8px;">
                <input type="text" name="silt_trap_payable_qty" id="payable_qty"   class="form-control text-center" />
            </td>
        </tr>
        
    </tbody>
</table>
    
<script>
    const qtyInput = document.getElementById('qty');
    const estQtyInput = document.getElementById('est_qty');
    const payableQtyInput = document.getElementById('payable_qty');

    qtyInput.addEventListener('input', updatePayableQty);
    estQtyInput.addEventListener('input', updatePayableQty);

    function updatePayableQty() {
        const qty = parseFloat(qtyInput.value) || 0;
        const estQty = parseFloat(estQtyInput.value) || 0;

        const payableQty = Math.min(qty, estQty).toFixed(3);
        payableQtyInput.value = payableQty;
    }
</script>
        



 <div class="card mb-4">
        <div class="card-header bg-secondary text-white">
            <h4 class="mb-0">Excavation for Inlet</h4>
    </div>
    <div class="card-body px-2 py-3">



<table class="table card-table table-bordered table-vcenter text-center">
    <thead class="bg-light">

        <tr class="bg-light">
            <td>Avg Length (mtr)</td>
            <td>Avg Width (mtr)</td>
            <td>Avg Depth (mtr)</td>
            <td>Qty (Cum)</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" id="inlet_length" name="excavation_for_inlet[avg_length]"  class="form-control text-center" required />
            </td>
            <td>
                <input type="text" id="inlet_width" name="excavation_for_inlet[avg_width]" class="form-control text-center" required/>
            </td>
            <td>
                <input type="text" id="inlet_depth" name="excavation_for_inlet[avg_depth]" class="form-control text-center" required />
            </td>
            <td>
                <input type="text" id="inlet_qty" name="excavation_for_inlet[qty]"  class="form-control text-center" readonly />
            </td>
        </tr>
    </tbody>
</table>
</div>
</div>


<table border="1" style="width: 100%; border-collapse: collapse; text-align: left;" class="mb-3">
    <tbody>
        <tr>
            <td style="width: 75%" class="text-end">Estimated Qty</td>
            <td style="width: 75%; padding: 8px;">
                <input type="text" id="inlet_est_qty"  name="inlet_est_qty"  class="form-control text-center" />
            </td>
        </tr>
        <tr>
            <td class="text-end"><strong>Payable Quantity</strong></td>
            <td style="padding: 8px;">
                
                <input type="text" id="inlet_payable_qty" name="inlet_payable_qty" class="form-control text-center" readonly />

            </td>
        </tr>
    </tbody>
</table>


<script>
    const inletLength = document.getElementById('inlet_length');
    const inletWidth = document.getElementById('inlet_width');
    const inletDepth = document.getElementById('inlet_depth');
    const inletQty = document.getElementById('inlet_qty');
    const inletEstQty = document.getElementById('inlet_est_qty');
    const inletPayableQty = document.getElementById('inlet_payable_qty');

    // Trigger calculation on input
    [inletLength, inletWidth, inletDepth, inletEstQty].forEach(input => {
        input.addEventListener('input', updateInletQtyAndPayable);
    });

    function updateInletQtyAndPayable() {
        const length = parseFloat(inletLength.value) || 0;
        const width = parseFloat(inletWidth.value) || 0;
        const depth = parseFloat(inletDepth.value) || 0;

        const calcQty = length * width * depth;
        inletQty.value = calcQty.toFixed(3);

        const estQty = parseFloat(inletEstQty.value) || 0;

        const payableQty = Math.min(calcQty, estQty).toFixed(3);
        inletPayableQty.value = payableQty;
    }
</script>


<!-- Stone Pitching at Inlet Section -->

 <div class="card mb-4">
                        <div class="card-header bg-info text-white">
            <h4 class="mb-0">Stone Pitching at Inlet</h4>
    </div>
    <div class="card-body px-2 py-3">

        <!-- Dimension and Quantity Table -->
        <table class="table card-table table-bordered table-vcenter text-center">
    <thead class="bg-light">

                <tr>
                    <td>Avg Length (mtr)</td>
                    <td>Avg Width (mtr)</td>
                    <td>Qty (Sqm)</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="text" id="spi_length" name="stone_pitching_at_inlet[avg_length]" class="form-control text-center" required />
                    </td>
                    <td>
                        <input type="text" id="spi_width" name="stone_pitching_at_inlet[avg_width]" class="form-control text-center" required />
                    </td>
                    <td>
                        <input type="text" id="spi_qty" name="stone_pitching_at_inlet[qty]" class="form-control text-center" readonly />
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- Estimated and Payable Qty Table -->
        <table border="1" style="width: 100%; border-collapse: collapse; text-align: left;">
            <tbody>
                <tr>
                    <td style="width: 66%;" class="text-end">
                        Estimated Qty
                    </td>
                    <td style="width: 66%; padding: 8px;">
                        <input type="text" id="spi_est_qty" name="stone_pitching_inlet_est_qty" class="form-control text-center" required />
                    </td>
                </tr>
                <tr>
                    <td class="text-end">
                        <strong>Payable Quantity</strong>
                    </td>
                    <td style="padding: 8px;">
                        <input type="text" id="spi_payable_qty" name="stone_pitching_inlet_payable_qty" class="form-control text-center" readonly />
                    </td>
                </tr>
            </tbody>
        </table>

    </div>
</div>

<!-- JavaScript: Calculate and Compare -->
<script>
    const spiLength = document.getElementById('spi_length');
    const spiWidth = document.getElementById('spi_width');
    const spiQty = document.getElementById('spi_qty');
    const spiEstQty = document.getElementById('spi_est_qty');
    const spiPayableQty = document.getElementById('spi_payable_qty');

    [spiLength, spiWidth, spiEstQty].forEach(input => {
        input.addEventListener('input', calculateAndCompareSPI);
    });

    function calculateAndCompareSPI() {
        const length = parseFloat(spiLength.value) || 0;
        const width = parseFloat(spiWidth.value) || 0;
        const estQty = parseFloat(spiEstQty.value) || 0;

        const qty = length * width;
        spiQty.value = qty.toFixed(3);

        const payableQty = Math.min(qty, estQty).toFixed(3);
        spiPayableQty.value = payableQty;
    }
</script>

        

<!-- Display Board Work Section -->
 <div class="card mb-4">
                        <div class="card-header bg-secondary text-white">
            <h4 class="mb-0">Display Board Work (1m x 1m x 0.3m)</h4>
    </div>
    <div class="card-body p-2">

        <table class="table table-bordered table-sm text-center mb-0">
            <thead class="table-light">
                <tr>
                    <td>Particulars</td>
                    <td>Avg Length (m)</td>
                    <td>Avg Width (m)</td>
                    <td> AVG Thickness/Depth (m)</td>
                    <td>Qty</td>
                </tr>
            </thead>
            <tbody>
                <!-- Display Board -->
                <tr>
                    <td>Size of Display Board</td>
                    <td><input type="text" name="display_board[size][length]"  class="form-control form-control-sm text-center" required /></td>
                    <td><input type="text" name="display_board[size][width]"  class="form-control form-control-sm text-center" required /></td>
                    <td><input type="text" name="display_board[size][depth]"  class="form-control form-control-sm text-center" required /></td>
                    <td></td>
                </tr>

                <!-- Earth Work Excavation -->
                <tr>
                    <td>Earth Work Excavation (Cum)</td>
                    <td><input type="text" id="earthwork_length" name="display_board[earthwork][length]" class="form-control form-control-sm text-center" required /></td>
                    <td><input type="text" id="earthwork_width" name="display_board[earthwork][width]" class="form-control form-control-sm text-center" required /></td>
                    <td><input type="text" id="earthwork_depth" name="display_board[earthwork][depth]" class="form-control form-control-sm text-center" required /></td>
                    <td><input type="text" id="earthwork_qty" name="display_board[earthwork][qty]" class="form-control form-control-sm text-center" readonly /></td>
                </tr>

                <tr class="bg-light">
                    <td colspan="4" class="text-end">Estimated qty of excavation(Cum)</td>
                    <td><input type="text" id="estimated_excavation_qty" name="estimated_excavation_qty" class="form-control form-control-sm text-center" required /></td>
                </tr>
                <tr class="bg-light">
                    <td colspan="4" class="text-end"><strong>Payable quantity(Cum)</strong></td>
                    <td><input type="text" id="payable_excavation_qty" name="payable_excavation_qty" class="form-control form-control-sm text-center" readonly /></td>
                </tr>

                <!-- Brick Work - Foundation -->
              <tr>
                <td>Brick Work - Foundation</td>
                <td><input type="text" id="foundation_length" name="display_board[foundation][length]" class="form-control form-control-sm text-center" required /></td>
                <td><input type="text" id="foundation_width" name="display_board[foundation][width]" class="form-control form-control-sm text-center" required /></td>
                <td><input type="text" id="foundation_depth" name="display_board[foundation][depth]" class="form-control form-control-sm text-center" required /></td>
                <td><input type="text" id="foundation_qty" name="display_board[foundation][qty]" class="form-control form-control-sm text-center" readonly /></td>
            </tr>

                <!-- Brick Work - Superstructure -->
              <tr>
    <td>Brick Work - Superstructure</td>
    <td><input type="text" id="superstructure_length" name="display_board[superstructure][length]"  class="form-control form-control-sm text-center" required /></td>
    <td><input type="text" id="superstructure_width" name="display_board[superstructure][width]"  class="form-control form-control-sm text-center" required /></td>
    <td><input type="text" id="superstructure_depth" name="display_board[superstructure][depth]"  class="form-control form-control-sm text-center" required /></td>
    <td><input type="text" id="superstructure_qty" name="display_board[superstructure][qty]"  class="form-control form-control-sm text-center" readonly /></td>
</tr>


            <tr class="bg-light">
    <td colspan="4" class="text-end">Total brick work (Cum)</td>
    <td><input type="text" id="total_brick_work" name="total_brick_work" class="form-control form-control-sm text-center" required /></td>
</tr>
<tr class="bg-light">
    <td colspan="4" class="text-end">Estimated brick work qty(Cum)</td>
    <td><input type="text" id="estimated_brick_work_qty" name="estimated_brick_work_qty" class="form-control form-control-sm text-center" required /></td>
</tr>
<tr class="bg-light">
    <td colspan="4" class="text-end"><strong>Payable quantity (cum)</strong></td>
    <td><input type="text" id="payable_brick_work_qty" name="payable_brick_work_qty" class="form-control form-control-sm text-center" readonly /></td>
</tr>

                <!-- Plaster Work -->
               <tr>
    <td>Plaster Work (Sqm)</td>
    <td>
        <input type="number" step="0.01" name="display_board[plaster][length]" id="plaster_length"
            class="form-control form-control-sm text-center" oninput="calculatePlasterQty()" required />
    </td>
    <td>
        <input type="number" step="0.01" name="display_board[plaster][width]" id="plaster_width"
            class="form-control form-control-sm text-center" oninput="calculatePlasterQty()" required />
    </td>
    <td></td>
    <td>
        <input type="text" name="display_board[plaster][qty]" id="plaster_qty"
            class="form-control form-control-sm text-center" readonly />
    </td>
</tr>

<tr class="bg-light">
    <td colspan="4" class="text-end">Estimated plaster work qty (Sqm)</td>
    <td>
        <input type="number" step="0.01" name="estimated_plaster_work_qty" id="estimated_plaster_work_qty"
            class="form-control form-control-sm text-center" oninput="setPayablePlasterQty()" required />
    </td>
</tr>

<tr class="bg-light">
    <td colspan="4" class="text-end"><strong>Payable quantity (Sqm)</strong></td>
    <td><input type="text" name="payable_plaster_work_qty" id="payable_plaster_work_qty"
            class="form-control form-control-sm text-center" readonly />
    </td>
</tr>
                <!-- Wall Writing -->
                <tr>
    <td>Wall Writing with Synthetic Paint (Sqm)</td>
    <td>
        <input type="number" step="0.01" name="display_board[painting][length]" id="painting_length"   class="form-control form-control-sm text-center" oninput="calculatePaintingQty()" required />
    </td>
    <td>
        <input type="number" step="0.01" name="display_board[painting][width]" id="painting_width"  class="form-control form-control-sm text-center" oninput="calculatePaintingQty()" required />
    </td>
    <td></td>
    <td>   <input type="text" name="display_board[painting][qty]" id="painting_qty"
            class="form-control form-control-sm text-center" readonly /></td>
</tr>

                <tr class="bg-light">
                    <td colspan="4" class="text-end">Estimated wall writing qty (Sqm)</td>
                    <td><input type="number" step="0.01" name="estimated_wall_writing_qty" id="estimated_wall_writing_qty"
            class="form-control form-control-sm text-center" oninput="setPayablePaintingQty()" required />
    </td>
                </tr>
                <tr class="bg-light">
                    <td colspan="4" class="text-end"><strong>Payable quantity (Sqm)</strong></td>
                    <td><input type="text" name="payable_wall_writing_qty" id="payable_wall_writing_qty"
            class="form-control form-control-sm text-center" readonly /></td>
                </tr>


<tr class="bg-light">
                    <td colspan="2" class="text-end">Remarks for Inlet, Outlet and Display board work</td>
                    <td  colspan="3"><input type="text" name="remarks_inlet_outlet_display_board_work" id="remarks_inlet_outlet_display_board_wor"
            class="form-control form-control-sm text-center" /></td>
                </tr>



            </tbody>
        </table>

    </div>
</div>
<script>
    // Foundation inputs
    const foundationLength = document.getElementById('foundation_length');
    const foundationWidth = document.getElementById('foundation_width');
    const foundationDepth = document.getElementById('foundation_depth');
    const foundationQty = document.getElementById('foundation_qty');

    // Superstructure inputs
    const superLength = document.getElementById('superstructure_length');
    const superWidth = document.getElementById('superstructure_width');
    const superDepth = document.getElementById('superstructure_depth');
    const superQty = document.getElementById('superstructure_qty');

    // Total brick work
    const totalBrickWork = document.getElementById('total_brick_work');

    // Calculate individual qty
    function calculateQty(lengthInput, widthInput, depthInput) {
        const length = parseFloat(lengthInput.value) || 0;
        const width = parseFloat(widthInput.value) || 0;
        const depth = parseFloat(depthInput.value) || 0;
        return length * width * depth;
    }

    // Update all quantities and total
    function updateAllQuantities() {
        const foundation = calculateQty(foundationLength, foundationWidth, foundationDepth);
        const superstructure = calculateQty(superLength, superWidth, superDepth);

        foundationQty.value = foundation.toFixed(3);
        superQty.value = superstructure.toFixed(3);

        const total = foundation + superstructure;
        totalBrickWork.value = total.toFixed(3);
    }

    // Add event listeners
    [foundationLength, foundationWidth, foundationDepth, superLength, superWidth, superDepth].forEach(input => {
        input.addEventListener('input', updateAllQuantities);
    });

    // On load
    window.addEventListener('DOMContentLoaded', updateAllQuantities);
</script>


<script>
    // Get input elements
    const superLength = document.getElementById('superstructure_length');
    const superWidth = document.getElementById('superstructure_width');
    const superDepth = document.getElementById('superstructure_depth');
    const superQty = document.getElementById('superstructure_qty');

    // Function to calculate qty
    function calculateSuperstructureQty() {
        const length = parseFloat(superLength.value) || 0;
        const width = parseFloat(superWidth.value) || 0;
        const depth = parseFloat(superDepth.value) || 0;

        const qty = length * width * depth;
        superQty.value = qty.toFixed(3);
    }

    // Add event listeners
    [superLength, superWidth, superDepth].forEach(input => {
        input.addEventListener('input', calculateSuperstructureQty);
    });

    // Initial calculation
    window.addEventListener('DOMContentLoaded', calculateSuperstructureQty);
</script>


<script>
    // Brick Work - Superstructure calculation
    const sLength = document.getElementById('superstructure_length');
    const sWidth = document.getElementById('superstructure_width');
    const sDepth = document.getElementById('superstructure_depth');
    const sQty = document.getElementById('superstructure_qty');

    function updateSuperstructureQty() {
        const length = parseFloat(sLength.value) || 0;
        const width = parseFloat(sWidth.value) || 0;
        const depth = parseFloat(sDepth.value) || 0;

        const calculated = length * width * depth;
        sQty.value = calculated.toFixed(3);
    }

    [sLength, sWidth, sDepth].forEach(input => {
        input.addEventListener('input', updateSuperstructureQty);
    });

    // Optional: trigger initial calculation on page load
    window.addEventListener('DOMContentLoaded', updateSuperstructureQty);
</script>


<script>
    // Brick Work - Foundation calculation
    const fLength = document.getElementById('foundation_length');
    const fWidth = document.getElementById('foundation_width');
    const fDepth = document.getElementById('foundation_depth');
    const fQty = document.getElementById('foundation_qty');

    function updateFoundationQty() {
        const length = parseFloat(fLength.value) || 0;
        const width = parseFloat(fWidth.value) || 0;
        const depth = parseFloat(fDepth.value) || 0;

        const calculated = length * width * depth;
        fQty.value = calculated.toFixed(3);
    }

    [fLength, fWidth, fDepth].forEach(input => {
        input.addEventListener('input', updateFoundationQty);
    });
</script>


<!-- ✅ Final JavaScript block -->
<script>
    const ewLength = document.getElementById('earthwork_length');
    const ewWidth = document.getElementById('earthwork_width');
    const ewDepth = document.getElementById('earthwork_depth');
    const ewQty = document.getElementById('earthwork_qty');
    const estQty = document.getElementById('estimated_excavation_qty');
    const payableQty = document.getElementById('payable_excavation_qty');

    function updateEarthworkAndPayableQty() {
        const length = parseFloat(ewLength.value) || 0;
        const width = parseFloat(ewWidth.value) || 0;
        const depth = parseFloat(ewDepth.value) || 0;
        const estimated = parseFloat(estQty.value) || 0;

        const calculated = length * width * depth;
        ewQty.value = calculated.toFixed(3);

        const lesser = Math.min(calculated, estimated);
        payableQty.value = lesser.toFixed(3);
    }

    [ewLength, ewWidth, ewDepth, estQty].forEach(input => {
        input.addEventListener('input', updateEarthworkAndPayableQty);
    });
</script>
<script>
  const totalInput = document.getElementById('total_brick_work');
  const estimatedInput = document.getElementById('estimated_brick_work_qty');
  const payableInput = document.getElementById('payable_brick_work_qty');

  function updatePayableQty() {
    const totalVal = parseFloat(totalInput.value) || 0;
    const estimatedVal = parseFloat(estimatedInput.value) || 0;
    const payableVal = Math.min(totalVal, estimatedVal);
    payableInput.value = payableVal.toFixed(3);
  }

  totalInput.addEventListener('input', updatePayableQty);
  estimatedInput.addEventListener('input', updatePayableQty);

  // initialize on page load
  window.addEventListener('DOMContentLoaded', updatePayableQty);
</script>


<script>
    function calculatePlasterQty() {
        const length = parseFloat(document.getElementById('plaster_length').value) || 0;
        const width = parseFloat(document.getElementById('plaster_width').value) || 0;
        const qty = (length * width).toFixed(3);
        document.getElementById('plaster_qty').value = qty;
    }
</script>
<script>
    function setPayablePlasterQty() {
        const plasterQty = parseFloat(document.getElementById('plaster_qty').value) || 0;
        const estimatedQty = parseFloat(document.getElementById('estimated_plaster_work_qty').value) || 0;

        const lesser = Math.min(plasterQty, estimatedQty).toFixed(3);
        document.getElementById('payable_plaster_work_qty').value = lesser;
    }
</script>
<script>
    function calculatePaintingQty() {
        const length = parseFloat(document.getElementById('painting_length').value) || 0;
        const width = parseFloat(document.getElementById('painting_width').value) || 0;
        const qty = (length * width).toFixed(3);
        document.getElementById('painting_qty').value = qty;
    }
</script>

<script>
    function calculatePaintingQty() {
        const length = parseFloat(document.getElementById('painting_length').value) || 0;
        const width = parseFloat(document.getElementById('painting_width').value) || 0;
        const qty = (length * width).toFixed(3);
        document.getElementById('painting_qty').value = qty;

        // Call to compare and update payable quantity
        setPayablePaintingQty();
    }

    function setPayablePaintingQty() {
        const actualQty = parseFloat(document.getElementById('painting_qty').value) || 0;
        const estimatedQty = parseFloat(document.getElementById('estimated_wall_writing_qty').value) || 0;

        const lesser = Math.min(actualQty, estimatedQty).toFixed(3);
        document.getElementById('payable_wall_writing_qty').value = lesser;
    }
</script>





    </div>
</div>

<div class="container-xl">

 <div class="card mb-4">
     <div class="card-header bg-info text-white">
        <h4 class="mb-0">Grass Turfing Work</h4>
  </div>

  <!-- Card Body -->
  <div class="card-body px-2 py-3">
<table class="table table-bordered table-striped align-middle text-center">
  <thead class="fw-bold">
    <tr>
      <td>Description</td>
      <td>No.</th>
      <td>Length (m)</td>
      <td>Breadth (m)</td>
      <td>Area (sqm)</td>
    </tr>
  </thead>
  <tbody>
    <tr id="row_1">
        <td>Bund 1<input type="hidden" name="grass_turfings[0][desc]" value="Bund 1"></td>
        <td><input type="number" name="grass_turfings[0][no]" id="no_1" style="width: 100%; box-sizing: border-box; text-align: center;" value="1" readonly></td>
        <td><input type="number" name="grass_turfings[0][length]" id="length_1" style="width: 100%; box-sizing: border-box; text-align: center;" oninput="calcArea(1)" required></td>
        <td><input type="number" name="grass_turfings[0][breadth]" id="breadth_1" style="width: 100%; box-sizing: border-box; text-align: center;" step="0.01" oninput="calcArea(1)" required></td>
        <td><input type="text" name="grass_turfings[0][area]" id="area_1"  style="width: 100%; box-sizing: border-box; text-align: center;" readonly></td>
    </tr>

    <!-- Bund 2 -->
    <tr id="row_2">
  <td>Bund 2<input type="hidden" name="grass_turfings[1][desc]" value="Bund 2"></td>
  <td><input type="number" name="grass_turfings[1][no]" id="no_2" style="width: 100%; box-sizing: border-box; text-align: center;" value="1" readonly></td>
  <td><input type="number" name="grass_turfings[1][length]" id="length_2" style="width: 100%; box-sizing: border-box; text-align: center;" oninput="calcArea(2)" required></td>
  <td><input type="number" name="grass_turfings[1][breadth]" id="breadth_2" style="width: 100%; box-sizing: border-box; text-align: center;" step="0.01" oninput="calcArea(2)" required></td>
  <td><input type="text" name="grass_turfings[1][area]" id="area_2" style="width: 100%; box-sizing: border-box; text-align: center;" readonly></td>
</tr>

<tr id="row_3">
  <td> Bund 3<input type="hidden" name="grass_turfings[2][desc]" value="Bund 3"></td>
  <td><input type="number" name="grass_turfings[2][no]" id="no_3" style="width: 100%; box-sizing: border-box; text-align: center;" value="1" readonly></td>
  <td><input type="number" name="grass_turfings[2][length]" id="length_3"  style="width: 100%; box-sizing: border-box; text-align: center;" oninput="calcArea(3)" required></td>
  <td><input type="number" name="grass_turfings[2][breadth]" id="breadth_3" style="width: 100%; box-sizing: border-box; text-align: center;" step="0.01" oninput="calcArea(3)" required></td>
  <td><input type="text" name="grass_turfings[2][area]" id="area_3" style="width: 100%; box-sizing: border-box; text-align: center;" readonly></td>
  
</tr>

<!-- Bund 4 -->
<tr id="row_4">
  <td>Bund 4<input type="hidden" name="grass_turfings[3][desc]" value="Bund 4"></td>
  <td><input type="number" name="grass_turfings[3][no]" id="no_4"  style="width: 100%; box-sizing: border-box; text-align: center;" value="1" readonly></td>
  <td><input type="number" name="grass_turfings[3][length]" id="length_4" style="width: 100%; box-sizing: border-box; text-align: center;" oninput="calcArea(4)" required></td>
  <td><input type="number" name="grass_turfings[3][breadth]" id="breadth_4" style="width: 100%; box-sizing: border-box; text-align: center;" step="0.01" oninput="calcArea(4)" required></td> 
  <td> <input type="text" name="grass_turfings[3][area]" id="area_4" style="width: 100%; box-sizing: border-box; text-align: center;" readonly></td>
</tr>

<!-- Inlet Portion -->
<tr id="row_5">
  <td>Inlet Portion<input type="hidden" name="grass_turfings[4][desc]" value="Inlet Portion"></td>
  <td><input type="number" name="grass_turfings[4][no]" id="no_5" style="width: 100%; box-sizing: border-box; text-align: center;" value="2"></td>
  <td><input type="number" name="grass_turfings[4][length]" id="length_5" style="width: 100%; box-sizing: border-box; text-align: center;" oninput="calcArea(5)" required></td>
  <td><input type="number" name="grass_turfings[4][breadth]" id="breadth_5" style="width: 100%; box-sizing: border-box; text-align: center;" step="0.01" oninput="calcArea(5)" required></td>
  <td><input type="text" name="grass_turfings[4][area]" id="area_5" style="width: 100%; box-sizing: border-box; text-align: center;" readonly></td>
</tr>


    <!-- Totals -->
<tr>
  <td colspan="4" class="text-end">Total Area (sqm)</td>
  <td><input type="text" name="grass_total_area" id="grass_total_area" style="width: 100%; box-sizing: border-box; text-align: center;" readonly></td>
</tr>
<tr>    
  <td colspan="4" class="text-end">Estimated Grass Turfing  Area (sqm)</td>
  <td><input type="text" name="grass_dressing_area" id="grass_dressing_area"  style="width: 100%; box-sizing: border-box; text-align: center;" oninput="calculatePayable()" required> <!-- this will trigger payable update --></td>
</tr>
<tr>
      <td colspan="4" class="text-end"><strong>Payable Quantity (sqm)</strong></td>
      <td><input type="text" name="grass_payable_qty" id="grass_payable_qty" style="width: 100%; box-sizing: border-box; text-align: center;" readonly></td>
    </tr>
  </tbody>
</table>

<script>
function calcArea(row) {
    let no      = parseFloat(document.getElementById(`no_${row}`).value) || 0;
    let length  = parseFloat(document.getElementById(`length_${row}`).value) || 0;
    let breadth = parseFloat(document.getElementById(`breadth_${row}`).value) || 0;

    // Area = No. × Length × Breadth
    let area = no * length * breadth;
    document.getElementById(`area_${row}`).value = area.toFixed(2);

    // Update totals
    calcTotalArea();
}

function calcTotalArea() {
    let total = 0;
    document.querySelectorAll('[id^="area_"]').forEach(input => {
        total += parseFloat(input.value) || 0;
    });
    document.getElementById("grass_total_area").value = total.toFixed(2);

    // Auto-update payable
    calculatePayable();
}

function calculatePayable() {
    let totalArea    = parseFloat(document.getElementById("grass_total_area").value) || 0;
    let dressingArea = parseFloat(document.getElementById("grass_dressing_area").value) || 0;

    // Business logic: payable = min(total, estimated)
    let payable = Math.min(totalArea, dressingArea);
    document.getElementById("grass_payable_qty").value = payable.toFixed(2);
}
</script>
</div>
</div>
</div>




    <div class="text-center my-3">
         <button type="submit" class="btn btn-success">Submit</button>
    <button type="reset" class="btn btn-secondary me-2">Reset</button>
   
    </div>






</form>

        
    </div>
</div>



@endsection
@push('scripts')
<script>
function calculateRow(index) {
    const top = parseFloat(document.querySelector(`[name="layers[${index}][top_level]"]`).value) || 0;
    const bottom = parseFloat(document.querySelector(`[name="layers[${index}][bottom_level]"]`).value) || 0;
    const length = parseFloat(document.querySelector(`[name="layers[${index}][length]"]`).value) || 0;
    const width = parseFloat(document.querySelector(`[name="layers[${index}][width]"]`).value) || 0;

    const depth = Math.abs(top - bottom).toFixed(3);
    const area = (length * width).toFixed(3);
    const quantity = (depth * area).toFixed(3);

    document.querySelector(`[name="layers[${index}][depth]"]`).value = depth;
    document.querySelector(`[name="layers[${index}][area]"]`).value = area;
    document.querySelector(`[name="layers[${index}][quantity]"]`).value = quantity;
}
</script>
@endpush