@extends('layouts.app')
@section('contents')
<section>
            <div class="container">
        <div class="get-quote pt-5 mt-5">
            <h3 class="bold beat_my_quote_heading"><img src="https://noahpackaging.com/assets/images/inverted-commas.png"> Beat My Quote</h3>
            <p>
                Please fill in the form below and send 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>
        </div>
        <div class="details">
            {!! NoCaptcha::renderJs() !!}
            @if($errors->has('-response'))
                <div class="alert alert-danger w-100">
                    <strong>{{ $errors->first('-response') }}</strong>
                </div>
            @endif
            @if(!empty(session('error')))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
            @endif
            <form id="get_quote" action="{{ route('beat_my_quote') }}" method="post" enctype="multipart/form-data">
                @csrf
                <input type="hidden" value="{{ url()->current() }}" name="current_url">
                <div class="row pt-3">
                    <div class="col-lg-3 col-md-12 px-1">
                        <div class="form-group">
                            <label class="form-label"><span class="staric">*</span>Length <span style="color: #a7a7a7;">(inch)</span></label>
                            <input name="product_length" id="product_length" value="{{ old('product_length') }}" class="form-control required" placeholder="Length">
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-12 px-1">
                        <div class="form-group">
                            <label class="form-label"><span class="staric">*</span>Width <span style="color: #a7a7a7;">(inch)</span></label>
                            <input name="product_width" id="product_width" value="{{ old('product_width') }}"class="form-control required" placeholder="Width">
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-12 px-1">
                        <div class="form-group">
                            <label class="form-label"><span class="staric">*</span>Depth <span style="color: #a7a7a7;">(inch)</span></label>
                            <input name="product_depth" id="product_depth" value="{{ old('product_depth') }}" class="form-control required" placeholder="Depth">
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-12 px-1">
                        <div class="form-group">
                            <label class="form-label">Product Name: </label>
                            <input name="product_name" class="form-control  required"  value="{{ old('product_name') }}"   id="product_name">
                        </div>
                    </div>
                </div>
                <div class="row pt-3">
                    <div class="col-lg-4 col-md-12 px-1">
                        <div class="form-group">
                            <label for="form-label">Stocks:</label>
                            <select class="form-control required" name="product_stocks" id="product_stocks" >
                                <option value="12pt Cardboard Stock">12pt Cardboard Stock</option>
                                <option value="14pt Cardboard Stock">14pt Cardboard Stock</option>
                                <option value="16pt Cardboard Stock">16pt Cardboard Stock</option>
                                <option value="18pt Cardboard Stock">18pt Cardboard Stock</option>
                                <option value="20pt Cardboard Stock">20pt Cardboard Stock</option>
                                <option value="22pt Cardboard Stock">22pt Cardboard Stock</option>
                                <option value="24pt Cardboard Stock">24pt Cardboard Stock</option>
                                <option value="Corrugated Stock">Corrugated Stock</option>
                                <option value="kraft Stock">kraft Stock</option>
                                <option value="other">other</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-12 px-1">
                        <div class="form-group">
                            <label for="color">Color:</label>
                            <select name="color" id="color" class="form-control">
                                <option value="">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>
                    <div class="col-lg-4 col-md-12 px-1">
                        <div class="form-group">
                            <label for="quantity">Quantity:</label>
                            <input class="form-control required" name="quantity" id="quantity" value="{{ old('quantity') }}"  type="text">
                        </div>
                    </div>
                </div>
                <div class="row pt-3">
                    <div class="col-lg-4 col-md-12 px-1">
                        <div class="form-group red-star">
                            <label for="form-label">* Name:</label>
                            <input class="form-control required" name="contact_name" id="contact_name"  value="{{ old('contact_name') }}"  type="text" placeholder="Name">
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-12 px-1">
                        <div class="form-group red-star">
                            <label for="form-label">* Email:</label>
                            <input class="form-control required" name="contact_email" value="{{ old('contact_email') }}" id="contact_email" type="text" placeholder="Email">
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-12 px-1">
                        <div class="form-group red-star">
                            <label for="form-label">* Phone:</label>
                            <input class="form-control required" name="contact_phone"  value="{{ old('contact_phone') }}" id="contact_phone" type="text" placeholder="+xxxxxxxxxxx">
                            <input type="hidden" name="qtype" value="">
                            <input type="hidden" required  name="" class="form-control search_input_top" placeholder="Search" value="">
                        </div>
                    </div>
                </div>
                <div class="row pt-3">
                    <div class="col-lg-8 col-md-12 px-1">
                        <div class="form-group">
                            <label for="comment">Message:</label>
                            <textarea rows="3" name="message" id="message" placeholder="write short message" class="form-control">{{ old('message') }}</textarea>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-12 px-1">
                        <div class="form-group ">
                            <label for="form-label" id="artwork_file">Upload your artwork:</label>
                            <input class="form-control" name="artwork_file" id="artwork_file" type="file">
                        </div>
                    </div>
                </div>
                <div class="col-md-12 py-2 px-1">
                    <div class="col-md-12 py-2 px-1">
                        <div class="col-md-12">
                            <input id="num1" class="sum col-2" type="text" name="num1" value="4" readonly="readonly" /> +
                            <input id="num2" class="sum col-2" type="text" name="num2" value="8" readonly="readonly" /> =
                            <input id="captcha" class="captcha col-2" type="text" name="captcha" maxlength="2" /><br>
                            <span id="spambot">(Are you human, or spambot?)</span>
                        </div>
                    </div>
                </div>
                <div class="row py-3 mb-5">
                    <div class="form-group d-flex justify-content-end">
                        <button type="submit" class="btn btn-warning btn-quote rounded-pill">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection
@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
    <script>
        $(document).ready(function() {
            $.validator.addMethod('captcha',
                function(value) {
                    $result = ( parseInt($('#num1').val()) + parseInt($('#num2').val()) == parseInt($('#captcha').val()) ) ;
                    $('#spambot').fadeOut('fast');
                    return $result;
                },
                'Incorrect value, please try again.'
            );
            $.validator.addMethod( "phone_numbers", function( phone_number, element ) {
                return phone_number.match( /^[+-]?\d+$/);
            }, "Please specify a valid phone number" );
                $('#get_quote').validate({
                    debug: false,
                    rules: {
                        captcha: {
                            required: true,
                            captcha: true
                        },
                        contact_phone: {
                            required: true,
                            phone_number: true
                        }
                    },
                    chkCaptcha: {
                        required: "* Required"
                    },
                    highlight: function(element) {
                        $(element).addClass('has-error');
                    },
                    unhighlight: function(element) {
                        $(element).removeClass('has-error');
                    },
                    errorElement: 'span',
                    errorClass: 'validation-error-message help-block form-helper bold',
                    errorPlacement: function(error, element) {
                        return true;
                    }
                });
        });
        $(".g-recaptcha").attr("style",'margin-left: -7px');
    </script>
@endpush