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

@push('styles')
<style>


.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:'Outfit',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 CARD — FIXED */
.booking-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px 24px;margin-bottom:14px;transition:all .25s;position:relative}
.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-top{display:flex;align-items:flex-start;gap:16px}
.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:.97rem;margin-bottom:2px;color:var(--text)}
.bc-spec{font-size:.78rem;color:var(--text-muted);margin-bottom:8px}
.bc-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:.78rem;color:var(--text-muted)}
.bc-meta span{display:flex;align-items:center;gap:5px;white-space:nowrap}
.bc-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0;min-width:110px}

/* BADGE */
.badge{padding:5px 12px;border-radius:8px;font-size:.72rem;font-weight:700;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.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)}

/* MESSAGE */
.bc-message{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.bc-message-label{font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);margin-bottom:5px}
.bc-message-text{font-size:.86rem;color:var(--text);line-height:1.6}

/* 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}

/* TOAST */
.toast-notification{position:fixed;bottom:30px;right:30px;z-index:9999;background:#1a2e1a;border:1px solid rgba(0,212,161,.4);color:#00D4A1;border-radius:12px;padding:14px 22px;font-weight:600;font-size:.875rem;display:flex;align-items:center;gap:10px;box-shadow:0 12px 40px rgba(0,0,0,.4);transform:translateY(100px);opacity:0;transition:all .4s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.toast-notification.show{transform:translateY(0);opacity:1}
.toast-notification.toast-error{background:#2e1a1a;border-color:rgba(252,129,129,.4);color:#FC8181}

/* REMOVE ANIMATION */
.booking-card.removing{opacity:0;transform:translateX(30px) scale(.97);pointer-events:none;max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;overflow:hidden;transition:opacity .3s ease, transform .3s ease, max-height .4s ease .15s, margin-bottom .4s ease .15s, padding .4s ease .15s}

/* CANCEL BTN */
.btn-cancel{background:rgba(229,62,62,.1);color:#FC8181;border:1px solid rgba(229,62,62,.2);border-radius:8px;padding:6px 14px;font-size:.78rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .2s;font-family:inherit}
.btn-cancel:hover{background:rgba(229,62,62,.2);border-color:rgba(229,62,62,.4)}
.btn-cancel:disabled{opacity:.5;cursor:not-allowed}

@media(max-width:1024px){.stats-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
    .bc-top{flex-wrap:wrap}
    .bc-side{flex-direction:row;align-items:center;width:100%;justify-content:flex-start;min-width:unset;flex-wrap:wrap}
    .stats-row{grid-template-columns:repeat(2,1fr)}
    .page-body{padding:24px 4%}
    .booking-card{padding:16px}
}
</style>
@endpush

@section('content')

{{-- TOAST NOTIFICATION --}}
<div class="toast-notification" id="toastMsg">
    <i class="fas fa-circle-check" id="toastIcon"></i>
    <span id="toastText">Done</span>
</div>

{{-- 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:'Outfit',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 — uses all bookings for accurate counts --}}
    @php
        $allStats = \App\Models\Booking::where('user_id', auth()->id())->get();
        $total     = $allStats->count();
        $pending   = $allStats->where('status','pending')->count();
        $confirmed = $allStats->where('status','confirmed')->count();
        $completed = $allStats->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" id="statTotal">{{ $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" id="statPending">{{ $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 --}}
    <div id="bookingsList">
    @forelse($bookings as $b)
    <div class="booking-card" id="booking-{{ $b->id }}">

        <div class="bc-top">
            {{-- 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 class="bc-spec">{{ $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>

            {{-- SIDE: badge + action --}}
            <div class="bc-side">
                <span class="badge {{ $b->status == 'confirmed' ? 'badge-success' : ($b->status == 'pending' ? 'badge-warning' : ($b->status == 'completed' ? 'badge-primary' : 'badge-danger')) }}">
                    @if($b->status=='confirmed') ✅ @elseif($b->status=='pending') ⏳ @elseif($b->status=='completed') 🎓 @else ❌ @endif
                    {{ ucfirst($b->status) }}
                </span>

                @if($b->status == 'pending')
                <button
                    class="btn-cancel"
                    data-id="{{ $b->id }}"
                    data-url="{{ route('dashboard.bookings.cancel', $b->id) }}"
                    onclick="cancelBooking(this)">
                    <i class="fas fa-xmark"></i> Cancel
                </button>
                @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
                </a>
                @endif
            </div>
        </div>

        {{-- MESSAGE --}}
        @if($b->student_message)
        <div class="bc-message">
            <div class="bc-message-label">Your Message</div>
            <div class="bc-message-text">{{ $b->student_message }}</div>
        </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
    </div>

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

</div>

@push('scripts')
<script>
const CSRF = document.querySelector('meta[name="csrf-token"]')?.content ?? '';

function showToast(msg, isError = false) {
    const t = document.getElementById('toastMsg');
    document.getElementById('toastText').textContent = msg;
    document.getElementById('toastIcon').className = isError ? 'fas fa-circle-xmark' : 'fas fa-circle-check';
    t.classList.toggle('toast-error', isError);
    t.classList.add('show');
    setTimeout(() => t.classList.remove('show'), 3500);
}

function cancelBooking(btn) {
    if (!confirm('Cancel this booking?')) return;

    const bookingId = btn.dataset.id;
    const url = btn.dataset.url;
    const card = document.getElementById('booking-' + bookingId);

    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Cancelling...';

    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRF-TOKEN': CSRF,
            'Accept': 'application/json',
        },
        body: '_method=DELETE&_token=' + encodeURIComponent(CSRF)
    })
    .then(res => {
        // Success or redirect both mean the server processed it
        if (res.ok || res.status === 302 || res.redirected) {
            removeCard(card);
            showToast('Booking cancelled successfully');
        } else {
            return res.json().catch(() => ({})).then(data => {
                throw new Error(data.message || 'Cancellation failed. Please try again.');
            });
        }
    })
    .catch(err => {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-xmark"></i> Cancel';
        showToast(err.message || 'Something went wrong.', true);
    });
}

function removeCard(card) {
    card.classList.add('removing');
    setTimeout(() => {
        card.remove();
        checkEmpty();
        // Update stat counters
        adjustStat('statPending', -1);
        adjustStat('statTotal', -1);
    }, 500);
}

function adjustStat(id, delta) {
    const el = document.getElementById(id);
    if (el) el.textContent = Math.max(0, (parseInt(el.textContent) || 0) + delta);
}

function checkEmpty() {
    const list = document.getElementById('bookingsList');
    if (!list) return;
    const cards = list.querySelectorAll('.booking-card');
    if (cards.length === 0) {
        list.innerHTML = `
            <div class="empty-state">
                <div class="es-icon">📭</div>
                <h3>No bookings found</h3>
                <p>No pending bookings. <a href="{{ route('dashboard.bookings') }}" style="color:#A78BFA">View all bookings</a></p>
                <a href="{{ route('counselors.index') }}" class="btn btn-primary btn-sm">
                    <i class="fas fa-user-tie"></i> Find a Counselor
                </a>
            </div>`;
    }
}

// Show session flash toasts
@if(session('success'))
    window.addEventListener('DOMContentLoaded', () => showToast(@json(session('success'))));
@endif
@if(session('error'))
    window.addEventListener('DOMContentLoaded', () => showToast(@json(session('error')), true));
@endif
</script>
@endpush

@endsection