@extends(EcommerceHelper::viewPath('customers.master'))

@section('title', __('Overview'))

@section('content')
    @php
        $customer = auth('customer')->user();
        EcommerceHelper::registerThemeAssets();
        $totalOrders    = $customer->orders()->count();
        $totalAddresses = $customer->addresses()->count();
    @endphp

    {{-- Hidden avatar upload (still wired to sidebar avatar via JS) --}}
    <input type="file" id="customer-avatar" name="avatar" class="d-none"
        data-bb-toggle="change-customer-avatar"
        data-url="{{ route('customer.avatar') }}" />

    {{-- Stat cards --}}
    <div class="row g-3 mb-4">
        <div class="col-6 col-sm-4">
            <a href="{{ route('customer.orders') }}" class="text-decoration-none">
                <div class="card h-100 text-center border-0 hbl-stat-card">
                    <div class="card-body py-3 px-2">
                        <div class="mb-2" style="color: var(--color-1st, #103178);">
                            <x-core::icon name="ti ti-shopping-bag" style="width:30px;height:30px;" />
                        </div>
                        <div class="fw-bold fs-4 lh-1 mb-1" style="color:#111;">{{ $totalOrders }}</div>
                        <div class="text-muted" style="font-size:.78rem;">{{ __('Total Orders') }}</div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-6 col-sm-4">
            <a href="{{ route('customer.address') }}" class="text-decoration-none">
                <div class="card h-100 text-center border-0 hbl-stat-card">
                    <div class="card-body py-3 px-2">
                        <div class="mb-2" style="color: var(--color-1st, #103178);">
                            <x-core::icon name="ti ti-map-pin" style="width:30px;height:30px;" />
                        </div>
                        <div class="fw-bold fs-4 lh-1 mb-1" style="color:#111;">{{ $totalAddresses }}</div>
                        <div class="text-muted" style="font-size:.78rem;">{{ __('Saved Addresses') }}</div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-12 col-sm-4">
            <a href="{{ route('customer.edit-account') }}" class="text-decoration-none">
                <div class="card h-100 text-center border-0 hbl-stat-card">
                    <div class="card-body py-3 px-2">
                        <div class="mb-2" style="color: var(--color-1st, #103178);">
                            <x-core::icon name="ti ti-user-circle" style="width:30px;height:30px;" />
                        </div>
                        <div class="fw-bold lh-1 mb-1" style="color:#111; font-size:1rem;">{{ $customer->created_at->format('M Y') }}</div>
                        <div class="text-muted" style="font-size:.78rem;">{{ __('Member Since') }}</div>
                    </div>
                </div>
            </a>
        </div>
    </div>

    {{-- Info card --}}
    <div class="card border-0 hbl-info-card mb-3">
        <div class="card-body">
            <p class="mb-0 text-muted" style="font-size:.9rem; line-height:1.7;">
                {!! BaseHelper::clean(
                    __(
                        'From your account dashboard you can view your <a class="text-primary" href=":order">recent orders</a>, manage your <a class="text-primary" href=":addresses">shipping and billing addresses</a>, and <a class="text-primary" href=":edit_account">edit your password and account details</a>.',
                        [
                            'order'        => route('customer.orders'),
                            'addresses'    => route('customer.address'),
                            'edit_account' => route('customer.edit-account'),
                        ],
                    ),
                ) !!}
            </p>
        </div>
    </div>

    @if (! $totalOrders)
        <div class="card border-0 hbl-empty-card">
            <div class="card-body d-flex align-items-center justify-content-between gap-3 flex-wrap">
                <div class="d-flex align-items-center gap-2 text-muted" style="font-size:.9rem;">
                    <x-core::icon name="ti ti-shopping-cart" style="width:18px;height:18px;" />
                    <span>{{ __("You haven't placed any orders yet.") }}</span>
                </div>
                <a href="{{ route('public.products') }}"
                   style="background: var(--color-1st, #103178); color:#fff; border-radius:6px; padding:6px 18px; font-size:.82rem; white-space:nowrap; text-decoration:none; display:inline-block;">
                    {{ __('Browse Products') }}
                </a>
            </div>
        </div>
    @endif

    <style>
        .hbl-stat-card {
            background: #f8f9ff;
            transition: transform .15s, box-shadow .15s;
            border-radius: 10px !important;
        }
        .hbl-stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 18px rgba(16,49,120,.10) !important;
        }
        .hbl-info-card {
            background: #f8f9fa;
            border-radius: 10px !important;
        }
        .hbl-empty-card {
            background: #f0f6ff;
            border-radius: 10px !important;
        }
    </style>
@endsection