@extends('layouts.auth.app')

@section('title', 'Revise a Bill - Service Bill')

@section('content')
<div class="mb-4">
    <a href="{{ route('revise-bill.index') }}" class="inline-flex items-center text-sm text-gray-600 hover:text-teal-600">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
        </svg>
        Back to Search
    </a>
</div>

<div class="mb-6">
    <h2 class="text-xl font-semibold text-gray-900">Operation Manager - Revise a Bill</h2>
</div>

@if(session('success'))
    <div class="mb-4 p-4 bg-green-50 border border-green-200 text-green-700 rounded-lg">
        {{ session('success') }}
    </div>
@endif

@if(session('error'))
    <div class="mb-4 p-4 bg-red-50 border border-red-200 text-red-700 rounded-lg">
        {{ session('error') }}
    </div>
@endif

<input type="hidden" id="hdnServiceBillID" value="{{ $serviceBill->ServiceBillID }}">
<input type="hidden" id="hdnServiceBillAmount" value="{{ $serviceBill->ServiceBillAmount ?? 0 }}">
<input type="hidden" id="hdnSettlementAmount" value="{{ $serviceBill->SettlementAmount ?? 0 }}">

<!-- Record Details and Notes -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <!-- Record Details -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden" style="min-height: 270px;">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900">Record Details</h3>
        </div>
        <div class="px-6 py-4">
            <table class="w-full">
                <tbody class="divide-y divide-gray-100">
                    <tr>
                        <td class="py-2 text-sm text-gray-600">Template Type</td>
                        <td class="py-2 text-sm text-gray-900 font-medium text-right">Service Bill</td>
                    </tr>
                    <tr>
                        <td class="py-2 text-sm text-gray-600">Date</td>
                        <td class="py-2 text-sm text-gray-900 font-medium text-right">
                            {{ $serviceBill->ServiceBillDate ? \Carbon\Carbon::parse($serviceBill->ServiceBillDate)->format('d-M-Y') : 'N/A' }}
                        </td>
                    </tr>
                    <tr>
                        <td class="py-2 text-sm text-gray-600">Tax Payer Type</td>
                        <td class="py-2 text-sm text-gray-900 font-medium text-right">{{ $serviceBill->TaxPayerTypeName ?? 'N/A' }}</td>
                    </tr>
                    <tr>
                        <td class="py-2 text-sm text-gray-600">Tax Payer Name</td>
                        <td class="py-2 text-sm text-gray-900 font-medium text-right">{{ $serviceBill->TaxPayerName ?? 'N/A' }}</td>
                    </tr>
                    <tr>
                        <td class="py-2 text-sm text-gray-600">Due Date</td>
                        <td class="py-2 text-sm text-gray-900 font-medium text-right">
                            {{ $serviceBill->SettlementDueDate ? \Carbon\Carbon::parse($serviceBill->SettlementDueDate)->format('d-M-Y') : 'N/A' }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Notes -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden" style="min-height: 270px;">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900">Notes</h3>
        </div>
        <div class="px-6 py-4">
            <p class="text-sm text-gray-600">{!! $serviceBill->Notes ?? 'No notes available' !!}</p>
        </div>
    </div>
</div>

<!-- Bill Details -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-6">
    <div class="px-6 py-4 border-b border-gray-200">
        <div class="flex items-center justify-between">
            <div>
                <span class="text-sm text-gray-600">Reference:</span>
                <span class="ml-2 font-semibold text-gray-900">{{ $serviceBill->ServiceBillRefNo ?? 'N/A' }}</span>
                <span class="mx-4 text-gray-300">|</span>
                <span class="text-sm text-gray-600">Status:</span>
                <span class="ml-2 font-semibold text-gray-900">{{ $serviceBill->SettlementStatusName ?? 'N/A' }}</span>
            </div>
        </div>
    </div>

    <div class="px-6 py-4">
        <!-- MDA Service Rules List -->
        @if(count($mdaServiceRules) > 0)
        <div class="space-y-4 mb-6">
            @foreach($mdaServiceRules as $rule)
            @php
                $ruleItems = $serviceBillItems->where('SBSID', $rule->SBSID);
                $ruleSettlements = $serviceBillRuleSettlements->where('SBSID', $rule->SBSID);
                $ruleAmountCharged = $ruleItems->sum('TotalAmount');
                $ruleAmountPaid = $rule->SettledAmount ?? 0;
                $ruleOutstanding = $ruleAmountCharged - $ruleAmountPaid;
            @endphp
            <div class="border border-gray-200 rounded-lg p-4">
                <h4 class="text-base font-semibold text-gray-900 mb-2">
                    {{ $rule->MDAServiceName }}
                    <button type="button" onclick="showServiceBillRuleItemsModal({{ $rule->SBSID }})" class="ml-2 text-teal-600 hover:text-teal-700 text-sm font-normal">[View Items]</button>
                </h4>
                <div class="text-sm text-gray-600 space-y-1">
                    <p>Amount Charged: <span class="font-medium text-gray-900">{{ number_format($ruleAmountCharged, 2) }}</span></p>
                    <p>
                        Amount Paid: <span class="font-medium text-gray-900">{{ number_format($ruleAmountPaid, 2) }}</span>
                        <button type="button" onclick="showRulePaymentsModal({{ $rule->SBSID }})" class="ml-2 text-teal-600 hover:text-teal-700">[View Payments]</button>
                    </p>
                    <p>Outstanding: <span class="font-medium text-gray-900">{{ number_format($ruleOutstanding, 2) }}</span></p>
                    <p>Tax Year: <span class="font-medium text-gray-900">{{ $rule->TaxYear ?? 'N/A' }}</span></p>
                </div>
            </div>
            @endforeach
        </div>
        @endif

        <!-- Summary Section -->
        @php
            $serviceBillAmount = $serviceBill->ServiceBillAmount ?? 0;
            $adjustmentTotal = $adjustments->sum('Amount');
            $lateChargeTotal = $lateCharges->sum('TotalAmount');
            $totalAmount = $serviceBillAmount + $adjustmentTotal + $lateChargeTotal;
            $settlementAmount = $serviceBill->SettlementAmount ?? 0;
            $outstanding = $serviceBillAmount + $adjustmentTotal - $settlementAmount;
            $amountToPay = $serviceBillAmount + $adjustmentTotal - $settlementAmount;
        @endphp

        <div class="border-t border-gray-200 pt-4 space-y-3">
            <div class="flex justify-between items-center py-2">
                <span class="text-sm text-gray-600">Service Bill Amount</span>
                <span class="text-sm font-semibold text-gray-900">{{ number_format($serviceBillAmount, 2) }}</span>
            </div>
            <div class="flex justify-between items-center py-2 border-t border-gray-100">
                <span class="text-sm text-gray-600">
                    Adjustments
                    <button type="button" onclick="showAdjustmentsModal()" class="ml-2 text-teal-600 hover:text-teal-700 text-xs">[View Adjustment]</button>
                </span>
                <span class="text-sm font-semibold text-gray-900">{{ number_format($adjustmentTotal, 2) }}</span>
            </div>
            <div class="flex justify-between items-center py-2 border-t border-gray-100">
                <span class="text-sm text-gray-600">
                    Late Charges
                    <button type="button" onclick="showLateChargesModal()" class="ml-2 text-teal-600 hover:text-teal-700 text-xs">[View Late Charges]</button>
                </span>
                <span class="text-sm font-semibold text-gray-900">{{ number_format($lateChargeTotal, 2) }}</span>
            </div>
            <div class="flex justify-between items-center py-2 border-t border-gray-100">
                <span class="text-sm text-gray-600">Total Amount</span>
                <span class="text-sm font-semibold text-gray-900">{{ number_format($totalAmount, 2) }}</span>
            </div>
            <div class="flex justify-between items-center py-2 border-t border-gray-100">
                <span class="text-sm text-gray-600">
                    Total Paid
                    <button type="button" onclick="showSettlementsModal()" class="ml-2 text-teal-600 hover:text-teal-700 text-xs">[View Payments]</button>
                </span>
                <span class="text-sm font-semibold text-gray-900">{{ number_format($settlementAmount, 2) }}</span>
            </div>
            <div class="flex justify-between items-center py-2 border-t border-gray-100">
                <span class="text-sm text-gray-600">Outstanding</span>
                <span class="text-sm font-semibold text-gray-900">{{ number_format($outstanding, 2) }}</span>
            </div>
            <div class="flex justify-between items-center py-3 border-t-2 border-gray-200 bg-gray-50 -mx-6 px-6">
                <span class="text-base font-semibold text-red-600">Amount to Pay</span>
                <span class="text-lg font-bold text-red-600" id="dvAmountToPay">{{ number_format($amountToPay, 2) }}</span>
            </div>
        </div>
    </div>
</div>

<!-- Add Adjustment Form -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-6">
    <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-semibold text-gray-900">Add Adjustment</h3>
    </div>
    <div class="px-6 py-4">
        <form id="frmAddAdjustment">
            @csrf
            <input type="hidden" id="hdnItemAmountCharged" value="0">
            <input type="hidden" id="hdnItemAmountPaid" value="0">

            <div class="grid grid-cols-1 gap-4 mb-4">
                <div>
                    <label for="cboMDAServiceItem" class="block text-sm font-medium text-gray-700 mb-1">
                        MDA Service Item <span class="text-red-500">*</span>
                    </label>
                    <select id="cboMDAServiceItem" name="cboMDAServiceItem"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                        <option value="">Select MDA Service Item</option>
                        @foreach($mdaServiceItemList as $item)
                        <option value="{{ $item->SBSIID }}">{{ $item->MDAServiceItemName }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div id="dvItemDetails" class="hidden grid grid-cols-1 md:grid-cols-2 gap-4 mb-4 bg-gray-50 p-4 rounded-lg">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Amount Charged:</label>
                    <p class="text-sm text-gray-900 font-semibold" id="spnAmountCharged">-</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Amount Paid:</label>
                    <p class="text-sm text-gray-900 font-semibold" id="spnAmountPaid">-</p>
                </div>
            </div>

            <div class="mb-4">
                <label for="txtAdjustmentLine" class="block text-sm font-medium text-gray-700 mb-1">
                    Adjustment Line <span class="text-red-500">*</span>
                </label>
                <input type="text" id="txtAdjustmentLine" name="txtAdjustmentLine"
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                    placeholder="Enter Adjustment Line">
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div>
                    <label for="cboAdjustmentType" class="block text-sm font-medium text-gray-700 mb-1">
                        Adjustment Type <span class="text-red-500">*</span>
                    </label>
                    <select id="cboAdjustmentType" name="cboAdjustmentType"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                        <option value="">Select Adjustment Type</option>
                        @foreach($adjustmentTypes as $type)
                        <option value="{{ $type->AdjustmentTypeID }}">{{ $type->AdjustmentTypeName }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="txtAdjustmentAmount" class="block text-sm font-medium text-gray-700 mb-1">
                        Adjustment Amount <span class="text-red-500">*</span>
                    </label>
                    <input type="number" step="0.01" id="txtAdjustmentAmount" name="txtAdjustmentAmount"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                        placeholder="Enter Amount">
                </div>
            </div>

            <div class="flex justify-end">
                <button type="button" id="btnSaveAdjustment"
                    class="px-6 py-2 text-sm font-medium text-white bg-teal-600 rounded-lg hover:bg-teal-700 transition-colors">
                    Save
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Modals -->
@include('adjustment.partials._service-bill-modals', [
    'serviceBill' => $serviceBill,
    'mdaServiceRules' => $mdaServiceRules,
    'serviceBillItems' => $serviceBillItems,
    'serviceBillRuleSettlements' => $serviceBillRuleSettlements,
    'settlements' => $settlements,
    'adjustments' => $adjustments,
    'lateCharges' => $lateCharges,
    'revenueStreams' => $revenueStreams,
    'agencies' => $agencies,
    'settlementMethods' => $settlementMethods
])
@endsection

@push('scripts')
<script src="{{ asset('js/pages/operation-manager/revise-bill-service-bill.js') }}"></script>
<script>
    window.routes = {
        getServiceBillItemDetails: '{{ route("adjustment.get-service-bill-item-details", ["sbsiid" => "__SBSIID__"]) }}',
        addSBAdjustment: '{{ route("adjustment.add-sb") }}',
        addSBAdjustmentWithPoA: '{{ route("adjustment.add-sb-with-poa") }}',
        getRevenueSubStream: '{{ route("manual-poa.get-revenue-substreams") }}'
    };
    window.csrfToken = '{{ csrf_token() }}';
</script>
@endpush