@extends('admin.layouts.app')

@section('title', 'Shopping Mall Dashboard')

@section('content')
    <div class="max-w-7xl mx-auto">
        <div class="mb-10 text-center md:text-left">
            <h1 class="text-3xl font-bold text-white tracking-tight">Shopping Mall Management</h1>
            <p class="text-slate-400 mt-2">Central hub for managing your e-commerce operations</p>
        </div>

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

            <!-- Catalog Management -->
            <div class="col-span-full mb-4">
                <h2
                    class="text-lg font-bold text-white flex items-center gap-2 uppercase tracking-wider text-xs border-b border-slate-700 pb-2">
                    <i data-lucide="layout-grid" class="w-4 h-4 text-blue-500"></i>
                    Catalog Management
                </h2>
            </div>

            <a href="{{ route('admin.products.index') }}"
                class="group bg-slate-800 rounded-2xl p-6 border border-slate-700 hover:border-blue-500/50 hover:bg-slate-800/80 transition-all shadow-lg hover:shadow-blue-500/10">
                <div
                    class="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                    <i data-lucide="package" class="w-6 h-6 text-blue-400"></i>
                </div>
                <h3 class="text-lg font-bold text-white mb-2">Products</h3>
                <p class="text-sm text-slate-400">Manage your product inventory, variations, and stock levels.</p>
            </a>

            <a href="{{ route('admin.categories.index') }}"
                class="group bg-slate-800 rounded-2xl p-6 border border-slate-700 hover:border-blue-500/50 hover:bg-slate-800/80 transition-all shadow-lg hover:shadow-blue-500/10">
                <div
                    class="w-12 h-12 rounded-xl bg-indigo-500/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                    <i data-lucide="list" class="w-6 h-6 text-indigo-400"></i>
                </div>
                <h3 class="text-lg font-bold text-white mb-2">Categories</h3>
                <p class="text-sm text-slate-400">Organize products into hierarchical categories and subcategories.</p>
            </a>

            <a href="{{ route('admin.stores.index') }}"
                class="group bg-slate-800 rounded-2xl p-6 border border-slate-700 hover:border-blue-500/50 hover:bg-slate-800/80 transition-all shadow-lg hover:shadow-blue-500/10">
                <div
                    class="w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                    <i data-lucide="store" class="w-6 h-6 text-purple-400"></i>
                </div>
                <h3 class="text-lg font-bold text-white mb-2">Stores</h3>
                <p class="text-sm text-slate-400">Manage physical store locations and pickup points.</p>
            </a>

            <!-- Order Fulfillment -->
            <div class="col-span-full mt-8 mb-4">
                <h2
                    class="text-lg font-bold text-white flex items-center gap-2 uppercase tracking-wider text-xs border-b border-slate-700 pb-2">
                    <i data-lucide="shopping-bag" class="w-4 h-4 text-green-500"></i>
                    Order Fulfillment
                </h2>
            </div>

            <a href="{{ route('admin.orders.index') }}"
                class="group bg-slate-800 rounded-2xl p-6 border border-slate-700 hover:border-green-500/50 hover:bg-slate-800/80 transition-all shadow-lg hover:shadow-green-500/10">
                <div
                    class="w-12 h-12 rounded-xl bg-green-500/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                    <i data-lucide="shopping-cart" class="w-6 h-6 text-green-400"></i>
                </div>
                <h3 class="text-lg font-bold text-white mb-2">Orders</h3>
                <p class="text-sm text-slate-400">Track, process, and fulfill customer orders.</p>
            </a>

            <a href="{{ route('admin.order-returns.index') }}"
                class="group bg-slate-800 rounded-2xl p-6 border border-slate-700 hover:border-green-500/50 hover:bg-slate-800/80 transition-all shadow-lg hover:shadow-green-500/10">
                <div
                    class="w-12 h-12 rounded-xl bg-teal-500/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                    <i data-lucide="rotate-ccw" class="w-6 h-6 text-teal-400"></i>
                </div>
                <h3 class="text-lg font-bold text-white mb-2">Returns</h3>
                <p class="text-sm text-slate-400">Manage return requests and refunds.</p>
            </a>

            <!-- Marketing -->
            <div class="col-span-full mt-8 mb-4">
                <h2
                    class="text-lg font-bold text-white flex items-center gap-2 uppercase tracking-wider text-xs border-b border-slate-700 pb-2">
                    <i data-lucide="megaphone" class="w-4 h-4 text-pink-500"></i>
                    Marketing & Promotions
                </h2>
            </div>

            <a href="{{ route('admin.coupons.index') }}"
                class="group bg-slate-800 rounded-2xl p-6 border border-slate-700 hover:border-pink-500/50 hover:bg-slate-800/80 transition-all shadow-lg hover:shadow-pink-500/10">
                <div
                    class="w-12 h-12 rounded-xl bg-pink-500/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                    <i data-lucide="ticket" class="w-6 h-6 text-pink-400"></i>
                </div>
                <h3 class="text-lg font-bold text-white mb-2">Coupons</h3>
                <p class="text-sm text-slate-400">Create and manage discount coupons.</p>
            </a>

            <a href="{{ route('admin.discounts.index') }}"
                class="group bg-slate-800 rounded-2xl p-6 border border-slate-700 hover:border-pink-500/50 hover:bg-slate-800/80 transition-all shadow-lg hover:shadow-pink-500/10">
                <div
                    class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                    <i data-lucide="tag" class="w-6 h-6 text-red-400"></i>
                </div>
                <h3 class="text-lg font-bold text-white mb-2">Discounts</h3>
                <p class="text-sm text-slate-400">Setup automated discounts and sales.</p>
            </a>

            <a href="{{ route('admin.promotional-banners.index') }}"
                class="group bg-slate-800 rounded-2xl p-6 border border-slate-700 hover:border-pink-500/50 hover:bg-slate-800/80 transition-all shadow-lg hover:shadow-pink-500/10">
                <div
                    class="w-12 h-12 rounded-xl bg-rose-500/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                    <i data-lucide="image" class="w-6 h-6 text-rose-400"></i>
                </div>
                <h3 class="text-lg font-bold text-white mb-2">Banners</h3>
                <p class="text-sm text-slate-400">Manage promotional banners and sliders.</p>
            </a>

            <!-- Settings -->
            <div class="col-span-full mt-8 mb-4">
                <h2
                    class="text-lg font-bold text-white flex items-center gap-2 uppercase tracking-wider text-xs border-b border-slate-700 pb-2">
                    <i data-lucide="settings" class="w-4 h-4 text-slate-400"></i>
                    Shopping Configurations
                </h2>
            </div>

            <a href="{{ route('admin.settings.shipping') }}"
                class="group bg-slate-800 rounded-2xl p-6 border border-slate-700 hover:border-slate-500/50 hover:bg-slate-800/80 transition-all shadow-lg hover:shadow-slate-500/10">
                <div
                    class="w-12 h-12 rounded-xl bg-slate-700/50 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                    <i data-lucide="truck" class="w-6 h-6 text-slate-300"></i>
                </div>
                <h3 class="text-lg font-bold text-white mb-2">Shipping</h3>
                <p class="text-sm text-slate-400">Configure shipping methods and zones.</p>
            </a>

            <a href="{{ route('admin.settings.cart') }}"
                class="group bg-slate-800 rounded-2xl p-6 border border-slate-700 hover:border-slate-500/50 hover:bg-slate-800/80 transition-all shadow-lg hover:shadow-slate-500/10">
                <div
                    class="w-12 h-12 rounded-xl bg-slate-700/50 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                    <i data-lucide="shopping-basket" class="w-6 h-6 text-slate-300"></i>
                </div>
                <h3 class="text-lg font-bold text-white mb-2">Cart Settings</h3>
                <p class="text-sm text-slate-400">Checkout minimums and gift card settings.</p>
            </a>

            <a href="{{ route('admin.settings.payment') }}"
                class="group bg-slate-800 rounded-2xl p-6 border border-slate-700 hover:border-slate-500/50 hover:bg-slate-800/80 transition-all shadow-lg hover:shadow-slate-500/10">
                <div
                    class="w-12 h-12 rounded-xl bg-slate-700/50 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                    <i data-lucide="credit-card" class="w-6 h-6 text-slate-300"></i>
                </div>
                <h3 class="text-lg font-bold text-white mb-2">Payment</h3>
                <p class="text-sm text-slate-400">Configure payment gateways and methods.</p>
            </a>

            <a href="{{ route('admin.settings.tax') }}"
                class="group bg-slate-800 rounded-2xl p-6 border border-slate-700 hover:border-slate-500/50 hover:bg-slate-800/80 transition-all shadow-lg hover:shadow-slate-500/10">
                <div
                    class="w-12 h-12 rounded-xl bg-slate-700/50 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                    <i data-lucide="percent" class="w-6 h-6 text-slate-300"></i>
                </div>
                <h3 class="text-lg font-bold text-white mb-2">Tax Config</h3>
                <p class="text-sm text-slate-400">Global tax settings and rules.</p>
            </a>

            <a href="{{ route('admin.taxes.index') }}"
                class="group bg-slate-800 rounded-2xl p-6 border border-slate-700 hover:border-slate-500/50 hover:bg-slate-800/80 transition-all shadow-lg hover:shadow-slate-500/10">
                <div
                    class="w-12 h-12 rounded-xl bg-slate-700/50 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                    <i data-lucide="file-spreadsheet" class="w-6 h-6 text-slate-300"></i>
                </div>
                <h3 class="text-lg font-bold text-white mb-2">Tax Master</h3>
                <p class="text-sm text-slate-400">Manage individual tax rates.</p>
            </a>

            <a href="{{ route('admin.settings.wallet') }}"
                class="group bg-slate-800 rounded-2xl p-6 border border-slate-700 hover:border-slate-500/50 hover:bg-slate-800/80 transition-all shadow-lg hover:shadow-slate-500/10">
                <div
                    class="w-12 h-12 rounded-xl bg-slate-700/50 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                    <i data-lucide="wallet" class="w-6 h-6 text-slate-300"></i>
                </div>
                <h3 class="text-lg font-bold text-white mb-2">Wallet Settings</h3>
                <p class="text-sm text-slate-400">Configure wallet rewards and gift cards.</p>
            </a>

            <a href="{{ route('admin.settings.store') }}"
                class="group bg-slate-800 rounded-2xl p-6 border border-slate-700 hover:border-slate-500/50 hover:bg-slate-800/80 transition-all shadow-lg hover:shadow-slate-500/10">
                <div
                    class="w-12 h-12 rounded-xl bg-slate-700/50 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                    <i data-lucide="settings-2" class="w-6 h-6 text-slate-300"></i>
                </div>
                <h3 class="text-lg font-bold text-white mb-2">Store Config</h3>
                <p class="text-sm text-slate-400">General store information and policies.</p>
            </a>

        </div>
    </div>
@endsection