@push('style_css')
<style>
    .max-w-5xl {
        max-width: 1600px !important;
    }
</style>
@endpush
@section('robots')
<meta name="robots" content="noindex, nofollow">
@endsection
<div x-data="search">
    <div @click.outside="    searchbar = false  , showbackdrop = false   , text = ''  "
        class="   gap-4 max-w-5xl mx-auto   items-center w-full justify-center  px-4 py-8 md:py-4   lg:flex text-slate-900   relative">
        <div style="z-index: 1001;" class="flex flex-col         w-[100%]   rounded-xl">
            <h3 class="my-3 font-bold flex items-center  text-[16px] lg:text-[22px] gap-2">
                <div class="text-transparent bg-[#084642] w-[8px] h-[23px] rounded-[2px]  "> </div> <span>نتایج جستجو برای {{ $search }}</span>
            </h3>
            <div class="gap-2 mb-3">
                @if (count($blogsSearchs) > 0)
                <div
                    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-between gap-5 my-8 md:my-4 lg:my-8 w-full">
                    @foreach ($blogsSearchs as $blog)
                    <div
                        class="w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-slate-100 md:shadow">
                        <a href="{{ route('detail', ['slug' => $blog->slug]) . '/' }}" wire:navigate
                            class="relative w-[80px] md:w-full">
                            <img class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
                                src="{{ asset('images/' . $blog->image) . '/' }}" alt="">
                        </a>
                        <div
                            class="flex justify-start md:justify-normal flex-col md:w-full gap-2 h-full md:p-4">
                            <a href="{{ route('detail', ['slug' => $blog->slug]) . '/' }}" wire:navigate
                                class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
                                {!! $blog->subject !!}
                            </a>
                            <div class="md:block hidden text-[#16205b]">
                                @php
                                $preview = Str::limit($blog->preview, 80, '...');
                                @endphp
                                {!! $preview !!}
                            </div>
                            <div class="flex gap-1 text-white md:mt-auto">
                                <div class="hidden md:flex flex-col justify-center">
                                    <img class="bg-cover bg-center rounded-full size-8" src="{{ asset($blog->user->picture) }}" alt="">
                                </div>
                                <div class="text-xs text-gray-600 flex flex-col justify-center">
                                    {{ $blog->user->full_name }}
                                </div>
                                <span style="font-variation-settings: 'wght' 500;"
                                    class="text-xs text-[#A0A4BC] flex flex-col justify-center">|</span>
                                <div class="text-xs text-gray-600 flex flex-col justify-center">
                                    {{ jalaliDate($blog->published_at, '%d %B، %Y') }}
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                @else
                @if (strlen($search) > 0)
                <div class="flex items-center flex-col mx-auto justify-center gap-4  my-5">
                    <svg height="75px" width="75px" class="cursor-pointer me-2  "
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 512 512">
                        <path
                            d="M368 208A160 160 0 1 0 48 208a160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1L505 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L337.1 371.1z" />
                    </svg>
                    <span class="text-slate-400">موردی یافت نشد!</span>
                </div>
                @else
                @endif
                @endif
            </div>
            @if (count($blogsSearchs) > 0)
            @if ($blogsSearchs->hasPages())

            <nav class="mt-6">
                <ul class="pagination flex gap-4">
                    @if ($blogsSearchs->onFirstPage())
                    @else
                    <li><a class="pb-[4px]" href="{{ url('/search?q=' . $search . '&' . 'page=' . $blogsSearchs->currentPage() - 1) }}" wire:navigate rel="prev">&laquo;</a></li>
                    @endif

                    @foreach ($blogsSearchs->links()->elements as $element)
                    @if (is_string($element))
                    <li class="disabled"><span>{{ $element }}</span></li>
                    @endif

                    @if (is_array($element))
                    @foreach ($element as $page => $url)
                    @if ($page == $blogsSearchs->currentPage())
                    <li class="active"><span>{{ $page }}</span></li>
                    @elseif(
                    $page == 1 ||
                    $page == $blogsSearchs->lastPage() ||
                    ($page >= $blogsSearchs->currentPage() - 1 && $page <= $blogsSearchs->currentPage() + 1))
                        @if ($page == 1)
                        <li><a href="{{ url('/search?q=' . $search) }}" wire:navigate>{{ $page }}</a></li>
                        @else
                        <li><a href="{{ url('/search?q=' . $search . '&' . 'page=' . $page) }}" wire:navigate>{{ $page }}</a></li>
                        @endif
                        @elseif($page == 2 || $page == $blogsSearchs->lastPage() - 1)
                        <li class="disabled"><span class="pb-[6px]">...</span></li>
                        @endif
                        @endforeach
                        @endif
                        @endforeach
                        @if ($blogsSearchs->hasMorePages())
                        <li><a class="pb-[4px]" href="{{ url('/search?q=' . $search . '&' . 'page=' . $blogsSearchs->currentPage() + 1) }}" wire:navigate rel="next">&raquo;</a></li>
                        @else
                        @endif
                </ul>
            </nav>

            @endif
            @endif
        </div>
    </div>
</div>
@script
<script>
    Alpine.data('search', () => ({
        isFixed: false,
        btntogglesidebar: false,
        menuMore: false,
        searchbar: false,
        showbackdrop: false,
        text: '',
        init() {
            document.getElementById("buttonside").addEventListener("click", function() {
                setTimeout(() => {
                    document.getElementById("inputSearchPage").focus();
                }, 100);
            });
            document.addEventListener("keydown", function(event) {
                if (event.key == "/") {
                    setTimeout(() => {
                        document.getElementById("inputSearchPage").focus();
                    }, 100);
                }
            });

            window.addEventListener('scroll', () => {
                const currentScrollPos = window.pageYOffset;
                const isScrollingUp = this.prevScrollpos > window.pageYOffset;
                const headerScroll = document.getElementById('headerScroll');
            });


        },

        checkInputLength() {

            console.log(document.getElementById('inputSearchPage').value.length);
            if (document.getElementById('inputSearchPage').value.length >= 3) {

                this.showbackdrop = true;
                this.$wire.searchBox();

            } else {

                this.$wire.refreshsearch();

            }
        },


    }));
</script>
@endscript