@extends('layouts.staff')

@section('content')
    <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3 mb-4">
        <div>
            <p class="ck-page-kicker mb-1">Staff Dashboard</p>
            <h1 class="h3 ck-heading mb-0">Court Kulture Sessions</h1>
        </div>
        <a href="{{ route('staff.sessions.create') }}" class="btn btn-cq btn-cq-active"><span class="ck-btn-icon ck-icon-plus" aria-hidden="true"></span>New Session</a>
    </div>

    <div class="row g-3">
        @forelse ($sessions as $session)
            <div class="col-12 col-lg-6">
                <div class="cq-card p-3 h-100">
                    <div class="d-flex align-items-start justify-content-between gap-3">
                        <div class="d-flex gap-3">
                            <span class="ck-line-icon ck-line-icon-court"></span>
                            <div>
                            <h2 class="h5 mb-1">{{ $session->name }}</h2>
                            <div class="text-secondary small">
                                {{ $session->starts_at?->format('M j, Y g:i A') ?? 'Start time not set' }}
                            </div>
                            </div>
                        </div>
                        <span class="badge ck-badge ck-status-{{ str_replace('_', '-', $session->status) }}">{{ str_replace('_', ' ', $session->status) }}</span>
                    </div>

                    <div class="row g-2 mt-3">
                        <div class="col-4">
                            <div class="cq-stat bg-light p-2 rounded">
                                <div class="fw-bold">{{ $session->courts_count }}</div>
                                <div class="small text-secondary">Courts</div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="cq-stat bg-light p-2 rounded">
                                <div class="fw-bold">{{ $session->players_count }}</div>
                                <div class="small text-secondary">Players</div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="cq-stat bg-light p-2 rounded">
                                <div class="fw-bold">{{ $session->queue_entries_count }}</div>
                                <div class="small text-secondary">Queued</div>
                            </div>
                        </div>
                    </div>

                    <a href="{{ route('staff.sessions.show', $session) }}" class="btn btn-outline-dark w-100 mt-3"><span class="ck-btn-icon ck-icon-dashboard" aria-hidden="true"></span>Open Dashboard</a>
                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="cq-card p-4 text-center">
                    <h2 class="h5">No sessions yet</h2>
                    <p class="text-secondary mb-3">Create a session to start adding courts, players, and matches.</p>
                    <a href="{{ route('staff.sessions.create') }}" class="btn btn-cq btn-cq-active"><span class="ck-btn-icon ck-icon-plus" aria-hidden="true"></span>Create Session</a>
                </div>
            </div>
        @endforelse
    </div>

    <div class="mt-4">
        {{ $sessions->links() }}
    </div>
@endsection