@extends('theme.spade.layouts.main')

@section('title')
    Contact Us
@endsection

@section('meta')
<meta name="title" content="{{ $seoSetting['meta_title'] }}" />
    <meta name="description" content="{{ $seoSetting['meta_detail'] }}">
    <meta name="keywords" content="{{ $seoSetting['meta_keywords'] }}" />
@endsection

@section('canonical')
<link ref="canonical" href="https://aroginhealthcare.com/contact-us" />
@endsection

@section('content')
    @php
        $breadcrumbData = [
            [
                'title' => 'Contact Us',
                'link' => route('contact_us'),
            ],
        ];
    @endphp
    @include('theme.spade.layouts.includes.breadcrumb', $breadcrumbData)

    <section class="info-strip" style="background: none">
        <div class="auto-container">
            <div class="row clearfix">
                <div class="col-md-4 col-sm-4 col-xs-12">
                    <div class="info-block text-center wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms">
                        <div class="icon hvr-radial-out">
                            <a href="https://www.google.com/maps/search/Arogin+Health+Care+Pvt+Ltd,+Kathmandu" target="_blank" style="color:inherit;text-decoration:none;">
                                <span class="f-icon flaticon-pointing8"></span>
                            </a>
                        </div>
                        <h4>Address</h4>
                        <p>
                            {{ $generalSetting['company_name'] . ' (P) Ltd' }}
                        </p>
                        <p>
                            {{ $generalSetting['address'] }}
                        </p>
                    </div>
                </div>

                <div class="col-md-4 col-sm-4 col-xs-12">
                    <div class="info-block text-center wow fadeInUp" data-wow-delay="300ms" data-wow-duration="1000ms">
                        <div class="icon hvr-radial-out">
                            <a href="mailto:{{ $generalSetting['info_email_address'] }}" style="color:inherit;text-decoration:none;">
                                <span class="f-icon flaticon-email103"></span>
                            </a>
                        </div>
                        <h4>Email</h4>
                        <p><a href="mailto:{{ $generalSetting['info_email_address'] }}" style="color:inherit;text-decoration:none;">{{ $generalSetting['info_email_address'] }}</a></p>
                        <p><a href="mailto:{{ $generalSetting['support_email_address'] }}" style="color:inherit;text-decoration:none;">{{ $generalSetting['support_email_address'] }}</a></p>
                    </div>
                </div>

                <div class="col-md-4 col-sm-4 col-xs-12">
                    <div class="info-block text-center wow fadeInUp" data-wow-delay="600ms" data-wow-duration="1000ms">
                        <div class="icon hvr-radial-out">
                            <a href="tel:{{ $generalSetting['contact_number'] }}" style="color:inherit;text-decoration:none;">
                                <span class="f-icon flaticon-telephone46"></span>
                            </a>
                        </div>
                        <h4>Phone</h4>
                        <p><a href="tel:{{ $generalSetting['contact_number'] }}" style="color:inherit;text-decoration:none;">(977) {{ $generalSetting['contact_number'] }}</a></p>
                        <p><a href="tel:{{ $generalSetting['mobile_number'] }}" style="color:inherit;text-decoration:none;">(977) {{ $generalSetting['mobile_number'] }}</a></p>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <section class="contact-us-area">
        <div class="auto-container">
            <div class="row clearfix">
                <div class="col-md-7 col-sm-6 col-xs-12 contact-form wow fadeInLeft" data-wow-delay="0ms"
                    data-wow-duration="1000ms">
                    <h2>Write in details</h2>
                    <form id="contactForm" action="{{ route('contactUsMessage') }}" method="post">
                        @csrf
                        <div class="field-container clearfix">
                            <div class="form-group col-md-6 col-sm-12 col-xs-12">
                                <input type="text" name="full_name" placeholder="Full Name*" required="required">
                                @error('full_name')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6 col-sm-12 col-xs-12">
                                <input type="email" name="email" placeholder="Email*">
                                @error('email')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="clearfix"></div>
                            <div class="form-group col-md-4 col-sm-12 col-xs-12 contact-us-form">
                                <input type="text" class="phone-number" name="phone" placeholder="Contact No*" required="required">
                                @error('phone')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group col-md-8 col-sm-12 col-xs-12">
                                <input type="text" name="subject" placeholder="Subject*" required="required">
                                @error('subject')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="clearfix"></div>
                            <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                <textarea name="message" placeholder="Feedback" required="required"></textarea>
                                @error('message')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                <button type="submit" name="submit-form" class="primary-btn hvr-bounce-to-left">
                                    <span class="btn-text">Send Feedback</span> <strong class="icon"><span
                                            class="f-icon flaticon-letter110"></span></strong>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-md-5 col-sm-6 col-xs-12 map-area wow fadeInRight" data-wow-delay="0ms"
                    data-wow-duration="1000ms">
                    <h2>Find us on Map</h2>
                    <div class="our-location">
                        {!! $additionalSetting['map'] !!}
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('js')

<script>
$(document).ready(function () {
    $("#contactForm").on("submit", function (e) {
        e.preventDefault();

        var form = $(this);
        var url = form.attr("action");

        $.ajax({
            url: url,
            type: "POST",
            data: form.serialize(),
            success: function (response) {
                form[0].reset();
                window.location.href = "/thankyou";
            },
            error: function (xhr) {
                // handle validation errors
                if (xhr.status === 422) {
                    var errors = xhr.responseJSON.errors;
                    $(".text-danger").remove();
                    $.each(errors, function (key, value) {
                        $("[name='" + key + "']").after('<div class="text-danger">' + value[0] + "</div>");
                    });
                } else {
                    alert("Something went wrong, please try again later.");
                }
            }
        });
    });
});
</script>

@endpush