@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">W.H.S – Post Level Entry</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> Download Excel Report
                    </a>
                    <a href="{{ route('farmers.create') }}" class="btn btn-primary">
                        <i class="ti ti-plus me-1"></i> Add Quality Calculation
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

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

<!-- Main Content -->
<div class="container-xl">
    <div class="card shadow-sm mb-4">
        <div class="card-header bg-primary text-white mb-3">
            <h5 class="mb-0">W.H.S – Add Quantity Calculation</h5>
        </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">
        <label class="me-2 fw-bold">Pond Dimensions:</label>
        <div>
                    <input type="text" name="dimension" class="form-control" readonly
    value="{{ (int)($query->postLevel->length ?? 0) }}m x {{ (int)($query->postLevel->width ?? 0) }}m x {{ (int)($query->postLevel->height ?? 0) }}m">

        </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-3">
    <div class="card-header text-center bg-info">
        <span class="card-title mb-0 text-white">Earthwork Quantity Calculation</span>
    </div>
    <div class="card-body px-2 py-3">
        <div class="table-responsive">

<table class="table table-md table-bordered table-hover text-center align-middle m-0">
  <thead style="background-color: #f0f0f0; font-weight: bold; text-align: center;">
    <tr>
      <th>AVG. TOP LEVEL</th>
      <th>AVG. BOTTOM LEVEL</th>
      <th>AVG. DEPTH (mtr)</th>
      <th>AVG. LENGTH (mtr)</th>
      <th>AVG. WIDTH (mtr)</th>
      <th>AVG. AREA (Sqm)</th>
      <th>QTY (Cum) </th>
    </tr>
  </thead>
  <tbody>
    <tr style="font-weight: bold; background-color: #e8f4ff; text-align: left;">
     <td colspan="7" class="text-center py-1 px-1">1st Layer</td>

    </tr>
    <tr style="background-color: white; text-align: center;">
      <td><input type="number" step="0.001" name="average_estimates[1st Layer][avg_top_level]" value="{{ $averageRl}}" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
      @if($post_averages->isNotEmpty())
      <td><input type="number" step="0.001" name="average_estimates[1st Layer][avg_bottom_level]" value="{{ number_format($post_averages[0]->average_rl, 3) }}" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
      @endif
      <td><input type="number" step="0.001" name="average_estimates[1st Layer][avg_depth]" value="" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
      
      
      <td><input type="number" step="0.001" name="average_estimates[1st Layer][avg_length]" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
      

      
      <td><input type="number" step="0.001" name="average_estimates[1st Layer][avg_width]" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
      <td><input type="number" step="0.001" name="average_estimates[1st Layer][avg_area]"  style="width: 100%; box-sizing: border-box; text-align: center;"></td>
      <td><input type="number" step="0.001" name="average_estimates[1st Layer][qty]"  style="width: 100%; box-sizing: border-box; text-align: center;"></td>
    </tr>

    <tr style="font-weight: bold; background-color: #e8f4ff; text-align: left;">
      <td colspan="7" class="text-center py-1 px-1">2nd Layer</td>
      
    </tr>
    <tr style="background-color: white; text-align: center;">
      <td><input type="number" step="0.001" name="average_estimates[2nd Layer][avg_top_level]" value="{{ number_format($post_averages[0]->average_rl, 3) }}" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
      @if($post_averages->isNotEmpty())
      <td><input type="number" step="0.001" name="average_estimates[2nd Layer][avg_bottom_level]" value="{{ number_format($post_averages[1]->average_rl, 3) }}" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
     @endif
 
      <td><input type="number" step="0.001" name="average_estimates[2nd Layer][avg_depth]" value="" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
      <td><input type="number" step="0.001" name="average_estimates[2nd Layer][avg_length]"  style="width: 100%; box-sizing: border-box; text-align: center;"></td>
      <td><input type="number" step="0.001" name="average_estimates[2nd Layer][avg_width]"  style="width: 100%; box-sizing: border-box; text-align: center;"></td>
      <td><input type="number" step="0.001" name="average_estimates[2nd Layer][avg_area]"  style="width: 100%; box-sizing: border-box; text-align: center;"></td>
      <td><input type="number" step="0.001" name="average_estimates[2nd Layer][qty]" value="146.718" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
    </tr>

    <tr style="font-weight: bold; background-color: #e8f4ff; text-align: left;">
      <td colspan="7" class="text-center py-1 px-1">3rd Layer</td>
    </tr>
    <tr style="background-color: white; text-align: center;">
      <td><input type="number" step="0.001" name="average_estimates[3rd Layer][avg_top_level]" value="{{ number_format($post_averages[1]->average_rl, 3) }}" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
      @if($post_averages->isNotEmpty())
      <td><input type="number" step="0.001" name="average_estimates[3rd Layer][avg_bottom_level]" value="{{ number_format($post_averages[2]->average_rl, 3) }}" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
      @endif
      <td><input type="number" step="0.001" name="average_estimates[3rd Layer][avg_depth]" value="" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
      <td><input type="number" step="0.001" name="average_estimates[3rd Layer][avg_length]"  style="width: 100%; box-sizing: border-box; text-align: center;"></td>
      <td><input type="number" step="0.001" name="average_estimates[3rd Layer][avg_width]"  style="width: 100%; box-sizing: border-box; text-align: center;"></td>
      <td><input type="number" step="0.001" name="average_estimates[3rd Layer][avg_area]"  style="width: 100%; box-sizing: border-box; text-align: center;"></td>
      <td><input type="number" step="0.001" name="average_estimates[3rd Layer][qty]" value="1014.888" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
    </tr>

    <tr style="font-weight: bold; background-color: #e8f4ff; text-align: left;">
      <td colspan="7" class="text-center py-1 px-1">4th Layer</td>
    </tr>
    <tr style="background-color: white; text-align: center;">
      <td><input type="number" step="0.001" name="average_estimates[4th Layer][avg_top_level]" value="{{ number_format($post_averages[2]->average_rl, 3) }}" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
      @if($post_averages->isNotEmpty()) 
      <td><input type="number" step="0.001" name="average_estimates[4th Layer][avg_bottom_level]" value="{{ number_format($post_averages[3]->average_rl, 3) }}" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
      @endif
      <td><input type="number" step="0.001" name="average_estimates[4th Layer][avg_depth]" value="" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
      <td><input type="number" step="0.001" name="average_estimates[4th Layer][avg_length]"  style="width: 100%; box-sizing: border-box; text-align: center;"></td>
      <td><input type="number" step="0.001" name="average_estimates[4th Layer][avg_width]"  style="width: 100%; box-sizing: border-box; text-align: center;"></td>
      <td><input type="number" step="0.001" name="average_estimates[4th Layer][avg_area]"  style="width: 100%; box-sizing: border-box; text-align: center;"></td>
      <td><input type="number" step="0.001" name="average_estimates[4th Layer][qty]" value="512.865" style="width: 100%; box-sizing: border-box; text-align: center;"></td>
    </tr>

    <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></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>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></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>Payable Quantity</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">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">  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">  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 () {
    function calculateDepthsAndTotal() {
        let totalDepth = 0;

        document.querySelectorAll('input[name$="[avg_depth]"]').forEach(function (depthInput) {
            const nameAttr = depthInput.getAttribute('name');
            const layerMatch = nameAttr.match(/\[(.*?)\]/);
            if (!layerMatch) return;

            const layer = layerMatch[1];
            const topLevelInput = document.querySelector(`input[name="average_estimates[${layer}][avg_top_level]"]`);
            const bottomLevelInput = document.querySelector(`input[name="average_estimates[${layer}][avg_bottom_level]"]`);

            if (topLevelInput && bottomLevelInput) {
                const top = parseFloat(topLevelInput.value);
                const bottom = parseFloat(bottomLevelInput.value);
                if (!isNaN(top) && !isNaN(bottom)) {
                    const depth = (top - bottom).toFixed(3);
                    depthInput.value = depth;
                    totalDepth += parseFloat(depth);
                }
            }
        });

        // Update the total_depth input
        const totalDepthInput = document.querySelector('input[name="total_depth"]');
        if (totalDepthInput) {
            totalDepthInput.value = totalDepth.toFixed(3);
        }
    }

    // Call once on page load
    calculateDepthsAndTotal();

    // Optional: Recalculate when user changes top/bottom values
    document.querySelectorAll('input[name$="[avg_top_level]"], input[name$="[avg_bottom_level]"]').forEach(input => {
        input.addEventListener('input', calculateDepthsAndTotal);
    });
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    function calculateDepthsAndTotalArea() {
        let totalDepth = 0;

        const layers = ['1st Layer', '2nd Layer', '3rd Layer', '4th Layer'];

        layers.forEach(layer => {
            // Depth Calculation
            const topInput = document.querySelector(`input[name="average_estimates[${layer}][avg_top_level]"]`);
            const bottomInput = document.querySelector(`input[name="average_estimates[${layer}][avg_bottom_level]"]`);
            const depthInput = document.querySelector(`input[name="average_estimates[${layer}][avg_depth]"]`);

            if (topInput && bottomInput && depthInput) {
                const top = parseFloat(topInput.value);
                const bottom = parseFloat(bottomInput.value);
                if (!isNaN(top) && !isNaN(bottom)) {
                    const depth = (top - bottom).toFixed(3);
                    depthInput.value = depth;
                    totalDepth += parseFloat(depth);
                }
            }

            // Area Calculation
            const lengthInput = document.querySelector(`input[name="average_estimates[${layer}][avg_length]"]`);
            const widthInput = document.querySelector(`input[name="average_estimates[${layer}][avg_width]"]`);
            const areaInput = document.querySelector(`input[name="average_estimates[${layer}][avg_area]"]`);

            if (lengthInput && widthInput && areaInput) {
                const length = parseFloat(lengthInput.value);
                const width = parseFloat(widthInput.value);
                if (!isNaN(length) && !isNaN(width)) {
                    const area = (length * width).toFixed(3);
                    areaInput.value = area;
                }
            }
        });

        // Set total depth if field exists
        const totalDepthInput = document.querySelector('input[name="total_depth"]');
        if (totalDepthInput) {
            totalDepthInput.value = totalDepth.toFixed(3);
        }
    }

    // Run on load
    calculateDepthsAndTotalArea();

    // Update on input
    document.querySelectorAll('input').forEach(input => {
        input.addEventListener('input', calculateDepthsAndTotalArea);
    });
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    function calculateValues() {
        let totalDepth = 0;
        let totalQuantity = 0;

        const layers = ['1st Layer', '2nd Layer', '3rd Layer', '4th Layer'];

        layers.forEach(layer => {
            // Depth Calculation
            const topInput = document.querySelector(`input[name="average_estimates[${layer}][avg_top_level]"]`);
            const bottomInput = document.querySelector(`input[name="average_estimates[${layer}][avg_bottom_level]"]`);
            const depthInput = document.querySelector(`input[name="average_estimates[${layer}][avg_depth]"]`);

            if (topInput && bottomInput && depthInput) {
                const top = parseFloat(topInput.value);
                const bottom = parseFloat(bottomInput.value);
                if (!isNaN(top) && !isNaN(bottom)) {
                    const depth = (top - bottom).toFixed(3);
                    depthInput.value = depth;
                    totalDepth += parseFloat(depth);
                }
            }

            // Area Calculation
            const lengthInput = document.querySelector(`input[name="average_estimates[${layer}][avg_length]"]`);
            const widthInput = document.querySelector(`input[name="average_estimates[${layer}][avg_width]"]`);
            const areaInput = document.querySelector(`input[name="average_estimates[${layer}][avg_area]"]`);

            if (lengthInput && widthInput && areaInput) {
                const length = parseFloat(lengthInput.value);
                const width = parseFloat(widthInput.value);
                if (!isNaN(length) && !isNaN(width)) {
                    const area = (length * width).toFixed(3);
                    areaInput.value = area;
                }
            }

            // Quantity Summation
            const qtyInput = document.querySelector(`input[name="average_estimates[${layer}][qty]"]`);
            if (qtyInput) {
                const qty = parseFloat(qtyInput.value);
                if (!isNaN(qty)) {
                    totalQuantity += qty;
                }
            }
        });

        // Set total depth
        const totalDepthInput = document.querySelector('input[name="total_depth"]');
        if (totalDepthInput) {
            totalDepthInput.value = totalDepth.toFixed(3);
        }

        // Set total quantity
        const totalQtyInput = document.querySelector('input[name="total_quantity"]');
        if (totalQtyInput) {
            totalQtyInput.value = totalQuantity.toFixed(3);
        }
    }

    // Run on load
    calculateValues();

    // Recalculate on any input change
    document.querySelectorAll('input').forEach(input => {
        input.addEventListener('input', calculateValues);
    });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    function calculateValues() {
        let totalDepth = 0;
        let totalQuantity = 0;
        const layers = ['1st Layer', '2nd Layer', '3rd Layer', '4th Layer'];

        layers.forEach(layer => {
            const topInput = document.querySelector(`input[name="average_estimates[${layer}][avg_top_level]"]`);
            const bottomInput = document.querySelector(`input[name="average_estimates[${layer}][avg_bottom_level]"]`);
            const depthInput = document.querySelector(`input[name="average_estimates[${layer}][avg_depth]"]`);
            const lengthInput = document.querySelector(`input[name="average_estimates[${layer}][avg_length]"]`);
            const widthInput = document.querySelector(`input[name="average_estimates[${layer}][avg_width]"]`);
            const areaInput = document.querySelector(`input[name="average_estimates[${layer}][avg_area]"]`);
            const qtyInput = document.querySelector(`input[name="average_estimates[${layer}][qty]"]`);

            let depth = 0, area = 0;

            // Calculate depth = top - bottom
            if (topInput && bottomInput && depthInput) {
                const top = parseFloat(topInput.value);
                const bottom = parseFloat(bottomInput.value);
                if (!isNaN(top) && !isNaN(bottom)) {
                    depth = parseFloat((top - bottom).toFixed(3));
                    depthInput.value = depth;
                    totalDepth += depth;
                }
            }

            // Calculate area = length × width
            if (lengthInput && widthInput && areaInput) {
                const length = parseFloat(lengthInput.value);
                const width = parseFloat(widthInput.value);
                if (!isNaN(length) && !isNaN(width)) {
                    area = parseFloat((length * width).toFixed(3));
                    areaInput.value = area;
                }
            }

            // Calculate qty = depth × area
            if (qtyInput) {
                const qty = parseFloat((depth * area).toFixed(3));
                if (!isNaN(qty)) {
                    qtyInput.value = qty;
                    totalQuantity += qty;
                }
            }
        });

        // Set total depth
        const totalDepthInput = document.querySelector('input[name="total_depth"]');
        if (totalDepthInput) {
            totalDepthInput.value = totalDepth.toFixed(3);
        }

        // Set total quantity
        const totalQtyInput = document.querySelector('input[name="total_quantity"]');
        if (totalQtyInput) {
            totalQtyInput.value = totalQuantity.toFixed(3);
        }
    }

    // Run on load
    calculateValues();

    // Recalculate on input changes
    document.querySelectorAll('input').forEach(input => {
        input.addEventListener('input', calculateValues);
    });
});
</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-3">
    <div class="card-header text-center bg-info">
        <h3 class="card-title text-white mb-0">Measurements for Bund and Quantity Calculation for Dressing Area</h3>
    </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>
                        <th>Particulars</th>
                        <th>Avg Length (mtr)</th>
                        <th>Avg Bottom Width (mtr)</th>
                        <th>Avg Height (mtr)</th>
                        <th>Top Width (mtr)</th>
                        <th>Slant Length (mtr)</th>
                        <th>Frequency</th>
                        <th>Dressing Area (sqm)</th>
                    </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="form-control form-control-sm text-center" readonly>
                            </td>
                            <td><input type="number" step="0.001" name="bunds[{{ $i }}][avg_length]" class="form-control form-control-sm text-center avg-length"></td>
                            <td><input type="number" step="0.001" name="bunds[{{ $i }}][avg_bottom_width]" class="form-control form-control-sm text-center avg-bottom-width"></td>
                            <td><input type="number" step="0.001" name="bunds[{{ $i }}][avg_height]" class="form-control form-control-sm text-center avg-height"></td>
                            <td><input type="number" step="0.001" name="bunds[{{ $i }}][top_width]" class="form-control form-control-sm text-center top-width"></td>
                            <td><input type="number" step="0.001" name="bunds[{{ $i }}][slant_length]" class="form-control form-control-sm text-center slant-length"></td>
                            <td><input type="number" step="0.001" name="bunds[{{ $i }}][frequency]" class="form-control form-control-sm text-center frequency"></td>
                            <td><input type="number" step="0.001" name="bunds[{{ $i }}][dressing_area]" class="form-control form-control-sm text-center dressing-area" readonly></td>
                        </tr>
                    @endfor

                    <tr class="bg-muted fw-bold">
                        <td>Avg/Total</td>
                        <td><input type="text" id="avg_length" class="form-control form-control-sm text-center" readonly></td>
                        <td><input type="text" id="avg_bottom_width" class="form-control form-control-sm text-center" readonly></td>
                        <td><input type="text" id="avg_height" class="form-control form-control-sm text-center" readonly></td>
                        <td></td>
                        <td><input type="text" id="avg_slant_length" class="form-control form-control-sm text-center" readonly></td>
                        <td></td>
                        <td><input type="text" id="avg_dressing_area" class="form-control form-control-sm text-center" readonly></td>
                    </tr>

                    <tr class="fw-bold">
                        <td colspan="2"> Estimated Dressing Area</td>
                        <td colspan="6">
                            <input type="number" step="0.001" name="estimated_dressing_area" id="estimated_dressing_area"   value="{{ old('estimated_dressing_area') }}"  class="form-control form-control-sm text-center">
                        </td>
                    </tr>

                    <tr class="fw-bold">
                        <td colspan="2">Payable Quantity</td>
                        <td colspan="6">
                            <input type="number" step="0.001" id="payable_dressing_quantity" name="payable_dressing_quantity" value="{{ old('payable_dressing_quantity') }}" class="form-control form-control-sm text-center">
                        </td>
                    </tr>

                    <tr class="fw-bold">
                        <td colspan="2">Remarks for bund and bund volume -</td>
                        <td colspan="6">
                            <input type="text" name="remarks" class="form-control form-control-sm text-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-3">
    <div class="card-header text-center bg-info">
        <span class="card-title mb-0 text-white">OUTLET WORK</span>
    </div>
    <div class="card-body px-2 py-3">
        <table border="1" style="width: 100%; border-collapse: collapse; text-align: center;">
            <thead>
                <tr class="bg-light">
                    <th>Particulars</th>
                    <th>Avg Length (mtr)</th>
                    <th>Avg Width (mtr)</th>
                    <th>AVG Thickness/Depth (mtr)</th>
                    <th>Qty</th>
                </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;"></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;"></td>
                    <td></td>
                </tr>

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

                <tr>
                    <td>Payable quantity</td>
                    <td><input type="number" step="0.001" name="outlet_work_estimated_quantity" id="outlet_work_estimated_quantity" style="width: 100%; text-align: center;"></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;" 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_inner" 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>

                <!-- Masonry Work Outer -->
                <tr>
                    <td><input type="text" name="particulars[]" value="Masonry work (outer side of pond)" style="width: 100%; text-align: center;" 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;" 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>Deduction of hume pipe</td>
                    <td></td>
                    <td></td>
                    <td></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>Masonry work after deduction of hume pipe volume</td>
                    <td></td>
                    <td></td>
                    <td></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>Estimated qty</td>
                    <td></td>
                    <td></td>
                    <td></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><strong>Payable Quantity (after deduction)</strong></td>
                    <td></td>
                    <td></td>
                    <td></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>

<!-- ... 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-3">
    <div class="card-header text-center bg-info">
        <span class="card-title mb-0 text-white">Excavation for Silt Trap</span>
    </div>
    <div class="card-body px-2 py-3">



<table border="1" style="width: 100%; border-collapse: collapse; text-align: center;">
    <thead>
        <tr class="bg-light">
            <th>Avg Length (mtr)</th>
            <th>Avg Width (mtr)</th>
            <th>Avg Depth (mtr)</th>
            <th>Qty (Cum)</th>
        </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" />
            </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 table-striped table-sm" style="width: 100%; border-collapse: collapse; text-align: left;">

    <tbody>
        <tr>
            <td style="width: 50%; padding: 8px;"><label class="form-label">Estimated silt trap qty</label></td>
            <td style="width: 50%; padding: 8px;">
                <input type="text" name="silt_trap_est_qty" id="est_qty" class="form-control text-center" />
            </td>
        </tr>
        <tr>
            <td style="padding: 8px;"><label class="form-label">Payable Quantity</label></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-3">
    <div class="card-header text-center bg-info">
        <span class="card-title mb-0 text-white">Excavation for Inlet</span>
    </div>
    <div class="card-body px-2 py-3">



<table border="1" style="width: 100%; border-collapse: collapse; text-align: center;">
    <thead>
        <tr class="bg-light">
            <th>Avg Length (mtr)</th>
            <th>Avg Width (mtr)</th>
            <th>Avg Depth (mtr)</th>
            <th>Qty (Cum)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" id="inlet_length" name="excavation_for_inlet[avg_length]"  class="form-control text-center" />
            </td>
            <td>
                <input type="text" id="inlet_width" name="excavation_for_inlet[avg_width]" class="form-control text-center" />
            </td>
            <td>
                <input type="text" id="inlet_depth" name="excavation_for_inlet[avg_depth]" class="form-control text-center" />
            </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;">
    <tbody>
        <tr>
            <td style="width: 50%; padding: 8px;"><label class="form-label">Estimated Qty</label></td>
            <td style="width: 50%; padding: 8px;">
                <input type="text" id="inlet_est_qty"  name="inlet_est_qty"  class="form-control text-center" />
            </td>
        </tr>
        <tr>
            <td style="padding: 8px;"><label class="form-label">Payable Quantity</label></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-3">
    <div class="card-header text-center bg-info">
        <span class="card-title mb-0 text-white">Stone Pitching at Inlet</span>
    </div>
    <div class="card-body px-2 py-3">

        <!-- Dimension and Quantity Table -->
        <table border="1" style="width: 100%; border-collapse: collapse; text-align: center;">
            <thead>
                <tr>
                    <th>Avg Length (mtr)</th>
                    <th>Avg Width (mtr)</th>
                    <th>Qty (Sqm)</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="text" id="spi_length" name="stone_pitching_at_inlet[avg_length]" class="form-control text-center" />
                    </td>
                    <td>
                        <input type="text" id="spi_width" name="stone_pitching_at_inlet[avg_width]" class="form-control text-center" />
                    </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: 50%; padding: 8px;">
                        <label class="form-label">Estimated Qty</label>
                    </td>
                    <td style="width: 50%; padding: 8px;">
                        <input type="text" id="spi_est_qty" name="stone_pitching_inlet_est_qty" class="form-control text-center" />
                    </td>
                </tr>
                <tr>
                    <td style="padding: 8px;">
                        <label class="form-label">Payable Quantity</label>
                    </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-2 shadow-sm border-0">
    <div class="card-header bg-info text-white text-center py-2">
        <h6 class="mb-0">Display Board Work (1m x 1m x 0.3m)</h6>
    </div>
    <div class="card-body p-2">

        <table class="table table-bordered table-sm text-center mb-0">
            <thead class="table-light">
                <tr>
                    <th>Particulars</th>
                    <th>Avg Length (m)</th>
                    <th>Avg Width (m)</th>
                    <th> AVG Thickness/Depth (M)</th>
                    <th>Qty</th>
                </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" /></td>
                    <td><input type="text" name="display_board[size][width]"  class="form-control form-control-sm text-center" /></td>
                    <td><input type="text" name="display_board[size][depth]"  class="form-control form-control-sm text-center" /></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" /></td>
                    <td><input type="text" id="earthwork_width" name="display_board[earthwork][width]" class="form-control form-control-sm text-center" /></td>
                    <td><input type="text" id="earthwork_depth" name="display_board[earthwork][depth]" class="form-control form-control-sm text-center" /></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" /></td>
                </tr>
                <tr class="bg-light">
                    <td colspan="4" class="text-end">Payable quantity(Cum)</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" /></td>
                <td><input type="text" id="foundation_width" name="display_board[foundation][width]" class="form-control form-control-sm text-center" /></td>
                <td><input type="text" id="foundation_depth" name="display_board[foundation][depth]" class="form-control form-control-sm text-center" /></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" /></td>
    <td><input type="text" id="superstructure_width" name="display_board[superstructure][width]"  class="form-control form-control-sm text-center" /></td>
    <td><input type="text" id="superstructure_depth" name="display_board[superstructure][depth]"  class="form-control form-control-sm text-center" /></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" /></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" /></td>
</tr>
<tr class="bg-light">
    <td colspan="4" class="text-end">Payable quantity (cum)</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()" />
    </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()" />
    </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()" />
    </td>
</tr>

<tr class="bg-light">
    <td colspan="4" class="text-end">Payable quantity (Sqm)</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()" />
    </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()" />
    </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()" />
    </td>
                </tr>
                <tr class="bg-light">
                    <td colspan="4" class="text-end">Payable quantity (Sqm)</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 class="text-end">
        <button type="submit" class="btn btn-success">Save</button>
    </div>
</form>

        </div>
    </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