<?php
// Include configuration and models using existing init.php
require_once __DIR__ . '/app/Core/init.php';

// Initialize models
$itemModel = new Item();

// Set page variables
$page_title = 'Page Not Found';
$body_class = '';

// Include header template
include __DIR__ . '/templates/layouts/frontend/header.php';
?>

    <!-- start 404 content -->
    <div class="py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 text-center">
                    <!-- start 404 illustration -->
                    <div class="mb-5">
                        <div class="position-relative d-inline-block">
                            <h1 class="display-1 fw-bold text-muted mb-0">404</h1>
                            <div class="position-absolute top-0 end-0 translate-middle">
                                <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                                    <i class="fas fa-search fs-4 text-primary"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end 404 illustration -->
                    
                    <h2 class="h3 mb-4">Oops! Page Not Found</h2>
                    <p class="lead text-muted mb-4">
                        The page you're looking for doesn't exist, has been moved, or the URL might be incorrect. 
                        Don't worry, we'll help you find what you're looking for.
                    </p>
                    
                    <!-- start search form -->
                    <div class="row justify-content-center mb-5">
                        <div class="col-md-8">
                            <form action="items.php" method="GET" class="d-flex">
                                <input type="text" name="search" class="form-control me-2" placeholder="Search for items...">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search me-2"></i>Search
                                </button>
                            </form>
                        </div>
                    </div>
                    <!-- end search form -->
                    
                    <!-- start action buttons -->
                    <div class="d-flex gap-3 justify-content-center flex-wrap">
                        <a href="index.php" class="btn btn-primary btn-lg">
                            <i class="fas fa-home me-2"></i>Go Home
                        </a>
                        <a href="items.php" class="btn btn-outline-primary btn-lg">
                            <i class="fas fa-th-large me-2"></i>Browse Items
                        </a>
                        <a href="javascript:history.back()" class="btn btn-outline-secondary btn-lg">
                            <i class="fas fa-arrow-left me-2"></i>Go Back
                        </a>
                    </div>
                    <!-- end action buttons -->
                </div>
            </div>
        </div>
    </div>
    <!-- end 404 content -->

    <!-- start helpful links -->
    <div class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h3 class="mb-3">You might be looking for</h3>
                <p class="text-muted">Here are some popular pages that might help</p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-3 col-md-6">
                    <div class="border-0 card h-100 rounded-4 p-4 text-center">
                        <div class="card-body">
                            <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                <i class="fas fa-home fs-3 text-primary"></i>
                            </div>
                            <h6>Homepage</h6>
                            <p class="text-muted small mb-3">Discover featured items and categories</p>
                            <a href="index.php" class="btn btn-outline-primary btn-sm">Visit Homepage</a>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-6">
                    <div class="border-0 card h-100 rounded-4 p-4 text-center">
                        <div class="card-body">
                            <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                <i class="fas fa-th-large fs-3 text-primary"></i>
                            </div>
                            <h6>Browse Items</h6>
                            <p class="text-muted small mb-3">Explore all available items for rent</p>
                            <a href="items.php" class="btn btn-outline-primary btn-sm">Browse Now</a>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-6">
                    <div class="border-0 card h-100 rounded-4 p-4 text-center">
                        <div class="card-body">
                            <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                <i class="fas fa-info-circle fs-3 text-primary"></i>
                            </div>
                            <h6>About Us</h6>
                            <p class="text-muted small mb-3">Learn more about rentidium</p>
                            <a href="about-us.php" class="btn btn-outline-primary btn-sm">Learn More</a>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-6">
                    <div class="border-0 card h-100 rounded-4 p-4 text-center">
                        <div class="card-body">
                            <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                <i class="fas fa-question-circle fs-3 text-primary"></i>
                            </div>
                            <h6>Help & FAQ</h6>
                            <p class="text-muted small mb-3">Find answers to common questions</p>
                            <a href="faq.php" class="btn btn-outline-primary btn-sm">Get Help</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end helpful links -->

    <!-- start recent items -->
    <div class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h3 class="mb-3">Popular Items</h3>
                <p class="text-muted">Check out some of our most popular rental items</p>
            </div>
            
            <?php
            try {
                $popular_items = $itemModel->getPopular(4);
            } catch (Exception $e) {
                $popular_items = [];
                error_log('Database error: ' . $e->getMessage());
            }
            ?>
            
            <?php if (!empty($popular_items)): ?>
                <div class="row g-4">
                    <?php foreach ($popular_items as $item): ?>
                        <div class="col-lg-3 col-md-6">
                            <div class="border-0 card card-hover h-100 rounded-4 overflow-hidden">
                                <a href="item-details.php?slug=<?= $item['slug'] ?>" class="stretched-link"></a>
                                <div class="position-relative">
                                    <img src="<?= htmlspecialchars($item['main_image'] ?? 'assets/images/default-item.jpg') ?>" alt="<?= htmlspecialchars($item['title']) ?>" class="card-img-top h-200 object-fit-cover">
                                    <div class="position-absolute top-0 start-0 m-3">
                                        <span class="badge bg-primary"><?= htmlspecialchars($item['category_name']) ?></span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-star text-warning me-1"></i>
                                            <span class="small"><?= number_format($item['average_rating'] ?? 0, 1) ?> (<?= $item['total_reviews'] ?? 0 ?>)</span>
                                        </div>
                                        <span class="badge bg-success">Available</span>
                                    </div>
                                    <h5 class="fw-semibold mb-2"><?= htmlspecialchars($item['title']) ?></h5>
                                    <p class="text-muted small mb-2">
                                        <i class="fas fa-map-marker-alt me-1"></i>
                                        <?= htmlspecialchars($item['city'] . ', ' . $item['state']) ?>
                                    </p>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <span class="fs-5 fw-bold text-primary">$<?= number_format($item['price_per_day'], 2) ?></span>
                                            <span class="text-muted small">/day</span>
                                        </div>
                                        <small class="text-muted">by <?= htmlspecialchars($item['vendor_name']) ?></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
                
                <div class="text-center mt-4">
                    <a href="items.php" class="btn btn-primary btn-lg">
                        <i class="fas fa-th-large me-2"></i>View All Items
                    </a>
                </div>
            <?php else: ?>
                <div class="text-center py-4">
                    <p class="text-muted">No items available at the moment. Please check back later!</p>
                </div>
            <?php endif; ?>
        </div>
    </div>
    <!-- end recent items -->

    <!-- start report issue CTA -->
    <div class="py-5 bg-primary text-white">
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-lg-8">
                    <h3 class="mb-3">Found a Broken Link?</h3>
                    <p class="lead mb-4">Help us improve by reporting this issue. We're constantly working to make our site better.</p>
                    <a href="contact-us.php?subject=Broken Link Report&message=URL: <?= htmlspecialchars($_SERVER['REQUEST_URI']) ?>" class="btn btn-light btn-lg">
                        <i class="fas fa-exclamation-triangle me-2"></i>Report This Issue
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- end report issue CTA -->

    <script>
    // Auto-focus search input when page loads
    document.addEventListener('DOMContentLoaded', function() {
        const searchInput = document.querySelector('input[name="search"]');
        if (searchInput) {
            searchInput.focus();
        }
    });
    </script>

<?php
// Include footer template
include __DIR__ . '/templates/layouts/frontend/footer.php';
?>