<?php
include 'header.php';
if (!isset($_SESSION["USER_LOGIN"])){
      echo '<script>window.location.href = "login.php";</script>';
}
  

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// Initialize variables
$msg = "";
$err = "";
$bookings = [];
$total_bookings = 0;

// Fetch total bookings
if (empty($err)) {
    $query = "SELECT COUNT(*) as total
              FROM payments
              WHERE userid = $user_id AND type IN ('Event', 'Meetup', 'Fan Card Purchase')";
    $result = mysqli_query($link, $query);
    if ($result) {
        $stats = mysqli_fetch_assoc($result);
        $total_bookings = $stats['total'];
    } else {
        $err = "Failed to fetch booking stats: " . mysqli_error($link);
    }
}

// Fetch bookings
if (empty($err)) {
    $query = "SELECT p.id, p.amount, p.status, p.event_name, p.meetup_date, p.meetup_time, p.event_time, p.event_date, p.duration_hours, p.location, p.special_requests, p.type, p.created_at,
                     c.name as name, c.image as image, c.category as celebrity_category
              FROM payments p
              LEFT JOIN celebrities c ON p.celebrity_id = c.id
              WHERE p.userid = $user_id AND p.type IN ('Event', 'Meetup', 'Fan Card Purchase')
              ORDER BY p.created_at DESC";
    $result = mysqli_query($link, $query);
    if ($result) {
        while ($row = mysqli_fetch_assoc($result)) {
            $bookings[] = $row;
        }
    } else {
        $err = "Failed to fetch bookings: " . mysqli_error($link);
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Bookings - User Dashboard</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <meta name="csrf-token" content="KM5EnItCap3TL8nux8waUAAOvZgA0DvbjTGJOMsF">
    <style>
        .page-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2.5rem 0;
            border-radius: 0 0 25px 25px;
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }

        .page-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.08"><circle cx="10" cy="10" r="1.5"/><circle cx="30" cy="10" r="1.5"/><circle cx="10" cy="30" r="1.5"/><circle cx="30" cy="30" r="1.5"/></g></g></svg>');
        }

        .page-content {
            position: relative;
            z-index: 2;
        }

        .back-btn {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            padding: 0.6rem 1.2rem;
            color: white;
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.9rem;
        }

        .back-btn:hover {
            background: rgba(255, 255, 255, 0.25);
            color: white;
            transform: translateX(-3px);
            text-decoration: none;
        }

        .stats-card {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            padding: 1rem 1.5rem;
            color: white;
            text-align: center;
            margin-left: 1rem;
        }

        .booking-card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            margin-bottom: 1.5rem;
            overflow: hidden;
            transition: all 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .booking-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        }

        .booking-header {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            padding: 1.5rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .celebrity-section {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .celebrity-avatar {
            width: 70px;
            height: 70px;
            border-radius: 16px;
            object-fit: cover;
            border: 3px solid white;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .celebrity-placeholder {
            width: 70px;
            height: 70px;
            border-radius: 16px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            font-weight: bold;
            border: 3px solid white;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .celebrity-details h5 {
            font-size: 1.2rem;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 0.25rem;
        }

        .celebrity-details p {
            color: #64748b;
            margin-bottom: 0;
            font-size: 0.9rem;
        }

        .booking-meta-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .booking-id {
            font-size: 0.85rem;
            color: #64748b;
            font-weight: 600;
            background: rgba(102, 126, 234, 0.1);
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
        }

        .booking-type {
            padding: 0.4rem 1rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .type-meetup {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
        }

        .type-event {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            color: white;
        }

        .booking-body {
            padding: 1.5rem;
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .info-item {
            text-align: center;
        }

        .info-label {
            font-size: 0.8rem;
            color: #64748b;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .info-value {
            font-size: 1rem;
            font-weight: 600;
            color: #1e293b;
        }

        .amount-display {
            font-size: 1.8rem;
            font-weight: 800;
            color: #059669;
            text-align: center;
            margin-bottom: 1rem;
        }

        .status-section {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .status-badge {
            padding: 0.6rem 1.2rem;
            border-radius: 25px;
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .status-confirmed {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
        }

        .status-pending {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: white;
        }

        .status-processing {
            background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
            color: white;
        }

        .status-cancelled {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            color: white;
        }

        .actions-section {
            display: flex;
            justify-content: center;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .action-btn {
            padding: 0.6rem 1.2rem;
            border-radius: 10px;
            font-weight: 600;
            font-size: 0.85rem;
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            border: none;
            cursor: pointer;
            min-width: 100px;
            justify-content: center;
        }

        .action-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            text-decoration: none;
        }

        .btn-details {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .btn-pay {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: white;
        }

        .btn-confirmed {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            cursor: default;
        }

        .btn-confirmed:hover {
            transform: none;
            box-shadow: none;
        }

        .btn-processing {
            background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
            color: white;
            cursor: default;
        }

        .btn-processing:hover {
            transform: none;
            box-shadow: none;
        }

        .special-requests {
            background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
            border-radius: 12px;
            padding: 1rem;
            margin-top: 1rem;
            border-left: 4px solid #8b5cf6;
        }

        .special-requests h6 {
            color: #5b21b6;
            font-weight: 700;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }

        .special-requests p {
            color: #6b21a8;
            margin: 0;
            font-size: 0.9rem;
            line-height: 1.5;
        }

        .empty-state {
            background: white;
            border-radius: 20px;
            padding: 4rem 2rem;
            text-align: center;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }

        .empty-icon {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 2rem;
            font-size: 3rem;
            color: white;
        }

        @media (max-width: 768px) {
            .page-header {
                padding: 2rem 0;
            }

            .celebrity-section {
                flex-direction: column;
                text-align: center;
            }

            .booking-meta-row {
                flex-direction: column;
                align-items: center;
                gap: 0.5rem;
            }

            .info-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .actions-section {
                flex-direction: column;
            }

            .action-btn {
                width: 100%;
            }

            .stats-card {
                margin-left: 0;
                margin-top: 1rem;
            }
        }
    </style>
</head>
<body>
    <main class="flex-grow-1" style="padding-top: 80px;">
        <?php if ($err): ?>
            <div class="container mt-3">
                <div class="alert alert-danger alert-dismissible fade show glass-card" role="alert">
                    <i class="fas fa-exclamation-circle me-2"></i><?php echo htmlspecialchars($err); ?>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            </div>
        <?php endif; ?>

        <div class="container-fluid px-0">
            <!-- Page Header -->
            <div class="page-header">
                <div class="container">
                    <div class="page-content">
                        <div class="d-flex justify-content-between align-items-center flex-wrap">
                            <div>
                                <h1 class="h2 fw-bold mb-2">
                                    <i class="fas fa-calendar-alt me-2"></i>
                                    My Bookings
                                </h1>
                                <p class="opacity-90 mb-0">Manage your celebrity bookings and experiences</p>
                            </div>
                            <div class="d-flex align-items-center flex-wrap">
                                <a href="dashboard.php" class="back-btn">
                                    <i class="fas fa-arrow-left"></i>
                                    Dashboard
                                </a>
                                <div class="stats-card">
                                    <div class="fw-bold fs-5"><?php echo $total_bookings; ?></div>
                                    <div class="small">Total Bookings</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container py-4">
            <?php if (empty($bookings)): ?>
                <div class="empty-state">
                    <div class="empty-icon">
                        <i class="fas fa-calendar-alt"></i>
                    </div>
                    <h3>No Bookings Found</h3>
                    <p>Start booking your celebrity experiences today!</p>
                    <a href="celebrities.php" class="action-btn btn-details">
                        <i class="fas fa-star"></i>
                        Book Now
                    </a>
                </div>
            <?php else: ?>
                <?php foreach ($bookings as $booking): ?>
                    <div class="booking-card">
                        <!-- Booking Header -->
                        <div class="booking-header">
                            <div class="celebrity-section">
                                <?php if ($booking['image']): ?>
                                    <img src="uploads/celebrities/<?php echo htmlspecialchars($booking['image']); ?>" alt="<?php echo htmlspecialchars($booking['name']); ?>" class="celebrity-avatar">
                                <?php else: ?>
                                    <div class="celebrity-placeholder"><?php echo strtoupper(substr($booking['name'], 0, 1)); ?></div>
                                <?php endif; ?>
                                <div class="celebrity-details">
                                    <h5><?php echo htmlspecialchars($booking['name'] ?? 'Unknown Celebrity'); ?></h5>
                                    <p><?php echo htmlspecialchars($booking['celebrity_category'] ?? 'Unknown Category'); ?></p>
                                </div>
                            </div>
                            <div class="booking-meta-row">
                                <span class="booking-id">#<?php echo $booking['id']; ?></span>
                                <span class="booking-type type-<?php echo strtolower($booking['type']); ?>">
                                    <i class="fas fa-star me-1"></i>
                                    <?php echo htmlspecialchars($booking['type']); ?>
                                </span>
                            </div>
                        </div>

                        <!-- Booking Body -->
                        <div class="booking-body">
                            <!-- Amount Display -->
                            <div class="amount-display">
                                $<?php echo number_format($booking['amount'], 2); ?>
                            </div>

                            <!-- Booking Information Grid -->
                            <div class="info-grid">
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-calendar"></i>
                                        Date & Time
                                    </div>
                                    <?php 
                                        if($booking['type'] == 'Fan Card Purchase'){
                                    ?>
                                    <div class="info-value">
                                        <?php echo $booking['meetup_date'] ? date('M j, Y', strtotime($booking['meetup_date'])) : 'TBD'; ?>
                                        <br>
                                        <small class="text-muted"><?php echo $booking['meetup_time'] ?: 'TBD'; ?></small>
                                    </div>
                                    <?php }elseif($booking['type'] == 'Event'){ ?>
                                    <div class="info-value">
                                        <?php echo $booking['event_date'] ? date('M j, Y', strtotime($booking['event_date'])) : 'TBD'; ?>
                                        <br>
                                        <small class="text-muted"><?php echo $booking['event_time'] ?: 'TBD'; ?></small>
                                    </div>
                                    
                                    <?php }else{ ?>
                                         <div class="info-value">
                                            <?php echo $booking['meetup_date'] ? date('M j, Y', strtotime($booking['meetup_date'])) : 'TBD'; ?>
                                            <br>
                                            <small class="text-muted"><?php echo $booking['meetup_time'] ?: 'TBD'; ?></small>
                                        </div>
                                    <?php } ?>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-clock"></i>
                                        Duration
                                    </div>
                                    <div class="info-value">
                                        <?php echo $booking['duration_hours'] ? number_format($booking['duration_hours'], 2) . ' hours' : 'TBD'; ?>
                                    </div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-map-marker-alt"></i>
                                        Location
                                    </div>
                                    <div class="info-value"><?php echo htmlspecialchars($booking['location'] ?: 'TBD'); ?></div>
                                </div>
                            </div>

                            <!-- Status Section -->
                            <div class="status-section">
                                <span class="status-badge status-<?php echo strtolower($booking['status']); ?>">
                                    <i class="fas <?php
                                    if ($txn['status'] === 'Pending') {
                                        echo 'fa-clock text-warning';
                                    } elseif ($txn['status'] === 'Completed') {
                                        echo 'fa-check-circle text-success';
                                    }
                                ?>"></i>
                                    <?php echo htmlspecialchars($booking['status']); ?>
                                </span>
                            </div>

                            <!-- Actions Section -->
                            <!--<div class="actions-section">-->
                            <!--    <a href="booking-details.php?id=<?php echo $booking['id']; ?>" class="action-btn btn-details">-->
                            <!--        <i class="fas fa-eye"></i>-->
                            <!--        View Details-->
                            <!--    </a>-->
                               
                            <!--</div>-->

                            <!-- Special Requests -->
                            <?php if ($booking['special_requests']): ?>
                                <div class="special-requests">
                                    <h6>
                                        <i class="fas fa-comment-alt me-2"></i>
                                        Special Requests
                                    </h6>
                                    <p><?php echo htmlspecialchars($booking['special_requests']); ?></p>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>

            <!-- Pagination -->
            <div class="d-flex justify-content-center mt-4">
                <!-- Add pagination logic here if needed -->
            </div>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const bookingCards = document.querySelectorAll('.booking-card');
                bookingCards.forEach((card, index) => {
                    card.style.opacity = '0';
                    card.style.transform = 'translateY(20px)';
                    setTimeout(() => {
                        card.style.transition = 'all 0.5s ease';
                        card.style.opacity = '1';
                        card.style.transform = 'translateY(0)';
                    }, index * 100);
                });
            });
        </script>
    </main>

    <?php include 'footer.php'; ?>
</body>
</html>