@extends('layouts.auth.app')

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

@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 Income</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>

    <!-- Associated Assets 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">Associated Assets</h3>
        </div>
        <div class="px-6 py-4">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200" id="tblAssetList">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Asset Type</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Asset Name</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tax Payer Role</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($assetList ?? [] as $asset)
                        <tr>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ $asset->AssetTypeName ?? '' }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ $asset->AssetName ?? '' }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ $asset->TaxPayerRoleName ?? '' }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm">
                                <button onclick="showAssetDetails({{ $asset->TPAID ?? 0 }})" class="text-teal-600 hover:text-teal-900">Quick View</button>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="px-4 py-6 text-center text-sm text-gray-500">No assets found</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Direct Assessment Income Streams -->
    <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">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-900">Direct Assessment Income Streams</h3>
                <button onclick="openIncomeStreamModal()" class="inline-flex items-center px-3 py-1.5 bg-red-600 border border-transparent rounded-md text-xs font-medium text-white hover:bg-red-700 transition-colors">
                    <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="M12 4v16m8-8H4" />
                    </svg>
                    New Direct Assessment Income Streams
                </button>
            </div>
        </div>
        <div class="px-6 py-4" id="dvIncomeStreamData">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200" id="tblIncomeStream">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tax Year</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Business</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Income</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tax Payer Role</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($incomeStreamList ?? [] as $income)
                        <tr>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ $income->TaxYear ?? '' }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ $income->BusinessName ?? '' }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ number_format($income->TotalIncomeEarned ?? 0, 2) }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ $income->TaxPayerRoleName ?? '' }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm">
                                <button onclick="deleteIncomeStream({{ $income->RowID ?? 0 }})" class="text-red-600 hover:text-red-900">Remove</button>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="px-4 py-6 text-center text-sm text-gray-500">No income streams found</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- PAYE Income Streams -->
    <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">PAYE Income Streams</h3>
        </div>
        <div class="px-6 py-4" id="dvPayeIncomeStreamData">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200" id="tblPayeIncomeStream">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Employer</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Receipt Ref</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Assessable Income</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">PAYE Assessed</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tax Paid</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($payeIncomeStreamList ?? [] as $paye)
                        <tr>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ $paye->EmployerName ?? '' }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ $paye->ReceiptRef ?? '' }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ number_format($paye->AssessableIncome ?? 0, 2) }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ number_format($paye->PayeAssessedAmount ?? 0, 2) }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ number_format($paye->PayeTaxPaid ?? 0, 2) }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm">
                                <button onclick="editPayeIncomeStream({{ $paye->RowID ?? 0 }})" class="text-teal-600 hover:text-teal-900">Edit</button>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="px-4 py-6 text-center text-sm text-gray-500">No PAYE income streams found</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- TCC 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 bg-gray-50">
            <h3 class="text-lg font-semibold text-gray-900">TCC Details</h3>
        </div>
        <div class="px-6 py-4" id="dvTCCDetailData">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200" id="tblTCCDetails">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tax Year</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Assessable Income</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">TCC Tax Paid</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ERAS Assessed</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ERAS Tax Paid</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($tccDetailList ?? [] as $detail)
                        <tr>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ $detail->TaxYear ?? '' }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ number_format($detail->AssessableIncome ?? 0, 2) }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ number_format($detail->TCCTaxPaid ?? 0, 2) }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ number_format($detail->ERASAssessed ?? 0, 2) }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ number_format($detail->ERASTaxPaid ?? 0, 2) }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm">
                                <button onclick="editTCCDetail({{ $detail->TCCDetailID ?? 0 }})" class="text-teal-600 hover:text-teal-900">Edit</button>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="px-4 py-6 text-center text-sm text-gray-500">No TCC details found</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Tax Certificate Data -->
    <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">Tax Certificate Data</h3>
        </div>
        <div class="px-6 py-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Tax Payer Type</label>
                    <p class="text-sm font-semibold text-gray-900">{{ $formData->TaxPayerTypeName ?? '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">{{ $formData->TaxPayerName ?? '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">{{ $formData->TaxYear ?? 'N/A' }}</p>
                </div>
                <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">{{ $formData->RequestRefNo ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Serial Number</label>
                    <p class="text-sm font-semibold text-gray-900">{{ $formData->SerialNumber ?? 'N/A' }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Liability Summary -->
    <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">Liability Summary</h3>
        </div>
        <div class="px-6 py-4">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200" id="tblLiabilitySummary">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tax Year</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Assessed</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Paid</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Balance</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @php
                            $totalAssessed = 0;
                            $totalPaid = 0;
                            $totalBalance = 0;
                        @endphp
                        @forelse($taxPayerLiability ?? [] as $liability)
                        @php
                            $totalAssessed += $liability->AssessmentAmount ?? 0;
                            $totalPaid += $liability->PaymentAmount ?? 0;
                            $totalBalance += $liability->BalanceAmount ?? 0;
                        @endphp
                        <tr>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ $liability->TaxYear ?? '' }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ number_format($liability->AssessmentAmount ?? 0, 2) }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ number_format($liability->PaymentAmount ?? 0, 2) }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ number_format($liability->BalanceAmount ?? 0, 2) }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="px-4 py-6 text-center text-sm text-gray-500">No liability records found</td>
                        </tr>
                        @endforelse
                    </tbody>
                    @if(count($taxPayerLiability ?? []) > 0)
                    <tfoot class="bg-gray-50">
                        <tr>
                            <td class="px-4 py-3 text-sm font-semibold text-gray-900">Totals</td>
                            <td class="px-4 py-3 text-sm font-semibold text-gray-900">{{ number_format($totalAssessed, 2) }}</td>
                            <td class="px-4 py-3 text-sm font-semibold text-gray-900">{{ number_format($totalPaid, 2) }}</td>
                            <td class="px-4 py-3 text-sm font-semibold text-gray-900">{{ number_format($totalBalance, 2) }}</td>
                        </tr>
                    </tfoot>
                    @endif
                </table>
            </div>
        </div>
    </div>

    <!-- Validation 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 bg-gray-50">
            <h3 class="text-lg font-semibold text-gray-900">Validate Tax Payer Income</h3>
        </div>

        <form id="frmValidateTaxPayerIncome" action="{{ route('process-tcc-request.validate-taxpayer-income.post', $requestData->TCCRequestID) }}" method="POST">
            @csrf
            <input type="hidden" name="RequestID" value="{{ $requestData->TCCRequestID }}">
            <input type="hidden" name="VTPIncomeID" value="{{ $formData->VTPIncomeID ?? '' }}">
            <input type="hidden" name="TCCID" value="{{ $formData->TCCID ?? '' }}">
            <input type="hidden" name="TaxPayerID" value="{{ $formData->TaxPayerID ?? '' }}">
            <input type="hidden" name="TaxPayerTypeID" value="{{ $formData->TaxPayerTypeID ?? '' }}">

            <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

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Source of Income -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Source of Income <span class="text-red-500">*</span></label>
                        <select name="SourceOfIncome" id="SourceOfIncome" 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 Source of Income</option>
                            @foreach($sourceOfIncomeList ?? [] as $source)
                            <option value="{{ $source->Value ?? $source }}" {{ ($formData->SourceOfIncome ?? '') == ($source->Value ?? $source) ? 'selected' : '' }}>{{ $source->Text ?? $source }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Business Name Confirmation -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Need Business Name</label>
                        <div class="flex items-center mt-2">
                            <input type="checkbox" name="needBusinessName" id="needBusinessName" class="h-4 w-4 text-teal-600 border-gray-300 rounded focus:ring-teal-500" {{ ($formData->needBusinessName ?? false) ? 'checked' : '' }}>
                            <label for="needBusinessName" class="ml-2 text-sm text-gray-700">Yes, I need business name confirmation</label>
                        </div>
                    </div>
                </div>

                <div class="mt-6">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Certificate Notes <span class="text-red-500">*</span></label>
                    <textarea name="CertificateNotes" id="CertificateNotes" 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 certificate notes" required>{{ $formData->CertificateNotes ?? '' }}</textarea>
                </div>

                <div class="mt-6">
                    <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 class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex justify-end space-x-3">
                <button type="submit" name="btnAction" value="Save" class="px-6 py-2 bg-gray-600 text-white font-medium rounded-lg hover:bg-gray-700 transition-colors">
                    Save
                </button>
                <button type="submit" name="btnApproveValidateAction" value="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>

<!-- Add Income Stream Modal -->
<div id="incomeStreamModal" 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="closeIncomeStreamModal()"></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">Add Income Stream</h3>
                    <button onclick="closeIncomeStreamModal()" 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 id="incomeStreamModalError" class="hidden mx-6 mt-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm"></div>

            <form id="frmAddIncomeStream">
                @csrf
                <div class="bg-white px-6 py-4 space-y-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Tax Year <span class="text-red-500">*</span></label>
                            <select name="TaxYear" id="cboTaxYear" 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 Year</option>
                                @foreach($yearList ?? [] as $year)
                                <option value="{{ $year }}">{{ $year }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Total Income Earned <span class="text-red-500">*</span></label>
                            <input type="number" name="TotalIncomeEarned" id="txtTotalIncomeEarned" step="0.01" 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 total income" required>
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Tax Payer Business <span class="text-red-500">*</span></label>
                            <select name="BusinessID" id="cboBusinessID" 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 Business</option>
                                @foreach($taxBusinessList ?? [] as $business)
                                <option value="{{ $business->BusinessID }}">{{ $business->BusinessName }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Tax Payer Role <span class="text-red-500">*</span></label>
                            <select name="TaxPayerRoleID" id="cboTaxPayerRoleID" 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 Role</option>
                                @foreach($taxPayerRoleList ?? [] as $role)
                                <option value="{{ $role->TaxPayerRoleID }}">{{ $role->TaxPayerRoleName }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
                        <textarea name="Notes" id="txtIncomeNotes" 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"></textarea>
                    </div>
                </div>

                <div class="bg-gray-50 px-6 py-4 flex justify-end space-x-3">
                    <button type="button" onclick="closeIncomeStreamModal()" 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</button>
                    <button type="submit" id="btnSaveIncomeStream" class="px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-lg hover:bg-teal-700 transition-colors">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Income Stream Modal Functions
    window.openIncomeStreamModal = function() {
        $('#frmAddIncomeStream')[0].reset();
        $('#incomeStreamModalError').addClass('hidden');
        $('#incomeStreamModal').removeClass('hidden');
    };

    window.closeIncomeStreamModal = function() {
        $('#incomeStreamModal').addClass('hidden');
    };

    // Add Income Stream Form
    $('#frmAddIncomeStream').on('submit', function(e) {
        e.preventDefault();
        $('#btnSaveIncomeStream').prop('disabled', true).text('Saving...');

        $.ajax({
            url: '{{ route("process-tcc-request.add-income-stream", $requestData->TCCRequestID) }}',
            type: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                $('#btnSaveIncomeStream').prop('disabled', false).text('Save');
                if (response.success) {
                    closeIncomeStreamModal();
                    location.reload();
                } else {
                    $('#incomeStreamModalError').text(response.message || 'Failed to save income stream').removeClass('hidden');
                }
            },
            error: function(xhr) {
                $('#btnSaveIncomeStream').prop('disabled', false).text('Save');
                let errorMsg = 'Error saving income stream';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMsg = xhr.responseJSON.message;
                }
                $('#incomeStreamModalError').text(errorMsg).removeClass('hidden');
            }
        });
    });

    // Delete Income Stream
    window.deleteIncomeStream = function(rowId) {
        if (!confirm('Are you sure you want to remove this income stream?')) {
            return;
        }

        $.ajax({
            url: '{{ route("process-tcc-request.delete-income-stream", $requestData->TCCRequestID) }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                RowID: rowId
            },
            success: function(response) {
                if (response.success) {
                    location.reload();
                } else {
                    alert(response.message || 'Failed to remove income stream');
                }
            },
            error: function(xhr) {
                alert('Error removing income stream');
            }
        });
    };

    // Show Asset Details
    window.showAssetDetails = function(tpaid) {
        // Implementation for showing asset details modal
        alert('Show asset details for TPAID: ' + tpaid);
    };

    // Edit PAYE Income Stream
    window.editPayeIncomeStream = function(rowId) {
        // Implementation for editing PAYE income stream modal
        alert('Edit PAYE income stream for Row ID: ' + rowId);
    };

    // Edit TCC Detail
    window.editTCCDetail = function(detailId) {
        // Implementation for editing TCC detail modal
        alert('Edit TCC detail for ID: ' + detailId);
    };
});
</script>
@endpush