@extends('www.layouts.app', [
    'title' => $product->meta_title,
    'keywords' => $product->meta_keywords,
    'description' => $product->meta_description,
    'image' => $product->getImage('images', 'x800'),
    'header' => true,
    'footer' => true,
])
@section('content')
    @include('www.layouts.enquiry', [
        'title' => $product->name,
        'tagLine' => $product->tag_line,
        'image' => $product->getImage('images', 'x800'),
        'alt' => $product->getImageAlt('images', 2) ?? $product->name,
    ])
    <div class="container-xxl py-5">
        <div class="container">
            <div class="row g-5">
                <div class="col-lg-6 pt-4" style="min-height: 400px;">
                    <div class="position-relative h-100 wow fadeIn" data-wow-delay="0.1s">
                        <img class="position-absolute img-fluid w-100 h-100" src="{{ $product->getImage('images', 'x800') }}"
                            style="object-fit: cover;" alt="{{ $product->getImageAlt('images', 2) ?? $product->name }}">
                    </div>
                </div>
                <div class="col-lg-6">

                    <h1 class="my-4"><span class="text-primary">{{ $product->name }}</span></h1>
                    @empty(!$product->tag_line)
                        <p class="mb-4">{{ $product->tag_line }}</p>
                    @endempty

                    <div class="row g-4 mb-3 py-3">
                        {!! $product->description !!}
                    </div>
                    <a href="#lead-form" class="btn btn-primary py-3 px-5">Enquire Now<i
                            class="fa fa-arrow-right ms-3"></i></a>
                </div>
            </div>
            <div class="row gy-3">

                @if ($product->similarProducts->count())
                    <div class="col-12">
                        <div class="row align-items-center justify-content-center">
                            <div class="col-12">
                                <div class="sec-heading wow animated fadeInUp">
                                    <h2 class="mb-1">Related Services</h2>
                                    <p class="test-muted fs-6">Providing best services in PAN India
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="owl-carousel items3-carousel position-relative">
                            @foreach ($product->similarProducts as $item)
                                @include('www.products.card', ['product' => $item])
                            @endforeach
                        </div>
                    </div>
                @endif
                @if ($collections->count())
                    <div class="col-12">
                        <div class="row align-items-center justify-content-center">
                            <div class="col-12">
                                <div class="sec-heading wow animated fadeInUp">
                                    <h2 class="mb-1">Other Services</h2>
                                    <p class="test-muted fs-6">Providing best services in PAN India
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="owl-carousel items3-carousel position-relative">
                            @foreach ($collections as $item)
                                @include('www.collections.card', ['collection' => $item])
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

@endsection

@push('script')
    <script>
        $("#ajax-form").validate({
            rules: {
                name: {
                    required: true,
                },
                email: {
                    required: true,
                    email: true,
                },
                phone: {
                    required: true,
                },
                date: {
                    required: true,
                },
                time: {
                    required: true,
                },
            },
            messages: {
                name: "Please enter your name",
                email: {
                    required: "Please enter email id",
                    email: "Please enter valid email id",
                },
                phone: "Please enter phone number",
                date: "Please select appointment date",
                time: "Please select appointment time",
            },
            errorPlacement: function(error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).html(error)
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {

                $(this).find('[type=submit]').attr('disabled', '');

                let formdata = new FormData(form);
                formdata.append("source_url", '{{ Request::url() }}');
                formdata.append("type", 'Hospital');
                formdata.append("care_id", '{{ $product->id }}');

                $.ajax({
                    url: "{{ route('www.support.contact-us') }}",
                    type: 'POST',
                    data: formdata,
                    contentType: false,
                    processData: false,
                    beforeSend: function() {
                        $(ajaxMessage).html(
                            '<div class="alert alert-info"><i class="fa fa-refresh fa-spin"></i> Please wait... </div>'
                        );
                    },
                    success: function(res) {
                        $(form)[0].reset();
                        setTimeout(function() {
                            window.location.href =
                                "{{ route('www.support.thankyou') }}";
                        }, 1000);
                    },
                    complete: function() {
                        $(this).find('[type=submit]').removeAttr('disabled');
                        setTimeout(function() {
                            $(ajaxMessage).html('');
                        }, 20000);
                    },
                    error: function(data) {
                        let response = JSON.parse(data.responseText);
                        if (data.status === 422) {
                            let errorString = '<ul class="ps-3 m-0">';
                            $.each(response.errors, function(key, value) {
                                errorString += '<li>' + value + '</li>';
                            });
                            errorString += '</ul>';
                            response = errorString;
                        } else {
                            response = response.message;
                        }

                        $(ajaxMessage).html('<div class="alert alert-danger">' + response +
                            '</div>');
                    }
                });
                return false;
            }
        });
    </script>
@endpush