@extends('shared.product')
@section('content')
    <!--Product Description -->
    {!! NoCaptcha::renderJs() !!}
    @if($errors->has('g-recaptcha-response'))
        <div class="alert alert-danger w-100">
            <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
        </div>
    @endif
    <div class="description-start">

        <div class="container">
            <div class="row mt-sm-4 product-lr-spacing">
                <!--top-->
                <div class="col-sm-5 product-images-1">
                    <div class="product-main-1">
                        <div class="product-content-1 justify-content-center col">
                            <div class="product-media">
                                <div class="size w-100">
                                    <div class="w-100 easyzoom easyzoom--overlay easyzoom--with-thumbnails img-hover-zoom img-hover-zoom--xyz">
                                        <a href="{{ asset('public/assets/images/products')}}/{{$data->front_image}}" class="w-100 justify-content-center float-left">
                                            <img src="{{ asset('public/assets/images/products')}}/{{$data->front_image}}" alt="{{$data->front_image_alt}}"  width= "600px" height="600px" class="w-100 h-100">
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <ul class="thumbnails-product d-sm-flex">
                                <li>
                                    <a href="{{ asset('public/assets/images/products')}}/{{$data->front_image}}" data-standard="{{ asset('public/assets/images/products')}}/{{$data->front_image}}">
                                        <img src="{{ asset('public/assets/images/products')}}/{{$data->front_image}}" alt="{{$data->front_image_alt}}"  width= "600px" height="600px">
                                    </a>
                                </li>

                                <li>
                                    <a href="{{ asset('public/assets/images/products')}}/{{$data->image1}}" data-standard="{{ asset('public/assets/images/products')}}/{{$data->image1}}">
                                        <img src="{{ asset('public/assets/images/products')}}/{{$data->image1}}" alt="{{$data->title}}"  width= "600px" height="600px">
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ asset('public/assets/images/products')}}/{{$data->image2}}" data-standard="{{ asset('public/assets/images/products')}}/{{$data->image2}}">
                                        <img src="{{ asset('public/assets/images/products')}}/{{$data->image2}}" alt="{{$data->title}}"  width= "600px" height="600px">
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ asset('public/assets/images/products')}}/{{$data->image3}}" data-standard="{{ asset('public/assets/images/products')}}/{{$data->image3}}">
                                        <img src="{{ asset('public/assets/images/products')}}/{{$data->image3}}" alt="{{$data->title}}" width= "600px" height="600px">
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ asset('public/assets/images/products')}}/{{$data->image4}}" data-standard="{{ asset('public/assets/images/products')}}/{{$data->image4}}">
                                        <img src="{{ asset('public/assets/images/products')}}/{{$data->image4}}" alt="{{$data->title}}"  width= "600px" height="600px">
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 form-sec">
                    <div class="prod-text my-0">
                        <h1>{{$data->title}}</h1>
                        <p>
                            {!! $data->short_description !!}
                        </p>
                    </div>
                    <div class="form-section mt-4">
                        <h2 style="color: #ca2e2a;font-weight: bold;"> GET CUSTOM QUOTE</h2>
                        <form method="post" id="form-custom" class="custom-form"
                              action="{{Route('thank-yous')}}">
                            @csrf
                            <div class="row mt-3">
                                <div class="col-sm-4">
                                    <label for="height"><span class="required-symbol">*</span>Length</label><br>
                                    <input type="text" id="height text-g" class="w-100 text-g" name="height" placeholder="0" pattern="[0-9]*[.]?[0-9]+" required maxlength = "7" title="Please enter only numeric values">
                                    <input type="hidden" name="product_id"  value="{{$data->id}}">
                                </div>
                                <div class="col-sm-4">
                                    <label for="height"><span class="required-symbol">*</span>Width</label><br>
                                    <input type="text" id="width text-g" class="w-100 text-g" name="width" placeholder="0" pattern="[0-9]*[.]?[0-9]+" required maxlength = "7" title="Please enter only numeric values">
                                </div>
                                <div class="col-sm-4">
                                    <label for="height">Depth</label><br>
                                    <input type="text" id="depth text-g" class="w-100 text-g" name="depth" placeholder="0" pattern="[0-9]*[.]?[0-9]+" required maxlength = "7" title="Please enter only numeric values">
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-sm-4 select-drop select w-100">
                                    <label for="inches">Inches</label><br>
                                    <select id="inches" name="inches" class="w-100" required>
                                        <option value="inchess">Inches</option>
                                        <option value="cm">cm</option>
                                        <option value="mm">mm</option>
                                    </select>
                                </div>
                                <div class="col-sm-4 printing select w-100 border-blue">
                                    <label for="colors">Colors:</label><br>
                                    <select id="colors" name="colors" class="w-100">
                                        <option value="None">None</option>
                                        <option value="1 Color">1 Color</option>
                                        <option value="2 Color">2 Color</option>
                                        <option value="3 Color">3 Color</option>
                                        <option value="4 Color">4 Color</option>
                                        <option value="4/1 Color">4/1 Color</option>
                                        <option value="4/2 Color">4/2 Color</option>
                                        <option value="4/3 Color">4/3 Color</option>
                                        <option value="4/4 Color">4/4 Color</option>

                                    </select>
                                </div>
                                <div class="col-sm-4 stock select w-100 border-blue">
                                    <label for="quantity"><span class="required-symbol">*</span>Quantity:</label><br>
                                    <input type="text" id="quantity text-g" class="w-100 text-g" name="quantity" placeholder="0" required pattern="[0-9]+" required title="Please enter only numeric values">
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-sm-4">
                                    <label for="fname"><span class="required-symbol">*</span>Name:</label><br>
                                    <input type="text" id="fullname" class="text-g w-100" name="fname" required placeholder="">
                                </div>
                                <div class="col-sm-4">
                                    <label for="email"><span class="required-symbol">*</span>Email:</label><br>
                                    <input type="email" id="email" class="email w-100 text-g" name="email" required
                                           placeholder="">
                                </div>
                                <div class="col-sm-4 border-orange">
                                    <label for="phone"><span class="required-symbol">*</span>Phone No.</label><br>
                                    <input type="tel" id="phone" class="phone w-100 text-g" name="phone" required
                                           placeholder="+1 3564 35465">
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col border-blue">
                                    <label for="message">Message</label><br>
                                    <textarea cols="50" rows="2" name="form" id="message" class="textarea w-100" placeholder=""></textarea>
                                </div>
                            </div>
                            {!! NoCaptcha::display() !!}
                            {{ csrf_field() }}


                            <div class="row mt-3">
                                <div class="col submit-final w-100 ">
                                    <input type="submit" class="submit-custom-quote" value="GET INQUIRY">
                                </div>
                            </div>
                        </form>

                        <!--icon block-->
                        <div class="icon-block-prod">
                            <div class="row ">
                                <div class="col-lg-4 col-md-4 col-sm-4 col-4 col-6 d-flex py-sm-3 space-pr-details">
                                    <span class="bg-orange"> <i class="fa fa-archive CUSTOM-STYLE" style="color: #fff;"></i></span>&nbsp;
                                    <p>No Minimum Qty Required</p>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-4 col-6 d-flex py-sm-3 space-pr-details">
                  <span class="bg-orange"> <i class="fa fa-calendar-check CUSTOM-STYLE"
                                              style="color: #fff;"></i></span>&nbsp;<p>8-10BUSINESS DAY TURNAROUND</p>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-4 col-6 d-flex py-sm-3 space-pr-details">
                                    <span class="bg-orange"> <i class="fa fa-truck CUSTOM-STYLE" style="color: #fff;"></i></span>&nbsp;<p>
                                        NO DIE & PLATE CHARGE</p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-4 col-md-4 col-sm-4 col-4 col-6 d-flex py-sm-3 space-pr-details">
                                    <span class="bg-orange"> <i class="fa fa-gem CUSTOM-STYLE" style="color: #fff;"></i></span>&nbsp;
                                    <p>HIGH QUALITY OFFSET PRINTING</p>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-4 col-6 d-flex py-sm-3 space-pr-details">
                  <span class="bg-orange"> <i class="fa fa-calendar-check CUSTOM-STYLE" style="color: #fff;"></i>
                  </span>&nbsp;<p>BEST & COMPETITIVE PRICING</p>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-4 col-6 d-flex py-sm-3 space-pr-details">
                  <span class="bg-orange"> <i class="fa fa-calendar-check CUSTOM-STYLE" style="color: #fff;"></i>
                  </span>&nbsp;<p>CUSTOM SIZES & STYLE</p>
                                </div>
                            </div>

                        </div>

                    </div>
                    <!--form sec complet-->
                    <div class="col-sm-1"></div>
                </div>
            </div>
        </div>
    </div>
    <!--top end-->
    <!--botom-description-->
    <div class="container">
        <div class="row py-md-4">
            <div class="col-sm-12">
                <ul class="nav nav-tabs nav-justified prod-desc" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#description-prod" role="tab" aria-controls="duck2"
                           aria-selected="true">Details</a>
                    </li>
                </ul>

                <div class="tab-contents ">
                    <div class="tab-pane active" id="duck2" role="tabpanel" aria-labelledby="details-tab" style="font-size: 16px !important;">
                        <br>
                        <br>

                    {!! $data->description !!}




                    <!-- <h2>Excellence in Manufacturing Custom Printed Boxes<br> Wholesale with Logo</h2>
            <p class="info-details 1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. 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 specimen book. It has survived not only five centuries, but
              also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the
              1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
              publishing software like Aldus PageMaker including versions of Lorem Ipsum<span id="dots">...</span><span id="more">
              <br><br>
            <h2> Get the Eye-Catching Custom Printed Packaging<br>Boxes Wholesale!</h2>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 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 specimen book.
              </span><a href="javascript:void();" onclick="myFunctionproductdetails()" id="myBtn">see more</a>
              </p> -->
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!--botom-description end -->
    @endsection