@extends('admin.layouts.app')

@section('title', 'Bookings')
@section('page_title', 'Bookings')

@section('content')
@php
    $statusMeta = [
        'pending' => ['label' => 'Pending', 'class' => 'is-warn'],
        'confirmed' => ['label' => 'Confirmed', 'class' => 'is-success'],
        'completed' => ['label' => 'Completed', 'class' => 'is-info'],
        'cancelled' => ['label' => 'Cancelled', 'class' => 'is-draft'],
        'no_show' => ['label' => 'No Show', 'class' => 'is-danger'],
    ];
@endphp

<div class="content-hub booking-calendar-page">
    <div class="content-hub__hero">
        <div>
            <p class="content-hub__eyebrow">Sales · Scheduling</p>
            <h1 class="content-hub__title">Bookings calendar</h1>
            <p class="content-hub__lead">Month, week, day, and agenda views — click any appointment to review and update status instantly.</p>
        </div>
        <div class="content-hub__actions">
            <a href="{{ route('admin.booking.types.index') }}" class="home-btn home-btn--light">Booking types</a>
            <a href="{{ url('/book') }}" target="_blank" class="home-btn home-btn--primary">Public booking page</a>
        </div>
    </div>

    <div class="app-stat-strip">
        <span class="app-stat-chip is-active">
            All
            <span class="app-stat-chip__count">{{ $totalCount }}</span>
        </span>
        @foreach ($statusMeta as $key => $meta)
            <span class="app-stat-chip">
                {{ $meta['label'] }}
                <span class="app-stat-chip__count">{{ $statusCounts[$key] ?? 0 }}</span>
            </span>
        @endforeach
    </div>

    <div class="booking-calendar-layout">
        <div class="booking-calendar-main">
            <div class="content-hub__filters booking-calendar-filters">
                <select id="cal-filter-status" class="content-hub__select">
                    <option value="">All statuses</option>
                    @foreach ($statuses as $value => $label)
                        <option value="{{ $value }}" @selected(($filters['status'] ?? '') === $value)>{{ $label }}</option>
                    @endforeach
                </select>
                <select id="cal-filter-type" class="content-hub__select">
                    <option value="">All types</option>
                    @foreach ($types as $type)
                        <option value="{{ $type->id }}" @selected(($filters['type'] ?? '') === (string) $type->id)>{{ $type->name }}</option>
                    @endforeach
                </select>
                <div class="booking-legend">
                    @foreach ($statusMeta as $key => $meta)
                        <span class="booking-legend__item">
                            <i class="booking-legend__dot booking-legend__dot--{{ $key }}"></i>
                            {{ $meta['label'] }}
                        </span>
                    @endforeach
                </div>
            </div>

            <div class="booking-calendar-shell">
                <div
                    id="booking-calendar"
                    data-events-url="{{ route('admin.booking.bookings.events') }}"
                    data-update-url-template="{{ url('/admin/booking/bookings/__ID__') }}"
                    data-csrf="{{ csrf_token() }}"
                ></div>
            </div>
        </div>

        <aside class="booking-calendar-aside">
            <div class="home-seo-card space-y-4">
                <div>
                    <h3 class="text-sm font-semibold text-slate-900">Upcoming</h3>
                    <p class="text-xs text-slate-500">Next confirmed and pending sessions.</p>
                </div>

                @forelse ($upcoming as $booking)
                    @php
                        $tz = $booking->timezone ?: config('app.timezone');
                        $meta = $statusMeta[$booking->status] ?? ['label' => ucfirst($booking->status), 'class' => 'is-draft'];
                    @endphp
                    <button
                        type="button"
                        class="booking-upcoming"
                        data-cal-jump="{{ $booking->starts_at->timezone($tz)->toIso8601String() }}"
                        data-cal-open="{{ $booking->id }}"
                        data-cal-url="{{ route('admin.booking.bookings.show', $booking) }}"
                    >
                        <div class="booking-upcoming__when">
                            <span class="booking-upcoming__day">{{ $booking->starts_at->timezone($tz)->format('D') }}</span>
                            <span class="booking-upcoming__date">{{ $booking->starts_at->timezone($tz)->format('j M') }}</span>
                            <span class="booking-upcoming__time">{{ $booking->starts_at->timezone($tz)->format('g:i A') }}</span>
                        </div>
                        <div class="booking-upcoming__body">
                            <p class="booking-upcoming__name">{{ $booking->name }}</p>
                            <p class="booking-upcoming__meta">{{ $booking->bookingType?->name ?? 'Booking' }}</p>
                            <span class="content-badge {{ $meta['class'] }}">{{ $meta['label'] }}</span>
                        </div>
                    </button>
                @empty
                    <p class="text-sm text-slate-500">No upcoming appointments.</p>
                @endforelse
            </div>
        </aside>
    </div>
</div>

<div id="booking-drawer-backdrop" class="booking-drawer-backdrop" aria-hidden="true"></div>
<aside id="booking-drawer" class="booking-drawer" aria-label="Booking details">
    <div class="booking-drawer__toolbar">
        <p class="booking-drawer__eyebrow">Appointment</p>
        <button type="button" id="booking-drawer-close" class="home-btn home-btn--ghost home-btn--sm" aria-label="Close">Close</button>
    </div>
    <div id="booking-drawer-body" class="booking-drawer__content"></div>
</aside>

@vite(['resources/js/admin-booking-calendar.js'])
@endsection