@extends('layouts.app')



@section('title', 'Search || Heritage In Khulna')



@section('external_css')



<style>

    .grid-body-items {

        gap: 16px;

        display: grid;

        grid-template-columns: repeat(4, 1fr);

    }



    .grid-left .grid-item-1 { grid-area: 1 / 1 / 7 / 3; }

    .grid-left .grid-item-2 { grid-area: 1 / 3 / 7 / 4; }

    .grid-left .grid-item-3 { grid-area: 1 / 4 / 7 / 5; }

    .grid-left .grid-item-4 { grid-area: 7 / 1 / 13 / 2; }

    .grid-left .grid-item-5 { grid-area: 7 / 2 / 13 / 3; }

    .grid-left .grid-item-6 { grid-area: 7 / 3 / 13 / 5; }



    .grid-right .grid-item-1 { grid-area: 1 / 1 / 7 / 2; }

    .grid-right .grid-item-2 { grid-area: 1 / 2 / 7 / 3; } 

    .grid-right .grid-item-3 { grid-area: 1 / 3 / 7 / 5; }

    .grid-right .grid-item-4 { grid-area: 7 / 1 / 13 / 3; }

    .grid-right .grid-item-5 { grid-area: 7 / 3 / 13 / 4; }

    .grid-right .grid-item-6 { grid-area: 7 / 4 / 13 / 5; }



    .place-heading {

        width: 100%;

        height: 68px;

        overflow: hidden;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        text-overflow: ellipsis;

        -webkit-box-orient: vertical;

    }



    @media (min-width: 768px) and (max-width: 991px) {

        .grid-body-items {

            grid-template-columns: repeat(2, 1fr);

        }

    

        .grid-item-1 { grid-area: auto !important; }

        .grid-item-2 { grid-area: auto !important; }

        .grid-item-3 { grid-area: auto !important; }

        .grid-item-4 { grid-area: auto !important; }

        .grid-item-5 { grid-area: auto !important; }

        .grid-item-6 { grid-area: auto !important; }

    }



    @media (max-width: 767px) {

        .grid-body-items {

            display: block;

        }

    }



    /* Search Box Styling */

    .search-box {

        display: flex;

        justify-content: center;

        align-items: center;

        margin-top: 40px;

        margin-bottom: 40px;

    }



    .search-box .input-form {

        width: 70%;

        outline: none;

        border: 1px solid #524b4b;

        position: relative;

    }



    .search-box input[type="text"] {

        width: 100%;

        padding: 12px 20px;

        font-size: 16px;

        border: 1px solid #524b4b;

        border-radius: 5px;

        outline: none;

        transition: border-color 0.3s ease;

    }



    .search-box input[type="text"]:focus {

        border-color: #ff6347; /* Add a color to the input field on focus */

    }



    .search-box .search-btn {

        background-color: #ff6347;

        color: white;

        font-size: 16px;

        padding: 12px 25px;

        border: none;

        border-radius: 5px;

        cursor: pointer;

        transition: background-color 0.3s ease;

    }



    .search-box .search-btn:hover {

        background-color: #e5533e; /* Darker shade on hover */

    }

    

    .search-results {

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        margin-top: 20px;

        margin-bottom: 20px;

    }

    .search-results .grid-left {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    justify-content: space-between;

    }



    /* search dropdown */

.search-dropdown {

    position: absolute;

    width: 73%;

    background: white;

    border: 1px solid #ccc;

    list-style: none;

    padding: 0;

    margin: 0;

    max-height: 150px;

    overflow-y: auto;

    display: none;

    z-index: 10;

}



.search-dropdown .search-item {

    padding: 8px;

    cursor: pointer;

    border-bottom: 1px solid #eee;

}



.search-dropdown .search-item:hover {

    background: #f1f1f1;

}

</style>



@endsection



@section('content')

<!-- slider Area Start-->

<div class="slider-area ">

    <div class="single-slider slider-height2 d-flex align-items-center"

        data-background="{{ asset('frontend_assets/img/hero/about.jpg') }}">

        <div class="container">

            <div class="row">

                <div class="col-xl-12">

                    <div class="hero-cap text-center">

                        <h2>{{ $sites->first()->district->name ?? 'No District' }}</h2>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<!-- slider Area End-->



<!-- Search Box -->

<div class="row" id="searchContainer">

    <div class="col-xl-12">

        <form id="searchForm" action="{{ route('frontend.search.sites') }}" method="get" class="search-box">

            <div class="input-form mb-30 w-[80%]">

                <input type="text" id="searchInput" name="query" 

                    placeholder="When would you like to go?" 

                    autocomplete="off"

                    value="{{ request('query') }}">

                <ul id="searchDropdown" class="search-dropdown"></ul>

            </div>

            <div class="search-form mb-30">

                <button type="submit" class="search-btn">Search</button>

            </div>

        </form>

    </div>

</div>



<!-- Search Results Start -->

<section class="search-results">

    <div class="container grid-right">

        <legend class="fieldset-legend text-end w-auto px-3 font-bold">
            <i>SEARCH RESULTS</i>
        </legend>

        <div class="grid-body-items">

            @if ($sites->count() == 0)

            <div class="grid-item grid-item-1">

                <div class="single-place mb-30">

                    <div class="place-cap">

                        <div class="place-cap-top">
                            <span>
                                <i class="fas fa-building"></i>
                                <span>NO DATA FOUND</span>
                            </span>
                        </div>

                        <div class="place-cap-bottom">
                            <p class="m-0">No sites match your search query.</p>
                        </div>

                    </div>

                </div>

            </div>

            @else

            @foreach ($sites as $ind => $site)

            <div class="grid-item grid-item-{{$ind + 1}}">

                <div class="single-place mb-30">

                    <div class="place-img">
                        <img class="w-100 h-[250px] object-cover"
                            src="{{ asset('storage/' . ($site->thumbnail ?? 'default.jpg')) }}" alt="Thumbnail" loading="lazy">
                    </div>

                    <div class="place-cap">

                        <div class="place-cap-top">
                                <i class="fas fa-building"></i>
                                <span>
                                    @if ($site->condition == 1)
                                    <span class="text-green-600">Well Preserved</span>
                                    @elseif ($site->condition == 2)
                                    <span class="text-orange-600">Vulnerable</span>
                                    @elseif ($site->condition == 3)
                                    <span class="text-red-600">Critical</span>
                                    @else
                                    <span class="text-gray-600">Unknown</span>
                                    @endif
                                </span>

                            <h3 class="place-heading">
                                <a href="{{ route('frontend.show.place', ['id' => $site->id]) }}">
                                    {{$site->site_name_en}} - {{$site->thana->name}}, {{$site->district->name}}
                                </a>
                            </h3>

                            <p class="dolor">{{$site->district->name}}</p>

                        </div>

                        <div class="place-cap-bottom">
                            <p class="m-0">Historical Site</p>
                        </div>

                    </div>

                </div>

            </div>

            @endforeach

            @endif

        </div>

        <div class="d-flex justify-content-end mt-4">
            {{ $sites->links() }}
        </div>

    </div>

</section>


<!-- Search Results End -->



@endsection



@section('external_js')



<script>

    $(document).ready(function() {



    let searchHistory = JSON.parse(localStorage.getItem('searchHistory')) || [];



    function showSearchDropdown() {

        let dropdown = $('#searchDropdown');

        dropdown.empty(); 

        

        if (searchHistory.length > 0) {

            searchHistory.forEach(query => {

                dropdown.append(`<li class="search-item">${query}</li>`);

            });

            dropdown.show();

        }

    }



    $('#searchInput').on('focus', function() {

        showSearchDropdown();

    });



    $(document).on('click', function(e) {

        if (!$(e.target).closest('#searchContainer').length) {

            $('#searchDropdown').hide();

        }

    });



    $(document).on('click', '.search-item', function() {

        $('#searchInput').val($(this).text());

        $('#searchDropdown').hide();

    });



    $('#searchForm').on('submit', function(e) {

        let query = $('#searchInput').val().trim();

        if (query && !searchHistory.includes(query)) {

            searchHistory.unshift(query); 

            if (searchHistory.length > 5) searchHistory.pop(); 

            localStorage.setItem('searchHistory', JSON.stringify(searchHistory));

        }

    });

});

</script>



@endsection