@extends('frontend.layouts.fix')
@section('content')
<main class="main">
    <div class="section-box">
      <div class="breadcrumbs-div">
        <div class="container">
          <ul class="breadcrumb">
            <li><a class="font-xs color-gray-1000" href="{{route('home_main')}}">Home</a></li>
            <li><a class="font-xs color-gray-500" href="#">Yeni Filtre</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="section-box shop-template mt-30">
      <div class="container">
        <div class="row">
          <div class="col-lg-9 order-first order-lg-last">
            <div class="banner-ads-top mb-30"><a href="shop-single-product-3.html"><img src="assets/imgs/page/shop/banner.png" alt="Ecom"></a></div>
            <div class="box-filters mt-0 pb-5 border-bottom">
              <div class="row">
                <div class="col-xl-2 col-lg-3 mb-10 text-lg-start text-center"><a class="btn btn-filter font-sm color-brand-3 font-medium" href="#ModalFiltersForm" data-bs-toggle="modal">All Fillters</a></div>
                <div class="col-xl-10 col-lg-9 mb-10 text-lg-end text-center"><span class="font-sm color-gray-900 font-medium border-1-right span">Showing 1&ndash;16 of 17 results</span>
                  <div class="d-inline-block"><span class="font-sm color-gray-500 font-medium">Sort by:</span>
                    <div class="dropdown dropdown-sort border-1-right">
                      <button class="btn dropdown-toggle font-sm color-gray-900 font-medium" id="dropdownSort" type="button" data-bs-toggle="dropdown" aria-expanded="false">Latest products</button>
                      <ul class="dropdown-menu dropdown-menu-light" aria-labelledby="dropdownSort" style="margin: 0px;">
                        <li><a class="dropdown-item active" href="#">Latest products</a></li>
                        <li><a class="dropdown-item" href="#">Oldest products</a></li>
                        <li><a class="dropdown-item" href="#">Comments products</a></li>
                      </ul>
                    </div>
                  </div>
                  <div class="d-inline-block"><span class="font-sm color-gray-500 font-medium">Show</span>
                    <div class="dropdown dropdown-sort border-1-right">
                      <button class="btn dropdown-toggle font-sm color-gray-900 font-medium" id="dropdownSort2" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static"><span>30 items</span></button>
                      <ul class="dropdown-menu dropdown-menu-light" aria-labelledby="dropdownSort2">
                        <li><a class="dropdown-item active" href="#">30 items</a></li>
                        <li><a class="dropdown-item" href="#">50 items</a></li>
                        <li><a class="dropdown-item" href="#">100 items</a></li>
                      </ul>
                    </div>
                  </div>
                  <div class="d-inline-block"><a class="view-type-grid mr-5 active" href="shop-grid.html"></a><a class="view-type-list" href="shop-list.html"></a></div>
                </div>
              </div>
            </div>
            <div class="row mt-20">
                @if(count($data)!=0)
                @foreach ($data as $take)


              <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12">
                <div class="card-grid-style-3">
                  <div class="card-grid-inner">
                    <div class="tools"><a class="btn btn-trend btn-tooltip mb-10" href="#" aria-label="Trend" data-bs-placement="left"></a><a class="btn btn-wishlist btn-tooltip mb-10" href="shop-wishlist.html" aria-label="Add To Wishlist"></a><a class="btn btn-compare btn-tooltip mb-10" href="shop-compare.html" aria-label="Compare"></a><a class="btn btn-quickview btn-tooltip" aria-label="Quick view" href="#ModalQuickview" data-bs-toggle="modal"></a></div>
                    <div class="image-box"><span class="label bg-brand-2">-17%</span><a href="shop-single-product.html"><img src="assets/imgs/page/homepage1/imgsp4.png" alt="Ecom"></a></div>
                    <div class="info-right"><a class="font-xs color-gray-500" href="shop-vendor-single.html">Apple</a><br><a class="color-brand-3 font-sm-bold" href="shop-single-product.html">{{$take->product_title}}</a>
                      <div class="rating"><img src="assets/imgs/template/icons/star.svg" alt="Ecom"><img src="assets/imgs/template/icons/star.svg" alt="Ecom"><img src="assets/imgs/template/icons/star.svg" alt="Ecom"><img src="assets/imgs/template/icons/star.svg" alt="Ecom"><img src="assets/imgs/template/icons/star.svg" alt="Ecom"><span class="font-xs color-gray-500">(65)</span></div>
                      <div class="price-info"><strong class="font-lg-bold color-brand-3 price-main">$2856.3</strong><span class="color-gray-500 price-line">$3225.6</span></div>
                      <div class="mt-20 box-btn-cart"><a class="btn btn-cart" href="shop-cart.html">Add To Cart</a></div>
                      <ul class="list-features">
                        <li>27-inch (diagonal) Retina 5K display</li>
                        <li>3.1GHz 6-core 10th-generation Intel Core i5</li>
                        <li>AMD Radeon Pro 5300 graphics</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              @endforeach
              @else
              <div class="alert alert-danger">Not Found.!</div>
              @endif
            </div>
            <nav>
              <ul class="pagination">
                <li class="page-item"><a class="page-link page-prev" href="#"></a></li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link active" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">4</a></li>
                <li class="page-item"><a class="page-link" href="#">5</a></li>
                <li class="page-item"><a class="page-link" href="#">6</a></li>
                <li class="page-item"><a class="page-link page-next" href="#"></a></li>
              </ul>
            </nav>
          </div>
          <div class="col-lg-3 order-last order-lg-first">
            <div class="sidebar-border mb-0">
              <div class="sidebar-head">
                <h6 class="color-gray-900">Product Categories</h6>
              </div>
              <div class="sidebar-content">
                <ul class="list-nav-arrow">

                    @foreach (\App\Models\Categories::where('category_status',1)->get() as $top)
                        <li><a href="{{route('category_detail',$top->category_slug)}}">{{$top->category_title}}</a></li>
                    @endforeach
                </ul>


              </div>
            </div>
            <div class="sidebar-border mb-40">
              <div class="sidebar-head">
                <h6 class="color-gray-900">Products Filter</h6>
              </div>
              <div class="sidebar-content">
                <h6 class="color-gray-900 mt-10 mb-10">Price</h6>
                <div class="box-slider-range mt-20 mb-15">


                </div>
                <form action="{{route('product_filter')}}" method="POST">
                    @csrf
                <ul class="list-checkbox">
                  @foreach (\App\Models\Filters::all() as $keyFilter)


                  <li>
                    <label class="cb-container">
                      @php $toparla =  $keyFilter->max+$keyFilter->min;
                        $bol = $toparla/2;
                      @endphp
                      <input type="radio" name="price_filter" required="required" value="{{$bol}}"><span class="text-small">${{$keyFilter->min}} - ${{$keyFilter->max}}</span><span class="checkmark"></span>

                  </li>
                  @endforeach
                </ul>
                <h6 class="color-gray-900 mt-20 mb-10">Variants</h6>
                <ul class="list-checkbox">
                  @foreach (\App\Models\Productsets::all() as $keySet)
                  <li>
                    <label class="cb-container">
                      <input type="radio" name="set_filter" required="required" value="{{$keySet->id}}"><span class="text-small">{{$keySet->set_title}}</span><span class="checkmark"></span>
                    </label>
                  </li>
              @endforeach
                </ul>
                <button class="btn btn-filter font-sm color-brand-3 font-medium mt-10" type="submit">Apply Fillters</button>
            </form>
              </div>
            </div>

            <div class="box-slider-item">
              <div class="head pb-15 border-brand-2">
                <h5 class="color-gray-900">Product Tags</h5>
              </div>
              <div class="content-slider mb-50">
                @foreach (\App\Models\Subcategories::where('sub_status',1)->get() as $sub)
                <a class="btn btn-border mr-5" href="{{route('sub_category_detail',$sub->sub_slug)}}">{{$sub->sub_title}}</a>
                @endforeach
               </div>
            </div>

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


    <div class="modal fade" id="ModalQuickview" tabindex="-1" aria-hidden="true" style="display: none;">
      <div class="modal-dialog modal-xl">
        <div class="modal-content apply-job-form">
          <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
          <div class="modal-body p-30">
            <div class="row">
              <div class="col-lg-6">
                <div class="gallery-image">
                  <div class="galleries-2">
                    <div class="detail-gallery">
                      <div class="product-image-slider-2">
                        <figure class="border-radius-10"><img src="assets/imgs/page/product/img-gallery-1.jpg" alt="product image"></figure>
                        <figure class="border-radius-10"><img src="assets/imgs/page/product/img-gallery-2.jpg" alt="product image"></figure>
                        <figure class="border-radius-10"><img src="assets/imgs/page/product/img-gallery-3.jpg" alt="product image"></figure>
                        <figure class="border-radius-10"><img src="assets/imgs/page/product/img-gallery-4.jpg" alt="product image"></figure>
                        <figure class="border-radius-10"><img src="assets/imgs/page/product/img-gallery-5.jpg" alt="product image"></figure>
                        <figure class="border-radius-10"><img src="assets/imgs/page/product/img-gallery-6.jpg" alt="product image"></figure>
                        <figure class="border-radius-10"><img src="assets/imgs/page/product/img-gallery-7.jpg" alt="product image"></figure>
                      </div>
                    </div>
                    <div class="slider-nav-thumbnails-2">
                      <div>
                        <div class="item-thumb"><img src="assets/imgs/page/product/img-gallery-1.jpg" alt="product image"></div>
                      </div>
                      <div>
                        <div class="item-thumb"><img src="assets/imgs/page/product/img-gallery-2.jpg" alt="product image"></div>
                      </div>
                      <div>
                        <div class="item-thumb"><img src="assets/imgs/page/product/img-gallery-3.jpg" alt="product image"></div>
                      </div>
                      <div>
                        <div class="item-thumb"><img src="assets/imgs/page/product/img-gallery-4.jpg" alt="product image"></div>
                      </div>
                      <div>
                        <div class="item-thumb"><img src="assets/imgs/page/product/img-gallery-5.jpg" alt="product image"></div>
                      </div>
                      <div>
                        <div class="item-thumb"><img src="assets/imgs/page/product/img-gallery-6.jpg" alt="product image"></div>
                      </div>
                      <div>
                        <div class="item-thumb"><img src="assets/imgs/page/product/img-gallery-7.jpg" alt="product image"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="box-tags">
                  <div class="d-inline-block mr-25"><span class="font-sm font-medium color-gray-900">Category:</span><a class="link" href="#">Smartphones</a></div>
                  <div class="d-inline-block"><span class="font-sm font-medium color-gray-900">Tags:</span><a class="link" href="#">Blue</a>,<a class="link" href="#">Smartphone</a></div>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="product-info">
                  <h5 class="mb-15">SAMSUNG Galaxy S22 Ultra, 8K Camera & Video, Brightest Display Screen, S Pen Pro</h5>
                  <div class="info-by"><span class="bytext color-gray-500 font-xs font-medium">by</span><a class="byAUthor color-gray-900 font-xs font-medium" href="shop-vendor-list.html"> Ecom Tech</a>
                    <div class="rating d-inline-block"><img src="assets/imgs/template/icons/star.svg" alt="Ecom"><img src="assets/imgs/template/icons/star.svg" alt="Ecom"><img src="assets/imgs/template/icons/star.svg" alt="Ecom"><img src="assets/imgs/template/icons/star.svg" alt="Ecom"><img src="assets/imgs/template/icons/star.svg" alt="Ecom"><span class="font-xs color-gray-500 font-medium"> (65 reviews)</span></div>
                  </div>
                  <div class="border-bottom pt-10 mb-20"></div>
                  <div class="box-product-price">
                    <h3 class="color-brand-3 price-main d-inline-block mr-10">$2856.3</h3><span class="color-gray-500 price-line font-xl line-througt">$3225.6</span>
                  </div>
                  <div class="product-description mt-10 color-gray-900">
                    <ul class="list-dot">
                      <li>8k super steady video</li>
                      <li>Nightography plus portait mode</li>
                      <li>50mp photo resolution plus bright display</li>
                      <li>Adaptive color contrast</li>
                      <li>premium design & craftmanship</li>
                      <li>Long lasting battery plus fast charging</li>
                    </ul>
                  </div>
                  <div class="box-product-color mt-10">
                    <p class="font-sm color-gray-900">Color:<span class="color-brand-2 nameColor">Pink Gold</span></p>
                    <ul class="list-colors">
                      <li class="disabled"><img src="assets/imgs/page/product/img-gallery-1.jpg" alt="Ecom" title="Pink"></li>
                      <li><img src="assets/imgs/page/product/img-gallery-2.jpg" alt="Ecom" title="Gold"></li>
                      <li><img src="assets/imgs/page/product/img-gallery-3.jpg" alt="Ecom" title="Pink Gold"></li>
                      <li><img src="assets/imgs/page/product/img-gallery-4.jpg" alt="Ecom" title="Silver"></li>
                      <li class="active"><img src="assets/imgs/page/product/img-gallery-5.jpg" alt="Ecom" title="Pink Gold"></li>
                      <li class="disabled"><img src="assets/imgs/page/product/img-gallery-6.jpg" alt="Ecom" title="Black"></li>
                      <li class="disabled"><img src="assets/imgs/page/product/img-gallery-7.jpg" alt="Ecom" title="Red"></li>
                    </ul>
                  </div>
                  <div class="box-product-style-size mt-10">
                    <div class="row">
                      <div class="col-lg-12 mb-10">
                        <p class="font-sm color-gray-900">Style:<span class="color-brand-2 nameStyle">S22</span></p>
                        <ul class="list-styles">
                          <li class="disabled" title="S22 Ultra">S22 Ultra</li>
                          <li class="active" title="S22">S22</li>
                          <li title="S22 + Standing Cover">S22 + Standing Cover</li>
                        </ul>
                      </div>
                      <div class="col-lg-12 mb-10">
                        <p class="font-sm color-gray-900">Size:<span class="color-brand-2 nameSize">512GB</span></p>
                        <ul class="list-sizes">
                          <li class="disabled" title="1GB">1GB</li>
                          <li class="active" title="512 GB">512 GB</li>
                          <li title="256 GB">256 GB</li>
                          <li title="128 GB">128 GB</li>
                          <li class="disabled" title="64GB">64GB</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="buy-product mt-5">
                    <p class="font-sm mb-10">Quantity</p>
                    <div class="box-quantity">
                      <div class="input-quantity">
                        <input class="font-xl color-brand-3" type="text" value="1"><span class="minus-cart"></span><span class="plus-cart"></span>
                      </div>
                      <div class="button-buy"><a class="btn btn-cart" href="shop-cart.html">Add to cart</a><a class="btn btn-buy" href="shop-checkout.html">Buy now</a></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
@endsection