@extends('layouts.site')

@section('content')
<style>
* {
    box-sizing: border-box
}

#search {
    outline: none;
    border: none;
    display: inline-block
}

#burgundy {
    color: rgb(153, 40, 59)
}

#orange,
select,
.btn {
    color: orange
}

.fa-search {
    font-size: 20px;
    padding: 10px;
    margin-bottom: 3px;
    padding-right: 20px
}

.search-nav-item {
    height: 40px
}


.fa-user-o,
.fa-shopping-cart {
    font-size: 20px;
    padding: 4px
}

.form-group {
    margin-bottom: 5px
}

label {
    padding-left: 10px
}

.form-group:last-child {
    margin-bottom: 0
}

h6 {
    margin-bottom: 0px
}

#sort {
    outline: none;
    border: none
}

.btn {
    border: 1px solid orange;
    border-radius: 10px;
    background-color: #fff
}

.btn:hover {
    color: #fff;
    background-color: orange
}

.card-body {
    padding: 8px
}

.sign {
    width: 25px;
    height: 25px
}

.discount {
    border: 1px solid orange;
    border-radius: 5px;
    width: 65px;
    position: absolute;
    top: 2%
}



</style>
    <nav data-depth="3" class="breadcrumb-bg">
        <div class="container no-index">
            <div class="breadcrumb">

                <ol itemscope="" itemtype="http://schema.org/BreadcrumbList">
                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
                        <a itemprop="item" href="{{route('home')}}">
                            <span itemprop="name">Home</span>
                        </a>
                        <meta itemprop="position" content="1">
                    </li>
                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
                        <a itemprop="item" href="">
                            <span itemprop="name">

                                                       </span>
                        </a>
                        <meta itemprop="position" content="3">
                    </li>
                </ol>

            </div>
        </div>
    </nav>
    <div class="container no-index">
        <div class="row">

    <!--begin filter-->
      <div id="content-wrapper" class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
           <form action="{{route('advertisments.search')}}" method="get">

        <div class="filter">
<!--        <button class="btn btn-default" type="button" data-toggle="collapse" data-target="#mobile-filter" aria-expanded="true" aria-controls="mobile-filter">
-->        <button class="btn btn-default" type="submit"  >
        Filters<span class="fa fa-filter pl-1"></span></button>
</div>
<div id="mobile-filter">

    <div class="border-bottom pb-2 ml-2">
        <h4 id="burgundy">Filters</h4>
    </div>
    <div class="py-2 border-bottom ml-3">
        <h6 class="font-weight-bold">Categories</h6>
        <div id="orange"><span class="fa fa-minus"></span></div>
             <div class="form-group"> <input type="checkbox" id="artisan"> <label for="artisan">Fresh Artisan Breads</label> </div>
            <div class="form-group"> <input type="checkbox" id="breakfast"> <label for="breakfast">Breakfast Breads</label> </div>
     </div>
    <div class="py-2 border-bottom ml-3">

        <div style="cursor:pointer" data-toggle="collapse" data-target="#brands-block" aria-expanded="true" aria-controls="brands-block">
        <h6 class="font-weight-bold">Brands</h6><span class="fa fa-minus"> </span> </div>
        <div id="brands-block" >
          @isset($brands) @foreach($brands as $brand)

            <div class="form-group">


             <input type="checkbox"  name="brand_id[]" value="{{$brand->id}}"> <label for="tea">{{$brand->name_ar}}</label>


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






     <div  class="py-2 ml-3">
										<h5>  price  <!--Prices--></h5>
                                         <div  >
      <label for="formControlRange"> <!--Minimum Price  -->Minimum Price </label>
      <input type="range"
        class="form-control-range"     id="min_range"  onChange="document.getElementById('minPrice').value = document.getElementById('min_range').value" min="1" max="999" value="">
      <input type="text" id="minPrice" value="" style=" width:33px; text-align:center" onChange="document.getElementById('min_range').value = document.getElementById('minPrice').value"  name="minPrice">   </div>
                                <hr>

                                 <div  >
      <label for="formControlRange"><!-- Max Price--> Max Price</label>
      <input type="range"
        class="form-control-range"     id="max_range"  onChange="document.getElementById('maxPrice').value = document.getElementById('max_range').value" min="1" max="999" value="">
      <input type="text" id="maxPrice" value="" style=" width:33px; text-align:center" onChange="document.getElementById('max_range').value = document.getElementById('maxPrice').value" name="maxPrice">   </div>

</div>
</div>

        </form>
        </div>
        <!--fffffffffffffffffffffffffffffffffffffffffffffffffffffffffff-->

            <div id="content-wrapper" class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
                <section id="main">
                    <div class="block-category hidden-sm-down">
                        <h1 class="h1">{{--$title--}}</h1>
                    </div>
                    <section id="advertisments">

                        <div id="nav-top">

                            <div id="js-product-list-top" class="row products-selection">
                                <div class="col-md-6 col-xs-6">
                                    <div class="change-type">
                                        <span class="grid-type active" data-view-type="grid"><i
                                                class="fa fa-th-large"></i></span>
                                        <span class="list-type" data-view-type="list"><i class="fa fa-bars"></i></span>
                                    </div>
                                    <div class="hidden-sm-down total-products">
                                        <p>There are {{count($advertisments) ?? '0'}} advertisments.</p>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xs-6">
                                    <div class="d-flex sort-by-row justify-content-end">

                                        <span class="hidden-sm-down sort-by">Sort by:</span>
                                        <div class="products-sort-order dropdown">
                                            <a class="select-title" rel="nofollow" data-toggle="dropdown"
                                               aria-haspopup="true" aria-expanded="false">
                                                <span>Relevance</span>
                                                <i class="material-icons pull-xs-right">&#xE5C5;</i>
                                            </a>
                                            <div class="dropdown-menu">
                                                <a rel="nofollow"
                                                   href="36-mini-speaker-27.html?home=home_3&amp;order=product.position.asc"
                                                   class="select-list current js-search-link">
                                                    Relevance
                                                </a>
                                                <a rel="nofollow"
                                                   href="36-mini-speaker-28.html?home=home_3&amp;order=product.name.asc"
                                                   class="select-list js-search-link">
                                                    Name, A to Z
                                                </a>
                                                <a rel="nofollow"
                                                   href="36-mini-speaker-29.html?home=home_3&amp;order=product.name.desc"
                                                   class="select-list js-search-link">
                                                    Name, Z to A
                                                </a>

                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

                        </div>


                        <div id="categories-product">
                            <div id="js-product-list">
                                <div class="products product_list grid row" data-default-view="grid">
                                    @isset($advertisments)
                                        @foreach($advertisments as $advertisment)
                                            <div class="item  col-lg-4 col-md-6 col-xs-12 text-center no-padding">
                                                <div class="product-miniature js-product-miniature item-one"
                                                     data-id-product="22" data-id-product-attribute="408" itemscope=""
                                                     itemtype="http://schema.org/Product">
                                                    <div class="thumbnail-container">
                                                        <a href="{{ route('advertisment.details',$advertisment -> slug_ar) }}"
                                                           class="thumbnail product-thumbnail two-image">
                          <img class="img-fluid image-cover"
                                                                 src="{{asset('assets/images/advertisments/'.$advertisment->img)   ?? ''}}{{--$advertisment -> images[0] -> img ?? ''--}}"
                                                                 alt=""
                                                                 data-full-size-image-url="{{--$advertisment -> images[0] -> img ?? ''--}} "
                                                                 width="600" height="600">
                                                            <img class="img-fluid image-secondary"
                   											src="{{--asset('assets/images/advertisments/'.$advertisment->img)  ?? ''--}}{{$advertisment -> images[0] -> img ?? ''}}"
                                                                 alt=""
                                                                 data-full-size-image-url="{{$advertisment -> images[0] -> img ?? ''}}"
                                                                 width="600" height="600">


                                                        </a>


                                                        <div class="product-flags new">New</div>
                                                    </div>
                                                    <div class="product-description">
                                                        <div class="product-groups">

                                                            <div class="category-title"><a
                                                                    href="">Audio</a>
                                                            </div>

                                                            <div class="group-reviews">
                                                                <div class="product-comments">
                                                                    <div class="star_content">
                                                                        <div class="star"></div>
                                                                        <div class="star"></div>
                                                                        <div class="star"></div>
                                                                        <div class="star"></div>
                                                                        <div class="star"></div>
                                                                    </div>
                                                                    <span>0 review</span>
                                                                </div>


                                                                <div class="info-stock ml-auto">
                                                                    <label class="control-label">Availability:</label>
                                                                    <i class="fa fa-check-square-o"
                                                                       aria-hidden="true"></i>
                                                                    {{$advertisment -> in_stock ? 'in stock' : 'out of stock'}}
                                                                </div>
                                                            </div>

                                                            <div class="product-title" itemprop="name"><a
                                                                    href="{{ route('advertisment.details',$advertisment -> slug_ar) }}">{{$advertisment -> name_ar}}</a></div>

                                                            <div class="product-group-price">
                                                                <div class="product-price-and-shipping">
                                                                 @include('front.advertisments.advertisments_price')
                                                                    
                                                                </div>
                                                            </div>

                                                            <div class="product-desc" itemprop="desciption">
                                                                {!! $advertisment -> details_ar !!}
                                                            </div>
                                                        </div>
                                                        <div class="product-buttons d-flex justify-content-center"
                                                             itemprop="offers" itemscope=""
                                                             itemtype="http://schema.org/Offer">
                                                            <form
                                                                action=""
                                                                method="post" class="formAddToCart">
                                                                @csrf
                                                                <input type="hidden" name="id_advertisment"
                                                                       value="{{$advertisment -> id}}">
                                                                <a class="add-to-cart cart-addition" data-advertisment-id="{{$advertisment -> id}}" data-advertisment-slug="{{$advertisment -> slug}}" href="#"
                                                                   data-button-action="add-to-cart"><i
                                                                        class="novicon-cart"></i><span>Add to cart</span></a>
                                                            </form>

                                                            <a class="addToWishlist  wishlistProd_22" href="#"
                                                               data-advertisment-id="{{$advertisment -> id}}"
                                                            >
                                                                <i class="fa fa-heart"></i>
                                                                <span>Add to Wishlist</span>
                                                            </a>
                                                            <a href="#" class="quick-view hidden-sm-down"
                                                               data-advertisment-id="{{$advertisment -> id}}">
                                                                <i class="fa fa-search"></i><span> Quick view</span>
                                                            </a>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


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

                        </div>

                        <div id="js-product-list-bottom">

                            <nav class="pagination row justify-content-around">
                                <div class="col col-xs-12 col-lg-6 col-md-12">

    <span class='showing'>
    Showing 1-4 of 4 item(s)
    </span>

                                </div>
                                <div class="col col-xs-12 col-lg-6 col-md-12">

                                    <ul class="page-list">
                                        <li class="current">
                                            <a rel="nofollow"
                                               href="36-mini-speaker-27.html?home=home_3&amp;order=product.position.asc"
                                               class="disabled js-search-link">
                                                1
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </nav>
                        </div>
                    </section>
                </section>
            </div>
        </div>
    </div>

    @include('front.includes.not-logged')
    @include('front.includes.alert')   <!-- we can use only one with dynamic text -->
    @include('front.includes.alert2')
@stop

@section('scripts')
    <script>
        $(document).on('click', '.quick-view', function () {
            $('.quickview-modal-product-details-' + $(this).attr('data-advertisment-id')).css("display", "block");
        });
        $(document).on('click', '.close', function () {
            $('.quickview-modal-advertisment-details-' + $(this).attr('data-advertisment-id')).css("display", "none");

            $('.not-loggedin-modal').css("display", "none");
            $('.alert-modal').css("display", "none");
            $('.alert-modal2').css("display", "none");
        });
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

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

            @guest()
                $('.not-loggedin-modal').css('display','block');
            @endguest
            $.ajax({
                type: 'post',
                url: "{{--Route('wishlist.store')--}}",
                data: {
                    'advertismentId': $(this).attr('data-advertisment-id'),
                },
                success: function (data) {
                    if(data.wished )
                    $('.alert-modal').css('display','block');
                    else
                        $('.alert-modal2').css('display','block');
                }
            });
        });

        $(document).on('click', '.cart-addition', function (e) {
            e.preventDefault();

            $.ajax({
                type: 'post',
                url: "{{--Route('site.cart.add')--}}",
                data: {
                    'advertisment_id': $(this).attr('data-advertisment-id'),
                    'advertisment_slug' : $(this).attr('data-advertisment-slug'),
                },
                success: function (data) {

                }
            });
        });
    </script>

@stop