{{--
    Add New Taxpayer Modal Component - AJAX-based workflow
    No page redirects - form loads and submits via AJAX

    Usage: @include('components.taxpayer.add-new-taxpayer-modal', ['taxpayerType' => 'individual'])

    Required: Pass $taxpayerType as 'individual', 'corporate', 'government', or 'special'
--}}

@php
    $taxpayerType = $taxpayerType ?? 'individual';
    $typeLabels = [
        'individual' => 'Individual',
        'corporate' => 'Corporate',
        'government' => 'Government',
        'special' => 'Special'
    ];
    $typeLabel = $typeLabels[$taxpayerType] ?? 'Taxpayer';
@endphp

<!-- Add New Taxpayer Button -->
<button type="button" onclick="openAddTaxpayerModal()"
    class="flex items-center space-x-2 px-4 py-2 bg-teal-600 text-white text-sm font-medium rounded-lg hover:bg-teal-700 transition-colors duration-200">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="12" y1="5" x2="12" y2="19"></line>
        <line x1="5" y1="12" x2="19" y2="12"></line>
    </svg>
    <span>Add New {{ $typeLabel }}</span>
</button>

<!-- Add Taxpayer Modal -->
<div id="dvAddTaxpayerModal" class="hidden fixed inset-0 z-[60] overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeAddTaxpayerModal()"></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-4xl sm:w-full">
            <div class="bg-teal-600 px-6 py-4">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-white">Add New {{ $typeLabel }} Taxpayer</h3>
                    <button type="button" onclick="closeAddTaxpayerModal()" class="text-white hover:text-gray-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M18 6L6 18M6 6l12 12"/>
                        </svg>
                    </button>
                </div>
            </div>

            <div class="bg-white px-6 py-6 max-h-[70vh] overflow-y-auto">
                <div id="dvAddTaxpayerFormContent">
                    <!-- Form will be loaded here via AJAX -->
                    <div class="flex items-center justify-center py-8">
                        <svg class="animate-spin h-8 w-8 text-teal-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        <span class="ml-2 text-gray-600">Loading form...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Add Taxpayer Module - AJAX-based workflow
const AddTaxpayerModule = (function($) {
    'use strict';

    // Configuration
    const taxpayerType = '{{ $taxpayerType }}';

    // Routes based on taxpayer type
    const routes = {
        @if($taxpayerType === 'individual')
        getForm: '{{ route("capture.individual.get-add-taxpayer-form") }}',
        submit: '{{ route("capture.individual.add-taxpayer-ajax") }}',
        detailsUrl: '{{ url("CaptureIndividual/Details") }}'
        @elseif($taxpayerType === 'corporate')
        getForm: '{{ route("capture.corporate.get-add-taxpayer-form") }}',
        submit: '{{ route("capture.corporate.add-taxpayer-ajax") }}',
        detailsUrl: '{{ url("CaptureCorporate/Details") }}'
        @elseif($taxpayerType === 'government')
        getForm: '{{ route("capture.government.get-add-taxpayer-form") }}',
        submit: '{{ route("capture.government.add-taxpayer-ajax") }}',
        detailsUrl: '{{ url("CaptureGovernment/Details") }}'
        @elseif($taxpayerType === 'special')
        getForm: '{{ route("capture.special.get-add-taxpayer-form") }}',
        submit: '{{ route("capture.special.add-taxpayer-ajax") }}',
        detailsUrl: '{{ url("CaptureSpecial/Details") }}'
        @endif
    };

    // Show message helper
    const showMessage = function(containerId, message, type) {
        const bgColor = type === 'success' ? 'bg-green-100 border-green-200 text-green-800' :
                       type === 'warning' ? 'bg-amber-100 border-amber-200 text-amber-800' :
                       'bg-red-100 border-red-200 text-red-800';
        const html = '<div class="p-4 mb-4 rounded-lg border ' + bgColor + '">' + message + '</div>';
        $('#' + containerId).html(html);
    };

    // Load form via AJAX
    const loadForm = function() {
        $.ajax({
            url: routes.getForm,
            type: 'GET',
            success: function(response) {
                if (response.success) {
                    $('#dvAddTaxpayerFormContent').html(response.html);
                    // Attach form submit handler
                    $('#frmAddTaxpayer').off('submit').on('submit', handleFormSubmit);
                } else {
                    $('#dvAddTaxpayerFormContent').html(
                        '<div class="p-4 text-center text-red-600">Error loading form: ' + (response.message || 'Unknown error') + '</div>'
                    );
                }
            },
            error: function(xhr) {
                $('#dvAddTaxpayerFormContent').html(
                    '<div class="p-4 text-center text-red-600">Error loading form. Please try again.</div>'
                );
            }
        });
    };

    // Handle form submission
    const handleFormSubmit = function(e) {
        e.preventDefault();

        // Show loading state
        if (typeof $.showLoading === 'function') {
            $.showLoading('Creating Taxpayer...', 'Please wait');
        }

        const $submitBtn = $('#frmAddTaxpayer button[type="submit"]');
        const originalText = $submitBtn.html();
        $submitBtn.prop('disabled', true).html(
            '<svg class="animate-spin h-4 w-4 inline mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">' +
            '<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>' +
            '<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>' +
            '</svg> Saving...'
        );

        $.ajax({
            url: routes.submit,
            type: 'POST',
            data: $('#frmAddTaxpayer').serialize(),
            success: function(response) {
                if (typeof $.hideLoading === 'function') {
                    $.hideLoading();
                }

                if (response.success) {
                    // Show success message
                    showMessage('dvAddTaxpayerMessage', response.message || 'Taxpayer created successfully!', 'success');

                    // Refresh the table on the page if it exists
                    if (typeof loadTaxpayerData === 'function') {
                        loadTaxpayerData();
                    }

                    // Close modal after a short delay
                    setTimeout(function() {
                        closeModal();

                        // Show alert with option to view details
                        if (response.data) {
                            const viewDetails = confirm(response.message + '\n\nWould you like to view the taxpayer details?');
                            if (viewDetails) {
                                const idField = taxpayerType === 'individual' ? 'IndividualID' :
                                               taxpayerType === 'corporate' ? 'CompanyID' :
                                               taxpayerType === 'government' ? 'GovernmentID' : 'SpecialID';
                                const rinField = taxpayerType === 'individual' ? 'IndividualRIN' :
                                                taxpayerType === 'corporate' ? 'CompanyRIN' :
                                                taxpayerType === 'government' ? 'GovernmentRIN' : 'SpecialRIN';

                                const id = response.data[idField];
                                const rin = response.data[rinField] || '';
                                window.location.href = routes.detailsUrl + '/' + id + '/' + rin;
                            }
                        }
                    }, 1000);
                } else {
                    $submitBtn.prop('disabled', false).html(originalText);
                    showMessage('dvAddTaxpayerMessage', response.message || 'Error creating taxpayer', 'error');
                }
            },
            error: function(xhr) {
                if (typeof $.hideLoading === 'function') {
                    $.hideLoading();
                }
                $submitBtn.prop('disabled', false).html(originalText);

                let errorMessage = 'Error creating taxpayer';

                if (xhr.status === 422 && xhr.responseJSON?.errors) {
                    const errors = xhr.responseJSON.errors;
                    errorMessage = '<ul class="list-disc pl-5">';
                    for (let field in errors) {
                        errorMessage += '<li>' + errors[field][0] + '</li>';
                    }
                    errorMessage += '</ul>';
                } else if (xhr.responseJSON?.message) {
                    errorMessage = xhr.responseJSON.message;
                }

                showMessage('dvAddTaxpayerMessage', errorMessage, 'error');
            }
        });
    };

    // Open modal and load form
    const openModal = function() {
        $('#dvAddTaxpayerModal').removeClass('hidden');
        // Reset form content with loading spinner
        $('#dvAddTaxpayerFormContent').html(
            '<div class="flex items-center justify-center py-8">' +
            '<svg class="animate-spin h-8 w-8 text-teal-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">' +
            '<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>' +
            '<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>' +
            '</svg>' +
            '<span class="ml-2 text-gray-600">Loading form...</span>' +
            '</div>'
        );
        // Load form via AJAX
        loadForm();
    };

    // Close modal
    const closeModal = function() {
        $('#dvAddTaxpayerModal').addClass('hidden');
        $('#dvAddTaxpayerFormContent').empty();
    };

    // Public API
    return {
        openModal: openModal,
        closeModal: closeModal
    };
})(jQuery);

// Global function bindings
window.openAddTaxpayerModal = AddTaxpayerModule.openModal;
window.closeAddTaxpayerModal = AddTaxpayerModule.closeModal;
</script>
@endpush