@extends('admin.layouts.app')

@section('title', 'Booking · '.$booking->name)
@section('page_title', 'Booking Details')

@section('content')
@php
    $tz = $booking->timezone ?: config('app.timezone');
    $statusMeta = [
        'pending' => 'is-warn',
        'confirmed' => 'is-success',
        'completed' => 'is-info',
        'cancelled' => 'is-draft',
        'no_show' => 'is-danger',
    ];
    $badge = $statusMeta[$booking->status] ?? 'is-draft';
@endphp

<div class="home-editor">
    <div class="home-editor__hero">
        <div class="flex flex-wrap items-start justify-between gap-4">
            <div>
                <p class="home-editor__eyebrow">Sales · Booking</p>
                <h1 class="home-editor__title">{{ $booking->name }}</h1>
                <p class="home-editor__lead">
                    {{ $booking->bookingType?->name ?? 'Appointment' }}
                    · {{ $booking->starts_at->timezone($tz)->format('l, j F Y · g:i A') }}
                    ({{ $tz }})
                </p>
            </div>
            <span class="content-badge {{ $badge }}" style="font-size:0.8rem;padding:0.4rem 0.75rem;">
                {{ $statuses[$booking->status] ?? $booking->status }}
            </span>
        </div>
        <div class="home-editor__hero-actions">
            <a href="{{ route('admin.booking.bookings.index') }}" class="home-btn home-btn--light">← Calendar</a>
            <a href="mailto:{{ $booking->email }}" class="home-btn home-btn--light">Email client</a>
            @if($booking->phone)
                <a href="tel:{{ preg_replace('/\s+/', '', $booking->phone) }}" class="home-btn home-btn--light">Call</a>
            @endif
        </div>
    </div>

    <div class="app-detail-grid">
        <div class="home-seo-card space-y-4">
            <div>
                <h3 class="text-sm font-semibold text-slate-900">Appointment details</h3>
                <p class="text-xs text-slate-500">Client information and session notes.</p>
            </div>

            <dl class="app-meta-list" style="grid-template-columns: repeat(2, minmax(0, 1fr));">
                <div>
                    <dt>Client</dt>
                    <dd>{{ $booking->name }}</dd>
                </div>
                <div>
                    <dt>Type</dt>
                    <dd>{{ $booking->bookingType?->name ?? '—' }}</dd>
                </div>
                <div>
                    <dt>Email</dt>
                    <dd><a href="mailto:{{ $booking->email }}" class="content-link">{{ $booking->email }}</a></dd>
                </div>
                <div>
                    <dt>Phone</dt>
                    <dd>
                        @if($booking->phone)
                            <a href="tel:{{ preg_replace('/\s+/', '', $booking->phone) }}" class="content-link">{{ $booking->phone }}</a>
                        @else
                            —
                        @endif
                    </dd>
                </div>
                <div>
                    <dt>Company</dt>
                    <dd>{{ $booking->company ?: '—' }}</dd>
                </div>
                <div>
                    <dt>Duration</dt>
                    <dd>
                        {{ $booking->starts_at->timezone($tz)->format('g:i A') }}
                        –
                        {{ $booking->ends_at->timezone($tz)->format('g:i A') }}
                    </dd>
                </div>
            </dl>

            @if($booking->notes)
                <div class="app-cover">
                    <p class="app-cover__label">Client notes</p>
                    <p class="app-cover__body">{{ $booking->notes }}</p>
                </div>
            @endif

            @if($booking->lead)
                <div class="app-cover">
                    <p class="app-cover__label">Linked lead</p>
                    <p class="app-cover__body">Status: {{ $booking->lead->status }}</p>
                </div>
            @endif
        </div>

        <form method="POST" action="{{ route('admin.booking.bookings.update', $booking) }}" class="home-seo-card space-y-4">
            @csrf
            @method('PUT')

            <div>
                <h3 class="text-sm font-semibold text-slate-900">Manage status</h3>
                <p class="text-xs text-slate-500">Confirm, complete, or cancel this appointment.</p>
            </div>

            <div>
                <label class="home-label">Status</label>
                <select name="status" class="home-select" required>
                    @foreach ($statuses as $value => $label)
                        <option value="{{ $value }}" @selected(old('status', $booking->status) === $value)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="home-label">Cancellation reason</label>
                <textarea name="cancellation_reason" rows="5" class="home-textarea" placeholder="Optional — shown for cancelled bookings">{{ old('cancellation_reason', $booking->cancellation_reason) }}</textarea>
            </div>

            <div class="home-editor__footer" style="margin:0;padding-top:0.25rem;border:0;">
                <a href="{{ route('admin.booking.bookings.index') }}" class="home-btn home-btn--ghost">Back</a>
                <button type="submit" class="home-btn home-btn--primary">Save booking</button>
            </div>
        </form>
    </div>
</div>
@endsection