@extends('layouts.auth.app')

@section('title', 'Individual Taxpayer - Generate Assessment')

@push('styles')
<style>
    .rule-checkbox {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }
    .rule-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 Assessment 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>

            <!-- Assessment Rules 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 Assessment Rules</h2>
                    <div class="flex items-center space-x-4">
                        <span id="selectedCount" class="text-sm text-gray-500">0 rules selected</span>
                        <span id="totalAmount" class="text-sm font-semibold text-teal-600">Total: ₦0.00</span>
                        <button type="button" id="btnGenerateAssessment" 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 Assessment
                        </button>
                    </div>
                </div>

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

                <div class="p-6">
                    @if(count($assessmentRules) > 0)
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200" id="tblAssessmentRules">
                            <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="selectAllRules" class="rule-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">Asset Type</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Asset RIN</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rule Year</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rule Name</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rule Amount</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @foreach($assessmentRules as $rule)
                                <tr class="rule-row hover:bg-gray-50" data-rule-id="{{ $rule->AssessmentRuleID }}" data-asset-id="{{ $rule->AssetID ?? 0 }}" data-amount="{{ $rule->AssessmentAmount ?? 0 }}">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <input type="checkbox" class="rule-checkbox rounded border-gray-300 text-teal-600 focus:ring-teal-500"
                                            id="serviceCheckbox{{ $rule->AssessmentRuleID }}{{ $rule->AssetID ?? 0 }}"
                                            data-rule-id="{{ $rule->AssessmentRuleID }}"
                                            data-asset-id="{{ $rule->AssetID ?? 0 }}"
                                            data-amount="{{ $rule->AssessmentAmount ?? 0 }}">
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $rule->AssetTypeName ?? 'N/A' }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $rule->AssetRIN ?? 'N/A' }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $rule->TaxYear ?? 'N/A' }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $rule->AssessmentRuleName ?? 'N/A' }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">₦{{ number_format($rule->AssessmentAmount ?? 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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                        <h3 class="mt-2 text-sm font-medium text-gray-900">No Assessment Rules Available</h3>
                        <p class="mt-1 text-sm text-gray-500">This taxpayer has no billable assessment rules 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="hdnAssessmentRuleId" value="">
@endsection

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

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

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

        // Update hidden field
        $('#hdnAssessmentRuleId').val(JSON.stringify(selectedRules));

        // Update row highlighting
        $('.rule-row').each(function() {
            const ruleId = $(this).data('rule-id');
            const assetId = $(this).data('asset-id');
            const isSelected = selectedRules.some(r => r.serviceId == ruleId && r.assId == assetId);
            $(this).toggleClass('selected', isSelected);
        });
    }

    // Handle individual checkbox clicks
    $(document).on('change', '.rule-checkbox:not(#selectAllRules)', function() {
        const checkbox = $(this);
        const ruleId = checkbox.data('rule-id');
        const assetId = checkbox.data('asset-id');
        const amount = checkbox.data('amount');

        if (checkbox.is(':checked')) {
            selectedRules.push({
                serviceId: ruleId,
                assId: assetId,
                amount: amount
            });
        } else {
            const index = selectedRules.findIndex(r => r.serviceId == ruleId && r.assId == assetId);
            if (index > -1) {
                selectedRules.splice(index, 1);
            }
        }

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

        updateSelectionUI();
    });

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

        $('.rule-checkbox:not(#selectAllRules)').each(function() {
            $(this).prop('checked', isChecked);
            if (isChecked) {
                selectedRules.push({
                    serviceId: $(this).data('rule-id'),
                    assId: $(this).data('asset-id'),
                    amount: $(this).data('amount')
                });
            }
        });

        updateSelectionUI();
    });

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

    // Handle generate assessment button
    $('#btnGenerateAssessment').on('click', function() {
        if (selectedRules.length === 0) {
            showMessage('error', 'Please select at least one assessment rule');
            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-assessment.post") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                TaxPayerID: taxPayerId,
                AssessmentRuleId: JSON.stringify(selectedRules)
            },
            success: function(response) {
                if (response.success) {
                    showMessage('success', response.message || 'Assessment bill created successfully');
                    setTimeout(function() {
                        window.location.href = '{{ route("capture.individual.details", ["id" => $individual->IndividualID]) }}';
                    }, 1500);
                } else {
                    showMessage('error', response.message || 'Failed to create assessment');
                    btn.prop('disabled', false).html('Generate Assessment');
                }
            },
            error: function(xhr) {
                const errorMsg = xhr.responseJSON?.message || 'An error occurred while creating the assessment';
                showMessage('error', errorMsg);
                btn.prop('disabled', false).html('Generate Assessment');
            }
        });
    });

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