@extends('layouts.app')

@section('title','Beranda User')

@section('content')

<div class="container">

    <div class="card-modern p-4 mb-4">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
            <div>
                <h2 class="mb-1">Selamat Datang, {{ auth()->user()->name }}</h2>
                <div class="text-muted-sm">Temukan konser favoritmu dan beli tiket dengan mudah.</div>
            </div>
            <a href="{{ route('user.events') }}" class="btn btn-primary-custom">Lihat Semua Event</a>
        </div>
    </div>

    <h3 class="mb-3">🎵 Event Terbaru</h3>

    <div class="row g-3">
        @forelse($events as $event)
            <div class="col-md-4">
                <div class="event-card">
                    <img src="{{ $event->gambar ? asset('storage/'.$event->gambar) : 'https://via.placeholder.com/500x250' }}" class="poster" alt="{{ $event->nama_event }}">
                    <div class="p-3">
                        <h5 class="mb-1">{{ $event->nama_event }}</h5>
                        <div class="text-muted" style="font-size:0.9rem">{{ $event->kategori->nama_kategori ?? '-' }} • {{ $event->lokasi->nama_lokasi ?? '-' }}</div>
                        <div class="mt-2 text-muted-sm">{{ $event->tanggal ? \Carbon\Carbon::parse($event->tanggal)->format('d M Y') : '-' }}</div>
                        <div class="mt-3">
                            <a href="{{ route('user.event.show', $event->id) }}" class="btn btn-primary-custom w-100">Lihat Detail</a>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="alert alert-warning">Belum ada event.</div>
            </div>
        @endforelse
    </div>

</div>

@endsection