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

@section('title')
    The Best Hair Transplant In Nepal
@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('content')

    {{-- /* ------------------------------ Video Section ----------------------------- */ --}}
    <div class="video-container">
        <!-- Video -->
        <video autoplay muted loop>
            <source src="{{ asset('source/videos/manoj_gajurel.mp4') }}" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <!-- Overlay -->
        <div class="overlay"></div>
        <!-- Caption -->
        <div class="caption">
            <h1>
                {{ $homePage->title ?? 'Leading Hair Transplant in Nepal' }}
            </h1>
            <div class="link-btn">
                <a href="{{ route('doctor_provider') }}" class="primary-btn light hvr-bounce-to-left">
                    <span class="btn-text appointment">Book Your Appointment</span>
                    <strong class="icon"><span class="f-icon flaticon-right11"></span></strong>
                </a>
            </div>
        </div>
    </div>

    {{-- /* ------------------------ Transformation Section ----------------------- */ --}}
    <section class="transformation-area">
        <div class="auto-container">
            <div class="sec-title wow fadeInLeft animated animated" data-wow-delay="300ms" data-wow-duration="1000ms"
                style="visibility: visible; animation-duration: 1000ms; animation-delay: 300ms;">
                <h2>Transformations</h2>
            </div>
            <div class="transformation-slider">
                @empty(!$transformations)
                    @foreach ($transformations ?? [] as $transformation)
                        <article class="post-container wow fadeInUp slide-item" data-wow-delay="0ms" data-wow-duration="1000ms">
                            <div class="post-inner-content">
                                <figure class="image">
                                    <div class="flex flex-row gap-[10px]">
                                        <div data-aos="fade-up" data-aos-duration="1500" data-aos-offset="100">
                                            <div class="relative">
                                                <img src="{{ $transformation->beforeImage }}" alt="" class="">
                                            </div>
                                        </div>
                                        <div data-aos="fade-down" data-aos-duration="1500" data-aos-offset="100">
                                            <div class="relative">
                                                <img src="{{ $transformation->afterImage }}" alt="" class="">
                                            </div>
                                        </div>
                                    </div>
                                    <span class="curve"></span>
                                </figure>
                                <div class="content">
                                    <div class="text-center">
                                        <span>
                                            {{ $transformation->graft . ' Grafts' }}
                                            @if($transformation->grade)
                                                {{ ' for ' . $transformation->grade . ' Grade' }}
                                            @endif
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </article>
                    @endforeach
                @else
                    Transformation not found !
                @endempty
            </div>
        </div>
    </section>

    {{-- /* ------------------------ Video Testimonial Section ----------------------- */ --}}
    <section class="videos-area">
        <div class="auto-container">
            <div class="videos-slider">
                @empty(!$videoTestimonials)
                    @foreach ($videoTestimonials ?? [] as $videoTestimonial)
                        <!--Post-->
                        <article class="post-container wow fadeInUp slide-item" data-wow-delay="0ms" data-wow-duration="1000ms">
                            <div class="post-inner-content">
                                <figure class="image">
                                    {!! $videoTestimonial->link !!}
                                    <span class="curve"></span>
                                </figure>
                                <div class="content text-white">
                                    <div class="inner-content-box">
                                        <h4 class="sub-title">{{ $videoTestimonial->name }}</h4>
                                        <div class="text">
                                            <p>
                                                {{ $videoTestimonial->designation }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </article>
                    @endforeach
                @else
                    Video Testimonial not found !
                @endempty
            </div>
        </div>
    </section>

    {{-- /* ----------------------- Normal Testimonial Section ----------------------- */ --}}
    <section class="testimonial-area top-services" id="patients-and-visitors">
        <div class="auto-container">
            <div class="sec-title wow fadeInLeft animated" data-wow-delay="300ms" data-wow-duration="1000ms"
                style="visibility: visible; animation-duration: 1000ms; animation-delay: 300ms;">
                <h2>Testimonials</h2>
            </div>
            <div class="testimonial-slider">
                @empty(!$normalTestimonials)
                    @foreach ($normalTestimonials as $normalTestimonial)
                        <article class="post wow fadeInUp slide-item" data-wow-delay="0ms" data-wow-duration="1000ms">
                            <div class="post-inner">
                                <figure class="image">
                                    <img class="img-responsive" src="{{ $normalTestimonial->full_image }}" alt="Image" />
                                    <span class="curve"></span>
                                </figure>
                                <div class="content">
                                    <div class="inner-box">
                                        <h3>{{ $normalTestimonial->name }}</h3>
                                        <div class="text" style="height:265px; overflow:hidden">
                                            <p>{{ $normalTestimonial->statement }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </article>
                    @endforeach
                @endempty
            </div>
        </div>
    </section>

    {{-- /* --------------------------- Team Member Section -------------------------- */ --}}
    <section class="team-of-proessionals">
        <div class="auto-container">
            <div class="clearfix">
                <div class="col-md-12">
                    <div class="sec-title wow fadeInLeft animated" data-wow-delay="300ms" data-wow-duration="1000ms"
                        style="visibility: visible; animation-duration: 1000ms; animation-delay: 300ms;">
                        <h2>Doctors</h2>
                    </div>
                    <div class="row" data-wow-delay="300ms" data-wow-duration="1000ms">
                        <div class="clearfix">
                            @empty(!$teamMembers)
                                @foreach ($teamMembers as $teamMember)
                                    <article class="col-md-3 col-sm-6 col-xs-12">
                                        <div class="candidate radius">
                                            <div class="candidate-margins format-link">
                                                <a href="javascript:;" class="media-box">
                                                    <img src="{{ $teamMember->full_image }}" alt="{{ $teamMember->name }}"
                                                        class="img-responsive">
                                                </a>
                                                <div class="inner-box">
                                                    <h3>
                                                        <a href="javascript:;">{{ $teamMember->name }}</a>
                                                        <span>{{ $teamMember->designation }}</span>
                                                        <span>{!! $teamMember->detail !!}</span>
                                                    </h3>
                                                </div>
                                            </div>
                                        </div>
                                    </article>
                                @endforeach
                            @endempty
                            <div style="clear:both"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="link-btn wow fadeInUp animated flex justify-content-center mt-10" data-wow-delay="600ms"
                data-wow-duration="1000ms"
                style="visibility: visible; animation-duration: 1000ms; animation-delay: 600ms;">
                <a href="{{ route('doctor_provider') }}" class="primary-btn light hvr-bounce-to-left">
                    <span class="btn-text">View All</span> <strong class="icon"><span
                            class="f-icon flaticon-right11"></span></strong>
                </a>
            </div>
        </div>
    </section>

    {{-- /* ---------------------------- About Us Section ---------------------------- */ --}}
    <section class="we-are-best mt-80">
        <div class="auto-container">
            <div class="row clearfix">
                <div class="col-md-6 col-sm-6 col-xs-12 image-side">
                    <figure class="image">
                        <img class="img-responsive" src="{{ $aboutPage->full_image }}" alt="Arogin Image">
                    </figure>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-12 text-side">
                    <h2 class="wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms">
                        <span style="color:white;">{{ $aboutPage->title }}</span>
                    </h2>
                    <div class="text wow fadeInUp" data-wow-delay="300ms" data-wow-duration="1000ms">
                        <p>{{ $aboutPage->summary }}</p>
                    </div>
                    <div class="link-btn wow fadeInUp" data-wow-delay="600ms" data-wow-duration="1000ms">
                        <a href="{{ route('about_us') }}" class="primary-btn light hvr-bounce-to-left">
                            <span class="btn-text">Read More</span> <strong class="icon"><span
                                    class="f-icon flaticon-right11"></span></strong>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- /* -------------------------- Feature News Section -------------------------- */ --}}
    <section class="news-area">
        <div class="auto-container">
            <div class="sec-title wow fadeInLeft" data-wow-delay="300ms" data-wow-duration="1000ms">
                <h2>Blogs</h2>
            </div>
            <div class="news-slider">
                @empty(!$blogs)
                    @foreach ($blogs as $blog)
                        <article class="slide-item">
                            <figure class="image">
                                <img src="{{ $blog->full_image }}" alt="{{ $blog->title }}" height="280">
                            </figure>
                            <div class="content-box">
                                <div class="text-content">
                                    <h3><a href="{{ route('single_blog', $blog->slug) }}">{{ $blog->title }}</a></h3>
                                    <div class="info">{{ date('M d, Y', strtotime($blog->published_date)) }}</div>
                                    <div class="text" style="height:55px; overflow:hidden">{{ $blog->summary }}</div>
                                    <div class="link-btn">
                                        <a href="{{ route('single_blog', $blog->slug) }}"
                                            class="primary-btn hvr-bounce-to-left">
                                            <span class="btn-text">LEARN MORE</span> <strong class="icon"><span
                                                    class="f-icon flaticon-right11"></span></strong>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </article>
                    @endforeach
                @endempty
            </div>
        </div>
    </section>

    {{-- /* -------------------------- Get In Touch Section -------------------------- */ --}}
    <section class="contact-us py-90" style="background-color:#edf9f4">
        <div class="auto-container clearfix">
            <div class="sec-title wow fadeInLeft animated overflow-hidden" data-wow-delay="300ms"
                data-wow-duration="1000ms"
                style="visibility: visible; animation-duration: 1000ms; animation-delay: 300ms;">
                <h2>Contact Us</h2>
            </div>
            <div class="flex justify-content-center">
                <div class="w-70; mx-auto">
                    <p>Have any questions? Leave us your contact information, and we’ll reach out to you.</p>
                    <form id="contactForm" action="{{ route('contactUsMessage') }}" method="post">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-6 mb-10">
                                <label for="full-name" class="form-label">Full Name</label>
                                <input type="text" class="form-control" id="full-name" name="full_name"
                                    placeholder="Full Name" required>
                                @error('full_name')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-10">
                                <label for="address" class="form-label">Address</label>
                                <input type="text" class="form-control" id="address" name="address"
                                    placeholder="Address" required>
                                @error('address')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-10">
                                <label for="email-id" class="form-label">Email ID</label>
                                <input type="email" class="form-control" id="email-id" name="email"
                                    placeholder="yourname@gmail.com" required>
                                @error('email')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-10">
                                <label for="phone-number" class="form-label">Contact Number</label>
                                <input type="tel" class="form-control  phone-number" id="phone-number" name="phone" placeholder="98XXXXXXXX">
                                @error('phone')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-12 mb-10">
                                <label for="message" class="form-label">Message</label>
                                <textarea class="form-control" id="message" name="message" placeholder="Write message here.." rows="5"
                                    required></textarea>
                                @error('message')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-12 flex justify-content-center pt-30">
                                <button type="submit" class="primary-btn light hvr-bounce-to-left">
                                    <span class="btn-text">Submit</span>
                                    <strong class="icon">
                                        <span class="f-icon flaticon-right11"></span>
                                    </strong>
                                </button>
                            </div>
                        </div>
                    </form>
                </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");

        // Remove any existing errors
        form.find(".text-danger").remove();

        $.ajax({
            url: url,
            type: "POST",
            data: form.serialize(),
            success: function (response) {
                // Clear the 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 = $("[name='" + key + "']");
                        var wrapper = field.closest(".mb-10"); // Bootstrap column wrapper
                        
                        // Remove old errors
                        wrapper.find(".text-danger").remove();

                        // Append new error under the field
                        wrapper.append('<div class="text-danger mt-1">' + value[0] + '</div>');
                    });
                } else {
                    alert("Something went wrong, please try again later.");
                }
            }
        });
    });
});
</script>
@endpush