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

<?= $this->section('content') ?>
<div class="bg-primary text-white py-4 mb-5" style="background: var(--primary-gradient) !important;">
    <div class="container fade-in">
        <h2 class="fw-bold mb-4"><i class="fa-solid fa-plane-up me-2"></i> Search Flights</h2>
        <form action="<?= base_url('flights') ?>" method="GET" class="bg-white p-3 rounded-4 shadow-sm">
            <div class="row g-2 align-items-end">
                <div class="col-md-3">
                    <label class="form-label text-dark fw-bold mb-1 small">From</label>
                    <input type="text" name="source" value="<?= esc($request->getGet('source') ?? '') ?>" class="form-control" placeholder="Source City">
                </div>
                <div class="col-md-3">
                    <label class="form-label text-dark fw-bold mb-1 small">To</label>
                    <input type="text" name="destination" value="<?= esc($request->getGet('destination') ?? '') ?>" class="form-control" placeholder="Destination City">
                </div>
                <div class="col-md-3">
                    <label class="form-label text-dark fw-bold mb-1 small">Departure Date</label>
                    <input type="date" name="date" value="<?= esc($request->getGet('date') ?? '') ?>" class="form-control">
                </div>
                <div class="col-md-3">
                    <button type="submit" class="btn btn-primary w-100 h-100">Update 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-2">Price Range</label>
                        <input type="range" class="form-range" min="1000" max="20000" id="priceRange">
                        <div class="d-flex justify-content-between small text-muted">
                            <span>₹1,000</span>
                            <span>₹20,000</span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="fw-semibold d-block mb-2">Airlines</label>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="ai1" checked>
                            <label class="form-check-label" for="ai1">Air India</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="ai2" checked>
                            <label class="form-check-label" for="ai2">IndiGo</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="ai3" checked>
                            <label class="form-check-label" for="ai3">Vistara</label>
                        </div>
                    </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($flights) ?> Flights Found</h4>
                <select class="form-select w-auto border-0 bg-white shadow-sm rounded-pill px-4">
                    <option>Cheapest First</option>
                    <option>Fastest First</option>
                    <option>Earliest Flight</option>
                </select>
            </div>

            <?php if(empty($flights)): ?>
                <div class="alert alert-warning rounded-4 border-0 shadow-sm text-center py-5">
                    <i class="fa-solid fa-plane-slash fs-1 text-muted mb-3 d-block"></i>
                    <h5>No flights found for your search criteria.</h5>
                    <p class="text-muted mb-0">Try changing dates or destinations.</p>
                </div>
            <?php else: ?>
                <?php foreach($flights as $flight): ?>
                    <div class="card border-0 shadow-sm rounded-4 mb-3 flight-card hover-lift">
                        <div class="card-body p-4">
                            <div class="row align-items-center text-center text-md-start">
                                <div class="col-md-2 col-12 mb-3 mb-md-0 d-flex flex-column align-items-center">
                                    <div class="bg-light rounded-circle p-3 mb-2">
                                        <i class="fa-solid fa-plane text-primary fs-3"></i>
                                    </div>
                                    <span class="fw-bold"><?= esc($flight->airline) ?></span>
                                    <small class="text-muted"><?= esc($flight->flight_number) ?></small>
                                </div>
                                <div class="col-md-3 col-4">
                                    <h4 class="fw-bold mb-0"><?= date('H:i', strtotime($flight->departure_time)) ?></h4>
                                    <p class="text-muted mb-0"><?= esc($flight->source) ?></p>
                                </div>
                                <div class="col-md-2 col-4 text-center">
                                    <div class="text-muted small mb-1">
                                        <?php 
                                            $diff = strtotime($flight->arrival_time) - strtotime($flight->departure_time);
                                            echo gmdate('H\h i\m', $diff);
                                        ?>
                                    </div>
                                    <div class="position-relative w-100">
                                        <hr class="border-2 border-primary my-0">
                                        <i class="fa-solid fa-plane text-primary bg-white px-1 position-absolute top-50 start-50 translate-middle"></i>
                                    </div>
                                    <div class="text-success small mt-1">Non-stop</div>
                                </div>
                                <div class="col-md-3 col-4">
                                    <h4 class="fw-bold mb-0"><?= date('H:i', strtotime($flight->arrival_time)) ?></h4>
                                    <p class="text-muted mb-0"><?= esc($flight->destination) ?></p>
                                </div>
                                <div class="col-md-2 col-12 mt-3 mt-md-0 border-start text-center border-0-sm">
                                    <h3 class="fw-bold text-primary mb-2">₹<?= number_format($flight->base_price, 2) ?></h3>
                                    <a href="#" class="btn btn-outline-primary w-100 rounded-pill fw-semibold">Book Now</a>
                                </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(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}
.border-0-sm {
    border-left: none !important;
}
@media (min-width: 768px) {
    .border-0-sm { border-left: 1px solid #dee2e6 !important; }
}
</style>
<?= $this->endSection() ?>
