@extends('frontend.layouts.app')

@section('title')
    Package-Details - {{ config('app.name') }}
@endsection

@section('content')
    <section class="hero__slider--section">
        <div class="slider__thumbnail--style5 position-relative">
            <img class="slider__thumbnail--img__style5" src="{{ $package->banner_image }}" alt="slider-img">
            <div class="hero__content--style5 text-center">
                <!-- <h2 class="hero__content--style5__title h1">Smart Home!.</h2>
                                                                                                                                                                                                                                                                                                    <p>Experience the luxury of a fully automated home with RAVOZ automation technology.</p> -->
            </div>
        </div>

    </section>
    <section class="search__filter--section section--padding mmt-6">
        <div class="container">
            <div class="section__heading style2 text-center mb-50">
                <h2 class="section__heading--maintitle">{{ $package->package_name }}</h2>
                <div class="row">
                    <div class="col"></div>
                    <div class="col-md-8">
                        <p class="section__heading--desc">{!! $package->package_description !!}</p>

                    </div>
                    <div class="col"></div>
                </div>
            </div>
            @if ($products)
                <form action="" name="cart" id="cart" method="post">
                    @csrf
                    <input type="hidden" id="package_id" name="package_id" value="{{ $package->id }}">
                    <input type="hidden" id="type" name="type" value="2">
                    <div class="row  mb--n30">
                        @foreach ($products as $pr)
                            @if ($loop->iteration % 5 == 0)
                    </div>
                    <div class="row  mb--n30 mt-40">
            @endif
            <div class="col-lg-3 col-md-3 pr-0 mb-20">
                <div class="banner__items position__relative">
                    <img class="banner__thumbnail--img img-index" src="{{ $pr->thumb_image }}" alt="banner-img">
                    <div class="img-in-btn">
                        <a href="{{ $pr->slug_name }}">
                            <button type="button" class="btn primary__btn">Learn More <i
                                    class="fa fa-arrow-right right-arrow" aria-hidden="true"></i></button>
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <div class="text-center mt-80 mmt-40">
            {{-- <a href="{{ route('frontend.package') }}"><button class="primary__btn quickview_cart--btn add-to-cart-btn"
                    type="submit">Add To Cart</button></a> --}}

            <button class="primary__btn" type="submit" id="btnOpenForm">Enquire
                Now</button>
        </div>

        </form>
        @endif
        </div>
    </section>

    {{-- popup form --}}
    <div class="form-popup-bg">
        <div class="form-container">
            <form action="{{ route('frontend.enquiry.store') }}" name="enquiry_form" id="enquiry_form" method="post">
                <div class="main checkout__mian bg-f0 enq-first-tble border-radius-10">
                    <div class="checkout__content--step section__shipping--address pb-0">
                        <button id="btnCloseForm" class="close-button">X</button>

                        <div class="section__header mb-25">
                            <h2 class="section__header--title h3">Contact information</h2>
                        </div>
                        @csrf
                        <div class="section__shipping--address__content">
                            <input id="packages_id" name="packages_id" type="hidden" value="{{ $package->id }}">

                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 mb-20">
                                    <div class="checkout__input--list ">
                                        <input class="checkout__input--field border-radius-5" placeholder="Name"
                                            id="name" name="name" type="text">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 mb-20">
                                    <div class="checkout__input--list">
                                        <input class="checkout__input--field border-radius-5" placeholder="Email"
                                            id="email" name="email" type="text">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 mb-20">
                                    <div class="checkout__input--list">
                                        <input class="checkout__input--field border-radius-5" placeholder="Phone"
                                            id="mobile" name="mobile" type="text">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 mb-20">
                                    <div class="checkout__input--list">
                                        <input class="checkout__input--field border-radius-5" placeholder="Country"
                                            id="region" name="region" type="text">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 mb-20">
                                    <div class="checkout__input--list">
                                        <input class="checkout__input--field border-radius-5" placeholder="State"
                                            id="state" name="state" type="text">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 mb-20">
                                    <div class="checkout__input--list">
                                        <input class="checkout__input--field border-radius-5" placeholder="City"
                                            id="city" name="city" type="text">
                                    </div>
                                </div>
                                <div class="col-12 mb-20">
                                    <div class="checkout__input--list">
                                        <textarea class="checkout__notes--textarea__field border-radius-5" id="address" name="address"
                                            placeholder="Address" spellcheck="false"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="order-notes mb-20">
                        <h2 class="mb-20">Enquiry Notes <span class="checkout__input--label__star">*</span>
                        </h2>
                        <textarea class="checkout__notes--textarea__field border-radius-5" id="message" name="message"
                            placeholder="Message" spellcheck="false"></textarea>
                    </div>
                    <div class="checkout__content--step__footer d-flex align-items-center">
                        <button class="continue__shipping--btn primary__btn border-radius-5" id="btnSubmit"
                            type="submit">Send Enquiry</button>
                    </div>
                    <h4 class="enq_msg text-center mt-2" style="color:#008000"> </h4>
                </div>
            </form>
        </div>
    </div>
    <div class="form-popup-bg-response">
        <div class="form-container">

            <div class="main checkout__mian bg-f0 enq-first-tble border-radius-10">
                <div class="pb-0">
                    <button id="btnCloseForm1" class="close-button">X</button>
                </div>
                <h4 class="enq_msg text-center"></h4>
            </div>
            </form>
        </div>
    </div>
    @php
        $i = 0;
    @endphp
    <section class="search__filter--section section--padding head-h2">
        @foreach ($data as $val)
            <div
                class="@if ($val['section_type'] == 1) container @elseif($val['section_type'] == 2) container-fluid @else @endif">
                <div class="row text-center">
                    @foreach ($val['grids'] as $grid)
                        <div class="col-md-{{ $grid['grid_count'] }} mb-50">
                            @if ($grid['grid_type'] == 1)
                                {!! $grid['content'] !!}
                            @else
                                @if ($grid['link'])
                                    <a href="{{ $grid['link'] }}">
                                @endif
                                <img src="{{ $grid['content'] }}"
                                    @if ($val['section_type'] == 3) class="banner__thumbnail--img img-index" @endif />
                                @if ($grid['link'])
                                    </a>
                                @endif
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
            @php
                $i++;
            @endphp
        @endforeach
    </section>
@endsection
@push('after-scripts')
    <script src="{{ asset('js/alertify.min.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('css/alertify.min.css') }}">
    <script src="{{ asset('js/cart.js') }}"></script>
    <script>
        function closeForm() {
            $('.form-popup-bg').removeClass('is-visible');
            $('.form-popup-bg-response').removeClass('is-visible');
        }

        $(document).ready(function($) {

            /* Contact Form Interactions */
            $('#btnOpenForm').on('click', function(event) {
                event.preventDefault();

                $('.form-popup-bg').addClass('is-visible');
            });

            //close popup when clicking x or off popup
            $('.form-popup-bg').on('click', function(event) {
                if ($(event.target).is('.form-popup-bg') || $(event.target).is('#btnCloseForm')) {
                    event.preventDefault();
                    $(this).removeClass('is-visible');
                }
            });
            $('.form-popup-bg-response').on('click', function(event) {
                if ($(event.target).is('.form-popup-bg-response') || $(event.target).is('#btnCloseForm1')) {
                    event.preventDefault();
                    $(this).removeClass('is-visible');
                }
            });


        });
    </script>
    <script>
        $("#enquiry_form").validate({
            rules: {
                name: "required",
                email: {
                    email: true,
                    required: true
                },
                mobile: {
                    required: true,
                    minlength: 10
                },
                region: "required",
                address: "required",
                message: "required",
            },

            messages: {
                name: "Please enter name",
                email: {
                    email: "Enter Valid Email!",
                    required: "Enter Email!"
                },
                mobile: {
                    minlength: "Please enter Valid Mobile No.",
                    required: "Please enter Mobile No."
                },
                region: "Please enter region",
                address: "Please enter address",
                message: "Please enter message",
            },

            submitHandler: function(form) {
                $('#btnSubmit').html('Please Wait...');
                //  $('#btnSubmit').attr("disabled", false);
                $.ajax({
                    url: form.action,
                    type: form.method,
                    data: $(form).serialize(),
                    success: function(response) {
                        $(".form-popup-bg").hide();
                        $(".enq_msg").html(response.message);
                        $('.form-popup-bg-response').addClass('is-visible');
                    }
                });
            }
        });
    </script>
@endpush