@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> 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>

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

@if (session('error'))
    <div class="alert alert-danger">{{ session('error') }}</div>
@endif
<!-- 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">Quantity Calculation (Edit)</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></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('quantity-calculation.update', $record->id) }}" method="POST" enctype="multipart/form-data">
    @csrf
       @method('PUT') 
    

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


@php
    $layers = ['1st Layer', '2nd Layer', '3rd Layer', '4th Layer'];
    $estimates = $record->average_estimates ?? [];
@endphp

<tbody>
@foreach ($layers as $index => $layer)
    <tr style="font-weight: bold; background-color: #e8f4ff; text-align: left;">
        <td colspan="7" class="text-center py-1 px-1">{{ $layer }}</td>
    </tr>
    <tr style="background-color: white; text-align: center;">
        <td>
            <input type="number" step="0.001" name="average_estimates[{{ $layer }}][avg_top_level]"
                   value="{{ $estimates[$layer]['avg_top_level'] ?? ($index == 0 ? $averageRl : ($post_averages[$index - 1]->average_rl ?? '')) }}"
                   style="width: 100%; box-sizing: border-box; text-align: center;" readonly>
        </td>
        <td>
            <input type="number" step="0.001" name="average_estimates[{{ $layer }}][avg_bottom_level]"
                   value="{{ $estimates[$layer]['avg_bottom_level'] ?? ($post_averages[$index]->average_rl ?? '') }}"
                   style="width: 100%; box-sizing: border-box; text-align: center;" readonly>
        </td>
        <td>
            <input type="number" step="0.001" name="average_estimates[{{ $layer }}][avg_depth]"
                   value="{{ $estimates[$layer]['avg_depth'] ?? '' }}"
                   style="width: 100%; box-sizing: border-box; text-align: center;" readonly>
        </td>
        <td>
            <input type="number" step="0.001" name="average_estimates[{{ $layer }}][avg_length]"
                   value="{{ $estimates[$layer]['avg_length'] ?? '' }}"
                   style="width: 100%; box-sizing: border-box; text-align: center;">
        </td>
        <td>
            <input type="number" step="0.001" name="average_estimates[{{ $layer }}][avg_width]"
                   value="{{ $estimates[$layer]['avg_width'] ?? '' }}"
                   style="width: 100%; box-sizing: border-box; text-align: center;">
        </td>
        <td>
            <input type="number" step="0.001" name="average_estimates[{{ $layer }}][avg_area]"
                   value="{{ $estimates[$layer]['avg_area'] ?? '' }}"
                   style="width: 100%; box-sizing: border-box; text-align: center;">
        </td>
        <td>
            <input type="number" step="0.001" name="average_estimates[{{ $layer }}][qty]"
                   value="{{ $estimates[$layer]['qty'] ?? '' }}"
                   style="width: 100%; box-sizing: border-box; text-align: center;">
        </td>
    </tr>
@endforeach

{{-- 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"
               value="{{ $record->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="{{ $record->total_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>Estimated Quantity</td>
    <td><input type="number" step="0.001" name="estimated_quantity"
               value="{{ $record->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"
               value="{{ $record->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"
                           value="{{ $record->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"
                           value="{{ $record->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"
                           value="{{ $record->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>
        @php
            $bunds = $record->measurements_for_bund ?? [];
            $defaultNames = ['Bund I', 'Bund II', 'Bund III', 'Bund IV'];
        @endphp

        @for($i = 0; $i < 4; $i++)
            @php
                $bund = $bunds[$i] ?? ['particular' => $defaultNames[$i]];
            @endphp
            <tr>
                <td>
                    <input type="text" name="bunds[{{ $i }}][particular]" value="{{ $bund['particular'] ?? '' }}" class="form-control text-center" readonly>
                </td>
                <td>
                    <input type="number" step="0.001" name="bunds[{{ $i }}][avg_length]" value="{{ $bund['avg_length'] ?? '' }}" class="form-control text-center">
                </td>
                <td>
                    <input type="number" step="0.001" name="bunds[{{ $i }}][avg_bottom_width]" value="{{ $bund['avg_bottom_width'] ?? '' }}" class="form-control text-center">
                </td>
                <td>
                    <input type="number" step="0.001" name="bunds[{{ $i }}][avg_height]" value="{{ $bund['avg_height'] ?? '' }}" class="form-control text-center">
                </td>
                <td>
                    <input type="number" step="0.001" name="bunds[{{ $i }}][top_width]" value="{{ $bund['top_width'] ?? '' }}" class="form-control text-center">
                </td>
                <td>
                    <input type="number" step="0.001" name="bunds[{{ $i }}][slant_length]" value="{{ $bund['slant_length'] ?? '' }}" class="form-control text-center">
                </td>
                <td>
                    <input type="number" step="0.001" name="bunds[{{ $i }}][frequency]" value="{{ $bund['frequency'] ?? '' }}" class="form-control text-center">
                </td>
                <td>
                    <input type="number" step="0.001" name="bunds[{{ $i }}][dressing_area]" value="{{ $bund['dressing_area'] ?? '' }}" class="form-control text-center">
                </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', $record->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', $record->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" 
                    value="{{ $record->remarks ?? '' }}" 
                    class="form-control form-control-sm text-center"
                >
            </td>
        </tr>
    </tbody>
</table>

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

<script>
    function calculateAveragesAndTotals() {
        const rowCount = 4;

        let totalLength = 0, totalBottomWidth = 0, totalHeight = 0, totalSlantLength = 0, totalDressingArea = 0;
        let countLength = 0, countBottomWidth = 0, countHeight = 0, countSlantLength = 0, countDressingArea = 0;

        for (let i = 0; i < rowCount; i++) {
            let length = parseFloat(document.querySelector(`[name="bunds[${i}][avg_length]"]`)?.value) || 0;
            let bottomWidth = parseFloat(document.querySelector(`[name="bunds[${i}][avg_bottom_width]"]`)?.value) || 0;
            let height = parseFloat(document.querySelector(`[name="bunds[${i}][avg_height]"]`)?.value) || 0;
            let slantLength = parseFloat(document.querySelector(`[name="bunds[${i}][slant_length]"]`)?.value) || 0;
            let dressingArea = parseFloat(document.querySelector(`[name="bunds[${i}][dressing_area]"]`)?.value) || 0;

            if (length) { totalLength += length; countLength++; }
            if (bottomWidth) { totalBottomWidth += bottomWidth; countBottomWidth++; }
            if (height) { totalHeight += height; countHeight++; }
            if (slantLength) { totalSlantLength += slantLength; countSlantLength++; }
            if (dressingArea) { totalDressingArea += dressingArea; countDressingArea++; }
        }

        document.getElementById('avg_length').value = (countLength ? (totalLength / countLength).toFixed(2) : '');
        document.getElementById('avg_bottom_width').value = (countBottomWidth ? (totalBottomWidth / countBottomWidth).toFixed(2) : '');
        document.getElementById('avg_height').value = (countHeight ? (totalHeight / countHeight).toFixed(2) : '');
        document.getElementById('avg_slant_length').value = (countSlantLength ? (totalSlantLength / countSlantLength).toFixed(2) : '');
        document.getElementById('avg_dressing_area').value = (countDressingArea ? totalDressingArea.toFixed(2) : '');
    }

    // Run on load and on input change
    document.addEventListener('DOMContentLoaded', calculateAveragesAndTotals);
    document.querySelectorAll('input').forEach(input => {
        input.addEventListener('input', calculateAveragesAndTotals);
    });
</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">


@php
    $bunds = $record->outlet_work ?? '[]';
    $inner = $bunds[0] ?? ['avg_length'=>'', 'avg_width'=>'', 'avg_depth'=>'', 'qty'=>''];
    $outer = $bunds[1] ?? ['avg_length'=>'', 'avg_width'=>'', 'avg_depth'=>'', 'qty'=>''];
    $both  = $bunds[2] ?? ['avg_length'=>'', 'avg_width'=>'', 'avg_depth'=>'', 'qty'=>''];
@endphp

<tr>
    <td>Hume Pipe's Length and Diameter</td>
    <td><input type="number" step="0.001" name="hume_pipe_length" value="{{ $record->hume_pipe_length }}" style="width: 100%; text-align: center;"></td>
    <td></td>
    <td><input type="number" step="0.001" name="hume_pipe_avg_thickness" value="{{ $record->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" value="{{ $record->estimated_qty_only }}" 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" value="{{ $record->outlet_work_estimated_quantity }}" style="width: 100%; text-align: center;"></td>
    <td colspan="2"></td><td></td>
</tr>

<tr>
    <td><input type="text" name="particulars[]" value="Masonry work (inner side of pond)" readonly style="width: 100%; text-align: center;"></td>
    <td><input type="text" name="avg_length[]" class="avg_length" value="{{ $inner['avg_length'] }}" style="width: 100%; text-align: center;"></td>
    <td><input type="text" name="avg_width[]" class="avg_width" value="{{ $inner['avg_width'] }}" style="width: 100%; text-align: center;"></td>
    <td><input type="text" name="avg_depth[]" id="avg_depth_inner" class="avg_depth" value="{{ $inner['avg_depth'] }}" style="width: 100%; text-align: center;"></td>
    <td><input type="text" name="qty[]" class="qty" value="{{ $inner['qty'] }}" style="width: 100%; text-align: center;" readonly></td>
</tr>

<tr>
    <td><input type="text" name="particulars[]" value="Masonry work (outer side of pond)" readonly style="width: 100%; text-align: center;"></td>
    <td><input type="text" name="avg_length[]" class="avg_length" value="{{ $outer['avg_length'] }}" style="width: 100%; text-align: center;"></td>
    <td><input type="text" name="avg_width[]" class="avg_width" value="{{ $outer['avg_width'] }}" style="width: 100%; text-align: center;"></td>
    <td><input type="text" name="avg_depth[]" id="avg_depth_outer" class="avg_depth" value="{{ $outer['avg_depth'] }}" style="width: 100%; text-align: center;"></td>
    <td><input type="text" name="qty[]" class="qty" value="{{ $outer['qty'] }}" style="width: 100%; text-align: center;" readonly></td>
</tr>

<tr>
    <td><input type="text" name="particulars[]" value="Masonry work (both side)" readonly style="width: 100%; text-align: center;"></td>
    <td><input type="text" name="avg_length[]" id="avg_length_total" class="avg_length_total" value="{{ $both['avg_length'] }}" style="width: 100%; text-align: center;"></td>
    <td><input type="text" name="avg_width[]" id="avg_width_both" class="avg_width" value="{{ $both['avg_width'] }}" style="width: 100%; text-align: center;"></td>
    <td><input type="text" name="avg_depth[]" id="avg_depth_avg" class="avg_depth" value="{{ $both['avg_depth'] }}" style="width: 100%; text-align: center;"></td>
    <td><input type="text" name="qty[]" id="qtycal" class="qty" value="{{ $both['qty'] }}" style="width: 100%; text-align: center;" readonly></td>
</tr>

<tr>
    <td>Deduction of hume pipe</td>
    <td colspan="3"></td>
    <td><input type="text" name="deduction_of_hume_pipe" id="deduction_of_hume_pipe" value="{{ $record->deduction_of_hume_pipe }}" style="width: 100%; text-align: center;" readonly></td>
</tr>

<tr>
    <td>Masonry work after deduction of hume pipe volume</td>
    <td colspan="3"></td>
    <td><input type="text" name="masonry_work_after_deduction" id="masonry_work_after_deduction" value="{{ $record->masonry_work_after_deduction }}" style="width: 100%; text-align: center;" readonly></td>
</tr>

<tr>
    <td>Estimated qty</td>
    <td colspan="3"></td>
    <td><input type="text" name="estimated_qty_outlet" id="estimated_qty_final" value="{{ $record->estimated_qty_outlet }}" style="width: 100%; text-align: center;"></td>
</tr>

<tr>
    <td><strong>Payable Quantity (after deduction)</strong></td>
    <td colspan="3"></td>
    <td><input type="text" name="outlet_work_payable_quantity" id="lesser_qty" value="{{ $record->outlet_work_payable_quantity }}" 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>

        @php
            $siltTrap = $record->excavation_for_silt_trap ?? '{}';
        @endphp

<tr>
    <td>
        <input type="text" name="excavation_for_silt_trap[avg_length]" id="length"
               class="form-control text-center"
               value="{{ old('excavation_for_silt_trap.avg_length', $siltTrap['avg_length'] ?? '') }}" />
    </td>
    <td>
        <input type="text" name="excavation_for_silt_trap[avg_width]" id="width"
               class="form-control text-center"
               value="{{ old('excavation_for_silt_trap.avg_width', $siltTrap['avg_width'] ?? '') }}" />
    </td>
    <td>
        <input type="text" name="excavation_for_silt_trap[avg_depth]" id="depth"
               class="form-control text-center"
               value="{{ old('excavation_for_silt_trap.avg_depth', $siltTrap['avg_depth'] ?? '') }}" />
    </td>
    <td>
        <input type="text" name="excavation_for_silt_trap[qty]" id="qty"
               class="form-control text-center"
               value="{{ old('excavation_for_silt_trap.qty', $siltTrap['qty'] ?? '') }}" />
    </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"
                    value="{{ old('silt_trap_est_qty', $record->silt_trap_est_qty ?? '') }}" />
            </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"
                    value="{{ old('silt_trap_payable_qty', $record->silt_trap_payable_qty ?? '') }}" />
            </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>

    @php 
    
$excavationForInlet = $record->excavation_for_inlet;


    @endphp
<tr>
    <td>
        <input type="text" id="inlet_length" name="excavation_for_inlet[avg_length]" 
               class="form-control text-center"
               value="{{ old('excavation_for_inlet.avg_length', $excavationForInlet['avg_length'] ?? '') }}" />
    </td>
    <td>
        <input type="text" id="inlet_width" name="excavation_for_inlet[avg_width]" 
               class="form-control text-center"
               value="{{ old('excavation_for_inlet.avg_width', $excavationForInlet['avg_width'] ?? '') }}" />
    </td>
    <td>
        <input type="text" id="inlet_depth" name="excavation_for_inlet[avg_depth]" 
               class="form-control text-center"
               value="{{ old('excavation_for_inlet.avg_depth', $excavationForInlet['avg_depth'] ?? '') }}" />
    </td>
    <td>
        <input type="text" id="inlet_qty" name="excavation_for_inlet[qty]" 
               class="form-control text-center" readonly
               value="{{ old('excavation_for_inlet.qty', $excavationForInlet['qty'] ?? '') }}" />
    </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" 
               value="{{ old('inlet_est_qty', $record->inlet_est_qty ?? '') }}" />
    </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" 
               value="{{ old('inlet_payable_qty', $record->inlet_payable_qty ?? '') }}" 
               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>


            
         @php
    $spi = ($record->stone_pitching_at_inlet) ?? ['avg_length' => '', 'avg_width' => '', 'qty' => ''];
@endphp

<tr>
    <td>
        <input type="text" 
               id="spi_length" 
               name="stone_pitching_at_inlet[avg_length]" 
               class="form-control text-center" 
               value="{{ old('stone_pitching_at_inlet.avg_length', $spi['avg_length']) }}" />
    </td>
    <td>
        <input type="text" 
               id="spi_width" 
               name="stone_pitching_at_inlet[avg_width]" 
               class="form-control text-center" 
               value="{{ old('stone_pitching_at_inlet.avg_width', $spi['avg_width']) }}" />
    </td>
    <td>
        <input type="text" 
               id="spi_qty" 
               name="stone_pitching_at_inlet[qty]" 
               class="form-control text-center" 
               value="{{ old('stone_pitching_at_inlet.qty', $spi['qty']) }}" 
               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" 
               value="{{ old('stone_pitching_inlet_est_qty', $record->stone_pitching_inlet_est_qty) }}" />
    </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" 
               value="{{ old('stone_pitching_inlet_payable_qty', $record->stone_pitching_inlet_payable_qty) }}" 
               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-3">
    <div class="card-header text-center bg-info">
        <span class="card-title mb-0 text-white">Display Board Work (1m x 1m x 0.3m)</span>
    </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 -->

@php
    $displayBoardWork = $record->display_board_work;
@endphp

<!-- Size of 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" value="{{ old('display_board.size.length', $displayBoardWork['size']['length'] ?? '') }}" /></td>
    <td><input type="text" name="display_board[size][width]" class="form-control form-control-sm text-center" value="{{ old('display_board.size.width', $displayBoardWork['size']['width'] ?? '') }}" /></td>
    <td><input type="text" name="display_board[size][depth]" class="form-control form-control-sm text-center" value="{{ old('display_board.size.depth', $displayBoardWork['size']['depth'] ?? '') }}" /></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" value="{{ old('display_board.earthwork.length', $displayBoardWork['earthwork']['length'] ?? '') }}" /></td>
    <td><input type="text" id="earthwork_width" name="display_board[earthwork][width]" class="form-control form-control-sm text-center" value="{{ old('display_board.earthwork.width', $displayBoardWork['earthwork']['width'] ?? '') }}" /></td>
    <td><input type="text" id="earthwork_depth" name="display_board[earthwork][depth]" class="form-control form-control-sm text-center" value="{{ old('display_board.earthwork.depth', $displayBoardWork['earthwork']['depth'] ?? '') }}" /></td>
    <td><input type="text" id="earthwork_qty" name="display_board[earthwork][qty]" class="form-control form-control-sm text-center" value="{{ old('display_board.earthwork.qty', $displayBoardWork['earthwork']['qty'] ?? '') }}" readonly /></td>
</tr>

<!-- Estimated Quantity -->
<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" 
               value="{{ old('estimated_excavation_qty', $record->estimated_excavation_qty) }}" 
               class="form-control form-control-sm text-center" />
    </td>
</tr>

<!-- Payable Quantity -->
<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" 
               value="{{ old('payable_excavation_qty', $record->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" value="{{ old('display_board.foundation.length', $displayBoardWork['foundation']['length'] ?? '') }}" /></td>
    <td><input type="text" id="foundation_width" name="display_board[foundation][width]" class="form-control form-control-sm text-center" value="{{ old('display_board.foundation.width', $displayBoardWork['foundation']['width'] ?? '') }}" /></td>
    <td><input type="text" id="foundation_depth" name="display_board[foundation][depth]" class="form-control form-control-sm text-center" value="{{ old('display_board.foundation.depth', $displayBoardWork['foundation']['depth'] ?? '') }}" /></td>
    <td><input type="text" id="foundation_qty" name="display_board[foundation][qty]" class="form-control form-control-sm text-center" value="{{ old('display_board.foundation.qty', $displayBoardWork['foundation']['qty'] ?? '') }}" 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" value="{{ old('display_board.superstructure.length', $displayBoardWork['superstructure']['length'] ?? '') }}" /></td>
    <td><input type="text" id="superstructure_width" name="display_board[superstructure][width]" class="form-control form-control-sm text-center" value="{{ old('display_board.superstructure.width', $displayBoardWork['superstructure']['width'] ?? '') }}" /></td>
    <td><input type="text" id="superstructure_depth" name="display_board[superstructure][depth]" class="form-control form-control-sm text-center" value="{{ old('display_board.superstructure.depth', $displayBoardWork['superstructure']['depth'] ?? '') }}" /></td>
    <td><input type="text" id="superstructure_qty" name="display_board[superstructure][qty]" class="form-control form-control-sm text-center" value="{{ old('display_board.superstructure.qty', $displayBoardWork['superstructure']['qty'] ?? '') }}" 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" 
            value="{{ old('estimated_brick_work_qty', $record->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" 
            value="{{ old('payable_brick_work_qty', $record->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" 
        value="{{ old('estimated_plaster_work_qty', $record->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" 
        value="{{ old('payable_plaster_work_qty', $record->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" 
            value="{{ old('estimated_wall_writing_qty', $record->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"  value="{{ old('payable_wall_writing_qty', $record->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_work" 
        class="form-control form-control-sm text-center" 
        value="{{ old('remarks_inlet_outlet_display_board_work', $record->remarks_inlet_outlet_display_board_work ?? '') }}" 
    />
</td>

                </tr>



            </tbody>
        </table>

    </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.</td>
                        <td>Length (m)</td>
                        <td>Breadth (m)</td>
                        <td>Area (sqm)</td>
                    </tr>
                </thead>
                <tbody>
                    @foreach($grassTurfings as $index => $turf)
                        <tr id="row_{{ $index + 1 }}">
                            <td>
                                {{ $turf->desc }}
                                <input type="hidden" name="grass_turfings[{{ $index }}][desc]" value="{{ $turf->desc }}">
                            </td>
                            <td>
                                <input type="number" name="grass_turfings[{{ $index }}][no]" id="no_{{ $index + 1 }}" 
                                    style="width: 100%; text-align: center;" 
                                    value="{{ $turf->no }}" {{ in_array($turf->desc, ['Bund 1','Bund 2','Bund 3','Bund 4']) ? 'readonly' : '' }}>
                            </td>
                            <td>
                                <input type="number" name="grass_turfings[{{ $index }}][length]" id="length_{{ $index + 1 }}" 
                                    style="width: 100%; text-align: center;" 
                                    value="{{ $turf->length }}" oninput="calcArea({{ $index + 1 }})" required>
                            </td>
                            <td>
                                <input type="number" name="grass_turfings[{{ $index }}][breadth]" id="breadth_{{ $index + 1 }}" 
                                    style="width: 100%; text-align: center;" step="0.01" 
                                    value="{{ $turf->breadth }}" oninput="calcArea({{ $index + 1 }})" required>
                            </td>
                            <td>
                                <input type="text" name="grass_turfings[{{ $index }}][area]" id="area_{{ $index + 1 }}" 
                                    style="width: 100%; text-align: center;" 
                                    value="{{ $turf->area }}" readonly>
                            </td>
                        </tr>
                    @endforeach

                    <!-- 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%; text-align: center;" value="" 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%; text-align: center;" value="" 
                                oninput="calculatePayable()" required>
                        </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%; text-align: center;" value="" readonly>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </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">Update</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