@extends('admin.layout.master')
@section('content')
@section('dashboard', 'active')
@section('title', 'Dashboard')

<style>
    .dashboard-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }

    .dashboard-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #ffffff;
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 40px;
        transition: 0.3s ease-in-out;
    }

    .dashboard-card:hover {
        transform: translateY(-5px);
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
    }

    .icon-container {
        font-size: 2.5rem;
        color: #ffffff;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .dashboard-content {
        flex-grow: 1;
        padding-left: 15px;
    }

    .dashboard-title {
        font-size: 1.2rem;
        font-weight: 600;
        color: #555;
        margin-bottom: 5px;
    }

    .dashboard-count {
        font-size: 2rem;
        font-weight: bold;
        color: #333;
    }

    .bg-green {
        background: #00c48c;
    }

    .bg-blue {
        background: #0084f4;
    }

    .bg-purple {
        background: #6c5ce7;
    }

    .bg-red {
        background: #ff4757;
    }

    .bg-orange {
        background: #ffa502;
    }
</style>

<div class="container-xxl flex-grow-1 container-p-y">
    <div class="dashboard-container">
        <a href="{{ route('admin.vendor') }}">
            <div class="dashboard-card">
                <div class="icon-container bg-green">
                    <i class="fas fa-user-tie"></i>
                </div>
                <div class="dashboard-content">
                    <h4 class="dashboard-title">Vendors</h4>
                    <span class="dashboard-count">{{ $vendor_count }}</span>
                </div>
            </div>
        </a>

        <a href="{{ route('admin.business') }}">

            <div class="dashboard-card">
                <div class="icon-container bg-blue">
                    <i class="fas fa-building"></i>
                </div>
                <div class="dashboard-content">
                    <h4 class="dashboard-title">Business</h4>
                    <span class="dashboard-count">{{ $business_count }}</span>
                </div>
            </div>
        </a>

        <a href="{{ route('admin.category') }}">

            <div class="dashboard-card">
                <div class="icon-container bg-purple">
                    <i class="fas fa-th"></i>
                </div>
                <div class="dashboard-content">
                    <h4 class="dashboard-title">Category</h4>
                    <span class="dashboard-count">{{ $category_count }}</span>
                </div>
            </div>
        </a>

        <a href="{{ route('admin.client') }}">


            <div class="dashboard-card">
                <div class="icon-container bg-red">
                    <i class="fas fa-image"></i>
                </div>
                <div class="dashboard-content">
                    <h4 class="dashboard-title">Clients</h4>
                    <span class="dashboard-count">{{ $user_count }}</span>
                </div>
            </div>
        </a>

        <a href="{{ route('admin.service') }}">


            <div class="dashboard-card">
                <div class="icon-container bg-orange">
                    <i class="fas fa-concierge-bell"></i>
                </div>
                <div class="dashboard-content">
                    <h4 class="dashboard-title">Services</h4>
                    <span class="dashboard-count">{{ $service_count }}</span>
                </div>
            </div>
        </a>

        <a href="{{ route('admin.booking') }}">


            <div class="dashboard-card">
                <div class="icon-container bg-orange">
                    <i class="fas fa-calendar-check"></i>
                </div>
                <div class="dashboard-content">
                    <h4 class="dashboard-title">Bookings</h4>
                    <span class="dashboard-count">{{ $booking_count }}</span>
                </div>
            </div>
        </a>
    </div>

    <div class="mt-5">
        <canvas id="myChart"></canvas>
    </div>
</div>

@endsection

@push('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/js/all.min.js"></script>
@endpush