@extends('app')

@section('content')
<div class="container-fluid px-4">

    {{-- Page Header --}}
    <div class="page-header mt-2">
        <h1 class="page-title">
            Dashboard
            <span>Ringkasan data sistem informasi stok beras</span>
        </h1>
        <div class="d-flex align-items-center gap-2">
            <small style="color:var(--text-light); font-size:.76rem;">
                {{ now()->translatedFormat('d F Y, H:i') }}
            </small>
        </div>
    </div>

    {{-- Breadcrumb --}}
    <div class="breadcrumb-wrap mb-4">
        <span>Dashboard</span>
    </div>

    {{-- ── STAT CARDS ── --}}
    <div class="row g-3 mb-4">

        <div class="col-xl-3 col-md-6">
            <div class="stat-card stat-card-green shadow-sm h-100">
                <div class="stat-icon"><i class="fas fa-warehouse"></i></div>
                <div class="stat-value">
                    {{ number_format($totalStok, 0, ',', '.') }}
                    <span class="unit">kg</span>
                </div>
                <div class="stat-label"><i class="fas fa-check-circle"></i> Total Stok Beras</div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <div class="stat-card stat-card-blue shadow-sm h-100">
                <div class="stat-icon"><i class="fas fa-seedling"></i></div>
                <div class="stat-value">{{ $totalBeras }}</div>
                <div class="stat-label"><i class="fas fa-layer-group"></i> Jenis Beras</div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <div class="stat-card stat-card-gold shadow-sm h-100">
                <div class="stat-icon"><i class="fas fa-shopping-bag"></i></div>
                <div class="stat-value">{{ $totalPemesanan }}</div>
                <div class="stat-label"><i class="fas fa-list"></i> Total Pemesanan</div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <div class="stat-card stat-card-blue shadow-sm h-100" style="background:linear-gradient(135deg,#1a5fa0,#2b7ec1);">
                <div class="stat-icon"><i class="fas fa-arrow-circle-down"></i></div>
                <div class="stat-value">{{ $totalStokMasuk }}</div>
                <div class="stat-label"><i class="fas fa-inbox"></i> Transaksi Stok Masuk</div>
            </div>
        </div>

    </div>

    {{-- ── ROW 2: Status Pesanan + Aksi Cepat ── --}}
    <div class="row g-3 mb-4">

        {{-- Status Pesanan --}}
        <div class="col-lg-8">
            <div class="card h-100">
                <div class="card-header">
                    <i class="fas fa-chart-pie"></i>
                    Status Pemesanan
                    <span class="comp-count-badge ms-2">{{ $totalPemesanan }} total</span>
                </div>
                <div class="card-body">

                    {{-- Pending --}}
                    <div class="comp-progress-item mb-3">
                        <div class="comp-progress-info">
                            <span class="comp-progress-label">
                                <span class="badge-status"
                                      style="background:rgba(100,116,139,.12);color:#374151;
                                             border:1px solid rgba(100,116,139,.3);margin-right:.5rem;">
                                    <i class="fas fa-clock"></i> Pending
                                </span>
                            </span>
                            <span class="comp-progress-val">{{ $pesananPending }} pesanan</span>
                        </div>
                        <div class="comp-progress-track">
                            <div class="comp-progress-fill"
                                 style="background:linear-gradient(90deg,#4a5568,#718096);
                                        --pct:{{ $totalPemesanan > 0 ? round($pesananPending / $totalPemesanan * 100) : 0 }}%">
                            </div>
                        </div>
                    </div>

                    {{-- Diproses --}}
                    <div class="comp-progress-item mb-3">
                        <div class="comp-progress-info">
                            <span class="comp-progress-label">
                                <span class="badge-status badge-hampir" style="margin-right:.5rem;">
                                    <i class="fas fa-cog"></i> Diproses
                                </span>
                            </span>
                            <span class="comp-progress-val">{{ $pesananDiproses }} pesanan</span>
                        </div>
                        <div class="comp-progress-track">
                            <div class="comp-progress-fill comp-fill-gold"
                                 style="--pct:{{ $totalPemesanan > 0 ? round($pesananDiproses / $totalPemesanan * 100) : 0 }}%">
                            </div>
                        </div>
                    </div>

                    {{-- Selesai --}}
                    <div class="comp-progress-item">
                        <div class="comp-progress-info">
                            <span class="comp-progress-label">
                                <span class="badge-status badge-aman" style="margin-right:.5rem;">
                                    <i class="fas fa-check-double"></i> Selesai
                                </span>
                            </span>
                            <span class="comp-progress-val">{{ $pesananSelesai }} pesanan</span>
                        </div>
                        <div class="comp-progress-track">
                            <div class="comp-progress-fill comp-fill-green"
                                 style="--pct:{{ $totalPemesanan > 0 ? round($pesananSelesai / $totalPemesanan * 100) : 0 }}%">
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        {{-- Aksi Cepat --}}
        <div class="col-lg-4">
            <div class="card h-100">
                <div class="card-header">
                    <i class="fas fa-bolt"></i>
                    Aksi Cepat
                </div>
                <div class="card-body" style="display:flex; flex-direction:column; gap:.65rem;">

                    <a href="{{ route('admin.beras.create') }}"
                       style="display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem;
                              border:1px solid var(--border); border-radius:var(--radius-sm);
                              text-decoration:none; transition:all var(--transition);
                              background:var(--white);"
                       onmouseover="this.style.borderColor='var(--green-400)';this.style.boxShadow='var(--shadow-sm)'"
                       onmouseout="this.style.borderColor='var(--border)';this.style.boxShadow='none'">
                        <div style="width:38px;height:38px;border-radius:10px;flex-shrink:0;
                                    background:rgba(61,150,81,.1);display:grid;place-items:center;
                                    color:var(--green-600);font-size:.95rem;">
                            <i class="fas fa-plus"></i>
                        </div>
                        <div>
                            <div style="font-size:.83rem;font-weight:600;color:var(--text-dark);">
                                Tambah Data Beras
                            </div>
                            <div style="font-size:.72rem;color:var(--text-light);">
                                Input jenis beras baru
                            </div>
                        </div>
                        <i class="fas fa-chevron-right ms-auto" style="color:var(--text-light);font-size:.72rem;"></i>
                    </a>

                    <a href="{{ route('admin.stok-masuk.create') }}"
                       style="display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem;
                              border:1px solid var(--border); border-radius:var(--radius-sm);
                              text-decoration:none; transition:all var(--transition);
                              background:var(--white);"
                       onmouseover="this.style.borderColor='var(--green-400)';this.style.boxShadow='var(--shadow-sm)'"
                       onmouseout="this.style.borderColor='var(--border)';this.style.boxShadow='none'">
                        <div style="width:38px;height:38px;border-radius:10px;flex-shrink:0;
                                    background:rgba(43,126,193,.1);display:grid;place-items:center;
                                    color:var(--blue-card);font-size:.95rem;">
                            <i class="fas fa-arrow-circle-down"></i>
                        </div>
                        <div>
                            <div style="font-size:.83rem;font-weight:600;color:var(--text-dark);">
                                Input Stok Masuk
                            </div>
                            <div style="font-size:.72rem;color:var(--text-light);">
                                Catat beras masuk gudang
                            </div>
                        </div>
                        <i class="fas fa-chevron-right ms-auto" style="color:var(--text-light);font-size:.72rem;"></i>
                    </a>

                    <a href="{{ route('admin.pemesanan.index') }}"
                       style="display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem;
                              border:1px solid var(--border); border-radius:var(--radius-sm);
                              text-decoration:none; transition:all var(--transition);
                              background:var(--white);"
                       onmouseover="this.style.borderColor='var(--gold)';this.style.boxShadow='var(--shadow-sm)'"
                       onmouseout="this.style.borderColor='var(--border)';this.style.boxShadow='none'">
                        <div style="width:38px;height:38px;border-radius:10px;flex-shrink:0;
                                    background:rgba(240,165,0,.1);display:grid;place-items:center;
                                    color:var(--gold);font-size:.95rem;">
                            <i class="fas fa-shopping-bag"></i>
                        </div>
                        <div>
                            <div style="font-size:.83rem;font-weight:600;color:var(--text-dark);">
                                Kelola Pemesanan
                            </div>
                            <div style="font-size:.72rem;color:var(--text-light);">
                                Lihat &amp; proses pesanan masuk
                            </div>
                        </div>
                        @if ($pesananPending > 0)
                            <span class="comp-badge comp-badge-danger ms-auto"
                                  style="font-size:.68rem;padding:.15rem .5rem;">
                                {{ $pesananPending }}
                            </span>
                        @else
                            <i class="fas fa-chevron-right ms-auto" style="color:var(--text-light);font-size:.72rem;"></i>
                        @endif
                    </a>

                    <a href="{{ route('admin.beras.index') }}"
                       style="display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem;
                              border:1px solid var(--border); border-radius:var(--radius-sm);
                              text-decoration:none; transition:all var(--transition);
                              background:var(--white);"
                       onmouseover="this.style.borderColor='var(--green-400)';this.style.boxShadow='var(--shadow-sm)'"
                       onmouseout="this.style.borderColor='var(--border)';this.style.boxShadow='none'">
                        <div style="width:38px;height:38px;border-radius:10px;flex-shrink:0;
                                    background:rgba(61,150,81,.1);display:grid;place-items:center;
                                    color:var(--green-600);font-size:.95rem;">
                            <i class="fas fa-table"></i>
                        </div>
                        <div>
                            <div style="font-size:.83rem;font-weight:600;color:var(--text-dark);">
                                Lihat Data Beras
                            </div>
                            <div style="font-size:.72rem;color:var(--text-light);">
                                Cek status &amp; stok semua beras
                            </div>
                        </div>
                        <i class="fas fa-chevron-right ms-auto" style="color:var(--text-light);font-size:.72rem;"></i>
                    </a>

                </div>
            </div>
        </div>

    </div>

</div>
@endsection