@forelse ($tickets as $ticket)
    @php
        $hasOrderedTicket = isset($orderedTicket->id);
        $isOrderedTicket = $orderedTicket?->id == $ticket->id;
        $orderedTicketVerified = $isOrderedTicket && $orderedTicket->status == 1;
    @endphp
    <a href="{{ auth()->check() ? 'javascript:void(0)' : route('login') }}" data-token="{{ $ticket->token }}" data-for="{{ $ticket->total }}" data-status="{{ $ticket->status }}" class="card card-dashed shadow-sm mb-3 card-ticket border border-2 {{ $isOrderedTicket && $orderedTicketVerified ? 'border border-2 border-primary' : '' }}" data-id="{{ $ticket->id }}" data-price="{{ $ticket->price }}" style="text-decoration: none;">
        <div class="card-header ribbon ribbon-end">
            <div class="card-title">{{ $ticket->title }}</div>
            <div class="ribbon-label {{ $isOrderedTicket && $orderedTicketVerified ? 'bg-primary' : 'bg-secondary' }}">
                <h5 class="text-white mb-0 formatted-price">{{ $ticket->FormattedPrice }}</h5>
            </div>
        </div>
        <div class="card-body">
            {!! $ticket->desc !!}
            {{-- <h5 class="mb-0">1 Tiket + Merch* + Name Tag</h5>
            <p class="text-danger">*Emoney, Totebag & Tshirt</p> --}}
            <!-- <button class="btn btn-primary text-right">Pilih</button> -->
        </div>
        <div class="card-footer d-flex justify-content-between align-items-center">
            <div>
                @if ($ticket->status === 0)
                    <span class="badge badge-secondary fs-7">Pending</span>
                @elseif ($ticket->status === 1)
                    <span class="badge badge-success fs-7">Verified</span>
                @endif
            </div>
            <span class="bg-primary rounded px-5 py-3 text-white">Buy Ticket</span>
        </div>
    </a>
@empty
    <div class="col-12">
        <div class="card">
            <div class="card-body text-center">
                <img src="{{ asset('media/logo-perak-color.png') }}" class="w-50">
                <h5 class="mt-5">Belum ada tiket</h5>
            </div>
        </div>
    </div>
@endforelse