@extends('layouts.app')

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

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

@section('content')
    <div class="hp-container">
        @if (session('status'))
            @php
                $messages = [
                    'booking-accepted' => ['success', 'Booking accepted.'],
                    'booking-rejected' => ['secondary', 'Booking rejected.'],
                    'booking-completed' => ['success', 'Booking marked completed.'],
                    'booking-not-actionable' => ['warning', 'That booking has changed (for example, the customer cancelled it), so no action was taken.'],
                ];
                [$variant, $message] = $messages[session('status')] ?? [null, null];
            @endphp
            @if ($message)
                <div class="alert alert-{{ $variant }}">{{ $message }}</div>
            @endif
        @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-0 small">No bookings yet.</p>
                </div>
            </div>
        @else
            <!-- Mobile: card list -->
            <div class="d-sm-none d-flex flex-column gap-2">
                @foreach ($bookings as $booking)
                    <div class="hp-card p-3">
                        <div class="d-flex justify-content-between align-items-start">
                            <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($booking->customer->name, 0, 1)) }}</span>
                                <h3 class="h6 fw-semibold mb-0">{{ $booking->customer->name }}</h3>
                            </div>
                            <span class="hp-status-pill hp-status-{{ $booking->status }}">{{ str_replace('_', ' ', $booking->status) }}</span>
                        </div>
                        <p class="text-muted small mb-1 mt-2">
                            {{ $booking->service->name }}
                            <span class="badge {{ $booking->booking_type === 'instant' ? 'text-bg-primary' : 'text-bg-secondary' }} ms-1">
                                {{ $booking->booking_type === 'instant' ? '⚡ Insta Help' : '📅 Scheduled' }}
                            </span>
                        </p>
                        <p class="text-muted small mb-2">{{ $booking->scheduled_at->format('d M Y, H:i') }} &middot; &#8377;{{ number_format($booking->amount, 2) }}</p>

                        @if ($booking->status === 'requested')
                            <div class="d-flex gap-2">
                                <form method="POST" action="{{ route('provider.bookings.accept', $booking) }}" class="flex-fill">
                                    @csrf @method('PATCH')
                                    <button class="btn btn-sm btn-success w-100">Accept</button>
                                </form>
                                <form method="POST" action="{{ route('provider.bookings.reject', $booking) }}" class="flex-fill">
                                    @csrf @method('PATCH')
                                    <button class="btn btn-sm btn-outline-danger w-100">Reject</button>
                                </form>
                            </div>
                        @elseif ($booking->status === 'accepted')
                            <form method="POST" action="{{ route('provider.bookings.complete', $booking) }}">
                                @csrf @method('PATCH')
                                <button class="btn btn-sm btn-primary w-100">Mark Completed</button>
                            </form>
                        @endif
                    </div>
                @endforeach
            </div>

            <!-- Desktop: table -->
            <div class="d-none d-sm-block hp-card">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Customer</th>
                                <th>Service</th>
                                <th>Type</th>
                                <th>Scheduled</th>
                                <th>Amount</th>
                                <th>Status</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($bookings as $booking)
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <span class="hp-avatar" style="width:1.9rem;height:1.9rem;font-size:.72rem;">{{ strtoupper(substr($booking->customer->name, 0, 1)) }}</span>
                                            {{ $booking->customer->name }}
                                        </div>
                                    </td>
                                    <td>{{ $booking->service->name }}</td>
                                    <td>
                                        <span class="badge {{ $booking->booking_type === 'instant' ? 'text-bg-primary' : 'text-bg-secondary' }}">
                                            {{ $booking->booking_type === 'instant' ? '⚡ Insta Help' : '📅 Scheduled' }}
                                        </span>
                                    </td>
                                    <td>{{ $booking->scheduled_at->format('d M Y, H:i') }}</td>
                                    <td>&#8377;{{ number_format($booking->amount, 2) }}</td>
                                    <td><span class="hp-status-pill hp-status-{{ $booking->status }}">{{ str_replace('_', ' ', $booking->status) }}</span></td>
                                    <td class="text-end">
                                        @if ($booking->status === 'requested')
                                            <form method="POST" action="{{ route('provider.bookings.accept', $booking) }}" class="d-inline">
                                                @csrf @method('PATCH')
                                                <button class="btn btn-sm btn-link text-success text-decoration-none">Accept</button>
                                            </form>
                                            <form method="POST" action="{{ route('provider.bookings.reject', $booking) }}" class="d-inline">
                                                @csrf @method('PATCH')
                                                <button class="btn btn-sm btn-link text-danger text-decoration-none">Reject</button>
                                            </form>
                                        @elseif ($booking->status === 'accepted')
                                            <form method="POST" action="{{ route('provider.bookings.complete', $booking) }}" class="d-inline">
                                                @csrf @method('PATCH')
                                                <button class="btn btn-sm btn-link text-decoration-none">Mark Completed</button>
                                            </form>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @endif
    </div>
@endsection