@extends('front-end.layouts.master')
@section('pageTitle', isset($pageTitle) ? $pageTitle : 'Compare')
@section('content')

<!-- Breadcrumb Section Start -->
<section class="breadcrumb-section pt-0">
    <div class="container-fluid-lg">
        <div class="row">
            <div class="col-12">
                <div class="breadcrumb-contain">
                    <h2 class="mb-2">Compare</h2>
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item">
                                <a href="index.html">
                                    <i class="fa-solid fa-house"></i>
                                </a>
                            </li>
                            <li class="breadcrumb-item">Shop</li>
                            <li class="breadcrumb-item active">Compare</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Breadcrumb Section End -->

<!-- Compare Section Start -->
<section class="compare-section section-b-space">
    <div class="container-fluid-lg">
        <div class="row">
            <div class="col-12">
                <div class="table-responsive">
                    <table class="table compare-table">
                        <tbody>
                            <tr>
                                <th>Product</th>
                                <td>
                                    <a class="text-title" href="product-left-thumbnail.html">Daily Shine Shampoo</a>
                                </td>
                                <td>
                                    <a class="text-title" href="product-left-thumbnail.html">Intence Repair
                                        Shampoo</a>
                                </td>
                                <td>
                                    <a class="text-title" href="product-left-thumbnail.html">Anti Dandruff
                                        Solution</a>
                                </td>
                                <td>
                                    <a class="text-title" href="product-left-thumbnail.html">Repair & Shine
                                        Shampoo</a>
                                </td>
                            </tr>

                            <tr>
                                <th>Images</th>
                                <td>
                                    <a href="product-left-thumbnail.html" class="compare-image">
                                        <img src="../assets/images/inner-page/compare/1.png"
                                            class="img-fluid blur-up lazyload" alt="">
                                    </a>
                                </td>
                                <td>
                                    <a href="product-left-thumbnail.html" class="compare-image">
                                        <img src="../assets/images/inner-page/compare/2.png"
                                            class="img-fluid blur-up lazyload" alt="">
                                    </a>
                                </td>
                                <td>
                                    <a href="product-left-thumbnail.html" class="compare-image">
                                        <img src="../assets/images/inner-page/compare/3.png"
                                            class="img-fluid blur-up lazyload" alt="">
                                    </a>
                                </td>
                                <td>
                                    <a href="product-left-thumbnail.html" class="compare-image">
                                        <img src="../assets/images/inner-page/compare/4.png"
                                            class="img-fluid blur-up lazyload" alt="">
                                    </a>
                                </td>
                            </tr>

                            <tr>
                                <th>Hair Type</th>
                                <td class="text-content">Normal</td>
                                <td class="text-content">Oily</td>
                                <td class="text-content">Dry</td>
                                <td class="text-content">Normal</td>
                            </tr>

                            <tr>
                                <th>Item Form</th>
                                <td class="text-content">Gel</td>
                                <td class="text-content">Liquid</td>
                                <td class="text-content">Gel</td>
                                <td class="text-content">Gel</td>
                            </tr>

                            <tr>
                                <th>Price</th>
                                <td class="price text-content">$20.23</td>
                                <td class="price text-content">$26.90</td>
                                <td class="price text-content">$12.23</td>
                                <td class="price text-content">$15.85</td>
                            </tr>

                            <tr>
                                <th>Availability</th>
                                <td class="text-content">In Stock</td>
                                <td class="text-content">In Stock</td>
                                <td class="text-content">In Stock</td>
                                <td class="text-content">In Stock</td>
                            </tr>

                            <tr>
                                <th>Rating</th>
                                <td>
                                    <div class="compare-rating">
                                        <ul class="rating">
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star"></i>
                                            </li>
                                        </ul>
                                        <span class="text-content">(20 Raring)</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="compare-rating">
                                        <ul class="rating">
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star"></i>
                                            </li>
                                        </ul>
                                        <span class="text-content">(25 Raring)</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="compare-rating">
                                        <ul class="rating">
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                        </ul>
                                        <span class="text-content">(50 Raring)</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="compare-rating">
                                        <ul class="rating">
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star"></i>
                                            </li>
                                        </ul>
                                        <span class="text-content">(30 Raring)</span>
                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <th>Weight</th>
                                <td class="text-content">5.00kg</td>
                                <td class="text-content">1.00kg</td>
                                <td class="text-content">0.75kg</td>
                                <td class="text-content">0.50kg</td>
                            </tr>

                            <tr>
                                <th>Purchase</th>
                                <td>
                                    <button onclick="location.href = 'cart.html';"
                                        class="btn btn-animation btn-sm w-100">Add To Cart</button>
                                </td>
                                <td>
                                    <button onclick="location.href = 'cart.html';"
                                        class="btn btn-animation btn-sm w-100">Add To Cart</button>
                                </td>
                                <td>
                                    <button onclick="location.href = 'cart.html';"
                                        class="btn btn-animation btn-sm w-100">Add To Cart</button>
                                </td>
                                <td>
                                    <button onclick="location.href = 'cart.html';"
                                        class="btn btn-animation btn-sm w-100">Add To Cart</button>
                                </td>
                            </tr>

                            <tr>
                                <th></th>
                                <td>
                                    <a href="javascript:void(0)" class="text-content remove_column"><i
                                            class="fa-solid fa-trash-can me-2"></i> Remove</a>
                                </td>
                                <td>
                                    <a href="javascript:void(0)" class="text-content remove_column"><i
                                            class="fa-solid fa-trash-can me-2"></i> Remove</a>
                                </td>
                                <td>
                                    <a href="javascript:void(0)" class="text-content remove_column"><i
                                            class="fa-solid fa-trash-can me-2"></i> Remove</a>
                                </td>
                                <td>
                                    <a href="javascript:void(0)" class="text-content remove_column"><i
                                            class="fa-solid fa-trash-can me-2"></i> Remove</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Compare Section End -->

<!-- Location Modal Start -->
<div class="modal location-modal fade theme-modal" id="locationModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Choose your Delivery Location</h5>
                <p class="mt-1 text-content">Enter your address and we will specify the offer for your area.</p>
                <button type="button" class="btn-close" data-bs-dismiss="modal">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="location-list">
                    <div class="search-input">
                        <input type="search" class="form-control" placeholder="Search Your Area">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </div>

                    <div class="disabled-box">
                        <h6>Select a Location</h6>
                    </div>

                    <ul class="location-select custom-height">
                        <li>
                            <a href="javascript:void(0)">
                                <h6>Alabama</h6>
                                <span>Min: $130</span>
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0)">
                                <h6>Arizona</h6>
                                <span>Min: $150</span>
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0)">
                                <h6>California</h6>
                                <span>Min: $110</span>
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0)">
                                <h6>Colorado</h6>
                                <span>Min: $140</span>
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0)">
                                <h6>Florida</h6>
                                <span>Min: $160</span>
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0)">
                                <h6>Georgia</h6>
                                <span>Min: $120</span>
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0)">
                                <h6>Kansas</h6>
                                <span>Min: $170</span>
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0)">
                                <h6>Minnesota</h6>
                                <span>Min: $120</span>
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0)">
                                <h6>New York</h6>
                                <span>Min: $110</span>
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0)">
                                <h6>Washington</h6>
                                <span>Min: $130</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Location Modal End -->

<!-- Deal Box Modal Start -->
<div class="modal fade theme-modal deal-modal" id="deal-box" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title w-100" id="deal_today">Deal Today</h5>
                    <p class="mt-1 text-content">Recommended deals for you.</p>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="deal-offer-box">
                    <ul class="deal-offer-list">
                        <li class="list-1">
                            <div class="deal-offer-contain">
                                <a href="shop-left-sidebar.html" class="deal-image">
                                    <img src="../assets/images/vegetable/product/10.png" class="blur-up lazyload"
                                        alt="">
                                </a>

                                <a href="shop-left-sidebar.html" class="deal-contain">
                                    <h5>Blended Instant Coffee 50 g Buy 1 Get 1 Free</h5>
                                    <h6>$52.57 <del>57.62</del> <span>500 G</span></h6>
                                </a>
                            </div>
                        </li>

                        <li class="list-2">
                            <div class="deal-offer-contain">
                                <a href="shop-left-sidebar.html" class="deal-image">
                                    <img src="../assets/images/vegetable/product/11.png" class="blur-up lazyload"
                                        alt="">
                                </a>

                                <a href="shop-left-sidebar.html" class="deal-contain">
                                    <h5>Blended Instant Coffee 50 g Buy 1 Get 1 Free</h5>
                                    <h6>$52.57 <del>57.62</del> <span>500 G</span></h6>
                                </a>
                            </div>
                        </li>

                        <li class="list-3">
                            <div class="deal-offer-contain">
                                <a href="shop-left-sidebar.html" class="deal-image">
                                    <img src="../assets/images/vegetable/product/12.png" class="blur-up lazyload"
                                        alt="">
                                </a>

                                <a href="shop-left-sidebar.html" class="deal-contain">
                                    <h5>Blended Instant Coffee 50 g Buy 1 Get 1 Free</h5>
                                    <h6>$52.57 <del>57.62</del> <span>500 G</span></h6>
                                </a>
                            </div>
                        </li>

                        <li class="list-1">
                            <div class="deal-offer-contain">
                                <a href="shop-left-sidebar.html" class="deal-image">
                                    <img src="../assets/images/vegetable/product/13.png" class="blur-up lazyload"
                                        alt="">
                                </a>

                                <a href="shop-left-sidebar.html" class="deal-contain">
                                    <h5>Blended Instant Coffee 50 g Buy 1 Get 1 Free</h5>
                                    <h6>$52.57 <del>57.62</del> <span>500 G</span></h6>
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Deal Box Modal End -->

@endsection

{{-- push custom js before end of body tag --}}
@push('scripts')
<script src="/assets/js/table-column-remove.js"></script>
@endpush