@include('includes.order_header')
<style>
    .cursor {
        cursor: pointer;
    }
    .spaceing
    {
        padding-top: 5px;
        padding-bottom: 5px;
        margin-left: 13px;
        margin-bottom: 15px;
    }
    .nav-tabs>li{
        padding: 15px;
    }
    .selecteddata{
        background-color:red !important;
        color: #fff !important;;
    }
    .active{
        background-color:red !important;
        color: #fff !important;;
    }
    .widgets-searchbox-btn{
        top: 68%;
        font-size: 24px;
    }
    .d-grid.gap-2.d-md-flex.justify-content-md-end.mx-auto.mb-5 {
    width: 100%;
}
    button.btn.btn-danger.btn-lg.mx-auto {
    width: 100%;
}
</style>



<!-- Begin Main Content Area -->
<main class="main-content">
    <div class="breadcrumb-area breadcrumb-height" data-bg-image="{{ url('/') }}/order_assets/images/breadcrumb/bg/1-1-1920x400.jpg">
        <div class="container h-100">
            <div class="row h-100">
                <div class="col-lg-12">
                    <div class="breadcrumb-item text-night-rider">
                        <h2 class="breadcrumb-heading">
                            SEARCH WHEELS</h2>
                        <ul>
                            <li>
                                <a href="#">Home /</a>
                            </li>
                            <li>
                                SEARCH WHEELS</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="shop-area section-space-y-axis-10 bg-transparent pt-5">
        <div class="container">
            <div class="row">
                <div class="col-xl-4 col-md-4 order-lg-1 order-2 pt-0 pt-lg-0">
                    <div class="bg-transparent mb-0 py-2 text-center">
                        <h4 class="title mb-0">Wheel Search</h4>
                        <!-- <p>(Example: 2010 Ford Mustang)</p> -->
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 order-lg-1 order-2 pt-0 pt-lg-0">
                    <div class="bg-transparent sidebar-area style-2">
                        <div class="widgets-searchbox py-1 mb-0 pt-3">
                            <form id="widgets-searchbox" action="#">
                                <input class="input-field" id="inputsearch" type="text" placeholder="Enter Wheel Search">
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 order-lg-1 order-2 pt-0 pt-lg-0">
                </div>
            </div>
        </div>
    </div>
    <div class="shop-area section-space-y-axis-10 bg-midnight-express">
        <div class="container">
            <div class="row">
                <div class="d-grid gap-2 col-md-1 mt-5"></div>
                <div class="d-grid gap-2 col-md-4 mx-auto mt-5">
                    <button class="btn btn-dark text-white btn-lg cursor" type="button" onclick="open_wheel_quick_size();">Quick Size (0-9 Only)</button>
                    <button class="btn btn-dark text-white btn-lg" type="button" onclick="open_wheel_manufacturer();">Manufacturer</button>
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end mx-auto mb-5">
                        <button class="btn btn-danger btn-lg mx-auto" type="button" onclick="search_product_by_wheel();">Search</button>
                        <button class="btn btn-danger btn-lg mx-auto" type="button" onclick="clear_wheel_search();"> Clear</button>
                    </div>
                </div>
                <div class="d-grid gap-2 col-md-6 mt-5">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-12 mb-3 cursor">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-6" onclick="get_all_diameter();"><b>Diameter</b></div>
                                                <div class="col-md-4" style="text-align: right;" onclick="get_all_diameter();">
                                                    <p class="mb-0" id="diameter"></p>
                                                </div>
                                                <div class="col-md-2" onclick="clear_extra_filter('diameter',this);"><i class="fa fa-times text-danger"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 mb-3 cursor">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-6" onclick="get_all_rim_width();"><b>Rim Width</b></div>
                                                <div class="col-md-4" style="text-align: right;" onclick="get_all_rim_width();">
                                                    <p class="mb-0" id="rim_width"></p>
                                                </div>
                                                <div class="col-md-2" onclick="clear_extra_filter('rim_width',this);"><i class="fa fa-times text-danger"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-12 mb-3 cursor">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-6" onclick="get_all_offset();"><b>Offset</b></div>
                                                <div class="col-md-4" style="text-align: right;" onclick="get_all_offset();">
                                                    <p class="mb-0" id="offset"></p>
                                                </div>
                                                <div class="col-md-2" onclick="clear_extra_filter('offset',this);"><i class="fa fa-times text-danger"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 mb-3 cursor" onclick="get_all_overall_diameter();">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-6" onclick="get_all_overall_diameter();"><b>Overall Diameter</b></div>
                                                <div class="col-md-4" style="text-align: right;" onclick="get_all_overall_diameter();">
                                                    <p class="mb-0" id="overall_diameter"></p>
                                                </div>
                                                <div class="col-md-2" onclick="clear_extra_filter('overall_diameter',this);"><i class="fa fa-times text-danger"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-6"><b>On Sale only</b></div>
                                                <div class="col-md-6" style="text-align:right;"><input type="checkbox" name="hide_winter"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-grid gap-2 col-md-1 mt-5"></div>
            </div>
            <div class="row" id="variant_product_data">

            </div>
        </div>
    </div>
</main>
<!-- Main Content Area End Here -->

<div class="modal" id="tireModal">
  <div class="modal-dialog" style="max-width: 100%;width: 100%;">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="modal-title"></h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
        <div class="modal-body">
            <div class="container-fluid" id="tire_html">
                
            </div>
        </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


@include('includes.order_footer')