@extends('Admin.layout')

@section('content')
    <style>
        /* =====================================================
               PREMIUM DASHBOARD STAT CARDS
            ===================================================== */

        .dashboard-stat-card {
            position: relative;
            overflow: hidden;
            background: #ffffff;
            border: 1px solid #e9e9e9 !important;
            border-radius: 26px !important;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
        }

        /* Orange curved top line */
        .dashboard-stat-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 20px;
            right: 20px;
            height: 4px;
            background: #ff6415;
            border-radius: 0 0 12px 12px;
        }

        .dashboard-stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 14px 35px rgba(0, 0, 0, 0.10);
        }

        .dashboard-stat-card .card-body {
            padding: 28px;
        }

        /* Big curved decorative shape */
        .dashboard-stat-card::after {
            content: "";
            position: absolute;
            width: 150px;
            height: 150px;
            right: -70px;
            bottom: -75px;
            border-radius: 50%;
            background: rgba(255, 100, 21, 0.06);
            pointer-events: none;
        }


        /* =====================================================
               ICON
            ===================================================== */

        .dashboard-stat-card .avatar-initial {
            width: 52px;
            height: 52px;
            border-radius: 17px !important;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
        }


        /* =====================================================
               NUMBER
            ===================================================== */

        .dashboard-stat-card .card-title {
            font-size: 32px;
            font-weight: 700;
            letter-spacing: -0.5px;
        }


        /* =====================================================
               LABEL
            ===================================================== */

        .dashboard-stat-card .fw-semibold {
            font-size: 14px;
            letter-spacing: 0.2px;
        }


        /* =====================================================
               BUTTON
            ===================================================== */

        .dashboard-stat-card .btn {
            border-radius: 12px;
            padding: 7px 13px;
            font-size: 12px;
            font-weight: 600;
        }


        /* =====================================================
               TOP ACCENTS
            ===================================================== */

        .products-card::before {
            background: #ff6415;
        }

        .customers-card::before {
            background: #28c76f;
        }

        .reviews-card::before {
            background: #ff9f43;
        }

        .enquiries-card::before {
            background: #ea5455;
        }


        /* =====================================================
               TABLE CORNERS ONLY
            ===================================================== */

        .dashboard-table-card {
            border-radius: 26px !important;
            overflow: hidden;
        }

        .dashboard-table-card .table {
            border-radius: 26px;
            overflow: hidden;
        }


        /* =====================================================
               DARK THEME
               Bootstrap 5: data-bs-theme="dark"
            ===================================================== */

        [data-bs-theme="dark"] .dashboard-stat-card {

            background: #1a2029 !important;

            border-color: #2b3442 !important;

            box-shadow:
                0 8px 25px rgba(0, 0, 0, 0.25);
        }

        [data-bs-theme="dark"] .dashboard-stat-card:hover {

            box-shadow:
                0 14px 35px rgba(0, 0, 0, 0.40);
        }

        /* Dark card text */

        [data-bs-theme="dark"] .dashboard-stat-card .card-title {

            color: #f5f5f5;
        }

        [data-bs-theme="dark"] .dashboard-stat-card .fw-semibold {

            color: #aeb6c2 !important;
        }

        /* Dark decorative circle */

        [data-bs-theme="dark"] .dashboard-stat-card::after {

            background: rgba(255, 100, 21, 0.10);
        }


        /* =====================================================
               DARK TABLE
               Only affects rounded table container
            ===================================================== */

        [data-bs-theme="dark"] .dashboard-table-card {

            background: #1a2029 !important;

            border-color: #2b3442 !important;
        }


        /* =====================================================
               DARK THEME - TABLE CORNERS
            ===================================================== */

        [data-bs-theme="dark"] .dashboard-table-card .table {

            background: #1a2029 !important;
        }


        /* =====================================================
               OPTIONAL: COMMON TABLER DARK THEME
               If your layout uses .dark instead
            ===================================================== */

        .dark .dashboard-stat-card,
        .dark-mode .dashboard-stat-card {

            background: #1a2029 !important;

            border-color: #2b3442 !important;

            box-shadow:
                0 8px 25px rgba(0, 0, 0, 0.25);
        }

        .dark .dashboard-stat-card .card-title,
        .dark-mode .dashboard-stat-card .card-title {

            color: #f5f5f5;
        }

        .dark .dashboard-stat-card .fw-semibold,
        .dark-mode .dashboard-stat-card .fw-semibold {

            color: #aeb6c2 !important;
        }

        .dark .dashboard-table-card,
        .dark-mode .dashboard-table-card {

            background: #1a2029 !important;

            border-color: #2b3442 !important;
        }


        /* =====================================================
               MOBILE
            ===================================================== */

        @media (max-width: 576px) {

            .dashboard-stat-card {
                border-radius: 22px !important;
            }

            .dashboard-stat-card .card-body {
                padding: 22px;
            }

            .dashboard-stat-card .card-title {
                font-size: 28px;
            }
        }
    </style>


    <div class="container-xxl flex-grow-1 container-p-y">

        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4">

            <div>

                <h4 class="fw-bold mb-1">
                    Dashboard
                </h4>

            </div>

            <div class="d-flex align-items-center gap-2">

                <span class="badge bg-label-primary px-3 py-2">

                    <i class="menu-icon icon-base ti tabler-calendar"></i>

                    {{ now()->format('d M Y') }}

                </span>

            </div>

        </div>

        <div class="row g-4 mb-4">


            {{-- PRODUCTS --}}

            <div class="col-sm-6 col-xl-3">

                <div class="card h-100 dashboard-stat-card products-card">

                    <div class="card-body">

                        <div class="d-flex justify-content-between align-items-start">

                            <div>

                                <span class="fw-semibold text-muted d-block mb-2">
                                    Total Products
                                </span>

                                <h3 class="card-title mb-2">

                                    {{ $productCount }}

                                </h3>

                                <span class="text-success small">

                                    <i class="menu-icon icon-base ti tabler-package me-1"></i>

                                    Products

                                </span>

                            </div>


                            <div class="avatar">

                                <span class="avatar-initial rounded bg-label-primary">

                                    <i class="menu-icon icon-base ti tabler-speakerphone"></i>

                                </span>

                            </div>

                        </div>


                        <div class="mt-3">

                            <a href="{{ route('product') }}" class="btn btn-sm btn-outline-primary">

                                Manage Products

                                <i class="bx bx-right-arrow-alt ms-1"></i>

                            </a>

                        </div>

                    </div>

                </div>

            </div>



            {{-- CUSTOMERS --}}

            <div class="col-sm-6 col-xl-3">

                <div class="card h-100 dashboard-stat-card customers-card">

                    <div class="card-body">

                        <div class="d-flex justify-content-between align-items-start">

                            <div>

                                <span class="fw-semibold text-muted d-block mb-2">
                                    Total Customers
                                </span>

                                <h3 class="card-title mb-2">

                                    {{ $customerCount }}

                                </h3>

                                <span class="text-success small">

                                    <i class="menu-icon icon-base ti tabler-user-check me-1"></i>

                                    Customers

                                </span>

                            </div>


                            <div class="avatar">

                                <span class="avatar-initial rounded bg-label-success">

                                    <i class="menu-icon icon-base ti tabler-user fs-3"></i>

                                </span>

                            </div>

                        </div>


                        <div class="mt-3">

                            <a href="{{ route('customer') }}" class="btn btn-sm btn-outline-success">

                                Manage Customers

                                <i class="bx bx-right-arrow-alt ms-1"></i>

                            </a>

                        </div>

                    </div>

                </div>

            </div>

            {{-- REVIEWS --}}
            <div class="col-sm-6 col-xl-3">

                <div class="card h-100 dashboard-stat-card reviews-card">

                    <div class="card-body">

                        <div class="d-flex justify-content-between align-items-start">

                            <div>

                                <span class="fw-semibold text-muted d-block mb-2">
                                    Reviews
                                </span>

                                <h3 class="card-title mb-2">
                                    {{ $reviewCount }}
                                </h3>

                                <span class="text-warning small">

                                    <i class="menu-icon icon-base ti tabler-star me-1"></i>

                                    {{ $averageRating }} Average Rating

                                </span>

                            </div>

                            <div class="avatar">

                                <span class="avatar-initial rounded bg-label-warning">

                                    <i class="menu-icon icon-base ti tabler-star fs-3"></i>

                                </span>

                            </div>

                        </div>

                        <div class="mt-3">

                            <a href="{{ route('reviews') }}" class="btn btn-sm btn-outline-warning">

                                Manage Reviews

                                <i class="bx bx-right-arrow-alt ms-1"></i>

                            </a>

                        </div>

                    </div>

                </div>

            </div>

            {{-- ENQUIRIES --}}
            <div class="col-sm-6 col-xl-3">

                <div class="card h-100 dashboard-stat-card enquiries-card">

                    <div class="card-body">

                        <div class="d-flex justify-content-between align-items-start">

                            <div>

                                <span class="fw-semibold text-muted d-block mb-2">
                                    Enquiries
                                </span>

                                <h3 class="card-title mb-2">
                                    {{ $enquiryCount }}
                                </h3>

                                <span class="text-danger small">

                                    <i class="menu-icon icon-base ti tabler-message me-1"></i>

                                    {{ $pendingEnquiryCount }} Pending Enquiries

                                </span>

                            </div>

                            <div class="avatar">

                                <span class="avatar-initial rounded bg-label-danger">

                                    <i class="menu-icon icon-base ti tabler-message fs-3"></i>

                                </span>

                            </div>

                        </div>

                        <div class="mt-3">

                            <a href="{{ route('enquiries') }}" class="btn btn-sm btn-outline-danger">

                                Manage Enquiries

                                <i class="bx bx-right-arrow-alt ms-1"></i>

                            </a>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        {{--       RECENT ENQUIRIES --}}
        <div class="row g-4">

            <div class="col-md-8">

                <div class="card dashboard-table-card">

                    <div class="card-header">

                        <div class="d-flex justify-content-between align-items-center">

                            <h5 class="mb-0 fw-bold">
                                Recent Enquiries
                            </h5>

                            <span class="badge bg-label-primary">
                                {{ $recentEnquiries->count() }} Recent
                            </span>

                        </div>

                    </div>


                    <div class="table-responsive">

                        <table class="table table-hover">

                            <thead>

                                <tr>

                                    <th>Name</th>

                                    <th>Message</th>

                                    <th>Status</th>

                                </tr>

                            </thead>

                            <tbody>

                                @forelse ($recentEnquiries as $enquiry)
                                    <tr>

                                        <td>
                                            {{ $enquiry->name }}
                                        </td>

                                        <td>
                                            {{ \Illuminate\Support\Str::limit($enquiry->message, 35) }}
                                        </td>

                                        <td>

                                            @if ($enquiry->status === 'Pending')
                                                <span class="badge bg-label-warning">
                                                    Pending
                                                </span>
                                            @elseif ($enquiry->status === 'In Progress')
                                                <span class="badge bg-label-primary">
                                                    In Progress
                                                </span>
                                            @elseif ($enquiry->status === 'Resolved')
                                                <span class="badge bg-label-success">
                                                    Resolved
                                                </span>
                                            @elseif ($enquiry->status === 'Closed')
                                                <span class="badge bg-label-secondary">
                                                    Closed
                                                </span>
                                            @else
                                                <span class="badge bg-label-secondary">
                                                    {{ $enquiry->status }}
                                                </span>
                                            @endif

                                        </td>

                                    </tr>

                                @empty

                                    <tr>

                                        <td colspan="3" class="text-center text-muted py-4">

                                            No enquiries available.

                                        </td>

                                    </tr>
                                @endforelse

                            </tbody>

                        </table>

                    </div>


                    <div class="card-footer text-center">

                        <a href="{{ route('enquiries') }}" class="btn btn-sm btn-outline-primary">

                            View All Enquiries

                            <i class="bx bx-right-arrow-alt ms-1"></i>

                        </a>

                    </div>

                </div>

            </div>


            {{-- POPULAR PRODUCTS PLACEHOLDER --}}
            <div class="col-md-4">

                <div class="card dashboard-table-card">

                    <div class="card-header">

                        <div class="d-flex justify-content-between align-items-center">

                            <h5 class="mb-0 fw-bold">
                                Latest Products
                            </h5>

                            <span class="badge bg-label-primary">
                                Latest {{ $latestProducts->count() }}
                            </span>

                        </div>

                    </div>


                    <div class="card-body">

                        @forelse ($latestProducts as $product)
                            <div class="d-flex align-items-center mb-4">

                                <div class="avatar me-3">

                                    <span class="avatar-initial rounded bg-label-primary">

                                        <i class="menu-icon icon-base ti tabler-speakerphone fs-4"></i>

                                    </span>

                                </div>

                                <div>

                                    <h6 class="mb-1">
                                        {{ $product->name }}
                                    </h6>

                                    <small class="text-muted">

                                        Quantity:
                                        {{ $product->quantity }}

                                    </small>

                                </div>

                                <div class="ms-auto">

                                    @if ($product->status === 'Active')
                                        <span class="badge bg-label-success">
                                            Active
                                        </span>
                                    @else
                                        <span class="badge bg-label-secondary">
                                            Inactive
                                        </span>
                                    @endif

                                </div>

                            </div>

                        @empty

                            <div class="text-center text-muted py-4">

                                No products available.

                            </div>
                        @endforelse

                    </div>


                    <div class="card-footer text-center">

                        <a href="{{ route('product') }}" class="btn btn-sm btn-outline-primary">

                            Manage Products

                            <i class="bx bx-right-arrow-alt ms-1"></i>

                        </a>

                    </div>

                </div>

            </div>

        </div>


    </div>
@endsection