@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 py-5" id="elcinaProductSlider">
        <div class="elcinaProductSliderInner">
            <div class="container">
                <div class="row">
                    <div class="col-md-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">
                                       <br />
<b>Notice</b>:  Undefined variable: images in <b>/home/payanyfee/public_html/paystaging/resources/views/front/product_old/product_detail.blade.php</b> on line <b>29</b><br />
 
                                        <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">
                                         <br />
<b>Notice</b>:  Undefined variable: images in <b>/home/payanyfee/public_html/paystaging/resources/views/front/product_old/product_detail.blade.php</b> on line <b>48</b><br />
 
                                        <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-md-7">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="elcinaProductDetails">
                                    <div class="elcinaProductName">
                                        <h5 class="mb-0">Product Code - {{ $product->code }}</h5>
                                        <h1><br />
<b>Notice</b>:  Undefined variable: product in <b>/home/payanyfee/public_html/paystaging/resources/views/front/product_old/product_detail.blade.php</b> on line <b>68</b><br />
<br />
<b>Notice</b>:  Trying to get property of non-object in <b>/home/payanyfee/public_html/paystaging/resources/views/front/product_old/product_detail.blade.php</b> on line <b>68</b><br />
</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-md-6">
                                <div class="elcinaProductCompanyDetails">
                                    <div class="elcinaCompanyIcons">
                                        <img src="{{ asset('front-assets/images/products/product5.png') }}" alt="product-slider-image">
                                        <h4 class="mb-0">Company Name</h4>
                                        <span>Pune, Maharashtra</span>
                                        <p><span class="d-inline-block me-2">3.4/5</span><span class="elcinaCompanyRating"><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></p>
                                    </div>
                                    <div class="elcinaCompanyDetailList mb-3">
                                        <div class="elcinaCompanyList d-flex align-items-center mb-1">
                                            <div class="elcinaCompanyListImg me-2">
                                                <img src="{{ asset('front-assets/images/icons/star.png') }}" alt="company-icons">
                                            </div>
                                            <div class="elcinaCompanyListTxt">
                                                <p class="mb-0">Star Supplier</p>
                                            </div>
                                        </div>
                                        <div class="elcinaCompanyList d-flex align-items-center mb-1">
                                            <div class="elcinaCompanyListImg me-2">
                                                <img src="{{ asset('front-assets/images/icons/trust.png') }}" alt="company-icons">
                                            </div>
                                            <div class="elcinaCompanyListTxt">
                                                <p class="mb-0">Trust SEAL Verified</p>
                                            </div>
                                        </div>
                                        <div class="elcinaCompanyList d-flex align-items-center mb-1">
                                            <div class="elcinaCompanyListImg me-2">
                                                <img src="{{ asset('front-assets/images/icons/manufactur.png') }}" alt="company-icons">
                                            </div>
                                            <div class="elcinaCompanyListTxt">
                                                <p class="mb-0">Manufacturer</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="elcinaCallDetails d-flex">
                                          <a href="javascript:void(0);" onclick="product_enquiry()" class="block">
                                        <div class="elcinaCompanyCallDetailsList d-flex align-items-center">
                                           <input type="hidden" name="product_id" value="{{  $product->id }}">
                                            <div class="elcinaCompanyCallIcon me-2">
                                                <img src="{{ asset('front-assets/images/icons/contact.png') }}" alt="company-icons">
                                            </div>
                                            <div class="elcinaCompanyCallDetails">
                                               
                                               
                                                    <span>Ask for more details</span>
                                                    <p class="mb-0">Contact Seller</p>
                                               
                                            </div>

                                        </div>
                                         </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!----------|| Product Slider Section ||---------->
    <!----------|| Product Detail Scroll Section ||---------->
    <section class="w-100 clearfix productsDetailsSection py-5" id="elcinaProductsDetails">
        <div class="elcinaProductsProductsInner">
            <div class="container">
                <div class="productDetailNav mb-3">
                    <ul class="nav">
                        <li class="nav-item">
                            <a class="nav-link active" href="#productdetails">Product Details</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#companydetails">Company Details</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#reviewsdetails">Reviews</a>
                        </li> 
                    </ul>
                </div>
                <div class="scrollTabProductDetails">
                    <div class="elcinaProductDetailsTab" id="productdetails">
                        <div class="productSpecification">
                            <div class="ProductHeading">
                                <h2>Product Specification:</h2>
                            </div>
                            <div class="productSpecificationDetails w-100">
                                <div class="row 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">
                        <div class="productSpecification">
                            <div class="ProductHeading">
                                <h2>Product Features:</h2>
                            </div>
                            <div class="productFeaturesDetails">
                                <ul class="nav flex-column featuresList">
                                    <li>
                                        <p>Supports one PCIe x16 and 5 PCI expansion slots</p>
                                    </li>
                                    <li>
                                        <p>Supports RS-232/422/485 with auto flow control</p>
                                    </li>
                                    <li>
                                        <p>Supports dual display VGA/DVI-D and dual GbE LAN</p>
                                    </li>
                                    <li>
                                        <p>Two DIMM sockets support up to 16 GB DDR3 1066/1333/1600.</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <hr class="horizLine mb-0">
                    </div>
                    <div class="elcinaAboutCompanyTab" id="companydetails">
                        <div class="productSpecification">
                            <div class="ProductHeading">
                                <h2>About the Company:</h2>
                            </div>
                            <div class="productAboutCompany w-75">
                                <div class="row">
                                    <div class="col-12 col-md-4">
                                        <div class="aboutCompanyList mb-3">
                                            <h5>Year of Establishment</h5>
                                            <p>1987</p>
                                        </div>
                                        <div class="aboutCompanyList mb-3">
                                            <h5>Number of Employees </h5>
                                            <p>26 to 50 People</p>
                                        </div>
                                        <div class="aboutCompanyList mb-3">
                                            <h5>GST</h5>
                                            <p>27ABMPD2628J1ZL</p>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="aboutCompanyList mb-3">
                                            <h5>Legal Status of Firm</h5>
                                            <p>Individual - Proprietor</p>
                                        </div>
                                        <div class="aboutCompanyList mb-3">
                                            <h5>Annual Turnover</h5>
                                            <p>Rs. 50 Lakh - 1 Crore</p>
                                        </div>
                                        <div class="aboutCompanyList mb-3">
                                            <h5>Import Export Code (IEC)</h5>
                                            <p>31030*****</p>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="aboutCompanyList mb-3">
                                            <h5>Nature of Business</h5>
                                            <p>Manufacturer</p>
                                        </div>
                                        <div class="aboutCompanyList mb-3">
                                            <h5>IndiaMART Member Since</h5>
                                            <p>May 2006</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="aboutCompanyPara">
                                <p>Established in the year 1987, we "Span Controls" are the leading manufacturer of a wide range of Battery Charger, Switch Mode Power Supply, Industrial Motherboard, Panel PC, etc. Our attempts to obtain the pioneering development
                                    reflect in our extremely profitable product range which is huge in demand for its industry proved designs, uniform finish, high flexibility, long-lasting quality construction and exceptional corrosion resistance.
                                </p>
                            </div>
                        </div>
                        <hr class="horizLine mb-0">
                    </div>
                    <div class="elcinaReviewsTab" 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>
        </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 <br class="d-none d-md-block"> 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>Notice</b>:  Undefined variable: similar_products in <b>/home/payanyfee/public_html/paystaging/resources/views/front/product_old/product_detail.blade.php</b> on line <b>297</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/payanyfee/public_html/paystaging/resources/views/front/product_old/product_detail.blade.php</b> on line <b>297</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