@extends('layouts.master')
@section('title', 'Admin Dashboard')

@section('style')
    <style>
        .stat-card {
            border-radius: 15px;
            border: 1px solid #f0f0f0;
            padding: 30px;
            background: #fff;
        }

        .trend-up {
            color: #28a745;
            font-size: 0.85rem;
        }

        .trend-down {
            color: #dc3545;
            font-size: 0.85rem;
        }

        .property-card {
            border-radius: 14px;
            overflow: hidden;
            border: none;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        .btn-green {
            background-color: #059669;
            color: white;
            border-radius: 10px;
        }

        .btn-green:hover {
            background-color: #047857;
            color: white;
        }

        .chart-container {
            height: 300px;
            position: relative;
        }

        /* เพิ่มสไตล์สำหรับ Sankey Flow */
        #chartdiv {
            width: 100%;
            height: 450px;
            background-color: transparent;
        }
    </style>
@endsection

@section('script')
    <!-- amCharts 5 Library -->
    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/flow.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

    <script>
        am5.ready(function() {
            var root = am5.Root.new("chartdiv");

            root.setThemes([
                am5themes_Animated.new(root)
            ]);

            // สร้างซีรีส์ Sankey
            var series = root.container.children.push(am5flow.Sankey.new(root, {
                sourceIdField: "from",
                targetIdField: "to",
                valueField: "value",
                paddingRight: 100,
                nodePadding: 20
            }));

            series.nodes.get("colors").set("step", 2);
            series.nodes.labels.template.setAll({
                fontSize: "0.75em",
                fontWeight: "500"
            });

            // ดึงข้อมูลจริงจาก Controller
            var data = @json($flowData);
            
            if (data && data.length > 0) {
                series.data.setAll(data);
            } else {
                document.getElementById('chartdiv').innerHTML = '<div class="d-flex h-100 align-items-center justify-content-center text-muted">No flow data available for current period</div>';
            }

            series.appear(1000, 100);
        });
    </script>
@endsection


@section('content')

    <div class="d-lg-none">
        @include('layouts.sidebar')
    </div>

    <div class="layout d-none d-lg-flex">
        <aside>
            <style>
                :root {
                    --primary-vivid: #7c3aed;
                    --primary-soft: #efebf7;
                    --text-dark: #1e293b;
                    --text-gray: #64748b;
                    --bg-sidebar: #ffffff;
                    --transition-speed: 0.3s;
                }

                /* SIDEBAR & OFFCANVAS */
                .offcanvas-start {
                    width: 280px !important;
                    border-right: none !important;
                    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.04);
                    background-color: var(--bg-sidebar);
                }

                .offcanvas-body {
                    scrollbar-width: thin;
                    scrollbar-color: #e2e8f0 transparent;
                }

                /* NAV LINK STYLING */
                .sidebar-nav .nav-link {
                    display: flex;
                    align-items: center;
                    color: var(--text-gray);
                    padding: 12px 16px;
                    border-radius: 12px;
                    margin-bottom: 4px;
                    transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
                    font-weight: 500;
                    border: 1px solid transparent;
                }

                /* HOVER & ACTIVE */
                .sidebar-nav .nav-link:hover {
                    background: #f8fafc;
                    color: var(--primary-vivid);
                    transform: translateX(5px);
                }

                .sidebar-nav .nav-link.active {
                    background: linear-gradient(135deg, var(--primary-soft) 0%, #f5f3ff 100%);
                    color: var(--primary-vivid);
                    font-weight: 600;
                    border: 1px solid rgba(124, 58, 237, 0.1);
                }

                .sidebar-nav .nav-link i {
                    font-size: 1.25rem;
                    margin-right: 12px;
                    transition: var(--transition-speed);
                    color: #000 !important;
                }

                /* SECTION TITLES */
                .menu-title {
                    font-size: 0.7rem;
                    text-transform: uppercase;
                    letter-spacing: 0.12em;
                    color: #cbd5e1;
                    margin: 24px 0 8px 16px;
                    font-weight: 700;
                }

                /* FLOATING HAMBURGER BUTTON */
                .btn-sidebar-toggle {
                    background: #ffffff !important;
                    color: var(--text-dark) !important;
                    border: 1px solid #f1f5f9 !important;
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                    border-radius: 12px;
                    padding: 12px;
                    transition: 0.2s;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .btn-sidebar-toggle:hover {
                    transform: scale(1.05);
                    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
                    color: var(--primary-vivid) !important;
                }

                /* MODAL ENHANCEMENTS */
                .modal-content {
                    border: none;
                    border-radius: 24px;
                    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
                    padding: 10px;
                }

                .form-control {
                    border-radius: 12px;
                    border: 1.5px solid #e2e8f0;
                    padding: 12px 16px;
                    transition: 0.2s;
                }

                .form-control:focus {
                    border-color: var(--primary-vivid);
                    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1);
                }

                /* LOGO ANIMATION */
                .logo-wrapper img {
                    transition: transform 0.3s ease;
                }

                .logo-wrapper:hover img {
                    transform: rotate(-3deg) scale(1.05);
                }

                /* ตอนเปิด sidebar (Active) */
                .hamburger.active span:nth-child(1) {
                    transform: rotate(45deg) translate(6px, 6px);
                }

                .hamburger.active span:nth-child(2) {
                    opacity: 0;
                    /* ซ่อนเส้นกลาง */
                }

                .hamburger.active span:nth-child(3) {
                    transform: rotate(-45deg) translate(6px, -7px);
                }

                @media (min-width: 992px) {
                    .layout {
                        display: flex;
                    }

                    .main-content {
                        margin-left: 280px;
                        width: 100%;
                    }

                    .offcanvas-start {
                        position: relative !important;
                        transform: none !important;
                        visibility: visible !important;
                    }

                    .wrapper {
                        position: fixed;
                        top: 0;
                        left: 280px;
                        width: calc(100% - 280px);
                        height: 100vh;
                        overflow-y: auto;
                    }

                    .offcanvas {
                        position: fixed !important;
                        transform: none !important;
                        visibility: visible !important;
                        top: 0;
                        left: 0;
                        height: 100vh;
                        z-index: 1000;
                    }

                    .offcanvas-backdrop {
                        display: none !important;
                        /* เอาพื้นหลังมืดออกจริง ๆ */
                    }
                }
            </style>

            <header>
                <button class="hamburger position-fixed d-lg-none" style="top:20px; left:20px; z-index:1100;"
                    data-bs-toggle="offcanvas" data-bs-target="#sidebarOffcanvas" id="hamburgerBtn">

                    <span></span>
                    <span></span>
                    <span></span>

                </button>

                <div class="offcanvas offcanvas-start show" tabindex="-1" id="sidebarOffcanvas" data-bs-backdrop="false"
                    data-bs-scroll="false" style="visibility: visible;">
                    <div class="offcanvas-body d-flex flex-column p-4">

                        <div class="mb-5 mt-2 text-center logo-wrapper">
                            <a href="{{ url('/') }}">
                                <img src="{{ asset('logo/siitlogo.png') }}" width="140" alt="Logo"
                                    style="filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));">
                            </a>
                        </div>

                        <nav class="sidebar-nav">
                            <ul class="nav flex-column">

                                <li>
                                    <a href="{{ url('/') }}" class="nav-link {{ Request::is('/') ? 'active' : '' }}">
                                        <i class="uil uil-estate"></i>
                                        <span>Home</span>
                                    </a>
                                </li>

                                @guest
                                    <li>
                                        <a class="nav-link" href="#" data-bs-toggle="modal"
                                            data-bs-target="#modal-signin">
                                            <i class="uil uil-signin"></i>
                                            <span>Sign In</span>
                                        </a>
                                    </li>
                                @endguest

                                @auth
                                    <div class="menu-title">Admin</div>
                                    <li>
                                        <a href="{{ url('/admindashboard') }}"
                                            class="nav-link {{ Request::is('admindashboard*') ? 'active' : '' }}">
                                            <i class="uil uil-book-reader"></i></i><span>Admin Dashboard</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{{ url('/stocklist') }}"
                                            class="nav-link {{ Request::is('stocklist*') ? 'active' : '' }}">
                                            <i class="uil uil-repeat"></i><span>Stock</span>
                                        </a>
                                    </li>
                                    <div class="menu-title">Inventory</div>
                                    <li>
                                        <a href="{{ url('/cataloglist') }}"
                                            class="nav-link {{ Request::is('cataloglist*') ? 'active' : '' }}">
                                            <i class="uil uil-box"></i><span>Catalog</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{{ url('/mysouvenirrequests') }}"
                                            class="nav-link {{ Request::is('mysouvenirrequests*') ? 'active' : '' }}">
                                            <i class="uil uil-file-alt"></i><span>My Requests</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{{ url('/allsouvenirrequests') }}"
                                            class="nav-link {{ Request::is('allsouvenirrequests*') ? 'active' : '' }}">
                                            <i class="uil uil-file-alt"></i><span>All Requests</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{{ url('/trackrequests') }}"
                                            class="nav-link {{ Request::is('trackrequests*') ? 'active' : '' }}">
                                            <i class="uil uil-location-point"></i><span>Track Orders</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{{ url('/returnorderslist') }}"
                                            class="nav-link {{ Request::is('returnorderslist*') ? 'active' : '' }}">
                                            <i class="uil uil-refresh"></i><span>Return Orders</span>
                                        </a>
                                    </li>

                                    @if (auth()->user()->hasAnyRole(['Supervisor', 'Authorize', 'AdminConsult', 'Admin']))
                                        <div class="menu-title">Management</div>
                                        <li>
                                            <a href="{{ url('/premium_requests') }}"
                                                class="nav-link {{ Request::is('premium_requests*') ? 'active' : '' }}">
                                                <i class="uil uil-gift"></i><span>Premium Requests</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url('/supervisorpendingrequests') }}"
                                                class="nav-link {{ Request::is('supervisorpendingrequests*') ? 'active' : '' }}">
                                                <i class="uil uil-edit"></i><span>Supervisor Requests</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url('/authorizependingrequests') }}"
                                                class="nav-link {{ Request::is('authorizependingrequests*') ? 'active' : '' }}">
                                                <i class="uil uil-edit"></i><span>Authorize Requests</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url('/adminpendingrequests') }}"
                                                class="nav-link {{ Request::is('adminpendingrequests*') ? 'active' : '' }}">
                                                <i class="uil uil-edit"></i><span>Approval Pending Requests</span>
                                            </a>
                                        </li>
                                    @endif

                                    @if (auth()->user()->hasAnyRole(['AdminConsult', 'Admin']))
                                        <div class="menu-title">Dispath Management</div>
                                        <li>
                                            <a href="{{ url('/deliveredrequests') }}"
                                                class="nav-link {{ Request::is('deliveredrequests*') ? 'active' : '' }}">
                                                <i class="uil uil-package"></i><span>Delivered Requests</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url('/admintrackrequests') }}"
                                                class="nav-link {{ Request::is('admintrackrequests*') ? 'active' : '' }}">
                                                <i class="uil uil-parcel"></i><span>Return Tracking</span>
                                            </a>
                                        </li>
                                    @endif

                                    @if (auth()->user()->hasAnyRole(['AdminConsult', 'Admin']))
                                        <div class="menu-title">Reports</div>
                                        <li>
                                            <a href="{{ url('/annualreport') }}"
                                                class="nav-link {{ Request::is('annualreport*') ? 'active' : '' }}">
                                                <i class="uil uil-analysis"></i><span>Annual Report</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url('/transactionreport') }}"
                                                class="nav-link {{ Request::is('transactionreport*') ? 'active' : '' }}">
                                                <i class="uil uil-transaction"></i><span>Transactions</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url('/dashboard/monthlytransaction') }}"
                                                class="nav-link {{ Request::is('dashboard/monthlytransaction*') ? 'active' : '' }}">
                                                <i class="uil uil-chart-bar"></i><span>Monthly Transaction</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url('/dashboard/product') }}"
                                                class="nav-link {{ Request::is('dashboard/product*') ? 'active' : '' }}">
                                                <i class="uil uil-box"></i><span>Products</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url('/dashboard/stocklevels') }}"
                                                class="nav-link {{ Request::is('dashboard/stocklevels*') ? 'active' : '' }}">
                                                <i class="uil uil-database"></i><span>Stock levels</span>
                                            </a>
                                        </li>
                                    @endif

                                    @if (auth()->user()->hasAnyRole(['AdminConsult', 'Admin']))
                                        <div class="menu-title">Setting</div>
                                        <li>
                                            <a href="{{ url('/productlist') }}"
                                                class="nav-link {{ Request::is('productlist*') ? 'active' : '' }}">
                                                <i class="uil uil-list-ul"></i><span>Souvenir List</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url('/restocklist') }}"
                                                class="nav-link {{ Request::is('restocklist*') ? 'active' : '' }}">
                                                <i class="uil uil-repeat"></i><span>Restock</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url('/divisionlist') }}"
                                                class="nav-link {{ Request::is('divisionlist*') ? 'active' : '' }}">
                                                <i class="uil uil-sitemap"></i><span>Divisions</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url('/producttypelist') }}"
                                                class="nav-link {{ Request::is('producttypelist*') ? 'active' : '' }}">
                                                <i class="uil uil-apps"></i><span>Product type</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url('/supplierlist') }}"
                                                class="nav-link {{ Request::is('supplierlist*') ? 'active' : '' }}">
                                                <i class="uil uil-luggage-cart"></i><span>Supplier</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url('/unitlist') }}"
                                                class="nav-link {{ Request::is('unitlist*') ? 'active' : '' }}">
                                                <i class="uil uil-border-out"></i><span>Units</span>
                                            </a>
                                        </li>
                                    @endif

                                    @if (auth()->user()->hasAnyRole(['AdminConsult', 'Admin']))
                                        <div class="menu-title">Log Activity</div>
                                        <li>
                                            <a href="{{ url('/logactivitylist') }}"
                                                class="nav-link {{ Request::is('logactivitylist*') ? 'active' : '' }}">
                                                <i class="uil uil-scroll"></i><span>Log Activity List</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url('/souvenir') }}"
                                                class="nav-link {{ Request::is('souvenir*') ? 'active' : '' }}">
                                                <i class="uil uil-clock-eight"></i><span>Souvenir Log History</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url('/souvenirrequisitionlog') }}"
                                                class="nav-link {{ Request::is('souvenirrequisitionlog*') ? 'active' : '' }}">
                                                <i class="uil uil-file-search-alt"></i><span>Souvenir Request Log
                                                    History</span>
                                            </a>
                                        </li>
                                    @endif

                                    <div class="menu-title">Account</div>
                                    <li>
                                        <a href="{{ url('/userview/' . Auth::user()->id) }}"
                                            class="nav-link {{ Request::is('userview*') ? 'active' : '' }}">
                                            <i class="uil uil-user-circle"></i><span>My Profile</span>
                                        </a>
                                    </li>
                                    @if (auth()->user()->hasRole('AdminConsult') || auth()->user()->hasRole('Admin'))
                                        <li>
                                            <a href="{{ url('/userlist') }}"
                                                class="nav-link {{ Request::is('userlist*') ? 'active' : '' }}">
                                                <i class="uil uil-users-alt"></i><span>User List</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url('/rolelist') }}"
                                                class="nav-link {{ Request::is('rolelist*') ? 'active' : '' }}">
                                                <i class="uil uil-shield-check"></i><span>Roles List</span>
                                            </a>
                                        </li>
                                    @endif
                                    <li class="mt-2">
                                        <form method="POST" action="{{ route('logout') }}">
                                            @csrf
                                            <button type="submit"
                                                class="nav-link text-light border-0 bg-danger w-100 text-start shadow-none">
                                                <i class="uil uil-signout"></i><span>Sign Out</span>
                                            </button>
                                        </form>
                                    </li>
                                @endauth
                            </ul>
                        </nav>
                    </div>
                </div>

                <div class="modal fade" id="modal-signin" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-sm">
                        <div class="modal-content">
                            <div class="modal-body p-4">
                                <div class="text-end mb-2">
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="text-start">
                                    <h2 class="fw-bold mb-1" style="color: var(--text-dark);">Welcome Back</h2>
                                    <p class="text-muted small mb-4">Please sign in to your account</p>
                                </div>

                                <form method="POST" action="{{ route('login') }}">
                                    @csrf
                                    <div class="form-floating mb-3">
                                        <input type="text" class="form-control" name="username" id="loginUser"
                                            placeholder="Username" required>
                                        <label for="loginUser">Username</label>
                                    </div>

                                    <div class="form-floating mb-4">
                                        <input type="password" class="form-control" name="password" id="loginPass"
                                            placeholder="Password" required>
                                        <label for="loginPass">Password</label>
                                    </div>

                                    <button type="submit"
                                        class="btn btn-primary w-100 py-3 rounded-pill fw-bold shadow-sm"
                                        style="background: var(--primary-vivid); border: none;">
                                        Sign In
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

        </aside>
    </div>


    <section class="wrapper" style="background-color: #e2e3f7">
        <div class="container-fluid py-4 px-4">
            <div class="row gx-3 gx-md-4 gx-lg-5">

                <div class="col-md-12">
                    <h5 class="display-1 mb-3" style="font-size: 30px">@yield('title')</h5>
                    <p class="lead fs-lg pe-lg-15 pe-xxl-12"></p>
                </div>

                <div class="col-lg-12">
                    <div class="blog single">
                        <div class="card">
                            <div class="card-body">

                                <div class="mb-3">
                                    <div class="fw-semibold text-dark" style="font-size: 30px">
                                        👋 Hello, {{ Auth::user()->name ?? 'Guest' }}
                                    </div>
                                </div>

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

                                    <!-- เบิกได้ -->
                                    <div class="col-md-4">
                                        <div class="card h-100 border-0 shadow-sm"
                                            style="background: linear-gradient(135deg, #e6f9f0, #ffffff);">
                                            <div class="card-body border-start border-success border-5 rounded-3 p-4">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <div>
                                                        <div class="text-success fw-bold mb-1" style="font-size: 2.5rem;">
                                                            {{ $normalStock ?? 0 }}</div>
                                                        <h2>ปกติ</h2>
                                                        <p class="text-muted small mb-0">รายการที่สามารถเบิกได้ปกติ</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- งดการเบิก -->
                                    <div class="col-md-4">
                                        <div class="card h-100 border-0 shadow-sm"
                                            style="background: linear-gradient(135deg, #fdeaea, #ffffff);">
                                            <div class="card-body border-start border-danger border-5 rounded-3 p-4">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <div>
                                                        <div class="text-danger fw-bold mb-1" style="font-size: 2.5rem;">{{ $outOfStock ?? 0 }}
                                                        </div>
                                                        <h2>หมดสต๊อก</h2>
                                                        <p class="text-muted small mb-0">รายการที่ไม่สามารถเบิกได้</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- ใกล้การเบิก -->
                                    <div class="col-md-4">
                                        <div class="card h-100 border-0 shadow-sm"
                                            style="background: linear-gradient(135deg, #fff8e1, #ffffff);">
                                            <div class="card-body border-start border-warning border-5 rounded-3 p-4">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <div>
                                                        <div class="text-warning fw-bold mb-1" style="font-size: 2.5rem;">
                                                            {{ $lowStock ?? 0 }}</div>
                                                        <h2>เหลือน้อย</h2>
                                                        <p class="text-muted small mb-0">รายการที่คงเหลือน้อยกว่าค่าต่ำสุด
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <!-- STATUS -->
                                <div class="row g-4 mb-6">

                                    <!-- Pending Admin -->
                                    <div class="col-md-3">
                                        <div class="card h-100 border-0 shadow-sm"
                                            style="background: linear-gradient(135deg, #eef2ff, #ffffff);">
                                            <div class="card-body border-start border-primary border-5 rounded-3 p-2">
                                                <div class="text-primary fw-bold mb-0" style="font-size: 1.5rem;">
                                                    {{ $statusCounts['pending_admin'] ?? 0 }}
                                                </div>
                                                <h6 class="mb-0">Pending Admin</h6>
                                                <p class="text-muted small mb-0">
                                                    Pending Admin Verification Approval
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Pending Supervisor -->
                                    <div class="col-md-3">
                                        <div class="card h-100 border-0 shadow-sm"
                                            style="background: linear-gradient(135deg, #eef2ff, #ffffff);">
                                            <div class="card-body border-start border-info border-5 rounded-3 p-2">
                                                <div class="text-info fw-bold mb-0" style="font-size: 1.5rem;">
                                                    {{ $statusCounts['pending_supervisor'] ?? 0 }}
                                                </div>
                                                <h6 class="mb-0">Pending Supervisor</h6>
                                                <p class="text-muted small mb-0">
                                                    Pending Supervisor Approval
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Pending Authorization -->
                                    <div class="col-md-3">
                                        <div class="card h-100 border-0 shadow-sm"
                                            style="background: linear-gradient(135deg, #eef2ff, #ffffff);">
                                            <div class="card-body border-start border-warning border-5 rounded-3 p-2">
                                                <div class="text-warning fw-bold mb-0" style="font-size: 1.5rem;">
                                                    {{ $statusCounts['pending_auth'] ?? 0 }}
                                                </div>
                                                <h6 class="mb-0">Pending Auth</h6>
                                                <p class="text-muted small mb-0">
                                                    Pending Authorization
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Approved -->
                                    <div class="col-md-3">
                                        <div class="card h-100 border-0 shadow-sm"
                                            style="background: linear-gradient(135deg, #eef2ff, #ffffff);">
                                            <div class="card-body border-start border-success border-5 rounded-3 p-2">
                                                <div class="text-success fw-bold mb-0" style="font-size: 1.5rem;">
                                                    {{ $statusCounts['approved'] ?? 0 }}
                                                </div>
                                                <h6 class="mb-0">Approved</h6>
                                                <p class="text-muted small mb-0">
                                                    Approved
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="row g-4 mb-6">
                                    <div class="col-lg-8">
                                        <div class="stat-card h-100">
                                            <div class="d-flex justify-content-between mb-4">
                                                <h5 class="mb-0">รายการเบิกล่าสุด</h5>
                                            </div>

                                            <div class="table-responsive">
                                                <table class="table table-sm align-middle mb-0">
                                                    <thead>
                                                        <tr>
                                                            <th>Product Name</th>
                                                            <th>Customer Name</th>
                                                            <th>Date</th>
                                                            <th class="text-end">Qty</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @forelse($latestWithdraw as $item)
                                                            <tr>
                                                                <td>
                                                                    <span class="fw-semibold text-purple">
                                                                        {{ $item->product_name }}
                                                                    </span>
                                                                </td>
                                                                <td>
                                                                    {{ $item->user_fullname }}
                                                                </td>
                                                                <td>
                                                                    {{ date('d M Y', strtotime($item->order_request_date)) }}
                                                                </td>
                                                                <td class="text-end">
                                                                    {{ number_format($item->total_qty) }}
                                                                </td>
                                                            </tr>
                                                        @empty
                                                            <tr>
                                                                <td colspan="3" class="text-center text-muted">
                                                                    ไม่มีข้อมูล
                                                                </td>
                                                            </tr>
                                                        @endforelse
                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="stat-card h-100"
                                            style="background: linear-gradient(135deg, #ffffff 0%, #EDE9FE 50%, #ffffff 100%);">
                                            <div class="d-flex justify-content-between align-items-center mb-4">
                                                <h5 class="mb-4">Log Activity</h5>
                                                <a href="{{ url('/logactivitylist') }}" class="text-purple small">View
                                                    All</a>
                                            </div>
                                            <div class="table-responsive">
                                                <table class="table table-sm align-middle mb-0">
                                                    <thead>
                                                        <tr>
                                                            <th>TYPE</th>
                                                            <th>USER</th>
                                                            <th class="text-end">DATE</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($logs as $log)
                                                            <tr>
                                                                <td>
                                                                    <span class="badge bg-light text-dark">
                                                                        {{ $log->TYPE ?? '-' }}
                                                                    </span>
                                                                </td>
                                                                <td class="d-flex align-items-center gap-2">
                                                                    <img src="{{ !empty($log->user_picture)
                                                                        ? asset('user_pictures/' . $log->user_picture)
                                                                        : asset('user_pictures/default.png') }}"
                                                                        alt="user"
                                                                        style="width:30px; height:30px; object-fit:cover; border-radius:50%;">

                                                                    {{ $log->user_name ?? '-' }}
                                                                </td>
                                                                <td class="text-end">
                                                                    {{ \Carbon\Carbon::parse($log->created_at)->format('d/m/Y H:i') ?? '-' }}
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>

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

                                <!-- Souvenir Flow Visualization -->
                                {{-- <div class="row g-4 mb-6">
                                    <div class="col-12">
                                        <div class="stat-card h-100">
                                            <div class="d-flex justify-content-between mb-4">
                                                <h5 class="mb-0">Souvenir Requisition Flow (Division → Souvenir)</h5>
                                            </div>
                                            <div id="chartdiv"></div>
                                        </div>
                                    </div>
                                </div> --}}

                                <div class="d-flex justify-content-between align-items-center mb-4">
                                    <h5 class="mb-0">Souvenir List</h5>
                                    <a href="{{ url('/productlist') }}" class="text-purple small">View All</a>
                                </div>
                                <div class="row g-4">
                                    @foreach ($products as $product)
                                        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                                            <div class="card property-card h-100 d-flex flex-column shadow-sm"
                                                style="background-color:#ffffff; border:1px solid #ddd;">

                                                <img src="{{ asset('product_images/' . $product->product_image) }}"
                                                    class="card-img-top rounded-top-4"
                                                    style="height:200px; object-fit:cover;"
                                                    alt="{{ $product->product_name }}">

                                                <div class="card-body p-2 d-flex flex-column">

                                                    <h6 class="mb-1 fw-bold text-truncate">
                                                        {{ $product->product_name }}
                                                    </h6>

                                                    <p class="text-muted small mb-2 text-truncate">
                                                        {{ $product->product_description ?? '-' }}
                                                    </p>

                                                    <div class="d-flex justify-content-between align-items-center mt-auto">
                                                        <span class="fw-bold text-purple">
                                                            {{ number_format($product->product_current_unit_price, 2) }}
                                                            ฿
                                                        </span>

                                                        <span class="badge bg-light text-dark">
                                                            {{ $product->product_type_name ?? '-' }}
                                                        </span>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- @include('layouts.footer') --}}
@endsection