@extends('admin.layout')



@section('title', 'Dashboard')



@section('content')

<div class="space-y-8">

    <!-- Welcome Header -->

    <div class="bg-white rounded-xl shadow-sm p-6">

        <div class="flex flex-col md:flex-row justify-between items-start md:items-center">

            <div>

                <h1 class="text-2xl md:text-3xl font-bold text-gray-800 mb-2">Selamat datang, <span class="text-gold">{{ Auth::user()->name }}</span></h1>

                <p class="text-gray-600">Dashboard manajemen menu restoran Sutan Raja</p>

            </div>

            <div class="mt-4 md:mt-0">
			<div class="flex items-center space-x-4 bg-gray-50 rounded-lg p-3">
    				<div class="text-center">
        				<div class="text-lg font-semibold text-gray-800 time-display">{{ date('H:i') }}</div>
        				<div class="text-sm text-gray-500 date-display">{{ date('d/m/Y') }}</div>
				    </div>
				    <div class="w-12 h-12 rounded-full bg-gradient-to-br from-gold to-amber-600 flex items-center justify-center">
			        <i class="fas fa-crown text-white"></i>
			    </div>
			</div>
                </div>

            </div>

        </div>

    </div>



    <!-- Stats Cards -->

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

        <!-- Categories Card -->

        <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-blue-500 hover:shadow-md transition-shadow">

            <div class="flex items-center justify-between mb-4">

                <div class="p-3 rounded-lg bg-blue-50">

                    <i class="fas fa-layer-group text-xl text-blue-600"></i>

                </div>

                <span class="text-sm font-medium text-gray-500">Total</span>

            </div>

            <h3 class="text-2xl font-bold text-gray-800 mb-2">{{ $categoriesCount ?? 0 }}</h3>

            <p class="text-gray-600 mb-3">Kategori Menu</p>

            <a href="{{ route('admin.categories') }}" class="text-blue-600 text-sm font-medium hover:text-blue-700 flex items-center">

                <span>Kelola Kategori</span>

                <i class="fas fa-arrow-right ml-2 text-xs"></i>

            </a>

        </div>



        <!-- Menu Items Card -->

        <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-emerald-500 hover:shadow-md transition-shadow">

            <div class="flex items-center justify-between mb-4">

                <div class="p-3 rounded-lg bg-emerald-50">

                    <i class="fas fa-utensils text-xl text-emerald-600"></i>

                </div>

                <span class="text-sm font-medium text-gray-500">Total</span>

            </div>

            <h3 class="text-2xl font-bold text-gray-800 mb-2">{{ $itemsCount ?? 0 }}</h3>

            <p class="text-gray-600 mb-3">Item Menu</p>

            <a href="{{ route('admin.categories') }}" class="text-emerald-600 text-sm font-medium hover:text-emerald-700 flex items-center">

                <span>Kelola Menu</span>

                <i class="fas fa-arrow-right ml-2 text-xs"></i>

            </a>

        </div>



        <!-- Recent Activity Card -->

        <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-amber-500 hover:shadow-md transition-shadow">

            <div class="flex items-center justify-between mb-4">

                <div class="p-3 rounded-lg bg-amber-50">

                    <i class="fas fa-history text-xl text-amber-600"></i>

                </div>

                <span class="text-sm font-medium text-gray-500">Terbaru</span>

            </div>

            <h3 class="text-2xl font-bold text-gray-800 mb-2">{{ $recentItems ?? 0 }}</h3>

            <p class="text-gray-600 mb-3">Item Baru (7 hari)</p>

            <div class="text-amber-600 text-sm font-medium flex items-center">

                <i class="fas fa-chart-line mr-2"></i>

                <span>Statistik Terkini</span>

            </div>

        </div>

    </div>



    <!-- Quick Actions -->

    <div class="bg-white rounded-xl shadow-sm p-6">

        <div class="flex items-center justify-between mb-6">

            <div>

                <h2 class="text-xl font-bold text-gray-800 mb-1">Aksi Cepat</h2>

                <p class="text-gray-600">Kelola restoran Anda dengan efisien</p>

            </div>

            <div class="p-2 rounded-lg bg-gold/10">

                <i class="fas fa-bolt text-gold"></i>

            </div>

        </div>



        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">

            <!-- Manage Categories -->

            <a href="{{ route('admin.categories') }}" class="group">

                <div class="bg-white border border-gray-200 rounded-lg p-5 hover:border-blue-300 hover:shadow-sm transition-all">

                    <div class="flex items-center">

                        <div class="p-3 rounded-lg bg-blue-50 group-hover:bg-blue-100 transition-colors mr-4">

                            <i class="fas fa-layer-group text-blue-600"></i>

                        </div>

                        <div>

                            <h3 class="font-semibold text-gray-800 mb-1">Kelola Kategori</h3>

                            <p class="text-sm text-gray-600">Tambah, edit, atau hapus kategori</p>

                        </div>

                    </div>

                </div>

            </a>



            <!-- Manage Items -->

            <a href="{{ route('admin.categories') }}" class="group">

                <div class="bg-white border border-gray-200 rounded-lg p-5 hover:border-emerald-300 hover:shadow-sm transition-all">

                    <div class="flex items-center">

                        <div class="p-3 rounded-lg bg-emerald-50 group-hover:bg-emerald-100 transition-colors mr-4">

                            <i class="fas fa-utensils text-emerald-600"></i>

                        </div>

                        <div>

                            <h3 class="font-semibold text-gray-800 mb-1">Kelola Item Menu</h3>

                            <p class="text-sm text-gray-600">Tambah, edit, atau hapus item</p>

                        </div>

                    </div>

                </div>

            </a>



            <!-- View Website -->

            <a href="{{ route('home') }}" target="_blank" class="group">

                <div class="bg-white border border-gray-200 rounded-lg p-5 hover:border-amber-300 hover:shadow-sm transition-all">

                    <div class="flex items-center">

                        <div class="p-3 rounded-lg bg-amber-50 group-hover:bg-amber-100 transition-colors mr-4">

                            <i class="fas fa-eye text-amber-600"></i>

                        </div>

                        <div>

                            <h3 class="font-semibold text-gray-800 mb-1">Lihat Website</h3>

                            <p class="text-sm text-gray-600">Pratinjau website restoran</p>

                        </div>

                    </div>

                </div>

            </a>

        </div>

    </div>



    <!-- Recent Activity & Tips -->

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

        <!-- Recent Items -->

        <div class="bg-white rounded-xl shadow-sm p-6">

            <div class="flex items-center justify-between mb-6">

                <div>

                    <h2 class="text-xl font-bold text-gray-800 mb-1">Item Terbaru</h2>

                    <p class="text-gray-600">Item menu yang baru ditambahkan</p>

                </div>

                <span class="text-xs font-medium text-gray-500 bg-gray-100 px-3 py-1 rounded-full">Hari Ini</span>

            </div>

            

            <div class="space-y-4">

                @php

                    $recentItemsList = \App\Models\MenuItem::latest()->take(5)->get();

                @endphp

                

                @foreach($recentItemsList as $item)

                <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors">

                    <div class="flex items-center">

                        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-gold/20 to-gold/10 flex items-center justify-center mr-3">

                            <i class="fas fa-utensil-spoon text-gold text-sm"></i>

                        </div>

                        <div class="flex-1 min-w-0">

                            <p class="text-sm font-medium text-gray-800 truncate">{{ $item->name }}</p>

                            <p class="text-xs text-gray-500">{{ $item->category->name ?? 'Tanpa Kategori' }}</p>

                        </div>

                    </div>

                    <div class="text-right">

                        <span class="text-sm font-bold text-gray-800">Rp {{ number_format($item->price, 0, ',', '.') }}</span>

                        <p class="text-xs text-gray-400">{{ $item->created_at->diffForHumans() }}</p>

                    </div>

                </div>

                @endforeach

                

                @if($recentItemsList->isEmpty())

                <div class="text-center py-8">

                    <i class="fas fa-utensils text-3xl text-gray-300 mb-3"></i>

                    <p class="text-gray-500">Belum ada item menu</p>

                    <a href="{{ route('admin.categories') }}" class="text-gold text-sm font-medium hover:text-amber-700 mt-2 inline-block">

                        Tambah item pertama →

                    </a>

                </div>

                @endif

            </div>

            

            @if($recentItemsList->isNotEmpty())

            <div class="mt-6 pt-6 border-t border-gray-200">

                <a href="{{ route('admin.categories') }}" class="text-gold text-sm font-medium hover:text-amber-700 flex items-center justify-center">

                    <span>Lihat Semua Item</span>

                    <i class="fas fa-arrow-right ml-2"></i>

                </a>

            </div>

            @endif

        </div>



        <!-- Quick Tips -->

        <div class="bg-white rounded-xl shadow-sm p-6">

            <div class="flex items-center justify-between mb-6">

                <div>

                    <h2 class="text-xl font-bold text-gray-800 mb-1">Tips & Panduan</h2>

                    <p class="text-gray-600">Saran untuk manajemen menu yang baik</p>

                </div>

                <div class="p-2 rounded-lg bg-purple-50">

                    <i class="fas fa-lightbulb text-purple-600"></i>

                </div>

            </div>

            

            <div class="space-y-4">

                <div class="p-4 rounded-lg bg-blue-50 border border-blue-100">

                    <div class="flex items-start">

                        <i class="fas fa-star text-sm text-blue-600 mt-0.5 mr-3"></i>

                        <div>

                            <p class="text-sm font-medium text-gray-800 mb-1">Organisasi Kategori</p>

                            <p class="text-xs text-gray-600">Kelompokkan item serupa untuk pengalaman pelanggan yang lebih baik</p>

                        </div>

                    </div>

                </div>

                

                <div class="p-4 rounded-lg bg-emerald-50 border border-emerald-100">

                    <div class="flex items-start">

                        <i class="fas fa-image text-sm text-emerald-600 mt-0.5 mr-3"></i>

                        <div>

                            <p class="text-sm font-medium text-gray-800 mb-1">Gambar Berkualitas</p>

                            <p class="text-xs text-gray-600">Foto berkualitas tinggi meningkatkan daya tarik item menu hingga 30%</p>

                        </div>

                    </div>

                </div>

                

                <div class="p-4 rounded-lg bg-amber-50 border border-amber-100">

                    <div class="flex items-start">

                        <i class="fas fa-tag text-sm text-amber-600 mt-0.5 mr-3"></i>

                        <div>

                            <p class="text-sm font-medium text-gray-800 mb-1">Harga Terkini</p>

                            <p class="text-xs text-gray-600">Perbarui harga menu secara berkala untuk keakuratan</p>

                        </div>

                    </div>

                </div>

            </div>

            

            <div class="mt-6 pt-6 border-t border-gray-200">

                <div class="flex items-center justify-between">

                    <div class="text-sm text-gray-600">

                        <i class="fas fa-info-circle mr-2"></i>

                        Butuh bantuan lebih lanjut?

                    </div>

                    <a href="#" class="text-sm font-medium text-gray-700 hover:text-gray-900">

                        Hubungi Support

                    </a>

                </div>

            </div>

        </div>

    </div>



    <!-- Restaurant Status -->

    <div class="bg-gradient-to-r from-gold/5 to-amber-50 rounded-xl p-6 border border-gold/20">

        <div class="flex flex-col md:flex-row items-center justify-between">

            <div class="text-center md:text-left mb-4 md:mb-0">

                <h3 class="text-lg font-bold text-gray-800 mb-1">Status Restoran</h3>

                <p class="text-gray-600">Sutan Raja Restaurant</p>

            </div>

            <div class="flex items-center space-x-4">

                <div class="flex items-center">

                    <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>

                    <span class="text-sm font-medium text-gray-800">BUKA 24 JAM</span>

                </div>

                <div class="text-sm text-gray-500">

                    <i class="fas fa-clock mr-1"></i>

                    Setiap Hari

                </div>

            </div>

        </div>

    </div>

</div>



<style>

    .text-gold {

        color: #D4AF37;

    }

    .bg-gold {

        background-color: #D4AF37;

    }

    

    /* Hover effects */

    .hover-lift {

        transition: transform 0.2s ease;

    }

    

    .hover-lift:hover {

        transform: translateY(-2px);

    }

</style>



<script>

// Simple time update
function updateTime() {
    const now = new Date();
    const timeElement = document.querySelector('.time-display');
    const dateElement = document.querySelector('.date-display');
    
    if (timeElement) {
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        timeElement.textContent = `${hours}:${minutes}`;
    }
    
    if (dateElement) {
        const day = now.getDate().toString().padStart(2, '0');
        const month = (now.getMonth() + 1).toString().padStart(2, '0');
        const year = now.getFullYear();
        dateElement.textContent = `${day}/${month}/${year}`;
    }
}

// Jalankan setelah DOM siap
document.addEventListener('DOMContentLoaded', function() {
    // Update segera
    updateTime();
    
    // Update setiap menit (60,000 milidetik)
    setInterval(updateTime, 60000);
});

</script>

@endsection