@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')

<style>

.stat-card{
    border:none;
    border-radius:20px;
    color:white;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.card-modern{
    border:none;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.icon-box{
    width:55px;
    height:55px;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    background:rgba(255,255,255,.2);
}

.quick-btn{
    border-radius:15px;
    padding:15px;
    text-decoration:none;
    background:white;
    color:#111;
    display:block;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
    transition:.2s;
}

.quick-btn:hover{
    transform:translateY(-3px);
}

</style>

<div class="container-fluid">

    {{-- Quick Menu --}}

    <div class="row g-3 mb-4">

        <div class="col-6 col-md-3">
            <a href="/sales/create" class="quick-btn text-center">
                <h3>🛒</h3>
                <strong>Kasir</strong>
            </a>
        </div>

        <div class="col-6 col-md-3">
            <a href="/products/create" class="quick-btn text-center">
                <h3>📦</h3>
                <strong>Produk</strong>
            </a>
        </div>

        <div class="col-6 col-md-3">
            <a href="/prices/create" class="quick-btn text-center">
                <h3>🏷️</h3>
                <strong>Harga</strong>
            </a>
        </div>

        <div class="col-6 col-md-3">
            <a href="/sales" class="quick-btn text-center">
                <h3>📊</h3>
                <strong>Laporan</strong>
            </a>
        </div>

    </div>

    {{-- Statistik --}}

    <div class="row g-3 mb-4">

        <div class="col-md-3">

            <div class="card stat-card bg-success p-4">

                <div class="d-flex justify-content-between">

                    <div>

                        <small>Omzet Hari Ini</small>

                        <h4>
                            Rp {{ number_format($omzetHariIni,0,',','.') }}
                        </h4>

                    </div>

                    <div class="icon-box">
                        💰
                    </div>

                </div>

            </div>

        </div>

        <div class="col-md-3">

            <div class="card stat-card bg-primary p-4">

                <div class="d-flex justify-content-between">

                    <div>

                        <small>Transaksi</small>

                        <h4>{{ $transaksiHariIni }}</h4>

                    </div>

                    <div class="icon-box">
                        🧾
                    </div>

                </div>

            </div>

        </div>

        <div class="col-md-3">

            <div class="card stat-card bg-warning p-4">

                <div class="d-flex justify-content-between">

                    <div>

                        <small>Produk Terjual</small>

                        <h4>{{ $produkTerjual }}</h4>

                    </div>

                    <div class="icon-box">
                        🥚
                    </div>

                </div>

            </div>

        </div>

        <div class="col-md-3">

            <div class="card stat-card bg-danger p-4">

                <div class="d-flex justify-content-between">

                    <div>

                        <small>Stok Menipis</small>

                        <h4>{{ $stokMenipis->count() }}</h4>

                    </div>

                    <div class="icon-box">
                        ⚠️
                    </div>

                </div>

            </div>

        </div>

    </div>

    {{-- Bawah --}}

    <div class="row g-4">

        {{-- Produk Terlaris --}}

        <div class="col-lg-6">

            <div class="card card-modern">

                <div class="card-header bg-white">

                    <strong>🏆 Produk Terlaris</strong>

                </div>

                <div class="card-body">

                    @foreach($produkTerlaris as $item)

                    <div class="d-flex justify-content-between py-2 border-bottom">

                        <span>

                            {{ $item->product->name }}

                        </span>

                        <strong>

                            {{ $item->total_qty }}

                        </strong>

                    </div>

                    @endforeach

                </div>

            </div>

        </div>

        {{-- Stok Menipis --}}

        <div class="col-lg-6">

            <div class="card card-modern">

                <div class="card-header bg-white">

                    <strong>⚠️ Stok Menipis</strong>

                </div>

                <div class="card-body">

                    @foreach($stokMenipis as $stok)

                    <div class="d-flex justify-content-between py-2 border-bottom">

                        <span>

                            {{ $stok->name }}

                        </span>

                        <span class="badge bg-danger">

                            {{ $stok->stock }}

                        </span>

                    </div>

                    @endforeach

                </div>

            </div>

        </div>

        {{-- Harga Hari Ini --}}

        <div class="col-12">

            <div class="card card-modern">

                <div class="card-header bg-white">

                    <strong>🏷️ Harga Hari Ini</strong>

                </div>

                <div class="card-body">

                    <div class="row">

                        @foreach($hargaHariIni as $harga)

                        <div class="col-md-3 mb-3">

                            <div class="border rounded p-3">

                                <strong>

                                    {{ $harga->product->name }}

                                </strong>

                                <br>

                                <span class="text-success">

                                    Rp {{ number_format($harga->price,0,',','.') }}

                                </span>

                            </div>

                        </div>

                        @endforeach

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

@endsection