@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">
        <div class="row g-2 align-items-center">
            <div class="col">
                <h2 class="page-title">W.H.S. Bill Approval - Edit</h2>
            </div>
        </div>
<div class="col-12 d-flex justify-content-end mb-2 d-print-none">
    <div class="btn-list">
        <!-- PDF Report Button -->
        <a href="/billapproval-pdf/{{$billapproval->baseline_id}}" class="btn btn-primary">

            <i class="ti ti-file-text me-1"></i> PDF Report
        </a>

        <!-- Excel Report Button -->
        <a href="/export-excel" class="btn btn-success">
            <i class="ti ti-file-spreadsheet me-1"></i> Excel Report
        </a>
    </div>
</div>
@if (session('success'))
    <div id="success-alert" class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <script>
        setTimeout(function () {
            let alert = document.getElementById('success-alert');
            if (alert) {
                let bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            }
        }, 4000); // 4000 ms = 4 seconds
    </script>
@endif




{{-- Error Message --}}
@if (session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

{{-- Validation Errors --}}
@if ($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <ul class="mb-0">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

</div>
<div class="container-xl">
    <div class="card shadow-sm">
        <div class="card-body bg-white p-4 rounded">

            <!-- PIA -->
                        <div class="row g-3 mb-3">
                <div class="col-md-6">
                    <label for="PIA_id" class="form-label">Name of PIA</label>
                    <select name="PIA_id" id="PIA_id" class="form-select form-select-sm">
                        @if(isset($billapproval->PIA->name))
                            <option value="{{ $billapproval->PIA->name }}">{{ $billapproval->PIA->name }}</option>
                        @else
                            <option value="">N/A</option>
                        @endif
                    </select>
                </div>
            </div>

            <!-- Location -->
            <h5 class="mb-3 fw-bold text-primary">Location</h5>
            <div class="row g-3 mb-3">
                <div class="col-md-3">
                    <label class="form-label">Village</label>
                    <select class="form-select form-select-sm" name="village_id">
                        <option value="{{ $baseline->baseline->village_id ?? '' }}">
                            {{ $billapproval->village->name ?? 'N/A' }}
                        </option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Panchayat</label>
                    <select class="form-select form-select-sm" name="panchayat_id">
                        <option value="{{ $baseline->baseline->panchayat_id ?? '' }}">
                            {{ $billapproval->panchayat->name ?? 'N/A' }}
                        </option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Block</label>
                    <select class="form-select form-select-sm" name="block_id">
                        <option value="{{ $baseline->baseline->block_id ?? '' }}">
                            {{ $billapproval->block->name ?? 'N/A' }}
                        </option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">District</label>
                    <select class="form-select form-select-sm" name="district_id">
                        <option value="{{ $baseline->baseline->district_id ?? '' }}">
                            {{ $billapproval->district->name ?? 'N/A' }}
                        </option>
                    </select>
                </div>
            </div>

            <!-- Hidden fields -->
            <input type="hidden" name="unit_id" value="{{ $baseline->baseline->unit_id ?? '' }}">
            <input type="hidden" name="state_id" value="{{ $baseline->baseline->state_id ?? '' }}">
            <input type="hidden" name="application_code" value="{{ $baseline->baseline->application_code ?? '' }}">

            <!-- Beneficiary -->
            
            <div class="row g-3 mb-3">
                <div class="col-md-4">
                    <label class="form-label">Beneficiary Name</label>
                    <input type="text" class="form-control form-control-sm"
                           name="name_of_respondent"
                           value="{{ $billapproval->name_of_respondent ?? 'N/A' }}" readonly>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Plot No.</label>
                    <input type="text" class="form-control form-control-sm"
                           name="plot_no"
                           value="{{ $billapproval->plot_no ?? 'N/A' }}" readonly>
                </div>
        
                <div class="col-md-4">
                    <label class="form-label">Financial Year</label>
                    <select class="form-select form-select-sm" name="financial_year_id">
                        <option value="{{ $billapproval->financial_year_id }}">
                            {{ $billapproval->financialYear->name ?? 'N/A' }}
                        </option>
                    </select>
                </div>
            </div>

        </div>
    </div>
</div>
</div>
            <div class="page-body">
                <div class="container-xl">
                    <div class="card shadow-sm rounded-3">
                        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                            <span><i class="ti ti-edit me-1"></i> Edit Bill Approval</span>
                            <a href="{{ route('bill-approval.index') }}" class="btn btn-sm btn-light">
                                <i class="ti ti-arrow-left"></i> Back
                            </a>
                        </div>

                        <div class="card-body">

                            <form action="{{ route('bill-approval.update', $billapproval->id) }}" method="POST">
                                @csrf
                                @method('PUT')

                                <!-- Items Table -->
                                <div class="table-responsive">
                <table class="table table-sm table-bordered align-middle text-center">
            <thead class="table-light text-center align-middle">
                <tr>
                    <th rowspan="2">Sl. No.</th>
                    <th rowspan="2">Activity Name</th>
                    <th colspan="3">Estimated</th>
                    <th rowspan="2">Unit</th>
                    <th colspan="3">Actual</th>
                    <th rowspan="2" style="width:4%;">Bill Date</th>
                    <th rowspan="2">GPS Reading</th>
                    <th rowspan="2">Present<br> Status</th>
                    <th rowspan="2">Remarks</th>
                </tr>
                <tr>
                    <th>Quantity</th>
                    <th>Rate (₹)</th>
                    <th>Amount (₹)</th>
                    <th>Quantity</th>
                    <th>Rate (₹)</th>
                    <th>Amount (₹)</th>
                </tr>
            </thead>
                
            
    
        
                    
                    <tbody>
                        @foreach($billapproval->items as $i => $item)
                        <tr>
                            <!-- Sl No -->
                            <td>
                                <input type="text"  name="items[{{ $i }}][serial_no]" class="form-control form-control-sm text-center bg-light" value="{{ $item->serial_no }}" readonly>
                            </td>

                            <!-- Activity -->
                            <td>
                                <input type="text"  name="items[{{ $i }}][activity_name]" class="form-control form-control-sm bg-light"  value="{{ $item->activity_name }}" readonly>
                            </td>

                            <!-- Estimated -->
                            <td><input type="number" step="0.01" name="items[{{ $i }}][estimated_quantity]" class="form-control form-control-sm text-end " value="{{ $item->estimated_quantity }}"></td>
                            <td><input type="number" step="0.01" name="items[{{ $i }}][estimated_rate]" class="form-control form-control-sm text-end" value="{{ $item->estimated_rate }}"></td>
                            <td><input type="number" step="0.01" name="items[{{ $i }}][estimated_amount]" class="form-control form-control-sm text-end bg-light estimated-amount" value="{{ $item->estimated_amount }}" readonly></td>

                            <!-- Unit -->
                            <td>
                                <input type="text"    name="items[{{ $i }}][unit]"   class="form-control form-control-sm text-center" value="{{ $item->unit }}">
                            </td>

                            <!-- Actual -->
                            <td><input type="number" step="0.01" name="items[{{ $i }}][actual_quantity]" class="form-control form-control-sm text-end" value="{{ $item->actual_quantity }}"></td>
                            <td><input type="number" step="0.01" name="items[{{ $i }}][actual_rate]" class="form-control form-control-sm text-end" value="{{ $item->actual_rate }}"></td>
                            <td><input type="number" step="0.01" name="items[{{ $i }}][actual_amount]" class="form-control form-control-sm text-end bg-light" value="{{ $item->actual_amount }}" readonly></td>

                            <!-- Extra Columns: Show once across 11 rows -->
                            @if($i === 0)
                                <td rowspan="11">
                                    <input type="date" 
                                        name="bill_date" 
                                        class="form-control form-control-sm" 
                                        value="{{ $billapproval->bill_date }}">
                                </td>
                                <td rowspan="11">
                                    @if(!empty($billapproval->gps_reading))
                                    {{ str_replace(',', ",\n", $billapproval->gps_reading) }}
                                    @endif
                                </td>
                                <td rowspan="11">

                                @if(Auth::user()->role_id === 1)
                                    <select name="present_status" class="form-select form-select-sm">
                                        <option value="Approved" {{ $billapproval->present_status == 'Approved' ? 'selected' : '' }}>Approved</option>
                                        <option value="Rejected" {{ $billapproval->present_status == 'Rejected' ? 'selected' : '' }}>Rejected</option>
                                    </select>
                                @endif
                                </td>
                                <td rowspan="11">
                                    @if(Auth::user()->role_id === 1)
                                    <input type="text"  name="remarks" class="form-control form-control-sm" value="{{ $billapproval->remarks }}">
                                @endif
                                </td>
                            @endif
                        </tr>
                        @endforeach

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

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

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


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

                    <!-- Submit -->
                    <div class="text-center mt-4">
                        <button type="submit" class="btn btn-primary">
                            @if(Auth::user()->role_id === 1)
                                Submit
                            @elseif(Auth::user()->role_id === 2)
                                Verify & Submit
                            @endif
                        </button>                    
                    </div>

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

<script>
    // Auto-calc Estimated & Actual Amounts
    $(document).on("input", "input[name*='quantity'], input[name*='rate']", function() {
        let row = $(this).closest("tr");
        
        let estQty = parseFloat(row.find("input[name*='estimated_quantity']").val()) || 0;
        let estRate = parseFloat(row.find("input[name*='estimated_rate']").val()) || 0;
        row.find("input[name*='estimated_amount']").val((estQty * estRate).toFixed(2));

        let actQty = parseFloat(row.find("input[name*='actual_quantity']").val()) || 0;
        let actRate = parseFloat(row.find("input[name*='actual_rate']").val()) || 0;
        row.find("input[name*='actual_amount']").val((actQty * actRate).toFixed(2));
    });
</script>



<script>
    function calculateTotal() {
    let total = 0;
    document.querySelectorAll('.estimated-amount').forEach(input => {
        total += parseFloat(input.value) || 0;
    });

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

    // Update visible inputs
    document.getElementById('total_estimated_amount').value = total.toFixed(2);
    document.getElementById('with_gst').value = gst.toFixed(2);
    document.getElementById('total_with_gst').value = grandTotal.toFixed(2);

    // Update hidden/saving inputs
    document.querySelector('input[name="total"]').value = total.toFixed(2);
    document.querySelector('input[name="gst"]').value = gst.toFixed(2);
    document.querySelector('input[name="grand_total"]').value = grandTotal.toFixed(2);
}

</script>
@endsection