<x-app-layout>
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
        <div>
            <h2 class="text-xl sm:text-2xl font-bold text-slate-800">Laporan</h2>
            <p class="text-slate-500 mt-1 text-sm">Analisis keuangan dan statistik</p>
        </div>
    </div>

    <!-- Date Range Filter -->
    <div class="bg-white border border-slate-100 rounded-xl sm:rounded-2xl p-4 shadow-sm mb-6">
        <form action="{{ route('reports.index') }}" 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">Dari</label>
                <input type="date" name="start_date"
                       value="{{ request('start_date', now()->startOfMonth()->format('Y-m-d')) }}"
                       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">
            </div>
            <div class="w-full sm:w-auto">
                <label class="block text-xs font-medium text-slate-500 mb-1">Sampai</label>
                <input type="date" name="end_date"
                       value="{{ request('end_date', now()->format('Y-m-d')) }}"
                       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">
            </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>Filter
            </button>
        </form>
    </div>

    <!-- Quick Stats -->
    <div class="grid grid-cols-2 lg:grid-cols-4 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 hover:shadow-md transition">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                <div class="order-2 sm:order-1 mt-2 sm:mt-0">
                    <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="order-1 sm:order-2 w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-emerald-500 to-green-500 rounded-xl flex items-center justify-center">
                    <i class="fas fa-arrow-down text-white 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 hover:shadow-md transition">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                <div class="order-2 sm:order-1 mt-2 sm:mt-0">
                    <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($totalExpenses ?? 0, 0, ',', '.') }}</p>
                </div>
                <div class="order-1 sm:order-2 w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-rose-500 to-pink-500 rounded-xl flex items-center justify-center">
                    <i class="fas fa-arrow-up text-white 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 hover:shadow-md transition">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                <div class="order-2 sm:order-1 mt-2 sm:mt-0">
                    <p class="text-xs sm:text-sm text-slate-500">Pendapatan Bersih</p>
                    <p class="text-lg sm:text-2xl font-bold text-teal-500 mt-1">Rp {{ number_format(($totalIncome ?? 0) - ($totalExpenses ?? 0), 0, ',', '.') }}</p>
                </div>
                <div class="order-1 sm:order-2 w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-teal-500 to-emerald-500 rounded-xl flex items-center justify-center">
                    <i class="fas fa-balance-scale text-white 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 hover:shadow-md transition">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                <div class="order-2 sm:order-1 mt-2 sm:mt-0">
                    <p class="text-xs sm:text-sm text-slate-500">Transaksi</p>
                    <p class="text-lg sm:text-2xl font-bold text-slate-800 mt-1">{{ $transactionCount ?? 0 }}</p>
                </div>
                <div class="order-1 sm:order-2 w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-slate-400 to-slate-500 rounded-xl flex items-center justify-center">
                    <i class="fas fa-receipt text-white text-base sm:text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Report Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
        <!-- Income vs Expenses -->
        <a href="{{ route('reports.income-expense') }}" class="bg-white border border-slate-100 hover:border-teal-300 rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-lg group">
            <div class="flex items-center justify-between mb-3 sm:mb-4">
                <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-teal-100 flex items-center justify-center text-teal-600">
                    <i class="fas fa-chart-bar text-lg sm:text-xl"></i>
                </div>
                <i class="fas fa-chevron-right text-slate-300 group-hover:translate-x-1 group-hover:text-teal-500 transition"></i>
            </div>
            <h3 class="text-base sm:text-lg font-semibold text-slate-800 group-hover:text-teal-600 transition">Pemasukan vs Pengeluaran</h3>
            <p class="text-slate-500 mt-1 text-sm">Bandingkan pemasukan dan pengeluaran</p>
        </a>

        <!-- Category Breakdown -->
        <a href="{{ route('reports.category-breakdown') }}" class="bg-white border border-slate-100 hover:border-teal-300 rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-lg group">
            <div class="flex items-center justify-between mb-3 sm:mb-4">
                <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-sky-100 flex items-center justify-center text-sky-600">
                    <i class="fas fa-chart-pie text-lg sm:text-xl"></i>
                </div>
                <i class="fas fa-chevron-right text-slate-300 group-hover:translate-x-1 group-hover:text-teal-500 transition"></i>
            </div>
            <h3 class="text-base sm:text-lg font-semibold text-slate-800 group-hover:text-teal-600 transition">Breakdown Kategori</h3>
            <p class="text-slate-500 mt-1 text-sm">Lihat kemana uang Anda pergi</p>
        </a>

        <!-- Spending Trend -->
        <a href="{{ route('reports.trend') }}" class="bg-white border border-slate-100 hover:border-teal-300 rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-lg group">
            <div class="flex items-center justify-between mb-3 sm:mb-4">
                <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-emerald-100 flex items-center justify-center text-emerald-600">
                    <i class="fas fa-chart-line text-lg sm:text-xl"></i>
                </div>
                <i class="fas fa-chevron-right text-slate-300 group-hover:translate-x-1 group-hover:text-teal-500 transition"></i>
            </div>
            <h3 class="text-base sm:text-lg font-semibold text-slate-800 group-hover:text-teal-600 transition">Tren Pengeluaran</h3>
            <p class="text-slate-500 mt-1 text-sm">Lacak pola pengeluaran dari waktu ke waktu</p>
        </a>

        <!-- Net Worth -->
        <a href="{{ route('reports.net-worth') }}" class="bg-white border border-slate-100 hover:border-teal-300 rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-lg group">
            <div class="flex items-center justify-between mb-3 sm:mb-4">
                <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-amber-100 flex items-center justify-center text-amber-600">
                    <i class="fas fa-coins text-lg sm:text-xl"></i>
                </div>
                <i class="fas fa-chevron-right text-slate-300 group-hover:translate-x-1 group-hover:text-teal-500 transition"></i>
            </div>
            <h3 class="text-base sm:text-lg font-semibold text-slate-800 group-hover:text-teal-600 transition">Kekayaan Bersih</h3>
            <p class="text-slate-500 mt-1 text-sm">Pantau total kekayaan bersih Anda</p>
        </a>
    </div>

    <!-- Export Section -->
    <div class="mt-6 sm:mt-8 bg-white border border-slate-100 rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-sm" x-data="{
        dateFrom: '{{ now()->startOfMonth()->format('Y-m-d') }}',
        dateTo: '{{ now()->endOfMonth()->format('Y-m-d') }}'
    }">
        <h3 class="text-base sm:text-lg font-semibold text-slate-800 mb-4">
            <i class="fas fa-download text-teal-500 mr-2"></i>
            Ekspor Data Transaksi
        </h3>

        <!-- Date Range Filter -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
            <div>
                <label class="block text-sm font-medium text-slate-600 mb-2">Dari Tanggal</label>
                <input type="date" x-model="dateFrom"
                       class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-600 mb-2">Sampai Tanggal</label>
                <input type="date" x-model="dateTo"
                       class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition">
            </div>
        </div>

        <!-- Export Buttons -->
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4">
            <a :href="`{{ route('reports.export') }}?format=csv&date_from=${dateFrom}&date_to=${dateTo}`"
               class="inline-flex items-center justify-center px-4 py-3 bg-emerald-50 border border-emerald-200 text-emerald-700 rounded-xl hover:bg-emerald-100 hover:border-emerald-300 transition font-medium">
                <i class="fas fa-file-csv text-emerald-500 mr-2 text-lg"></i>
                CSV
            </a>
            <a :href="`{{ route('reports.export') }}?format=excel&date_from=${dateFrom}&date_to=${dateTo}`"
               class="inline-flex items-center justify-center px-4 py-3 bg-teal-50 border border-teal-200 text-teal-700 rounded-xl hover:bg-teal-100 hover:border-teal-300 transition font-medium">
                <i class="fas fa-file-excel text-teal-600 mr-2 text-lg"></i>
                Excel
            </a>
            <a :href="`{{ route('reports.export') }}?format=pdf&date_from=${dateFrom}&date_to=${dateTo}`"
               target="_blank"
               class="inline-flex items-center justify-center px-4 py-3 bg-rose-50 border border-rose-200 text-rose-700 rounded-xl hover:bg-rose-100 hover:border-rose-300 transition font-medium">
                <i class="fas fa-file-pdf text-rose-500 mr-2 text-lg"></i>
                PDF
            </a>
        </div>

        <p class="mt-4 text-xs sm:text-sm text-slate-500">
            <i class="fas fa-info-circle mr-1"></i>
            Pilih rentang tanggal lalu klik format ekspor yang diinginkan.
        </p>
    </div>
</x-app-layout>
