@extends('layouts.app')

@section('content')

{{-- Modern Header Section with Glassmorphism --}}
<div class="dashboard-glass-chart border-b-0 mb-4 sm:mb-6">
    <div class="w-full px-4 py-4 sm:px-6 sm:py-6">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
                <h1 class="text-2xl sm:text-3xl font-semibold tracking-tight text-foreground">@lang('menu.dashboard')</h1>
                <p class="mt-1 text-xs sm:text-sm text-muted-foreground">
                    {{ now()->timezone(timezone())->translatedFormat('l, d M, Y') }}
                </p>
            </div>
            <div class="flex items-center gap-2 px-3 py-2 rounded-lg backdrop-blur-sm bg-white/50 dark:bg-gray-800/50 border border-white/20 dark:border-white/10 w-fit transition-all hover:bg-white/70 dark:hover:bg-gray-800/70">
                <svg class="w-4 h-4 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="text-sm font-medium text-foreground">
                    {{ now()->timezone(timezone())->format('h:i A') }}
                </span>
            </div>
        </div>
    </div>
</div>

<x-banner />

{{-- Main Dashboard Content --}}
<div class="w-full px-4 py-4 sm:px-6 sm:py-6">
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-4 sm:gap-6">
        
        {{-- Main Content Area --}}
        <div class="xl:col-span-2 space-y-4 sm:space-y-6">
            {{-- Period Filter Header --}}
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <div>
                    <h2 class="text-xl sm:text-2xl font-semibold tracking-tight text-foreground">
                        @switch(request()->cookie('dashboard_order_filter_period', 'today'))
                            @case('today')
                                @lang('modules.dashboard.todayStats')
                                @break
                            @case('yesterday')
                                @lang('app.yesterday') @lang('modules.dashboard.earnings')
                                @break
                            @case('last7days')
                                @lang('app.last7Days') @lang('modules.dashboard.earnings')
                                @break
                            @case('last30days')
                                @lang('app.last30Days') @lang('modules.dashboard.earnings')
                                @break
                            @case('alltime')
                                @lang('app.allTime') @lang('modules.dashboard.earnings')
                                @break
                            @default
                                @lang('modules.dashboard.todayStats')
                        @endswitch
                    </h2>
                </div>
            </div>
            
            {{-- Filter Pills --}}
            @if (user_can('Show Order'))
            <div class="flex flex-wrap gap-2 overflow-x-auto pb-2 -mx-1 px-1">
                @livewire('dashboard.order-filter-pills')
            </div>
            @endif

            {{-- Stats Grid --}}
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">

            @if (user_can('Show Order'))
            @livewire('dashboard.todayOrderCount')
            @endif

            @if (user_can('Show Reports'))
            @livewire('dashboard.todayEarnings')
            @endif

            @if (user_can('Show Customer'))
            @livewire('dashboard.todayCustomerCount')
            @endif

            @if (user_can('Show Reports'))
            @livewire('dashboard.averageDailyEarning')
            @endif

            </div>

            {{-- Charts Section --}}
            @if (user_can('Show Reports'))
            <div class="space-y-4 sm:space-y-6">
                <div class="dashboard-glass-chart rounded-xl overflow-hidden">
                    @livewire('dashboard.weeklySalesChart')
                </div>
            </div>
            @endif

            {{-- Additional Reports --}}
            @if (user_can('Show Reports'))
            <div class="grid grid-cols-1 gap-4 sm:gap-6">
                <div class="dashboard-glass-chart rounded-xl">
                    @livewire('dashboard.todayPaymentMethodEarnings')
                </div>
                <div class="dashboard-glass-chart rounded-xl">
                    @livewire('dashboard.today-menu-item-earnings')
                </div>
                <div class="dashboard-glass-chart rounded-xl">
                    @livewire('dashboard.today-table-earnings')
                </div>
            </div>
            @endif

        </div>

        {{-- Sidebar --}}
        <div class="xl:col-span-1 space-y-4 sm:space-y-6">
            @if (user_can('Show Order'))
            <div class="dashboard-glass-chart rounded-xl overflow-hidden">
                @livewire('dashboard.todayOrderList')
            </div>
            @endif
        </div>
    </div>
</div>

{{-- Add Custom Styles for shadcn-like design --}}
@push('styles')
<style>
    :root {
        --border: 214 217 220;
        --input: 214 217 220;
        --ring: {{ restaurant()->theme_rgb ?? '59 130 246' }};
        --background: 255 255 255;
        --foreground: 15 23 42;
        --primary: {{ restaurant()->theme_rgb ?? '59 130 246' }};
        --primary-foreground: 255 255 255;
        --secondary: 241 245 249;
        --secondary-foreground: 15 23 42;
        --muted: 248 250 252;
        --muted-foreground: 100 116 139;
        --accent: 241 245 249;
        --accent-foreground: 15 23 42;
        --destructive: 239 68 68;
        --destructive-foreground: 255 255 255;
        --card: 255 255 255;
        --card-foreground: 15 23 42;
        --popover: 255 255 255;
        --popover-foreground: 15 23 42;
        --radius: 0.5rem;
    }
    
    .dark {
        --background: 15 23 42;
        --foreground: 248 250 252;
        --card: 30 41 59;
        --card-foreground: 248 250 252;
        --popover: 30 41 59;
        --popover-foreground: 248 250 252;
        --primary: {{ restaurant()->theme_rgb ?? '96 165 250' }};
        --primary-foreground: 15 23 42;
        --secondary: 51 65 85;
        --secondary-foreground: 248 250 252;
        --muted: 51 65 85;
        --muted-foreground: 148 163 184;
        --accent: 51 65 85;
        --accent-foreground: 248 250 252;
        --destructive: 239 68 68;
        --destructive-foreground: 248 250 252;
        --border: 51 65 85;
        --input: 51 65 85;
        --ring: {{ restaurant()->theme_rgb ?? '96 165 250' }};
    }
    
    .bg-card {
        background-color: rgb(var(--card));
    }
    
    .text-foreground {
        color: rgb(var(--foreground));
    }
    
    .text-muted-foreground {
        color: rgb(var(--muted-foreground));
    }
    
    .bg-muted {
        background-color: rgb(var(--muted));
    }
    
    .bg-muted\/50 {
        background-color: rgb(var(--muted) / 0.5);
    }
    
    .border {
        border-color: rgb(var(--border));
    }
    
    .shadow-sm {
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    }
    
    .bg-background {
        background-color: rgb(var(--background));
    }
    
    
    .tracking-tight {
        letter-spacing: -0.025em;
    }
    
    .bg-background\/50 {
        background-color: rgb(var(--background) / 0.5);
    }
</style>
@endpush

@endsection