@extends('layouts.auth.app')

@section('title', 'Manual PoA')

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900">Add Manual Payment on Account</h1>
            <p class="mt-1 text-sm text-gray-500">Create a new manual payment on account entry</p>
        </div>
    </div>

    <!-- Form Card -->
    <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 bg-gray-50">
            <h3 class="text-lg font-semibold text-gray-900">Payment Details</h3>
        </div>

        <div class="px-6 py-6">
            @if(session('success'))
            <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg">
                <div class="flex">
                    <svg class="h-5 w-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                    </svg>
                    <span class="ml-3 text-sm text-green-700">{{ session('success') }}</span>
                </div>
            </div>
            @endif

            @if(session('error'))
            <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
                <div class="flex">
                    <svg class="h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                    </svg>
                    <span class="ml-3 text-sm text-red-700">{{ session('error') }}</span>
                </div>
            </div>
            @endif

            <form action="{{ route('manual-poa.store') }}" method="POST" id="frmManualPoA">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Tax Payer Type -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Tax Payer Type <span class="text-red-500">*</span>
                        </label>
                        <select name="TaxPayerTypeID" id="cboTaxPayerType" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 @error('TaxPayerTypeID') border-red-500 @enderror" required>
                            <option value="">Select Tax Payer Type</option>
                            @foreach($taxPayerTypeList ?? [] as $type)
                            <option value="{{ $type->TaxPayerTypeID }}" {{ old('TaxPayerTypeID') == $type->TaxPayerTypeID ? 'selected' : '' }}>{{ $type->TaxPayerTypeName }}</option>
                            @endforeach
                        </select>
                        @error('TaxPayerTypeID')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Tax Payer (Autocomplete) -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Tax Payer <span class="text-red-500">*</span>
                        </label>
                        <input type="hidden" name="TaxPayerID" id="hidTaxPayerID" value="{{ old('TaxPayerID') }}">
                        <input type="text" id="txtTaxPayerName" value="{{ old('TaxPayerName') }}" placeholder="Search by Name or RIN..." class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 @error('TaxPayerID') border-red-500 @enderror" autocomplete="off">
                        <div id="taxPayerResults" class="absolute z-10 w-full bg-white border border-gray-300 rounded-lg shadow-lg mt-1 hidden max-h-60 overflow-y-auto"></div>
                        @error('TaxPayerID')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Revenue Stream -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Revenue Stream <span class="text-red-500">*</span>
                        </label>
                        <select name="RevenueStreamID" id="cboRevenueStream" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 @error('RevenueStreamID') border-red-500 @enderror" required>
                            <option value="">Select Revenue Stream</option>
                            @foreach($revenueStreamList ?? [] as $stream)
                            <option value="{{ $stream->RevenueStreamID }}" {{ old('RevenueStreamID') == $stream->RevenueStreamID ? 'selected' : '' }}>{{ $stream->RevenueStreamName }}</option>
                            @endforeach
                        </select>
                        @error('RevenueStreamID')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Revenue Sub Stream -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Revenue Sub Stream <span class="text-red-500">*</span>
                        </label>
                        <select name="RevenueSubStreamID" id="cboRevenueSubStream" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 @error('RevenueSubStreamID') border-red-500 @enderror" required>
                            <option value="">Select Revenue Sub Stream</option>
                            @foreach($revenueSubStreamList ?? [] as $subStream)
                            <option value="{{ $subStream->RevenueSubStreamID }}" data-stream="{{ $subStream->RevenueStreamID }}" {{ old('RevenueSubStreamID') == $subStream->RevenueSubStreamID ? 'selected' : '' }}>{{ $subStream->RevenueSubStreamName }}</option>
                            @endforeach
                        </select>
                        @error('RevenueSubStreamID')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Agency -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Agency <span class="text-red-500">*</span>
                        </label>
                        <select name="AgencyID" id="cboAgency" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 @error('AgencyID') border-red-500 @enderror" required>
                            <option value="">Select Agency</option>
                            @foreach($agencyList ?? [] as $agency)
                            <option value="{{ $agency->AgencyID }}" {{ old('AgencyID') == $agency->AgencyID ? 'selected' : '' }}>{{ $agency->AgencyName }}</option>
                            @endforeach
                        </select>
                        @error('AgencyID')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Settlement Method -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Settlement Method <span class="text-red-500">*</span>
                        </label>
                        <select name="SettlementMethodID" id="cboSettlementMethod" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 @error('SettlementMethodID') border-red-500 @enderror" required>
                            <option value="">Select Settlement Method</option>
                            @foreach($settlementMethodList ?? [] as $method)
                            <option value="{{ $method->SettlementMethodID }}" {{ old('SettlementMethodID') == $method->SettlementMethodID ? 'selected' : '' }}>{{ $method->SettlementMethodName }}</option>
                            @endforeach
                        </select>
                        @error('SettlementMethodID')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Transaction Ref No -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Transaction Ref No <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="TransactionRefNo" id="txtTransactionRefNo" value="{{ old('TransactionRefNo') }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 @error('TransactionRefNo') border-red-500 @enderror" required>
                        <p id="duplicateWarning" class="mt-1 text-sm text-red-600 hidden">This Transaction Ref No already exists</p>
                        @error('TransactionRefNo')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Payment Date -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Payment Date <span class="text-red-500">*</span>
                        </label>
                        <input type="date" name="PaymentDate" id="txtPaymentDate" value="{{ old('PaymentDate', date('Y-m-d')) }}" max="{{ date('Y-m-d') }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 @error('PaymentDate') border-red-500 @enderror" required>
                        @error('PaymentDate')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Amount -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Amount (₦) <span class="text-red-500">*</span>
                        </label>
                        <input type="number" name="Amount" id="txtAmount" value="{{ old('Amount') }}" step="0.01" min="0.01" placeholder="0.00" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 @error('Amount') border-red-500 @enderror" required>
                        @error('Amount')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Notes (Full Width) -->
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
                        <textarea name="Notes" id="txtNotes" 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="Optional notes...">{{ old('Notes') }}</textarea>
                    </div>
                </div>

                <div class="mt-6 flex justify-end space-x-3">
                    <button type="reset" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg font-semibold text-sm hover:bg-gray-300 transition-colors">
                        Clear Form
                    </button>
                    <button type="submit" class="inline-flex items-center px-6 py-2 bg-teal-600 border border-transparent rounded-lg font-semibold text-sm text-white hover:bg-teal-700 transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 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>
                        Save Payment
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    var searchTimeout;

    // Tax Payer Type change - clear tax payer selection
    $('#cboTaxPayerType').on('change', function() {
        $('#hidTaxPayerID').val('');
        $('#txtTaxPayerName').val('');
    });

    // Tax Payer Autocomplete
    $('#txtTaxPayerName').on('input', function() {
        clearTimeout(searchTimeout);
        var query = $(this).val();
        var taxPayerTypeId = $('#cboTaxPayerType').val();

        if (!taxPayerTypeId) {
            alert('Please select Tax Payer Type first');
            $(this).val('');
            return;
        }

        if (query.length < 2) {
            $('#taxPayerResults').addClass('hidden').empty();
            return;
        }

        searchTimeout = setTimeout(function() {
            $.ajax({
                url: '{{ route("manual-poa.search-taxpayers") }}',
                type: 'GET',
                data: {
                    TaxPayerTypeID: taxPayerTypeId,
                    query: query
                },
                success: function(data) {
                    var html = '';
                    if (data.length > 0) {
                        data.forEach(function(item) {
                            html += '<div class="px-4 py-2 hover:bg-gray-100 cursor-pointer taxpayer-item" data-id="' + item.TaxPayerID + '" data-name="' + item.TaxPayerName + '">';
                            html += '<div class="font-medium">' + item.TaxPayerName + '</div>';
                            html += '<div class="text-sm text-gray-500">' + item.TaxPayerRIN + '</div>';
                            html += '</div>';
                        });
                    } else {
                        html = '<div class="px-4 py-2 text-gray-500">No results found</div>';
                    }
                    $('#taxPayerResults').html(html).removeClass('hidden');
                }
            });
        }, 300);
    });

    // Select Tax Payer from dropdown
    $(document).on('click', '.taxpayer-item', function() {
        $('#hidTaxPayerID').val($(this).data('id'));
        $('#txtTaxPayerName').val($(this).data('name'));
        $('#taxPayerResults').addClass('hidden');
    });

    // Hide dropdown when clicking outside
    $(document).on('click', function(e) {
        if (!$(e.target).closest('#txtTaxPayerName, #taxPayerResults').length) {
            $('#taxPayerResults').addClass('hidden');
        }
    });

    // Revenue Stream change - update sub streams
    $('#cboRevenueStream').on('change', function() {
        var revenueStreamId = $(this).val();
        var subStreamSelect = $('#cboRevenueSubStream');

        if (!revenueStreamId) {
            subStreamSelect.html('<option value="">Select Revenue Sub Stream</option>');
            return;
        }

        $.ajax({
            url: '{{ route("manual-poa.get-revenue-substreams") }}',
            type: 'GET',
            data: { RevenueStreamID: revenueStreamId },
            success: function(data) {
                var html = '<option value="">Select Revenue Sub Stream</option>';
                data.forEach(function(item) {
                    html += '<option value="' + item.RevenueSubStreamID + '">' + item.RevenueSubStreamName + '</option>';
                });
                subStreamSelect.html(html);
            }
        });
    });

    // Check duplicate Transaction Ref No
    $('#txtTransactionRefNo').on('blur', function() {
        var refNo = $(this).val();
        if (!refNo) return;

        $.ajax({
            url: '{{ route("manual-poa.check-duplicate") }}',
            type: 'GET',
            data: { TransactionRefNo: refNo },
            success: function(data) {
                if (data.exists) {
                    $('#duplicateWarning').removeClass('hidden');
                    $('#txtTransactionRefNo').addClass('border-red-500');
                } else {
                    $('#duplicateWarning').addClass('hidden');
                    $('#txtTransactionRefNo').removeClass('border-red-500');
                }
            }
        });
    });

    // Form submission validation
    $('#frmManualPoA').on('submit', function(e) {
        if (!$('#hidTaxPayerID').val()) {
            e.preventDefault();
            alert('Please select a Tax Payer');
            $('#txtTaxPayerName').focus();
            return false;
        }

        if ($('#duplicateWarning').is(':visible')) {
            e.preventDefault();
            alert('Transaction Ref No already exists. Please enter a unique reference.');
            $('#txtTransactionRefNo').focus();
            return false;
        }
    });
});
</script>
@endpush