index.php

<?php

session_start();
include 'connect.php';

// Initialize variables
$search = isset($_GET['search']) ? mysqli_real_escape_string($conn, $_GET['search']) : '';
$type = isset($_GET['type']) ? mysqli_real_escape_string($conn, $_GET['type']) : '';

// Base SQL query
$sql = "SELECT a.auction_id, a.start_time, a.end_time, a.current_highest_bid, 
          c.foto1, c.model, c.year, c.type 
          FROM auctions a 
          JOIN cars c ON a.car_id = c.car_id 
          WHERE a.end_time > NOW()";

// Add search condition if search parameter exists
if (!empty($search)) {
    $sql .= " AND c.model LIKE '%$search%'";
}

// Add type filter if type parameter exists
if (!empty($type)) {
    $sql .= " AND c.type = '$type'";
}

// Add final ordering
$sql .= " ORDER BY a.end_time ASC";

$result = mysqli_query($conn, $sql);

if (!$result) {
    die("Query error: " . mysqli_error($conn));
}
?>

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bidly</title>
    <link rel="icon" type="image/png" sizes="32x32" href="assets/logo2.png">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        body: ['Plus Jakarta Sans']
                    },
                    colors: {
                        primary: '#1b9af5',
                        secondary: '#bcedff',
                        tertiary: '#1767b6',
                        accent: '#143557',
                    },
                },
            }
        }
    </script>
    <style type="text/css">
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
        }
    </style>
</head>

<body class="bg-white shadow-md">
    <?php require_once 'navbar.php'; ?>
    <div class="carousel relative h-[400px] overflow-hidden">
        <div class="slides relative h-full">
            <div class="slide absolute w-full h-full opacity-100 transition-opacity duration-1000">
                <img src="assets/poster1.png" alt="Slide 1" class="w-full h-full object-cover">
            </div>
            <div class="slide absolute w-full h-full opacity-0 transition-opacity duration-1000">
                <img src="assets/poster2.png" alt="Slide 2" class="w-full h-full object-cover">
            </div>
            <div class="slide absolute w-full h-full opacity-0 transition-opacity duration-1000">
                <img src="assets/poster3.png" alt="Slide 3" class="w-full h-full object-cover">
            </div>
        </div>
        <button onclick="moveSlide(-1)" class="absolute left-4 top-1/2 -translate-y-1/2 bg-black/50 text-white p-2 rounded-full hover:bg-black/75 z-10">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
            </svg>
        </button>
        <button onclick="moveSlide(1)" class="absolute right-4 top-1/2 -translate-y-1/2 bg-black/50 text-white p-2 rounded-full hover:bg-black/75 z-10">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
        </button>
        <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2 z-10">
            <button onclick="currentSlide(0)" class="w-2 h-2 rounded-full bg-primary"></button>
            <button onclick="currentSlide(1)" class="w-2 h-2 rounded-full bg-white"></button>
            <button onclick="currentSlide(2)" class="w-2 h-2 rounded-full bg-white"></button>
        </div>
    </div>
    <div data-aos="fade-up" data-aos-duration="1500" class="w-5/6 h-52 mx-auto my-8 bg-primary bg-opacity-20 rounded-lg">
        <h1 class="text-center text-accent font-bold text-2xl py-4">Temukan Mobil Impian Anda Di Bidly</h1>
        <form method="GET" action="" class="flex flex-col gap-5">
            <div class="flex gap-5 w-full justify-center mx-auto">
                <input type="text" name="search" placeholder="Masukkan Kata Kunci"
                    value="<?php echo htmlspecialchars($search); ?>"
                    class="w-1/2 h-10 rounded-md px-3 placeholder-slate-400 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary">
                <button type="submit" class="flex gap-2 justify-center items-center bg-primary px-3 rounded-md text-white">
                    <img src="assets/search.png" class="w-4" alt="icon"> Search
                </button>
            </div>

            <div class="flex gap-5 w-full justify-center pt-4 mx-auto">
                <button type="submit" name="type" value="Mobil Penumpang"
                    class="flex bg-white text-black px-3 py-1.5 text-sm rounded-md border border-gray-300 items-center gap-2 <?php echo $type === 'Mobil Penumpang' ? 'bg-primary text-primary' : ''; ?>">
                    <img src="assets/penumpang.png" alt="icon" class="w-4">Mobil Penumpang
                </button>
                <button type="submit" name="type" value="Mobil Angkutan"
                    class="flex bg-white text-black px-3 py-1.5 text-sm rounded-md border border-gray-300 items-center gap-2 <?php echo $type === 'Mobil Angkutan' ? 'bg-primary text-primary' : ''; ?>">
                    <img src="assets/angkutan.png" alt="icon" class="w-4">Mobil Angkutan
                </button>
                <button type="submit" name="type" value="Mobil Mewah"
                    class="flex bg-white text-black px-3 py-1.5 text-sm rounded-md border border-gray-300 items-center gap-2 <?php echo $type === 'Mobil Mewah' ? 'bg-primary text-primary' : ''; ?>">
                    <img src="assets/mewah.png" alt="icon" class="w-6">Mobil Mewah
                </button>
                <button type="submit" name="type" value="Mobil Listrik"
                    class="flex bg-white text-black px-3 py-1.5 text-sm rounded-md border border-gray-300 items-center gap-2 <?php echo $type === 'Mobil Listrik' ? 'bg-primary text-primary' : ''; ?>">
                    <img src="assets/listrik.png" alt="icon" class="w-4">Mobil Listrik
                </button>
                <button type="submit" name="type" value="Mobil Sport"
                    class="flex bg-white text-black px-3 py-1.5 text-sm rounded-md border border-gray-300 items-center gap-2 <?php echo $type === 'Mobil Sport' ? 'bg-primary bg-opacity-45 text-primary' : ''; ?>">
                    <img src="assets/sport.png" alt="icon" class="w-6">Mobil Sport
                </button>
                <?php if (!empty($search) || !empty($type)): ?>
                    <a href="?" class="flex bg-red-500 text-white px-3 py-1.5 text-sm rounded-md items-center gap-2">
                        Reset Filter
                    </a>
                <?php endif; ?>
            </div>
        </form>
    </div>

    <section  class="w-5/6 mx-auto mb-12 ">
        <h2 data-aos="fade-up" data-aos-duration="2000" class="text-2xl font-bold text-accent mb-8">Lelang Yang Sedang Berlangsung</h2>

        <?php if (mysqli_num_rows($result) > 0): ?>
            <div data-aos="fade-up" data-aos-duration="2000" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <?php while ($row = mysqli_fetch_assoc($result)): ?>
                    <?php
                    // Hitung waktu tersisa
                    $end_time = strtotime($row['end_time']);
                    $now = time();
                    $time_left = $end_time - $now;

                    // Konversi ke hari dan jam
                    $days = floor($time_left / (24 * 3600));
                    $hours = floor(($time_left % (24 * 3600)) / 3600);

                    // Format waktu tersisa
                    $time_display = "";
                    if ($days > 0) {
                        $time_display = $days . "h " . $hours . "j";
                    } else {
                        $time_display = $hours . "j";
                    }
                    ?>

                    <a href="detail_lelang.php?id=<?php echo $row['auction_id']; ?>" class="group">
                        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
                            <div class="h-48 overflow-hidden">
                                <img src="<?php echo htmlspecialchars($row['foto1']); ?>"
                                    alt="<?php echo htmlspecialchars($row['model']); ?>"
                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                            </div>

                            <div class="p-4">
                                <div class="flex justify-between items-start mb-2">
                                    <h3 class="font-bold text-lg text-accent">
                                        <?php echo htmlspecialchars($row['model']); ?>
                                    </h3>
                                    <span class="text-sm text-gray-600 mt-1">
                                        <?php echo htmlspecialchars($row['year']); ?>
                                    </span>
                                </div>

                                <div class="space-y-2">
                                    <div class="justify-between items-center">
                                        <span class="text-sm text-gray-600">Penawaran Tertinggi</span>
                                    </div>
                                    <span class="font-bold text-primary">
                                        Rp. <?php echo number_format($row['current_highest_bid'], 0, ',', '.'); ?>
                                    </span>

                                    <div class="flex justify-between items-center">
                                        <span class="text-sm text-gray-600">Waktu Penutupan</span>
                                        <span class="text-red-500 font-medium">
                                            <?php echo $time_display; ?>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                <?php endwhile; ?>
            </div>
        <?php else: ?>
            <div class="text-center py-20">
                <p class="text-xl text-gray-600">Mobil yang anda cari sedang tidak ada</p>
                <a href="?" class="inline-block mt-4 px-6 py-2 bg-primary text-white rounded-md hover:bg-tertiary transition duration-300">
                    Lihat Semua Mobil
                </a>
            </div>
        <?php endif; ?>
    </section>

    <?php require_once 'footer.php'; ?>

    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
    AOS.init();
    </script>
    <script>
        let slideIndex = 0;
        const slides = document.getElementsByClassName("slide");
        const dots = document.querySelectorAll(".absolute.bottom-4 button");

        showSlides();

        setInterval(() => {
            moveSlide(1);
        }, 7000);

        function moveSlide(n) {
            slideIndex += n;
            if (slideIndex >= slides.length) {
                slideIndex = 0;
            }
            if (slideIndex < 0) {
                slideIndex = slides.length - 1;
            }
            showSlides();
        }

        function currentSlide(n) {
            slideIndex = n;
            showSlides();
        }

        function showSlides() {
            // Hide all slides
            for (let i = 0; i < slides.length; i++) {
                slides[i].style.opacity = "0";
                dots[i].classList.remove("bg-primary");
                dots[i].classList.add("bg-white");
            }

            // Show current slide
            slides[slideIndex].style.opacity = "1";
            dots[slideIndex].classList.remove("bg-white");
            dots[slideIndex].classList.add("bg-primary");
        }
    </script>

</body>

</html>

<?php mysqli_close($conn); ?>