@include('partials.header') <!-- Include the header -->
<!-- Required for Bootstrap Carousel -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Apply consistent size to slideshow images
        const slideshowImages = document.querySelectorAll("#slideshow img");
        slideshowImages.forEach(img => {
            img.style.width = "80%"; // Ensures the image spans the container width
            img.style.height = "300px"; // Static height for all images
            img.style.objectFit = "cover"; // Ensures content is centered and fills the height
        });

        // Add spacing between circles
        const threeCircles = document.getElementById("three-circles");
        if (threeCircles) {
            threeCircles.style.gap = "20px";
        }

        // Style for circle images
        const circleImages = document.querySelectorAll(".circle-img");
        circleImages.forEach(img => {
            img.style.width = "120px";
            img.style.height = "120px";
            img.style.borderRadius = "50%";
            img.style.objectFit = "cover";
            img.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.1)";
            img.style.marginBottom = "10px";
        });

        // Style for circle headers
        const circleContentHeaders = document.querySelectorAll(".circle-content h3");
        circleContentHeaders.forEach(header => {
            header.style.margin = "0";
            header.style.fontSize = "18px";
        });

        // Style for circle paragraphs
        const circleContentParagraphs = document.querySelectorAll(".circle-content p");
        circleContentParagraphs.forEach(paragraph => {
            paragraph.style.margin = "5px 0 0";
            paragraph.style.fontSize = "14px";
            paragraph.style.color = "#666";
        });
    });
</script>

<style>
    #three-circles .circle {
        margin: 0 15px;
        /* Add horizontal spacing */
    }
</style>
<style>
    #three-circles .circle {
        margin: 0 15px;
        /* Add horizontal spacing */
    }
</style>
<style>
    #three-circles {
        gap: 30px;
        /* Adjust the space as needed */
    }
</style>

<script>
    #slideshow img {
        max - height: 400 px;
        object - fit: cover;
    }

    #three - circles {
            gap: 20 px; /* Add spacing between circles */
        }

        .circle {
            display: flex;
            flex - direction: column;
            align - items: center;
            text - align: center;
        }

        .circle - img {
            width: 120 px; /* Adjust as needed */
            height: 120 px; /* Adjust as needed */
            border - radius: 50 % ;
            object - fit: cover;
            box - shadow: 0 4 px 8 px rgba(0, 0, 0, 0.1);
            margin - bottom: 10 px;
        }

        .circle - content h3 {
            margin: 0;
            font - size: 18 px;
        }

        .circle - content p {
            margin: 5 px 0 0;
            font - size: 14 px;
            color: #666;
}
</script>
<main id="ts-main">

    <!-- FEATURED PROPERTIES
        =============================================================================================================-->

    <!--Title-->

    <br>
    <br>
    <br>
    <br>
    <br>
    <!--   <section class="ts-block">
        <div class="ts-title text-center">-->


    <style>
        .carousel-item {
            transition: opacity 1s ease-in-out;
            opacity: 0;
            position: relative;
        }

        .carousel-item.active {
            opacity: 1;
        }

        .carousel-item::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 60%);
            z-index: 1;
        }

        .carousel-item img {
            border-radius: 8px;
            object-fit: cover;
            object-position: center;
        }

        .carousel-caption {
            backdrop-filter: blur(5px);
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 10px;
            padding: 20px;
            position: relative;
            z-index: 2;
        }

        .carousel-indicators {
            bottom: 50px;
        }

        .carousel-indicators li {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .carousel-control-prev,
        .carousel-control-next {
            width: 5%;
        }

        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            background-size: 60% 60%;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 50%;
        }
    </style>

    <div id="auctionCarousel" class="carousel slide mb-5" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            @foreach ($ongoingAuctions as $index => $auction)
            <li data-target="#auctionCarousel" data-slide-to="{{ $index }}"
                class="{{ $index === 0 ? 'active' : '' }} bg-dark"></li>
            @endforeach
        </ol>

        <div class="carousel-inner" style="height: 500px;">
            @foreach ($ongoingAuctions as $index => $auction)
            @php
            $coverWebP = "https://athman.qiam.sa/auction_cover/{$auction->id}.png";
            $coverPath = "https://athman.qiam.sa/auction_cover/{$auction->id}.png";
            $defaultCover = 'https://athman.qiam.sa/auction_cover/404.png';
            $endDate = \Carbon\Carbon::parse($auction->end_date);
            @endphp

            <div class="carousel-item {{ $index === 0 ? 'active' : '' }} h-100">
                <div class="position-relative h-100 w-100">
                    <!-- Responsive image using WebP -->
                    <div class="h-100 w-100" style="overflow: hidden;">
                        <picture class="w-100 h-100 d-block">
                            <source srcset="{{ $coverWebP }}" type="image/webp">
                            <img class="w-100 h-100" loading="lazy" decoding="async" src="{{ $coverPath }}"
                                alt="{{ $auction->name }}" onerror="this.src='{{ $defaultCover }}'">
                        </picture>
                    </div>

                    <!-- Caption -->
                    <div class="position-absolute bottom-0 start-0 end-0 p-4 carousel-caption text-white">
                        <div class="container">
                            <h3 class="fw-bold mb-2">{{ $auction->name }}</h3>
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <i class="fas fa-calendar-alt me-2"></i>
                                    <span>ينتهي في: {{ $endDate->format('Y-m-d') }}</span>
                                </div>
                                <div>
                                    <i class="fas fa-clock me-2"></i>
                                    <span>المتبقي: {{ $endDate->diffForHumans() }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            @endforeach
        </div>

        <!-- Controls -->
        <a class="carousel-control-prev" href="#auctionCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon p-3" aria-hidden="true"></span>
            <span class="sr-only">السابق</span>
        </a>
        <a class="carousel-control-next" href="#auctionCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon p-3" aria-hidden="true"></span>
            <span class="sr-only">التالي</span>
        </a>
    </div>

    <script>
        $(document).ready(function() {
            $('#auctionCarousel').carousel({
                interval: 5000,
                pause: "hover"
            });
        });
    </script>
    <style>
        .circle {
            text-align: center;
            /* Center the text below the image */
            display: inline-block;
            /* Keep the element size around content */
            margin: 20px;
            /* Optional spacing */
        }
    </style>
    <br>
    <div class="d-flex justify-content-center">
        <a href="#">
            <button type="button" class="btn btn-primary btn-sm m-1 px-4">
                <i class="fa fa-plus"></i> أضف عقارك
            </button>
        </a>
    </div>
    <br>
    <!-- Three Circles -->

    <div dir="rtl" id="three-circles" class="d-flex justify-content-center mb-6" style="gap: 30px;">

        <div class="circle">
            <img src="{{ asset('img/2.png') }}" alt="العقارات" class="circle-img">
            <div class="circle-content">
                <h3>العقارات</h3>
                <p></p>
            </div>
        </div>
        <div class="circle">
            <img src="{{ asset('img/1.png') }}" alt="المنقولات" class="circle-img">
            <div class="circle-content">
                <h3>المنقولات</h3>
                <p></p>
            </div>
        </div>
        <div class="circle">
            <img src="{{ asset('img/3.png') }}" alt="الحيوية" class="circle-img">
            <div class="circle-content">
                <h3>الحيوية</h3>
                <p>حيواني ونباتي</p>
            </div>
        </div>

    </div>


    <section id="featured-properties" class="ts-block pt-5">

        <div class="container">

            <!--Title-->
            <!-- Slideshow -->

            <!--Title-->
            <div class="ts-title text-center">
                <h2>قائمة المزادات</h2>
            </div>
            <a href="{{ route('auction') }}"> <button type="button" class="btn btn-primary btn-sm m-1 px-2">
                    <i class="fa fa-map small mr-2"></i>
                    عرض الخريطة
                </button></a>
            <div dir="rtl">
                <!-- Search Form (submits normally) -->
                <form method="GET" action="{{ route('list_auction') }}" class="mb-4">
                    <div class="input-group">
                        <input type="text" name="search" placeholder="اسم المزاد او المدينة ....الحي"
                            class="form-control" value="{{ request('search') }}" />
                        <div class="input-group-append">
                            <button type="submit" class="btn btn-primary">
                                <i class="fa fa-search"></i> بحث
                            </button>
                        </div>
                    </div>

                    <!-- Hidden filters to maintain them during search -->
                    @if (request('region_id'))
                    <input type="hidden" name="region_id" value="{{ request('region_id') }}" />
                    @endif
                    @if (request('property_type_id'))
                    <input type="hidden" name="property_type_id" value="{{ request('property_type_id') }}" />
                    @endif
                    @if (request('excution_company'))
                    <input type="hidden" name="excution_company" value="{{ request('excution_company') }}" />
                    @endif
                </form>

                <!-- Results -->
                <div class="row">
                    @forelse ($propertyes as $property)



                    @php
                    // Group properties by auction_id to avoid duplicates
                    $uniqueAuctions = $propertyes->groupBy('auction_id');
                    @endphp

                    @forelse ($uniqueAuctions as $auctionId => $properties)
                    @php
                    $firstProperty = $properties->first();
                    $auction = $firstProperty->auction ?? null;
                    $auctionTypeName = $auction->auction_type_id->name ?? 'غير محدد';
                    $regionName = $firstProperty->region->name ?? 'غير محدد';
                    $companyName = $auction->excution_company->name ?? 'جهة غير معروفة';
                    $propertyCount = $properties->count();
                    $startDate = $auction->start_date ?? null;
                    $endDate = $auction->end_date ?? null;

                    // Determine auction status
                    $currentDate = now()->format('Y-m-d');
                    $status = 'مزاد'; // Default
                    $ribbonClass = 'ribbon-default'; // Default

                    if ($endDate && $currentDate > $endDate) {
                    $status = 'مزاد منتهي';
                    $ribbonClass = 'ribbon-danger';
                    } elseif ($startDate && $currentDate >= $startDate) {
                    $status = 'مزاد جاري';
                    $ribbonClass = 'green';
                    } elseif ($startDate && $currentDate < $startDate) {
                        $status='مزاد قادم' ;
                        $ribbonClass='blue1' ;
                        }

                        // Format dates if they exist
                        $formattedStartDate=$startDate
                        ? \Carbon\Carbon::parse($startDate)->format('Y-m-d')
                        : 'غير معروف';
                        $formattedEndDate = $endDate
                        ? \Carbon\Carbon::parse($endDate)->format('Y-m-d')
                        : 'غير معروف';
                        @endphp

                        <div class="col-sm-6 col-lg-4">

                            <a href="{{ url('/auctionData', $auctionId) }}"
                                style="text-decoration: none; color: inherit;">
                                <div class="card ts-item ts-card ts-item__lg mb-3">
                                    <div class="ts-ribbon-corner {{ $ribbonClass }}">
                                        <span>{{ $status }}</span>
                                    </div>
                                    <div class="card-img ts-item__image"
                                        style="position: relative; background-image: url('https://athman.qiam.sa/auction_cover/{{ $auctionId }}.png'); background-size: cover; background-position: center; height: 200px;">
                                        <i class="fa fa-share-alt"
                                            style="position: absolute; top: 10px; left: 10px; color: white; font-size: 20px; cursor: pointer;"
                                            onclick="event.preventDefault(); event.stopPropagation(); alert('Share auction: {{ $auction->name ?? 'Auction' }}');"></i>
                                        <div
                                            style="position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.5); color: white; padding: 10px;">
                                            <span style="float: right; text-align: right;">
                                                <h4>{{ $auction->name ?? 'ضياع مكة' }}</h4>
                                            </span>
                                            <div class="ts-item__info-badge">
                                                منتجات
                                                <i class="fa fa-area-chart" aria-hidden="true"></i>
                                                {{ $propertyCount }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body ts-item__body">
                                        <div style="text-align: right;" class="ts-description-lists">
                                            <aside style="text-align: right;">
                                                <i class="fa fa-map-marker mr-2"></i>
                                                {{ $auction->auctionType->name ?? 'غير محدد' }}
                                            </aside>
                                            <dl>
                                                <dt>المدينة: {{ $regionName }}</dt>
                                                <dt>بداية المزاد: {{ $formattedStartDate }}</dt>
                                                <dt>نهاية المزاد: {{ $formattedEndDate }}</dt>
                                            </dl>
                                        </div>
                                    </div>
                                    <div class="card-footer">
                                        <a href="{{ $auction->file_link ?? '#' }}" target="_blank"
                                            class="btn " style="float: right;"
                                            onclick="event.stopPropagation();">
                                            <p>البروشور</p>
                                        </a>
                                        <div class="ts-item__info-badge">
                                            <p style="margin:0; float: left;">
                                                {{ $auction->excutionCompany->name ?? 'غير محدد' }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        @empty
                        <div class="col-12 text-center">
                            لا توجد بيانات
                        </div>
                        @endforelse

                        @empty
                        <div class="col-12 text-center py-5">
                            <h4>لا توجد نتائج مطابقة للبحث</h4>
                        </div>
                        @endforelse
                </div>
            </div>
            <div id="pagination" class="mt-3 d-flex justify-content-center flex-wrap">
                {{ $propertyes->links('pagination::bootstrap-4') }}
            </div>

        </div>

        @section('scripts')
        <script>
            $(document).ready(function() {
                let timer;
                const searchDelay = 500; // 0.5 second delay

                // Search and filter function
                function fetchData() {
                    const search = $('#search').val();
                    const region = $('#region_filter').val();
                    const type = $('#type_filter').val();
                    const company = $('#company_filter').val();

                    $.ajax({
                        url: "{{ route('list_auction') }}",
                        type: "GET",
                        data: {
                            search: search,
                            region_id: region,
                            property_type_id: type,
                            excution_company: company
                        },
                        success: function(data) {
                            $('#results').html(data.html);
                            $('#pagination').html(data.pagination);
                        }
                    });
                }

                // Event listeners
                $('#search').on('keyup', function() {
                    clearTimeout(timer);
                    timer = setTimeout(fetchData, searchDelay);
                });

                $('#region_filter, #type_filter, #company_filter').on('change', fetchData);

                // Handle pagination clicks
                $(document).on('click', '.pagination a', function(e) {
                    e.preventDefault();
                    let page = $(this).attr('href').split('page=')[1];
                    $.ajax({
                        url: $(this).attr('href'),
                        type: "GET",
                        success: function(data) {
                            $('#results').html(data.html);
                            $('#pagination').html(data.pagination);
                            window.scrollTo(0, 0);
                        }
                    });
                });
            });
        </script>
        @endsection

        <!--
            <div class="container">
                <input type="text" id="search" class="form-control mb-3" placeholder="Search auctions...">
                <div id="results" class="row"></div> Ensure this is a row for col-sm-6 col-lg-4 to work -->



        <!--end container-->
    </section>


</main>

@include('partials.footer') <!--add  Include the footer -->