@extends('customer.dashboard.layout')

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

@section('content')
<div class="row mb-4">
    <div class="col-12">
        <h2 class="mb-1">My Bookings</h2>
        <p class="text-muted">View and manage all your bookings</p>
    </div>
</div>

@if($bookings->count() > 0)
<div class="content-card">
    <div class="table-responsive">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Booking #</th>
                    <th>Resource</th>
                    <th>Date & Time</th>
                    <th>Duration</th>
                    <th>Total</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($bookings as $booking)
                <tr>
                    <td>
                        <strong>{{ $booking->booking_reference }}</strong>
                    </td>
                    <td>{{ $booking->resource->name ?? 'N/A' }}</td>
                    <td>
                        <div>{{ $booking->start_datetime->format('M d, Y') }}</div>
                        <small class="text-muted">{{ $booking->start_datetime->format('g:i A') }}</small>
                    </td>
                    <td>{{ $booking->duration }}</td>
                    <td><strong>RM {{ number_format($booking->total_price, 2) }}</strong></td>
                    <td>
                        <span class="badge bg-{{ $booking->status === 'confirmed' ? 'success' : ($booking->status === 'pending' ? 'warning' : ($booking->status === 'cancelled' ? 'danger' : 'secondary')) }}">
                            {{ ucfirst($booking->status) }}
                        </span>
                    </td>
                    <td>
                        <a href="{{ route('customer.bookings.show', [$subdomain, $booking->id]) }}"
                           class="btn btn-sm btn-outline-primary">
                            <i class="bi bi-eye"></i>
                        </a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="mt-4">
        {{ $bookings->links() }}
    </div>
</div>
@else
<div class="content-card text-center py-5">
    <i class="bi bi-calendar-check text-muted" style="font-size: 64px;"></i>
    <h3 class="mt-4 mb-2">No Bookings Yet</h3>
    <p class="text-muted mb-4">You haven't made any bookings yet</p>
    <a href="/" class="btn btn-primary">
        <i class="bi bi-house"></i> Browse Services
    </a>
</div>
@endif
@endsection