@extends('layouts.category_app')
@section('contents')
    <style> @media all and (max-width:575px) {

            .cate_content{

                margin-top:100px ;
            }
            .title_box h2{
                width: 346px;
            }
        }
        #spambot{
            color: black;
        }
    </style>
    <div class="product-listing py-5">
        <div class="container">
            <div class="breadcrumbs" style="background: #f2f5fa;">
                <div class="container">
                    <div class="row pt-3 pb-3">
                        <div class="col">
                            <div class="pageStatus ">
                                <a class="text-success" href="{{url('/')}}">Home</a>

                                    <span>>></span>
                                    <a class="text-success" href="{{url('cbd-boxes')}}">{{'Products'}}</a>


                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-9">
                    <!-- product images -->
                    <div id="product-listing">
                        <div class="row top-title mb-3">
                            <div class="col">
                                <h1 class="section-title">Products</h1>
                            </div>
                        </div>
                        <div class="row product-list ">
                            @foreach ($products as $product)
                                {{-- {{dd($products['images'][0]->image)}} --}}
                                <div class="col-md-4 my-sm-4 mb-3">
                                    <div class="single-product">
                                        <div class="product-info">
                                            <h4>{{@$product['product_title']}}</h4>
                                            <p>
                                                {{@$product['meta_descriptions']}}
                                            </p>

                                            <a href="{{url($product->product_slug)}}" class="btn rounded-pill btn-product animate-btn">Get Started</a>
                                        </div>
                                        {{-- {{dd($products['images'][0]->image)}} --}}

                                        <div class="product-image-home">
                                            <a href="{{url($product->product_slug)}}"> <img src="{{ asset('assets/images/images_products')}}/{{!empty($product['images'][0])?$product['images'][0]->image:''}}" alt="" width="700px" height="700px" class="img-fluid product-home-product-image1" alt="product-title">
                                                <img src="{{ asset('assets/images/images_products')}}/{{!empty($product['images'][1])?$product['images'][1]->image:''}}" alt="" width="700px" height="700px" class="img-fluid product-home-product-image2" alt="product-title">
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="text-center">
                            {!! $products->links() !!}
                        </div>
                    </div>

                </div>
                <!-- Form Product Title Section -->

                <div class="col-md-3">
                    <div class="row product-title-short-desc w-100 m-0">
                        <div class="col p-3 mb-3">
                            <h3 class="product-detail-title w-100">Beat My Quote</h3>
                        </div>
                    </div>

                    <!-- Form -->
                    <div class="row-form-product-detail w-100 mt-4 p-3">
                        <form method="post"  id="get_quote" class="custom-form form-product-listing" action="{{route('sendAustraliaEmail')}}">

                            @csrf
                            {{-- <input type="hidden" value="{{$product['id']}}" name="product_id" />
                           <input type="hidden" value="{{$product['product_name']}}" name="product_name" />
                           <input type="hidden" value="{{$product['category']['name']}}" name="product_category" /> --}}
                            <input type="hidden" value="{{str_replace('www.','',url()->current())}}" name="current_url" />
                            <div class="row">
                                <div class="col-sm-6">
                                    <label for="height" class="hide-label">Length</label><br>
                                    <input type="text" id="height text-g" class="w-100 text-g" name="height" placeholder="Length" pattern="[0-9]+" maxlength="4" title="Please enter only numeric values">
                                </div>
                                <div class="col-sm-6">
                                    <label for="width" class="hide-label">Width</label><br>
                                    <input type="text" id="width text-g" class="w-100 text-g" name="width" placeholder="Width" pattern="[0-9]+" maxlength="4" title="Please enter only numeric values">
                                </div>

                            </div>

                            <div class="row">
                                <div class="col-sm-6">
                                    <label for="depth" class="hide-label">Depth</label><br>
                                    <input type="text" id="depth text-g" class="w-100 text-g" name="depth" placeholder="Depth" pattern="[0-9]+" maxlength="4" title="Please enter only numeric values">
                                </div>
                                <div class="col-sm-6 select-drop select ">
                                    <label for="inches" class="hide-label">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>
                            <div class="row">
                                <div class="col">

                                    <label for="product" class="hide-label">Product Name</label><br>
                                    <select id="product-name" name="product_name" class="w-100">

                                        @foreach ($products as $product)
                                            <option value="{{$product->product_title}}">{{$product->product_title}}</option>

                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 printing select border-blue">
                                    <label for="colors">Colors:</label><br>
                                    <select id="colors" name="color" 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-6 stock select 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">
                                <div class="col">
                                    <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>
                            <div class="row ">
                                <div class="col">
                                    <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="abc@domain.com">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col 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="">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col border-blue">
                                    <label for="message">Message</label><br>
                                    <textarea cols="50" rows="4" id="message"  name="message" class="textarea w-100" placeholder=""></textarea>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col submit-final w-100 ">
                                    <input id="num1" class="sum col-3" type="text" name="num1" value="1" readonly="readonly" /> +
                                    <input id="num2" class="sum col-3" type="text" name="num2" value="9" readonly="readonly" /> =
                                    <input id="captcha" class="captcha col-4" type="text" name="captcha" maxlength="2" /><br>
                                    <span id="spambot">(Are you human, or spambot?)</span>
                                    <input type="submit" class="btn submit-custom-quote rounded-pill animate-btn" value="Submit">
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
                <!-- End FOrm -->

            </div>

        </div>
    </div>
    <!-- End top -->
    <!-- Product Slider -->

    <div class="d-flex justify-content-center">

    </div>

@endsection
@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
    <script>
        function myFunction() {
            var dots = document.getElementById("dots");
            var moreText = document.getElementById("more");
            var btnText = document.getElementById("myBtn");

            if (dots.style.display === "none") {
                dots.style.display = "inline";
                btnText.innerHTML = "Read more";
                moreText.style.display = "none";
            } else {
                dots.style.display = "none";
                btnText.innerHTML = "Read less";
                moreText.style.display = "inline";
            }
        }
        $.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;
            }
        });


        (function() {
            var elements = document.querySelectorAll('img[data-src]');
            var index = 0;
            var lazyLoad = function() {
                if(index >= elements.length) return;
                var item = elements[index];

                var src = item.getAttribute("data-src");
                item.src = src;
                item.addEventListener('load', function() {
                    item.removeAttribute('data-src');
                });
                index++;
                lazyLoad();
            };
            var init = function() {
                window.addEventListener('scroll', lazyLoad);
                lazyLoad();
            };
            return init();
        })();


    </script>
@endpush