@extends('layouts.app')
@section("page-style")
<link href="{{ asset('front-assets/css/pages_css/product-detail.css') }}" rel="stylesheet">
@endsection
@section('content')
<!----------|| Product Slider Section ||---------->
<section class="w-100 clearfix productSliderSection pt-5 py-lg-5" id="elcinaProductSlider">
  <div class="elcinaProductSliderInner">
    <div class="container">
      <div class="row">
            <div class="col-sm-8 col-md-6 col-lg-5">
          <div class="elcinaProductSlider">
            <div class="product__carousel">
              <!-- Swiper and EasyZoom plugins start -->
              <div class="swiper-container gallery-top  position-relative">
                <div class="zoomIcon">
                  <i class="fa fa-search" aria-hidden="true"></i>
                </div>
                <div class="swiper-wrapper">
                   
                  <div class="swiper-slide easyzoom easyzoom--overlay">
                    <a href="{{ asset($product_image) }}">
                    <img src="{{ asset($product_image) }}" alt="product-slider-thumbnail-image">
                    </a>
                  </div>
                                  </div>
                <!-- Add Arrows -->
                <!-- <div class="swiper-button-next swiper-button-white"></div>
                  <div class="swiper-button-prev swiper-button-white"></div> -->
              </div>
              <div class="swiper-container gallery-thumbs mt-2">
                <div class="swiper-wrapper">
                   
                  <div class="swiper-slide">
                    <img src="{{ asset($product_image) }}" alt="product-slider-image">
                  </div>
                                  </div>
              </div>
              <!-- Swiper and EasyZoom plugins end -->
            </div>
          </div>
        </div>
            <div class="col-sm-6 col-md-6 col-lg-4">
              <div class="elcinaProductDetails">
                <div class="elcinaProductName">
                  <h5 class="mb-0">Product Code - {{ $product->code }}</h5>
                  <h1></h1>
                </div>
                <div class="elcinaProductReviews">
                  <span><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star-o" aria-hidden="true"></i><i class="fa fa-star-o" aria-hidden="true"></i></span>
                  <h6>(3 Customer Reviews)</h6>
                </div>
                <div class="elcinaCateItem">
                  <p><strong>Categories:</strong> {{ $product->name }}</p>
                  <p><strong>Sub Category:</strong> {{ $product->subcategory }}</p>
                  <p><strong>Color/Finish:</strong> {{ $colors }}</p>
                  <p><strong>Size:</strong> {{ $product->size }} {{ $product->unit_name }}</p>
                  <p><strong>Material:</strong> Plastic</p>
                </div>
                <!--<div class="elcinaProductPrice">
                  <p><del>$ 455.00</del></p>
                  <p><ins>$ 350.00</ins></p>
                  <p><small>You save 10%</small></p>
                </div>-->
              </div>
            </div>
            <div class="col-sm-6 col-md-12 col-lg-3">
              <div class="elcinaProductCompanyDetails">
                              </div>
            </div>
        </div>
    </div>
  </div>
</section>
<!----------|| Product Slider Section ||---------->
<!----------|| Product Detail Scroll Section ||---------->
<section class="w-100 clearfix productsDetailsSection pt-5 py-lg-5" id="elcinaProductsDetails">
  <div class="elcinaProductsProductsInner">
  <div class="container">
  <div class="productDetailNav mb-3">
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active" data-bs-toggle="tab" href="#productdetails">Product Details</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#companydetails">Company Details</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#reviewsdetails">Reviews</a>
      </li>
    </ul>
  </div>
 
  <div class="scrollTabProductDetails">
       <div class="tab-content">
          <div class="elcinaProductDetailsTab tab-pane active" id="productdetails">
              <div class="productSpecification">
                  <div class="ProductHeading">
                      <h2>Product Specification:</h2>
                   </div>
                   <div class="productSpecificationDetails w-100">
                       <div class="align-items-center">  
                            {!! $product->short_description !!}
                         </div>
                         <hr class="horizLine">
                          <div class="productSpecification">
                              <div class="ProductHeading">
                                  <h2>Product Description:</h2>
                                </div>
                                <div class="productDescriptionDetails">
                                  {!! $product->description !!}
                                </div>
                          </div>
                        <hr class="horizLine mb-0">
                   </div>
              </div>
          </div>
          <div class="elcinaAboutCompanyTab tab-pane fade" id="companydetails">
              <div class="productSpecification">
            <div class="ProductHeading">
              <h2>About the Company:</h2>
            </div>
                        <div class="productAboutCompany w-100">
              <div class="row">
                <div class="col-12 col-md-4">
                  <div class="aboutCompanyList mb-3">
                    <h5>Company Name</h5>
                    <p></p>
                  </div>
                  <div class="aboutCompanyList mb-3">
                    <h5>Category </h5>
                    <p></p>
                  </div>
                  <div class="aboutCompanyList mb-3">
                    <h5>Sub Category</h5>
                    <p></p>
                  </div>
                </div>
                <div class="col-12 col-md-4">
                  <div class="aboutCompanyList mb-3">
                    <h5>Activity</h5>
                    <p></p>
                  </div>
                  <div class="aboutCompanyList mb-3">
                    <h5>Core Activity</h5>
                    <p></p>
                  </div>
                  <div class="aboutCompanyList mb-3">
                    <h5>Location</h5>
                    <p></p>
                  </div>
                </div>
                <div class="col-12 col-md-4">
                  <div class="aboutCompanyList mb-3">
                    <h5>Member Since</h5>
                    <p></p>                    
                  </div>
                                  </div>
              </div>
            </div>
            <div class="aboutCompanyPara">
              <h5>Company Details</h5>
              <p></p>
            </div>
          </div>
          <hr class="horizLine mb-0">
          </div>
          <div class="elcinaReviewsTab tab-pane fade" id="reviewsdetails">
              <div class="productSpecification">
            <div class="ProductHeading">
              <h2>Reviews:</h2>
            </div>
            <div class="reviewsPara">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore.
              </p>
            </div>
          </div>
          <hr class="horizLine mb-0">
          </div>
    </div>
  </div>
</section>
<!----------|| Product Detail Scroll Section ||---------->
<!----------|| Similar Slider Section ||---------->
<section class="similarProducts text-center w-100 clearfix py-5" id="similarProducts">
  <div class="container py-md-5">
    <div class="headingTitle ProductsHeading">
      <div class="titleLine textCenterLine">
        <p class="mb-0"><span>THE LATEST</span></p>
      </div>
      <h1 class="">Similar Products</h1>
      <div class="fullVideoPara">
        <p class="">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type.</p>
      </div>
    </div>
    <div class="w-100 clearfix AllSimilarProductsSlider">
      <div class="elcinaSimilarProductsSlider">
        <br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/payanyfee/public_html/paystaging/resources/views/front/product/product_detail.blade.php</b> on line <b>288</b><br />
      </div>
    </div>
  </div>
</section>
<!----------|| Similar Slider Section ||---------->
<!----------|| Similar Slider Section ||---------->
<!-- Button trigger modal -->
<!-- Modal -->
<!-- <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <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">Save changes</button>
      </div>
    </div>
  </div>
  </div> -->
<!----------|| Similar Slider Section ||---------->
@endsection
@section("page-js-script")
<script src="{{ asset('assets/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
<script>
  function product_enquiry(){
  var product_id = $("input[name=product_id]").val();
  
  $('#modal-default .modal-content').html('');
  var model = "modal-lg";
  
  $.ajax({
  'headers': {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
               },   
    url :"{{ route('front.product.enquiry') }} ",
    //dataType: "json",  
    method:"POST",  
    data:{'product_id': product_id},
    success:function(res){  
     $('#modal-lg .modal-content').html(res);
     $('#modal-lg.modal').modal('show');
    }  
  });
  }
</script>
@endsection