@extends('vendor.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;
        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: 1.8rem;
        color: #ffffff;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        flex-shrink: 0;
    }

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

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

    .dashboard-count {
        font-size: 1.5rem;
        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('vendor.booking') }}">
            <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">Confirm Appointments</h4>
                    <span class="dashboard-count">{{ $booking_confirm_count }}</span>
                </div>
            </div>
        </a>

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

            <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">Cancelled Appointments</h4>
                    <span class="dashboard-count">{{ $booking_cancel_count }}</span>
                </div>
            </div>
        </a>

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


            <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">Completed Appointments</h4>
                    <span class="dashboard-count">{{ $booking_completed_count }}</span>
                </div>
            </div>
        </a>

        <a href="{{ route('vendor.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">Pending Appointments</h4>
                    <span class="dashboard-count">{{ $booking_pending_count }}</span>
                </div>
            </div>
        </a>

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


            <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">Registered Services</h4>
                    <span class="dashboard-count">{{ $service_count }}</span>
                </div>
            </div>
        </a>

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


            <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">Registered Clients</h4>
                    <span class="dashboard-count">{{ $client_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