<?php
include 'header.php';

if (isset($_GET['celebrities'])){
    $celeb = $_GET['celebrities'];

    $select = mysqli_query( $link, "SELECT * FROM  celebrities  WHERE id = '$celeb' " );
    if ( mysqli_num_rows( $select ) > 0 ) {
        $row = mysqli_fetch_assoc( $select );
        $celebrities_name = $row['name'];
    } else {
        echo "<script>window.location.href = 'celebrities.php'; </script>";
    }
} else {
    // echo "<script>window.location.href = 'index.php'; </script>";
}


if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    $amount = text_input($_POST['amount']);
    $type = text_input($_POST['type']);
    $meetup_date = text_input($_POST['meetup_date']);
    $meetup_time = text_input($_POST['meetup_time']);
    $location = text_input($_POST['location']);
    $purpose = text_input($_POST['purpose']);
    $special_requests = text_input($_POST['special_requests']);
    $celebrities = $celebrities_name;
    $celebrity_id = $celeb;

    $_SESSION['payment'] = [
        "amount" => $amount,
        "type" => $type,
        "meetup_date" => $meetup_date,
         "meetup_time" => $meetup_time,
         "location" => $location,
         "purpose" => $purpose,
         "special_requests" => $special_requests,
         "celebrities_name" => $celebrities,
         "celebrity_id" => $celebrity_id,
         
    ];
    echo "<script> window.location.href = 'payment2.php'; </script>";

}

?>

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

    .booking-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>');
    }

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

    .celebrity-showcase {
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 20px;
        padding: 2rem;
        margin-bottom: 2rem;
    }

    .main-booking-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .celebrity-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;
        margin-bottom: 2rem;
        position: relative;
        overflow: hidden;
    }

    .celebrity-info-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 100%;
        background: rgba(102, 126, 234, 0.05);
        transform: rotate(45deg);
        transition: all 0.3s ease;
    }

    .celebrity-avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        position: relative;
        z-index: 2;
    }

    .celebrity-placeholder {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5rem;
        color: white;
        border: 4px solid rgba(255, 255, 255, 0.5);
        position: relative;
        z-index: 2;
    }

    .celebrity-details {
        position: relative;
        z-index: 2;
    }

    .price-highlight {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
        padding: 1rem 1.5rem;
        border-radius: 15px;
        text-align: center;
        margin-bottom: 1rem;
    }

    .booking-form-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;
        position: relative;
        overflow: hidden;
    }

    .booking-form-card::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
        transition: all 0.3s ease;
    }

    .form-section {
        margin-bottom: 2rem;
        padding: 1.5rem;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 15px;
        border-left: 4px solid #667eea;
        position: relative;
        z-index: 2;
    }

    .form-section-title {
        color: #667eea;
        font-weight: 700;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
    }

    .form-section-icon {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.75rem;
        font-size: 0.9rem;
    }

    .form-control, .form-select {
        border-radius: 12px;
        border: 2px solid #e5e7eb;
        padding: 0.75rem 1rem;
        transition: all 0.3s ease;
        position: relative;
        z-index: 2;
    }

    .form-control:focus, .form-select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        transform: translateY(-2px);
    }

    .form-label {
        font-weight: 600;
        color: #4a5568;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        position: relative;
        z-index: 2;
    }

    .form-label i {
        margin-right: 0.5rem;
        color: #667eea;
    }

    .input-group-addon {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 12px;
        padding: 0.75rem 1rem;
        margin-right: 0.5rem;
        font-weight: 600;
    }

    .purpose-options {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-top: 0.5rem;
    }

    .purpose-option {
        background: rgba(255, 255, 255, 0.8);
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        padding: 1rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .purpose-option::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
        transition: left 0.6s ease;
    }

    .purpose-option:hover {
        border-color: #667eea;
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.2);
    }

    .purpose-option:hover::before {
        left: 100%;
    }

    .purpose-option.selected {
        border-color: #667eea;
        background: rgba(102, 126, 234, 0.1);
        transform: translateY(-2px);
    }

    .purpose-option input[type="radio"] {
        display: none;
    }

    .purpose-icon {
        font-size: 2rem;
        color: #667eea;
        margin-bottom: 0.5rem;
    }

    .action-buttons {
        display: flex;
        gap: 1rem;
        justify-content: flex-end;
        margin-top: 2rem;
    }

    .btn-cancel {
        background: rgba(255, 255, 255, 0.9);
        color: #6b7280;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        padding: 0.75rem 2rem;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-cancel:hover {
        background: #f9fafb;
        border-color: #d1d5db;
        transform: translateY(-2px);
        color: #4b5563;
    }

    .btn-proceed {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 12px;
        padding: 0.75rem 2rem;
        font-weight: 600;
        transition: all 0.3s ease;
        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
        position: relative;
        overflow: hidden;
    }

    .btn-proceed::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s ease;
    }

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

    .btn-proceed:hover::before {
        left: 100%;
    }

    .alert-custom {
        background: rgba(239, 68, 68, 0.1);
        color: #dc2626;
        border: none;
        border-left: 4px solid #ef4444;
        border-radius: 12px;
        padding: 1rem 1.5rem;
        margin-bottom: 2rem;
    }

    .features-list {
        background: rgba(255, 255, 255, 0.8);
        border-radius: 15px;
        padding: 1.5rem;
        margin-top: 1rem;
    }

    .feature-item {
        display: flex;
        align-items: center;
        margin-bottom: 0.75rem;
        color: #4a5568;
    }

    .feature-item:last-child {
        margin-bottom: 0;
    }

    .feature-icon {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.75rem;
        font-size: 0.7rem;
    }

    .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;
        color: white;
    }

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

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

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

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

    @media (max-width: 768px) {
        .booking-header {
            padding: 2rem 0;
        }
        
        .celebrity-showcase {
            padding: 1.5rem;
        }
        
        .celebrity-avatar,
        .celebrity-placeholder {
            width: 100px;
            height: 100px;
        }
        
        .celebrity-placeholder {
            font-size: 2rem;
        }
        
        .booking-form-card,
        .celebrity-info-card {
            padding: 1.5rem;
        }
        
        .form-section {
            padding: 1rem;
        }
        
        .purpose-options {
            grid-template-columns: 1fr;
        }
        
        .action-buttons {
            flex-direction: column;
        }
        
        .floating-elements {
            display: none;
        }
    }
</style>

<div class="container-fluid px-0">
    <!-- Booking Header -->
    <div class="booking-header">
        <div class="container">
            <div class="booking-content">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h1 class="display-5 fw-bold mb-3">Book Your Meetup</h1>
                        <p class="fs-5 opacity-90">Create an unforgettable experience with <?php echo $row['name'] ?></p>
                    </div>
                    <div class="col-md-4">
                        <div class="celebrity-showcase text-center">
                                                            <img src="uploads/celebrities/<?php echo $row['image'] ?>" alt="<?php echo $row['name'] ?>" class="celebrity-avatar mb-3">
                                                        <h4 class="mb-1"><?php echo $row['name'] ?></h4>
                            <p class="opacity-75 mb-0"><?php echo $row['specialties'] ?></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Floating Elements -->
        <div class="floating-elements">
            <i class="fas fa-star floating-icon fa-3x"></i>
            <i class="fas fa-handshake floating-icon fa-2x"></i>
            <i class="fas fa-calendar floating-icon fa-3x"></i>
        </div>
    </div>
</div>

<div class="container py-4">
    
    <div class="row">
        <div class="col-lg-8">
            <!-- Booking Form -->
            <div class="booking-form-card">
                <h3 class="fw-bold mb-4">
                    <i class="fas fa-calendar-plus text-primary me-2"></i>
                    Booking Details
                </h3>

                <form action="" method="POST" id="bookingForm">
                    <input type="hidden" name="_token" value="AMYr3bZTgC84TRQKvCJUXUdqCK3BGQcUJ3l9RlAg" autocomplete="off">                    <input type="hidden" name="celebrity_id" value="8">
                    <input type="hidden" name="type" value="meetup">
                    <input type="hidden" name="amount" value="<?php echo number_format($row['regular_fee'], 2) ?>">
                    
                    <!-- Date & Time Section -->
                    <div class="form-section">
                        <h5 class="form-section-title">
                            <div class="form-section-icon">
                                <i class="fas fa-clock"></i>
                            </div>
                            Schedule Your Meetup
                        </h5>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="meetup_date" class="form-label">
                                    <i class="fas fa-calendar"></i>
                                    Preferred Date
                                </label>
                                <input type="date" class="form-control " 
                                       id="meetup_date" name="meetup_date" 
                                       min="2025-07-07" 
                                       value="" required>
                                                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="meetup_time" class="form-label">
                                    <i class="fas fa-clock"></i>
                                    Preferred Time
                                </label>
                                <input type="time" class="form-control " 
                                       id="meetup_time" name="meetup_time" 
                                       value="" required>
                                                            </div>
                        </div>
                    </div>

                    <!-- Location Section -->
                    <div class="form-section">
                        <h5 class="form-section-title">
                            <div class="form-section-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            Meeting Location
                        </h5>
                        <div class="mb-3">
                            <label for="location" class="form-label">
                                <i class="fas fa-location-dot"></i>
                                Venue Address
                            </label>
                            <input type="text" class="form-control " 
                                   id="location" name="location" 
                                   value="" 
                                   placeholder="Enter the full address or venue name" required>
                                                        <div class="form-text">
                                <i class="fas fa-info-circle me-1"></i>
                                Please provide a detailed address or venue name
                            </div>
                        </div>
                    </div>

                    <!-- Purpose Section -->
                    <div class="form-section">
                        <h5 class="form-section-title">
                            <div class="form-section-icon">
                                <i class="fas fa-bullseye"></i>
                            </div>
                            Purpose of Meetup
                        </h5>
                        <div class="purpose-options">
                            <div class="purpose-option "
                                 onclick="selectPurpose('autograph')">
                                <input type="radio" name="purpose" value="autograph" id="autograph" 
                                        required>
                                <div class="purpose-icon">
                                    <i class="fas fa-signature"></i>
                                </div>
                                <h6 class="fw-semibold">Autograph Session</h6>
                                <small class="text-muted">Get personalized autographs</small>
                            </div>
                            
                            <div class="purpose-option "
                                 onclick="selectPurpose('photo')">
                                <input type="radio" name="purpose" value="photo" id="photo" 
                                        required>
                                <div class="purpose-icon">
                                    <i class="fas fa-camera"></i>
                                </div>
                                <h6 class="fw-semibold">Photo Opportunity</h6>
                                <small class="text-muted">Professional photo session</small>
                            </div>
                            
                            <div class="purpose-option "
                                 onclick="selectPurpose('interview')">
                                <input type="radio" name="purpose" value="interview" id="interview" 
                                        required>
                                <div class="purpose-icon">
                                    <i class="fas fa-microphone"></i>
                                </div>
                                <h6 class="fw-semibold">Interview</h6>
                                <small class="text-muted">Media or personal interview</small>
                            </div>
                            
                            <div class="purpose-option "
                                 onclick="selectPurpose('other')">
                                <input type="radio" name="purpose" value="other" id="other" 
                                        required>
                                <div class="purpose-icon">
                                    <i class="fas fa-ellipsis-h"></i>
                                </div>
                                <h6 class="fw-semibold">Other</h6>
                                <small class="text-muted">Custom arrangement</small>
                            </div>
                        </div>
                                            </div>

                    <!-- Special Requests Section -->
                    <div class="form-section">
                        <h5 class="form-section-title">
                            <div class="form-section-icon">
                                <i class="fas fa-star"></i>
                            </div>
                            Special Requests
                        </h5>
                        <div class="mb-3">
                            <label for="special_requests" class="form-label">
                                <i class="fas fa-comment-dots"></i>
                                Additional Information
                            </label>
                            <textarea class="form-control " 
                                      id="special_requests" name="special_requests" rows="4"
                                      placeholder="Tell us about any special requirements, accessibility needs, or specific requests for your meetup..."></textarea>
                                                        <div class="form-text">
                                <i class="fas fa-lightbulb me-1"></i>
                                Help us make your experience perfect by sharing any specific needs or preferences
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="action-buttons">
                        <a href="" class="btn btn-cancel">
                            <i class="fas fa-arrow-left me-2"></i>
                            Cancel
                        </a>
                        <button type="submit" class="btn btn-proceed">
                            <i class="fas fa-credit-card me-2"></i>
                            Proceed to Payment
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Celebrity Info Card -->
            <div class="celebrity-info-card">
                <div class="text-center mb-3">
                                            <img src="uploads/celebrities/<?php echo $row['image'] ?>" alt="<?php echo $row['name'] ?>" class="celebrity-avatar mb-3">
                                        <h4 class="fw-bold mb-1"><?php echo $row['name'] ?></h4>
                    <p class="text-muted mb-0"><?php echo $row['specialties'] ?></p>
                </div>

                <div class="price-highlight">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-0">$<?php echo number_format($row['regular_fee'], 2) ?></h3>
                            <small class="opacity-75">Meetup Fee</small>
                        </div>
                        <div class="text-end">
                            <i class="fas fa-clock fa-2x opacity-75"></i>
                            <div class="small">30 minutes</div>
                        </div>
                    </div>
                </div>

                <div class="features-list">
                    <h6 class="fw-bold mb-3">What's Included:</h6>
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-check"></i>
                        </div>
                        <span>30-minute exclusive meetup</span>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-check"></i>
                        </div>
                        <span>Personal interaction time</span>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-check"></i>
                        </div>
                        <span>Professional coordination</span>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-check"></i>
                        </div>
                        <span>Flexible scheduling</span>
                    </div>
                </div>
            </div>

            <!-- Booking Guidelines -->
            <div class="celebrity-info-card">
                <h5 class="fw-bold mb-3">
                    <i class="fas fa-info-circle text-info me-2"></i>
                    Booking Guidelines
                </h5>
                <div class="guidelines-list">
                    <div class="guideline-item mb-3">
                        <div class="d-flex align-items-start">
                            <div class="guideline-icon bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 30px; height: 30px; font-size: 0.8rem;">
                                <i class="fas fa-calendar"></i>
                            </div>
                            <div>
                                <h6 class="mb-1">Advance Booking</h6>
                                <small class="text-muted">Book at least 48 hours in advance</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="guideline-item mb-3">
                        <div class="d-flex align-items-start">
                            <div class="guideline-icon bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 30px; height: 30px; font-size: 0.8rem;">
                                <i class="fas fa-shield-alt"></i>
                            </div>
                            <div>
                                <h6 class="mb-1">Secure Payment</h6>
                                <small class="text-muted">Multiple payment options available</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="guideline-item mb-3">
                        <div class="d-flex align-items-start">
                            <div class="guideline-icon bg-warning text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 30px; height: 30px; font-size: 0.8rem;">
                                <i class="fas fa-undo"></i>
                            </div>
                            <div>
                                <h6 class="mb-1">Cancellation Policy</h6>
                                <small class="text-muted">Free cancellation up to 24 hours before</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="guideline-item">
                        <div class="d-flex align-items-start">
                            <div class="guideline-icon bg-info text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 30px; height: 30px; font-size: 0.8rem;">
                                <i class="fas fa-headset"></i>
                            </div>
                            <div>
                                <h6 class="mb-1">24/7 Support</h6>
                                <small class="text-muted">Our team is here to help</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Set minimum date to today
    const today = new Date().toISOString().split('T')[0];
    document.getElementById('meetup_date').min = today;
    
    // Purpose selection function
    window.selectPurpose = function(purpose) {
        // Remove selected class from all options
        document.querySelectorAll('.purpose-option').forEach(option => {
            option.classList.remove('selected');
        });
        
        // Add selected class to clicked option
        event.currentTarget.classList.add('selected');
        
        // Check the radio button
        document.getElementById(purpose).checked = true;
    };
    
    // Form validation and enhancement
    const bookingForm = document.getElementById('bookingForm');
    const submitBtn = bookingForm.querySelector('.btn-proceed');
    
    // Add form validation
    bookingForm.addEventListener('submit', function(e) {
        // Check if purpose is selected
        const purposeSelected = document.querySelector('input[name="purpose"]:checked');
        if (!purposeSelected) {
            e.preventDefault();
            showNotification('Please select a purpose for your meetup', 'error');
            return;
        }
        
        // Show loading state
        submitBtn.disabled = true;
        submitBtn.innerHTML = `
            <span class="spinner-border spinner-border-sm me-2"></span>
            Processing...
        `;
        
        // Re-enable button after 30 seconds if form doesn't submit
        setTimeout(() => {
            submitBtn.disabled = false;
            submitBtn.innerHTML = `
                <i class="fas fa-credit-card me-2"></i>
                Proceed to Payment
            `;
        }, 30000);
    });
    
    // Enhanced date validation
    const dateInput = document.getElementById('meetup_date');
    const timeInput = document.getElementById('meetup_time');
    
    dateInput.addEventListener('change', function() {
        const selectedDate = new Date(this.value);
        const today = new Date();
        const dayOfWeek = selectedDate.getDay();
        
        // Highlight weekend dates
        if (dayOfWeek === 0 || dayOfWeek === 6) {
            showNotification('Weekend dates may have limited availability', 'warning');
        }
        
        // Check if date is too far in advance (more than 3 months)
        const threeMonthsFromNow = new Date();
        threeMonthsFromNow.setMonth(threeMonthsFromNow.getMonth() + 3);
        
        if (selectedDate > threeMonthsFromNow) {
            showNotification('For dates more than 3 months in advance, please contact our support team', 'info');
        }
    });
    
    // Time input enhancement
    timeInput.addEventListener('change', function() {
        const selectedTime = this.value;
        const hour = parseInt(selectedTime.split(':')[0]);
        
        // Suggest optimal meeting times
        if (hour < 9 || hour > 18) {
            showNotification('Consider scheduling between 9 AM and 6 PM for the best experience', 'info');
        }
    });
    
    // Location input enhancement
    const locationInput = document.getElementById('location');
    locationInput.addEventListener('blur', function() {
        const location = this.value.trim();
        if (location.length < 10) {
            showNotification('Please provide a more detailed address for better coordination', 'warning');
        }
    });
    
    // Character counter for special requests
    const specialRequestsTextarea = document.getElementById('special_requests');
    const maxLength = 500;
    
    // Create character counter
    const counterDiv = document.createElement('div');
    counterDiv.className = 'form-text text-end mt-1';
    counterDiv.innerHTML = `<small><span id="char-count">0</span>/${maxLength} characters</small>`;
    specialRequestsTextarea.parentNode.appendChild(counterDiv);
    
    const charCount = document.getElementById('char-count');
    
    specialRequestsTextarea.addEventListener('input', function() {
        const currentLength = this.value.length;
        charCount.textContent = currentLength;
        
        if (currentLength > maxLength * 0.9) {
            counterDiv.classList.add('text-warning');
        } else {
            counterDiv.classList.remove('text-warning');
        }
        
        if (currentLength > maxLength) {
            this.value = this.value.substring(0, maxLength);
            charCount.textContent = maxLength;
            counterDiv.classList.add('text-danger');
        } else {
            counterDiv.classList.remove('text-danger');
        }
    });
    
    // Show notification function
    function showNotification(message, type = 'info') {
        // Remove existing notifications
        const existingNotifications = document.querySelectorAll('.toast-notification');
        existingNotifications.forEach(notification => notification.remove());
        
        const notification = document.createElement('div');
        notification.className = 'toast-notification';
        
        let backgroundColor, icon;
        switch (type) {
            case 'error':
                backgroundColor = '#ef4444';
                icon = 'exclamation-triangle';
                break;
            case 'warning':
                backgroundColor = '#f59e0b';
                icon = 'exclamation-triangle';
                break;
            case 'success':
                backgroundColor = '#10b981';
                icon = 'check';
                break;
            default:
                backgroundColor = '#3b82f6';
                icon = 'info-circle';
        }
        
        notification.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: ${backgroundColor};
            color: white;
            padding: 1rem 1.5rem;
            border-radius: 10px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            z-index: 9999;
            animation: slideInRight 0.5s ease;
            max-width: 300px;
        `;
        
        notification.innerHTML = `
            <div class="d-flex align-items-center">
                <i class="fas fa-${icon} me-2"></i>
                <span>${message}</span>
            </div>
        `;
        
        document.body.appendChild(notification);
        
        setTimeout(() => {
            notification.style.animation = 'slideInRight 0.5s ease reverse';
            setTimeout(() => {
                if (notification.parentNode) {
                    notification.parentNode.removeChild(notification);
                }
            }, 500);
        }, 4000);
    }
    
    // Add slide-in animation for form sections
    const formSections = document.querySelectorAll('.form-section');
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.animation = 'slideInUp 0.6s ease both';
            }
        });
    }, observerOptions);
    
    formSections.forEach((section, index) => {
        section.style.animationDelay = `${index * 0.1}s`;
        observer.observe(section);
    });
    
    // Add CSS for animations
    const style = document.createElement('style');
    style.textContent = `
        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(100%);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .toast-notification {
            animation: slideInRight 0.5s ease;
        }
    `;
    document.head.appendChild(style);
    
    // Form auto-save functionality (optional)
    const formInputs = bookingForm.querySelectorAll('input, select, textarea');
    const autoSaveKey = 'booking_form_data';
    
    // Load saved data on page load
    const savedData = localStorage.getItem(autoSaveKey);
    if (savedData) {
        try {
            const data = JSON.parse(savedData);
            Object.keys(data).forEach(key => {
                const input = bookingForm.querySelector(`[name="${key}"]`);
                if (input) {
                    if (input.type === 'radio') {
                        if (input.value === data[key]) {
                            input.checked = true;
                            selectPurpose(data[key]);
                        }
                    } else {
                        input.value = data[key];
                    }
                }
            });
        } catch (e) {
            console.log('Error loading saved form data:', e);
        }
    }
    
    // Save form data on input change
    formInputs.forEach(input => {
        input.addEventListener('change', function() {
            const formData = {};
            formInputs.forEach(inp => {
                if (inp.type === 'radio') {
                    if (inp.checked) {
                        formData[inp.name] = inp.value;
                    }
                } else if (inp.value) {
                    formData[inp.name] = inp.value;
                }
            });
            localStorage.setItem(autoSaveKey, JSON.stringify(formData));
        });
    });
    
    // Clear saved data on successful form submission
    bookingForm.addEventListener('submit', function() {
        localStorage.removeItem(autoSaveKey);
    });
});
</script>

    </main>

   
   <?php
include 'footer.php';

?>