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

@section('title') {{ $blog->title }} @endsection

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

@section('canonical')
<link ref="canonical" href="{{ route('single_blog', $blog->slug) }}" />
@endsection

@section('content')
    @php
        $breadcrumbData = [
            [
                'title' => 'Blogs',
                'link' => route('blogs'),
            ],
            [
                'title' => $blog->title,
                'link' => null,
            ],
        ];
    @endphp
    @include('theme.spade.layouts.includes.breadcrumb', $breadcrumbData)

     <section>
          <div class="auto-container">
               <div class="row">
                    <div class="col-md-8">
                         <div class="blog-area">
                              <div class="post-item">
                                   <div class="post wow fadeInUp animated" style="margin-bottom: 0px; visibility: visible; animation-name: fadeInUp;">
                                        <div class="post-content wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
                                             <h3 class="wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;" element-id="122">{{ $blog->title }}</h3>
                                             <div class="posted-date" element-id="121">{{ date('F d, Y', strtotime($blog->published_date)) }}</div>
                                             <div class="post-info" element-id="120">{{ $blog->summary }}</div>
                                             <img src="{{ asset($blog->full_image) }}" height="400" class="img-fit" style="padding-bottom: 20px;">
                                             {!! $blog->content !!}
                                        </div>
                                   </div>
                              </div>
                         </div>
                    </div>
                    <div class="col-md-4 start-sidebar mt-60">
                         <div class="primary-title">
                              <h2 class="">
                                   Request An Appointment
                              </h2>
                         </div>
                         <div class="right-sidebar">
                              <div class="consulation-form">
                                   <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 class="secondary-title">
                              <h2 class="uppercase">Recent Blogs</h2>
                         </div>
                         <div class="card">
                              <div class="card-body">
                                   @if(count($otherBlogs) > 0)
                                        @foreach ($otherBlogs as $blog)
                                             <div class="row">
                                                  <div class="col-md-4">
                                                       <img src="{{ $blog->full_image }}" alt="image" height="70" class="img-fit">
                                                  </div>
                                                  <div class="col-md-8" style="padding-left: 0px">
                                                       <a href="{{ route('single_blog', $blog->slug) }}">
                                                            <h3>{{ Str::limit($blog->title, 60) }}</h3>
                                                       </a>
                                                       <span>
                                                            {{ date('F d, Y', strtotime($blog->published_date)) }}
                                                       </span>
                                                  </div>
                                             </div>
                                             @php
                                                  $array = $otherBlogs->toArray();
                                                  $lastElement = last($array);
                                             @endphp
                                             @if($lastElement['id'] != $blog->id)
                                                  <hr style="margin: 12px">
                                             @endif
                                        @endforeach
                                   @endif
                              </div>
                         </div> --}}
                    </div>
               </div>
          </div>
     </section>
@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