@extends('layouts.app')
@section('title') @if( ! empty($title)) {{ $title }} | @endif @parent @endsection


<style>
  .h5title {
    position: relative;
    padding-left: 30px; /* Adjust for spacing */
    font-size: 20px;
    margin-top:20px;
    color:#184A9B;
  }

  .h5title::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 20px; /* Length of the line */
    height: 4px; /* Thickness of the line */
    background-color: #FFD700; /* Color of the line */
  }
  
  .topright {
    position: absolute;
    bottom : 0px; /* Adjust the value as needed */
    right: 0px; /* Adjust the value as needed */
    width:100%;
    text-align:center;
    background-color: #BC4B08; /* Optional background for visibility */
    padding: 2px; /* Optional padding for spacing */
    color: #fff; /* Adjust text color as needed */
    font-weight: 700;
    z-index: 10; /* Ensures it stays on top of the image */
  }
  
    .carousel {
        position: relative;
        width: 100%;
        height: 160px; /* Full screen height */
        overflow: hidden;
    }

    .carousel-inner {
        display: flex;
        transition: transform 0.5s ease;
        height: 100%;
    }

    .carousel-item {
        min-width: 100%;
        flex-shrink: 0;
        box-sizing: border-box;
        height: 100%; /* Ensure the image takes up full height */
    }

    .carousel img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Make sure the image covers the area */
        border-radius: 10px;
    }

    .carousel-control-prev,
    .carousel-control-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 10px;
        cursor: pointer;
        border: none;
        font-size: 2rem;
    }

    .carousel-control-prev {
        left: 10px;
    }

    .carousel-control-next {
        right: 10px;
    }
    
    .end-today {
        position: absolute;
        top: 3px;
        left: 3px;
        background: red;
        color: white;
        font-size: 12px;
        font-weight: bold;
        padding: 3px 8px;
        border-radius: 3px;
        z-index: 10;
    }
    
    .wishlist-star {
        position:absolute;
        top: 5px;
        right: 5px;
        background:#fff;
        border-radius:50%;
        padding:5px;
        color:#ddd;
    }
</style>


@section('content')
    
    <img src="https://imgs.softedify.asia/app/ib/IjwLFZOLGq3ASGo_1738851701.png" width="100%" />
    
    <div class="container">
        <div id="navbar-search-wrap" class="more" style="margin-top:10px; position:relative">
            <form action="{{route('search_redirect')}}" class="form-inline" method="get"
                  enctype="multipart/form-data"> @csrf

                <input type="text" class="form-control" id="searchKeyword" name="q"
                       placeholder="@lang('app.what_are_u_looking')" style="border-radius:10px; border:1px solid #184A9B">
                <button type="submit" style="position:absolute; right:5px; top:5px; background-color:transparent; border:0px; color:#184A9B"><i class="fa fa-search"></i></button>
            </form>
        </div>
        
        <div class="category" style="position:relative; margin-top:15px; border:1px solid #999; border-radius:10px; padding:8px">
            <span style="background-color:#fff; position:absolute; top:-10px; left:10px; width:90px; text-align:center; color:#184A9B">Categories</span>
            <div class="row" style="padding-top:10px">
                <div class="col-xs-2">
                    <a class="" href="search?category=desktop" style="display: flex; flex-direction: column; align-items: center; justify-content: center; text-align:center;">
                        <img src="https://imgs.softedify.asia/app/ib/7nLWOTxCdXu7SD6_1737869740.png" alt="computer.png" width="100%" />
                        <h6 style="margin-top:5px; text-align:center;">Desktop</h6>
                    </a>
                </div>
                <div class="col-xs-2">
                    <a class="" href="search?category=laptop" style="display: flex; flex-direction: column; align-items: center; justify-content: center; text-align:center;">
                        <img src="https://imgs.softedify.asia/app/ib/RfzRK6xH52064jc_1737869830.png" alt="computer.png" width="100%" />
                        <h6 style="margin-top:5px;">Laptop</h6>
                    </a>
                </div>
                <div class="col-xs-2">
                    <a class="" href="search?category=adaptor" style="display: flex; flex-direction: column; align-items: center; justify-content: center; text-align:center;">
                        <img src="https://imgs.softedify.asia/app/ib/RMYOaKkrLkwy4N8_1737869865.png" alt="computer.png" width="100%" />
                        <h6 style="margin-top:5px;">Adaptor</h6>
                    </a>
                </div>
                <div class="col-xs-2">
                    <a class="" href="search?category=monitor" style="display: flex; flex-direction: column; align-items: center; justify-content: center; text-align:center;">
                        <img src="https://imgs.softedify.asia/app/ib/LSryfdbphGuZH6V_1737869934.png" alt="desktop.png" alt="computer.png" width="100%" />
                        <h6 style="margin-top:5px;">Monitor</h6>
                    </a>
                </div>
                <div class="col-xs-2">
                    <a class="" href="search?category=accessories" style="display: flex; flex-direction: column; align-items: center; justify-content: center; text-align:center;">
                        <img src="https://imgs.softedify.asia/app/ib/ZpfSEvEE6y4WaXC_1737870143.png" alt="desktop.png" alt="computer.png" width="100%" />
                        <h6 style="margin-top:5px;">Accessories</h6>
                    </a>
                </div>
                <div class="col-xs-2">
                    <a class="" href="search?category=others" style="display: flex; flex-direction: column; align-items: center; justify-content: center; text-align:center;">
                        <img src="https://imgs.softedify.asia/app/ib/OuAbOIVWSTJnUz2_1737870190.png" alt="desktop.png" alt="computer.png" width="100%" />
                        <h6 style="margin-top:5px;">Others</h6>
                    </a>
                </div>
            </div>
        </div>


        
        <div class="current_auction">
            <h5 class="h5title">Feature Auction</h5>
            <div class="row">
                            </div>
        </div>
        
        <div class="current_auction">
            <h5 class="h5title">End-Today Auction</h5>
            <div class="row">
                            </div>
        </div>
        
        <div class="carousel" id="carouselExample" style="margin-top:20px">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/cacf0a112986751.601ed596d5dda.png" alt="Slide 1" width="100%">
                </div>
                <div class="carousel-item">
                    <img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/cacf0a112986751.601ed596d5dda.png" alt="Slide 2">
                </div>
            </div>
            <button class="carousel-control-prev" onclick="prevSlide()">‹</button>
            <button class="carousel-control-next" onclick="nextSlide()">›</button>
        </div>
        
        <div class="current_auction">
            <h5 class="h5title">Current Auction</h5>
            <div class="row">
                            </div>
        </div>
    </div>

<script> 
    let currentIndex = 0;

    function showSlide(index) {
        const slides = document.querySelectorAll('.carousel-item');
        const totalSlides = slides.length;
        currentIndex = (index + totalSlides) % totalSlides;
        const carouselInner = document.querySelector('.carousel-inner');
        carouselInner.style.transform = 'translateX(' + (-100 * currentIndex) + '%)';
    }

    function nextSlide() {
        showSlide(currentIndex + 1);
    }

    function prevSlide() {
        showSlide(currentIndex - 1);
    }
</script>

@endsection