@extends('layouts.main')
@use('Carbon\Carbon')

@section('title', $title)

@section('content')
<section>
    <div class="row mb-3">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="fs-base lh-base fw-medium text-muted mb-0" id="hello"></h5>
                </div>
            </div>
        </div>
    </div>

    <!-- Events Statistics -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">{{ __('module.event') }} {{ __('general.summary') }}</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="card bg-primary text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="card-title mb-1">{{ __('general.total') }}</h6>
                                            <h3 class="mb-0">{{ $events['total'] }}</h3>
                                        </div>
                                        <div class="fs-1 opacity-50">
                                            <i class="fas fa-calendar-alt"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="card bg-success text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="card-title mb-1">{{ __('general.active') }}</h6>
                                            <h3 class="mb-0">{{ $events['active'] }}</h3>
                                        </div>
                                        <div class="fs-1 opacity-50">
                                            <i class="fas fa-check-circle"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="card bg-info text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="card-title mb-1">{{ __('general.upcoming') }}</h6>
                                            <h3 class="mb-0">{{ $events['upcoming'] }}</h3>
                                        </div>
                                        <div class="fs-1 opacity-50">
                                            <i class="fas fa-clock"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="card bg-secondary text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="card-title mb-1">{{ __('general.past') }}</h6>
                                            <h3 class="mb-0">{{ $events['past'] }}</h3>
                                        </div>
                                        <div class="fs-1 opacity-50">
                                            <i class="fas fa-history"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Sponsor Registrations Statistics -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">{{ __('module.event-sponsor-registration') }} {{ __('general.summary') }}</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="card bg-primary text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="card-title mb-1">{{ __('general.total') }}</h6>
                                            <h3 class="mb-0">{{ $sponsors['total'] }}</h3>
                                        </div>
                                        <div class="fs-1 opacity-50">
                                            <i class="fas fa-building"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="card bg-warning text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="card-title mb-1">{{ __('general.pending') }}</h6>
                                            <h3 class="mb-0">{{ $sponsors['pending'] }}</h3>
                                        </div>
                                        <div class="fs-1 opacity-50">
                                            <i class="fas fa-hourglass-half"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="card bg-success text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="card-title mb-1">{{ __('general.confirmed') }}</h6>
                                            <h3 class="mb-0">{{ $sponsors['confirmed'] }}</h3>
                                        </div>
                                        <div class="fs-1 opacity-50">
                                            <i class="fas fa-check-double"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="card bg-info text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="card-title mb-1">{{ __('general.this_month') }}</h6>
                                            <h3 class="mb-0">{{ $sponsors['this_month'] }}</h3>
                                        </div>
                                        <div class="fs-1 opacity-50">
                                            <i class="fas fa-calendar-check"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Participants Statistics -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">{{ __('module.event-participant') }} {{ __('general.summary') }}</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="card bg-primary text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="card-title mb-1">{{ __('general.total') }}</h6>
                                            <h3 class="mb-0">{{ $participants['total'] }}</h3>
                                        </div>
                                        <div class="fs-1 opacity-50">
                                            <i class="fas fa-users"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="card bg-success text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="card-title mb-1">{{ __('general.checked_in') }}</h6>
                                            <h3 class="mb-0">{{ $participants['checked_in'] }}</h3>
                                        </div>
                                        <div class="fs-1 opacity-50">
                                            <i class="fas fa-user-check"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="card bg-warning text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="card-title mb-1">{{ __('general.not_checked_in') }}</h6>
                                            <h3 class="mb-0">{{ $participants['not_checked_in'] }}</h3>
                                        </div>
                                        <div class="fs-1 opacity-50">
                                            <i class="fas fa-user-clock"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="card bg-info text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="card-title mb-1">{{ __('general.this_month') }}</h6>
                                            <h3 class="mb-0">{{ $participants['this_month'] }}</h3>
                                        </div>
                                        <div class="fs-1 opacity-50">
                                            <i class="fas fa-calendar-check"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Blogs Statistics -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">{{ __('module.blog') }} {{ __('general.summary') }}</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="card bg-primary text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="card-title mb-1">{{ __('general.total') }}</h6>
                                            <h3 class="mb-0">{{ $blogs['total'] }}</h3>
                                        </div>
                                        <div class="fs-1 opacity-50">
                                            <i class="fas fa-blog"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="card bg-success text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="card-title mb-1">{{ __('general.active') }}</h6>
                                            <h3 class="mb-0">{{ $blogs['active'] }}</h3>
                                        </div>
                                        <div class="fs-1 opacity-50">
                                            <i class="fas fa-check-circle"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="card bg-info text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="card-title mb-1">{{ __('general.published') }}</h6>
                                            <h3 class="mb-0">{{ $blogs['published'] }}</h3>
                                        </div>
                                        <div class="fs-1 opacity-50">
                                            <i class="fas fa-newspaper"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="card bg-secondary text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="card-title mb-1">{{ __('general.this_month') }}</h6>
                                            <h3 class="mb-0">{{ $blogs['this_month'] }}</h3>
                                        </div>
                                        <div class="fs-1 opacity-50">
                                            <i class="fas fa-calendar-check"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script type="module">
    const getGreetingTime = () => {
        let today = new Date()
        let curHr = today.getHours()
        if (curHr < 12) {
            return '{{__("general.good-morning")}},';
        } else if (curHr < 15) {
            return '{{__("general.good-afternoon")}},';
        } else if (curHr < 18) {
            return '{{__("general.good-evening")}},';
        } else {
            return '{{__("general.good-night")}},';
        }
    };
    document.getElementById('hello').innerHTML = `${getGreetingTime()} <strong>{{ Auth::user()->name }}</strong>`;
</script>
@endpush