<?php
require_once 'includes/config.php';

// Get filter parameters
$pickup_location = isset($_GET['pickup_location']) ? trim($_GET['pickup_location']) : '';
$pickup_date = isset($_GET['pickup_date']) ? $_GET['pickup_date'] : '';
$dropoff_date = isset($_GET['dropoff_date']) ? $_GET['dropoff_date'] : '';
$pickup_time = isset($_GET['pickup_time']) ? $_GET['pickup_time'] : '10:00';
$dropoff_time = isset($_GET['dropoff_time']) ? $_GET['dropoff_time'] : '10:00';
$car_type = isset($_GET['car_type']) ? $_GET['car_type'] : '';
$seats = isset($_GET['seats']) ? (int)$_GET['seats'] : 0;
$transmission = isset($_GET['transmission']) ? $_GET['transmission'] : '';

$PREPARATION_HOURS = PREPARATION_HOURS;

if(empty($pickup_time)) $pickup_time = '10:00';
if(empty($dropoff_time)) $dropoff_time = '10:00';

// Generate time options for dropdown (24-hour format)
$time_options = [];
for($hour = 0; $hour <= 23; $hour++) {
    $hour_str = str_pad($hour, 2, '0', STR_PAD_LEFT);
    $time_options[] = $hour_str . ':00';
}

// Get ALL cars first (no filters on availability yet)
// Shfaqim vetem makinen "primare" te cdo grupi (group_id IS NULL = makine unike,
// is_primary = 1 = makina perfaqesuese e grupit te makinave identike)
$sql = "SELECT * FROM cars WHERE status = 'available' AND (group_id IS NULL OR is_primary = 1)";
$params = [];

if($car_type) {
    $sql .= " AND car_type = ?";
    $params[] = $car_type;
}

if($seats > 0) {
    $sql .= " AND seats >= ?";
    $params[] = $seats;
}

if($transmission) {
    $sql .= " AND transmission = ?";
    $params[] = $transmission;
}

$sql .= " ORDER BY id DESC";
$stmt = $pdo->prepare($sql);
$stmt->execute($params);
$all_cars = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Filter cars by availability
$filtered_cars = [];

foreach($all_cars as $car) {
    $is_available = true;
    
    if(!empty($pickup_date) && !empty($dropoff_date)) {
        if($pickup_date > $dropoff_date) {
            $is_available = false;
        }
        elseif($pickup_date == $dropoff_date && $pickup_time >= $dropoff_time) {
            $is_available = false;
        }
        else {
            $availability = isGroupAvailable(
                $car['id'], 
                $pickup_date, 
                $pickup_time,
                $dropoff_date, 
                $dropoff_time,
                $pdo, 
                null, 
                $PREPARATION_HOURS
            );
            $is_available = $availability['available'];
        }
    }
    
    if($is_available) {
        $car['daily_price'] = getCarBasePrice($car['id'], $pdo);
        $filtered_cars[] = $car;
    }
}

$type_labels = [
    'economy' => t('car_type_economy'),
    'sedan' => t('car_type_sedan'),
    'suv' => t('car_type_suv'),
    '7-seats' => t('car_type_7seats'),
    'cabrio' => t('car_type_cabrio'),
    'luxury' => t('car_type_luxury')
];

$site_name = getSetting('site_name', $pdo, 'Car Rental Albania');
$page_title = t('search_title') . ' - ' . $site_name;

require_once 'header.php';
?>

<!DOCTYPE html>
<html lang="<?php echo getCurrentLanguage(); ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=yes">
    <title><?php echo sanitize($page_title); ?></title>
    <style>
        :root {
            --primary: #0066ff;
            --primary-dark: #0052cc;
            --secondary: #1a1f36;
            --text-light: #5a6e8a;
            --bg-light: #f8fafc;
            --white: #ffffff;
            --border: #eef2f6;
            --success: #10b981;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background: var(--bg-light);
            color: var(--secondary);
            line-height: 1.5;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .page-container { 
            max-width: 1400px; 
            margin: 0 auto; 
            padding: 20px 5%;
        }
        
        .page-header { 
            margin-bottom: 24px; 
            text-align: center;
        }
        .page-header h1 { 
            font-size: clamp(24px, 6vw, 32px); 
            font-weight: 700; 
            margin-bottom: 8px; 
            color: #000000;
        }
        .page-header p { 
            color: var(--text-light); 
            font-size: clamp(14px, 4vw, 16px); 
        }
        
        .time-settings-bar {
            background: white;
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 24px;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            gap: 16px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            border: 1px solid var(--border);
        }
        .time-setting-group { 
            display: flex; 
            flex-direction: column; 
            gap: 6px;
            flex: 1;
            min-width: 120px;
        }
        .time-setting-group label { 
            font-size: 12px; 
            font-weight: 600; 
            color: var(--text-light); 
            text-transform: uppercase; 
        }
        .time-setting-group select { 
            padding: 12px 14px; 
            border: 2px solid var(--border); 
            border-radius: 14px; 
            font-size: 16px;
            font-family: monospace;
            background: white;
            cursor: pointer;
            -webkit-appearance: none;
            appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
            background-repeat: no-repeat;
            background-position: right 14px center;
            padding-right: 40px;
        }
        .apply-time-btn, .reset-time-btn { 
            padding: 12px 20px; 
            border: none; 
            border-radius: 14px; 
            cursor: pointer; 
            font-size: 14px; 
            font-weight: 600;
            -webkit-tap-highlight-color: transparent;
        }
        .apply-time-btn { 
            background: var(--primary); 
            color: white;
        }
        .apply-time-btn:active {
            transform: scale(0.97);
            background: var(--primary-dark);
        }
        .reset-time-btn { 
            background: #6b7280; 
            color: white;
        }
        .reset-time-btn:active {
            transform: scale(0.97);
            background: #4b5563;
        }
        
        .search-layout { 
            display: grid; 
            grid-template-columns: 280px 1fr; 
            gap: 30px; 
        }
        
        .filter-toggle-btn {
            display: none;
            background: var(--primary);
            color: white;
            width: 100%;
            padding: 14px;
            border: none;
            border-radius: 14px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            margin-bottom: 20px;
            gap: 10px;
            align-items: center;
            justify-content: center;
            -webkit-tap-highlight-color: transparent;
        }
        .filter-toggle-btn:active {
            transform: scale(0.98);
            background: var(--primary-dark);
        }
        
        .filters-sidebar {
            background: white;
            border-radius: 20px;
            padding: 24px;
            height: fit-content;
            position: sticky;
            top: 100px;
            border: 1px solid var(--border);
            max-height: calc(100vh - 120px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .filter-section { 
            margin-bottom: 24px; 
            padding-bottom: 20px; 
            border-bottom: 1px solid var(--border); 
        }
        .filter-section:last-child { 
            border-bottom: none; 
            margin-bottom: 0; 
            padding-bottom: 0; 
        }
        .filter-section h3 { 
            font-size: 16px; 
            font-weight: 600; 
            margin-bottom: 16px; 
            color: #000000;
        }
        .filter-option { margin-bottom: 12px; }
        .filter-option label { 
            display: flex; 
            align-items: center; 
            gap: 12px; 
            cursor: pointer; 
            font-size: 15px;
            padding: 4px 0;
            color: #333333;
        }
        .filter-option input[type="radio"] { 
            width: 18px; 
            height: 18px; 
            accent-color: var(--primary);
            margin: 0;
        }
        
        .btn-filter { 
            background: var(--primary); 
            color: white; 
            padding: 14px; 
            border: none; 
            border-radius: 14px; 
            cursor: pointer; 
            width: 100%; 
            font-size: 15px; 
            font-weight: 600; 
            margin-top: 8px;
            -webkit-tap-highlight-color: transparent;
        }
        .btn-filter:active { transform: scale(0.98); }
        .btn-reset { background: #6b7280; margin-top: 8px; }
        .btn-reset:active { background: #4b5563; }
        
        .search-summary {
            background: linear-gradient(135deg, rgba(0,102,255,0.08) 0%, rgba(0,102,255,0.02) 100%);
            padding: 16px 20px;
            border-radius: 20px;
            margin-bottom: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            border: 1px solid rgba(0,102,255,0.1);
        }
        .search-summary .dates { 
            font-size: 14px; 
            font-weight: 600; 
            color: var(--primary);
            word-break: break-word;
        }
        .search-summary .change-link { 
            color: var(--primary); 
            text-decoration: none; 
            font-size: 13px;
            padding: 8px 12px;
            border-radius: 20px;
            background: rgba(0,102,255,0.1);
            -webkit-tap-highlight-color: transparent;
        }
        .search-summary .change-link:active {
            background: rgba(0,102,255,0.2);
        }
        
        .results-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            flex-wrap: wrap;
            gap: 12px;
        }
        .results-count { 
            color: var(--text-light); 
            font-size: 14px;
            font-weight: 500;
        }
        .sort-select { 
            padding: 12px 16px; 
            border: 2px solid var(--border); 
            border-radius: 14px; 
            font-size: 15px;
            background: white; 
            cursor: pointer;
            -webkit-appearance: none;
            appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
            background-repeat: no-repeat;
            background-position: right 16px center;
            padding-right: 40px;
            color: #333333;
        }
        
        .car-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
            gap: 24px; 
        }
        
        .car-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: all 0.3s;
            border: 1px solid var(--border);
            -webkit-tap-highlight-color: transparent;
        }
        .car-card:active { transform: scale(0.98); }
        .car-image { 
            width: 100%; 
            height: 200px; 
            object-fit: cover; 
            transition: transform 0.5s;
        }
        .car-image-wrapper { overflow: hidden; position: relative; }
        .car-type-badge { 
            position: absolute; 
            top: 12px; 
            left: 12px; 
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            color: white; 
            padding: 4px 12px; 
            border-radius: 20px; 
            font-size: 11px; 
            font-weight: 500; 
            text-transform: uppercase; 
        }
        .car-info { padding: 20px; }
        
        .car-brand {
            font-size: 22px;
            font-weight: 800;
            color: #000000;
            margin-bottom: 4px;
            letter-spacing: -0.3px;
            line-height: 1.2;
        }
        .car-model {
            font-size: 16px;
            font-weight: 500;
            color: #555555;
            margin-bottom: 12px;
        }
        .car-specs { 
            display: flex; 
            gap: 12px; 
            margin-bottom: 12px; 
            font-size: 13px; 
            color: var(--text-light); 
            flex-wrap: wrap; 
        }
        .car-specs i { width: 16px; margin-right: 4px; color: var(--primary); }
        .car-price { 
            font-size: 24px; 
            font-weight: 700; 
            color: var(--primary); 
            margin: 12px 0; 
        }
        .car-price small { 
            font-size: 13px; 
            font-weight: normal; 
            color: var(--text-light); 
        }
        .btn-view { 
            display: inline-block; 
            background: var(--primary); 
            color: white; 
            padding: 14px 20px; 
            border-radius: 14px; 
            text-decoration: none; 
            font-size: 15px; 
            font-weight: 600; 
            transition: all 0.3s; 
            width: 100%; 
            text-align: center;
            -webkit-tap-highlight-color: transparent;
        }
        .btn-view:active {
            transform: scale(0.98);
            background: var(--primary-dark);
        }
        
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            background: white;
            border-radius: 20px;
            border: 1px solid var(--border);
        }
        .empty-state i { font-size: 64px; color: #ccc; margin-bottom: 16px; }
        .empty-state h3 { margin-bottom: 12px; font-size: 20px; }
        .empty-state p { color: var(--text-light); margin-bottom: 20px; }
        
        .fade-up {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }
        .fade-up.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .filter-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 999;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .filter-overlay.show {
            display: block;
            opacity: 1;
        }
        
        .filters-sidebar-mobile {
            position: fixed;
            top: 0;
            right: -100%;
            width: 85%;
            max-width: 320px;
            height: 100%;
            background: white;
            z-index: 1000;
            padding: 20px;
            overflow-y: auto;
            transition: right 0.3s ease;
            box-shadow: -2px 0 10px rgba(0,0,0,0.1);
        }
        .filters-sidebar-mobile.show {
            right: 0;
        }
        .filter-header-mobile {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border);
        }
        .filter-header-mobile h3 {
            font-size: 18px;
            font-weight: 600;
            color: #000000;
        }
        .close-filter-btn {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #666;
            padding: 5px;
        }
        
        @media (hover: hover) {
            .car-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            }
            .car-card:hover .car-image {
                transform: scale(1.05);
            }
        }
        
        @media (max-width: 900px) {
            .search-layout { 
                grid-template-columns: 1fr; 
            }
            .filters-sidebar { 
                display: none;
            }
            .filter-toggle-btn {
                display: flex;
            }
            .time-settings-bar { 
                flex-direction: column; 
                align-items: stretch; 
            }
            .time-setting-group .time-select { 
                width: 100%; 
            }
            .apply-time-btn, .reset-time-btn {
                width: 100%;
            }
        }
        
        @media (max-width: 480px) {
            .page-container { padding: 16px 4%; }
            .car-info { padding: 16px; }
            .car-brand { font-size: 18px; }
            .car-model { font-size: 14px; }
            .car-price { font-size: 22px; }
            .btn-view { padding: 12px 16px; font-size: 14px; }
            .filter-option label { font-size: 14px; }
        }
        
        button, .btn-view, .apply-time-btn, .reset-time-btn, .btn-filter {
            cursor: pointer;
            touch-action: manipulation;
        }
        
        input, select, textarea {
            font-size: 16px !important;
        }
    </style>
</head>
<body>
    <div class="page-container">
        <div class="page-header">
            <h1><?php echo t('search_title'); ?></h1>
            <p><?php echo t('search_subtitle'); ?></p>
        </div>
        
        <div class="time-settings-bar">
            <form method="GET" id="timeSettingsForm" style="display: contents;">
                <?php if($pickup_location): ?>
                    <input type="hidden" name="pickup_location" value="<?php echo htmlspecialchars($pickup_location); ?>">
                <?php endif; ?>
                <?php if($pickup_date): ?>
                    <input type="hidden" name="pickup_date" value="<?php echo htmlspecialchars($pickup_date); ?>">
                <?php endif; ?>
                <?php if($dropoff_date): ?>
                    <input type="hidden" name="dropoff_date" value="<?php echo htmlspecialchars($dropoff_date); ?>">
                <?php endif; ?>
                <?php if($car_type): ?>
                    <input type="hidden" name="car_type" value="<?php echo htmlspecialchars($car_type); ?>">
                <?php endif; ?>
                <?php if($seats > 0): ?>
                    <input type="hidden" name="seats" value="<?php echo $seats; ?>">
                <?php endif; ?>
                <?php if($transmission): ?>
                    <input type="hidden" name="transmission" value="<?php echo htmlspecialchars($transmission); ?>">
                <?php endif; ?>
                
                <div class="time-setting-group">
                    <label><i class="fas fa-clock"></i> <?php echo t('car_details_pickup_time'); ?></label>
                    <select name="pickup_time" class="time-select">
                        <?php foreach($time_options as $time): ?>
                            <option value="<?php echo $time; ?>" <?php echo $pickup_time == $time ? 'selected' : ''; ?>><?php echo $time; ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="time-setting-group">
                    <label><i class="fas fa-clock"></i> <?php echo t('car_details_return_time'); ?></label>
                    <select name="dropoff_time" class="time-select">
                        <?php foreach($time_options as $time): ?>
                            <option value="<?php echo $time; ?>" <?php echo $dropoff_time == $time ? 'selected' : ''; ?>><?php echo $time; ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="time-setting-group">
                    <button type="submit" class="apply-time-btn"><?php echo t('search_apply_times'); ?></button>
                </div>
                <div class="time-setting-group">
                    <button type="button" class="reset-time-btn" onclick="resetTimes()"><?php echo t('search_reset_times'); ?></button>
                </div>
            </form>
        </div>
        
        <?php if(!empty($pickup_date) && !empty($dropoff_date)): 
            $days = getDaysBetween($pickup_date, $pickup_time, $dropoff_date, $dropoff_time);
        ?>
        <div class="search-summary">
            <div class="dates">
                <i class="fas fa-calendar-alt"></i> 
                <?php echo date('d M Y', strtotime($pickup_date)); ?> at <?php echo $pickup_time; ?>
                <i class="fas fa-arrow-right"></i> 
                <?php echo date('d M Y', strtotime($dropoff_date)); ?> at <?php echo $dropoff_time; ?>
                (<?php echo $days; ?> <?php echo t('car_details_days'); ?>)
            </div>
            <a href="index.php" class="change-link"><i class="fas fa-edit"></i> <?php echo t('search_change_dates'); ?></a>
        </div>
        <?php endif; ?>
        
        <button class="filter-toggle-btn" id="filterToggleBtn">
            <i class="fas fa-filter"></i> <?php echo t('search_filter_cars'); ?>
        </button>
        
        <div class="search-layout">
            <div class="filters-sidebar" id="desktopFilters">
                <form method="GET" id="filterForm" action="">
                    <?php if($pickup_location): ?>
                        <input type="hidden" name="pickup_location" value="<?php echo htmlspecialchars($pickup_location); ?>">
                    <?php endif; ?>
                    <?php if($pickup_date): ?>
                        <input type="hidden" name="pickup_date" value="<?php echo htmlspecialchars($pickup_date); ?>">
                    <?php endif; ?>
                    <?php if($dropoff_date): ?>
                        <input type="hidden" name="dropoff_date" value="<?php echo htmlspecialchars($dropoff_date); ?>">
                    <?php endif; ?>
                    <?php if($pickup_time): ?>
                        <input type="hidden" name="pickup_time" value="<?php echo htmlspecialchars($pickup_time); ?>">
                    <?php endif; ?>
                    <?php if($dropoff_time): ?>
                        <input type="hidden" name="dropoff_time" value="<?php echo htmlspecialchars($dropoff_time); ?>">
                    <?php endif; ?>
                    
                    <div class="filter-section">
                        <h3><?php echo t('hero_search_car_type'); ?></h3>
                        <?php foreach($type_labels as $key => $label): ?>
                        <div class="filter-option">
                            <label>
                                <input type="radio" name="car_type" value="<?php echo $key; ?>" <?php echo $car_type == $key ? 'checked' : ''; ?> onchange="this.form.submit()">
                                <?php echo $label; ?>
                            </label>
                        </div>
                        <?php endforeach; ?>
                        <div class="filter-option">
                            <label>
                                <input type="radio" name="car_type" value="" <?php echo !$car_type ? 'checked' : ''; ?> onchange="this.form.submit()">
                                <?php echo t('common_all'); ?>
                            </label>
                        </div>
                    </div>
                    
                    <div class="filter-section">
                        <h3><?php echo t('car_seats'); ?></h3>
                        <div class="filter-option"><label><input type="radio" name="seats" value="0" <?php echo $seats == 0 ? 'checked' : ''; ?> onchange="this.form.submit()"> <?php echo t('common_any'); ?></label></div>
                        <div class="filter-option"><label><input type="radio" name="seats" value="4" <?php echo $seats == 4 ? 'checked' : ''; ?> onchange="this.form.submit()"> 4 <?php echo t('car_seats'); ?></label></div>
                        <div class="filter-option"><label><input type="radio" name="seats" value="5" <?php echo $seats == 5 ? 'checked' : ''; ?> onchange="this.form.submit()"> 5 <?php echo t('car_seats'); ?></label></div>
                        <div class="filter-option"><label><input type="radio" name="seats" value="7" <?php echo $seats == 7 ? 'checked' : ''; ?> onchange="this.form.submit()"> 7+ <?php echo t('car_seats'); ?></label></div>
                    </div>
                    
                    <div class="filter-section">
                        <h3><?php echo t('car_specs_transmission'); ?></h3>
                        <div class="filter-option"><label><input type="radio" name="transmission" value="" <?php echo !$transmission ? 'checked' : ''; ?> onchange="this.form.submit()"> <?php echo t('common_any'); ?></label></div>
                        <div class="filter-option"><label><input type="radio" name="transmission" value="Manual" <?php echo $transmission == 'Manual' ? 'checked' : ''; ?> onchange="this.form.submit()"> Manual</label></div>
                        <div class="filter-option"><label><input type="radio" name="transmission" value="Automatic" <?php echo $transmission == 'Automatic' ? 'checked' : ''; ?> onchange="this.form.submit()"> Automatic</label></div>
                    </div>
                    
                    <button type="submit" class="btn-filter"><?php echo t('common_apply'); ?></button>
                    <button type="button" class="btn-filter btn-reset" onclick="resetFilters()"><?php echo t('common_reset'); ?></button>
                </form>
            </div>
            
            <div class="filters-sidebar-mobile" id="mobileFilters">
                <div class="filter-header-mobile">
                    <h3><?php echo t('search_filter_cars'); ?></h3>
                    <button class="close-filter-btn" id="closeFilterBtn">&times;</button>
                </div>
                <form method="GET" id="mobileFilterForm" action="">
                    <?php if($pickup_location): ?>
                        <input type="hidden" name="pickup_location" value="<?php echo htmlspecialchars($pickup_location); ?>">
                    <?php endif; ?>
                    <?php if($pickup_date): ?>
                        <input type="hidden" name="pickup_date" value="<?php echo htmlspecialchars($pickup_date); ?>">
                    <?php endif; ?>
                    <?php if($dropoff_date): ?>
                        <input type="hidden" name="dropoff_date" value="<?php echo htmlspecialchars($dropoff_date); ?>">
                    <?php endif; ?>
                    <?php if($pickup_time): ?>
                        <input type="hidden" name="pickup_time" value="<?php echo htmlspecialchars($pickup_time); ?>">
                    <?php endif; ?>
                    <?php if($dropoff_time): ?>
                        <input type="hidden" name="dropoff_time" value="<?php echo htmlspecialchars($dropoff_time); ?>">
                    <?php endif; ?>
                    
                    <div class="filter-section">
                        <h3><?php echo t('hero_search_car_type'); ?></h3>
                        <?php foreach($type_labels as $key => $label): ?>
                        <div class="filter-option">
                            <label>
                                <input type="radio" name="car_type" value="<?php echo $key; ?>" <?php echo $car_type == $key ? 'checked' : ''; ?> onchange="this.form.submit()">
                                <?php echo $label; ?>
                            </label>
                        </div>
                        <?php endforeach; ?>
                        <div class="filter-option">
                            <label>
                                <input type="radio" name="car_type" value="" <?php echo !$car_type ? 'checked' : ''; ?> onchange="this.form.submit()">
                                <?php echo t('common_all'); ?>
                            </label>
                        </div>
                    </div>
                    
                    <div class="filter-section">
                        <h3><?php echo t('car_seats'); ?></h3>
                        <div class="filter-option"><label><input type="radio" name="seats" value="0" <?php echo $seats == 0 ? 'checked' : ''; ?> onchange="this.form.submit()"> <?php echo t('common_any'); ?></label></div>
                        <div class="filter-option"><label><input type="radio" name="seats" value="4" <?php echo $seats == 4 ? 'checked' : ''; ?> onchange="this.form.submit()"> 4 <?php echo t('car_seats'); ?></label></div>
                        <div class="filter-option"><label><input type="radio" name="seats" value="5" <?php echo $seats == 5 ? 'checked' : ''; ?> onchange="this.form.submit()"> 5 <?php echo t('car_seats'); ?></label></div>
                        <div class="filter-option"><label><input type="radio" name="seats" value="7" <?php echo $seats == 7 ? 'checked' : ''; ?> onchange="this.form.submit()"> 7+ <?php echo t('car_seats'); ?></label></div>
                    </div>
                    
                    <div class="filter-section">
                        <h3><?php echo t('car_specs_transmission'); ?></h3>
                        <div class="filter-option"><label><input type="radio" name="transmission" value="" <?php echo !$transmission ? 'checked' : ''; ?> onchange="this.form.submit()"> <?php echo t('common_any'); ?></label></div>
                        <div class="filter-option"><label><input type="radio" name="transmission" value="Manual" <?php echo $transmission == 'Manual' ? 'checked' : ''; ?> onchange="this.form.submit()"> Manual</label></div>
                        <div class="filter-option"><label><input type="radio" name="transmission" value="Automatic" <?php echo $transmission == 'Automatic' ? 'checked' : ''; ?> onchange="this.form.submit()"> Automatic</label></div>
                    </div>
                    
                    <button type="submit" class="btn-filter"><?php echo t('common_apply'); ?></button>
                    <button type="button" class="btn-filter btn-reset" onclick="resetFiltersMobile()"><?php echo t('common_reset'); ?></button>
                </form>
            </div>
            <div class="filter-overlay" id="filterOverlay"></div>
            
            <div>
                <div class="results-header">
                    <div class="results-count">
                        <i class="fas fa-car"></i> <?php echo count($filtered_cars); ?> <?php echo t('search_results_count'); ?>
                    </div>
                    <select class="sort-select" id="sortSelect">
                        <option value="price_asc"><?php echo t('search_sort_price_low'); ?></option>
                        <option value="price_desc"><?php echo t('search_sort_price_high'); ?></option>
                        <option value="name_asc"><?php echo t('search_sort_name_asc'); ?></option>
                    </select>
                </div>
                
                <div class="car-grid" id="carGrid">
                    <?php if(count($filtered_cars) > 0): ?>
                        <?php foreach($filtered_cars as $car): ?>
                        <div class="car-card fade-up" data-price="<?php echo $car['daily_price']; ?>" data-name="<?php echo htmlspecialchars($car['brand'] . ' ' . $car['model']); ?>">
                            <div class="car-image-wrapper">
                                <img src="<?php echo !empty($car['image_url']) ? $car['image_url'] : 'https://placehold.co/400x200?text=' . urlencode($car['brand'] . ' ' . $car['model']); ?>" 
                                     alt="<?php echo htmlspecialchars($car['brand'] . ' ' . $car['model']); ?>" 
                                     class="car-image"
                                     loading="lazy"
                                     onerror="this.src='https://placehold.co/400x200?text=Car'">
                                <span class="car-type-badge"><?php echo $type_labels[$car['car_type']] ?? $car['car_type']; ?></span>
                            </div>
                            <div class="car-info">
                                <div class="car-brand"><?php echo htmlspecialchars($car['brand']); ?></div>
                                <div class="car-model"><?php echo htmlspecialchars($car['model']); ?></div>
                                <div class="car-specs">
                                    <span><i class="fas fa-cog"></i> <?php echo htmlspecialchars($car['transmission']); ?></span>
                                    <span><i class="fas fa-users"></i> <?php echo $car['seats']; ?> <?php echo t('car_seats'); ?></span>
                                    <span><i class="fas fa-suitcase"></i> <?php echo $car['luggage']; ?> <?php echo t('car_bags'); ?></span>
                                    <span><i class="fas fa-gas-pump"></i> <?php echo htmlspecialchars($car['fuel_type']); ?></span>
                                </div>
                                <div class="car-price">
                                    €<?php echo number_format($car['daily_price'], 2); ?> <small><?php echo t('car_per_day'); ?></small>
                                </div>
                                <?php
                                $details_url = "car-details.php?id=" . $car['id'];
                                if($pickup_date) $details_url .= "&pickup_date=" . urlencode($pickup_date);
                                if($dropoff_date) $details_url .= "&dropoff_date=" . urlencode($dropoff_date);
                                if($pickup_location) $details_url .= "&pickup_location=" . urlencode($pickup_location);
                                if($pickup_time) $details_url .= "&pickup_time=" . urlencode($pickup_time);
                                if($dropoff_time) $details_url .= "&dropoff_time=" . urlencode($dropoff_time);
                                ?>
                                <a href="<?php echo $details_url; ?>" class="btn-view"><?php echo t('car_view_details'); ?></a>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <div class="empty-state">
                            <i class="fas fa-car-side"></i>
                            <h3><?php echo t('search_no_results'); ?></h3>
                            <p><?php echo t('search_no_results_desc'); ?></p>
                            <a href="search-results.php" style="color: var(--primary); text-decoration: none; font-weight: 500;"><?php echo t('search_clear_filters'); ?></a>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        const sortSelect = document.getElementById('sortSelect');
        const carGrid = document.getElementById('carGrid');
        
        function sortCars() {
            if(!carGrid) return;
            const cards = Array.from(document.querySelectorAll('.car-card'));
            cards.sort((a, b) => {
                const sortValue = sortSelect.value;
                if(sortValue === 'price_asc') {
                    return parseFloat(a.dataset.price) - parseFloat(b.dataset.price);
                } else if(sortValue === 'price_desc') {
                    return parseFloat(b.dataset.price) - parseFloat(a.dataset.price);
                } else if(sortValue === 'name_asc') {
                    return a.dataset.name.localeCompare(b.dataset.name);
                }
                return 0;
            });
            cards.forEach(card => carGrid.appendChild(card));
        }
        
        if(sortSelect) {
            sortSelect.addEventListener('change', sortCars);
        }
        
        function resetFilters() {
            const url = new URL(window.location.href);
            url.search = '';
            window.location.href = url.toString();
        }
        
        function resetTimes() {
            const url = new URL(window.location.href);
            url.searchParams.delete('pickup_time');
            url.searchParams.delete('dropoff_time');
            window.location.href = url.toString();
        }
        
        function resetFiltersMobile() {
            const url = new URL(window.location.href);
            url.search = '';
            window.location.href = url.toString();
        }
        
        const filterToggleBtn = document.getElementById('filterToggleBtn');
        const mobileFilters = document.getElementById('mobileFilters');
        const filterOverlay = document.getElementById('filterOverlay');
        const closeFilterBtn = document.getElementById('closeFilterBtn');
        
        function openMobileFilters() {
            mobileFilters.classList.add('show');
            filterOverlay.classList.add('show');
            document.body.style.overflow = 'hidden';
        }
        
        function closeMobileFilters() {
            mobileFilters.classList.remove('show');
            filterOverlay.classList.remove('show');
            document.body.style.overflow = '';
        }
        
        if(filterToggleBtn) {
            filterToggleBtn.addEventListener('click', openMobileFilters);
        }
        
        if(closeFilterBtn) {
            closeFilterBtn.addEventListener('click', closeMobileFilters);
        }
        
        if(filterOverlay) {
            filterOverlay.addEventListener('click', closeMobileFilters);
        }
        
        const observerOptions = { threshold: 0.1 };
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => { if(entry.isIntersecting) entry.target.classList.add('visible'); });
        }, observerOptions);
        document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
    </script>
</body>
</html>

<?php 
if(file_exists('footer.php')) {
    include 'footer.php';
}
?>