{{-- Surface Area Table Component --}}
{{-- Usage: @include('components.surface-area-table', ['standard' => 'GOST']) --}}

<div class="card border-primary mb-2">
    <div class="card-header bg-light d-flex justify-content-between align-items-center py-2">
        <span><i class="fa fa-table"></i> {{e2($standard)}} {{e2("Elements")}}</span>
        <button type="button" class="btn btn-sm btn-success" onclick="addSurfaceAreaItem('{{$standard}}')">
            <i class="fa fa-plus"></i> {{e2("Add Material")}}
        </button>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-sm table-bordered table-hover surface-area-items-table mb-0" id="surfaceAreaTable_{{$standard}}">
                <thead class="thead-light">
                    <tr>
                        <th style="width: 25%">{{e2("Element")}}</th>
                        <th style="width: 15%">{{e2("Product Standard")}}</th>
                        <th style="width: 10%">{{e2("Quantity")}}</th>
                        <th style="width: 15%">{{e2("DIA (mm)")}}</th>
                        <th style="width: 12%">{{e2("Unit (m²)")}}</th>
                        <th style="width: 13%">{{e2("Total (m²)")}}</th>
                        <th style="width: 10%">{{e2("Action")}}</th>
                    </tr>
                </thead>
                <tbody>
                    {{-- Dynamic rows will be added here via JavaScript --}}
                </tbody>
                <tfoot class="bg-light">
                    <tr>
                        <td colspan="5" class="text-right"><strong>{{e2("Sub Total")}} ({{$standard}}):</strong></td>
                        <td><strong class="subtotal-{{strtolower($standard)}}">0.000</strong> m²</td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>