@extends('layouts.main')

@section('main-container')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div class="page-header d-print-none">
    <div class="container-xl">
        <h2 class="page-title">W.H.S. Bill Approval - View</h2>

        <div class="d-flex justify-content-end mb-2">
            <a href="{{ route('bill-approval.index') }}" class="btn btn-sm btn-secondary">
                Back to List
            </a>
        </div>
    </div>
</div>

<div class="container-xl">
<div class="card shadow-sm">
<div class="card-body">

<div class="table-responsive">
<table class="table table-sm table-bordered text-center align-middle">

<thead class="table-light">
<tr>
    <th rowspan="2">Sl</th>
    <th rowspan="2">Activity</th>
    <th colspan="3">Estimated</th>
    <th rowspan="2">Unit</th>
    <th colspan="3">Actual</th>
    <th rowspan="2">Bill Date</th>
    <th rowspan="2">GPS</th>
    <th rowspan="2">Status</th>
    <th rowspan="2">Remarks</th>
</tr>
<tr>
    <th>Qty</th><th>Rate</th><th>Amt</th>
    <th>Qty</th><th>Rate</th><th>Amt</th>
</tr>
</thead>

<tbody>
@foreach($billapproval->items as $i => $item)
<tr>
    <td>{{ $item->serial_no }}</td>

    <td>
        <input type="text" class="form-control form-control-sm bg-light"
               value="{{ $item->activity_name }}" readonly>
    </td>

    {{-- Estimated --}}
    <td><input type="text" class="form-control form-control-sm bg-light"
        value="{{ $item->estimated_quantity }}" readonly></td>

    <td><input type="text" class="form-control form-control-sm bg-light"
        value="{{ $item->estimated_rate }}" readonly></td>

    <td><input type="text" class="form-control form-control-sm bg-light estimated-amount"
        value="{{ $item->estimated_amount }}" readonly></td>

    <td><input type="text" class="form-control form-control-sm bg-light"
        value="{{ $item->unit }}" readonly></td>

    {{-- Actual --}}
    <td><input type="text" class="form-control form-control-sm bg-light"
        value="{{ $item->actual_quantity }}" readonly></td>

    <td><input type="text" class="form-control form-control-sm bg-light"
        value="{{ $item->actual_rate }}" readonly></td>

    <td><input type="text" class="form-control form-control-sm bg-light"
        value="{{ $item->actual_amount }}" readonly></td>

    @if($i === 0)
    <td rowspan="{{ $billapproval->items->count() }}">
        <input type="date" class="form-control form-control-sm bg-light"
               value="{{ $billapproval->bill_date }}" readonly>
    </td>

    <td rowspan="{{ $billapproval->items->count() }}">
        <textarea class="form-control form-control-sm bg-light" rows="4" readonly>
{{ $billapproval->gps_reading }}
        </textarea>
    </td>

    <td rowspan="{{ $billapproval->items->count() }}">
        <span class="badge bg-info">
            {{ $billapproval->present_status }}
        </span>
    </td>

    <td rowspan="{{ $billapproval->items->count() }}">
        <input type="text" class="form-control form-control-sm bg-light"
               value="{{ $billapproval->remarks }}" readonly>
    </td>
    @endif
</tr>
@endforeach

<tr>
<td colspan="4" class="text-end fw-bold">Total</td>
<td>
    <input type="text" id="total_estimated_amount"
           class="form-control form-control-sm fw-bold bg-light" readonly>
</td>
<td colspan="4"></td>
<td>
    <input type="text" class="form-control form-control-sm fw-bold bg-light"
           value="{{ $billapproval->total }}" readonly>
</td>
</tr>

<tr>
<td colspan="4" class="text-end fw-bold">GST @18%</td>
<td>
    <input type="text" id="with_gst"
           class="form-control form-control-sm fw-bold bg-light" readonly>
</td>
<td colspan="4"></td>
<td>
    <input type="text" class="form-control form-control-sm fw-bold bg-light"
           value="{{ $billapproval->gst }}" readonly>
</td>
</tr>

<tr>
<td colspan="4" class="text-end fw-bold">Grand Total</td>
<td>
    <input type="text" id="total_with_gst"
           class="form-control form-control-sm fw-bold bg-light" readonly>
</td>
<td colspan="4"></td>
<td>
    <input type="text" class="form-control form-control-sm fw-bold bg-light"
           value="{{ $billapproval->grand_total }}" readonly>
</td>
</tr>

</tbody>
</table>
</div>

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

<script>
function calculateTotal(){
    let total = 0;
    $('.estimated-amount').each(function(){
        total += parseFloat($(this).val()) || 0;
    });

    let gst = total * 0.18;
    let grand = total + gst;

    $('#total_estimated_amount').val(total.toFixed(2));
    $('#with_gst').val(gst.toFixed(2));
    $('#total_with_gst').val(grand.toFixed(2));
}

$(document).ready(function(){
    calculateTotal();
});
</script>

@endsection