@extends('layouts.main')

@section('title', 'Product')
@section('style')
  <link rel="stylesheet" href="{{ asset('assets/custom/css/product.css') }}">
@endsection
@section('navbar')
  @include('layouts.navbar')
@endsection



@section('content')
  <div class="categories">
    <li><a href="#">Shop by Collectioin</a></li>
    <li><a href="#">Gifts Section</a></li>
    <li><a href="#">Home Decorative</a></li>
    <li><a href="#">Fashion & Accessories </a></li>
    <li><a href="#">Car Accessories </a></li>
    <li><a href="#">Stationery Suppiler </a></li>
    <li><a href="#">Bulk Ordering </a></li>
    <li><a href="#">Treasurable Memories </a></li>
  </div>
  <section>
    <p class="back_menu_btn"><a href="#"><i class='bx bx-arrow-back'></i> BACK TO MENU</a></p>
    <div class="product_category">
      <div class="product_content">
        <div class="p_images">
          <img src="{{ url('images/products/WhatsApp Image 2025-03-11 at 14.49.29.jpeg') }}" id="main_image"
            alt="product images">
          <div class="smallimages">
            <img src="{{ url('images/products/WhatsApp Image 2025-03-11 at 14.49.29.jpeg') }}" class="sub_image"
              alt="image">
            <img src="{{ url('images/products/WhatsApp Image 2025-03-07 at 17.10.24.jpeg') }}" class="sub_image"
              alt="image">
            <img src="{{ url('images/products/WhatsApp Image 2025-03-11 at 14.49.29.jpeg') }}" class="sub_image"
              alt="image">
          </div>
          <p>30% Off</p>
          <button>UPLOAD YOUR IMAGE/LOGO </button>
        </div>
        <div class="product_text">
          <p>Behome Urbanit Steel Bottel 10000ml</p>
          <p class="brand">Brand : Behome</p>
          <div class="price">
            <p class="cut_price"><i class='bx bx-rupee'></i> 649</p>
            <p class="price_main"><i class='bx bx-rupee'></i> 454</p>
          </div>
          <div class="shipping_names">
            <small><i class='bx bxs-truck truck'></i> Free Shipping</small>
            <small><i class='bx bxs-heart heart'></i> 30 Days Easy Return</small>
            <small><i class='bx bx-money money'></i> 10%Cashback</small>
          </div>
          <p class="stock para_">Availability : <span>In Stock</span></p>
          <small class="style para_">Selected Style : Simple</small>
          <p class="para para_">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quasi facilis temporibus,
            magnam
            et expedita placeat eaque magni fugit minima architecto quis corrupti nulla illum quisquam
            distinctio atque officia possimus.
          </p>
          <div class="quantity">
            <p>Quantity</p>
            <div class="qunty">
              <span>-</span>
              <p>1</p>
              <span>+</span>
            </div>
            <button>ADD TO BAG</button>
          </div>
        </div>
      </div>

      <div class="p_description">
        <div class="heighlight">
          <h2><i class='bx bxs-bookmarks'></i> HIGHLIGHTS</h2>
          <li>Brand : Behome</li>
          <li>Material : Steel</li>
          <li>Bottel Type : Sport Bottel</li>
          <li>Color : Black</li>
          <li>Capacity : 10000 ML</li>
        </div>
        <div class="bulk_content">
          <button class="whatsup_btn"><a href="#"> <i class='bx bxl-whatsapp'></i> CONTACT US FOR BULK
              QUANTITY</a></button>
          <div class="chek_pin">
            <p>CHECK DELIVERY AT YOUR LOCATION</p>
            <div class="input_area">
              <input type="text" placeholder=" Enter Pinode">
              <button>CHECK</button>
            </div>
          </div>
        </div>
      </div>
      <div class="p_details">
        <p class="name_p_details">Product Details</p>
        <div class="p_details_content">
          <div class="p_text_details">
            <h3>Steel Material</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae recusandae, sunt veritatis
              natus
              quo, accusamus iste error exercitationem sequi unde eaque tempore quibusdam dolores nostrum
              culpa eos dolorum officia voluptate.
            </p>
          </div>
          <img src="{{ url('images/products/WhatsApp Image 2025-03-11 at 14.49.29.jpeg') }}" alt="image">
        </div>
        <div class="p_details_content">
          <img src="{{ url('images/products/WhatsApp Image 2025-03-11 at 14.49.29.jpeg') }}" alt="image">
          <div class="p_text_details">
            <h3>Bottel Type</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae recusandae, sunt veritatis
              natus
              quo, accusamus iste error exercitationem sequi unde eaque tempore quibusdam dolores nostrum
              culpa eos dolorum officia voluptate.
            </p>
          </div>
        </div>
      </div>
      <div class="p_reviews">
        <p class="customer_review">Customer Reviews</p>
        <p class="p_review">Reviews 4.4
          <span>
            <i class='bx bxs-star'></i>
            <i class='bx bxs-star'></i>
            <i class='bx bxs-star'></i>
            <i class='bx bxs-star'></i>
            <i class='bx bxs-star-half'></i>
            <small>(152000)</small>
          </span>
        </p>
        <div class="review_card">
          <div class="review_section">
            <div class="user_details">
              <img src="{{ url('images/products/WhatsApp Image 2025-03-11 at 14.49.29.jpeg') }}" alt="image">
              <p>Vishal Nalawade</p>
            </div>
            <div class="stars">
              <i class='bx bxs-star star'></i>
              <i class='bx bxs-star star'></i>
              <i class='bx bxs-star star'></i>
              <i class='bx bxs-star star'></i>
            </div>
            <p class="messgae">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, eaque?
              Fuga voluptatum
              corporis
              ullam repudiandae! Id itaque, temporibus nobis non quia ea facere ipsam impedit dolorum nemo
              dignissimos veritatis error
              ullam repudiandae! Id itaque, temporibus nobis non quia ea facere ipsam impedit dolorum nemo
              dignissimos veritatis error
              ullam repudiandae! Id itaque, temporibus nobis non quia ea facere ipsam impedit dolorum nemo
              dignissimos veritatis error
              ullam repudiandae! Id itaque, temporibus nobis non quia ea facere ipsam impedit dolorum nemo
              dignissimos veritatis error.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Modal -->
  <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Understood</button>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('script')
  <script>
    $(document).on("click", ".sub_image", function() {
      $("#main_image").attr("src", $(this).attr("src"));
    })
  </script>
@endsection