@extends('layouts.app')
@section('title', 'My Bookings — CareerPath')

@push('styles')
<style>
:root{--primary:#6C3FE8;--secondary:#FF6B35;--accent:#00D4A1;--dark:#0D0D1A;--dark-2:#13131F;--dark-3:#1A1A2E;--card:#1E1E30;--card-2:#252538;--border:rgba(255,255,255,0.08);--text:#E8E8F0;--text-muted:#8888A8;--gradient:linear-gradient(135deg,#6C3FE8 0%,#A855F7 50%,#FF6B35 100%)}

.page-hero{background:linear-gradient(135deg,rgba(108,63,232,.18) 0%,rgba(255,107,53,.06) 100%),var(--dark-2);border-bottom:1px solid var(--border);padding:36px 5% 32px}
.hero-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.page-body{max-width:1280px;margin:0 auto;padding:36px 5%}

/* STATS */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
.scard{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden;transition:all .3s}
.scard::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient)}
.scard:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(108,63,232,.12)}
.scard-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.scard-num{font-family:'Syne',sans-serif;font-size:1.6rem;font-weight:800;line-height:1}
.scard-lbl{font-size:.73rem;color:var(--text-muted);margin-top:2px}

/* FILTER BAR */
.filter-bar{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.filter-pill{padding:7px 16px;border-radius:50px;font-size:.8rem;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--card);color:var(--text-muted);text-decoration:none;transition:all .2s}
.filter-pill:hover,.filter-pill.active{background:rgba(108,63,232,.2);border-color:rgba(108,63,232,.4);color:#A78BFA}

/* BOOKING CARDS */
.booking-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px;margin-bottom:14px;display:flex;align-items:center;gap:18px;transition:all .25s}
.booking-card:last-child{margin-bottom:0}
.booking-card:hover{border-color:rgba(108,63,232,.25);box-shadow:0 8px 24px rgba(108,63,232,.1)}
.bc-avatar{width:52px;height:52px;border-radius:50%;background:var(--gradient);display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800;color:white;flex-shrink:0;border:2px solid rgba(108,63,232,.3)}
.bc-info{flex:1;min-width:0}
.bc-name{font-weight:700;font-size:.95rem;margin-bottom:4px}
.bc-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:.78rem;color:var(--text-muted)}
.bc-meta span{display:flex;align-items:center;gap:5px}
.bc-actions{display:flex;gap:8px;flex-shrink:0}

/* BADGE */
.badge{padding:4px 10px;border-radius:6px;font-size:.72rem;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.badge-success{background:rgba(0,212,161,.15);color:#00D4A1;border:1px solid rgba(0,212,161,.3)}
.badge-warning{background:rgba(255,107,53,.15);color:#FF6B35;border:1px solid rgba(255,107,53,.3)}
.badge-danger{background:rgba(229,62,62,.15);color:#FC8181;border:1px solid rgba(229,62,62,.3)}
.badge-primary{background:rgba(108,63,232,.2);color:#A78BFA;border:1px solid rgba(108,63,232,.3)}
.badge-muted{background:rgba(136,136,168,.1);color:var(--text-muted);border:1px solid rgba(136,136,168,.2)}

/* EMPTY STATE */
.empty-state{text-align:center;padding:70px 20px}
.empty-state .es-icon{font-size:4rem;margin-bottom:16px}
.empty-state h3{font-size:1.1rem;font-weight:700;margin-bottom:8px}
.empty-state p{color:var(--text-muted);font-size:.875rem;margin-bottom:20px}

/* EXPAND DETAIL */
.bc-detail{display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);font-size:.83rem;color:var(--text-muted);display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.detail-item{background:var(--dark-3);border-radius:10px;padding:12px 14px}
.detail-item .di-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);margin-bottom:4px}
.detail-item .di-val{font-weight:600;font-size:.875rem;color:var(--text)}

@media(max-width:1024px){.stats-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
    .booking-card{flex-wrap:wrap}
    .bc-actions{width:100%}
    .bc-detail{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
    .stats-row{grid-template-columns:repeat(2,1fr)}
    .page-body{padding:24px 4%}
    .bc-detail{grid-template-columns:1fr}
}
</style>
@endpush

@section('content')

{{-- PAGE HERO --}}
<div class="page-hero">
    <div class="hero-inner">
        <div>
            <div style="display:flex;gap:6px;font-size:.8rem;color:var(--text-muted);align-items:center;margin-bottom:8px">
                <a href="{{ route('dashboard.index') }}" style="color:var(--text-muted);text-decoration:none">Dashboard</a>
                <i class="fas fa-chevron-right fa-xs"></i>
                <span style="color:var(--primary)">My Bookings</span>
            </div>
            <h1 style="font-family:'Syne',sans-serif;font-size:1.6rem;font-weight:800;margin-bottom:4px">
                📅 My Bookings
            </h1>
            <p style="color:var(--text-muted);font-size:.85rem">
                All your counseling sessions in one place
            </p>
        </div>
        <a href="{{ route('counselors.index') }}" class="btn btn-primary btn-sm">
            <i class="fas fa-plus"></i> Book New Session
        </a>
    </div>
</div>

<div class="page-body">

    {{-- STATS ROW --}}
    @php
        $total     = $bookings->total();
        $pending   = $bookings->getCollection()->where('status','pending')->count();
        $confirmed = $bookings->getCollection()->where('status','confirmed')->count();
        $completed = $bookings->getCollection()->where('status','completed')->count();
    @endphp
    <div class="stats-row">
        <div class="scard">
            <div class="scard-icon" style="background:rgba(108,63,232,.15)">📋</div>
            <div>
                <div class="scard-num" style="color:#A78BFA">{{ $total }}</div>
                <div class="scard-lbl">Total Sessions</div>
            </div>
        </div>
        <div class="scard">
            <div class="scard-icon" style="background:rgba(255,107,53,.12)">⏳</div>
            <div>
                <div class="scard-num" style="color:#FF6B35">{{ $pending }}</div>
                <div class="scard-lbl">Pending</div>
            </div>
        </div>
        <div class="scard">
            <div class="scard-icon" style="background:rgba(0,212,161,.12)">✅</div>
            <div>
                <div class="scard-num" style="color:#00D4A1">{{ $confirmed }}</div>
                <div class="scard-lbl">Confirmed</div>
            </div>
        </div>
        <div class="scard">
            <div class="scard-icon" style="background:rgba(251,191,36,.12)">🎓</div>
            <div>
                <div class="scard-num" style="color:#FBBF24">{{ $completed }}</div>
                <div class="scard-lbl">Completed</div>
            </div>
        </div>
    </div>

    {{-- FILTER BAR --}}
    <div class="filter-bar">
        <a href="{{ route('dashboard.bookings') }}" class="filter-pill {{ !request('status') ? 'active' : '' }}">
            All
        </a>
        @foreach(['pending' => '⏳ Pending', 'confirmed' => '✅ Confirmed', 'completed' => '🎓 Completed', 'cancelled' => '❌ Cancelled'] as $val => $label)
        <a href="{{ route('dashboard.bookings', ['status' => $val]) }}"
           class="filter-pill {{ request('status') == $val ? 'active' : '' }}">
            {{ $label }}
        </a>
        @endforeach
    </div>

    {{-- BOOKING LIST --}}
    @forelse($bookings as $b)
    <div class="booking-card">

        {{-- AVATAR --}}
        <div class="bc-avatar">
            {{ substr($b->counselor->user->name ?? 'C', 0, 1) }}
        </div>

        {{-- INFO --}}
        <div class="bc-info">
            <div class="bc-name">{{ $b->counselor->user->name ?? 'Counselor' }}</div>
            <div style="font-size:.78rem;color:var(--text-muted);margin-bottom:6px">
                {{ $b->counselor->specialization ?? 'Career Counselor' }}
            </div>
            <div class="bc-meta">
                <span><i class="fas fa-calendar fa-xs"></i> {{ optional($b->booking_date)->format('d M Y') ?? '—' }}</span>
                <span><i class="fas fa-clock fa-xs"></i> {{ $b->booking_time ?? '—' }}</span>
                <span><i class="fas fa-{{ $b->meeting_type == 'in-person' ? 'building' : 'video' }} fa-xs"></i> {{ ucfirst($b->meeting_type ?? 'Online') }}</span>
                <span><i class="fas fa-money-bill fa-xs"></i> PKR {{ number_format($b->fee ?? 0) }}</span>
            </div>
        </div>

        {{-- STATUS + ACTIONS --}}
        <div class="bc-actions" style="align-items:center">
            <span class="badge
                {{ $b->status == 'confirmed' ? 'badge-success' :
                   ($b->status == 'pending'   ? 'badge-warning' :
                   ($b->status == 'completed' ? 'badge-primary' : 'badge-danger')) }}">
                {{ ucfirst($b->status) }}
            </span>

            @if($b->status == 'pending')
            <form action="{{ route('dashboard.bookings.cancel', $b->id) }}" method="POST"
                  onsubmit="return confirm('Cancel this booking?')">
                @csrf @method('DELETE')
                <button type="submit" class="btn btn-sm"
                        style="background:rgba(229,62,62,.12);color:#FC8181;border:1px solid rgba(229,62,62,.2)">
                    <i class="fas fa-xmark"></i> Cancel
                </button>
            </form>
            @endif

            @if($b->status == 'confirmed')
            <a href="{{ route('counselors.show', $b->counselor->id) }}" class="btn btn-outline btn-sm">
                <i class="fas fa-user-tie"></i> View Counselor
            </a>
            @endif
        </div>

        {{-- EXPANDABLE DETAILS --}}
        @if($b->student_message)
        <div style="width:100%;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)">
            <p style="font-size:.8rem;color:var(--text-muted);margin-bottom:4px;font-weight:600;text-transform:uppercase;letter-spacing:.5px">Your Message</p>
            <p style="font-size:.85rem;color:var(--text);line-height:1.6">{{ $b->student_message }}</p>
        </div>
        @endif

    </div>
    @empty
    <div class="empty-state">
        <div class="es-icon">📭</div>
        <h3>No bookings found</h3>
        <p>
            @if(request('status'))
                No {{ request('status') }} bookings. Try a different filter.
            @else
                You haven't booked any sessions yet.
            @endif
        </p>
        @if(request('status'))
        <a href="{{ route('dashboard.bookings') }}" class="btn btn-outline btn-sm" style="margin-right:8px">
            <i class="fas fa-arrow-left"></i> View All
        </a>
        @endif
        <a href="{{ route('counselors.index') }}" class="btn btn-primary btn-sm">
            <i class="fas fa-user-tie"></i> Find a Counselor
        </a>
    </div>
    @endforelse

    {{-- PAGINATION --}}
    @if($bookings->hasPages())
    <div style="margin-top:28px;display:flex;justify-content:center">
        {{ $bookings->appends(request()->query())->links() }}
    </div>
    @endif

</div>

@endsection