@extends('layouts.auth.app')

@section('title', 'Validate Tax Payer Information')

@section('content')
<div class="space-y-6">
    <!-- Header with Back Button -->
    <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <a href="{{ route('process-tcc-request.details', $requestData->TCCRequestID) }}" class="inline-flex items-center text-gray-600 hover:text-gray-900 transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
                Back to Details
            </a>
        </div>
        <h1 class="text-xl font-semibold text-gray-900">TCC Request - Validate Tax Payer Information</h1>
    </div>

    <!-- Request Information 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">Request Information</h3>
        </div>
        <div class="px-6 py-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div>
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Request Ref No</label>
                    <p class="text-sm font-semibold text-gray-900">{{ $requestData->RequestRefNo ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Request Date</label>
                    <p class="text-sm font-semibold text-gray-900">{{ $requestData->RequestDate ? \Carbon\Carbon::parse($requestData->RequestDate)->format('d-M-Y') : 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Tax Year</label>
                    <p class="text-sm font-semibold text-gray-900">{{ $requestData->TaxYear ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Tax Payer Name</label>
                    <p class="text-sm font-semibold text-gray-900">{{ $requestData->TaxPayerName ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Tax Payer RIN</label>
                    <p class="text-sm font-semibold text-gray-900">{{ $requestData->TaxPayerRIN ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Mobile Number</label>
                    <p class="text-sm font-semibold text-gray-900">{{ $requestData->MobileNumber ?? 'N/A' }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Validation 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">Validate Tax Payer Information</h3>
        </div>

        <form id="frmValidateTaxPayerInformation" action="{{ route('process-tcc-request.validate-taxpayer-information.post', $requestData->TCCRequestID) }}" method="POST">
            @csrf
            <input type="hidden" name="RequestID" value="{{ $requestData->TCCRequestID }}">
            <input type="hidden" name="IndividualID" value="{{ $formData->IndividualID ?? '' }}">
            <input type="hidden" name="VTPInformationID" value="{{ $formData->VTPInformationID ?? '' }}">
            <input type="hidden" name="IndividualRIN" value="{{ $formData->IndividualRIN ?? '' }}">

            <div class="px-6 py-4">
                @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

                @if($errors->any())
                <div class="mb-4 p-4 bg-red-50 border border-red-200 text-red-700 rounded-lg">
                    <ul class="list-disc list-inside">
                        @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif

                <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</label>
                        <select name="TaxPayerTypeID" id="TaxPayerTypeID" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-100" disabled>
                            <option value="">Select Tax Payer Type</option>
                            @foreach($taxPayerTypeList ?? [] as $type)
                            <option value="{{ $type['id'] ?? $type->id }}" {{ ($formData->TaxPayerTypeID ?? '') == ($type['id'] ?? $type->id) ? 'selected' : '' }}>{{ $type['text'] ?? $type->text }}</option>
                            @endforeach
                        </select>
                        <input type="hidden" name="TaxPayerTypeID" value="{{ $formData->TaxPayerTypeID ?? '' }}">
                    </div>

                    <!-- Gender -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Gender <span class="text-red-500">*</span></label>
                        <select name="GenderID" id="GenderID" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500" required>
                            <option value="">Select Gender</option>
                            @foreach($genderList ?? [] as $gender)
                            <option value="{{ $gender->id }}" {{ ($formData->GenderID ?? '') == $gender->id ? 'selected' : '' }}>{{ $gender->text }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Title -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Title <span class="text-red-500">*</span></label>
                        <select name="TitleID" id="TitleID" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500" required>
                            <option value="">Select Title</option>
                            @foreach($titleList ?? [] as $title)
                            <option value="{{ $title->id }}" {{ ($formData->TitleID ?? '') == $title->id ? 'selected' : '' }}>{{ $title->text }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- First Name -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">First Name <span class="text-red-500">*</span></label>
                        <input type="text" name="FirstName" id="FirstName" value="{{ $formData->FirstName ?? '' }}" 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 first name" required>
                    </div>

                    <!-- Last Name -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Last Name <span class="text-red-500">*</span></label>
                        <input type="text" name="LastName" id="LastName" value="{{ $formData->LastName ?? '' }}" 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 last name" required>
                    </div>

                    <!-- Middle Name -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Middle Name</label>
                        <input type="text" name="MiddleName" id="MiddleName" value="{{ $formData->MiddleName ?? '' }}" 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 middle name">
                    </div>

                    <!-- Date of Birth -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Date of Birth <span class="text-red-500">*</span></label>
                        <input type="date" name="DOB" id="DOB" value="{{ $formData->DOB ?? '' }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500" required>
                    </div>

                    <!-- TIN -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">TIN <span class="text-red-500">*</span></label>
                        <input type="text" name="TIN" id="TIN" value="{{ $formData->TIN ?? '' }}" 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 Tax Identification Number">
                    </div>

                    <!-- Mobile Number 1 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Mobile Number 1 <span class="text-red-500">*</span></label>
                        <div class="flex">
                            <span class="inline-flex items-center px-3 text-sm text-gray-600 bg-gray-100 border border-r-0 border-gray-300 rounded-l-lg">234-0-</span>
                            <input type="text" name="MobileNumber1" id="MobileNumber1" value="{{ $formData->MobileNumber1 ?? '' }}" class="flex-1 px-3 py-2 border border-gray-300 rounded-r-lg bg-gray-100" placeholder="Enter mobile number" readonly>
                        </div>
                    </div>

                    <!-- Mobile Number 2 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Mobile Number 2</label>
                        <div class="flex">
                            <span class="inline-flex items-center px-3 text-sm text-gray-600 bg-gray-100 border border-r-0 border-gray-300 rounded-l-lg">234-0-</span>
                            <input type="text" name="MobileNumber2" id="MobileNumber2" value="{{ $formData->MobileNumber2 ?? '' }}" class="flex-1 px-3 py-2 border border-gray-300 rounded-r-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500" placeholder="Enter alternative mobile number">
                        </div>
                    </div>

                    <!-- Email Address 1 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
                        <input type="email" name="EmailAddress1" id="EmailAddress1" value="{{ $formData->EmailAddress1 ?? '' }}" 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 email address">
                    </div>

                    <!-- Email Address 2 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Alternative Email Address</label>
                        <input type="email" name="EmailAddress2" id="EmailAddress2" value="{{ $formData->EmailAddress2 ?? '' }}" 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 alternative email address">
                    </div>

                    <!-- Biometric Details -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Biometric Details</label>
                        <input type="text" name="BiometricDetails" id="BiometricDetails" value="{{ $formData->BiometricDetails ?? '' }}" 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 biometric details">
                    </div>

                    <!-- Tax Office -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Tax Office <span class="text-red-500">*</span></label>
                        <select name="TaxOfficeID" id="TaxOfficeID" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500" required>
                            <option value="">Select Tax Office</option>
                            @foreach($taxOfficeList ?? [] as $office)
                            <option value="{{ $office->id }}" {{ ($formData->TaxOfficeID ?? '') == $office->id ? 'selected' : '' }}>{{ $office->text }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Marital Status -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Marital Status</label>
                        <select name="MaritalStatusID" id="MaritalStatusID" 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 Marital Status</option>
                            @foreach($maritalStatusList ?? [] as $status)
                            <option value="{{ $status->id }}" {{ ($formData->MaritalStatusID ?? '') == $status->id ? 'selected' : '' }}>{{ $status->text }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Nationality -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Nationality <span class="text-red-500">*</span></label>
                        <select name="NationalityID" id="NationalityID" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500" required>
                            <option value="">Select Nationality</option>
                            @foreach($nationalityList ?? [] as $nationality)
                            <option value="{{ $nationality->id }}" {{ ($formData->NationalityID ?? '') == $nationality->id ? 'selected' : '' }}>{{ $nationality->text }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Economic Activities -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Economic Activities <span class="text-red-500">*</span></label>
                        <select name="EconomicActivitiesID" id="EconomicActivitiesID" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500" required>
                            <option value="">Select Economic Activities</option>
                            @foreach($economicActivitiesList ?? [] as $activity)
                            <option value="{{ $activity->id }}" {{ ($formData->EconomicActivitiesID ?? '') == $activity->id ? 'selected' : '' }}>{{ $activity->text }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Notification Method -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Notification Method <span class="text-red-500">*</span></label>
                        <select name="NotificationMethodID" id="NotificationMethodID" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500" required>
                            <option value="">Select Notification Method</option>
                            @foreach($notificationMethodList ?? [] as $method)
                            <option value="{{ $method->id }}" {{ ($formData->NotificationMethodID ?? '') == $method->id ? 'selected' : '' }}>{{ $method->text }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                    <!-- Contact Address -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Contact Address <span class="text-red-500">*</span></label>
                        <textarea name="ContactAddress" id="ContactAddress" 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 contact address" required>{{ $formData->ContactAddress ?? '' }}</textarea>
                    </div>

                    <!-- Notes -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">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">{{ $formData->Notes ?? '' }}</textarea>
                    </div>
                </div>
            </div>

            <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex justify-end">
                <button type="submit" class="px-6 py-2 bg-teal-600 text-white font-medium rounded-lg hover:bg-teal-700 transition-colors">
                    Approve
                </button>
            </div>
        </form>
    </div>

    <!-- Internal Notes Section -->
    @include('pages.admin.operation-manager.partials.tcc-internal-notes', ['requestId' => $requestData->TCCRequestID, 'requestNotesList' => $requestNotesList ?? []])
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Form submission handling with AJAX
    $('#frmValidateTaxPayerInformation').on('submit', function(e) {
        e.preventDefault();

        // Get the submit button and show loading state
        const $submitBtn = $(this).find('button[type="submit"]');
        const originalBtnHtml = $submitBtn.html();
        $submitBtn.prop('disabled', true).html(`
            <svg class="inline animate-spin h-4 w-4 text-white 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>
            Processing...
        `);

        // Clear previous error messages
        $('#ajaxErrorMessage').addClass('hidden').empty();

        // Collect form data
        const formData = {
            _token: '{{ csrf_token() }}',
            RequestID: $('input[name="RequestID"]').val(),
            IndividualID: $('input[name="IndividualID"]').val(),
            VTPInformationID: $('input[name="VTPInformationID"]').val(),
            IndividualRIN: $('input[name="IndividualRIN"]').val(),
            TaxPayerTypeID: $('input[name="TaxPayerTypeID"]').val(),
            GenderID: $('#GenderID').val(),
            TitleID: $('#TitleID').val(),
            FirstName: $('#FirstName').val(),
            LastName: $('#LastName').val(),
            MiddleName: $('#MiddleName').val(),
            DOB: $('#DOB').val(),
            TIN: $('#TIN').val(),
            MobileNumber1: $('#MobileNumber1').val(),
            MobileNumber2: $('#MobileNumber2').val(),
            EmailAddress1: $('#EmailAddress1').val(),
            EmailAddress2: $('#EmailAddress2').val(),
            BiometricDetails: $('#BiometricDetails').val(),
            TaxOfficeID: $('#TaxOfficeID').val(),
            MaritalStatusID: $('#MaritalStatusID').val(),
            NationalityID: $('#NationalityID').val(),
            EconomicActivitiesID: $('#EconomicActivitiesID').val(),
            NotificationMethodID: $('#NotificationMethodID').val(),
            ContactAddress: $('#ContactAddress').val(),
            Notes: $('#Notes').val()
        };

        $.ajax({
            url: '{{ route("process-tcc-request.validate-taxpayer-information.post", $requestData->TCCRequestID) }}',
            type: 'POST',
            data: formData,
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    // Show success message
                    showSuccessMessage(response.message || 'Tax Payer Information validated successfully.');

                    // Redirect to details page after short delay
                    setTimeout(function() {
                        if (response.redirectUrl) {
                            window.location.href = response.redirectUrl;
                        } else {
                            window.location.href = '{{ route("process-tcc-request.details", $requestData->TCCRequestID) }}';
                        }
                    }, 1500);
                } else {
                    // Show error message
                    showErrorMessage(response.message || 'An error occurred while validating taxpayer information.');
                    resetSubmitButton($submitBtn, originalBtnHtml);
                }
            },
            error: function(xhr, status, error) {
                let errorMessage = 'An error occurred while processing your request.';

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

                showErrorMessage(errorMessage);
                resetSubmitButton($submitBtn, originalBtnHtml);
            }
        });
    });

    // Helper function to show success message
    function showSuccessMessage(message) {
        // Remove any existing messages first
        $('#ajaxErrorMessage').addClass('hidden');
        $('#ajaxSuccessMessage').remove();

        // Insert success message
        const successHtml = `
            <div id="ajaxSuccessMessage" class="mb-4 p-4 bg-green-50 border border-green-200 text-green-700 rounded-lg flex items-center">
                <svg class="w-5 h-5 mr-2" 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>
                ${message}
            </div>
        `;
        $('#frmValidateTaxPayerInformation .px-6.py-4').first().prepend(successHtml);

        // Scroll to top of form
        $('html, body').animate({
            scrollTop: $('#frmValidateTaxPayerInformation').offset().top - 100
        }, 300);
    }

    // Helper function to show error message
    function showErrorMessage(message) {
        // Remove success message if exists
        $('#ajaxSuccessMessage').remove();

        // Show error message
        let $errorContainer = $('#ajaxErrorMessage');
        if ($errorContainer.length === 0) {
            // Create error container if it doesn't exist
            const errorHtml = `<div id="ajaxErrorMessage" class="mb-4 p-4 bg-red-50 border border-red-200 text-red-700 rounded-lg"></div>`;
            $('#frmValidateTaxPayerInformation .px-6.py-4').first().prepend(errorHtml);
            $errorContainer = $('#ajaxErrorMessage');
        }

        $errorContainer.html(message).removeClass('hidden');

        // Scroll to top of form to show error
        $('html, body').animate({
            scrollTop: $('#frmValidateTaxPayerInformation').offset().top - 100
        }, 300);
    }

    // Helper function to reset submit button
    function resetSubmitButton($btn, originalHtml) {
        $btn.prop('disabled', false).html(originalHtml);
    }
});
</script>
@endpush