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

@section('title') {{ $subPage == true ? $post->title : $pageDetail->title }} @endsection

@section('meta') 
@if($subPage)
    <meta name="title" content="{{ $post->meta_title ?? $seoSetting['meta_title'] }}" />
    <meta name="description" content="{{ $post->meta_description ?? $seoSetting['meta_detail'] }}">
    <meta name="keywords" content="{{ $post->meta_keywords ?? $seoSetting['meta_keywords'] }}" />
@else
    <meta name="title" content="{{ optional($pageDetail->pageMeta)->meta_title ?? $seoSetting['meta_title'] }}" />
    <meta name="description" content="{{ optional($pageDetail->pageMeta)->meta_description ?? $seoSetting['meta_detail'] }}">
    <meta name="keywords" content="{{ optional($pageDetail->pageMeta)->meta_keywords ?? $seoSetting['meta_keywords'] }}" />
@endif
@endsection

@section('canonical') 
@if($subPage)
    <link ref="canonical" href="{{ route('hair_transplant.child', $post->slug) }}" />
@else
    <link ref="canonical" href="{{ route('hair_transplant') }}" />
@endif
@endsection

@section('content')

    @php
        if ($subPage) {
            $breadcrumbData = [
                [
                    'title' => $pageDetail->title,
                    'link' => route('hair_transplant'),
                ],
                [
                    'title' => $post->title,
                    'link' => null,
                ],
            ];
        } else {
            $breadcrumbData = [
                [
                    'title' => $pageDetail->title,
                    'link' => route('hair_transplant'),
                ],
            ];
        }
    @endphp
    @include('theme.spade.layouts.includes.breadcrumb', $breadcrumbData)

    <div class="auto-container">
        <div class="grid-container">
            <div class="grid-item">
                <div class="start-sidebar mt-60">
                    <div class="primary-title">
                        <h2 class="uppercase">
                            Overview
                        </h2>
                    </div>
                    <div class="left-sidebar">
                        <ul class="list-disc" id="default-tab" data-tabs-toggle="#default-tab-content" role="tablist">
                            @if (count($posts) > 0)
                                @foreach ($posts as $post)
                                    <li class="mb-25" role="presentation">
                                        <a href="{{ route('hair_transplant.child', $post->slug) }}"
                                            class="{{ request()->segment(2) == $post->slug ? 'text-secondary' : 'text-dark' }}">
                                            {{ $post->title }}
                                        </a>
                                    </li>
                                @endforeach
                            @endif
                        </ul>
                    </div>
                    <div class="secondary-title">
                        <h2 class="uppercase">
                            Success Results
                        </h2>
                    </div>
                    <div class="image-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>
                                </article>
                            @endforeach
                        @endempty
                    </div>
                </div>
            </div>
            <div class="grid-item">
                <div class="mt-60 gaper">
                    <div class="partial-content">
                        @if ($subPage)
                            @yield('sub-content')
                        @else
                            {{-- @if (count($posts) > 0)
                                @php
                                    $array = $posts->toArray();
                                    $post = reset($array);
                                @endphp
                                <h2 style="font-size: 24px; color:#22ad4b; padding-bottom: 12px;">{{ $post['title'] }}</h2>
                                {!! $post['full_detail'] !!}
                            @endif --}}
                            {!! $pageDetail->description !!}
                        @endif
                    </div>
                </div>
            </div>
            <div class="grid-item">
                <div class="top-services" style="padding: 60px 0 10px">
                    <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="{{ $pageDetail->full_image }}" alt="Image" />
                                <span class="curve"></span>
                            </figure>
                            <div class="content">
                                <div class="inner-box">
                                    @php
                                        $contents = explode('<nl>', $pageDetail->summary)
                                    @endphp
                                    <h3 style="font-family: 'Sintony', sans-serif;">{{ $contents[0] }}</h3>
                                    <div class="text" style="height:200px; overflow:hidden">
                                        <p>{!! $contents[1] !!}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
                <div class="right-sidebar">
                    <div class="consulation-form">
                        <div class="primary-title">
                            <h2 class="">
                                Request An Appointment
                            </h2>
                        </div>
                        <form action="{{ route('consultat_with_us') }}" method="post">
                            @csrf
                            <div class="row">
                                <div class="col-md-12">
                                    <input class="form-control" type="text" name="name" placeholder="Name *" required>
                                    @error('name')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-12">
                                    <input class="form-control" type="email" name="email" placeholder="Email *"
                                        required>
                                    @error('email')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-12 appointment-form-field">
                                    <input class="form-control phone-number" type="text" name="contact_no" placeholder="Phone *" required>
                                    @error('contact_no')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-12">
                                    <label>Which of the below best applies to you?</label><br>
                                    @foreach ($ageGroupOptions as $key => $option)
                                        <input type="radio" id="{{ 'option' . $key }}" name="age_group"
                                            value="{{ $key  }}">
                                        <label class="radio-term"
                                            for="{{ 'option' . $key }}">{{ $option }}</label><br>
                                    @endforeach
                                    @error('age_group')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-12">
                                    <label for="procedure">Procedure of Interest</label>
                                    <select id="procedure" name="procedure_of_interest" class="form-control">
                                        <option>Select Procedure</option>
                                        @foreach ($procedureOptions as $key => $option)
                                            <option value="{{ $key }}">{{ $option }}</option>
                                        @endforeach
                                    </select>
                                    @error('procedure_of_interest')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-12">
                                    <input class="form-control" type="text" name="subject" placeholder="Subject *">
                                    @error('subject')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-12">
                                    <textarea class="form-control" rows="3" name="message" placeholder="Message *"></textarea>
                                    @error('message')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-12">
                                    <p class="term"><input type="checkbox" name="is_aggrement"
                                            value="11">&nbsp;&nbsp;I understand that Arogin may contact me and I give my consent.</p>
                                    @error('is_aggrement')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-12">
                                    <button type="submit" class="primary-btn dark 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>
        </div>
    </div>

@endsection


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

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

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

                $.ajax({
                    url: url,
                    type: "POST",
                    data: form.serialize(),
                    success: function (response) {
                        form[0].reset();
                        window.location.href = "/thankyou"; // redirect after success
                    },
                    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(".col-md-12"); // keep errors inside column wrapper

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