@extends('layouts.main')

@section('content')
<div class="main-header" style="margin-bottom: 2rem;">
    <div>
        <h1 style="font-family: 'Space Grotesk', sans-serif; font-size: 2.2rem; font-weight: 700; color: white; margin-bottom: 0.4rem;">
            Patient Bookings
        </h1>
        <p style="color: var(--text-muted); font-size: 0.95rem; margin: 0;">
            View all appointments and bookings for <strong>{{ $tenant->name }}</strong>.
        </p>
    </div>
</div>

<div class="form-section" style="margin-top: 0; padding: 2rem; background: rgba(17, 24, 39, 0.4); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.05);">
    @if($bookings->isEmpty())
        <div style="text-align: center; padding: 3rem; color: var(--text-muted);">
            <div style="font-size: 3rem; margin-bottom: 1rem;">📅</div>
            <h3>No Bookings Found</h3>
            <p>You don't have any appointments booked yet.</p>
        </div>
    @else
        <div style="overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse; text-align: left; color: white;">
                <thead>
                    <tr style="border-bottom: 1px solid rgba(255,255,255,0.1); color: var(--primary-light);">
                        <th style="padding: 1rem;">Date & Time</th>
                        <th style="padding: 1rem;">Patient Name</th>
                        <th style="padding: 1rem;">Session Type</th>
                        <th style="padding: 1rem;">Fees</th>
                        <th style="padding: 1rem;">Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($bookings as $booking)
                        <tr style="border-bottom: 1px solid rgba(255,255,255,0.05); transition: background 0.2s;" onmouseover="this.style.background='rgba(255,255,255,0.03)'" onmouseout="this.style.background='transparent'">
                            <td style="padding: 1rem;">
                                <strong>{{ $booking->date }}</strong><br>
                                <span style="color: var(--text-muted); font-size: 0.85rem;">{{ $booking->time }}</span>
                            </td>
                            <td style="padding: 1rem;">
                                {{ $booking->user ? $booking->user->name : 'N/A' }}
                            </td>
                            <td style="padding: 1rem;">
                                {{ $booking->sessionType ? $booking->sessionType->name : 'Standard Session' }}
                            </td>
                            <td style="padding: 1rem;">
                                ₹{{ number_format($booking->fees, 2) }}
                            </td>
                            <td style="padding: 1rem;">
                                <span style="background: {{ $booking->status === 'pending' ? 'rgba(245, 158, 11, 0.2)' : 'rgba(16, 185, 129, 0.2)' }}; color: {{ $booking->status === 'pending' ? '#FCD34D' : '#34D399' }}; padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase;">
                                    {{ $booking->status }}
                                </span>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>
@endsection