@extends('layouts.app')
@section('title', 'Manajemen Tiket')
@section('page-title', 'Tiket')

@section('content')
<div class="page-header d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3 mb-4">
    <div>
        <div class="breadcrumb-dark">
            <a href="{{ route('dashboard') }}">Dashboard</a>
            <i class="bi bi-chevron-right" style="font-size:0.6rem"></i>
            <span class="current">Tiket</span>
        </div>
        <div class="page-header-title">Manajemen Tiket 🎫</div>
        <div class="page-header-sub">Kelola semua jenis tiket untuk setiap event</div>
    </div>
    <a href="{{ route('tiket.create') }}" class="btn-primary-glow">
        <i class="bi bi-plus-lg"></i> Tambah Tiket
    </a>
</div>

<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="stat-card purple">
            <div class="stat-icon"><i class="bi bi-ticket-perforated-fill"></i></div>
            <div class="stat-value">{{ \App\Models\Tiket::count() }}</div>
            <div class="stat-label">Jumlah Jenis</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card indigo">
            <div class="stat-icon"><i class="bi bi-stack"></i></div>
            <div class="stat-value">{{ \App\Models\Tiket::sum('stok') }}</div>
            <div class="stat-label">Total Stok</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card gold">
            <div class="stat-icon"><i class="bi bi-currency-dollar"></i></div>
            <div class="stat-value">Rp{{ number_format(\App\Models\Tiket::min('harga') ?? 0) }}</div>
            <div class="stat-label">Harga Terendah</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card green">
            <div class="stat-icon"><i class="bi bi-trophy-fill"></i></div>
            <div class="stat-value">Rp{{ number_format(\App\Models\Tiket::max('harga') ?? 0) }}</div>
            <div class="stat-label">Harga Tertinggi</div>
        </div>
    </div>
</div>

<div class="card-dark overflow-hidden">
    <div class="card-body p-3">
        <form method="GET" action="{{ route('tiket.index') }}" class="row g-3 align-items-end">
            <div class="col-sm-12 col-md-4 position-relative">
                <i class="bi bi-search" style="position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:0.95rem"></i>
                <input name="search" type="text" class="form-control-dark" placeholder="Cari tiket..." value="{{ request('search') }}" style="padding-left:36px; width:100%;">
            </div>
            <div class="col-sm-6 col-md-3">
                <select name="event_id" class="form-control-dark" style="width:100%;">
                    <option value="">Semua Event</option>
                    @foreach(\App\Models\Event::latest()->get() as $ev)
                        <option value="{{ $ev->id }}" {{ request('event_id') == $ev->id ? 'selected' : '' }}>{{ $ev->nama_event }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-sm-6 col-md-2">
                <select name="sort" class="form-control-dark" style="width:100%;">
                    <option value="">Urutkan</option>
                    <option value="price_asc" {{ request('sort') == 'price_asc' ? 'selected' : '' }}>Harga ↑</option>
                    <option value="price_desc" {{ request('sort') == 'price_desc' ? 'selected' : '' }}>Harga ↓</option>
                </select>
            </div>
            <div class="col-sm-6 col-md-2">
                <select name="perpage" class="form-control-dark" style="width:100%;">
                    <option value="10" {{ request('perpage', 10) == 10 ? 'selected' : '' }}>10</option>
                    <option value="20" {{ request('perpage') == 20 ? 'selected' : '' }}>20</option>
                    <option value="50" {{ request('perpage') == 50 ? 'selected' : '' }}>50</option>
                </select>
            </div>
            <div class="col-sm-6 col-md-1 d-flex gap-2">
                <button class="btn-primary-glow">Filter</button>
                <a href="{{ route('tiket.index') }}" class="btn btn-outline-soft">Clear</a>
            </div>
        </form>
    </div>

    <div class="table-responsive">
        <table class="table table-dark-custom mb-0">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Event</th>
                    <th>Jenis Tiket</th>
                    <th>Harga</th>
                    <th>Stok</th>
                    <th>Status</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($tikets as $i => $tiket)
                    <tr>
                        <td style="color:var(--text-muted);">{{ $tikets->firstItem() + $i }}</td>
                        <td>
                            <div class="fw-semibold">{{ $tiket->event->nama_event ?? '—' }}</div>
                            @if($tiket->event && $tiket->event->tanggal)
                                <div class="text-muted-sm">{{ \Carbon\Carbon::parse($tiket->event->tanggal)->format('d M Y') }}</div>
                            @endif
                        </td>
                        <td>
                            @php
                                $jenisColor = match(strtolower($tiket->jenis)) {
                                    'vvip' => 'badge-gold',
                                    'vip' => 'badge-purple',
                                    'festival' => 'badge-indigo',
                                    default => 'badge-green',
                                };
                            @endphp
                            <span class="{{ $jenisColor }}">{{ strtoupper($tiket->jenis) }}</span>
                        </td>
                        <td class="text-gold fw-semibold">Rp{{ number_format($tiket->harga) }}</td>
                        <td>{{ $tiket->stok }}</td>
                        <td>
                            @if($tiket->stok > 50)
                                <span class="badge-green">Tersedia</span>
                            @elseif($tiket->stok > 10)
                                <span class="badge-gold">Terbatas</span>
                            @elseif($tiket->stok > 0)
                                <span class="badge-red">Hampir Habis</span>
                            @else
                                <span class="badge-red">Habis</span>
                            @endif
                        </td>
                        <td>
                            <div class="d-flex flex-wrap gap-2">
                                <a href="{{ route('tiket.edit', $tiket->id) }}" class="btn-edit-soft"><i class="bi bi-pencil-fill"></i> Edit</a>
                                @if($tiket->stok > 0)
                                    <a href="{{ route('transaksi.create', ['tiket_id' => $tiket->id]) }}" class="btn-primary-glow"><i class="bi bi-cart-fill"></i> Beli</a>
                                @else
                                    <button class="btn-danger-soft" disabled>Habis</button>
                                @endif
                                <form action="{{ route('tiket.destroy', $tiket->id) }}" method="POST" onsubmit="return confirm('Hapus tiket ini?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn-danger-soft"><i class="bi bi-trash-fill"></i></button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center py-5">
                            <div class="empty-state">
                                <i class="bi bi-ticket-perforated"></i>
                                <p class="mb-0">Belum ada tiket. <a href="{{ route('tiket.create') }}">Tambah tiket</a></p>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="d-flex justify-content-center mt-3">{{ $tikets->appends(request()->except('page'))->links() }}</div>
</div>

@endsection