@extends('layouts.app')

@section('title', 'Detail Event - ' . $event->nama_event)

@section('content')

<div class="container" style="max-width:860px">

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    <div class="card-modern p-4 mb-4">
        <img src="{{ $event->gambar ? asset('storage/'.$event->gambar) : 'https://via.placeholder.com/860x320?text=Konser' }}"
             alt="{{ $event->nama_event }}"
             style="width:100%; height:280px; object-fit:cover; border-radius:12px; margin-bottom:20px">

        <h2 class="fw-bold mb-1">{{ $event->nama_event }}</h2>
        <div class="text-muted mb-2">
            {{ $event->kategori->nama_kategori ?? '-' }} &bull;
            {{ $event->lokasi->nama_lokasi ?? '-' }}
        </div>
        <div class="text-muted-sm mb-3">
            📅 {{ $event->tanggal ? \Carbon\Carbon::parse($event->tanggal)->format('d M Y') : '-' }}
            @if($event->jam)
                &nbsp;⏰ {{ $event->jam }}
            @endif
        </div>
        <p style="line-height:1.7">{{ $event->deskripsi }}</p>
    </div>

    <div class="card-modern p-4">
        <h4 class="mb-3">🎟️ Pilih Tiket</h4>

        @forelse($event->tikets as $tiket)
            <div class="card-dark mb-3 p-3 d-flex justify-content-between align-items-center flex-wrap gap-3">
                <div>
                    <div class="fw-bold">{{ $tiket->jenis }}</div>
                    <div class="text-muted-sm">Rp {{ number_format($tiket->harga, 0, ',', '.') }}</div>
                    <div class="mt-1">
                        @if($tiket->stok > 0)
                            <span class="badge bg-success">Stok: {{ $tiket->stok }}</span>
                        @else
                            <span class="badge bg-danger">Stok Habis</span>
                        @endif
                    </div>
                </div>
                <div>
                    @if($tiket->stok > 0)
                        <a href="{{ route('tiket.beli', $tiket->id) }}" class="btn btn-primary-custom">
                            Beli Tiket
                        </a>
                    @else
                        <button class="btn btn-secondary" disabled>Stok Habis</button>
                    @endif
                </div>
            </div>
        @empty
            <div class="alert alert-warning">Belum ada tiket tersedia untuk event ini.</div>
        @endforelse

        <div class="mt-3">
            <a href="{{ route('user.events') }}" class="btn btn-outline-secondary">← Kembali</a>
        </div>
    </div>

</div>

@endsection