<?php
include 'header.php';

?>

<main class="flex-grow-1" style="padding-top: 80px;">


    <style>
        .celebrity-card {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: none;
            border-radius: 20px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(20px);
        }

        .celebrity-card:hover {
            transform: translateY(-12px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .celebrity-card img {
            transition: transform 0.4s ease;
        }

        .celebrity-card:hover img {
            transform: scale(1.1);
        }

        .search-section {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
            border-radius: 20px;
            padding: 2rem;
            margin-bottom: 2rem;
        }
    </style>

    <div class="container py-5">
        <!-- Header Section -->
        <div class="text-center mb-5">
            <h1 class="display-4 fw-bold mb-3">Meet Our Celebrities</h1>
            <p class="fs-5 text-muted">Connect with verified stars from entertainment, sports, and social media</p>
        </div>

        <!-- Search and Filter Section -->
        <div class="search-section">
            <div class="row g-3 align-items-end">
                <div class="col-lg-12">
                    <label class="form-label fw-semibold">Search Celebrities</label>
                    <form method="GET" action="celebrities">
                        <div class="input-group">
                            <span class="input-group-text bg-white border-0 rounded-start-3">
                                <i class="fas fa-search text-muted"></i>
                            </span>
                            <input type="text" name="search" class="form-control border-0 bg-white rounded-end-3"
                                placeholder="Search by name or profession..." value="">
                            <button class="btn btn-primary-modern ms-2" type="submit">Search</button>
                        </div>
                    </form>
                </div>

                <!--<div class="col-lg-3">-->
                <!--    <label class="form-label fw-semibold">Filter by Profession</label>-->
                <!--    <form method="GET" action="celebrities">-->
                <!--        <select name="profession" class="form-select bg-white border-0 rounded-3"-->
                <!--            onchange="this.form.submit()">-->
                <!--            <option value="">All Professions</option>-->
                <!--            <option value="Prince of Saudi Arabia">-->
                <!--                Prince of Saudi Arabia-->
                <!--            </option>-->
                <!--            <option value="Government and Diplomatic Rules">-->
                <!--                Government and Diplomatic Rules-->
                <!--            </option>-->
                <!--            <option value="Prince of Dubai">-->
                <!--                Prince of Dubai-->
                <!--            </option>-->
                <!--            <option value="Crowned Prince of Dubai">-->
                <!--                Crowned Prince of Dubai-->
                <!--            </option>-->
                <!--            <option value="Singer and song writer">-->
                <!--                Singer and song writer-->
                <!--            </option>-->
                <!--            <option value="Royal Family">-->
                <!--                Royal Family-->
                <!--            </option>-->
                <!--            <option value="Actor">-->
                <!--                Actor-->
                <!--            </option>-->
                <!--            <option value="Actor and singer">-->
                <!--                Actor and singer-->
                <!--            </option>-->
                <!--            <option value="American Actor">-->
                <!--                American Actor-->
                <!--            </option>-->
                <!--        </select>-->
                <!--    </form>-->
                <!--</div>-->

                <!--<div class="col-lg-2">-->
                <!--    <label class="form-label fw-semibold">Sort by</label>-->
                <!--    <select class="form-select bg-white border-0 rounded-3">-->
                <!--        <option>Most Popular</option>-->
                <!--        <option>Price: Low to High</option>-->
                <!--        <option>Price: High to Low</option>-->
                <!--        <option>Newest First</option>-->
                <!--    </select>-->
                <!--</div>-->

                <!--<div class="col-lg-2">-->
                <!--    <div class="d-flex gap-2">-->
                <!--        <button class="btn btn-outline-secondary active rounded-3" title="Grid View">-->
                <!--            <i class="fas fa-th"></i>-->
                <!--        </button>-->
                <!--        <button class="btn btn-outline-secondary rounded-3" title="List View">-->
                <!--            <i class="fas fa-list"></i>-->
                <!--        </button>-->
                <!--    </div>-->
                <!--</div>-->
            </div>

            <!-- Active Filters -->
        </div>

        <!-- Results Info -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <p class="text-muted mb-0 fw-semibold">
                    Showing 1 - 12
                    of 12 celebrities
                </p>
            </div>
            <div class="d-flex align-items-center gap-3">
                <span class="text-muted fw-semibold">Show:</span>
                <select class="form-select form-select-sm rounded-3" style="width: auto;">
                    <option>12 per page</option>
                    <option>24 per page</option>
                    <option>48 per page</option>
                </select>
            </div>
        </div>

        <!-- Celebrities Grid -->
        <div class="row g-4 mb-5">
            	<?php 
					$sql= "SELECT * FROM  celebrities ORDER BY id DESC";
					  $result = mysqli_query($link,$sql);
					  if(mysqli_num_rows($result) > 0){
						  while($row = mysqli_fetch_assoc($result)){   
    	  		?>
    	  			    
            <div class="col-lg-4 col-md-6">
                <div class="celebrity-card card-modern h-100">
                    <div class="position-relative overflow-hidden">
                        <div class="position-relative" style="height: 300px; background: #f5f5f5;">
                            <!-- Debug: http://celebbookingsmeetups.com/storage/celebrities/1750173014_1000028372.jpg -->
                            <img src="uploads/celebrities/<?php echo $row['image'] ?>"
                                class="card-img-top position-absolute top-0 start-0 w-100 h-100" alt="Stephen Amell"
                                style="object-fit: cover;"
                                onerror="this.onerror=null; this.src='http://celebbookingsmeetups.com/images/placeholder.jpg';">
                        </div>

                        <!-- Availability Status -->
                        <div class="position-absolute top-0 end-0 m-3">
                            <span class="badge bg-success rounded-pill px-3 py-2 shadow">
                                <i class="fas fa-circle fa-xs me-1"></i>Available Now
                            </span>
                        </div>

                        <!-- Price Badge -->
                        <div class="position-absolute top-0 start-0 m-3">
                            <span class="badge bg-dark bg-opacity-75 rounded-pill px-3 py-2">
                                From $<?php echo number_format($row['regular_fee'], 2) ?>
                            </span>
                        </div>

                        <!-- Quick Services -->
                        <div class="position-absolute bottom-0 start-0 end-0 p-3"
                            style="background: linear-gradient(transparent, rgba(0,0,0,0.8));">
                            <div class="d-flex gap-2 justify-content-center">
                                <span class="badge bg-light text-dark rounded-pill px-3 py-2">
                                    <i class="fas fa-handshake fa-xs me-1"></i>Meetups
                                </span>
                                <span class="badge bg-light text-dark rounded-pill px-3 py-2">
                                    <i class="fas fa-calendar fa-xs me-1"></i>Events
                                </span>
                                <span class="badge bg-light text-dark rounded-pill px-3 py-2">
                                    <i class="fas fa-id-card fa-xs me-1"></i>Fan Cards
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <div>
                                <h5 class="card-title fw-bold mb-1"><?php echo $row['name'] ?></h5>
                                <p class="text-primary fw-semibold mb-0"><?php echo $row['specialties'] ?></p>
                            </div>
                            <div class="text-end">
                                <div class="d-flex align-items-center text-warning mb-1">
                                    <i class="fas fa-star fa-xs"></i>
                                    <i class="fas fa-star fa-xs"></i>
                                    <i class="fas fa-star fa-xs"></i>
                                    <i class="fas fa-star fa-xs"></i>
                                    <i class="fas fa-star fa-xs"></i>
                                    <span class="text-muted ms-1 small">(<?php echo $row['response_rate'] ?>)</span>
                                </div>
                            </div>
                        </div>

                        <p class="text-muted mb-4"><?php echo $row['about'] ?>...</p>

                        <!-- Service Pricing -->
                        <div class="row g-2 mb-4 text-center">
                            <div class="col-6">
                                <div class="p-3 bg-light rounded-3">
                                    <div class="small text-muted mb-1">Personal Meetup</div>
                                    <div class="fw-bold text-success fs-6">$<?php echo number_format($row['personal_meetup_fee'], 2) ?></div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="p-3 bg-light rounded-3">
                                    <div class="small text-muted mb-1">Event Booking</div>
                                    <div class="fw-bold text-info fs-6">$<?php echo number_format($row['regular_fee'], 2) ?>/6h</div>
                                </div>
                            </div>
                        </div>

                        <div class="d-grid gap-2">
                            <a href="detailscelebrities.php?id=<?php echo $row['id'] ?>"
                                class="btn btn-primary-modern btn-modern">
                                <i class="fas fa-eye me-2"></i>View Profile & Book
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <?php }} ?>

        </div>

        <!-- Pagination -->
    </div>


    <!-- Loading Modal -->
    <div class="modal fade" id="loadingModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content border-0 bg-transparent">
                <div class="modal-body text-center">
                    <div class="glass-card p-4">
                        <div class="spinner-border text-primary mb-3" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mb-0 fw-semibold">Loading celebrity profile...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* Custom Pagination Styles */
        .pagination-wrapper .pagination {
            border-radius: 15px;
            overflow: hidden;
            box-shadow: var(--shadow-md);
        }

        .pagination-wrapper .page-link {
            border: none;
            color: #667eea;
            font-weight: 500;
            padding: 12px 16px;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
        }

        .pagination-wrapper .page-link:hover {
            background: var(--primary-gradient);
            color: white;
            transform: translateY(-2px);
        }

        .pagination-wrapper .page-item.active .page-link {
            background: var(--primary-gradient);
            border: none;
            color: white;
        }
    </style>
</main>
<script>
    // Add smooth scrolling and modern interactions
    document.addEventListener('DOMContentLoaded', function () {
        // Animate elements on scroll
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver(function (entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('fade-in-up');
                }
            });
        }, observerOptions);

        // Observe all cards and feature elements
        document.querySelectorAll('.card-modern, .feature-card, .celebrity-card').forEach(el => {
            observer.observe(el);
        });

        // Add loading states to buttons
        document.querySelectorAll('form').forEach(form => {
            form.addEventListener('submit', function () {
                const submitBtn = form.querySelector('button[type="submit"]');
                if (submitBtn) {
                    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Processing...';
                    submitBtn.disabled = true;
                }
            });
        });
    });
</script>

<!-- Load remaining scripts -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Lazy load images
        const lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));

        if ('IntersectionObserver' in window) {
            let lazyImageObserver = new IntersectionObserver(function (entries, observer) {
                entries.forEach(function (entry) {
                    if (entry.isIntersecting) {
                        let lazyImage = entry.target;
                        lazyImage.src = lazyImage.dataset.src;
                        lazyImage.onload = function () {
                            lazyImage.classList.add('loaded');
                            const spinner = lazyImage.parentElement.querySelector('.lazy-spinner');
                            if (spinner) spinner.remove();
                        };
                        lazyImageObserver.unobserve(lazyImage);
                    }
                });
            });

            lazyImages.forEach(function (lazyImage) {
                lazyImageObserver.observe(lazyImage);
            });
        } else {
            // Fallback for browsers that don't support IntersectionObserver
            let active = false;
            const lazyLoad = function () {
                if (active === false) {
                    active = true;
                    setTimeout(function () {
                        lazyImages.forEach(function (lazyImage) {
                            if ((lazyImage.getBoundingClientRect().top <= window.innerHeight * 1.5 &&
                                lazyImage.getBoundingClientRect().bottom >= -200) &&
                                getComputedStyle(lazyImage).display !== 'none') {
                                lazyImage.src = lazyImage.dataset.src;
                                lazyImage.onload = function () {
                                    lazyImage.classList.add('loaded');
                                    const spinner = lazyImage.parentElement.querySelector('.lazy-spinner');
                                    if (spinner) spinner.remove();
                                };
                                lazyImages = lazyImages.filter(function (image) {
                                    return image !== lazyImage;
                                });

                                if (lazyImages.length === 0) {
                                    document.removeEventListener('scroll', lazyLoad);
                                    window.removeEventListener('resize', lazyLoad);
                                    window.removeEventListener('orientationchange', lazyLoad);
                                }
                            }
                        });
                        active = false;
                    }, 200);
                }
            };

            document.addEventListener('scroll', lazyLoad);
            window.addEventListener('resize', lazyLoad);
            window.addEventListener('orientationchange', lazyLoad);
        }

        // Preconnect to external domains
        const preconnect = function (url) {
            const link = document.createElement('link');
            link.rel = 'preconnect';
            link.href = url;
            document.head.appendChild(link);
        };

        // Preconnect to CDNs
        preconnect('https://fonts.googleapis.com');
        preconnect('https://fonts.gstatic.com');
        preconnect('https://cdnjs.cloudflare.com');

        // Add loading state to search form
        const searchForm = document.querySelector('form[action*="celebrities.index"]');
        if (searchForm) {
            searchForm.addEventListener('submit', function () {
                const loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'));
                loadingModal.show();
            });
        }
    });
</script>
<?php
include 'footer.php';

?>