@extends('layouts.auth.app')

@section('title', 'PoA Settlement - View Bill')

@section('content')
<div class="mb-4">
    <a href="{{ route('operation-manager.poa-settlement') }}" 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 Settlement List
    </a>
</div>

<div class="mb-6">
    <h2 class="text-xl font-semibold text-gray-900">PoA Settlement: View Bill Details</h2>
</div>

@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

<!-- 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">
        <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">Assessment</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">
                            {{ $assessment->AssessmentDate ? \Carbon\Carbon::parse($assessment->AssessmentDate)->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">{{ $assessment->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">{{ $assessment->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">
                            {{ $assessment->SettlementDueDate ? \Carbon\Carbon::parse($assessment->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">
        <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">{!! $assessment->AssessmentNotes ?? '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">{{ $assessment->AssessmentRefNo ?? '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">{{ $assessment->SettlementStatusName ?? 'N/A' }}</span>
            </div>
        </div>
    </div>

    <div class="px-6 py-4">
        <!-- Assessment Rules Table -->
        @if(count($assessmentRules) > 0)
        <div class="overflow-x-auto mb-6">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Assessment Rule</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Amount Charged</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Amount Paid</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Outstanding</th>
                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Tax Year</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @foreach($assessmentRules as $rule)
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3 text-sm text-gray-900">{{ $rule->AssessmentRuleName ?? 'N/A' }}</td>
                        <td class="px-4 py-3 text-sm text-gray-900 text-right">{{ number_format($rule->AssessmentRuleAmount ?? 0, 2) }}</td>
                        <td class="px-4 py-3 text-sm text-gray-900 text-right">{{ number_format($rule->SettledAmount ?? 0, 2) }}</td>
                        <td class="px-4 py-3 text-sm text-gray-900 text-right">{{ number_format(($rule->AssessmentRuleAmount ?? 0) - ($rule->SettledAmount ?? 0), 2) }}</td>
                        <td class="px-4 py-3 text-sm text-gray-900 text-center">{{ $rule->TaxYear ?? 'N/A' }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif

        <!-- Summary Section -->
        <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">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="showPaymentDetails()" 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($totalSettled, 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($totalAmount - $totalSettled, 2) }}</span>
            </div>
            <div class="flex justify-between items-center py-2 border-t border-gray-100">
                <span class="text-sm text-gray-600">PoA Balance</span>
                <span class="text-sm font-semibold text-teal-600">{{ number_format($walletBalance, 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">{{ number_format($amountToPay, 2) }}</span>
            </div>
        </div>
    </div>
</div>

<!-- Payment Form -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-semibold text-gray-900">Make Payment</h3>
    </div>
    <div class="px-6 py-4">
        <form action="{{ route('operation-manager.process-assessment-settlement') }}" method="POST" id="settlementForm">
            @csrf
            <input type="hidden" name="AssessmentID" value="{{ $assessment->AssessmentID }}">

            <div class="mb-4">
                <label for="Notes" class="block text-sm font-medium text-gray-700 mb-2">Add Notes</label>
                <textarea name="Notes" id="Notes" rows="3"
                    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 Notes">{{ old('Notes') }}</textarea>
            </div>

            @if($amountToPay > 0 && $amountToPay <= $walletBalance)
            <div class="flex justify-end space-x-3">
                <a href="{{ route('operation-manager.poa-settlement') }}"
                   class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                    Cancel
                </a>
                <button type="submit" id="btnMakePayment"
                    class="px-6 py-2 text-sm font-medium text-white bg-teal-600 rounded-lg hover:bg-teal-700 transition-colors">
                    Make Payment
                </button>
            </div>
            @elseif($amountToPay > $walletBalance)
            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
                <div class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-600 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                    </svg>
                    <span class="text-sm text-yellow-700">Insufficient PoA Balance. Required: {{ number_format($amountToPay, 2) }}, Available: {{ number_format($walletBalance, 2) }}</span>
                </div>
            </div>
            <div class="flex justify-end">
                <a href="{{ route('operation-manager.poa-settlement') }}"
                   class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                    Back to List
                </a>
            </div>
            @else
            <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-4">
                <div class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                    <span class="text-sm text-green-700">This assessment has been fully settled.</span>
                </div>
            </div>
            <div class="flex justify-end">
                <a href="{{ route('operation-manager.poa-settlement') }}"
                   class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                    Back to List
                </a>
            </div>
            @endif
        </form>
    </div>
</div>

<!-- Payment Details Modal -->
<div id="paymentDetailsModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="hidePaymentDetails()"></div>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-6 py-4 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-900">Payment History</h3>
                    <button onclick="hidePaymentDetails()" class="text-gray-400 hover:text-gray-600 transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M18 6L6 18M6 6l12 12"/>
                        </svg>
                    </button>
                </div>
            </div>
            <div class="px-6 py-4" id="paymentDetailsContent">
                <p class="text-sm text-gray-500">Loading payment history...</p>
            </div>
            <div class="bg-gray-50 px-6 py-3 flex justify-end">
                <button type="button" onclick="hidePaymentDetails()" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Form submission confirmation
    $('#settlementForm').on('submit', function(e) {
        const amountToPay = {{ $amountToPay }};
        if (!confirm('Are you sure you want to make a payment of ' + amountToPay.toLocaleString('en-NG', {minimumFractionDigits: 2, maximumFractionDigits: 2}) + '?')) {
            e.preventDefault();
            return false;
        }
        $('#btnMakePayment').prop('disabled', true).text('Processing...');
    });
});

function showPaymentDetails() {
    $('#paymentDetailsModal').removeClass('hidden');

    // Load payment details via AJAX
    $.ajax({
        url: '{{ route("operation-manager.get-payment-details") }}',
        type: 'GET',
        data: {
            AssessmentID: {{ $assessment->AssessmentID }}
        },
        success: function(response) {
            if (response.success && response.data.length > 0) {
                let html = '<div class="divide-y divide-gray-200">';
                response.data.forEach(function(payment) {
                    html += '<div class="py-3">';
                    html += '<div class="flex justify-between">';
                    html += '<span class="text-sm text-gray-600">' + payment.SettlementDate + '</span>';
                    html += '<span class="text-sm font-medium text-gray-900">' + payment.Amount + '</span>';
                    html += '</div>';
                    html += '<div class="text-xs text-gray-500 mt-1">' + payment.TransactionRefNo + '</div>';
                    html += '</div>';
                });
                html += '</div>';
                $('#paymentDetailsContent').html(html);
            } else {
                $('#paymentDetailsContent').html('<p class="text-sm text-gray-500">No payment history found.</p>');
            }
        },
        error: function() {
            $('#paymentDetailsContent').html('<p class="text-sm text-red-500">Error loading payment history.</p>');
        }
    });
}

function hidePaymentDetails() {
    $('#paymentDetailsModal').addClass('hidden');
}
</script>
@endpush