<x-app-layout>
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center mb-6">
        <a href="{{ route('reports.index') }}" class="text-slate-400 hover:text-teal-600 mr-3 sm:mr-4 transition mb-2 sm:mb-0">
            <i class="fas fa-arrow-left text-lg sm:text-xl"></i>
        </a>
        <div>
            <h2 class="text-xl sm:text-2xl font-bold text-slate-800">Pemasukan vs Pengeluaran</h2>
            <p class="text-slate-500 mt-1 text-sm">Bandingkan arus kas Anda</p>
        </div>
    </div>

    <!-- Period Filter -->
    <div class="bg-white border border-slate-100 rounded-xl sm:rounded-2xl p-4 shadow-sm mb-6">
        <form action="{{ route('reports.income-expense') }}" method="GET" class="flex flex-col sm:flex-row flex-wrap items-start sm:items-end gap-4">
            <div class="w-full sm:w-auto">
                <label class="block text-xs font-medium text-slate-500 mb-1">Periode</label>
                <select name="period" class="w-full sm:w-auto bg-slate-50 border-slate-200 text-slate-800 rounded-lg focus:border-teal-500 focus:ring-teal-500">
                    <option value="month" {{ ($period ?? 'month') === 'month' ? 'selected' : '' }}>Bulanan</option>
                    <option value="quarter" {{ ($period ?? '') === 'quarter' ? 'selected' : '' }}>Kuartalan</option>
                </select>
            </div>
            <div class="w-full sm:w-auto">
                <label class="block text-xs font-medium text-slate-500 mb-1">Tahun</label>
                <select name="year" class="w-full sm:w-auto bg-slate-50 border-slate-200 text-slate-800 rounded-lg focus:border-teal-500 focus:ring-teal-500">
                    @foreach($years ?? [now()->year] as $y)
                        <option value="{{ $y }}" {{ ($year ?? now()->year) == $y ? 'selected' : '' }}>{{ $y }}</option>
                    @endforeach
                </select>
            </div>
            <button type="submit" class="w-full sm:w-auto px-4 py-2 bg-teal-500 hover:bg-teal-600 text-white font-medium rounded-lg transition">
                <i class="fas fa-filter mr-2"></i>Terapkan
            </button>
        </form>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4 mb-6">
        <div class="bg-white border border-slate-100 rounded-xl sm:rounded-2xl p-4 sm:p-5 shadow-sm">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs sm:text-sm text-slate-500">Total Pemasukan</p>
                    <p class="text-lg sm:text-2xl font-bold text-emerald-500 mt-1">Rp {{ number_format($totalIncome ?? 0, 0, ',', '.') }}</p>
                </div>
                <div class="w-10 h-10 sm:w-12 sm:h-12 bg-emerald-100 rounded-xl flex items-center justify-center">
                    <i class="fas fa-arrow-down text-emerald-600 text-base sm:text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white border border-slate-100 rounded-xl sm:rounded-2xl p-4 sm:p-5 shadow-sm">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs sm:text-sm text-slate-500">Total Pengeluaran</p>
                    <p class="text-lg sm:text-2xl font-bold text-rose-500 mt-1">Rp {{ number_format($totalExpense ?? 0, 0, ',', '.') }}</p>
                </div>
                <div class="w-10 h-10 sm:w-12 sm:h-12 bg-rose-100 rounded-xl flex items-center justify-center">
                    <i class="fas fa-arrow-up text-rose-600 text-base sm:text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white border border-slate-100 rounded-xl sm:rounded-2xl p-4 sm:p-5 shadow-sm">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs sm:text-sm text-slate-500">Pendapatan Bersih</p>
                    <p class="text-lg sm:text-2xl font-bold {{ ($totalNet ?? 0) >= 0 ? 'text-emerald-500' : 'text-rose-500' }} mt-1">
                        Rp {{ number_format($totalNet ?? 0, 0, ',', '.') }}
                    </p>
                </div>
                <div class="w-10 h-10 sm:w-12 sm:h-12 bg-teal-100 rounded-xl flex items-center justify-center">
                    <i class="fas fa-wallet text-teal-600 text-base sm:text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Chart -->
    <div class="bg-white border border-slate-100 rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-sm mb-6">
        <div class="h-56 sm:h-80">
            <canvas id="incomeExpenseChart"></canvas>
        </div>
    </div>

    <!-- Data Table -->
    <div class="bg-white border border-slate-100 rounded-xl sm:rounded-2xl shadow-sm overflow-hidden">
        <!-- Mobile View -->
        <div class="block sm:hidden divide-y divide-slate-100">
            @forelse($data ?? [] as $row)
                <div class="p-4">
                    <div class="flex items-center justify-between mb-2">
                        <span class="font-semibold text-slate-800">{{ $row['label'] }}</span>
                        <span class="text-sm {{ $row['net'] >= 0 ? 'text-emerald-600' : 'text-rose-600' }} font-medium">
                            {{ $row['net'] >= 0 ? '+' : '' }}Rp {{ number_format($row['net'], 0, ',', '.') }}
                        </span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-emerald-600">+Rp {{ number_format($row['income'], 0, ',', '.') }}</span>
                        <span class="text-rose-600">-Rp {{ number_format($row['expense'], 0, ',', '.') }}</span>
                    </div>
                </div>
            @empty
                <div class="p-8 text-center text-slate-500">Tidak ada data</div>
            @endforelse
        </div>

        <!-- Desktop Table -->
        <div class="hidden sm:block overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-100">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Periode</th>
                        <th class="px-6 py-3 text-right text-xs font-semibold text-slate-500 uppercase">Pemasukan</th>
                        <th class="px-6 py-3 text-right text-xs font-semibold text-slate-500 uppercase">Pengeluaran</th>
                        <th class="px-6 py-3 text-right text-xs font-semibold text-slate-500 uppercase">Bersih</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($data ?? [] as $row)
                        <tr class="hover:bg-slate-50 transition">
                            <td class="px-6 py-4 font-medium text-slate-800">{{ $row['label'] }}</td>
                            <td class="px-6 py-4 text-right text-emerald-600">Rp {{ number_format($row['income'], 0, ',', '.') }}</td>
                            <td class="px-6 py-4 text-right text-rose-600">Rp {{ number_format($row['expense'], 0, ',', '.') }}</td>
                            <td class="px-6 py-4 text-right font-medium {{ $row['net'] >= 0 ? 'text-emerald-600' : 'text-rose-600' }}">
                                Rp {{ number_format($row['net'], 0, ',', '.') }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="px-6 py-8 text-center text-slate-500">Tidak ada data</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    @push('scripts')
    <script>
        const ctx = document.getElementById('incomeExpenseChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: {!! json_encode(collect($data ?? [])->pluck('label')) !!},
                datasets: [
                    {
                        label: 'Pemasukan',
                        data: {!! json_encode(collect($data ?? [])->pluck('income')) !!},
                        backgroundColor: 'rgba(16, 185, 129, 0.8)',
                        borderRadius: 6,
                    },
                    {
                        label: 'Pengeluaran',
                        data: {!! json_encode(collect($data ?? [])->pluck('expense')) !!},
                        backgroundColor: 'rgba(244, 63, 94, 0.8)',
                        borderRadius: 6,
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return 'Rp ' + value.toLocaleString('id-ID');
                            }
                        }
                    }
                }
            }
        });
    </script>
    @endpush
</x-app-layout>
