@extends('layouts.admin')

@section('title', __('admin_auth.dashboard'))

@push('styles')
    .dashboard-introduction {
        margin-bottom: 24px;
    }

    .dashboard-introduction h1 {
        margin: 0 0 12px;
        color: #0756a3;
        font-size: 28px;
    }

    .dashboard-introduction p {
        margin: 7px 0;
        color: #667085;
        line-height: 1.7;
    }

    .dashboard-grid {
        display: grid;
        grid-template-columns: repeat(
            auto-fit,
            minmax(230px, 1fr)
        );
        gap: 18px;
    }

    .dashboard-card {
        display: flex;
        flex-direction: column;
        min-height: 190px;
        padding: 22px;
        border: 1px solid #dce5ef;
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 8px 28px rgba(19, 71, 139, 0.06);
    }

    .dashboard-card h2 {
        margin: 0 0 10px;
        color: #0756a3;
        font-size: 20px;
    }

    .dashboard-card p {
        flex-grow: 1;
        margin: 0 0 18px;
        color: #667085;
        line-height: 1.7;
    }

    .dashboard-card.disabled {
        opacity: 0.55;
    }

    .coming-soon {
        display: inline-block;
        padding: 8px 11px;
        border-radius: 7px;
        background: #edf0f3;
        color: #475467;
        font-size: 13px;
        font-weight: 700;
        text-align: center;
    }
@endpush

@section('content')
    <section class="card dashboard-introduction">
        <h1>
            {{ __('admin_auth.dashboard') }}
        </h1>

        <p>
            {{ __('admin_auth.welcome') }}
        </p>

        <p>
            <strong>
                {{ auth()->user()->full_name
                    ?? auth()->user()->username }}
            </strong>
        </p>
    </section>

    <section class="dashboard-grid">
        <article class="dashboard-card">
            <h2>
                {{ __('admin_navigation.products') }}
            </h2>

            <p>
                إضافة المنتجات وتعديلها ومتابعة
                الأسعار والمخزون والسيارات المتوافقة.
            </p>

            <a
                href="{{ route('admin.products.index') }}"
                class="button"
            >
                {{ __('admin_navigation.products') }}
            </a>
        </article>

        <article class="dashboard-card">
            <h2>
                {{ __('admin_customers.pending_accounts') }}
            </h2>

            <p>
                مراجعة طلبات تسجيل العملاء
                والموافقة عليها أو رفضها.
            </p>

            <a
                href="{{ route('admin.customers.index') }}"
                class="button"
            >
                {{ __('admin_customers.pending_accounts') }}
            </a>
        </article>

        <article class="dashboard-card disabled">
            <h2>
                {{ __('admin_navigation.prices') }}
            </h2>

            <p>
                إدارة الأسعار الأساسية والأسعار
                الخاصة بكل عميل.
            </p>

            <span class="coming-soon">
                سيتم تفعيله في المرحلة التالية
            </span>
        </article>

        <article class="dashboard-card disabled">
            <h2>
                {{ __('admin_navigation.quotes') }}
            </h2>

            <p>
                متابعة طلبات عروض الأسعار
                والرد على العملاء.
            </p>

            <span class="coming-soon">
                سيتم تفعيله لاحقًا
            </span>
        </article>

        <article class="dashboard-card disabled">
            <h2>
                {{ __('admin_navigation.imports') }}
            </h2>

            <p>
                استيراد المنتجات والمخزون
                والأسعار باستخدام ملف Excel.
            </p>

            <span class="coming-soon">
                سيتم تفعيله لاحقًا
            </span>
        </article>

        <article class="dashboard-card disabled">
            <h2>
                {{ __('admin_navigation.settings') }}
            </h2>

            <p>
                إعدادات الشركة والعملات
                والترجمة والواجهة.
            </p>

            <span class="coming-soon">
                سيتم تفعيله لاحقًا
            </span>
        </article>
    </section>
@endsection