@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://oxopackaging.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="" 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="" 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="" 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: <span style="color: #a7a7a7;">(inch)</span></label>
                            <select name="product_name" class="form-control required" id="product_name"><option selected disabled hidden style='display: none' value=''>Product Name</option><option value="Auto-Lock Boxes">Auto-Lock Boxes</option><option value="Baby Product Boxes">Baby Product Boxes</option><option value="Bakery Boxes">Bakery Boxes</option><option value="Ballot boxes">Ballot boxes</option><option value="Bandage Boxes">Bandage Boxes</option><option value="Belt Boxes">Belt Boxes</option><option value="Black Gable Boxes">Black Gable Boxes</option><option value="Book End Boxes">Book End Boxes</option><option value="Bottle Boxes">Bottle Boxes</option><option value="Bottle Neckers">Bottle Neckers</option><option value="Business Card Boxes">Business Card Boxes</option><option value="Cake Boxes">Cake Boxes</option><option value="Candle Boxes">Candle Boxes</option><option value="Candy Apple Box">Candy Apple Box</option><option value="Candy Boxes">Candy Boxes</option><option value="Cardboard Boxes">Cardboard Boxes</option><option value="Cardboard Boxes">Cardboard Boxes</option><option value="Cardboard dispenser boxes">Cardboard dispenser boxes</option><option value="Cereal Boxes">Cereal Boxes</option><option value="Chinese Take Out Boxes">Chinese Take Out Boxes</option><option value="Chocolate Boxes">Chocolate Boxes</option><option value="Christmas Boxes">Christmas Boxes</option><option value="Cigarette Boxes">Cigarette Boxes</option><option value="Cookie Boxes">Cookie Boxes</option><option value="Corrugated Boxes">Corrugated Boxes</option><option value="Cosmetic Boxes">Cosmetic Boxes</option><option value="Cosmetic Display Boxes">Cosmetic Display Boxes</option><option value="Cream Boxes">Cream Boxes</option><option value="Cube Boxes">Cube Boxes</option><option value="Cupcake Boxes">Cupcake Boxes</option><option value="Custom Bath Bomb Boxes">Custom Bath Bomb Boxes</option><option value="Custom Electronic Cigarette Boxes">Custom Electronic Cigarette Boxes</option><option value="Die-Cut Boxes">Die-Cut Boxes</option><option value="Display Boxes">Display Boxes</option><option value="Donut Boxes">Donut Boxes</option><option value="E-Liquid Boxes">E-Liquid Boxes</option><option value="Eye Shadow Boxes">Eye Shadow Boxes</option><option value="Eyeliner Boxes">Eyeliner Boxes</option><option value="Favor Boxes">Favor Boxes</option><option value="Flap Boxes">Flap Boxes</option><option value="Foundation Boxes">Foundation Boxes</option><option value="Gable Boxes">Gable Boxes</option><option value="Game Boxes">Game Boxes</option><option value="Gift Boxes">Gift Boxes</option><option value="Gift Card Boxes">Gift Card Boxes</option><option value="Gold Foil Boxes">Gold Foil Boxes</option><option value="Hair Extension Boxes">Hair Extension Boxes</option><option value="Hairspray Boxes">Hairspray Boxes</option><option value="Handle Boxes">Handle Boxes</option><option value="Hanging Tab Boxes">Hanging Tab Boxes</option><option value="Hexagon Boxes">Hexagon Boxes</option><option value="Invitation Boxes">Invitation Boxes</option><option value="Kraft Boxes">Kraft Boxes</option><option value="Lip Gloss Boxes">Lip Gloss Boxes</option><option value="Lipstick Boxes">Lipstick Boxes</option><option value="Lotion Boxes">Lotion Boxes</option><option value="Macaron Boxes">Macaron Boxes</option><option value="Mailer Boxes">Mailer Boxes</option><option value="Makeup Boxes">Makeup Boxes</option><option value="Mascara Boxes">Mascara Boxes</option><option value="Medicine Boxes">Medicine Boxes</option><option value="Muffin Boxes">Muffin Boxes</option><option value="Nail Polish Boxes">Nail Polish Boxes</option><option value="Ornament Boxes">Ornament Boxes</option><option value="Paper Boxes">Paper Boxes</option><option value="Paper Cups">Paper Cups</option><option value="Pastry Boxes">Pastry Boxes</option><option value="Perfume Boxes">Perfume Boxes</option><option value="Pie Boxes">Pie Boxes</option><option value="Pillow boxes">Pillow boxes</option><option value="Pizza Boxes">Pizza Boxes</option><option value="Playing Cards Boxes">Playing Cards Boxes</option><option value="Popcorn Boxes">Popcorn Boxes</option><option value="Product Boxes">Product Boxes</option><option value="Pyramid Boxes">Pyramid Boxes</option><option value="Retail Boxes">Retail Boxes</option><option value="Rigid Boxes">Rigid Boxes</option><option value="Shirt Boxes">Shirt Boxes</option><option value="Sleeve Boxes">Sleeve Boxes</option><option value="Snack Boxes">Snack Boxes</option><option value="Soap Boxes">Soap Boxes</option><option value="Software Boxes">Software Boxes</option><option value="Tea Boxes">Tea Boxes</option><option value="Tie Boxes">Tie Boxes</option><option value="Toy Boxes">Toy Boxes</option><option value="USB boxes">USB boxes</option><option value="Window  boxes">Window  boxes</option><option value="Others">Others</option></select>
                        </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" 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" 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" 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" id="contact_phone" type="text" placeholder="+xxxxxxxxxxx">
                        </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"></textarea>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-12 px-1">
                        <div class="form-group red-star">
                            <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">
                        <input id="num1" class="sum col-2" type="text" name="num1" value="2" readonly="readonly" /> +
                        <input id="num2" class="sum col-2" type="text" name="num2" value="7" 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 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_number", 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