@push('styles')
<style>
    /* Style Create and Edit buttons for Compliance Reports */
    .fi-ac-action[data-color="dark"] button,
    .fi-ac-action button[data-color="dark"],
    button.fi-btn[data-color="dark"],
    button[type="submit"].fi-btn-primary {
        background-color: #000000 !important;
        border-color: #000000 !important;
        color: #ffffff !important;
    }
    
    .fi-ac-action[data-color="dark"] button:hover,
    .fi-ac-action button[data-color="dark"]:hover,
    button.fi-btn[data-color="dark"]:hover,
    button[type="submit"].fi-btn-primary:hover {
        background-color: #1a1a1a !important;
        border-color: #1a1a1a !important;
    }
    
    /* Target Filament modal form buttons - Create and Save changes */
    .fi-modal button[type="submit"],
    .fi-modal-footer button[type="submit"],
    button[type="submit"].fi-btn,
    .fi-ac-action button[type="submit"],
    button.fi-btn-primary[type="submit"],
    .fi-modal .fi-btn-primary,
    .fi-modal-footer .fi-btn-primary {
        background-color: #000000 !important;
        border-color: #000000 !important;
        color: #ffffff !important;
    }
    
    .fi-modal button[type="submit"]:hover,
    .fi-modal-footer button[type="submit"]:hover,
    button[type="submit"].fi-btn:hover,
    .fi-ac-action button[type="submit"]:hover,
    button.fi-btn-primary[type="submit"]:hover,
    .fi-modal .fi-btn-primary:hover,
    .fi-modal-footer .fi-btn-primary:hover {
        background-color: #1a1a1a !important;
        border-color: #1a1a1a !important;
    }
    
    /* Ensure button text and icons are white */
    .fi-modal button[type="submit"] span,
    .fi-modal-footer button[type="submit"] span,
    button[type="submit"].fi-btn span,
    .fi-modal button[type="submit"] svg,
    .fi-modal-footer button[type="submit"] svg,
    button[type="submit"].fi-btn svg {
        color: #ffffff !important;
        fill: #ffffff !important;
    }
</style>
@endpush

<div>
    {{ $this->table }}
    
    <div class="compliance-summary">
        <div class="summary-card">
            <div class="summary-title">Total Tax Collected (YTD)</div>
            <div class="summary-value" style="color: #059669;" id="total-tax-ytd">
                <span style="opacity: 0.5;">Loading...</span>
            </div>
            <div class="summary-sub">Across all regions</div>
        </div>
        
        <div class="summary-card">
            <div class="summary-title">Pending Reports</div>
            <div class="summary-value" style="color: #F59E0B;" id="pending-reports">
                <span style="opacity: 0.5;">Loading...</span>
            </div>
            <div class="summary-sub">Awaiting generation</div>
        </div>
        
        <div class="summary-card">
            <div class="summary-title">Active Tax Groups</div>
            <div class="summary-value" style="color: #111827;" id="active-tax-groups">
                <span style="opacity: 0.5;">Loading...</span>
            </div>
            <div class="summary-sub" id="active-tax-groups-sub">
                Loading...
            </div>
        </div>
        
        <div class="summary-card">
            <div class="summary-title">Compliance Rate</div>
            <div class="summary-value" style="color: #059669;" id="compliance-rate">
                <span style="opacity: 0.5;">Loading...</span>
            </div>
            <div class="summary-sub">Filing accuracy</div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Load dashboard data via AJAX
    fetch('{{ route("admin.tax.compliance.data") }}', {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
        },
        credentials: 'same-origin'
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        if (data.success && data.data) {
            const dashboardData = data.data;
            
            // Format and display Total Tax Collected (YTD)
            const totalTaxYTD = parseFloat(dashboardData.totalTaxYTD || 0);
            const totalTaxElement = document.getElementById('total-tax-ytd');
            if (totalTaxElement) {
                let formattedTax = '';
                if (totalTaxYTD >= 1000000) {
                    formattedTax = '$' + (totalTaxYTD / 1000000).toFixed(2) + 'M';
                } else if (totalTaxYTD >= 1000) {
                    formattedTax = '$' + (totalTaxYTD / 1000).toFixed(2) + 'K';
                } else {
                    formattedTax = '$' + totalTaxYTD.toFixed(2);
                }
                totalTaxElement.textContent = formattedTax;
            }
            
            // Display Pending Reports
            const pendingReportsElement = document.getElementById('pending-reports');
            if (pendingReportsElement) {
                pendingReportsElement.textContent = dashboardData.pendingReports || 0;
            }
            
            // Display Active Tax Groups
            const activeTaxGroups = parseInt(dashboardData.activeTaxGroups || 0);
            const activeTaxGroupsElement = document.getElementById('active-tax-groups');
            if (activeTaxGroupsElement) {
                activeTaxGroupsElement.textContent = activeTaxGroups;
            }
            const activeTaxGroupsSubElement = document.getElementById('active-tax-groups-sub');
            if (activeTaxGroupsSubElement) {
                activeTaxGroupsSubElement.textContent = 'Across ' + activeTaxGroups + ' region' + (activeTaxGroups !== 1 ? 's' : '');
            }
            
            // Display Compliance Rate
            const complianceRateElement = document.getElementById('compliance-rate');
            if (complianceRateElement) {
                const complianceRate = parseFloat(dashboardData.complianceRate || 0);
                complianceRateElement.textContent = complianceRate.toFixed(1) + '%';
            }
        } else {
            console.error('Failed to load dashboard data:', data.message || 'Unknown error');
            // Set default values on error
            document.getElementById('total-tax-ytd').textContent = '$0.00';
            document.getElementById('pending-reports').textContent = '0';
            document.getElementById('active-tax-groups').textContent = '0';
            document.getElementById('active-tax-groups-sub').textContent = 'Across 0 regions';
            document.getElementById('compliance-rate').textContent = '0.0%';
        }
    })
    .catch(error => {
        console.error('Error loading dashboard data:', error);
        // Set default values on error
        document.getElementById('total-tax-ytd').textContent = '$0.00';
        document.getElementById('pending-reports').textContent = '0';
        document.getElementById('active-tax-groups').textContent = '0';
        document.getElementById('active-tax-groups-sub').textContent = 'Across 0 regions';
        document.getElementById('compliance-rate').textContent = '0.0%';
    });
});
</script>
@endpush