@extends('frontend.include.layout')

@section('content')


    <section class="mt-50 mb-50">
        <div class="container">
            <div class="row">
                <div class="col-lg-9">
                    <div class="shop-product-fillter">
                        <div class="totall-product">



                        </div>


                        <div class="sort-by-product-area">
                            <div class="sort-by-cover mr-10">
                                <select id="actor-show"  class="form-control filteractordetails" style="width: 100% ! important;">
                                    <option value="24" selected>24</option>
                                    <option value="48">48</option>
                                    <option value="72">72</option>
                                    <option value="96">96</option>
                                </select>
                            </div>
                            <div class="sort-by-cover">
                                <select id="actor-filter-option"  class="form-control filteractordetails" style="width: 100% ! important;">
                                    <option value=" ">Select Option</option>
                                    <option value="1">Price Low to High</option>
                                    <option value="2">Price High to Low</option>
                                </select>
                            </div>
                        </div>

                    </div>


                    <div class="row product-grid-4" id="displayfilteractorlist">

                        @foreach($actor_details as $key => $actor_detail)

                            @include('frontend.include.actorsingle')

                        @endforeach

                    </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" >01</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <div class="col-lg-3 primary-sidebar sticky-sidebar">

                    <div class="row">
                        <div class="col-lg-12 col-mg-6"></div>
                        <div class="col-lg-12 col-mg-6"></div>
                    </div>

                    <div class="widget-category">
                        <div class="row">
                            <div class="col-md-6"><h5 class="section-title style-1 wow fadeIn animated">Refine By</h5></div>
                            <div class="col-md-6"><a><h5 class="section-title style-1  wow fadeIn animated">Clear filters</h5></div>
                        </div>

                    </div>


                    <div class="widget-category">
                        <div class="row">
                            <div class="col-md-12"><h5 class="section-title style-1 wow fadeIn animated">Verification</h5></div>
                            <div class="col-md-12 mt-15">
                                <input class="form-check-input filteractordetails" type="checkbox" name="verificationtype" displaytext="actor Verified" id="exampleVerification1" value="1">
                                <label class="form-check-label" for="exampleVerification1"><span>Actor Verified</span></label>
                                <br>
                                <input class="form-check-input filteractordetails" type="checkbox" name="verificationtype" displaytext="actor Unverified" id="exampleVerification2" value="2">
                                <label class="form-check-label" for="exampleVerification2"><span>Actor Unverified</span></label>

                            </div>
                        </div>

                    </div>

                    <div class="widget-category">
                        <div class="row">
                            <div class="col-md-12"><h5 class="section-title style-1 wow fadeIn animated">Offerings</h5></div>
                            <div class="col-md-12 mt-15">
                                <input class="form-check-input filteractordetails" type="checkbox" name="salestype" displaytext="On Sale" id="exampleCheckbox1" value="1">
                                <label class="form-check-label" for="exampleCheckbox1"><span>2D Modelling</span></label>
                                <br>
                                <input class="form-check-input filteractordetails" type="checkbox" name="salestype" displaytext="Top Selling" id="exampleCheckbox2" value="2">
                                <label class="form-check-label" for="exampleCheckbox2"><span>3D Modelling</span></label>
                                <br>
                                <input class="form-check-input filteractordetails" type="checkbox" name="salestype" displaytext="Top New" id="exampleCheckbox3" value="3">
                                <label class="form-check-label" for="exampleCheckbox3"><span>4D Project Planning</span></label>

                            </div>
                        </div>

                    </div>

                    <div class="sidebar-widget price_range range mb-30">
                        <div class="widget-header position-relative  pb-10">
                            <h5 class="widget-title mb-10">Rate per Hour</h5>
                            <div class="bt-1 border-color-1"></div>
                        </div>
                        <div class="price-filter">
                            <div class="price-filter-inner">
                                <div id="slider-range"></div>
                                <div class="price_slider_amount">
                                    <div class="label-input">
                                        <input type="hidden" id="asset_range_min_val" value="-1">
                                        <input type="hidden" id="asset_range_max_val" value="900">
                                        <span>Range:</span><input type="text" class="filterassetdetails" id="amount" name="price" placeholder="Add Your Price" />
                                        <br>
                                        <br>
                                        <button type="button" class="button button-keywords filterassetdetails1">Filter</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="widget-category mb-30">
                        <h5 class="section-title style-1 mb-30 wow fadeIn animated">Ratings</h5>

                        <div class="stars">
                            <i class="fa-solid fa-star filterassetdetails"></i>
                            <i class="fa-solid fa-star filterassetdetails"></i>
                            <i class="fa-solid fa-star filterassetdetails"></i>
                            <i class="fa-solid fa-star filterassetdetails"></i>
                            <i class="fa-solid fa-star filterassetdetails"></i>
                        </div>
                        <br>
                        {{--                        <button type="submit" class="btn btn-primary btn-lg btn-block clickremovestarrating">Filter</button>--}}

                    </div>




                    <!-- Product sidebar Widget -->
                </div>
            </div>
        </div>
    </section>




    <style>
        .button-keywords {
            font-size: 14px;
            font-weight: 700;
            padding: 0px 8px;
            border-radius: 4px;
            color: #000;
            border: 1px solid #000000;
            background-color: #ffffff;
        }
    </style>

@endsection