@extends('front.layout.app')

@section('content')

    <section class="shop-page">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    <div class="browseList">
                        <ul class="special">
                            <li>Filter results by:</li>
                        </ul>
                        <hr class="line">
                        <div id="accordion">
                            <div class="card">
                                <div id="headingOne ">
                                    <h5 class="mb-0 ">
                                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"
                                            aria-expanded="true" aria-controls="collapseOne"><span></span>Strain Type
                                            (1)

                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </h5>
                                </div>
                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                    data-parent="#accordion">
                                    <div class="card-body">
                                        <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                            <label class="btn btn-secondary active">
                                                <input type="radio" name="options" id="option1" autocomplete="off"
                                                    checked> Sativa
                                            </label>
                                            <label class="btn btn-secondary">
                                                <input type="radio" name="options" id="option2" autocomplete="off">
                                                Hybrid
                                            </label>
                                            <label class="btn btn-secondary">
                                                <input type="radio" name="options" id="option3" autocomplete="off">
                                                Indica
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card ">
                                <div id="headingTwo ">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseTwo"
                                            aria-expanded="true" aria-controls="collapseTwo">
                                            <span></span>Brand
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </h5>
                                </div>
                                <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo"
                                    data-parent="#accordion">
                                    <div class="card-body">
                                        <div class="check-box">
                                            <ul>
                                                <li>
                                                    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
                                                    <label for="vehicle1">AiroX</label>
                                                </li>
                                                <li>
                                                    <input type="checkbox" id="vehicle2" name="vehicle2" value="Bike1">
                                                    <label for="vehicle2">Cresco</label>
                                                </li>
                                                <li>
                                                    <input type="checkbox" id="vehicle3" name="vehicle3" value="Bike1">
                                                    <label for="vehicle3">FloraCal</label>
                                                </li>
                                                <li>
                                                    <input type="checkbox" id="vehicle4" name="vehicle4" value="Bike1">
                                                    <label for="vehicle4">Good News</label>
                                                </li>
                                                <li>
                                                    <input type="checkbox" id="vehicle4" name="vehicle4" value="Bike1">
                                                    <label for="vehicle4">High Supply</label>
                                                </li>
                                                <li>
                                                    <input type="checkbox" id="vehicle4" name="vehicle4" value="Bike1">
                                                    <label for="vehicle4">Ozone</label>
                                                </li>
                                                <li>
                                                    <input type="checkbox" id="vehicle4" name="vehicle4" value="Bike1">
                                                    <label for="vehicle4">Ozone Reserve</label>
                                                </li>
                                                <li>
                                                    <input type="checkbox" id="vehicle4" name="vehicle4" value="Bike1">
                                                    <label for="vehicle4">Select</label>
                                                </li>
                                                <li>
                                                    <input type="checkbox" id="vehicle4" name="vehicle4" value="Bike1">
                                                    <label for="vehicle4">Simply Herb</label>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card ">
                                <div id="headingthree ">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link collapsed" data-toggle="collapse"
                                            data-target="#collapsethree" aria-expanded="false"
                                            aria-controls="collapsethree">
                                            <span></span>THC Potency
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </h5>
                                </div>
                                <div id="collapsethree" class="collapse" aria-labelledby="headingthree"
                                    data-parent="#accordion">
                                    <div class="card-body">
                                        <div class="rabge-set">
                                            <div class="range-input">
                                                <input type="text" id="amount" readonly="">
                                                <input type="text" id="amount1" readonly="">
                                            </div>
                                            <div id="slider-range"></div>
                                            <p class="mb-0">
                                                Total combined THC/THCa values. Review product labels for exact
                                                percentages.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div id="headingfour ">
                                    <h5 class="mb-0 ">
                                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapsefour"
                                            aria-expanded="true" aria-controls="collapsefour"><span></span>
                                            Price Range
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </h5>
                                </div>
                                <div id="collapsefour" class="collapse show" aria-labelledby="headingfour"
                                    data-parent="#accordion">
                                    <div class="card-body">
                                        <div class="rabge-set">
                                            <div class="range-input">
                                                <input type="text" id="price" readonly="">
                                                <input type="text" id="price1" readonly="">
                                            </div>
                                            <div id="price-range"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div id="headingfive">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapsefive"
                                            aria-expanded="true" aria-controls="collapsefive">
                                            <span></span>Size
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </h5>
                                </div>
                                <div id="collapsefive" class="collapse show" aria-labelledby="headingfive"
                                    data-parent="#accordion">
                                    <div class="card-body">
                                        <div class="check-box">
                                            <ul>
                                                <li>
                                                    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
                                                    <label for="vehicle1">500mg</label>
                                                </li>
                                                <li>
                                                    <input type="checkbox" id="vehicle2" name="vehicle2" value="Bike1">
                                                    <label for="vehicle2">1.0g</label>
                                                </li>
                                                <li>
                                                    <input type="checkbox" id="vehicle3" name="vehicle3" value="Bike1">
                                                    <label for="vehicle3">1g</label>
                                                </li>
                                                <li>
                                                    <input type="checkbox" id="vehicle4" name="vehicle4" value="Bike1">
                                                    <label for="vehicle4">300mg</label>
                                                </li>
                                                <li>
                                                    <input type="checkbox" id="vehicle4" name="vehicle4" value="Bike1">
                                                    <label for="vehicle4">2g</label>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div id="headingsix ">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link collapsed" data-toggle="collapse"
                                            data-target="#collapsesix" aria-expanded="false"
                                            aria-controls="collapsesix">
                                            <span></span>Flower Type
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </h5>
                                </div>
                                <div id="collapsesix" class="collapse" aria-labelledby="headingsix"
                                    data-parent="#accordion">
                                    <div class="card-body">
                                        <div class="check-box">
                                            <ul>
                                                <li>
                                                    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
                                                    <label for="vehicle1">Cartridge</label>
                                                </li>
                                                <li>
                                                    <input type="checkbox" id="vehicle2" name="vehicle2" value="Bike1">
                                                    <label for="vehicle2">Disposable Pen</label>
                                                </li>
                                                <li>
                                                    <input type="checkbox" id="vehicle3" name="vehicle3" value="Bike1">
                                                    <label for="vehicle3">Live Cartridge</label>
                                                </li>
                                                <li>
                                                    <input type="checkbox" id="vehicle4" name="vehicle4" value="Bike1">
                                                    <label for="vehicle4">Live Resin Cartridge</label>
                                                </li>
                                                <li>
                                                    <input type="checkbox" id="vehicle4" name="vehicle4" value="Bike1">
                                                    <label for="vehicle4">Live Rosin Cartridge</label>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div id="headingseven">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link collapsed" data-toggle="collapse"
                                            data-target="#collapseseven" aria-expanded="false"
                                            aria-controls="collapseseven">
                                            <span></span>Terpenes
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </h5>
                                </div>
                                <div id="collapseseven" class="collapse" aria-labelledby="headingseven"
                                    data-parent="#accordion">
                                    <div class="card-body">
                                        <div class="check-box">
                                            <ul>
                                                <li>
                                                    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
                                                    <label for="vehicle1">Flower</label>
                                                </li>
                                                <li>
                                                    <input type="checkbox" id="vehicle2" name="vehicle2" value="Bike1">
                                                    <label for="vehicle2">Infused Flower</label>
                                                </li>
                                                <li>
                                                    <input type="checkbox" id="vehicle3" name="vehicle3" value="Bike1">
                                                    <label for="vehicle3">Popcorn</label>
                                                </li>
                                                <li>
                                                    <input type="checkbox" id="vehicle4" name="vehicle4" value="Bike1">
                                                    <label for="vehicle4">Premium</label>
                                                </li>
                                                <li>
                                                    <input type="checkbox" id="vehicle4" name="vehicle4" value="Bike1">
                                                    <label for="vehicle4">Shake</label>
                                                </li>
                                                <li>
                                                    <input type="checkbox" id="vehicle4" name="vehicle4" value="Bike1">
                                                    <label for="vehicle4">Super Shake</label>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div id="headingeight">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link collapsed" data-toggle="collapse"
                                            data-target="#collapseeight" aria-expanded="false"
                                            aria-controls="collapseeight">
                                            <span></span>Specials
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </h5>
                                </div>
                                <div id="collapseeight" class="collapse" aria-labelledby="headingeight"
                                    data-parent="#accordion">
                                    <div class="card-body">
                                        <div class="check-box">
                                            <ul>
                                                <li>
                                                    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
                                                    <label for="vehicle1">On Sale</label>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row justify-content-between align-items-center mb-4">
                                <div class="col-md-3">
                                    <form class="shopSearch">
                                        <input type="text" placeholder="Search">
                                        <button><i class="fal fa-search"></i></button>
                                    </form>
                                </div>
                                <div class="col-md-6">
                                    <div class="sortWrap">
                                        <span>Showing 100 of 232 results</span>
                                        <select>
                                            <option>Sort By: Featured</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="flower-card">
                                <figure>
                                    <span><img src="{{ asset('assets/images/dollarimg.png') }}" class="img-fluid" alt="img">30% off 1, 32%
                                        off
                                        2...</span>
                                    <img src="{{ asset('assets/images/flower1.png') }}" class="img-fluid" alt="img">
                                </figure>
                                <div class="flower-content">
                                    <h3>Cresco</h3>
                                    <h4>LA Kush Cake Flower</h4>
                                    <h5><small>3.5g</small>$38.85<del>$55.50</del></h5>
                                    <div class="d-flex">
                                        <span>Indica</span>
                                        <h6>THC: 27.02%</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="flower-card">
                                <figure>
                                    <span><img src="{{ asset('assets/images/dollarimg.png') }}" class="img-fluid" alt="img">30% off 1, 32%
                                        off
                                        2...</span>
                                    <img src="{{ asset('assets/images/flower2.png') }}" class="img-fluid" alt="img">
                                </figure>
                                <div class="flower-content">
                                    <h3>Cresco</h3>
                                    <h4>Heady Betty Flower</h4>
                                    <h5><small>3.5g</small>$38.85<del>$55.50</del></h5>
                                    <div class="d-flex">
                                        <span class="medium">Indica</span>
                                        <h6 class="italic">THC: 26.76%</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="flower-card">
                                <figure>
                                    <span><img src="{{ asset('assets/images/dollarimg.png') }}" class="img-fluid" alt="img">30% off 1, 32%
                                        off
                                        2...</span>
                                    <img src="{{ asset('assets/images/flower3.png') }}" class="img-fluid" alt="img">
                                </figure>
                                <div class="flower-content">
                                    <h3>Cresco</h3>
                                    <h4>Heady Betty Flower</h4>
                                    <h5><small>3.5g</small>$38.85<del>$55.50</del></h5>
                                    <div class="d-flex">
                                        <span class="green">Hybrid</span>
                                        <h6>THC: 27.70%</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="flower-card">
                                <figure>
                                    <span><img src="{{ asset('assets/images/dollarimg.png') }}" class="img-fluid" alt="img">30% off 1, 32%
                                        off
                                        2...</span>
                                    <img src="{{ asset('assets/images/flower1.png') }}" class="img-fluid" alt="img">
                                </figure>
                                <div class="flower-content">
                                    <h3>Cresco</h3>
                                    <h4>LA Kush Cake Flower</h4>
                                    <h5><small>3.5g</small>$38.85<del>$55.50</del></h5>
                                    <div class="d-flex">
                                        <span>Indica</span>
                                        <h6>THC: 27.02%</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="flower-card">
                                <figure>
                                    <span><img src="{{ asset('assets/images/dollarimg.png') }}" class="img-fluid" alt="img">30% off 1, 32%
                                        off
                                        2...</span>
                                    <img src="{{ asset('assets/images/flower2.png') }}" class="img-fluid" alt="img">
                                </figure>
                                <div class="flower-content">
                                    <h3>Cresco</h3>
                                    <h4>Heady Betty Flower</h4>
                                    <h5><small>3.5g</small>$38.85<del>$55.50</del></h5>
                                    <div class="d-flex">
                                        <span>Indica</span>
                                        <h6 class="italic">THC: 26.76%</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="flower-card">
                                <figure>
                                    <span><img src="{{ asset('assets/images/dollarimg.png') }}" class="img-fluid" alt="img">30% off 1, 32%
                                        off
                                        2...</span>
                                    <img src="{{ asset('assets/images/flower3.png') }}" class="img-fluid" alt="img">
                                </figure>
                                <div class="flower-content">
                                    <h3>Cresco</h3>
                                    <h4>Heady Betty Flower</h4>
                                    <h5><small>3.5g</small>$38.85<del>$55.50</del></h5>
                                    <div class="d-flex">
                                        <span class="green">Hybrid</span>
                                        <h6>THC: 27.70%</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="flower-card">
                                <figure>
                                    <span><img src="{{ asset('assets/images/dollarimg.png') }}" class="img-fluid" alt="img">30% off 1, 32%
                                        off
                                        2...</span>
                                    <img src="{{ asset('assets/images/flower1.png') }}" class="img-fluid" alt="img">
                                </figure>
                                <div class="flower-content">
                                    <h3>Cresco</h3>
                                    <h4>LA Kush Cake Flower</h4>
                                    <h5><small>3.5g</small>$38.85<del>$55.50</del></h5>
                                    <div class="d-flex">
                                        <span>Indica</span>
                                        <h6>THC: 27.02%</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="flower-card">
                                <figure>
                                    <span><img src="{{ asset('assets/images/dollarimg.png') }}" class="img-fluid" alt="img">30% off 1, 32%
                                        off
                                        2...</span>
                                    <img src="{{ asset('assets/images/flower2.png') }}" class="img-fluid" alt="img">
                                </figure>
                                <div class="flower-content">
                                    <h3>Cresco</h3>
                                    <h4>Heady Betty Flower</h4>
                                    <h5><small>3.5g</small>$38.85<del>$55.50</del></h5>
                                    <div class="d-flex">
                                        <span class="medium">Indica</span>
                                        <h6 class="italic">THC: 26.76%</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="flower-card">
                                <figure>
                                    <span><img src="{{ asset('assets/images/dollarimg.png') }}" class="img-fluid" alt="img">30% off 1, 32%
                                        off
                                        2...</span>
                                    <img src="{{ asset('assets/images/flower1.png') }}" class="img-fluid" alt="img">
                                </figure>
                                <div class="flower-content">
                                    <h3>Cresco</h3>
                                    <h4>LA Kush Cake Flower</h4>
                                    <h5><small>3.5g</small>$38.85<del>$55.50</del></h5>
                                    <div class="d-flex">
                                        <span>Indica</span>
                                        <h6>THC: 27.02%</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="flower-card">
                                <figure>
                                    <span><img src="{{ asset('assets/images/dollarimg.png') }}" class="img-fluid" alt="img">30% off 1, 32%
                                        off
                                        2...</span>
                                    <img src="{{ asset('assets/images/flower2.png') }}" class="img-fluid" alt="img">
                                </figure>
                                <div class="flower-content">
                                    <h3>Cresco</h3>
                                    <h4>Heady Betty Flower</h4>
                                    <h5><small>3.5g</small>$38.85<del>$55.50</del></h5>
                                    <div class="d-flex">
                                        <span class="medium">Indica</span>
                                        <h6 class="italic">THC: 26.76%</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="flower-card">
                                <figure>
                                    <span><img src="{{ asset('assets/images/dollarimg.png') }}" class="img-fluid" alt="img">30% off 1, 32%
                                        off
                                        2...</span>
                                    <img src="{{ asset('assets/images/flower3.png') }}" class="img-fluid" alt="img">
                                </figure>
                                <div class="flower-content">
                                    <h3>Cresco</h3>
                                    <h4>Heady Betty Flower</h4>
                                    <h5><small>3.5g</small>$38.85<del>$55.50</del></h5>
                                    <div class="d-flex">
                                        <span class="green">Hybrid</span>
                                        <h6>THC: 27.70%</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="flower-card">
                                <figure>
                                    <span><img src="{{ asset('assets/images/dollarimg.png') }}" class="img-fluid" alt="img">30% off 1, 32%
                                        off
                                        2...</span>
                                    <img src="{{ asset('assets/images/flower1.png') }}" class="img-fluid" alt="img">
                                </figure>
                                <div class="flower-content">
                                    <h3>Cresco</h3>
                                    <h4>LA Kush Cake Flower</h4>
                                    <h5><small>3.5g</small>$38.85<del>$55.50</del></h5>
                                    <div class="d-flex">
                                        <span>Indica</span>
                                        <h6>THC: 27.02%</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="flower-card">
                                <figure>
                                    <span><img src="{{ asset('assets/images/dollarimg.png') }}" class="img-fluid" alt="img">30% off 1, 32%
                                        off
                                        2...</span>
                                    <img src="{{ asset('assets/images/flower2.png') }}" class="img-fluid" alt="img">
                                </figure>
                                <div class="flower-content">
                                    <h3>Cresco</h3>
                                    <h4>Heady Betty Flower</h4>
                                    <h5><small>3.5g</small>$38.85<del>$55.50</del></h5>
                                    <div class="d-flex">
                                        <span>Indica</span>
                                        <h6 class="italic">THC: 26.76%</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="flower-card">
                                <figure>
                                    <span><img src="{{ asset('assets/images/dollarimg.png') }}" class="img-fluid" alt="img">30% off 1, 32%
                                        off
                                        2...</span>
                                    <img src="{{ asset('assets/images/flower3.png') }}" class="img-fluid" alt="img">
                                </figure>
                                <div class="flower-content">
                                    <h3>Cresco</h3>
                                    <h4>Heady Betty Flower</h4>
                                    <h5><small>3.5g</small>$38.85<del>$55.50</del></h5>
                                    <div class="d-flex">
                                        <span class="green">Hybrid</span>
                                        <h6>THC: 27.70%</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="flower-card">
                                <figure>
                                    <span><img src="{{ asset('assets/images/dollarimg.png') }}" class="img-fluid" alt="img">30% off 1, 32%
                                        off
                                        2...</span>
                                    <img src="{{ asset('assets/images/flower1.png') }}" class="img-fluid" alt="img">
                                </figure>
                                <div class="flower-content">
                                    <h3>Cresco</h3>
                                    <h4>LA Kush Cake Flower</h4>
                                    <h5><small>3.5g</small>$38.85<del>$55.50</del></h5>
                                    <div class="d-flex">
                                        <span>Indica</span>
                                        <h6>THC: 27.02%</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="flower-card">
                                <figure>
                                    <span><img src="{{ asset('assets/images/dollarimg.png') }}" class="img-fluid" alt="img">30% off 1, 32%
                                        off
                                        2...</span>
                                    <img src="{{ asset('assets/images/flower2.png') }}" class="img-fluid" alt="img">
                                </figure>
                                <div class="flower-content">
                                    <h3>Cresco</h3>
                                    <h4>Heady Betty Flower</h4>
                                    <h5><small>3.5g</small>$38.85<del>$55.50</del></h5>
                                    <div class="d-flex">
                                        <span class="medium">Indica</span>
                                        <h6 class="italic">THC: 26.76%</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <nav aria-label="...">
                        <ul class="pagination nav-page justify-content-center">
                            <li class="page-item active" aria-current="page"><a class="page-link" href="#">1</a></li>
                            <li class="page-item "><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">Next</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </section>

@endsection