@extends("layout.app")
@section("content")
    <style>
        .popover-title {
            text-align: center;
        }
        .custom-popover li{
            /*color: #666!important;*/
        }
        .popover-body{
            padding: 0!important;
        }
        .popover{
            /*filter: opacity(0.96);*/
            padding: 2px!important;
        }
        .custom-popover li {
            border: none!important;
            text-align: center;
            font-size: 0.90em!important;
            font-weight: 400!important;
        }
        .available-stock{
            color: #009100 !important;
        }
        .not-available-stock{
            color: #e50000 !important;
        }
        .custom-popover li:nth-child(2) {
            border-top: 1px solid #ccc!important;
        }

        .custom-popover li:last-child {
            border-top: 1px solid #ccc!important;
        }

    </style>

    <style>
        .select2-container--bootstrap[dir=rtl] .select2-selection--single .select2-selection__rendered{
            font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
        }.expand{
             cursor: pointer;
         }
        a[aria-expanded=true] .fa-caret-left {
            display: none;
        }
        a[aria-expanded=false] .fa-caret-down {
            display: none;
        }
    </style>
    <style type="text/css">
        @media (min-width: 768px) {
            .btn + .btn {
                margin-left: 0;
            }
        }

        .btn--icon i {
            right: 0;
            left: auto;
            border-radius: 0px 6px 6px 0px;
        }

        .btn--icon {
            padding-right: 4.571429em;
            padding-left: 1.571429em;
        }
        .expand{
            color: #0070c9;
            font-weight: bold;
            margin-top: 20px;
        }

        ol.pagination {
            display: none;
        }
        .page-load-status {
            display: none;
        }

    </style>
    <section class="text-center mt-20">
        <div class="container">

            <div class="row mb-5">
                <div class="col-md-8 col-lg-6">
                    <h1>نتيجة البحث ل {{request()->q}}</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-12">
                    <form action="{{route("search")}}">
                        <div class="input-icon">
                            <i class="material-icons">search</i>
                            <input type="search" name="q" value="{{request()->get("q")}}" placeholder="عن ماذا تريد ان تبحث ؟" />
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="container-fluid">
            @if($items_count || $accessories_count || $used_items_count || $blogs_count)
            <div class="row justify-content-between text-right">
                <div class="col-md-12" >
                        <div class="masonry-filter-container text-center row justify-content-center align-items-center">
                            <div class="masonry-filter-holder masonry-filters--horizontal">
                                <div class="masonry__filters">
                                    <ul>
                                        <li @if(!request()->get("filter")) class="active" @endif><a href="{{route("search",["q"=>request()->get("q")])}}">الجميع</a></li>
                                        <li @if(request()->get("filter")=="items") class="active" @endif><a href="{{route("search",["q"=>request()->get("q"),"filter"=>"items"])}}">الاجهزة</a></li>
                                        <li @if(request()->get("filter")=="accessories") class="active" @endif><a href="{{route("search",["q"=>request()->get("q"),"filter"=>"accessories"])}}">الاكسسوارات</a></li>
                                        <li @if(request()->get("filter")=="used") class="active" @endif><a href="{{route("search",["q"=>request()->get("q"),"filter"=>"used"])}}">المستعمل</a></li>
                                        <li @if(request()->get("filter")=="blogs") class="active" @endif><a href="{{route("search",["q"=>request()->get("q"),"filter"=>"blogs"])}}">المقالات</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    <!--end masonry-->
                </div>
            </div>
            @endif
            <!--end of row-->
        </div>
        <!--end of container-->
        @if(!request()->get("filter") && (!$items_count&&!$accessories_count&&!$used_items_count&&!$blogs_count))
        <div class="container">


            <div class="masonry__container masonry-blog-magazine text-right">
                    <h3 class="text-center">لا يوجد اي نتائج للبحث</h3>
            </div>
        </div>
        @else
            <div class="container">
                <div class="masonry__container masonry-blog-magazine text-right">
                @include("search.items")
                    @include("search.accessories")
                    @include("search.used")
                    @include("search.blogs")
            </div>
            </div>

        @endif

    </section>
@endsection

@section("scripts")
    <script>
        $(document).ready(function () {
            $(function () {
                $('ul#myList').each(function(){
                    var $ul = $(this),
                        $lis = $ul.find('li:gt(4)'),
                        isExpanded = $ul.hasClass('expanded');
                    $lis[isExpanded ? 'show' : 'hide']();

                    if($lis.length > 0){
                        $ul
                            .append($('<li class="expand">' + (isExpanded ? 'اخفاء' : 'المزيد') + '</li>')
                                .click(function(event){
                                    var isExpanded = $ul.hasClass('expanded');
                                    event.preventDefault();
                                    $(this).text(isExpanded ? 'المزيد' : 'اخفاء');
                                    $ul.toggleClass('expanded');
                                    $lis.toggle();
                                }));
                    }
                });
            });
        });
    </script>
@endsection