@extends('frontend.include.layout')

@section('content')

    

    <br>
    <section class="mt-50 mb-50" style="transform: none;">
        <div class="container" style="transform: none;">
            <div class="row" style="transform: none;">
                <div class="col-lg-9">
                    <div class="shop-product-fillter">
                        <div class="totall-product">
                            <p> We found <strong class="text-brand">688</strong> items for you!</p>
                        </div>
                        <div class="sort-by-product-area">
                            <div class="sort-by-cover mr-10">
                                <div class="sort-by-product-wrap">
                                    <div class="sort-by">
                                        <span><i class="fi-rs-apps"></i></span>
                                    </div>
                                    <div class="sort-by-dropdown-wrap">
                                        <span> 50 <i class="fi-rs-angle-small-down"></i></span>
                                    </div>
                                </div>
                                <div class="sort-by-dropdown">
                                    <ul>
                                        <li><a class="active" href="#">50</a></li>
                                        <li><a href="#">100</a></li>
                                        <li><a href="#">150</a></li>
                                        <li><a href="#">200</a></li>
                                        <li><a href="#">All</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="sort-by-cover">
                                <div class="sort-by-product-wrap">
                                    <div class="sort-by">
                                        <span><i class="fi-rs-apps-sort"></i></span>
                                    </div>
                                    <div class="sort-by-dropdown-wrap">
                                        <span> Featured <i class="fi-rs-angle-small-down"></i></span>
                                    </div>
                                </div>
                                <div class="sort-by-dropdown">
                                    <ul>
                                        <li><a class="active" href="#">Featured</a></li>
                                        <li><a href="#">Price: Low to High</a></li>
                                        <li><a href="#">Price: High to Low</a></li>
                                        <li><a href="#">Release Date</a></li>
                                        <li><a href="#">Avg. Rating</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row product-grid-3">
                        <div class="col-lg-4 col-md-4 col-12 col-sm-6" style="padding: 10px;border: 1px solid #000000;margin-left: 5px;">
                            <div class="product-cart-wrap mb-30">
                               
                                <div class="product-content-wrap">
                                    <div class="product-price">
                                        <span>$238.85 </span>
                                        <span class="old-price">$245.8</span>
                                        <span class="old-price">$245.8</span>
                                    </div>
                                   
                                    <h2><a href="shop-product-right.html">Colorful Pattern Shirts</a></h2>
                                    <span>Uninhibited carnally hired played  </span><br>
                                    <span>Uninhibited carnally hired played in whimpered dear gorilla koala depending and much </span>
                                    <br>
                                    <div class="attr-detail attr-size">
                                        <strong class="mr-10">Size</strong>
                                        <ul class="list-filter size-filter font-small">
                                            <li><a href="#">S</a></li>
                                            <li class="active"><a href="#">M</a></li>
                                            <li><a href="#">L</a></li>
                                            <li><a href="#">XL</a></li>
                                            <li><a href="#">XXL</a></li>
                                        </ul>
                                    </div>
                                    <br>
                                    <div class="product-price">
                                        <span>$238.85 </span>&nbsp;&nbsp;
                                        <span class="old-price">$245.8</span>&nbsp;&nbsp;
                                        <span class="old-price">$245.8</span>
                                    </div>
                                    <div class="product-action-1 show">
                                        <a aria-label="Add To wishlist" class="action-btn hover-up" href="shop-cart.html"><i class="fi-rs-heart"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-12 col-sm-6" style="padding: 10px;border: 1px solid #000000;margin-left: 5px;">
                            <div class="product-cart-wrap mb-30">
                               
                                <div class="product-content-wrap">
                                    <div class="product-category">
                                        <a href="shop-grid-right.html">Music</a>
                                    </div>
                                    <h2><a href="shop-product-right.html">Cartoon Astronaut T-Shirts</a></h2>
                                    <div class="rating-result" title="90%">
                                        <span>
                                            <span>50%</span>
                                        </span>
                                    </div>
                                    <div class="product-price">
                                        <span>$138.85 </span>
                                        <span class="old-price">$255.8</span>
                                    </div>
                                    <div class="product-action-1 show">
                                        <a aria-label="Add To Cart" class="action-btn hover-up" href="shop-cart.html"><i class="fi-rs-shopping-bag-add"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                       
                        
                    </div>
                    <!--pagination-->
                    <div class="pagination-area mt-15 mb-sm-5 mb-lg-0">
                        <nav aria-label="Page navigation example">
                            <ul class="pagination justify-content-start">
                                <li class="page-item active"><a class="page-link" href="#">01</a></li>
                                <li class="page-item"><a class="page-link" href="#">02</a></li>
                                <li class="page-item"><a class="page-link" href="#">03</a></li>
                                <li class="page-item"><a class="page-link dot" href="#">...</a></li>
                                <li class="page-item"><a class="page-link" href="#">16</a></li>
                                <li class="page-item"><a class="page-link" href="#"><i class="fi-rs-angle-double-small-right"></i></a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <div class="col-lg-3 primary-sidebar sticky-sidebar" style="position: relative; overflow: visible; box-sizing: border-box; min-height: 1926.75px;">
                    
                    
                    <!-- Fillter By Price -->
                    
                    <!-- Product sidebar Widget -->
                    
                    
                <div class="theiaStickySidebar" style="padding-top: 0px; padding-bottom: 1px; position: absolute; transform: translateY(153.3px); top: 0px; width: 306px;"><div class="row">
                        <div class="col-lg-12 col-mg-6"></div>
                        <div class="col-lg-12 col-mg-6"></div>
                    </div>
                    
                    <div class="sidebar-widget price_range range mb-30">
                        <div class="widget-header position-relative mb-20 pb-10">
                            <h5 class="widget-title mb-10">Refine By  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="shop-grid-right.html" class="btn btn-sm btn-default" style="background-color: black;"><i class="fi-rs-filter mr-5"></i> Fillter</a></h5>
                            
                            <div class="bt-1 border-color-1"></div>
                        </div>
                        {{-- <div class="price-filter">
                            <div class="price-filter-inner">
                                <div id="slider-range" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"><div class="ui-slider-range ui-corner-all ui-widget-header" style="width: 73.9583%; left: 0%;"></div><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 0%;"></span><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 73.9583%;"></span></div>
                                <div class="price_slider_amount">
                                    <div class="label-input">
                                        <span>Range:</span><input type="text" id="amount" name="price" placeholder="Add Your Price">
                                    </div>
                                </div>
                            </div>
                        </div> --}}
                        <div class="list-group">
                            <div class="list-group-item mb-10 mt-10">
                               
                                <label class="fw-900">Verification </label>
                                <hr>
                                <div class="custome-checkbox">
                                    <input class="form-check-input" type="checkbox" name="checkbox" id="exampleCheckbox1" value="">
                                    <label class="form-check-label" for="exampleCheckbox1"><span> Client Verified</span></label>
                                    <br>
                                    <input class="form-check-input" type="checkbox" name="checkbox" id="exampleCheckbox2" value="">
                                    <label class="form-check-label" for="exampleCheckbox2"><span>Client Unverified</span></label>
                                    
                                </div>
                                <label class="fw-900">Work Stage </label>
                                <hr>
                                <div class="custome-checkbox">
                                    <input class="form-check-input" type="checkbox" name="checkbox" id="exampleCheckbox1" value="">
                                    <label class="form-check-label" for="exampleCheckbox1"><span> Concept Design</span></label>
                                    <br>
                                    <input class="form-check-input" type="checkbox" name="checkbox" id="exampleCheckbox2" value="">
                                    <label class="form-check-label" for="exampleCheckbox2"><span>Technical Design</span></label>
                                    <br>
                                    <input class="form-check-input" type="checkbox" name="checkbox" id="exampleCheckbox2" value="">
                                    <label class="form-check-label" for="exampleCheckbox2"><span>Construction </span></label>
                                    
                                </div>
                                <label class="fw-900">Work Mode </label>
                                <hr>
                                <div class="custome-checkbox">
                                    <input class="form-check-input" type="checkbox" name="checkbox" id="exampleCheckbox1" value="">
                                    <label class="form-check-label" for="exampleCheckbox1"><span> Virtual </span></label>
                                    <br>
                                    <input class="form-check-input" type="checkbox" name="checkbox" id="exampleCheckbox2" value="">
                                    <label class="form-check-label" for="exampleCheckbox2"><span>Onsite </span></label>
                                    <br>
                                    <input class="form-check-input" type="checkbox" name="checkbox" id="exampleCheckbox2" value="">
                                    <label class="form-check-label" for="exampleCheckbox2"><span>Hybrid  </span></label>
                                    
                                </div>
                                <label class="fw-900 mt-15">Pricing Model</label>
                                <hr>
                                <div class="custome-checkbox">
                                    <input class="form-check-input" type="checkbox" name="checkbox" id="exampleCheckbox11" value="">
                                    <label class="form-check-label" for="exampleCheckbox11"><span> Fixed Price</span></label>
                                    <br>
                                    <input class="form-check-input" type="checkbox" name="checkbox" id="exampleCheckbox21" value="">
                                    <label class="form-check-label" for="exampleCheckbox21"><span>Hourly Price</span></label>
                                   
                                </div>
                                <label class="fw-900 mt-15">Skills </label>
                                <hr>
                                <div class="custome-checkbox">
                                    <div class="input-style mb-20">
                                        <input name="telephone" placeholder="Refine by Skills " type="text">
                                    </div>
                                                                     
                                   
                                </div>
                                <label class="fw-900 mt-15">Pricing</label>
                                <hr>
                                <div class="custome-checkbox">
                                    <div class="input-style mb-20">
                                        <input name="telephone" placeholder="Refine by Skills " type="text">
                                    </div>
                                                                     
                                   
                                </div>
                                <label class="fw-900 mt-15">Location </label>
                                <hr>
                                <div class="custome-checkbox">
                                    <div class="input-style mb-20">
                                        <input name="telephone" placeholder="Refine by Location" type="text">
                                    </div>
                                                                     
                                   
                                </div>
                                <label class="fw-900 mt-15">Keyword</label>
                                <hr>
                                <div class="custome-checkbox">
                                    <div class="input-style mb-20">
                                        <input name="telephone" placeholder=" Refine by Keyword" type="text">
                                    </div>
                                                                     
                                   
                                </div>
                            </div>
                        </div>
                       
                    </div>
                </div></div>
            </div>
        </div>
    </section>



@endsection