@extends('layouts.auth.app')

@section('title', 'Reports & Analytics - Tax Revenue Management')

@push('styles')
<style>
:root { color-scheme: light; }
/* Tab underline styling */
.tab-active {
    border-bottom: 2px solid #0d9488;
    color: #0d9488;
}
.tab-inactive {
    border-bottom: 2px solid transparent;
    color: #6b7280;
}
.tab-inactive:hover {
    color: #374151;
    border-bottom-color: #d1d5db;
}
</style>
@endpush

@section('content')
<div id="reports-content">
    <section class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6 space-y-5">
        <!-- Header with Filters Toggle -->
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">Reports & Analytics</h1>
                <p class="text-gray-500 mt-1">Comprehensive insights and data analysis</p>
            </div>
            <button
                id="toggleFilters"
                class="flex items-center space-x-2 px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors"
            >
                <i data-lucide="sliders" class="h-5 w-5"></i>
                <span>Filters</span>
            </button>
        </div>

        <!-- Filters Panel (Hidden by default) -->
        <div id="filtersPanel" class="hidden bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-900">Filter Options</h3>
                <button
                    id="resetFilters"
                    class="text-sm text-teal-600 hover:text-teal-700 font-medium"
                >
                    Reset All
                </button>
            </div>

            <form id="filtersForm" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- Date Range -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Date Range</label>
                    <div class="space-y-2">
                        <input
                            type="date"
                            name="startDate"
                            id="filterStartDate"
                            value="{{ $reportsData['filters']['startDate'] ?? now()->startOfYear()->format('Y-m-d') }}"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                        />
                        <input
                            type="date"
                            name="endDate"
                            id="filterEndDate"
                            value="{{ $reportsData['filters']['endDate'] ?? now()->format('Y-m-d') }}"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                        />
                    </div>
                </div>

                <!-- Taxpayer Type -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Taxpayer Type</label>
                    <select
                        name="taxpayerType"
                        id="filterTaxpayerType"
                        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="all">All Types</option>
                        <option value="individual">Individual</option>
                        <option value="corporate">Corporate</option>
                        <option value="government">Government</option>
                        <option value="special">Special</option>
                    </select>
                </div>

                <!-- Asset Type -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Asset Type</label>
                    <select
                        name="assetType"
                        id="filterAssetType"
                        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="all">All Assets</option>
                        <option value="business">Business</option>
                        <option value="land">Land</option>
                        <option value="building">Building</option>
                        <option value="vehicle">Vehicle</option>
                    </select>
                </div>

                <!-- Revenue Stream -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Revenue Stream</label>
                    <select
                        name="revenueStream"
                        id="filterRevenueStream"
                        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="all">All Streams</option>
                        <option value="paye">PAYE</option>
                        <option value="direct">Direct Assessment</option>
                        <option value="land">Land Use Charge</option>
                        <option value="business">Business Premises</option>
                        <option value="vehicle">Vehicle License</option>
                    </select>
                </div>

                <!-- Status -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                    <select
                        name="status"
                        id="filterStatus"
                        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="all">All Status</option>
                        <option value="active">Active</option>
                        <option value="pending">Pending</option>
                        <option value="inactive">Inactive</option>
                        <option value="paid">Paid</option>
                        <option value="overdue">Overdue</option>
                    </select>
                </div>

                <!-- Location -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Location</label>
                    <select
                        name="location"
                        id="filterLocation"
                        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="all">All Locations</option>
                        <option value="benin-city">Benin City</option>
                        <option value="ekpoma">Ekpoma</option>
                        <option value="auchi">Auchi</option>
                        <option value="uromi">Uromi</option>
                        <option value="irrua">Irrua</option>
                    </select>
                </div>

                <!-- Amount Range -->
                <div class="md:col-span-2">
                    {{-- <label class="block text-sm font-medium text-gray-700 mb-2">Amount Range (&#8358;)</label>
                    <div class="flex space-x-2">
                        <input
                            type="number"
                            name="minAmount"
                            id="filterMinAmount"
                            placeholder="Min amount"
                            class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                        />
                        <input
                            type="number"
                            name="maxAmount"
                            id="filterMaxAmount"
                            placeholder="Max amount"
                            class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                        />
                    </div> --}}
                </div>

                <!-- Apply Filters Button -->
                <div class="lg:col-span-4 flex justify-end">
                    <button
                        type="submit"
                        class="px-6 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors"
                    >
                        Apply Filters
                    </button>
                </div>
            </form>
        </div>

        <!-- Tabs -->
        <div class="border-b border-gray-200">
            <nav class="-mb-px flex space-x-8" id="reportTabs">
                <button
                    class="tab-active flex items-center space-x-2 py-2 px-1 border-b-2 font-medium text-sm transition-colors"
                    data-tab="overview"
                >
                    <i data-lucide="layout-dashboard" class="h-4 w-4"></i>
                    <span>Overview</span>
                </button>
                <button
                    class="tab-inactive flex items-center space-x-2 py-2 px-1 border-b-2 font-medium text-sm transition-colors"
                    data-tab="revenue"
                >
                    <i data-lucide="dollar-sign" class="h-4 w-4"></i>
                    <span>Revenue Analysis</span>
                </button>
                <button
                    class="tab-inactive flex items-center space-x-2 py-2 px-1 border-b-2 font-medium text-sm transition-colors"
                    data-tab="taxpayers"
                >
                    <i data-lucide="users" class="h-4 w-4"></i>
                    <span>Taxpayer Insights</span>
                </button>
                <button
                    class="tab-inactive flex items-center space-x-2 py-2 px-1 border-b-2 font-medium text-sm transition-colors"
                    data-tab="performance"
                >
                    <i data-lucide="bar-chart-2" class="h-4 w-4"></i>
                    <span>Performance Metrics</span>
                </button>
            </nav>
        </div>

        <!-- Tab Content: Overview -->
        <div id="tab-overview" class="tab-content">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Revenue Trends Chart -->
                <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold text-gray-900">Revenue Trends</h3>
                        <div class="flex space-x-2">
                            <button
                                onclick="downloadChartAsImage('revenueChart', 'revenue_trends')"
                                class="p-1 text-gray-400 hover:text-gray-600"
                                title="Download as Image"
                            >
                                <i data-lucide="image" class="h-4 w-4"></i>
                            </button>
                            <button
                                onclick="exportData('revenue_trends')"
                                class="p-1 text-gray-400 hover:text-gray-600"
                                title="Download as CSV"
                            >
                                <i data-lucide="download" class="h-4 w-4"></i>
                            </button>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4 text-sm mb-4">
                        <div class="flex items-center space-x-2">
                            <div class="w-3 h-3 bg-teal-600 rounded-full"></div>
                            <span>Revenue</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <div class="w-3 h-3 bg-teal-300 rounded-full"></div>
                            <span>Target</span>
                        </div>
                    </div>
                    <div class="h-64">
                        <canvas id="revenueChart"></canvas>
                    </div>
                </div>

                <!-- Taxpayer Distribution Chart -->
                <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
                    <div class="flex items-center justify-between mb-4">
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900">Taxpayer Distribution</h3>
                            <p class="text-sm text-gray-500">By taxpayer type</p>
                        </div>
                        <div class="flex space-x-2">
                            <button
                                onclick="downloadChartAsImage('taxpayerChart', 'taxpayer_distribution')"
                                class="p-1 text-gray-400 hover:text-gray-600"
                                title="Download as Image"
                            >
                                <i data-lucide="image" class="h-4 w-4"></i>
                            </button>
                            <button
                                onclick="exportData('taxpayer_distribution')"
                                class="p-1 text-gray-400 hover:text-gray-600"
                                title="Download as CSV"
                            >
                                <i data-lucide="download" class="h-4 w-4"></i>
                            </button>
                        </div>
                    </div>
                    <div class="h-64">
                        <canvas id="taxpayerChart"></canvas>
                    </div>
                </div>

                <!-- Revenue Stream Performance Chart -->
                <div class="lg:col-span-2 bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
                    <div class="flex items-center justify-between mb-4">
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900">Revenue Stream Performance</h3>
                            <p class="text-sm text-gray-500">Current vs Previous Period</p>
                        </div>
                        <div class="flex space-x-2">
                            <button
                                onclick="downloadChartAsImage('streamChart', 'revenue_streams')"
                                class="p-1 text-gray-400 hover:text-gray-600"
                                title="Download as Image"
                            >
                                <i data-lucide="image" class="h-4 w-4"></i>
                            </button>
                            <button
                                onclick="exportData('revenue_streams')"
                                class="p-1 text-gray-400 hover:text-gray-600"
                                title="Download as CSV"
                            >
                                <i data-lucide="download" class="h-4 w-4"></i>
                            </button>
                        </div>
                    </div>
                    <div class="h-64">
                        <canvas id="streamChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tab Content: Revenue Analysis -->
        <div id="tab-revenue" class="tab-content hidden">
            <div class="space-y-6">
                <!-- Summary Cards -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
                        <h3 class="text-lg font-semibold text-gray-900 mb-2">Total Revenue</h3>
                        <p class="text-3xl font-bold text-teal-600" id="totalRevenue">&#8358;{{ number_format($reportsData['summary']['totalRevenue'] ?? 0) }}</p>
                        <p class="text-sm mt-1 {{ ($reportsData['summary']['revenueGrowth'] ?? 0) >= 0 ? 'text-green-600' : 'text-red-600' }}" id="revenueGrowth">
                            {{ ($reportsData['summary']['revenueGrowth'] ?? 0) >= 0 ? '&uarr;' : '&darr;' }} {{ abs($reportsData['summary']['revenueGrowth'] ?? 0) }}% from last period
                        </p>
                    </div>
                    <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
                        <h3 class="text-lg font-semibold text-gray-900 mb-2">Collection Rate</h3>
                        <p class="text-3xl font-bold text-blue-600" id="collectionRate">{{ $reportsData['summary']['collectionRate'] ?? 0 }}%</p>
                        <p class="text-sm mt-1 {{ ($reportsData['summary']['collectionRateChange'] ?? 0) >= 0 ? 'text-green-600' : 'text-red-600' }}" id="collectionRateChange">
                            {{ ($reportsData['summary']['collectionRateChange'] ?? 0) >= 0 ? '&uarr;' : '&darr;' }} {{ abs($reportsData['summary']['collectionRateChange'] ?? 0) }}% from last period
                        </p>
                    </div>
                    <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
                        <h3 class="text-lg font-semibold text-gray-900 mb-2">Outstanding</h3>
                        <p class="text-3xl font-bold text-red-600" id="outstanding">&#8358;{{ number_format($reportsData['summary']['outstanding'] ?? 0) }}</p>
                        <p class="text-sm mt-1 {{ ($reportsData['summary']['outstandingChange'] ?? 0) <= 0 ? 'text-green-600' : 'text-red-600' }}" id="outstandingChange">
                            {{ ($reportsData['summary']['outstandingChange'] ?? 0) <= 0 ? '&darr;' : '&uarr;' }} {{ abs($reportsData['summary']['outstandingChange'] ?? 0) }}% from last period
                        </p>
                    </div>
                </div>

                <!-- Collection Trends Chart -->
                <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
                    <div class="flex items-center justify-between mb-4">
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900">Collection Trends</h3>
                            <p class="text-sm text-gray-500">Payment methods over time</p>
                        </div>
                        <div class="flex space-x-2">
                            <button
                                onclick="downloadChartAsImage('trendsChart', 'collection_trends')"
                                class="p-1 text-gray-400 hover:text-gray-600"
                                title="Download as Image"
                            >
                                <i data-lucide="image" class="h-4 w-4"></i>
                            </button>
                            <button
                                onclick="exportData('collection_trends')"
                                class="p-1 text-gray-400 hover:text-gray-600"
                                title="Download as CSV"
                            >
                                <i data-lucide="download" class="h-4 w-4"></i>
                            </button>
                        </div>
                    </div>
                    <div class="flex items-center space-x-6 text-sm mb-4">
                        <div class="flex items-center space-x-2">
                            <div class="w-3 h-3 bg-teal-600 rounded-full"></div>
                            <span>Online</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <div class="w-3 h-3 bg-teal-300 rounded-full"></div>
                            <span>Offline</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <div class="w-3 h-3 bg-teal-400 rounded-full"></div>
                            <span>Mobile</span>
                        </div>
                    </div>
                    <div class="h-64">
                        <canvas id="trendsChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tab Content: Taxpayer Insights -->
        <div id="tab-taxpayers" class="tab-content hidden">
            <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Taxpayer Analytics</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    <div class="text-center p-4 bg-gray-50 rounded-lg">
                        <p class="text-2xl font-bold text-gray-900" id="totalTaxpayers">{{ number_format($taxpayerAnalytics['total'] ?? 0) }}</p>
                        <p class="text-sm text-gray-500">Total Taxpayers</p>
                    </div>
                    <div class="text-center p-4 bg-gray-50 rounded-lg">
                        <p class="text-2xl font-bold text-green-600" id="individualTaxpayers">{{ number_format($taxpayerAnalytics['individual'] ?? 0) }}</p>
                        <p class="text-sm text-gray-500">Individual</p>
                    </div>
                    <div class="text-center p-4 bg-gray-50 rounded-lg">
                        <p class="text-2xl font-bold text-blue-600" id="corporateTaxpayers">{{ number_format($taxpayerAnalytics['corporate'] ?? 0) }}</p>
                        <p class="text-sm text-gray-500">Corporate</p>
                    </div>
                    <div class="text-center p-4 bg-gray-50 rounded-lg">
                        <p class="text-2xl font-bold text-purple-600" id="govSpecialTaxpayers">{{ number_format($taxpayerAnalytics['governmentSpecial'] ?? 0) }}</p>
                        <p class="text-sm text-gray-500">Government & Special</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tab Content: Performance Metrics -->
        <div id="tab-performance" class="tab-content hidden">
            <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Performance Metrics</h3>
                <div class="space-y-4">
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <div>
                            <p class="font-medium text-gray-900">Revenue Target Achievement</p>
                            <p class="text-sm text-gray-500">Current period performance</p>
                        </div>
                        <div class="text-right">
                            <p class="text-2xl font-bold text-teal-600" id="targetAchievement">{{ $performanceMetrics['targetAchievement'] ?? 0 }}%</p>
                            <p class="text-sm text-green-600" id="targetStatus">{{ $performanceMetrics['targetStatus'] ?? 'Unknown' }}</p>
                        </div>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <div>
                            <p class="font-medium text-gray-900">Collection Efficiency</p>
                            <p class="text-sm text-gray-500">Time to collect vs target</p>
                        </div>
                        <div class="text-right">
                            <p class="text-2xl font-bold text-blue-600" id="collectionEfficiency">{{ $performanceMetrics['collectionEfficiency'] ?? 0 }}%</p>
                            <p class="text-sm text-green-600" id="efficiencyStatus">{{ $performanceMetrics['efficiencyStatus'] ?? 'Unknown' }}</p>
                        </div>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <div>
                            <p class="font-medium text-gray-900">Taxpayer Compliance</p>
                            <p class="text-sm text-gray-500">On-time payment rate</p>
                        </div>
                        <div class="text-right">
                            <p class="text-2xl font-bold text-green-600" id="complianceRate">{{ $performanceMetrics['complianceRate'] ?? 0 }}%</p>
                            <p class="text-sm text-green-600" id="complianceStatus">{{ $performanceMetrics['complianceStatus'] ?? 'Unknown' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<!-- Pass initial data to JavaScript -->
<script>
    window.reportsData = @json($reportsData);
    window.taxpayerAnalytics = @json($taxpayerAnalytics);
    window.performanceMetrics = @json($performanceMetrics);
    window.reportsApiUrl = "{{ route('reports.data') }}";
    window.reportsExportUrl = "{{ route('reports.export') }}";
</script>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script src="{{ asset('js/reports.js') }}"></script>
@endpush