@extends('layouts.auth.app')

@section('title', 'Individual Taxpayer - Generate Service Bill')

@push('styles')
<style>
    .service-checkbox {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }
    .service-row.selected {
        background-color: #f0fdf4 !important;
    }
</style>
@endpush

@section('content')
<div class="fixed inset-0 z-50 overflow-y-auto bg-gray-50">
    <div class="min-h-screen">
        <!-- Header -->
        <div class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-10">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex items-center justify-between h-16">
                    <div class="flex items-center space-x-4">
                        <a href="{{ route('capture.individual.details', ['id' => $individual->IndividualID]) }}" class="text-gray-400 hover:text-gray-600 transition-colors" title="Back to Details">
                            <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="M19 12H5M12 19l-7-7 7-7"/>
                            </svg>
                        </a>
                        <h1 class="text-xl font-bold text-gray-900">Generate MDA Service Bill</h1>
                    </div>
                    <div class="flex items-center space-x-3">
                        <a href="{{ route('capture.individual.details', ['id' => $individual->IndividualID]) }}" 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>
                    </div>
                </div>
            </div>
        </div>

        <!-- Content -->
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <!-- Taxpayer Info Section -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Individual Taxpayer Information</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500 mb-1">Taxpayer Type</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ $individual->TaxPayerTypeName ?? 'Individual' }}</dd>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500 mb-1">Full Name</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ trim(($individual->FirstName ?? '') . ' ' . ($individual->LastName ?? '')) }}</dd>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500 mb-1">Taxpayer TIN</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ $individual->TIN ?? 'N/A' }}</dd>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500 mb-1">Taxpayer EIN</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ $individual->IndividualRIN ?? 'N/A' }}</dd>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500 mb-1">Mobile Number</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ $individual->MobileNumber1 ?? 'N/A' }}</dd>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500 mb-1">Contact Address</dt>
                        <dd class="text-sm text-gray-900 font-semibold">{{ $individual->ContactAddress ?? 'N/A' }}</dd>
                    </div>
                </div>
            </div>

            <!-- MDA Services Selection -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                    <h2 class="text-lg font-semibold text-gray-900">Select MDA Services</h2>
                    <div class="flex items-center space-x-4">
                        <span id="selectedCount" class="text-sm text-gray-500">0 services selected</span>
                        <span id="totalAmount" class="text-sm font-semibold text-teal-600">Total: ₦0.00</span>
                        <button type="button" id="btnGenerateServiceBill" disabled class="px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-lg hover:bg-teal-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors">
                            Generate Service Bill
                        </button>
                    </div>
                </div>

                <div id="dvMessage" class="hidden px-6 py-3"></div>

                <div class="p-6">
                    @if(count($mdaServices) > 0)
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200" id="tblMDAServices">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        <input type="checkbox" id="selectAllServices" class="service-checkbox rounded border-gray-300 text-teal-600 focus:ring-teal-500">
                                    </th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Service Year</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">MDA Name</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Service Name</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Service Amount</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @foreach($mdaServices as $service)
                                <tr class="service-row hover:bg-gray-50" data-service-id="{{ $service->MDAServiceID }}" data-amount="{{ $service->ServiceAmount ?? 0 }}">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <input type="checkbox" class="service-checkbox rounded border-gray-300 text-teal-600 focus:ring-teal-500"
                                            id="serviceCheckbox{{ $service->MDAServiceID }}"
                                            data-service-id="{{ $service->MDAServiceID }}"
                                            data-amount="{{ $service->ServiceAmount ?? 0 }}">
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $service->TaxYear ?? 'N/A' }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $service->MDAName ?? 'N/A' }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $service->MDAServiceName ?? 'N/A' }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">₦{{ number_format($service->ServiceAmount ?? 0, 2) }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                    <div class="text-center py-12">
                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                        </svg>
                        <h3 class="mt-2 text-sm font-medium text-gray-900">No MDA Services Available</h3>
                        <p class="mt-1 text-sm text-gray-500">There are no available MDA services for this taxpayer at this time.</p>
                        <div class="mt-6">
                            <a href="{{ route('capture.individual.details', ['id' => $individual->IndividualID]) }}" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-teal-600 hover:bg-teal-700">
                                Back to Details
                            </a>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Hidden form data -->
<input type="hidden" id="hdnTaxPayerID" value="{{ $individual->IndividualID }}">
<input type="hidden" id="hdnMDAServiceIds" value="">
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    let selectedServices = [];
    const taxPayerId = $('#hdnTaxPayerID').val();

    // Update UI based on selections
    function updateSelectionUI() {
        let totalAmount = 0;
        selectedServices.forEach(service => {
            totalAmount += parseFloat(service.amount) || 0;
        });

        $('#selectedCount').text(selectedServices.length + ' service(s) selected');
        $('#totalAmount').text('Total: ₦' + totalAmount.toLocaleString('en-NG', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
        $('#btnGenerateServiceBill').prop('disabled', selectedServices.length === 0);

        // Update hidden field
        $('#hdnMDAServiceIds').val(JSON.stringify(selectedServices));

        // Update row highlighting
        $('.service-row').each(function() {
            const serviceId = $(this).data('service-id');
            const isSelected = selectedServices.some(s => s.serviceId == serviceId);
            $(this).toggleClass('selected', isSelected);
        });
    }

    // Handle individual checkbox clicks
    $(document).on('change', '.service-checkbox:not(#selectAllServices)', function() {
        const checkbox = $(this);
        const serviceId = checkbox.data('service-id');
        const amount = checkbox.data('amount');

        if (checkbox.is(':checked')) {
            selectedServices.push({
                serviceId: serviceId,
                amount: amount
            });
        } else {
            const index = selectedServices.findIndex(s => s.serviceId == serviceId);
            if (index > -1) {
                selectedServices.splice(index, 1);
            }
        }

        // Update select all checkbox state
        const allCheckboxes = $('.service-checkbox:not(#selectAllServices)');
        const checkedCheckboxes = allCheckboxes.filter(':checked');
        $('#selectAllServices').prop('checked', allCheckboxes.length === checkedCheckboxes.length);
        $('#selectAllServices').prop('indeterminate', checkedCheckboxes.length > 0 && checkedCheckboxes.length < allCheckboxes.length);

        updateSelectionUI();
    });

    // Handle select all checkbox
    $('#selectAllServices').on('change', function() {
        const isChecked = $(this).is(':checked');
        selectedServices = [];

        $('.service-checkbox:not(#selectAllServices)').each(function() {
            $(this).prop('checked', isChecked);
            if (isChecked) {
                selectedServices.push({
                    serviceId: $(this).data('service-id'),
                    amount: $(this).data('amount')
                });
            }
        });

        updateSelectionUI();
    });

    // Handle row click to toggle checkbox
    $(document).on('click', '.service-row', function(e) {
        if (!$(e.target).is('input[type="checkbox"]')) {
            const checkbox = $(this).find('.service-checkbox');
            checkbox.prop('checked', !checkbox.is(':checked')).trigger('change');
        }
    });

    // Handle generate service bill button
    $('#btnGenerateServiceBill').on('click', function() {
        if (selectedServices.length === 0) {
            showMessage('error', 'Please select at least one MDA service');
            return;
        }

        const btn = $(this);
        btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm mr-2"></span>Processing...');

        $.ajax({
            url: '{{ route("capture.individual.generate-service-bill.post") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                TaxPayerID: taxPayerId,
                MDAServiceIds: JSON.stringify(selectedServices)
            },
            success: function(response) {
                if (response.success) {
                    showMessage('success', response.message || 'Service bill created successfully');
                    setTimeout(function() {
                        window.location.href = '{{ route("capture.individual.details", ["id" => $individual->IndividualID]) }}';
                    }, 1500);
                } else {
                    showMessage('error', response.message || 'Failed to create service bill');
                    btn.prop('disabled', false).html('Generate Service Bill');
                }
            },
            error: function(xhr) {
                const errorMsg = xhr.responseJSON?.message || 'An error occurred while creating the service bill';
                showMessage('error', errorMsg);
                btn.prop('disabled', false).html('Generate Service Bill');
            }
        });
    });

    // Show message helper
    function showMessage(type, message) {
        const alertClass = type === 'success' ? 'bg-green-100 text-green-800 border-green-200' : 'bg-red-100 text-red-800 border-red-200';
        $('#dvMessage')
            .removeClass('hidden')
            .html('<div class="border rounded-lg px-4 py-3 ' + alertClass + '">' + message + '</div>');

        if (type === 'success') {
            setTimeout(function() {
                $('#dvMessage').addClass('hidden');
            }, 5000);
        }
    }
});
</script>
@endpush