@extends('admin.layout.master')
@section('content')
<style>
    .card-custom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px;
        border-radius: 10px;
        background: #f8fbff;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 15px;
    }

    .card-custom h2 {
        color: #ff6600;
        font-size: 24px;
        font-weight: bold;
    }

    .card-custom h5 {
        color: #444;
        font-size: 18px;
        font-weight: 600;
    }

    .icon-container {
        width: 50px;
        height: 50px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
    }

    .icon-container i {
        font-size: 40px;
    }

    .chart-container {
        width: 80px;
        height: 70px;
    }
</style>

<div class="content-wrapper">
    <div class="content">
        <div class="row mb-4">
            <div class="col-xl-4 col-sm-6">
                <a href="{{ route('userdetails.index') }}" style="text-decoration: none; color: inherit;">
                    <div class="card-custom">
                        <div class="icon-container">
                            <i class="mdi mdi-account"></i>
                        </div>
                        <div>
                            <h2>{{ $totalUsers }}</h2>
                            <h5>Total User</h5>
                        </div>
                        <div class="chart-container">
                            <div id="chart-1"></div>
                        </div>
                    </div>
            </div>

            <div class="col-xl-4 col-sm-6">
                <a href="{{ route('userdetails.index') }}" style="text-decoration: none; color: inherit;">
                    <div class="card-custom">
                        <div class="icon-container">
                            <i class="mdi mdi-account"></i>
                        </div>
                        <div>
                            <h2>{{ $totalUsers }}</h2>
                            <h5>Total Active User</h5>
                        </div>
                        <div class="chart-container">
                            <div id="chart-2"></div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-xl-4 col-sm-6">
                <div class="card-custom">
                    <div class="icon-container">
                        <i class="mdi mdi-account"></i>
                    </div>
                    <div>
                        <h2>0</h2>
                        <h5>Total Inactive User</h5>
                    </div>
                    <div class="chart-container">
                        <div id="chart-3"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-xl-4 col-sm-6">
                <a href="{{ route('vendor.index') }}" style="text-decoration: none; color: inherit;">
                    <div class="card-custom">
                        <div class="icon-container">
                            <i class="mdi mdi-account"></i>
                        </div>
                        <div>
                            <h2>{{ $totalVendors }}</h2>
                            <h5>Total Vendor</h5>
                        </div>
                        <div class="chart-container">
                            <div id="chart-1"></div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-xl-4 col-sm-6">
                <a href="{{ route('vendor.index') }}" style="text-decoration: none; color: inherit;">
                    <div class="card-custom">
                        <div class="icon-container">
                            <i class="mdi mdi-account"></i>
                        </div>
                        <div>
                            <h2>{{ $totalVendors }}</h2>
                            <h5>Total Active Vendor</h5>
                        </div>
                        <div class="chart-container">
                            <div id="chart-2"></div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-xl-4 col-sm-6">
                <div class="card-custom">
                    <div class="icon-container">
                        <i class="mdi mdi-account"></i>
                    </div>
                    <div>
                        <h2>0</h2>
                        <h5>Total Inactive Vendor</h5>
                    </div>
                    <div class="chart-container">
                        <div id="chart-3"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-xl-4 col-sm-6">
                <a href="{{ route('services.index') }}" style="text-decoration: none; color: inherit;">
                    <div class="card-custom">
                        <div class="icon-container">
                            <i class="mdi mdi-cogs"></i>
                        </div>
                        <div>
                            <h2>{{ $totalServices }}</h2>
                            <h5>Total Services</h5>
                        </div>
                        <div class="chart-container">
                            <div id="chart-1"></div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-xl-4 col-sm-6">
                <a href="{{ route('subservices.index') }}" style="text-decoration: none; color: inherit;">
                    <div class="card-custom">
                        <div class="icon-container">
                            <i class="mdi mdi-cogs"></i>
                        </div>
                        <div>
                            <h2>{{ $totalSubservices }}</h2>
                            <h5>Total Subservices</h5>
                        </div>
                        <div class="chart-container">
                            <div id="chart-2"></div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-xl-4 col-sm-6">
                <a href="{{ route('cities.index') }}" style="text-decoration: none; color: inherit;">
                    <div class="card-custom">
                        <div class="icon-container">
                            <i class="mdi mdi-city"></i>
                        </div>
                        <div>
                            <h2>{{ $totalAvailableCities }}</h2>
                            <h5>Total Service Available City</h5>
                        </div>
                        <div class="chart-container">
                            <div id="chart-3"></div>
                        </div>
                    </div>
            </div>
            </a>
        </div>

        <div class="row mb-4">
            <div class="col-xl-4 col-sm-6">
                <a href="{{ route('bookings.index') }}" style="text-decoration: none; color: inherit;">
                    <div class="card-custom">
                        <div class="icon-container">
                            <i class="mdi mdi-calendar-clock"></i>
                        </div>
                        <div>
                            <h2>{{ $totalBookingRequest }}</h2>
                            <h5>Total Booking Request</h5>
                        </div>
                        <div class="chart-container">
                            <div id="chart-1"></div>
                        </div>
                    </div>
            </div>
            <div class="col-xl-4 col-sm-6">
                <a href="{{ route('bookings.pending') }}" style="text-decoration: none; color: inherit;">
                    <div class="card-custom">
                        <div class="icon-container">
                            <i class="mdi mdi-calendar-clock"></i>
                        </div>
                        <div>
                            <h2>{{ $totalPendingBookingRequest }}</h2>
                            <h5>Total Pending Booking</h5>
                        </div>
                        <div class="chart-container">
                            <div id="chart-2"></div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-xl-4 col-sm-6">
                <div class="card-custom">
                    <div class="icon-container">
                        <i class="mdi mdi-calendar-clock"></i>
                    </div>
                    <div>
                        <h2>0</h2>
                        <h5>Total Ongoing Booking</h5>
                    </div>
                    <div class="chart-container">
                        <div id="chart-3"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-xl-4 col-sm-6">
                <div class="card-custom">
                    <div class="icon-container">
                        <i class="mdi mdi-calendar-clock"></i>
                    </div>
                    <div>
                        <h2>0</h2>
                        <h5>Total Complete Booking</h5>
                    </div>
                    <div class="chart-container">
                        <div id="chart-1"></div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-sm-6">
                <div class="card-custom">
                    <div class="icon-container">
                        <i class="mdi mdi-calendar-clock"></i>
                    </div>
                    <div>
                        <h2>0</h2>
                        <h5>Total Cancel Booking</h5>
                    </div>
                    <div class="chart-container">
                        <div id="chart-2"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection