@extends('digitalmenu::layouts.app')

@section('title', 'Dashboard | ' . $shop->name)

@section('styles')
<style>
    .kinetic-gradient   { background: linear-gradient(135deg, #b81311 0%, #dc3128 100%); }
    .teal-gradient      { background: linear-gradient(135deg, #006576 0%, #008095 100%); }
    .amber-gradient     { background: linear-gradient(135deg, #b45309 0%, #d97706 100%); }
    .emerald-gradient   { background: linear-gradient(135deg, #065f46 0%, #059669 100%); }
    .slate-gradient     { background: linear-gradient(135deg, #334155 0%, #475569 100%); }
    .stat-card:hover .stat-icon { transform: scale(1.12) rotate(-4deg); }
    .stat-icon { transition: transform .3s ease; }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    .fade-up { animation: fadeUp .4s ease both; }
</style>
@endsection

@section('content')
@php
    $isFood     = $shopType === 'food_and_drink';
    $typeLabel  = $isFood ? 'Food & Drink' : 'Retail';
    $typeIcon   = $isFood ? 'restaurant' : 'storefront';
    $dayMap     = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];
    $todayName  = \Carbon\Carbon::now()->format('l');
    $todayHours = $businessHours->get($todayName);
    $nowTime    = \Carbon\Carbon::now()->format('H:i');
    $isOpen     = $todayHours
        && $nowTime >= $todayHours->open_hour
        && $nowTime <= $todayHours->close_hour;
    $shopLogoUrl = $shop->logo
        ? config('global.s3_path') . 'shop/' . $shop->logo
        : null;
@endphp

{{-- ═══════════════════════════════════════════════════════════
     HEADER
═══════════════════════════════════════════════════════════ --}}
<div class="mb-8 fade-up" style="animation-delay:.05s">
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div class="flex items-center gap-4">
            @if ($shopLogoUrl)
                <div class="w-14 h-14 rounded-2xl overflow-hidden border border-outline-variant/20 shadow-sm flex-shrink-0 bg-surface-container-low">
                    <img src="{{ $shopLogoUrl }}" alt="{{ $shop->name }}" class="w-full h-full object-cover"/>
                </div>
            @else
                <div class="w-14 h-14 rounded-2xl kinetic-gradient flex items-center justify-center flex-shrink-0 shadow-md">
                    <span class="material-symbols-outlined text-white text-2xl" style="font-variation-settings:'FILL' 1;">{{ $typeIcon }}</span>
                </div>
            @endif
            <div>
                <div class="flex items-center gap-2 mb-0.5">
                    <span class="text-xs font-bold uppercase tracking-widest text-primary">Merchant Central</span>
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold
                        {{ $isFood ? 'bg-tertiary-fixed text-on-tertiary-fixed' : 'bg-secondary-container/40 text-secondary' }}">
                        <span class="material-symbols-outlined text-xs" style="font-variation-settings:'FILL' 1;">{{ $typeIcon }}</span>
                        {{ $typeLabel }}
                    </span>
                </div>
                <h1 class="text-2xl md:text-3xl font-extrabold text-on-surface tracking-tight font-headline leading-none">
                    {{ $shop->name }}
                </h1>
                @if ($shop->short_description)
                    <p class="text-sm text-on-surface-variant mt-0.5">{{ $shop->short_description }}</p>
                @endif
            </div>
        </div>

        <div class="flex items-center gap-3 flex-wrap">
            {{-- Open / Closed badge --}}
            @if ($todayHours)
                <div class="flex items-center gap-2 px-4 py-2 rounded-full text-sm font-bold
                    {{ $isOpen ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' : 'bg-error-container text-error border border-error/20' }}">
                    <span class="w-2 h-2 rounded-full {{ $isOpen ? 'bg-emerald-500' : 'bg-error' }} animate-pulse"></span>
                    {{ $isOpen ? 'Open Now' : 'Closed' }}
                    <span class="font-normal opacity-70">· {{ $todayHours->open_hour }} – {{ $todayHours->close_hour }}</span>
                </div>
            @endif

            <a href="{{ $menuUrl }}" target="_blank"
               class="flex items-center gap-2 px-4 py-2 rounded-full bg-surface-container-lowest border border-outline-variant/30 text-sm font-semibold text-on-surface-variant hover:text-primary hover:border-primary/40 transition-all">
                <span class="material-symbols-outlined text-base">open_in_new</span>
                View Menu
            </a>

            <a href="{{ route('digitalmenu.products.create') }}"
               class="flex items-center gap-2 px-5 py-2 rounded-full kinetic-gradient text-white font-bold text-sm shadow-md hover:opacity-90 hover:scale-[1.02] transition-all">
                <span class="material-symbols-outlined text-base">add</span>
                Add Product
            </a>
        </div>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════
     STAT CARDS
═══════════════════════════════════════════════════════════ --}}
<div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-4 mb-8">

    {{-- Total Products --}}
    <div class="stat-card bg-surface-container-lowest rounded-2xl p-5 shadow-sm border border-outline-variant/10 fade-up" style="animation-delay:.1s">
        <div class="flex items-start justify-between mb-3">
            <div class="w-10 h-10 rounded-xl kinetic-gradient flex items-center justify-center shadow-md stat-icon">
                <span class="material-symbols-outlined text-white text-xl" style="font-variation-settings:'FILL' 1;">inventory_2</span>
            </div>
            <a href="{{ route('digitalmenu.products.index') }}" class="text-on-surface-variant/40 hover:text-primary transition-colors">
                <span class="material-symbols-outlined text-base">arrow_forward</span>
            </a>
        </div>
        <p class="text-3xl font-extrabold text-on-surface tracking-tight">{{ $totalProducts }}</p>
        <p class="text-xs font-semibold text-on-surface-variant mt-1 uppercase tracking-widest">Total Products</p>
    </div>

    {{-- Active Products --}}
    <div class="stat-card bg-surface-container-lowest rounded-2xl p-5 shadow-sm border border-outline-variant/10 fade-up" style="animation-delay:.15s">
        <div class="flex items-start justify-between mb-3">
            <div class="w-10 h-10 rounded-xl emerald-gradient flex items-center justify-center shadow-md stat-icon">
                <span class="material-symbols-outlined text-white text-xl" style="font-variation-settings:'FILL' 1;">check_circle</span>
            </div>
            <a href="{{ route('digitalmenu.products.index') }}" class="text-on-surface-variant/40 hover:text-primary transition-colors">
                <span class="material-symbols-outlined text-base">arrow_forward</span>
            </a>
        </div>
        <p class="text-3xl font-extrabold text-on-surface tracking-tight">{{ $activeProducts }}</p>
        <p class="text-xs font-semibold text-on-surface-variant mt-1 uppercase tracking-widest">Active</p>
    </div>

    {{-- Promotions --}}
    <div class="stat-card bg-surface-container-lowest rounded-2xl p-5 shadow-sm border border-outline-variant/10 fade-up" style="animation-delay:.2s">
        <div class="flex items-start justify-between mb-3">
            <div class="w-10 h-10 rounded-xl amber-gradient flex items-center justify-center shadow-md stat-icon">
                <span class="material-symbols-outlined text-white text-xl" style="font-variation-settings:'FILL' 1;">local_offer</span>
            </div>
        </div>
        <p class="text-3xl font-extrabold text-on-surface tracking-tight">{{ $promotionProducts }}</p>
        <p class="text-xs font-semibold text-on-surface-variant mt-1 uppercase tracking-widest">On Promotion</p>
    </div>

    {{-- New Arrivals --}}
    <div class="stat-card bg-surface-container-lowest rounded-2xl p-5 shadow-sm border border-outline-variant/10 fade-up" style="animation-delay:.25s">
        <div class="flex items-start justify-between mb-3">
            <div class="w-10 h-10 rounded-xl teal-gradient flex items-center justify-center shadow-md stat-icon">
                <span class="material-symbols-outlined text-white text-xl" style="font-variation-settings:'FILL' 1;">new_releases</span>
            </div>
        </div>
        <p class="text-3xl font-extrabold text-on-surface tracking-tight">{{ $newArrivals }}</p>
        <p class="text-xs font-semibold text-on-surface-variant mt-1 uppercase tracking-widest">New Arrivals</p>
    </div>

    {{-- Categories --}}
    <div class="stat-card bg-surface-container-lowest rounded-2xl p-5 shadow-sm border border-outline-variant/10 fade-up" style="animation-delay:.3s">
        <div class="flex items-start justify-between mb-3">
            <div class="w-10 h-10 rounded-xl slate-gradient flex items-center justify-center shadow-md stat-icon">
                <span class="material-symbols-outlined text-white text-xl" style="font-variation-settings:'FILL' 1;">category</span>
            </div>
            <a href="{{ route('digitalmenu.categories.index') }}" class="text-on-surface-variant/40 hover:text-primary transition-colors">
                <span class="material-symbols-outlined text-base">arrow_forward</span>
            </a>
        </div>
        <p class="text-3xl font-extrabold text-on-surface tracking-tight">{{ $totalCategories }}</p>
        <p class="text-xs font-semibold text-on-surface-variant mt-1 uppercase tracking-widest">Categories</p>
    </div>

</div>

{{-- ═══════════════════════════════════════════════════════════
     MAIN CONTENT: Recent Products + Sidebar
═══════════════════════════════════════════════════════════ --}}
<div class="grid grid-cols-1 xl:grid-cols-3 gap-6">

    {{-- ── Recent Products (2/3) ── --}}
    <div class="xl:col-span-2 space-y-4 fade-up" style="animation-delay:.35s">
        <div class="bg-surface-container-lowest rounded-2xl shadow-sm border border-outline-variant/10 overflow-hidden">
            <div class="flex items-center justify-between px-6 py-4 border-b border-outline-variant/10">
                <div class="flex items-center gap-2">
                    <span class="material-symbols-outlined text-primary" style="font-variation-settings:'FILL' 1;">inventory_2</span>
                    <h2 class="font-bold text-on-surface">Recent Products</h2>
                </div>
                <a href="{{ route('digitalmenu.products.index') }}"
                   class="text-xs font-bold text-primary hover:underline flex items-center gap-1">
                    View All
                    <span class="material-symbols-outlined text-sm">chevron_right</span>
                </a>
            </div>

            @if ($recentProducts->isEmpty())
                <div class="flex flex-col items-center justify-center py-16 text-center px-6">
                    <div class="w-16 h-16 rounded-2xl bg-surface-container flex items-center justify-center mb-4">
                        <span class="material-symbols-outlined text-on-surface-variant/40 text-3xl">inventory_2</span>
                    </div>
                    <p class="font-semibold text-on-surface-variant">No products yet</p>
                    <p class="text-sm text-on-surface-variant/60 mt-1 mb-4">Start building your digital menu.</p>
                    <a href="{{ route('digitalmenu.products.create') }}"
                       class="inline-flex items-center gap-2 px-5 py-2.5 rounded-full kinetic-gradient text-white font-bold text-sm shadow-md hover:opacity-90 transition-all">
                        <span class="material-symbols-outlined text-base">add</span>
                        Add First Product
                    </a>
                </div>
            @else
                <div class="divide-y divide-outline-variant/10">
                    @foreach ($recentProducts as $product)
                    @php
                        $categoryName = null;
                        
                        if (!empty($product->category)) {
                            // 1. Find by ID
                            $cat = $categories->first(function($key, $c) use ($product) {
                                // Check if $c is an object before accessing ->id
                                return is_object($c) && $c->id == $product->category;
                            });

                            // 2. If not found by ID, try finding by Name
                            if (!$cat) {
                                $cat = $categories->first(function($key, $c) use ($product) {
                                    return is_object($c) && $c->name == $product->category;
                                });
                            }

                            // 3. Final assignment
                            $categoryName = $cat ? $cat->name : $product->category;
                        }
                    @endphp

                    <div class="flex items-center gap-4 px-6 py-4 hover:bg-surface-container/50 transition-colors group">
                        {{-- Thumbnail --}}
                        <div class="w-12 h-12 rounded-xl overflow-hidden bg-surface-container flex-shrink-0 border border-outline-variant/10">
                            @if ($product->image)
                                <img src="{{ $product->picture_url }}" alt="{{ $product->name }}"
                                     class="w-full h-full object-cover"/>
                            @else
                                <div class="w-full h-full flex items-center justify-center">
                                    <span class="material-symbols-outlined text-on-surface-variant/30 text-xl">
                                        {{ $isFood ? 'lunch_dining' : 'shopping_bag' }}
                                    </span>
                                </div>
                            @endif
                        </div>

                        {{-- Name & meta --}}
                        <div class="flex-1 min-w-0">
                            <p class="font-semibold text-on-surface text-sm truncate group-hover:text-primary transition-colors">
                                {{ $product->name }}
                            </p>
                            <div class="flex items-center gap-2 mt-0.5 flex-wrap">
                                @if ($categoryName)
                                    <span class="inline-flex items-center gap-1 text-[10px] font-bold px-2 py-0.5 rounded-full bg-surface-container text-on-surface-variant uppercase tracking-wide">
                                        <span class="material-symbols-outlined text-[10px]">category</span>
                                        {{ $categoryName }}
                                    </span>
                                @endif
                                @if ($product->product_id)
                                    <span class="text-[10px] text-on-surface-variant/50 font-mono">{{ $product->product_id }}</span>
                                @endif
                            </div>
                        </div>

                        {{-- Price --}}
                        <div class="text-right flex-shrink-0">
                            <p class="font-bold text-on-surface text-sm">
                                ${{ number_format($product->unit_price, 2) }}
                            </p>
                        </div>

                        {{-- Status --}}
                        <div class="flex-shrink-0">
                            @if ($product->state == 1)
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-100">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                    Active
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold bg-surface-container text-on-surface-variant border border-outline-variant/20">
                                    <span class="w-1.5 h-1.5 rounded-full bg-on-surface-variant/40"></span>
                                    Inactive
                                </span>
                            @endif
                        </div>

                        {{-- Action --}}
                        <a href="{{ route('digitalmenu.products.edit', $product->id) }}"
                           class="opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0 w-8 h-8 rounded-lg bg-surface-container flex items-center justify-center hover:bg-primary hover:text-white text-on-surface-variant transition-all">
                            <span class="material-symbols-outlined text-base">edit</span>
                        </a>
                    </div>
                    @endforeach
                </div>
            @endif
        </div>

        {{-- ── Categories Overview ── --}}
        <div class="bg-surface-container-lowest rounded-2xl shadow-sm border border-outline-variant/10 overflow-hidden">
            <div class="flex items-center justify-between px-6 py-4 border-b border-outline-variant/10">
                <div class="flex items-center gap-2">
                    <span class="material-symbols-outlined text-on-surface-variant/60" style="font-variation-settings:'FILL' 1;">category</span>
                    <h2 class="font-bold text-on-surface">Categories</h2>
                </div>
                <a href="{{ route('digitalmenu.categories.create') }}"
                   class="text-xs font-bold text-primary hover:underline flex items-center gap-1">
                    <span class="material-symbols-outlined text-sm">add</span>
                    New
                </a>
            </div>

            @if ($categories->isEmpty())
                <div class="flex flex-col items-center justify-center py-12 text-center px-6">
                    <p class="text-sm text-on-surface-variant/60">No categories yet.</p>
                    <a href="{{ route('digitalmenu.categories.create') }}"
                       class="mt-3 text-sm font-bold text-primary hover:underline">Create one</a>
                </div>
            @else
                <div class="p-4 grid grid-cols-2 sm:grid-cols-3 gap-3">
                    @php $catIndex = 0; @endphp
                    @foreach ($categories->take(9) as $cat)
                    @php
                        $dotColors = ['bg-primary', 'bg-tertiary', 'bg-secondary', 'bg-amber-500', 'bg-emerald-600', 'bg-slate-500'];
                        $dotColor  = $dotColors[$catIndex % count($dotColors)];
                        $catIndex++;
                    @endphp
                    <a href="{{ route('digitalmenu.categories.index') }}"
                       class="flex items-center gap-3 p-3 rounded-xl bg-surface-container hover:bg-surface-container-high transition-colors group">
                        <div class="w-8 h-8 rounded-lg {{ $dotColor }} flex items-center justify-center flex-shrink-0 opacity-80 group-hover:opacity-100 transition-opacity">
                            <span class="material-symbols-outlined text-white text-sm" style="font-variation-settings:'FILL' 1;">{{ $isFood ? 'lunch_dining' : 'label' }}</span>
                        </div>
                        <div class="min-w-0">
                            <p class="text-sm font-semibold text-on-surface truncate group-hover:text-primary transition-colors">{{ $cat->name }}</p>
                            <p class="text-[10px] text-on-surface-variant/60">
                                {{ $cat->state == 1 ? 'Active' : 'Inactive' }}
                            </p>
                        </div>
                    </a>
                    @endforeach
                    @if ($categories->count() > 9)
                        <a href="{{ route('digitalmenu.categories.index') }}"
                           class="flex items-center justify-center gap-2 p-3 rounded-xl border-2 border-dashed border-outline-variant/30 text-on-surface-variant/60 hover:border-primary hover:text-primary transition-all text-xs font-bold">
                            +{{ $categories->count() - 9 }} more
                        </a>
                    @endif
                </div>
            @endif
        </div>
    </div>

    {{-- ── Sidebar (1/3) ── --}}
    <div class="space-y-4 fade-up" style="animation-delay:.4s">

        {{-- Business Hours --}}
        <div class="bg-surface-container-lowest rounded-2xl shadow-sm border border-outline-variant/10 overflow-hidden">
            <div class="px-6 py-4 border-b border-outline-variant/10 flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <span class="material-symbols-outlined text-tertiary" style="font-variation-settings:'FILL' 1;">schedule</span>
                    <h2 class="font-bold text-on-surface">Business Hours</h2>
                </div>
                <a href="{{ route('digitalmenu.setting.index') }}"
                   class="text-xs font-bold text-on-surface-variant/50 hover:text-primary transition-colors">
                    <span class="material-symbols-outlined text-base">edit</span>
                </a>
            </div>
            <div class="px-4 py-3 space-y-1">
                @foreach ($dayMap as $day)
                @php
                    $h     = $businessHours->get($day);
                    $isToday = $day === $todayName;
                    $isWknd  = in_array($day, ['Saturday', 'Sunday']);
                @endphp
                <div class="flex items-center justify-between px-3 py-2 rounded-xl text-sm
                    {{ $isToday ? 'bg-primary/8 ring-1 ring-primary/20' : ($isWknd ? 'bg-surface-container' : '') }}">
                    <div class="flex items-center gap-2">
                        @if ($isToday)
                            <span class="w-1.5 h-1.5 rounded-full {{ $isOpen ? 'bg-emerald-500' : 'bg-on-surface-variant/40' }}"></span>
                        @endif
                        <span class="font-{{ $isToday ? 'bold' : 'medium' }} text-{{ $isToday ? 'primary' : ($isWknd ? 'secondary' : 'on-surface') }} text-xs">
                            {{ substr($day, 0, 3) }}
                            @if ($isToday) <span class="text-[9px] font-bold uppercase tracking-widest opacity-70 ml-1">Today</span> @endif
                        </span>
                    </div>
                    <span class="text-xs {{ $isToday ? 'text-primary font-semibold' : 'text-on-surface-variant/70' }} font-mono tabular-nums">
                        @if ($h)
                            {{ $h->open_hour }} – {{ $h->close_hour }}
                        @else
                            <span class="text-on-surface-variant/40">—</span>
                        @endif
                    </span>
                </div>
                @endforeach
            </div>
        </div>

        {{-- Shop Info Card --}}
        <div class="bg-surface-container-lowest rounded-2xl shadow-sm border border-outline-variant/10 overflow-hidden">
            <div class="px-6 py-4 border-b border-outline-variant/10 flex items-center gap-2">
                <span class="material-symbols-outlined text-primary" style="font-variation-settings:'FILL' 1;">store</span>
                <h2 class="font-bold text-on-surface">Shop Info</h2>
            </div>
            <dl class="px-6 py-4 space-y-3">
                @if ($shop->business_contact)
                <div class="flex items-start gap-3">
                    <span class="material-symbols-outlined text-base text-on-surface-variant/50 mt-0.5">phone</span>
                    <div>
                        <dt class="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant/50 mb-0.5">Contact</dt>
                        <dd class="text-sm font-semibold text-on-surface">{{ $shop->business_contact }}</dd>
                    </div>
                </div>
                @endif
                @if ($shop->website)
                <div class="flex items-start gap-3">
                    <span class="material-symbols-outlined text-base text-on-surface-variant/50 mt-0.5">language</span>
                    <div>
                        <dt class="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant/50 mb-0.5">Website</dt>
                        <dd class="text-sm font-medium text-tertiary">
                            <a href="{{ $shop->website }}" target="_blank" class="hover:underline">{{ $shop->website }}</a>
                        </dd>
                    </div>
                </div>
                @endif
                <div class="flex items-start gap-3">
                    <span class="material-symbols-outlined text-base text-on-surface-variant/50 mt-0.5">qr_code_2</span>
                    <div class="min-w-0">
                        <dt class="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant/50 mb-0.5">Menu URL</dt>
                        <dd class="text-xs font-medium text-on-surface-variant break-all">
                            <a href="{{ $menuUrl }}" target="_blank" class="text-tertiary hover:underline">{{ $menuUrl }}</a>
                        </dd>
                    </div>
                </div>
            </dl>
        </div>

        {{-- Quick Actions --}}
        <div class="bg-surface-container-lowest rounded-2xl shadow-sm border border-outline-variant/10 overflow-hidden">
            <div class="px-6 py-4 border-b border-outline-variant/10 flex items-center gap-2">
                <span class="material-symbols-outlined text-on-surface-variant/60">bolt</span>
                <h2 class="font-bold text-on-surface">Quick Actions</h2>
            </div>
            <div class="p-4 grid grid-cols-2 gap-3">
                <a href="{{ route('digitalmenu.products.create') }}"
                   class="flex flex-col items-center gap-2 p-4 rounded-xl bg-primary/5 hover:bg-primary/10 border border-primary/15 transition-all group text-center">
                    <span class="material-symbols-outlined text-primary text-2xl group-hover:scale-110 transition-transform" style="font-variation-settings:'FILL' 1;">add_shopping_cart</span>
                    <span class="text-xs font-bold text-primary">Add Product</span>
                </a>
                <a href="{{ route('digitalmenu.categories.create') }}"
                   class="flex flex-col items-center gap-2 p-4 rounded-xl bg-surface-container hover:bg-surface-container-high border border-outline-variant/15 transition-all group text-center">
                    <span class="material-symbols-outlined text-on-surface-variant text-2xl group-hover:scale-110 transition-transform group-hover:text-on-surface" style="font-variation-settings:'FILL' 1;">create_new_folder</span>
                    <span class="text-xs font-bold text-on-surface-variant group-hover:text-on-surface">New Category</span>
                </a>
                <a href="{{ route('digitalmenu.qrcode') }}"
                   class="flex flex-col items-center gap-2 p-4 rounded-xl bg-tertiary-fixed/30 hover:bg-tertiary-fixed/50 border border-tertiary/15 transition-all group text-center">
                    <span class="material-symbols-outlined text-tertiary text-2xl group-hover:scale-110 transition-transform" style="font-variation-settings:'FILL' 1;">qr_code_2</span>
                    <span class="text-xs font-bold text-tertiary">QR Code</span>
                </a>
                <a href="{{ route('digitalmenu.setting.index') }}"
                   class="flex flex-col items-center gap-2 p-4 rounded-xl bg-surface-container hover:bg-surface-container-high border border-outline-variant/15 transition-all group text-center">
                    <span class="material-symbols-outlined text-on-surface-variant text-2xl group-hover:scale-110 transition-transform group-hover:text-on-surface" style="font-variation-settings:'FILL' 1;">settings</span>
                    <span class="text-xs font-bold text-on-surface-variant group-hover:text-on-surface">Settings</span>
                </a>
            </div>
        </div>

    </div>{{-- /sidebar --}}

</div>{{-- /main grid --}}

@endsection