@extends('layouts.admin')

@section('title', 'System Bookings')
@section('header_title', 'Real-time Booking Logistics')

@section('content')
<div class="data-card">
    <div class="card-header">
        <h2>Global Booking Audit</h2>
        <div style="font-size: 0.9rem; color: var(--text-muted);">
            Managing {{ $bookings->total() }} Logistics Records
        </div>
    </div>
    <div class="table-wrap">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Logistics Identity</th>
                    <th>Establishment / Court</th>
                    <th>User Profile</th>
                    <th>Timeline</th>
                    <th>Financials</th>
                    <th>System Status</th>
                    <th style="text-align: right;">Operations</th>
                </tr>
            </thead>
            <tbody>
                @forelse($bookings as $booking)
                <tr>
                    <td>
                        <div style="font-weight: 700; color: #fff;">#BOOK-{{ $booking->id }}</div>
                        <div style="font-size: 0.75rem; color: var(--text-muted);">{{ $booking->created_at->format('M d, H:i') }}</div>
                    </td>
                    <td>
                        <div style="font-weight: 600; font-size: 0.85rem; color: #fff;">{{ $booking->court->club->name }}</div>
                        <div style="font-size: 0.75rem; color: var(--text-muted);">{{ $booking->court->name }}</div>
                    </td>
                    <td>
                        <div style="display: flex; gap: 0.5rem; align-items: center;">
                            <div style="width: 24px; height: 24px; background: rgba(255,255,255,0.05); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; color: var(--accent); font-weight: 700;">
                                {{ substr($booking->user->name, 0, 1) }}
                            </div>
                            <div style="font-size: 0.85rem; color: #fff;">{{ $booking->user->name }}</div>
                        </div>
                    </td>
                    <td>
                        <div style="font-weight: 600; font-size: 0.85rem;">{{ $booking->booking_date }}</div>
                        <div style="font-size: 0.75rem; color: var(--text-muted);">{{ $booking->start_time }} - {{ $booking->end_time }}</div>
                    </td>
                    <td>
                        <div style="font-weight: 700; color: var(--primary);">Rs. {{ number_format($booking->total_price) }}</div>
                        <div style="font-size: 0.7rem; color: var(--text-muted);">CONFIRMED PAYMENT</div>
                    </td>
                    <td>
                        <span class="status-pill {{ $booking->status === 'confirmed' ? 'pill-success' : 'pill-warning' }}">
                            {{ strtoupper($booking->status) }}
                        </span>
                    </td>
                    <td style="text-align: right; position: relative;">
                        <div class="dropdown" style="display: inline-block;">
                            <button class="btn btn-sm btn-outline dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" style="width: 45px; height: 45px; justify-content: center; border-radius: 12px; border-color: var(--border);">
                                <i class="fas fa-ellipsis-v"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end" style="background: var(--card-bg); border: 1px solid var(--border); border-radius: 15px; padding: 0.8rem; box-shadow: 0 20px 40px rgba(0,0,0,0.4); margin-top: 10px;">
                                <li><a class="dropdown-item" href="#" style="border-radius: 10px; padding: 0.7rem 1.2rem; font-weight: 600; font-size: 0.85rem; color: #fff;"><i class="fas fa-eye" style="margin-right: 10px; color: var(--accent);"></i> Audit Details</a></li>
                                <li><a class="dropdown-item" href="#" style="border-radius: 10px; padding: 0.7rem 1.2rem; font-weight: 600; font-size: 0.85rem; color: #fff;"><i class="fas fa-file-invoice" style="margin-right: 10px; color: var(--primary);"></i> Intelligence Report</a></li>
                                <li><hr class="dropdown-divider" style="border-color: var(--border);"></li>
                                <li><a class="dropdown-item text-danger" href="#" style="border-radius: 10px; padding: 0.7rem 1.2rem; font-weight: 700; font-size: 0.85rem;"><i class="fas fa-ban" style="margin-right: 10px;"></i> Deactivate Logic</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
                @empty
                    <tr>
                        <td colspan="7" style="padding: 5rem; text-align: center; color: var(--text-muted);">
                            <i class="fas fa-calendar-times fa-3x" style="opacity: 0.2; margin-bottom: 1rem; display: block;"></i>
                            Platform currently has no active logistics records.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div style="padding: 1.5rem 2rem; border-top: 1px solid var(--border);">
        {{ $bookings->links() }}
    </div>
</div>
@endsection