@extends('layouts.admin')

@section('title', 'Dashboard Administrator')

@section('content')
{{-- Welcome Banner --}}
<div class="mb-4">
    <div class="card border-0 p-4" style="background: radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.3) 0%, rgba(15, 23, 42, 0.95) 70%), linear-gradient(135deg, #0a0b10 0%, #172554 100%) !important; border: 1px solid rgba(56, 189, 248, 0.35) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;">
        <div class="d-flex flex-wrap justify-content-between align-items-center">
            <div>
                <span class="badge mb-2" style="background: rgba(37, 99, 235, 0.2); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase;">
                    Official Admin Portal
                </span>
                <h3 class="fw-bold mb-1 text-white">Selamat Datang, {{ Auth::user()->name }}! 🛠️</h3>
                <p class="mb-0" style="color: #cbd5e1;">Panel kendali utama pengelolaan toko online KONTER Official Store.</p>
            </div>
            <div class="mt-3 mt-md-0 d-flex gap-2">
                <span class="badge px-3 py-2 fw-semibold text-uppercase" style="background: rgba(255, 255, 255, 0.1); color: #38bdf8; border: 1px solid rgba(255, 255, 255, 0.15);">
                    Role: {{ Auth::user()->role }}
                </span>
                <a href="{{ route('toko') }}" class="btn btn-sm btn-konter-primary">
                    Buka Katalog Toko &rarr;
                </a>
            </div>
        </div>
    </div>
</div>

{{-- Statistik Cards --}}
<div class="row g-3 mb-4">
    <div class="col-sm-6 col-xl-3">
        <div class="card h-100" style="background: rgba(17, 20, 29, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.3s ease;">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <span class="small text-uppercase fw-semibold" style="color: var(--text-muted); letter-spacing: 0.05em;">Total Kategori</span>
                        <h3 class="fw-bold text-white mt-2 mb-0">{{ $categoryCount }}</h3>
                    </div>
                    <div style="background: rgba(37, 99, 235, 0.15); border: 1px solid rgba(56, 189, 248, 0.3); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 1.5rem;">
                        🏷️
                    </div>
                </div>
                <div class="mt-3 pt-2" style="border-top: 1px solid rgba(255, 255, 255, 0.06);">
                    <a href="{{ route('admin.categories.index') }}" class="small text-decoration-none" style="color: #38bdf8; font-weight: 600;">
                        Kelola Kategori &rarr;
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-xl-3">
        <div class="card h-100" style="background: rgba(17, 20, 29, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.3s ease;">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <span class="small text-uppercase fw-semibold" style="color: var(--text-muted); letter-spacing: 0.05em;">Total Produk</span>
                        <h3 class="fw-bold text-white mt-2 mb-0">{{ $productCount }}</h3>
                    </div>
                    <div style="background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 1.5rem;">
                        📦
                    </div>
                </div>
                <div class="mt-3 pt-2" style="border-top: 1px solid rgba(255, 255, 255, 0.06);">
                    <a href="{{ route('admin.products.index') }}" class="small text-decoration-none" style="color: #34d399; font-weight: 600;">
                        Kelola Produk &rarr;
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-xl-3">
        <div class="card h-100" style="background: rgba(17, 20, 29, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.3s ease;">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <span class="small text-uppercase fw-semibold" style="color: var(--text-muted); letter-spacing: 0.05em;">Total Pesanan</span>
                        <h3 class="fw-bold text-white mt-2 mb-0">{{ $orderCount }}</h3>
                    </div>
                    <div style="background: rgba(6, 182, 212, 0.15); border: 1px solid rgba(6, 182, 212, 0.3); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 1.5rem;">
                        📋
                    </div>
                </div>
                <div class="mt-3 pt-2" style="border-top: 1px solid rgba(255, 255, 255, 0.06);">
                    <a href="{{ route('admin.orders.index') }}" class="small text-decoration-none" style="color: #22d3ee; font-weight: 600;">
                        Lihat Pesanan &rarr;
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-xl-3">
        <div class="card h-100" style="background: rgba(17, 20, 29, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.3s ease;">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <span class="small text-uppercase fw-semibold" style="color: var(--text-muted); letter-spacing: 0.05em;">Total Omset</span>
                        <h4 class="fw-bold mt-2 mb-0" style="color: #38bdf8;">Rp {{ number_format($revenue, 0, ',', '.') }}</h4>
                    </div>
                    <div style="background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.3); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 1.5rem;">
                        💰
                    </div>
                </div>
                <div class="mt-3 pt-2" style="border-top: 1px solid rgba(255, 255, 255, 0.06);">
                    <span class="small" style="color: var(--text-muted);">Dari pesanan sukses & diproses</span>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Pesanan Terbaru & Quick Action --}}
<div class="row g-4">
    <div class="col-lg-8">
        <div class="card border-0">
            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                <h6 class="mb-0 fw-bold text-white d-flex align-items-center gap-2">
                    <span>📦</span> Pesanan Terbaru Masuk di KONTER
                </h6>
                <a href="{{ route('admin.orders.index') }}" class="btn btn-sm btn-konter-outline">
                    Lihat Semua Pesanan
                </a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead>
                            <tr>
                                <th>No Order</th>
                                <th>Pelanggan</th>
                                <th>Total Nilai</th>
                                <th>Status</th>
                                <th class="text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentOrders as $order)
                                <tr>
                                    <td>
                                        <strong style="color: #38bdf8;">
                                            #ORD-{{ str_pad($order->id, 5, '0', STR_PAD_LEFT) }}
                                        </strong>
                                    </td>
                                    <td>
                                        <div class="fw-semibold text-white">{{ $order->customer_name }}</div>
                                        <small style="color: var(--text-muted);">{{ $order->customer_email }}</small>
                                    </td>
                                    <td>
                                        <span class="fw-bold text-white">Rp {{ number_format($order->total ?: $order->total_amount, 0, ',', '.') }}</span>
                                    </td>
                                    <td>
                                        @if($order->status === 'pending')
                                            <span class="badge" style="background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3);">Pending</span>
                                        @elseif($order->status === 'processing')
                                            <span class="badge" style="background: rgba(6, 182, 212, 0.2); color: #22d3ee; border: 1px solid rgba(6, 182, 212, 0.3);">Processing</span>
                                        @elseif($order->status === 'shipped')
                                            <span class="badge" style="background: rgba(37, 99, 235, 0.2); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3);">Shipped</span>
                                        @elseif($order->status === 'completed')
                                            <span class="badge" style="background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3);">Completed</span>
                                        @else
                                            <span class="badge" style="background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3);">{{ ucfirst($order->status) }}</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <a href="{{ route('admin.orders.show', $order->id) }}" class="btn btn-sm btn-konter-outline">
                                            Detail
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center py-5" style="color: var(--text-muted);">
                                        Belum ada transaksi pesanan masuk.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card border-0 mb-4">
            <div class="card-header py-3">
                <h6 class="mb-0 fw-bold text-white d-flex align-items-center gap-2">
                    <span>⚡</span> Menu Cepat Admin
                </h6>
            </div>
            <div class="card-body d-grid gap-2 p-3">
                <a href="{{ route('admin.products.create') }}" class="btn btn-konter-primary text-start py-2 px-3 d-flex align-items-center gap-2">
                    <span>➕</span> Tambah Produk Baru
                </a>
                <a href="{{ route('admin.categories.create') }}" class="btn btn-konter-outline text-start py-2 px-3 d-flex align-items-center gap-2">
                    <span>🏷️</span> Tambah Kategori Baru
                </a>
                <a href="{{ route('admin.orders.index') }}" class="btn btn-konter-outline text-start py-2 px-3 d-flex align-items-center gap-2">
                    <span>📋</span> Periksa Semua Pesanan
                </a>
                <a href="{{ route('toko') }}" class="btn btn-konter-outline text-start py-2 px-3 d-flex align-items-center gap-2" style="border-color: rgba(56, 189, 248, 0.3); color: #38bdf8;">
                    <span>🛍️</span> Kunjungi Katalog Pembeli
                </a>
                <a href="{{ url('/') }}" class="btn btn-konter-outline text-start py-2 px-3 d-flex align-items-center gap-2">
                    <span>🌐</span> Kunjungi Landing Page KONTER
                </a>
            </div>
        </div>
    </div>
</div>
@endsection