<x-app-layout>
    @section('title', 'Laporan Penjualan - INTERIA')

    @push('styles')
    <style>
        body {
            background: #f8fafc;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.96);
            border-radius: 1.75rem;
            padding: 1.5rem;
            box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.02);
            border: 1px solid rgba(203, 213, 225, 0.5);
        }

        .stat-card {
            background: linear-gradient(135deg, #ffffff 0%, #fefefe 100%);
            border-radius: 1.75rem;
            padding: 1.5rem;
            box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.02);
            border: 1px solid rgba(203, 213, 225, 0.4);
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 20px 25px -12px rgba(0, 0, 0, 0.08);
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #f97316, #fbbf24, #f97316);
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }

        .stat-card:hover::before {
            transform: scaleX(1);
        }

        .stat-icon {
            width: 3.25rem;
            height: 3.25rem;
            border-radius: 1.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(145deg, #fff7ed 0%, #ffedd5 100%);
            color: #f97316;
        }

        .input-field {
            border: 1px solid #e2e8f0;
            border-radius: 0.75rem;
            padding: 0.75rem 1rem;
            font-size: 0.875rem;
            width: 100%;
            outline: none;
            transition: border-color 0.2s;
        }

        .input-field:focus {
            border-color: #f97316;
            box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
        }

        .modern-table {
            width: 100%;
        }

        .modern-table thead th {
            background: #fafcff;
            padding: 0.9rem 1rem;
            font-size: 0.75rem;
            color: #475569;
            text-transform: uppercase;
            border-bottom: 1px solid #eef2ff;
            text-align: left;
        }

        .modern-table tbody td {
            padding: 1rem;
            border-bottom: 1px solid #f8fafc;
            font-size: 0.875rem;
            color: #334155;
        }

        .btn-primary {
            background: linear-gradient(135deg, #f97316, #fbbf24);
            color: white;
            font-weight: 600;
            padding: 0.75rem 1.5rem;
            border-radius: 0.75rem;
            box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.2);
            transition: all 0.2s;
        }

        .btn-primary:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        .btn-back {
            background: white;
            border: 1px solid #e2e8f0;
            color: #475569;
            font-weight: 500;
            padding: 0.6rem 1.25rem;
            border-radius: 0.75rem;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.875rem;
        }

        .btn-back:hover {
            background: #f8fafc;
            border-color: #cbd5e1;
            color: #1e293b;
            transform: translateX(-3px);
        }

        .btn-pdf {
            background: #dc2626;
            color: white;
            font-weight: 600;
            padding: 0.75rem 1.5rem;
            border-radius: 0.75rem;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-pdf:hover {
            background: #b91c1c;
            transform: translateY(-1px);
        }

        /* Payment Method Badges */
        .payment-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.4rem 0.85rem;
            border-radius: 2rem;
            font-size: 0.7rem;
            font-weight: 600;
        }

        .payment-badge i {
            font-size: 0.7rem;
        }

        .payment-badge.cash {
            background: #dcfce7;
            color: #15803d;
            border: 1px solid #bbf7d0;
        }

        .payment-badge.transfer {
            background: #eef2ff;
            color: #1d4ed8;
            border: 1px solid #c7d2fe;
        }

        .payment-badge.cod {
            background: #fef3c7;
            color: #b45309;
            border: 1px solid #fde68a;
        }

        .payment-badge.qris {
            background: #f3e8ff;
            color: #6b21a5;
            border: 1px solid #e9d5ff;
        }

        .payment-badge.ewallet {
            background: #fce7f3;
            color: #be185d;
            border: 1px solid #fbcfe8;
        }

        .payment-badge.card {
            /* ← tambah ini */
            background: #e0f2fe;
            color: #0369a1;
            border: 1px solid #bae6fd;
        }

        .payment-badge.unknown {
            background: #f1f5f9;
            color: #64748b;
            border: 1px solid #e2e8f0;
        }
    </style>
    @endpush

    <div class="py-6 lg:py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">

            <!-- Tombol Kembali -->
            <div>
                <a href="{{ route('dashboard.admin') }}" class="btn-back">
                    <i class="fas fa-arrow-left text-sm"></i>
                    Kembali ke Dashboard
                </a>
            </div>

            <!-- Header Title -->
            <div class="glass-card">
                <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6">
                    <div>
                        <div class="flex items-center gap-3 mb-2">
                            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-100 to-orange-100 flex items-center justify-center">
                                <i class="fas fa-chart-line text-amber-600 text-lg"></i>
                            </div>
                            <h2 class="text-2xl font-bold text-slate-800">Laporan Penjualan</h2>
                        </div>
                        <p class="text-sm text-slate-500 ml-14">
                            Periode:
                            <span class="font-semibold text-amber-600">{{ \Carbon\Carbon::parse($startDate)->translatedFormat('d M Y') }}</span>
                            s/d
                            <span class="font-semibold text-amber-600">{{ \Carbon\Carbon::parse($endDate)->translatedFormat('d M Y') }}</span>
                        </p>
                    </div>

                    <!-- Filter Form -->
                    <form method="GET" action="{{ route('admin.report.index') }}" class="flex flex-col sm:flex-row gap-3 w-full lg:w-auto">
                        <div>
                            <label class="block text-xs font-semibold text-slate-500 mb-1">Mulai Tanggal</label>
                            <input type="date" name="start_date" value="{{ $startDate }}" class="input-field" required>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-500 mb-1">Sampai Tanggal</label>
                            <input type="date" name="end_date" value="{{ $endDate }}" class="input-field" required>
                        </div>
                        <div class="flex items-end gap-2">
                            <button type="submit" class="btn-primary">
                                <i class="fas fa-filter mr-2"></i> Filter
                            </button>
                            <a href="{{ route('admin.report.pdf', ['start_date' => $startDate, 'end_date' => $endDate]) }}"
                                class="btn-pdf">
                                <i class="fas fa-file-pdf"></i> PDF
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Stats Cards -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="stat-card">
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">
                                <i class="fas fa-wallet text-amber-500 mr-1"></i> Total Pendapatan
                            </p>
                            <p class="text-2xl lg:text-3xl font-extrabold text-amber-600">
                                Rp {{ number_format($totalRevenue, 0, ',', '.') }}
                            </p>
                        </div>
                        <div class="stat-icon">
                            <i class="fas fa-wallet text-xl"></i>
                        </div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">
                                <i class="fas fa-shopping-bag text-amber-500 mr-1"></i> Total Pesanan
                            </p>
                            <p class="text-2xl lg:text-3xl font-extrabold text-slate-800">
                                {{ number_format($totalOrders) }}
                            </p>
                        </div>
                        <div class="stat-icon">
                            <i class="fas fa-shopping-bag text-xl"></i>
                        </div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">
                                <i class="fas fa-chart-line text-amber-500 mr-1"></i> Rata-rata Pesanan
                            </p>
                            <p class="text-2xl lg:text-3xl font-extrabold text-blue-600">
                                Rp {{ number_format($avgOrderValue, 0, ',', '.') }}
                            </p>
                        </div>
                        <div class="stat-icon">
                            <i class="fas fa-chart-line text-xl"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Detailed Table -->
            <div class="glass-card">
                <div class="flex items-center justify-between mb-5">
                    <h3 class="text-lg font-bold text-slate-800 flex items-center gap-2">
                        <i class="fas fa-list-ul text-amber-500"></i>
                        Rincian Transaksi Selesai
                    </h3>
                    <span class="text-xs text-slate-400 bg-slate-100 px-3 py-1 rounded-full">
                        Total: {{ $orders->total() }} transaksi
                    </span>
                </div>

                @if($orders->count() > 0)
                <div class="overflow-x-auto">
                    <table class="modern-table">
                        <thead>
                            <tr>
                                <th>Order ID</th>
                                <th>Tanggal</th>
                                <th>Pelanggan</th>
                                <th>Metode Pembayaran</th>
                                <th>Total</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($orders as $o)
                            @php
                            // Ambil metode pembayaran dari relasi payment
                            $paymentMethod = null;
                            $paymentChannel = null;

                            // Cek apakah ada relasi payment
                            if ($o->relationLoaded('payment') && $o->payment) {
                            $paymentMethod = $o->payment->payment_method ?? null;
                            $paymentChannel = $o->payment->payment_channel ?? null;
                            } elseif (method_exists($o, 'payment')) {
                            $payment = $o->payment;
                            if ($payment) {
                            $paymentMethod = $payment->payment_method ?? null;
                            $paymentChannel = $payment->payment_channel ?? null;
                            }
                            }

                            // Jika masih null, coba dari kolom langsung
                            if (!$paymentMethod) {
                            $paymentMethod = $o->payment_method ?? $o->paymentMethod ?? null;
                            }

                            $badgeClass = 'unknown';
                            $icon = 'fa-question-circle';
                            $displayText = 'Tidak Tersedia';
                            $channelText = '';

                            if ($paymentMethod) {
                            $method = strtolower(trim($paymentMethod));

                            if ($method == 'cash') {
                            $badgeClass = 'cash';
                            $icon = 'fa-money-bill-wave';
                            $displayText = 'Cash';
                            } elseif ($method == 'transfer' || $method == 'bank_transfer') {
                            $badgeClass = 'transfer';
                            $icon = 'fa-university';
                            $displayText = 'Transfer Bank';
                            if ($paymentChannel && $paymentChannel != 'null') {
                            $channelText = ' - ' . ucfirst($paymentChannel);
                            }
                            } elseif ($method == 'cod' || $method == 'bayar_ditempat') {
                            $badgeClass = 'cod';
                            $icon = 'fa-truck';
                            $displayText = 'COD (Bayar di Tempat)';
                            } elseif ($method == 'qris') {
                            $badgeClass = 'qris';
                            $icon = 'fa-qrcode';
                            $displayText = 'QRIS';
                            } elseif ($method == 'card') { // ← tambah ini
                            $badgeClass = 'card';
                            $icon = 'fa-credit-card';
                            $displayText = 'Kartu Debit';
                            } elseif ($method == 'gopay' || $method == 'ovo' || $method == 'dana' || $method == 'ewallet') {
                            $badgeClass = 'ewallet';
                            $icon = 'fa-mobile-alt';
                            $displayText = 'E-Wallet';
                            if ($paymentChannel && $paymentChannel != 'null') {
                            $channelText = ' - ' . ucfirst($paymentChannel);
                            }
                            } else {
                            $displayText = ucfirst($paymentMethod);
                            }
                            }
                            @endphp
                            <tr class="hover:bg-slate-50 transition-colors">
                                <td class="font-bold text-slate-700">#{{ $o->order_id }}</td>
                                <td class="text-slate-600">{{ $o->created_at->translatedFormat('d M Y, H:i') }}</td>
                                <td class="text-slate-600">{{ $o->user->name ?? 'User Biasa' }}</td>
                                <td>
                                    <span class="payment-badge {{ $badgeClass }}">
                                        <i class="fas {{ $icon }}"></i>
                                        {{ $displayText }}{{ $channelText }}
                                    </span>
                                </td>
                                <td class="font-semibold text-amber-600">Rp {{ number_format($o->total_price, 0, ',', '.') }}</td>
                                <td>
                                    <a href="{{ route('admin.order.show', $o->order_id) }}" class="text-blue-500 hover:text-blue-700 font-semibold text-xs transition-colors">
                                        Detail
                                    </a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="mt-6">
                    {{ $orders->links() }}
                </div>
                @else
                <div class="text-center py-12">
                    <div class="w-20 h-20 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-box-open text-3xl text-slate-400"></i>
                    </div>
                    <p class="text-slate-500 font-medium">Tidak ada transaksi ditemukan</p>
                    <p class="text-sm text-slate-400 mt-1">Pada periode {{ \Carbon\Carbon::parse($startDate)->translatedFormat('d M Y') }} - {{ \Carbon\Carbon::parse($endDate)->translatedFormat('d M Y') }}</p>
                </div>
                @endif
            </div>

        </div>
    </div>
</x-app-layout>