@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:'Outfit',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>
                        {{-- FIXED FORM --}}
                        <form 
                            action="{{ route('admin.bookings.status', $booking->id) }}" 
                            method="POST" 
                            style="display:flex;gap:4px"
                        >
                            @csrf

                            <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