@extends('frontend.layouts.app')

@section('title')
    {{ $product->product_name }} - {{ config('app.name') }}
@endsection

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

    <section class=" section--padding mmt-6">
        <div class="container">
            <div class="row row-cols-lg-2 row-cols-md-2">
                <div class="col">

                    <div class="product__details--media">
                        <div class="single__product--preview  swiper gallery-top mb-25">
                            <div class="swiper-wrapper">

                                @foreach ($images as $img)
                                    <div class="swiper-slide">
                                        <div class="product__media--preview__items">
                                            <a class="product__media--preview__items--link glightbox"
                                                data-gallery="product-media-preview" href="{{ $img->featured_image }}"><img
                                                    class="product__media--preview__items--img"
                                                    src="{{ $img->featured_image }}" alt="product-media-img"></a>
                                        </div>
                                    </div>
                                @endforeach

                            </div>
                        </div>
                        <div class="single__product--nav gallery-thumbs swiper">
                            <div class="swiper-wrapper">
                                @foreach ($images as $img)
                                    <div class="swiper-slide">
                                        <div class="product__media--nav__items">
                                            <img class="product__media--nav__items--img" src="{{ $img->featured_image }}"
                                                alt="product-nav-img">
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div class="swiper__nav--btn swiper-button-next">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class=" -chevron-right">
                                    <polyline points="9 18 15 12 9 6"></polyline>
                                </svg>
                            </div>
                            <div class="swiper__nav--btn swiper-button-prev">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class=" -chevron-left">
                                    <polyline points="15 18 9 12 15 6"></polyline>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="product__details--info head-h2">

                        <form action="" name="cart" id="cart" method="post">
                            @csrf
                            <!--<input id="product_id" name="product_id" type="hidden" value="{{ $product->id }}">-->
                            <!--<input id="type" name="type" type="hidden" value="1">-->
                            <!--<h2 class="product__details--info__title mb-15">{{ $product->product_name }} ({{ $product->model_no }})</h2>-->
                            <!--{!! $product->product_description !!}-->
                            <!--<P class="product__details--info__desc mb-15">-->
                            <!--    Category : {{ $product->categories->pluck('name')->implode(',') }}-->
                            <!--</P>-->
                            <input id="product_id" name="product_id" type="hidden" value="{{ $product->id }}">
                            <input id="type" name="type" type="hidden" value="1">
                            <h2 class="product__details--info__title mb-15">{{ $product->product_name }}
                                ({{ $product->model_no }})</h2>



                            {!! $product->product_description !!}
                            @if ($product->categories->isNotEmpty())
                                <p class="product__details--info__desc mb-15">
                                    Category: {{ $product->categories->pluck('name')->implode(',') }}
                                </p>
                            @endif


                            @if ($productSpecifications->isNotEmpty())
                                <p class="mb-15"><b>Specifications</b></p>
                                <table class="table table-striped table-hover" style="border: none;">
                                    <tbody>
                                        @foreach ($productSpecifications as $specification)
                                            <tr>
                                                <td style="border: none;box-shadow:none;width: 200px;">
                                                    {{ $specification->spec_name }} </td>
                                                <td style="border: none;box-shadow:none;">:
                                                    {{ $specification->spec_value }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            @endif

                            <div class="product__variant">
                                @if ($attribute)
                                    @foreach ($attribute as $att_k => $att_v)
                                        @if (count($att_v) > 1)
                                            <div class="product__variant--list mb-20">
                                                <fieldset class="variant__input--fieldset">
                                                    <legend class="product__variant--title mb-8">{{ $att_k }} :
                                                    </legend>

                                                    @if ($att_k == 'Color')
                                                        <div class="variant__color d-flex">
                                                            @foreach ($att_v as $attribute1)
                                                                @if ($loop->iteration == 1)
                                                                    <input id="{{ $att_k }}"
                                                                        name="{{ strtolower($att_k) }}" type="hidden"
                                                                        value="{{ $attribute1['id'] }}">
                                                                @endif
                                                                <div class="variant__color--list addvariant {{ $att_k }}{{ $attribute1['id'] }}"
                                                                    data-id="{{ $attribute1['id'] }}"
                                                                    data-name="{{ $att_k }}"
                                                                    style="background-color:{{ $attribute1['name'] }};@if ($loop->iteration == 1) border:2px solid #54FFE8 @else  border:1px solid gray @endif">
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    @else
                                                        <ul class="variant__size d-flex">
                                                            @foreach ($att_v as $attribute1)
                                                                <li class="variant__size--list">
                                                                    <input id="{{ $att_k }}{{ $attribute1['id'] }}"
                                                                        name="{{ strtolower($att_k) }}" type="radio"
                                                                        value="{{ $attribute1['id'] }}"
                                                                        @if ($loop->iteration == 1) checked @endif>
                                                                    <label class="variant__size--value red"
                                                                        for="{{ $att_k }}{{ $attribute1['id'] }}">{{ $attribute1['name'] }}</label>
                                                                </li>
                                                            @endforeach
                                                        </ul>
                                                    @endif
                                                </fieldset>
                                            </div>
                                        @endif
                                    @endforeach
                                @endif
                                <div class="product__variant--list quantity d-flex align-items-center mt-20">
                                    {{-- <div class="quantity__box">
                                        <button type="button" class="quantity__value quickview__value--quantity decrease"
                                            aria-label="quantity value" value="Decrease Value">-</button>
                                        <label>
                                            <input type="number" class="quantity__number quickview__value--number"
                                                value="1" name="quantity" data-counter />
                                        </label>
                                        <button type="button" class="quantity__value quickview__value--quantity increase"
                                            aria-label="quantity value" value="Increase Value">+</button>
                                    </div> --}}
                                    {{-- <button class="primary__btn quickview__cart--btn add-to-cart-btn" type="submit">Add
                                        To Cart</button> --}}

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

                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        {{-- 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>

                            <div class="section__shipping--address__content">
                                <input id="product_id" name="product_id" type="hidden" value="{{ $product->id }}">
                                <input id="attribute_id" name="attribute_id" type="hidden">
                                <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>

                    </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>
    </section>
    @if ($attribute)
        <section class="product__details--tab__section section--padding">
            <div class="container">
                <div class="row row-cols-1  head-h2">
                    <div class="col">
                        <h2 class="mb-20">Specifications</h2>
                        <div class="product__details--tab__inner border-radius-10">
                            <div class="tab_content">
                                <div>
                                    <div class="product__tab--conten">
                                        <div class="product__tab--content__step">
                                            <ul class="additional__info_list">
                                                @foreach ($attribute as $att_k => $att_val)
                                                    <li class="additional__info_list--item">
                                                        <span
                                                            class="info__list--item-head"><strong>{{ $att_k }}</strong></span>
                                                        @php
                                                            $att_v = '';
                                                        @endphp
                                                        <span class="info__list--item-content">
                                                            @foreach ($att_val as $attribute)
                                                                @php
                                                                    $att_v .= $attribute['name'] . ', ';
                                                                @endphp
                                                            @endforeach
                                                            @php
                                                                echo substr($att_v, 0, strlen($att_v) - 2);
                                                            @endphp
                                                        </span>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    @php
        $i = 0;
    @endphp

    <section class="search__filter--section section--padding head-style dfjk">
        @foreach ($data as $val)
            <div
                class="mb-full-width-style @if ($val['section_type'] == 1) container @elseif($val['section_type'] == 2) container-fluid @else @endif">
                <div class="row text-center  head-h2">
                    @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'])
                                    <div class="video-img">
                                        <!-- <a href="{{ $grid['link'] }}"> -->
                                        <a id="play-video" class="video-play-button" data-fancybox="" data-type="iframe"
                                            href="https://www.youtube.com/watch?v=p5zYvteHyZ4">
                                @endif
                                <img src="{{ $grid['content'] }}" class="video-popup-thumb"
                                    @if ($val['section_type'] == 3) class="banner__thumbnail--img img-index" @endif />

                                @if ($grid['link'])
                                    <div class="video-ico">
                                        <img src="assets/img/play.png">
                                    </div>
                                    </a>
                        </div>
                    @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>
        $(".addvariant").click(function() {
            var id = $(this).attr('data-id');
            var name = $(this).attr('data-name');
            $(".addvariant").css({
                'border': '1px solid gray'
            });
            $("." + name + id).css({
                'border': '2px solid #54FFE8'
            });
            $("#" + name).val(id);
        });
    </script>
    <script>
        document.getElementById('btnOpenForm').addEventListener('click', function() {
            // Collect selected attribute values
            var selectedAttributes = [];

            // Add the hidden color input field value
            var colorInput = document.getElementById('Color');
            if (colorInput) {
                selectedAttributes.push(colorInput.value);
            }

            // Collect the values of checked radio buttons
            var attributeFields = document.querySelectorAll('.product__variant--list input[type="radio"]:checked');

            attributeFields.forEach(function(field) {
                selectedAttributes.push(field.value);
            });

            // Join the values as a comma-separated string and set it in the hidden input field
            document.getElementById('attribute_id').value = selectedAttributes.join(', ');

        });
    </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) {
                        // $('#btnSubmit').removeAttr("disabled");
                        $(".form-popup-bg").hide();
                        $(".enq_msg").html(response.message);
                        // $(".enquiry--message").show();
                        // $('#btnSubmit').html('Enquiry Submitted');

                        $('.form-popup-bg-response').addClass('is-visible');
                    }
                });
            }
        });
    </script>
@endpush