@extends('layouts.app')

@section('title', 'My Bookings — ' . config('app.name'))

@section('header')
    <h2 class="h5 fw-semibold mb-0">{{ __('My Bookings') }}</h2>
@endsection

@section('content')
    <div class="hp-container-narrow">
        @if (session('status') === 'booking-requested')
            <div class="alert alert-success">Booking request sent to the provider.</div>
        @endif

        @if (session('status') === 'checkout-complete')
            @if (! empty(session('confirmed_services')))
                <div class="alert alert-success">
                    &#9989; Booking confirmed for: {{ implode(', ', session('confirmed_services')) }}.
                </div>
            @endif
            @if (! empty(session('unmatched_services')))
                <div class="alert alert-warning">
                    No professionals are available right now for: {{ implode(', ', session('unmatched_services')) }}. Please try again shortly.
                </div>
            @endif
        @endif

        @if (session('status') === 'payment-recorded')
            <div class="alert alert-success">Marked as paid.</div>
        @endif

        @if (session('status') === 'booking-cancelled')
            <div class="alert alert-secondary">Booking request cancelled.</div>
        @elseif (session('status') === 'booking-not-cancellable')
            <div class="alert alert-warning">That booking can no longer be cancelled &mdash; the provider has already responded to it.</div>
        @endif

        @if ($bookings->isEmpty())
            <div class="hp-card">
                <div class="hp-empty">
                    <span class="hp-empty-icon">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 3v4M17 3v4M4 9h16M5 6h14a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Z"/></svg>
                    </span>
                    <p class="mb-3 small">No bookings yet &mdash; browse a category to get started.</p>
                    <a href="{{ route('dashboard') }}" class="btn btn-primary btn-sm">Browse services</a>
                </div>
            </div>
        @else
            <div class="d-flex flex-column gap-2">
                @foreach ($bookings as $booking)
                    @php($providerName = $booking->providerProfile->business_name ?? $booking->providerProfile->user->name)
                    <div class="hp-card p-3">
                        <div class="d-flex justify-content-between align-items-start gap-2">
                            <div class="d-flex align-items-center gap-2">
                                <span class="hp-avatar" style="width:2.25rem;height:2.25rem;font-size:.8rem;">{{ strtoupper(substr($providerName, 0, 1)) }}</span>
                                <div>
                                    <h3 class="h6 fw-semibold mb-0">{{ $providerName }}</h3>
                                    <p class="text-muted small mb-0">{{ $booking->service->name }}</p>
                                </div>
                            </div>
                            <span class="hp-status-pill hp-status-{{ $booking->status }}">{{ str_replace('_', ' ', $booking->status) }}</span>
                        </div>

                        <div class="d-flex align-items-center gap-2 mt-2">
                            <span class="badge {{ $booking->booking_type === 'instant' ? 'text-bg-primary' : 'text-bg-secondary' }}">
                                {{ $booking->booking_type === 'instant' ? '⚡ Insta Help' : '📅 Scheduled' }}
                            </span>
                            <span class="text-muted small">{{ $booking->scheduled_at->format('d M Y, H:i') }}</span>
                        </div>

                        <div class="d-flex justify-content-between align-items-center mt-3 pt-2 border-top">
                            <span class="fw-semibold">&#8377;{{ number_format($booking->amount, 2) }}</span>
                            <span class="hp-pay-pill hp-pay-{{ $booking->payment_status }}">{{ $booking->payment_status }}</span>
                        </div>

                        <button type="button" class="btn btn-link btn-sm p-0 mt-2 text-decoration-none" data-bs-toggle="collapse" data-bs-target="#provider-{{ $booking->id }}" aria-expanded="false">
                            Provider details
                        </button>

                        <div class="collapse mt-2" id="provider-{{ $booking->id }}">
                            <dl class="row small mb-0 hp-card p-3 mx-0">
                                <dt class="col-5 text-muted fw-normal">Business</dt>
                                <dd class="col-7 mb-1">{{ $booking->providerProfile->business_name ?? $booking->providerProfile->user->name }}</dd>
                                <dt class="col-5 text-muted fw-normal">Contact person</dt>
                                <dd class="col-7 mb-1">{{ $booking->providerProfile->user->name }}</dd>
                                <dt class="col-5 text-muted fw-normal">Phone</dt>
                                <dd class="col-7 mb-1">
                                    @if ($booking->providerPhoneVisible() && $booking->providerProfile->user->phone)
                                        <a href="tel:{{ $booking->providerProfile->user->phone }}" class="fw-semibold text-decoration-none">{{ $booking->providerProfile->user->phone }}</a>
                                    @else
                                        <span class="text-muted">Shared once the provider accepts</span>
                                    @endif
                                </dd>
                                <dt class="col-5 text-muted fw-normal">Location</dt>
                                <dd class="col-7 mb-1">{{ collect([$booking->providerProfile->address_line, $booking->providerProfile->city])->filter()->implode(', ') ?: '—' }}</dd>
                                <dt class="col-5 text-muted fw-normal">Experience</dt>
                                <dd class="col-7 mb-0">{{ $booking->providerProfile->experience_years ?? 0 }} yrs</dd>
                            </dl>
                        </div>

                        @if ($booking->isCancellable())
                            <form method="POST" action="{{ route('customer.bookings.cancel', $booking) }}" class="mt-2" onsubmit="return confirm('Cancel this booking request?')">
                                @csrf @method('PATCH')
                                <button class="btn btn-sm btn-outline-danger w-100">Cancel request</button>
                            </form>
                        @endif

                        @if ($booking->status === 'completed' && $booking->payment_status === 'pending')
                            <form method="POST" action="{{ route('customer.bookings.mark-paid', $booking) }}" class="mt-2">
                                @csrf @method('PATCH')
                                <button class="btn btn-sm btn-outline-primary w-100">Mark Paid</button>
                            </form>
                        @endif
                    </div>
                @endforeach
            </div>
        @endif
    </div>
@endsection