<?php
include 'header.php';

// Check payment session
if (!isset($_SESSION['payment']) ) {
    $err = "No valid payment session found";
    echo "<div class='alert alert-danger'>$err</div>";
     echo '<script>window.location.href = "celebrities.php";</script>';
    exit();
}


$amount = floatval($_SESSION['payment']['amount']);
$type = mysqli_real_escape_string($link, $_SESSION['payment']['type']);
$meetup_date = mysqli_real_escape_string($link, $_SESSION['payment']['meetup_date']);
$meetup_time = mysqli_real_escape_string($link, $_SESSION['payment']['meetup_time']);
$location = mysqli_real_escape_string($link, $_SESSION['payment']['location']);
$purpose = mysqli_real_escape_string($link, $_SESSION['payment']['purpose']);
$special_requests = mysqli_real_escape_string($link, $_SESSION['payment']['special_requests']);
$celebrities_name = mysqli_real_escape_string($link, $_SESSION['payment']['celebrities_name']);
$celebrity_id = intval($_SESSION['payment']['celebrity_id']);

?>

    <main class="flex-grow-1" style="padding-top: 80px;">
        
        
        <style>
    .confirmation-header {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
        padding: 4rem 0;
        border-radius: 0 0 30px 30px;
        margin-bottom: 2rem;
        position: relative;
        overflow: hidden;
    }

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

    .confirmation-content {
        position: relative;
        z-index: 2;
        text-align: center;
    }

    .success-animation {
        width: 120px;
        height: 120px;
        margin: 0 auto 2rem;
        position: relative;
    }

    .checkmark-circle {
        width: 120px;
        height: 120px;
        position: relative;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        border: 4px solid rgba(255, 255, 255, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        animation: scaleIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .checkmark {
        width: 60px;
        height: 30px;
        border-bottom: 6px solid white;
        border-right: 6px solid white;
        transform: rotate(45deg);
        animation: checkmarkDraw 0.8s ease-in-out 0.3s both;
    }

    .confirmation-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        padding: 2rem;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        position: relative;
        overflow: hidden;
    }

    .confirmation-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 100%;
        background: rgba(16, 185, 129, 0.05);
        transform: rotate(45deg);
        transition: all 0.3s ease;
    }

    .booking-details-table {
        background: white;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        margin-bottom: 2rem;
    }

    .booking-details-table th {
        background: #f8f9fa;
        font-weight: 600;
        padding: 1rem;
        border: none;
        width: 30%;
    }

    .booking-details-table td {
        padding: 1rem;
        border: none;
        border-bottom: 1px solid #f1f3f4;
    }

    .booking-details-table tr:last-child td {
        border-bottom: none;
    }

    .highlight-row {
        background: rgba(16, 185, 129, 0.05);
        font-weight: 700;
        font-size: 1.1rem;
    }

    .highlight-row td {
        color: #059669;
    }

    .next-steps-card {
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        color: white;
        border-radius: 20px;
        padding: 2rem;
        margin-bottom: 2rem;
        position: relative;
        overflow: hidden;
    }

    .next-steps-card::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.1"><circle cx="8" cy="8" r="1"/><circle cx="32" cy="8" r="1"/><circle cx="8" cy="32" r="1"/><circle cx="32" cy="32" r="1"/></g></g></svg>');
    }

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

    .action-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    .btn-action {
        border-radius: 15px;
        padding: 1rem 2rem;
        font-weight: 600;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        min-width: 200px;
        justify-content: center;
    }

    .btn-primary-action {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
    }

    .btn-primary-action:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
        color: white;
    }

    .btn-secondary-action {
        background: rgba(255, 255, 255, 0.95);
        color: #4a5568;
        border: 2px solid #e2e8f0;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    }

    .btn-secondary-action:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        color: #2d3748;
    }

    .contact-info-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        padding: 2rem;
        text-align: center;
    }

    .contact-method {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        border-radius: 12px;
        margin-bottom: 1rem;
        transition: all 0.3s ease;
        text-decoration: none;
        color: inherit;
    }

    .contact-method:hover {
        background: rgba(102, 126, 234, 0.05);
        transform: translateY(-2px);
        color: #667eea;
    }

    .contact-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 1rem;
        font-size: 1.25rem;
        color: white;
    }

    .floating-elements {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        overflow: hidden;
    }

    .floating-icon {
        position: absolute;
        opacity: 0.1;
        animation: float 6s ease-in-out infinite;
    }

    .floating-icon:nth-child(1) {
        top: 20%;
        left: 10%;
        animation-delay: 0s;
    }

    .floating-icon:nth-child(2) {
        top: 60%;
        right: 15%;
        animation-delay: 2s;
    }

    .floating-icon:nth-child(3) {
        bottom: 30%;
        left: 20%;
        animation-delay: 4s;
    }

    @keyframes scaleIn {
        0% {
            transform: scale(0);
            opacity: 0;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes checkmarkDraw {
        0% {
            width: 0;
            height: 0;
        }
        50% {
            width: 60px;
            height: 0;
        }
        100% {
            width: 60px;
            height: 30px;
        }
    }

    @keyframes float {
        0%, 100% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-20px);
        }
    }

    @media (max-width: 768px) {
        .confirmation-header {
            padding: 2rem 0;
        }
        
        .confirmation-card {
            padding: 1.5rem;
        }
        
        .success-animation {
            width: 100px;
            height: 100px;
        }
        
        .checkmark-circle {
            width: 100px;
            height: 100px;
        }
        
        .checkmark {
            width: 50px;
            height: 25px;
        }
        
        .action-buttons {
            flex-direction: column;
        }
        
        .btn-action {
            min-width: auto;
            width: 100%;
        }
        
        .booking-details-table th,
        .booking-details-table td {
            padding: 0.75rem;
        }
    }
</style>

<div class="container-fluid px-0">
    <!-- Confirmation Header -->
    <div class="confirmation-header">
        <div class="container">
            <div class="confirmation-content">
                <div class="success-animation">
                    <div class="checkmark-circle">
                        <div class="checkmark"></div>
                    </div>
                </div>
                <h1 class="display-4 fw-bold mb-3">Booking Confirmed!</h1>
                <p class="fs-5 opacity-90">Thank you for your booking. Your celebration awaits!</p>
            </div>
        </div>
        
        <!-- Floating Elements -->
        <div class="floating-elements">
            <i class="fas fa-star floating-icon fa-3x"></i>
            <i class="fas fa-heart floating-icon fa-2x"></i>
            <i class="fas fa-gift floating-icon fa-3x"></i>
        </div>
    </div>
</div>

<div class="container py-4">
    <div class="row">
        <div class="col-lg-8">
            <!-- Booking Details -->
            <div class="confirmation-card">
                <h4 class="fw-bold mb-4">
                    <i class="fas fa-calendar-check text-success me-2"></i>
                    Booking Details
                </h4>
                
                <div class="booking-details-table">
                    <table class="table mb-0">
                        <tr>
                            <th>Booking ID</th>
                            <td>
                                <span class="badge bg-primary fs-6">#5</span>
                            </td>
                        </tr>
                        <tr>
                            <th>Celebrity</th>
                            <td>
                                                                <div class="d-flex align-items-center">
                                    <div class="me-3">
                                        <div class="avatar-circle bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                            <i class="fas fa-star"></i>
                                        </div>
                                    </div>
                                    <div>
                                        <h6 class="mb-0"><?php echo $celebrities_name ?></h6>
                                        <small class="text-muted">Celebrity</small>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>Type</th>
                            <td>
                                <span class="badge bg-info text-capitalize"><?php echo $type ?></span>
                            </td>
                        </tr>
                            <!--                        <tr>-->
                            <!--    <th>Purpose</th>-->
                            <!--    <td class="text-capitalize"><?php echo $purpose ?></td>-->
                            <!--</tr>-->
                                                <tr>
                            <th>Date & Time</th>
                            <td>
                                <i class="fas fa-calendar text-primary me-2"></i>
                                <?php echo date("F j, Y, g:i a", strtotime($meetup_date)); ?>
                            </td>
                        </tr>
                        <tr>
                            <th>Location</th>
                            <td>
                                <i class="fas fa-map-marker-alt text-danger me-2"></i>
                                <?php echo $location ?>
                            </td>
                        </tr>
                        <tr class="highlight-row">
                            <th>Amount Paid</th>
                            <td class="h5 mb-0">$<?php echo number_format($amount, 2) ?></td>
                        </tr>
                                                <tr>
                            <th>Payment Status</th>
                            <td>
                                <span class="badge bg-success">
                                    Confirmed
                                </span>
                            </td>
                        </tr>
                                            </table>
                </div>
            </div>

            <!-- Next Steps -->
            <div class="next-steps-card">
                <div class="next-steps-content">
                    <h4 class="fw-bold mb-3">
                        <i class="fas fa-route me-2"></i>
                        What Happens Next?
                    </h4>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="step-item mb-3">
                                <div class="d-flex align-items-start">
                                    <div class="step-number bg-white text-primary rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 30px; height: 30px; font-weight: bold;">
                                        1
                                    </div>
                                    <div>
                                        <h6 class="mb-1">Email Confirmation</h6>
                                        <small>You'll receive a detailed confirmation email within 5 minutes</small>
                                    </div>
                                </div>
                            </div>
                            <div class="step-item mb-3">
                                <div class="d-flex align-items-start">
                                    <div class="step-number bg-white text-primary rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 30px; height: 30px; font-weight: bold;">
                                        2
                                    </div>
                                    <div>
                                        <h6 class="mb-1">Team Contact</h6>
                                        <small>Our coordination team will contact you within 24 hours</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="step-item mb-3">
                                <div class="d-flex align-items-start">
                                    <div class="step-number bg-white text-primary rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 30px; height: 30px; font-weight: bold;">
                                        3
                                    </div>
                                    <div>
                                        <h6 class="mb-1">Final Details</h6>
                                        <small>We'll finalize all arrangements and logistics</small>
                                    </div>
                                </div>
                            </div>
                            <div class="step-item mb-3">
                                <div class="d-flex align-items-start">
                                    <div class="step-number bg-white text-primary rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 30px; height: 30px; font-weight: bold;">
                                        4
                                    </div>
                                    <div>
                                        <h6 class="mb-1">Enjoy Your Event</h6>
                                        <small>Experience an unforgettable moment with your celebrity</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="text-center mb-4">
                <div class="action-buttons">
                    <a href="my-bookings.php" class="btn btn-primary-action">
                        <i class="fas fa-calendar-alt me-2"></i>
                        View My Bookings
                    </a>
                    <a href="dashboard.php" class="btn btn-secondary-action">
                        <i class="fas fa-home me-2"></i>
                        Back to Home
                    </a>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Contact Information -->
            <div class="contact-info-card">
                <h5 class="fw-bold mb-3">
                    <i class="fas fa-headset text-primary me-2"></i>
                    Need Help?
                </h5>
                <p class="text-muted mb-4">Our support team is here to assist you with any questions about your booking.</p>
                
                <div class="contact-methods">
                                        <a href="mailto:contact@celebbookingsmeetups.com" class="contact-method">
                        <div class="contact-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div>
                            <h6 class="mb-1">Email Support</h6>
                            <small class="text-muted">contact@celebbookingsmeetups.com</small>
                        </div>
                    </a>
                                        
                                        <a href="tel:+447350860639" class="contact-method">
                        <div class="contact-icon" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
                            <i class="fas fa-phone"></i>
                        </div>
                        <div>
                            <h6 class="mb-1">Phone Support</h6>
                            <small class="text-muted">+447350860639</small>
                        </div>
                    </a>
                                        
                                        <div class="contact-method">
                        <div class="contact-icon" style="background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div>
                            <h6 class="mb-1">Our Address</h6>
                            <small class="text-muted">Manchester United Kingdom</small>
                        </div>
                    </div>
                                    </div>
            </div>

            <!-- Additional Services -->
            <div class="contact-info-card mt-4">
                <h5 class="fw-bold mb-3">
                    <i class="fas fa-plus-circle text-success me-2"></i>
                    Additional Services
                </h5>
                <div class="additional-services">
                    <div class="service-item d-flex align-items-center mb-3">
                        <div class="service-icon bg-warning text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                            <i class="fas fa-camera"></i>
                        </div>
                        <div>
                            <h6 class="mb-1">Photography</h6>
                            <small class="text-muted">Professional event photography</small>
                        </div>
                    </div>
                    
                    <div class="service-item d-flex align-items-center mb-3">
                        <div class="service-icon bg-info text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                            <i class="fas fa-video"></i>
                        </div>
                        <div>
                            <h6 class="mb-1">Videography</h6>
                            <small class="text-muted">Capture every moment</small>
                        </div>
                    </div>
                    
                    <div class="service-item d-flex align-items-center mb-3">
                        <div class="service-icon bg-danger text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                            <i class="fas fa-car"></i>
                        </div>
                        <div>
                            <h6 class="mb-1">Transportation</h6>
                            <small class="text-muted">VIP transport services</small>
                        </div>
                    </div>
                </div>
                
                <div class="text-center mt-3">
                    <a href="#" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-plus me-1"></i>
                        Add Services
                    </a>
                </div>
            </div>

            <!-- Booking Reference -->
            <div class="contact-info-card mt-4">
                <h5 class="fw-bold mb-3">
                    <i class="fas fa-barcode text-secondary me-2"></i>
                    Booking Reference
                </h5>
                <div class="reference-display text-center">
                    <div class="reference-code bg-light p-3 rounded-3 mb-2">
                        <h4 class="mb-0 font-monospace">#5</h4>
                    </div>
                    <small class="text-muted">Keep this reference for your records</small>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Celebration Animation -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add celebration confetti effect
    setTimeout(() => {
        createConfetti();
    }, 1000);
    
    function createConfetti() {
        const colors = ['#667eea', '#764ba2', '#10b981', '#f59e0b', '#ef4444'];
        const confettiCount = 50;
        
        for (let i = 0; i < confettiCount; i++) {
            const confetti = document.createElement('div');
            confetti.style.position = 'fixed';
            confetti.style.left = Math.random() * 100 + 'vw';
            confetti.style.top = '-10px';
            confetti.style.width = '10px';
            confetti.style.height = '10px';
            confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
            confetti.style.pointerEvents = 'none';
            confetti.style.zIndex = '9999';
            confetti.style.borderRadius = '50%';
            confetti.style.animation = `fall ${Math.random() * 3 + 2}s linear forwards`;
            
            document.body.appendChild(confetti);
            
            setTimeout(() => {
                confetti.remove();
            }, 5000);
        }
    }
    
    // Add CSS animation for confetti
    const style = document.createElement('style');
    style.textContent = `
        @keyframes fall {
            to {
                transform: translateY(100vh) rotate(360deg);
            }
        }
    `;
    document.head.appendChild(style);
    
    // Add smooth scroll behavior to action buttons
    document.querySelectorAll('.btn-action').forEach(btn => {
        btn.addEventListener('click', function(e) {
            this.style.transform = 'scale(0.95)';
            setTimeout(() => {
                this.style.transform = '';
            }, 150);
        });
    });
});
</script>
    </main>
   <?php
include 'footer.php';

?>