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

@section('title') Doctors & Providers @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="{{ route('appointment') }}" />
@endsection

@section('content')

    @php
        $breadcrumbData = [
            [
                'title' => 'Make an Appointment',
                'link' => route('appointment')
            ]
        ]
    @endphp
    @include('theme.spade.layouts.includes.breadcrumb', $breadcrumbData)

    <section class="contact-us-area">
        <div class="auto-container">
            <div class="row clearfix">

                <div class="col-md-3 col-sm-6 col-xs-12 map-area wow fadeInRight" data-wow-delay="0ms"
                    data-wow-duration="1000ms">
                    <div class="candidate radius">
                        <div class="candidate-margins format-image">
                            <a href="javascript:;" alt="{{ $teamMemberDetail->name }}"
                                class="media-box image-popup-vertical-fit">
                                <img src="{{ asset('storage/uploads/' . $teamMemberDetail->image_path) }}"
                                    alt="Dr. Kavish Chouhan" class="img-responsive" />
                            </a>
                            <div class="inner-box">
                                <h3><a href="javascript:;">{{ $teamMemberDetail->name }}</a>
                                    <span>{{ $teamMemberDetail->detail }}</span>
                                    {{-- <span>MD, AIIMS (New Delhi), MISHRS, USA</span> --}}
                                </h3>
                            </div>
                        </div>
                    </div>
                </div>


                <!--Contact Form-->
                <div class="col-md-7 col-sm-6 col-xs-12 contact-form wow fadeInLeft" data-wow-delay="0ms"
                    data-wow-duration="1000ms">
                    <h2>Book Your Appointment with {{ $teamMemberDetail->name }}</h2>
                    <form action="{{ route('make-appointment') }}" method="post">
                        @csrf
                        <div class="field-container clearfix">
                            {{-- <input type="hidden" name="emal_to" value=""> --}}
                            <input type="hidden" name="team_member_id" value="{{ $teamMemberDetail->id }}">
                            <div class="form-group col-md-6 col-sm-12 col-xs-12">
                                <input type="text" name="full_name" placeholder="Full Name*" required="required">
                            </div>

                            <div class="form-group col-md-6 col-sm-12 col-xs-12">
                                <input type="email" name="email" placeholder="Email*" required="required">
                            </div>

                            <div class="clearfix"></div>
                            <div class="form-group col-md-4 col-sm-12 col-xs-12 contact-us-form">
                                <input type="tel" class="phone-number" name="contact_no" placeholder="Contact No*" required="required">
                            </div>

                            <div class="form-group col-md-8 col-sm-12 col-xs-12">
                                <input type="text" name="subject" placeholder="Subject*" required="required">
                            </div>
                            <div class="clearfix"></div>


                            <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                <textarea name="feedback" placeholder="Message" required="required"></textarea>
                            </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">Submit</span> <strong class="icon"><span
                                            class="f-icon flaticon-letter110"></span></strong></button>
                            </div>
                        </div>

                    </form>
                </div>


            </div>
        </div>
    </section>
@endsection


@push('js')
<script>
$(document).ready(function () {
    $("form[action='{{ route('make-appointment') }}']").on("submit", function (e) {
        e.preventDefault();

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

        // Remove previous error messages
        form.find(".text-danger").remove();

        $.ajax({
            url: url,
            type: "POST",
            data: form.serialize(),
            success: function (response) {
                // Reset form
                form[0].reset();
                // Redirect to thank you page
                window.location.href = "/thankyou";
            },
            error: function (xhr) {
                if (xhr.status === 422) {
                    var errors = xhr.responseJSON.errors;

                    $.each(errors, function (key, value) {
                        var field = form.find("[name='" + key + "']");
                        var wrapper = field.closest(".form-group"); // keep error inside the form group
                        wrapper.append('<div class="text-danger mt-1">' + value[0] + '</div>');
                    });
                } else {
                    // alert("Something went wrong, please try again later.");
                    toast.error("Something went wrong, please try again later.");
                }
            }
        });
    });
});
</script>
@endpush