@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Dashboard'])

    <div class="container-fluid py-4">
        <div class="row">
            @foreach ($events as $event)
                <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
                    <div class="card shadow-sm border-light rounded-lg">
                        <div class="card-header text-white d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">{{ $event->event_name }}</h5>
                            <i class="fas fa-calendar-day text-primary"></i> <!-- Icon for event -->
                        </div>
                        <div class="card-body">
                            <h6 class="text-muted">Event Details</h6>
                            <p><strong>Event Date:</strong> {{ Carbon\Carbon::parse($event->event_date)->format('d-m-Y') }}</p>
                            <p><strong>Total Moi:</strong> 
                                @php
                                    $totalRevenue = $event->revenue->sum('amount');
                                @endphp
                                <span class="badge bg-success text-white">₹{{ number_format($totalRevenue, 2) }}</span>
                            </p>
                        </div>
                        <div class="card-footer text-muted">
                            <p><small>Last updated: {{ Carbon\Carbon::parse($event->updated_at)->format('d-m-Y H:i') }}</small></p>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection
@push('styles')
<style>
    .card:hover {
    transform: translateY(-5px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card {
    transition: transform 0.3s ease-in-out;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
</style>    
@endpush