@extends('layout.index')
@section('title', 'Dashboard')

<!-- Dashboard Ecommerce start -->
@section('content')
    <section>
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12 d-flex">
                        <h2 class="content-header-title float-start mb-0">Dashboard</h2>
                    </div>
                </div>
            </div>
            <div class="content-header-right text-md-end col-md-6 col-12 d-md-block d-none">
                <div class="mb-1 breadcrumb-right">
                    <div class="breadcrumb-wrapper">
                    {{-- <div class=""> --}}
                        <ol class="breadcrumb" style="justify-content: flex-end">
                            <li class="breadcrumb-item"><a href="#">Home</a>
                            </li>
                            <li class="breadcrumb-item"><a href="#">Dashboard</a>
                            </li>
                            <li class="breadcrumb-item active">Dashboard
                            </li>
                        </ol>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-md-1"></div>

    </section>
    <section>
        <div class="row">
            <div class="col-sm-4">
                <div class="card">
                    <div class="row p-1">
                        <div class="col-sm-4 text-center">
                            <img src="{{ asset('app-assets/images/dashboard/1.png') }}" alt=""
                                style="width: 150px;">
                        </div>
                        <div class="col-sm-8" style="display: flex; flex-direction: column; justify-content: center;">
                            <h3 class="mb-2">Events</h3>
                            <h1>
                                @if (!empty($event_count))
                                    {{ $event_count }}
                                @else
                                    0                                @endif
                            </h1>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="card">
                    <div class="row p-1">
                        <div class="col-sm-4 text-center">
                            <img src="{{ asset('app-assets/images/dashboard/2.png') }}" alt=""
                                style="width: 150px;">
                        </div>
                        <div class="col-sm-8" style="display: flex; flex-direction: column; justify-content: center;">
                            <h3 class="mb-2">Athletes</h3>
                            <h1>
                                @if (!empty($athelete_count))
                                    {{ $athelete_count }}
                                @else
                                    0                                @endif
                            </h1>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="card">
                    <div class="row p-1">
                        <div class="col-sm-4 text-center">
                            <img src="{{ asset('app-assets/images/dashboard/3.png') }}" alt=""
                                style="width: 150px;">
                        </div>
                        <div class="col-sm-8" style="display: flex; flex-direction: column; justify-content: center;">
                            <h3 class="mb-2">Companies</h3>
                            <h1>
                                @if (!empty($company_count))
                                    {{ $company_count }}
                                @else
                                    0                                @endif
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection