@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>
                                @if (!empty($category->name))
                                    <span>>></span>
                                    <a class="text-success" href="{{url($category->slug)}}">{{$category->name}}</a>

                                @endif
                            </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">{{$category->name}}</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>
                </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" /> <span class="text-dark"> +</span>
                                    <input id="num2" class="sum col-3" type="text" name="num2" value="8" readonly="readonly" /> <span class="text-dark"> = </span>
                                    <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="product-slider" style="background: #59B000;">
        <div class="container py-5">
            <h2 class="section-title text-center pb-3"> Related Products</h2>
            <section id="product-slider" class="owl-carousel owl-theme regular slider row">
                @if (count($featured_products))
                    @foreach ($featured_products as $featured_product)
                        <div class="product-slide-item item col">
                            <a href="{{url($product->product_slug)}}">
                                <div class="caption">
                                    <div class="slide-image-product">
                                    <!-- <img class="image-fluid d-block" src="{{ asset('assets/images/Products/slider-product-1.png')}}" alt="First slide" width="170px" height="240px" alt="product-name"> -->
                                        <img src="{{ asset('assets/images/images_products')}}/{{!empty($featured_product->images[0])?$featured_product->images[0]->image:''}}" title="{{$featured_product->product_title}}" width="400px" height="400px" class="img-fluid product-home-product-image1" alt="{{$featured_product->product_title}}">
                                    </div>
                                    <div class="slide-content-product item">
                                        <h4> {{$featured_product->product_title}}</h4>

                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                @endif

            </section>
        </div>
    </div>
    <section class="sec-white" style="margin-top: 15px">
        <div class="container">
            <div>
                {!! $category->description  !!}
            </div>
            <div>
                {!! $category->detail  !!}
            </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>
    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