<?= $this->extend('layouts/main') ?>

<?= $this->section('content') ?>
<div class="bg-success text-white py-4 mb-5" style="background: linear-gradient(135deg, #198754 0%, #20c997 100%) !important;">
    <div class="container fade-in">
        <h2 class="fw-bold mb-4"><i class="fa-solid fa-hotel me-2"></i> Search Hotels</h2>
        <form action="<?= base_url('hotels') ?>" method="GET" class="bg-white p-3 rounded-4 shadow-sm text-dark">
            <div class="row g-2 align-items-end">
                <div class="col-md-4">
                    <label class="form-label text-dark fw-bold mb-1 small">Destination / City</label>
                    <input type="text" name="city" value="<?= esc($request->getGet('city') ?? '') ?>" class="form-control" placeholder="Where are you going?">
                </div>
                <div class="col-md-3">
                    <label class="form-label text-dark fw-bold mb-1 small">Check-in</label>
                    <input type="date" name="checkin" class="form-control">
                </div>
                <div class="col-md-3">
                    <label class="form-label text-dark fw-bold mb-1 small">Check-out</label>
                    <input type="date" name="checkout" class="form-control">
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-success w-100 h-100">Search</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="container mb-5 fade-in" style="animation-delay: 0.2s;">
    <div class="row">
        <!-- Filters Sidebar -->
        <div class="col-md-3 mb-4">
            <div class="card border-0 shadow-sm rounded-4">
                <div class="card-body">
                    <h5 class="fw-bold mb-3">Filters</h5>
                    <hr>
                    <div class="mb-3">
                        <label class="fw-semibold d-block mb-3">Star Rating</label>
                        <?php for($i=5; $i>=3; $i--): ?>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" id="star<?= $i ?>" checked>
                            <label class="form-check-label text-warning" for="star<?= $i ?>">
                                <?php for($j=0; $j<$i; $j++): ?><i class="fa-solid fa-star"></i><?php endfor; ?>
                            </label>
                        </div>
                        <?php endfor; ?>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Results -->
        <div class="col-md-9">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h4 class="mb-0 fw-bold"><?= count($hotels) ?> Properties Found</h4>
                <select class="form-select w-auto border-0 bg-white shadow-sm rounded-pill px-4">
                    <option>Recommended</option>
                    <option>Price: Low to High</option>
                    <option>Highest Rated</option>
                </select>
            </div>

            <?php if(empty($hotels)): ?>
                <div class="alert alert-warning rounded-4 border-0 shadow-sm text-center py-5">
                    <i class="fa-solid fa-building-circle-xmark fs-1 text-muted mb-3 d-block"></i>
                    <h5>No hotels found for your search criteria.</h5>
                    <p class="text-muted mb-0">Try searching for a different city.</p>
                </div>
            <?php else: ?>
                <?php foreach($hotels as $hotel): ?>
                    <div class="card border-0 shadow-sm rounded-4 mb-4 overflow-hidden position-relative pt-card hover-lift">
                        <div class="row g-0">
                            <div class="col-md-4 position-relative">
                                <!-- Placeholders for beautiful hotel images -->
                                <?php 
                                    $imgId = rand(10,50);
                                    $imgUrl = "https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=800&q=80"; 
                                    if(strpos(strtolower($hotel->name), 'oberoi') !== false) $imgUrl = "https://images.unsplash.com/photo-1542314831-c6a4d14b18d2?auto=format&fit=crop&w=800&q=80";
                                    if(strpos(strtolower($hotel->name), 'budget') !== false) $imgUrl = "https://images.unsplash.com/photo-1551882547-ff40c0d512a8?auto=format&fit=crop&w=800&q=80";
                                ?>
                                <img src="<?= $imgUrl ?>" class="img-fluid rounded-start h-100 object-fit-cover" alt="Hotel" style="min-height: 220px;">
                                <div class="position-absolute top-0 end-0 p-2">
                                    <button class="btn btn-light rounded-circle text-danger shadow-sm"><i class="fa-regular fa-heart"></i></button>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="card-body p-4 d-flex flex-column h-100">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <div>
                                            <h4 class="card-title fw-bold mb-1"><?= esc($hotel->name) ?></h4>
                                            <div class="text-warning small mb-2">
                                                <?php for($i=0; $i<$hotel->star_rating; $i++): ?>
                                                    <i class="fa-solid fa-star"></i>
                                                <?php endfor; ?>
                                            </div>
                                            <p class="text-muted small mb-0"><i class="fa-solid fa-location-dot me-1"></i> <?= esc($hotel->city) ?> • <a href="#" class="text-decoration-none">Show on map</a></p>
                                        </div>
                                        <div class="bg-success text-white px-2 py-1 rounded fw-bold">8.5</div>
                                    </div>
                                    
                                    <p class="card-text text-muted small mt-2 d-none d-md-block"><?= esc($hotel->description) ?></p>
                                    
                                    <div class="mt-auto pt-3 border-top d-flex justify-content-between align-items-end">
                                        <div>
                                            <span class="badge bg-light text-success border border-success mb-1 d-inline-block"><i class="fa-solid fa-check me-1"></i>Free Cancellation</span>
                                            <div class="text-success small fw-semibold">Breakfast included</div>
                                        </div>
                                        <div class="text-end">
                                            <div class="text-muted small">1 night, 2 adults</div>
                                            <h3 class="fw-bold text-dark mb-1">₹<?= number_format($hotel->base_price_per_night, 2) ?></h3>
                                            <div class="text-muted small mb-2">+₹<?= number_format($hotel->base_price_per_night * 0.18, 2) ?> taxes and fees</div>
                                            <a href="#" class="btn btn-primary rounded-pill px-4 fw-semibold shadow-sm">Select Room</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>
</div>

<style>
.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
}
.object-fit-cover {
    object-fit: cover;
}
</style>
<?= $this->endSection() ?>
