@extends('admin.layouts.app')
@section('content')
<div class="row">
    <!-- Website Analytics -->
    @if(count($events) > 0)
    <div class="col-12 mb-4">
        <h6 class="text-muted mt-3">Outgoing events</h6>
        <div class="swiper" id="swiper-multiple-slides">
            <div class="swiper-wrapper">
                @foreach ($events as $key => $event)
                <div class="swiper-slide" style="background-image: url({{ asset($event->image->path ?? 'images/default.png') }})">
                    <a href="{{ route('promoter.events.show', $event->id) }}" class="text-white" style="filter: drop-shadow(5px 5px 5px black);">
                        {{ $event->name }}
                        <span class="ms-2"><i class="fas fa-external-link-alt"></i></span>
                    </a>
                </div>
                @endforeach
            </div>
            <div class="swiper-button-next swiper-button-white custom-icon"></div>
            <div class="swiper-button-prev swiper-button-white custom-icon"></div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    @endif
    <!--/ Website Analytics -->

    <!-- Earning Reports -->
    <div class="col-lg-6 mb-4">
        <div class="card h-100">
            <div class="card-header pb-0 d-flex justify-content-between mb-lg-n4">
                <div class="card-title mb-0">
                    <h5 class="mb-0">Earning Reports</h5>
                    <small class="text-muted">Weekly Earnings Overview</small>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12 col-md-4 d-flex flex-column align-self-end">
                        <div class="d-flex gap-2 align-items-center mb-2 pb-1 flex-wrap">
                            <h1 class="mb-0">$468</h1>
                            <div class="badge rounded bg-label-success">+4.2%</div>
                        </div>
                        <small class="text-muted">You informed of this week compared to last week</small>
                    </div>
                    <div class="col-12 col-md-8">
                        <div id="weeklyEarningReports"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--/ Earning Reports -->

    <!-- Support Tracker -->
    <div class="col-md-6 mb-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between pb-0">
                <div class="card-title mb-0">
                    <h5 class="mb-0">Requests</h5>
                    <small class="text-muted">Lastest</small>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12 col-sm-4 col-md-12 col-lg-4">
                        <div class="mt-lg-4 mt-lg-2 mb-lg-4 mb-2 pt-1">
                            <h1 class="mb-0">{{ $promoterRequests }}</h1>
                            <p class="mb-0">Total Reqeuest</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--/ Support Tracker -->

</div>
@endsection
@section('script')
<script>
    swiperMultipleSlides = document.querySelector('#swiper-multiple-slides')
        , new Swiper(swiperMultipleSlides, {
            slidesPerView: 3
            , spaceBetween: 30
            , pagination: {
                type: 'progressbar'
                , el: '.swiper-pagination'
            }
            , navigation: {
                prevEl: '.swiper-button-prev'
                , nextEl: '.swiper-button-next'
            }
        });

</script>
@endsection