@extends(get_view('index'))

@section('title'){{ request()->q }} {{ __('Arama Sonuçları') }} - @endsection

@section('header')

@endsection

@section('content')


<div style="background-color: #f5f5f5;">
    <div class="container pt-3">
        <div class="row">
            <div class="col-md-3 col-sm-12 col-12 filter pb-5">
                @include(get_view('components.search.filter'))

            </div>
            <div class="col-md-9 col-sm-12 col-12 search-content pb-5">

                <div class="bg-white p-4 mb-4 shadow-sm">
                    <div class="row mb-3">
                        <p><strong>gözlük</strong> ile ilgili <strong>+10.000</strong> ürün bulduk</p>
                    </div>

                    <div class="row mb-3">
                        <div class="col-sm-3 col-12">
                            <h4>Kategorilerde Ara:</h4>
                        </div>
                        <div class="col-md-9 col-12">
                            <a href="#" class="btn bg-light rounded-pill border mb-2">Unisex Güneş Gözlüğü</a>
                            <a href="#" class="btn bg-light rounded-pill border mb-2">Erkek Güneş Gözlüğü</a>
                            <a href="#" class="btn bg-light rounded-pill border mb-2">Kayak Gözlüğü</a>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <div class="bg-light rounded-pill border">
                                <div class="btn-group rounded-pill w-100" role="group" aria-label="Basic example">
                                    <a href="#" class="btn btn-light rounded-pill fs-14">En çok satanlar</a>
                                    <a href="#" class="btn btn-light rounded-pill fs-14">Değerlendirme Sayıları</a>
                                    <a href="#" class="btn btn-light rounded-pill fs-14">Fiyat Artan</a>
                                    <a href="#" class="btn btn-light rounded-pill fs-14">Fiyat Azalan</a>
                                    <div class="dropdown">
                                        <button class="btn btn-light rounded-pill fs-14 dropdown-toggle" type="button"
                                            id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                            Diğer
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end bg-light" aria-labelledby="dropdownMenuButton1">
                                            <li><a class="dropdown-item" href="#"><strong>En Yeniler</strong></a></li>
                                            <li><a class="dropdown-item" href="#">Ürün Puanı</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4 col-sm-4 col-6 mb-4">
                        <div class="product">
                            <div class="product-buttons text-center">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <button type="button" class="btn btn-primary text-white">Sepete Ekle</button>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-header">
                                <span class="d-inline-block bg-theme-color text-white text-center p-1 ps-3 pe-3 fs-10 rounded-1">KARGO<br>BEDAVA</span>
                                
                                <button class="btn float-end fs-2 text-theme-color p-0">
                                    <i class="bi bi-heart"></i>
                                </button>
                            </div>
                            <div class="product-img">
                                <div class="product-opportunity">
                                    <img src="{{ get_asset('images/product/firsat-urunu.png') }}" alt="Hooptica">
                                </div>
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <a href="{{ url('product') }}"><img src="{{ get_asset('images/product/product3.png') }}" alt="Hooptica"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-footer">
                                <div class="row">
                                    <div class="col-sm-9 col-12">
                                        <span class="text-theme-color"><strong>TIGLIO</strong></span>
                                        <p class="fs-14">Unisex Turuncu Güneş Gözlüğü 1008 C19 1008 5218 145</p>
                                    </div>
                                    <div class="col-sm-3 col-12 p-0 text-center">
                                        <div class="mid-area">
                                            <div class="mid-content">
                                                <span class="bg-theme-color p-1 ps-2 pe-2 fs-12 text-white rounded-1">
                                                    %50
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price text-grey"><del>499 ₺</del></span></p>
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price fw-bold text-theme-color">399,99 ₺</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- col-sm-4 col-6 -->
                    <div class="col-md-4 col-sm-4 col-6 mb-4">
                        <div class="product">
                            <div class="product-buttons text-center">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <button type="button" class="btn btn-primary text-white">Sepete Ekle</button>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-header">
                                <span class="d-inline-block bg-theme-color text-white text-center p-1 ps-3 pe-3 fs-10 rounded-1">KARGO<br>BEDAVA</span>
                                
                                <button class="btn float-end fs-2 text-theme-color p-0">
                                    <i class="bi bi-heart"></i>
                                </button>
                            </div>
                            <div class="product-img">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <a href="{{ url('product') }}"><img src="{{ get_asset('images/product/product2.png') }}" alt="Hooptica"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-footer">
                                <div class="row">
                                    <div class="col-sm-9 col-12">
                                        <span class="text-theme-color"><strong>TIGLIO</strong></span>
                                        <p class="fs-14">Unisex Turuncu Güneş Gözlüğü 1008 C19 1008 5218 145</p>
                                    </div>
                                    <div class="col-sm-3 col-12 p-0 text-center">
                                        <div class="mid-area">
                                            <div class="mid-content">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <p class="p-0 m-0 mh-24px"></p>
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price fw-bold text-theme-color">399,99 ₺</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- col-sm-4 col-6 -->
                    <div class="col-md-4 col-sm-4 col-6 mb-4">
                        <div class="product">
                            <div class="product-buttons text-center">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <button type="button" class="btn btn-primary text-white">Sepete Ekle</button>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-header">
                                <button class="btn float-end fs-2 text-theme-color p-0">
                                    <i class="bi bi-heart"></i>
                                </button>
                            </div>
                            <div class="product-img">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <a href="{{ url('product') }}"><img src="{{ get_asset('images/product/product1.png') }}" alt="Hooptica"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-footer">
                                <div class="row">
                                    <div class="col-sm-9 col-12">
                                        <span class="text-theme-color"><strong>TIGLIO</strong></span>
                                        <p class="fs-14">Unisex Turuncu Güneş Gözlüğü 1008 C19 1008 5218 145</p>
                                    </div>
                                    <div class="col-sm-3 col-12 p-0 text-center">
                                        <div class="mid-area">
                                            <div class="mid-content">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <p class="p-0 m-0 mh-24px"></p>
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price fw-bold text-theme-color">399,99 ₺</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- col-sm-4 col-6 -->
                    <div class="col-md-4 col-sm-4 col-6 mb-4">
                        <div class="product">
                            <div class="product-buttons text-center">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <button type="button" class="btn btn-primary text-white">Sepete Ekle</button>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-header">
                                <span class="d-inline-block bg-theme-color text-white text-center p-1 ps-3 pe-3 fs-10 rounded-1">KARGO<br>BEDAVA</span>
                                
                                <button class="btn float-end fs-2 text-theme-color p-0">
                                    <i class="bi bi-heart"></i>
                                </button>
                            </div>
                            <div class="product-img">
                                <div class="product-opportunity">
                                    <img src="{{ get_asset('images/product/firsat-urunu.png') }}" alt="Hooptica">
                                </div>
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <a href="{{ url('product') }}"><img src="{{ get_asset('images/product/product3.png') }}" alt="Hooptica"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-footer">
                                <div class="row">
                                    <div class="col-sm-9 col-12">
                                        <span class="text-theme-color"><strong>TIGLIO</strong></span>
                                        <p class="fs-14">Unisex Turuncu Güneş Gözlüğü 1008 C19 1008 5218 145</p>
                                    </div>
                                    <div class="col-sm-3 col-12 p-0 text-center">
                                        <div class="mid-area">
                                            <div class="mid-content">
                                                <span class="bg-theme-color p-1 ps-2 pe-2 fs-12 text-white rounded-1">
                                                    %50
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price text-grey"><del>499 ₺</del></span></p>
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price fw-bold text-theme-color">399,99 ₺</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- col-sm-4 col-6 -->
                    <div class="col-md-4 col-sm-4 col-6 mb-4">
                        <div class="product">
                            <div class="product-buttons text-center">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <button type="button" class="btn btn-primary text-white">Sepete Ekle</button>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-header">
                                <span class="d-inline-block bg-theme-color text-white text-center p-1 ps-3 pe-3 fs-10 rounded-1">KARGO<br>BEDAVA</span>
                                
                                <button class="btn float-end fs-2 text-theme-color p-0">
                                    <i class="bi bi-heart"></i>
                                </button>
                            </div>
                            <div class="product-img">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <a href="{{ url('product') }}"><img src="{{ get_asset('images/product/product2.png') }}" alt="Hooptica"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-footer">
                                <div class="row">
                                    <div class="col-sm-9 col-12">
                                        <span class="text-theme-color"><strong>TIGLIO</strong></span>
                                        <p class="fs-14">Unisex Turuncu Güneş Gözlüğü 1008 C19 1008 5218 145</p>
                                    </div>
                                    <div class="col-sm-3 col-12 p-0 text-center">
                                        <div class="mid-area">
                                            <div class="mid-content">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <p class="p-0 m-0 mh-24px"></p>
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price fw-bold text-theme-color">399,99 ₺</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- col-sm-4 col-6 -->
                    <div class="col-md-4 col-sm-4 col-6 mb-4">
                        <div class="product">
                            <div class="product-buttons text-center">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <button type="button" class="btn btn-primary text-white">Sepete Ekle</button>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-header">
                                <button class="btn float-end fs-2 text-theme-color p-0">
                                    <i class="bi bi-heart"></i>
                                </button>
                            </div>
                            <div class="product-img">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <a href="{{ url('product') }}"><img src="{{ get_asset('images/product/product1.png') }}" alt="Hooptica"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-footer">
                                <div class="row">
                                    <div class="col-sm-9 col-12">
                                        <span class="text-theme-color"><strong>TIGLIO</strong></span>
                                        <p class="fs-14">Unisex Turuncu Güneş Gözlüğü 1008 C19 1008 5218 145</p>
                                    </div>
                                    <div class="col-sm-3 col-12 p-0 text-center">
                                        <div class="mid-area">
                                            <div class="mid-content">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <p class="p-0 m-0 mh-24px"></p>
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price fw-bold text-theme-color">399,99 ₺</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- col-sm-4 col-6 -->
                    <div class="col-md-4 col-sm-4 col-6 mb-4">
                        <div class="product">
                            <div class="product-buttons text-center">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <button type="button" class="btn btn-primary text-white">Sepete Ekle</button>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-header">
                                <span class="d-inline-block bg-theme-color text-white text-center p-1 ps-3 pe-3 fs-10 rounded-1">KARGO<br>BEDAVA</span>
                                
                                <button class="btn float-end fs-2 text-theme-color p-0">
                                    <i class="bi bi-heart"></i>
                                </button>
                            </div>
                            <div class="product-img">
                                <div class="product-opportunity">
                                    <img src="{{ get_asset('images/product/firsat-urunu.png') }}" alt="Hooptica">
                                </div>
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <a href="{{ url('product') }}"><img src="{{ get_asset('images/product/product3.png') }}" alt="Hooptica"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-footer">
                                <div class="row">
                                    <div class="col-sm-9 col-12">
                                        <span class="text-theme-color"><strong>TIGLIO</strong></span>
                                        <p class="fs-14">Unisex Turuncu Güneş Gözlüğü 1008 C19 1008 5218 145</p>
                                    </div>
                                    <div class="col-sm-3 col-12 p-0 text-center">
                                        <div class="mid-area">
                                            <div class="mid-content">
                                                <span class="bg-theme-color p-1 ps-2 pe-2 fs-12 text-white rounded-1">
                                                    %50
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price text-grey"><del>499 ₺</del></span></p>
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price fw-bold text-theme-color">399,99 ₺</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- col-sm-4 col-6 -->
                    <div class="col-md-4 col-sm-4 col-6 mb-4">
                        <div class="product">
                            <div class="product-buttons text-center">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <button type="button" class="btn btn-primary text-white">Sepete Ekle</button>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-header">
                                <span class="d-inline-block bg-theme-color text-white text-center p-1 ps-3 pe-3 fs-10 rounded-1">KARGO<br>BEDAVA</span>
                                
                                <button class="btn float-end fs-2 text-theme-color p-0">
                                    <i class="bi bi-heart"></i>
                                </button>
                            </div>
                            <div class="product-img">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <a href="{{ url('product') }}"><img src="{{ get_asset('images/product/product2.png') }}" alt="Hooptica"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-footer">
                                <div class="row">
                                    <div class="col-sm-9 col-12">
                                        <span class="text-theme-color"><strong>TIGLIO</strong></span>
                                        <p class="fs-14">Unisex Turuncu Güneş Gözlüğü 1008 C19 1008 5218 145</p>
                                    </div>
                                    <div class="col-sm-3 col-12 p-0 text-center">
                                        <div class="mid-area">
                                            <div class="mid-content">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <p class="p-0 m-0 mh-24px"></p>
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price fw-bold text-theme-color">399,99 ₺</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- col-sm-4 col-6 -->
                    <div class="col-md-4 col-sm-4 col-6 mb-4">
                        <div class="product">
                            <div class="product-buttons text-center">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <button type="button" class="btn btn-primary text-white">Sepete Ekle</button>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-header">
                                <button class="btn float-end fs-2 text-theme-color p-0">
                                    <i class="bi bi-heart"></i>
                                </button>
                            </div>
                            <div class="product-img">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <a href="{{ url('product') }}"><img src="{{ get_asset('images/product/product1.png') }}" alt="Hooptica"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-footer">
                                <div class="row">
                                    <div class="col-sm-9 col-12">
                                        <span class="text-theme-color"><strong>TIGLIO</strong></span>
                                        <p class="fs-14">Unisex Turuncu Güneş Gözlüğü 1008 C19 1008 5218 145</p>
                                    </div>
                                    <div class="col-sm-3 col-12 p-0 text-center">
                                        <div class="mid-area">
                                            <div class="mid-content">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <p class="p-0 m-0 mh-24px"></p>
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price fw-bold text-theme-color">399,99 ₺</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- col-sm-4 col-6 -->
                    <div class="col-md-4 col-sm-4 col-6 mb-4">
                        <div class="product">
                            <div class="product-buttons text-center">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <button type="button" class="btn btn-primary text-white">Sepete Ekle</button>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-header">
                                <span class="d-inline-block bg-theme-color text-white text-center p-1 ps-3 pe-3 fs-10 rounded-1">KARGO<br>BEDAVA</span>
                                
                                <button class="btn float-end fs-2 text-theme-color p-0">
                                    <i class="bi bi-heart"></i>
                                </button>
                            </div>
                            <div class="product-img">
                                <div class="product-opportunity">
                                    <img src="{{ get_asset('images/product/firsat-urunu.png') }}" alt="Hooptica">
                                </div>
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <a href="{{ url('product') }}"><img src="{{ get_asset('images/product/product3.png') }}" alt="Hooptica"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-footer">
                                <div class="row">
                                    <div class="col-sm-9 col-12">
                                        <span class="text-theme-color"><strong>TIGLIO</strong></span>
                                        <p class="fs-14">Unisex Turuncu Güneş Gözlüğü 1008 C19 1008 5218 145</p>
                                    </div>
                                    <div class="col-sm-3 col-12 p-0 text-center">
                                        <div class="mid-area">
                                            <div class="mid-content">
                                                <span class="bg-theme-color p-1 ps-2 pe-2 fs-12 text-white rounded-1">
                                                    %50
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price text-grey"><del>499 ₺</del></span></p>
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price fw-bold text-theme-color">399,99 ₺</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- col-sm-4 col-6 -->
                    <div class="col-md-4 col-sm-4 col-6 mb-4">
                        <div class="product">
                            <div class="product-buttons text-center">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <button type="button" class="btn btn-primary text-white">Sepete Ekle</button>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-header">
                                <span class="d-inline-block bg-theme-color text-white text-center p-1 ps-3 pe-3 fs-10 rounded-1">KARGO<br>BEDAVA</span>
                                
                                <button class="btn float-end fs-2 text-theme-color p-0">
                                    <i class="bi bi-heart"></i>
                                </button>
                            </div>
                            <div class="product-img">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <a href="{{ url('product') }}"><img src="{{ get_asset('images/product/product2.png') }}" alt="Hooptica"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-footer">
                                <div class="row">
                                    <div class="col-sm-9 col-12">
                                        <span class="text-theme-color"><strong>TIGLIO</strong></span>
                                        <p class="fs-14">Unisex Turuncu Güneş Gözlüğü 1008 C19 1008 5218 145</p>
                                    </div>
                                    <div class="col-sm-3 col-12 p-0 text-center">
                                        <div class="mid-area">
                                            <div class="mid-content">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <p class="p-0 m-0 mh-24px"></p>
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price fw-bold text-theme-color">399,99 ₺</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- col-sm-4 col-6 -->
                    <div class="col-md-4 col-sm-4 col-6 mb-4">
                        <div class="product">
                            <div class="product-buttons text-center">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <button type="button" class="btn btn-primary text-white">Sepete Ekle</button>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-header">
                                <button class="btn float-end fs-2 text-theme-color p-0">
                                    <i class="bi bi-heart"></i>
                                </button>
                            </div>
                            <div class="product-img">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <a href="{{ url('product') }}"><img src="{{ get_asset('images/product/product1.png') }}" alt="Hooptica"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-footer">
                                <div class="row">
                                    <div class="col-sm-9 col-12">
                                        <span class="text-theme-color"><strong>TIGLIO</strong></span>
                                        <p class="fs-14">Unisex Turuncu Güneş Gözlüğü 1008 C19 1008 5218 145</p>
                                    </div>
                                    <div class="col-sm-3 col-12 p-0 text-center">
                                        <div class="mid-area">
                                            <div class="mid-content">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <p class="p-0 m-0 mh-24px"></p>
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price fw-bold text-theme-color">399,99 ₺</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- col-sm-4 col-6 -->
                    <div class="col-md-4 col-sm-4 col-6 mb-4">
                        <div class="product">
                            <div class="product-buttons text-center">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <button type="button" class="btn btn-primary text-white">Sepete Ekle</button>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-header">
                                <span class="d-inline-block bg-theme-color text-white text-center p-1 ps-3 pe-3 fs-10 rounded-1">KARGO<br>BEDAVA</span>
                                
                                <button class="btn float-end fs-2 text-theme-color p-0">
                                    <i class="bi bi-heart"></i>
                                </button>
                            </div>
                            <div class="product-img">
                                <div class="product-opportunity">
                                    <img src="{{ get_asset('images/product/firsat-urunu.png') }}" alt="Hooptica">
                                </div>
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <a href="{{ url('product') }}"><img src="{{ get_asset('images/product/product3.png') }}" alt="Hooptica"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-footer">
                                <div class="row">
                                    <div class="col-sm-9 col-12">
                                        <span class="text-theme-color"><strong>TIGLIO</strong></span>
                                        <p class="fs-14">Unisex Turuncu Güneş Gözlüğü 1008 C19 1008 5218 145</p>
                                    </div>
                                    <div class="col-sm-3 col-12 p-0 text-center">
                                        <div class="mid-area">
                                            <div class="mid-content">
                                                <span class="bg-theme-color p-1 ps-2 pe-2 fs-12 text-white rounded-1">
                                                    %50
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price text-grey"><del>499 ₺</del></span></p>
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price fw-bold text-theme-color">399,99 ₺</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- col-sm-4 col-6 -->
                    <div class="col-md-4 col-sm-4 col-6 mb-4">
                        <div class="product">
                            <div class="product-buttons text-center">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <button type="button" class="btn btn-primary text-white">Sepete Ekle</button>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-header">
                                <span class="d-inline-block bg-theme-color text-white text-center p-1 ps-3 pe-3 fs-10 rounded-1">KARGO<br>BEDAVA</span>
                                
                                <button class="btn float-end fs-2 text-theme-color p-0">
                                    <i class="bi bi-heart"></i>
                                </button>
                            </div>
                            <div class="product-img">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <a href="{{ url('product') }}"><img src="{{ get_asset('images/product/product2.png') }}" alt="Hooptica"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-footer">
                                <div class="row">
                                    <div class="col-sm-9 col-12">
                                        <span class="text-theme-color"><strong>TIGLIO</strong></span>
                                        <p class="fs-14">Unisex Turuncu Güneş Gözlüğü 1008 C19 1008 5218 145</p>
                                    </div>
                                    <div class="col-sm-3 col-12 p-0 text-center">
                                        <div class="mid-area">
                                            <div class="mid-content">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <p class="p-0 m-0 mh-24px"></p>
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price fw-bold text-theme-color">399,99 ₺</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- col-sm-4 col-6 -->
                    <div class="col-md-4 col-sm-4 col-6 mb-4">
                        <div class="product">
                            <div class="product-buttons text-center">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <button type="button" class="btn btn-primary text-white">Sepete Ekle</button>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-header">
                                <button class="btn float-end fs-2 text-theme-color p-0">
                                    <i class="bi bi-heart"></i>
                                </button>
                            </div>
                            <div class="product-img">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <a href="{{ url('product') }}"><img src="{{ get_asset('images/product/product1.png') }}" alt="Hooptica"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-footer">
                                <div class="row">
                                    <div class="col-sm-9 col-12">
                                        <span class="text-theme-color"><strong>TIGLIO</strong></span>
                                        <p class="fs-14">Unisex Turuncu Güneş Gözlüğü 1008 C19 1008 5218 145</p>
                                    </div>
                                    <div class="col-sm-3 col-12 p-0 text-center">
                                        <div class="mid-area">
                                            <div class="mid-content">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <p class="p-0 m-0 mh-24px"></p>
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price fw-bold text-theme-color">399,99 ₺</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- col-sm-4 col-6 -->
                    <div class="col-md-4 col-sm-4 col-6 mb-4">
                        <div class="product">
                            <div class="product-buttons text-center">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <button type="button" class="btn btn-primary text-white">Sepete Ekle</button>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-header">
                                <span class="d-inline-block bg-theme-color text-white text-center p-1 ps-3 pe-3 fs-10 rounded-1">KARGO<br>BEDAVA</span>
                                
                                <button class="btn float-end fs-2 text-theme-color p-0">
                                    <i class="bi bi-heart"></i>
                                </button>
                            </div>
                            <div class="product-img">
                                <div class="product-opportunity">
                                    <img src="{{ get_asset('images/product/firsat-urunu.png') }}" alt="Hooptica">
                                </div>
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <a href="{{ url('product') }}"><img src="{{ get_asset('images/product/product3.png') }}" alt="Hooptica"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-footer">
                                <div class="row">
                                    <div class="col-sm-9 col-12">
                                        <span class="text-theme-color"><strong>TIGLIO</strong></span>
                                        <p class="fs-14">Unisex Turuncu Güneş Gözlüğü 1008 C19 1008 5218 145</p>
                                    </div>
                                    <div class="col-sm-3 col-12 p-0 text-center">
                                        <div class="mid-area">
                                            <div class="mid-content">
                                                <span class="bg-theme-color p-1 ps-2 pe-2 fs-12 text-white rounded-1">
                                                    %50
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price text-grey"><del>499 ₺</del></span></p>
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price fw-bold text-theme-color">399,99 ₺</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- col-sm-4 col-6 -->
                    <div class="col-md-4 col-sm-4 col-6 mb-4">
                        <div class="product">
                            <div class="product-buttons text-center">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <button type="button" class="btn btn-primary text-white">Sepete Ekle</button>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-header">
                                <span class="d-inline-block bg-theme-color text-white text-center p-1 ps-3 pe-3 fs-10 rounded-1">KARGO<br>BEDAVA</span>
                                
                                <button class="btn float-end fs-2 text-theme-color p-0">
                                    <i class="bi bi-heart"></i>
                                </button>
                            </div>
                            <div class="product-img">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <a href="{{ url('product') }}"><img src="{{ get_asset('images/product/product2.png') }}" alt="Hooptica"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-footer">
                                <div class="row">
                                    <div class="col-sm-9 col-12">
                                        <span class="text-theme-color"><strong>TIGLIO</strong></span>
                                        <p class="fs-14">Unisex Turuncu Güneş Gözlüğü 1008 C19 1008 5218 145</p>
                                    </div>
                                    <div class="col-sm-3 col-12 p-0 text-center">
                                        <div class="mid-area">
                                            <div class="mid-content">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <p class="p-0 m-0 mh-24px"></p>
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price fw-bold text-theme-color">399,99 ₺</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- col-sm-4 col-6 -->
                    <div class="col-md-4 col-sm-4 col-6 mb-4">
                        <div class="product">
                            <div class="product-buttons text-center">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <button type="button" class="btn btn-primary text-white">Sepete Ekle</button>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-header">
                                <button class="btn float-end fs-2 text-theme-color p-0">
                                    <i class="bi bi-heart"></i>
                                </button>
                            </div>
                            <div class="product-img">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <a href="{{ url('product') }}"><img src="{{ get_asset('images/product/product1.png') }}" alt="Hooptica"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-footer">
                                <div class="row">
                                    <div class="col-sm-9 col-12">
                                        <span class="text-theme-color"><strong>TIGLIO</strong></span>
                                        <p class="fs-14">Unisex Turuncu Güneş Gözlüğü 1008 C19 1008 5218 145</p>
                                    </div>
                                    <div class="col-sm-3 col-12 p-0 text-center">
                                        <div class="mid-area">
                                            <div class="mid-content">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <p class="p-0 m-0 mh-24px"></p>
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price fw-bold text-theme-color">399,99 ₺</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- col-sm-4 col-6 -->
                    <div class="col-md-4 col-sm-4 col-6 mb-4">
                        <div class="product">
                            <div class="product-buttons text-center">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <button type="button" class="btn btn-primary text-white">Sepete Ekle</button>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-header">
                                <span class="d-inline-block bg-theme-color text-white text-center p-1 ps-3 pe-3 fs-10 rounded-1">KARGO<br>BEDAVA</span>
                                
                                <button class="btn float-end fs-2 text-theme-color p-0">
                                    <i class="bi bi-heart"></i>
                                </button>
                            </div>
                            <div class="product-img">
                                <div class="product-opportunity">
                                    <img src="{{ get_asset('images/product/firsat-urunu.png') }}" alt="Hooptica">
                                </div>
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <a href="{{ url('product') }}"><img src="{{ get_asset('images/product/product3.png') }}" alt="Hooptica"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-footer">
                                <div class="row">
                                    <div class="col-sm-9 col-12">
                                        <span class="text-theme-color"><strong>TIGLIO</strong></span>
                                        <p class="fs-14">Unisex Turuncu Güneş Gözlüğü 1008 C19 1008 5218 145</p>
                                    </div>
                                    <div class="col-sm-3 col-12 p-0 text-center">
                                        <div class="mid-area">
                                            <div class="mid-content">
                                                <span class="bg-theme-color p-1 ps-2 pe-2 fs-12 text-white rounded-1">
                                                    %50
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price text-grey"><del>499 ₺</del></span></p>
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price fw-bold text-theme-color">399,99 ₺</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- col-sm-4 col-6 -->
                    <div class="col-md-4 col-sm-4 col-6 mb-4">
                        <div class="product">
                            <div class="product-buttons text-center">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <button type="button" class="btn btn-primary text-white">Sepete Ekle</button>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-header">
                                <span class="d-inline-block bg-theme-color text-white text-center p-1 ps-3 pe-3 fs-10 rounded-1">KARGO<br>BEDAVA</span>
                                
                                <button class="btn float-end fs-2 text-theme-color p-0">
                                    <i class="bi bi-heart"></i>
                                </button>
                            </div>
                            <div class="product-img">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <a href="{{ url('product') }}"><img src="{{ get_asset('images/product/product2.png') }}" alt="Hooptica"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-footer">
                                <div class="row">
                                    <div class="col-sm-9 col-12">
                                        <span class="text-theme-color"><strong>TIGLIO</strong></span>
                                        <p class="fs-14">Unisex Turuncu Güneş Gözlüğü 1008 C19 1008 5218 145</p>
                                    </div>
                                    <div class="col-sm-3 col-12 p-0 text-center">
                                        <div class="mid-area">
                                            <div class="mid-content">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <p class="p-0 m-0 mh-24px"></p>
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price fw-bold text-theme-color">399,99 ₺</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- col-sm-4 col-6 -->
                    <div class="col-md-4 col-sm-4 col-6 mb-4">
                        <div class="product">
                            <div class="product-buttons text-center">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <button type="button" class="btn btn-primary text-white">Sepete Ekle</button>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-header">
                                <button class="btn float-end fs-2 text-theme-color p-0">
                                    <i class="bi bi-heart"></i>
                                </button>
                            </div>
                            <div class="product-img">
                                <div class="mid-area">
                                    <div class="mid-content">
                                        <a href="{{ url('product') }}"><img src="{{ get_asset('images/product/product1.png') }}" alt="Hooptica"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="new-product-footer">
                                <div class="row">
                                    <div class="col-sm-9 col-12">
                                        <span class="text-theme-color"><strong>TIGLIO</strong></span>
                                        <p class="fs-14">Unisex Turuncu Güneş Gözlüğü 1008 C19 1008 5218 145</p>
                                    </div>
                                    <div class="col-sm-3 col-12 p-0 text-center">
                                        <div class="mid-area">
                                            <div class="mid-content">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <p class="p-0 m-0 mh-24px"></p>
                                        <p class="p-0 m-0 mh-24px"><span class="new-old-price fw-bold text-theme-color">399,99 ₺</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- col-sm-4 col-6 -->
                </div><!-- row -->
            </div>
        </div><!-- row -->
    </div><!-- container -->
</div>

@endsection

@section('footer')
<script>
    $('#slider-range').slider({
        range: true,
        min: 0,
        max: 15000,
        values: [{{ request()->start_price ?? 0 }}, {{ request()->end_price ?? 15000 }}],
        slide: function(event, ui) {
            $('#amount').val('₺' + ui.values[0] + ' - ₺' + ui.values[1]);
            $('input[name="start_price"]').val(ui.values[0]);
            $('input[name="end_price"]').val(ui.values[1]);
        }
    });
    $('#amount').val('₺' + $('#slider-range').slider('values', 0) +
                '  ₺' + $('#slider-range').slider('values', 1));
</script>
<script>
    //price_range if change
    $(document).on('change', 'input[name="price_range"]', function() {
        var price_range = $(this).val();
        var price_range_array = price_range.split('-');
        $('input[name="start_price"]').val(price_range_array[0]);
        $('input[name="end_price"]').val(price_range_array[1]);
    });
</script>
@endsection