@extends('shared.master')
@section('content')
    <!--Blog-->

    <div class="blog-page-content my-4">
        <div class="container">
<br>
<br>
            <div class="row">
                {!! NoCaptcha::renderJs() !!}
                @if($errors->has('g-recaptcha-response'))
                    <div class="alert alert-danger w-100">
                        <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                    </div>
            @endif
                <!-- Side bar Area Close -->

                <!-- Right side area -->
                <div class="col-sm-7 col-md">
                    <h1 class="text-center">Get a Free  Quote</h1>
                    <p class="text-center">Please fill in the form below and submit it. Make sure that you fill in all the required fields and you will be contacted by our packaging experts, As soon as possible.</p>
                    {{-- {{ dd($data) }} --}}
                    <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">
                            </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"><span class="required-symbol">*</span>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="6" placeholder="Enter your message here...!" 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>
                </div>

                <div class="col-sm-5 dis-on-desktop-blog">
                    <div class="sidebar sidebar-additional">
                        <div class="widget block blog-search" data-bind="scope: 'blog-search'">
                            <div class="block-content">
                                <div class="block-title">
                                    <h2 class="text-white">Recent Posts</h2>
                                </div>
                                <div class="block-inner-content">
                                    @foreach ($blogs as $blog)
                                        <div class="item-1">
                                            <a class="post-item-link" href="{{route('viewProduct', [$blog->slug])}}">
                                                {{$blog->post_title}}
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>





        </div>  <!-- container close -->
    </div>  <!-- page close -->

@endsection