@extends('layouts.admin')
@section('title', 'Bookings')
@section('page-title', 'Bookings')

@section('content')
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px">
    <div>
        <h2 style="font-family:'Syne',sans-serif;font-size:1.4rem;font-weight:800">Bookings</h2>
        <p style="color:var(--text-muted);font-size:.85rem;margin-top:4px">{{ $bookings->total() }} total bookings</p>
    </div>
    <div style="display:flex;gap:10px;flex-wrap:wrap">
        <form action="" method="GET" style="display:flex;gap:8px">
            <select name="status" class="form-control" style="width:150px" onchange="this.form.submit()">
                <option value="">All Status</option>
                <option value="pending" {{ request('status')=='pending'?'selected':'' }}>Pending</option>
                <option value="confirmed" {{ request('status')=='confirmed'?'selected':'' }}>Confirmed</option>
                <option value="cancelled" {{ request('status')=='cancelled'?'selected':'' }}>Cancelled</option>
                <option value="completed" {{ request('status')=='completed'?'selected':'' }}>Completed</option>
            </select>
        </form>
    </div>
</div>

<!-- QUICK STATS -->
<div class="grid-4" style="margin-bottom:24px">
    @php
    $pending   = $bookings->where('status','pending')->count();
    $confirmed = $bookings->where('status','confirmed')->count();
    $completed = $bookings->where('status','completed')->count();
    $cancelled = $bookings->where('status','cancelled')->count();
    @endphp
    <div style="background:rgba(255,107,53,.1);border:1px solid rgba(255,107,53,.2);border-radius:12px;padding:16px;text-align:center">
        <div style="font-size:1.5rem;font-weight:800;color:#FF6B35">{{ $pending }}</div>
        <div style="font-size:.8rem;color:var(--text-muted)">Pending</div>
    </div>
    <div style="background:rgba(0,212,161,.1);border:1px solid rgba(0,212,161,.2);border-radius:12px;padding:16px;text-align:center">
        <div style="font-size:1.5rem;font-weight:800;color:#00D4A1">{{ $confirmed }}</div>
        <div style="font-size:.8rem;color:var(--text-muted)">Confirmed</div>
    </div>
    <div style="background:rgba(108,63,232,.1);border:1px solid rgba(108,63,232,.2);border-radius:12px;padding:16px;text-align:center">
        <div style="font-size:1.5rem;font-weight:800;color:#A78BFA">{{ $completed }}</div>
        <div style="font-size:.8rem;color:var(--text-muted)">Completed</div>
    </div>
    <div style="background:rgba(229,62,62,.1);border:1px solid rgba(229,62,62,.2);border-radius:12px;padding:16px;text-align:center">
        <div style="font-size:1.5rem;font-weight:800;color:#FC8181">{{ $cancelled }}</div>
        <div style="font-size:.8rem;color:var(--text-muted)">Cancelled</div>
    </div>
</div>

<div class="card" style="padding:0">
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Student</th>
                    <th>Counselor</th>
                    <th>Date & Time</th>
                    <th>Type</th>
                    <th>Fee</th>
                    <th>Payment</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($bookings as $booking)
                <tr>
                    <td style="color:var(--text-muted);font-size:.8rem">#{{ $booking->id }}</td>
                    <td>
                        <div style="display:flex;align-items:center;gap:8px">
                            <div class="avatar" style="width:30px;height:30px;font-size:.7rem">{{ substr($booking->user->name??'U',0,1) }}</div>
                            <span style="font-size:.875rem;font-weight:500">{{ $booking->user->name ?? 'N/A' }}</span>
                        </div>
                    </td>
                    <td style="font-size:.875rem">{{ $booking->counselor->user->name ?? 'N/A' }}</td>
                    <td>
                        <div style="font-size:.83rem;font-weight:500">{{ optional($booking->booking_date)->format('d M Y') }}</div>
                        <div style="font-size:.75rem;color:var(--text-muted)">{{ $booking->booking_time }}</div>
                    </td>
                    <td>
                        <span class="badge badge-info">{{ ucfirst($booking->meeting_type ?? 'online') }}</span>
                    </td>
                    <td style="font-weight:600;color:var(--accent);font-size:.875rem">PKR {{ number_format($booking->fee) }}</td>
                    <td>
                        <span class="badge {{ $booking->payment_status=='paid'?'badge-success':'badge-warning' }}">{{ ucfirst($booking->payment_status ?? 'unpaid') }}</span>
                    </td>
                    <td>
                        <span class="badge {{ $booking->status=='confirmed'?'badge-success':($booking->status=='pending'?'badge-warning':($booking->status=='completed'?'badge-primary':'badge-danger')) }}">{{ ucfirst($booking->status) }}</span>
                    </td>
                    <td>
                        <form action="{{ route('admin.bookings.status', $booking->id) }}" method="POST" style="display:flex;gap:4px">
                            @csrf @method('PUT')
                            <select name="status" class="form-control" style="width:130px;padding:6px 10px;font-size:.8rem">
                                <option value="pending" {{ $booking->status=='pending'?'selected':'' }}>Pending</option>
                                <option value="confirmed" {{ $booking->status=='confirmed'?'selected':'' }}>Confirmed</option>
                                <option value="completed" {{ $booking->status=='completed'?'selected':'' }}>Completed</option>
                                <option value="cancelled" {{ $booking->status=='cancelled'?'selected':'' }}>Cancelled</option>
                            </select>
                            <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-check"></i></button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="9" style="text-align:center;padding:50px;color:var(--text-muted)">
                        <i class="fas fa-calendar-xmark" style="font-size:2.5rem;margin-bottom:12px;display:block;opacity:.4"></i>
                        No bookings found
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@if($bookings->hasPages())
<div style="margin-top:20px">{{ $bookings->links() }}</div>
@endif
@endsection