@extends('admin.layout')

@section('title', 'Dashboard')

@section('content')
<div class="admin-dashboard">

    {{-- Page header --}}
    <section class="admin-page-header">
        <div>
            <span class="admin-page-eyebrow">Operations Overview</span>

            <h1 class="admin-page-title font-display">
                Selamat datang di
                <span>GTGStore</span>
            </h1>

            <p class="admin-page-description">
                Pantau order, pendapatan, dan kondisi stok dari satu workspace.
            </p>
        </div>

        <div class="admin-page-date">
            <span>Hari ini</span>
            <strong class="font-figures">
                {{ now()->translatedFormat('d M Y') }}
            </strong>
        </div>
    </section>

    {{-- Statistic cards --}}
    <section class="admin-stat-grid">
        <article class="admin-stat-card">
            <div class="admin-stat-card-header">
                <span class="admin-stat-icon is-sage">
                    <svg
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1.7"
                        aria-hidden="true"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M6 3h12v18l-3-2-3 2-3-2-3 2V3Zm3 5h6M9 12h6"
                        />
                    </svg>
                </span>

                <span class="admin-stat-label">Order Hari Ini</span>
            </div>

            <p class="admin-stat-value font-figures">
                {{ number_format($ordersToday, 0, ',', '.') }}
            </p>

            <p class="admin-stat-caption">
                Transaksi dibuat hari ini
            </p>
        </article>

        <article class="admin-stat-card">
            <div class="admin-stat-card-header">
                <span class="admin-stat-icon is-green">
                    <svg
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1.7"
                        aria-hidden="true"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M4 7h16v10H4V7Zm3 3h.01M17 14h.01M12 10a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z"
                        />
                    </svg>
                </span>

                <span class="admin-stat-label">
                    Uang Masuk Hari Ini
                </span>
            </div>

            <p class="admin-stat-value is-success font-figures">
                Rp {{ number_format($revenueToday, 0, ',', '.') }}
            </p>

            <p class="admin-stat-caption">
                Pendapatan terkonfirmasi hari ini
            </p>
        </article>

        <article class="admin-stat-card">
            <div class="admin-stat-card-header">
                <span class="admin-stat-icon is-gold">
                    <svg
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1.7"
                        aria-hidden="true"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M5 20V10m7 10V4m7 16v-7M3 20h18"
                        />
                    </svg>
                </span>

                <span class="admin-stat-label">
                    Total Uang Masuk
                </span>
            </div>

            <p class="admin-stat-value is-gold font-figures">
                Rp {{ number_format($revenueTotal, 0, ',', '.') }}
            </p>

            <p class="admin-stat-caption">
                Akumulasi seluruh transaksi berhasil
            </p>
        </article>

        <article class="admin-stat-card">
            <div class="admin-stat-card-header">
                <span class="admin-stat-icon is-warm">
                    <svg
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1.7"
                        aria-hidden="true"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M12 7v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
                        />
                    </svg>
                </span>

                <span class="admin-stat-label">
                    Menunggu Pembayaran
                </span>
            </div>

            <p class="admin-stat-value font-figures">
                {{ number_format($pendingPayment, 0, ',', '.') }}
            </p>

            <p class="admin-stat-caption">
                Invoice belum dibayarkan
            </p>
        </article>
    </section>

    {{-- Needs action --}}
    <a
        href="{{ route('admin.orders.needs-action') }}"
        class="admin-action-card {{ $needsAction > 0 ? 'has-alert' : 'is-clear' }}"
    >
        <div class="admin-action-icon">
            <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.7"
                aria-hidden="true"
            >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M12 9v4m0 4h.01M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z"
                />
            </svg>
        </div>

        <div class="admin-action-content">
            <span class="admin-action-eyebrow">
                Perhatian Admin
            </span>

            <h2 class="admin-action-title font-display">
                Order Perlu Diproses
            </h2>

            <p class="admin-action-description">
                {{ $failedFulfillment }} gagal fulfillment otomatis dan
                {{ $manualAwaitingAdmin }} order manual sedang menunggu
                penyelesaian admin.
            </p>
        </div>

        <div class="admin-action-meta">
            <span
                class="admin-status-pill
                {{ $needsAction > 0 ? 'is-danger' : 'is-success' }}"
            >
                <span></span>
                {{ $needsAction }} order
            </span>

            <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.7"
                aria-hidden="true"
            >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="m9 18 6-6-6-6"
                />
            </svg>
        </div>
    </a>

    {{-- Bottom dashboard --}}
    <section class="admin-dashboard-bottom">

        {{-- Critical stock --}}
        <article class="admin-panel">
            <header class="admin-panel-header">
                <div>
                    <span class="admin-panel-eyebrow">
                        Inventory Watch
                    </span>

                    <h2 class="admin-panel-title font-display">
                        Stok Kritis
                    </h2>
                </div>

                <span
                    class="admin-status-pill
                    {{ $lowStockProducts->isNotEmpty()
                        ? 'is-warning'
                        : 'is-success' }}"
                >
                    {{ $lowStockProducts->count() }} produk
                </span>
            </header>

            <div class="admin-stock-list">
                @forelse ($lowStockProducts as $product)
                    <a href="{{ route('admin.stock.index', $product) }}" class="admin-stock-row admin-dashboard-stock-link">
                        <div class="admin-stock-product">
                            @if ($product->image_path)
                                <img
                                    src="{{ $product->image_url }}"
                                    alt="{{ $product->name }}"
                                    class="admin-stock-image"
                                >
                            @else
                                <div class="admin-stock-image-placeholder">
                                    {{ strtoupper(substr($product->name, 0, 1)) }}
                                </div>
                            @endif

                            <div class="admin-stock-info">
                                <p>{{ $product->name }}</p>
                                <span>Stok perlu ditambahkan</span>
                            </div>
                        </div>

                        <span class="admin-stock-count font-figures">
                            Sisa {{ $product->availableStockCount() }}
                        </span>
                    </a>
                @empty
                    <div class="admin-empty-state">
                        <span class="admin-empty-icon">
                            <svg
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="1.7"
                                aria-hidden="true"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    d="m5 13 4 4L19 7"
                                />
                            </svg>
                        </span>

                        <div>
                            <p>Semua stok aman</p>
                            <span>
                                Tidak ada produk dengan stok kritis saat ini.
                            </span>
                        </div>
                    </div>
                @endforelse
            </div>
        </article>

        {{-- Quick access --}}
        <article class="admin-panel admin-quick-panel">
            <header class="admin-panel-header">
                <div>
                    <span class="admin-panel-eyebrow">
                        Quick Access
                    </span>

                    <h2 class="admin-panel-title font-display">
                        Akses Cepat
                    </h2>
                </div>
            </header>

            <div class="admin-quick-links">
                <a
                    href="{{ route('admin.products.create') }}"
                    class="admin-quick-link"
                >
                    <span class="admin-quick-icon">
                        <svg
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="1.7"
                            aria-hidden="true"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M12 5v14M5 12h14"
                            />
                        </svg>
                    </span>

                    <span>
                        <strong>Tambah Produk</strong>
                        <small>Buat produk baru</small>
                    </span>
                </a>

                <a
                    href="{{ route('admin.stock.all') }}"
                    class="admin-quick-link"
                >
                    <span class="admin-quick-icon">
                        <svg
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="1.7"
                            aria-hidden="true"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="m12 2 9 5-9 5-9-5 9-5Zm-9 9 9 5 9-5"
                            />
                        </svg>
                    </span>

                    <span>
                        <strong>Kelola Stok</strong>
                        <small>Tambah dan cek inventory</small>
                    </span>
                </a>

                <a
                    href="{{ route('admin.orders.index') }}"
                    class="admin-quick-link"
                >
                    <span class="admin-quick-icon">
                        <svg
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="1.7"
                            aria-hidden="true"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M6 3h12v18l-3-2-3 2-3-2-3 2V3Zm3 5h6M9 12h6"
                            />
                        </svg>
                    </span>

                    <span>
                        <strong>Lihat Order</strong>
                        <small>Pantau transaksi terbaru</small>
                    </span>
                </a>
            </div>
        </article>
    </section>
</div>
@endsection