@extends('layouts.app')
@section('title', 'Booking Confirmed — CareerPath')

@push('styles')
<style>
    .confirm-wrap{min-height:90vh;display:flex;align-items:center;justify-content:center;padding:60px 5%;background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(0,212,161,.08) 0%,transparent 70%)}
    .confirm-card{background:var(--card);border:1px solid rgba(0,212,161,.2);border-radius:24px;padding:50px;max-width:560px;width:100%;position:relative;overflow:hidden;text-align:center}
    .confirm-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#00D4A1,#6C3FE8,#FF6B35)}
    .check-anim{width:80px;height:80px;border-radius:50%;background:rgba(0,212,161,.15);border:3px solid rgba(0,212,161,.5);display:flex;align-items:center;justify-content:center;font-size:2.2rem;margin:0 auto 24px;animation:bounce .6s ease}
    @keyframes bounce{0%{transform:scale(0);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
    .booking-summary{background:var(--dark-3);border-radius:14px;padding:20px;margin:24px 0;text-align:left}
    .sum-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:.875rem}
    .sum-row:last-child{border-bottom:none}
</style>
@endpush

@section('content')
<div class="confirm-wrap">
    <div class="confirm-card">
        <div class="check-anim">🎉</div>
        <h1 style="font-family:'Outfit',sans-serif;font-size:1.7rem;font-weight:800;margin-bottom:8px">You're All Set!</h1>
        <p style="color:var(--text-muted);line-height:1.7">Your session with <strong style="color:var(--text)">{{ $booking->counselor->user->name ?? 'the counselor' }}</strong> is booked. You'll receive a confirmation email shortly.</p>

        <div class="booking-summary">
            <div class="sum-row">
                <span style="color:var(--text-muted)">Booking ID</span>
                <span style="font-weight:700;font-family:monospace">#{{ str_pad($booking->id, 5, '0', STR_PAD_LEFT) }}</span>
            </div>
            <div class="sum-row">
                <span style="color:var(--text-muted)">Date</span>
                <span style="font-weight:600">{{ optional($booking->booking_date)->format('D, d M Y') ?? '—' }}</span>
            </div>
            <div class="sum-row">
                <span style="color:var(--text-muted)">Time</span>
                <span style="font-weight:600">{{ $booking->booking_time ?? '—' }}</span>
            </div>
            <div class="sum-row">
                <span style="color:var(--text-muted)">Type</span>
                <span style="font-weight:600">{{ ucfirst($booking->meeting_type ?? 'Online') }}</span>
            </div>
            <div class="sum-row">
                <span style="color:var(--text-muted)">Fee</span>
                <span style="font-weight:700;color:var(--accent)">PKR {{ number_format($booking->fee ?? 0) }}</span>
            </div>
            <div class="sum-row">
                <span style="color:var(--text-muted)">Status</span>
                <span class="badge badge-warning">⏳ {{ ucfirst($booking->status) }}</span>
            </div>
        </div>

        <div style="background:rgba(108,63,232,.08);border:1px solid rgba(108,63,232,.15);border-radius:12px;padding:14px;margin-bottom:24px;font-size:.83rem;color:var(--text-muted)">
            <i class="fas fa-bell" style="color:#A78BFA;margin-right:8px"></i>
            The counselor will confirm within 24 hours. Check your email for updates.
        </div>

        <div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap">
            <a href="{{ url('/') }}" class="btn btn-primary"><i class="fas fa-house"></i> Go Home</a>
            <a href="{{ route('careers.index') }}" class="btn btn-outline"><i class="fas fa-compass"></i> Explore Careers</a>
        </div>
    </div>
</div>
@endsection