@extends('admin.includes.layout')
@section('title', $page_title)
@section('content')
<!-- Page sidebar end-->
<div class="page-body">
   <div class="container-fluid">
      <div class="page-title">
         <div class="row">
            <div class="col-sm-6 col-12">
            </div>
            <div class="col-sm-6 col-12">
               <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="{{ route('admin') }}"> <i class="fa-solid fa-home me-2"></i></a></li>
                  <li class="breadcrumb-item">{{ $page_title }}</li>
               </ol>
            </div>
         </div>
      </div>
   </div>
   <!-- Container-fluid starts-->
   <div class="container-fluid">
      <div class="row">
         <div class="col-md-12">
            <div class="card shadow-lg border-0 rounded-3">
               <!-- Card Header -->
               <div class="card-header bg-light border-bottom-0 py-3 d-flex justify-content-between align-items-center rounded-top">
                  <h3 class="mb-0 fw-bold text-primary">
                     {{ $page_title }}
                  </h3>
                  <a href="{{ route('seo.list') }}" class="btn btn-sm btn-sm btn-outline-primary">
                  <i class="fas fa-list"></i> List
                  </a>
               </div>
               <div class="border-top"></div>
               <div class="card-body p-4">
                  <form id="saveForm" class="theme-form row g-3" enctype="multipart/form-data">
                     <input type="hidden" name="id" id="id" value="{{ $seo->id ?? '' }}">
                     <input type="hidden" name="old_image" id="old_image" value="{{ $seo->image ?? '' }}">
                     <input type="hidden" name="old_image_webp" id="old_image_webp" value="{{ $seo->image_webp ?? '' }}">
                     @csrf

                      <div class="col-12 col-md-12">
                        <label for="display_name" class="form-label">Display Name</label>
                        <input class="form-control" type="text" id="display_name" name="display_name" value="{{ $seo->display_name ?? '' }}" placeholder="Enter Display Name">
                     </div>

                   
                     <div class="col-12 col-md-12">
                        <label for="heading" class="form-label">Heading</label>
                        <input class="form-control" type="text" id="heading" name="heading" value="{{ $seo->heading ?? '' }}" placeholder="Enter Heading">
                     </div>
                     <!-- Page URL -->
                     <div class="col-12 col-md-12">
                        <label for="page_url" class="form-label">Page URL</label>
                        <input class="form-control" type="text" id="page_url" name="page_url" value="{{ $seo->page_url ?? '' }}" placeholder="Enter Page URL">
                     </div>
                 
                     <!-- Description -->
                     <div class="col-12">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control" id="description" name="description" rows="5" placeholder="Enter Description">{{ $seo->description ?? '' }}</textarea>
                     </div>
                    
          
                     <!-- Meta -->
                     <div class="col-12">
                        <label for="meta_title" class="form-label">Meta Title</label>
                        <textarea class="form-control" id="meta_title" name="meta_title" rows="3" placeholder="Enter Meta Title">{{ $seo->meta_title ?? '' }}</textarea>
                     </div>
                     <div class="col-12">
                        <label for="meta_keyword" class="form-label">Meta Keyword</label>
                        <textarea class="form-control" id="meta_keyword" name="meta_keyword" rows="3" placeholder="Enter Meta Keyword">{{ $seo->meta_keyword ?? '' }}</textarea>
                     </div>
                     <div class="col-12">
                        <label for="meta_description" class="form-label">Meta Description</label>
                        <textarea class="form-control" id="meta_description" name="meta_description" rows="3" placeholder="Enter Meta Description">{{ $seo->meta_description ?? '' }}</textarea>
                     </div>
                     <!-- Image -->
                     <div class="col-12 col-md-4">
                        <label for="image" class="form-label">Image</label>
                        <input class="form-control" type="file" name="image" id="image" accept=".jpg,.jpeg,.png" onchange="previewImage(this, 'imagePreview')">
                        <div class="mt-2">
                           @if(!empty($seo?->image))
                           <a href="{{ asset($seo->image) }}" target="_blank">
                           <img id="imagePreview" src="{{ asset($seo->image) }}" alt="Image" class="img-thumbnail" style="max-height: 100px;">
                           </a>
                           @else
                           <img id="imagePreview" class="img-thumbnail" style="display:none; max-height:100px;">
                           @endif
                        </div>
                     </div>


                       <div class="col-12">
                        <label class="form-label">FAQs</label>
                        <div id="faqRepeater">
                           {{-- If edit & faqs exists --}}
                           @if(!empty($seo->faqs) && is_array($seo->faqs))
                           @foreach($seo->faqs as $index => $faq)
                           <div class="faq-item border rounded p-3 mb-3">
                              <div class="row g-3">
                                 <div class="col-md-12">
                                    <textarea name="question[]" class="form-control" rows="2" placeholder="Question">{{ $faq['question'] }}</textarea>
                                 </div>
                                 <div class="col-md-12 mt-2">
                                    <textarea name="answer[]" class="form-control" rows="2" placeholder="Answer">{{ $faq['answer'] }}</textarea>
                                 </div>
                                 <div class="col-md-12 mt-2 text-end">
                                    {{-- Show Add only on first row --}}
                                    @if($index == 0)
                                    <button type="button" class="btn btn-success addFaq"><i class="fas fa-plus"></i></button>
                                    @endif
                                    {{-- Show Remove only if more than 1 row --}}
                                    @if(count($seo->faqs) > 1)
                                    <button type="button" class="btn btn-danger removeFaq"><i class="fas fa-minus"></i></button>
                                    @endif
                                 </div>
                              </div>
                           </div>
                           @endforeach
                           @else
                           <div class="faq-item border rounded p-3 mb-3">
                              <div class="row g-3">
                                 <div class="col-md-12">
                                    <textarea name="question[]" class="form-control" rows="2" placeholder="Question"></textarea>
                                 </div>
                                 <div class="col-md-12 mt-2">
                                    <textarea name="answer[]" class="form-control" rows="2" placeholder="Answer"></textarea>
                                 </div>
                                 <div class="col-md-12 mt-2 text-end">
                                    <button type="button" class="btn btn-success addFaq"><i class="fas fa-plus"></i></button>
                                 </div>
                              </div>
                           </div>
                           @endif
                        </div>
                     </div>

                     <!-- Status -->
                     <div class="col-12 col-md-4">
                        <label for="status" class="form-label">Status</label>
                        <select class="form-select select2" id="status" name="status">
                        <option value="Active" {{ !empty($seo) && $seo->status === 'Active' ? 'selected' : '' }}>Active</option>
                        <option value="Inactive" {{ !empty($seo) && $seo->status === 'Inactive' ? 'selected' : '' }}>Inactive</option>
                        </select>
                     </div>
                     <div class="col-12 text-start mt-3">
                        <button type="submit" id="submitBtn" class="btn btn-sm btn-primary me-2">
                        <i class="fas fa-save"></i> {{ $btn_title }}
                        </button>
                        <button type="reset" id="resetBtn" class="btn btn-sm btn-secondary">
                        <i class="fa-solid fa-rotate-left"></i> Reset
                        </button>
                     </div>
                  </form>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
@endsection
@push('scripts')

<script>
   $(document).ready(function () {
   
       // Add new FAQ row
       $(document).on("click", ".addFaq", function () {
           let html = `
           <div class="faq-item border rounded p-3 mb-3">
               <div class="row g-3">
                   <div class="col-md-12">
                       <textarea name="question[]" class="form-control" rows="2" placeholder="Question"></textarea>
                   </div>
                   <div class="col-md-12 mt-2">
                       <textarea name="answer[]" class="form-control" rows="2" placeholder="Answer"></textarea>
                   </div>
                   <div class="col-md-12 mt-2 text-end">
                       <button type="button" class="btn btn-danger removeFaq"><i class="fas fa-minus"></i></button>
                   </div>
               </div>
           </div>`;
           $("#faqRepeater").append(html);
       });
   
       // Remove FAQ row
       $(document).on("click", ".removeFaq", function () {
           $(this).closest(".faq-item").remove();
       });
   
   });
</script>


<script>
   $(document).ready(function() {
       $('#saveForm').on('submit', function(e) {
           e.preventDefault();
           syncEditors(); // if using any WYSIWYG editor
   
           const formData = new FormData();
   
           formData.append('_token', $('input[name="_token"]').val());
           formData.append('id', $('#id').val());
           formData.append('heading', $('#heading').val());
           formData.append('display_name', $('#display_name').val());
           formData.append('page_url', $('#page_url').val());
           formData.append('description', $('#description').val());
           formData.append('meta_title', $('#meta_title').val());
           formData.append('meta_keyword', $('#meta_keyword').val());
           formData.append('meta_description', $('#meta_description').val());
           formData.append('status', $('#status').val());
           formData.append('old_image', $('#old_image').val());
           formData.append('old_image_webp', $('#old_image_webp').val());

            // FAQs
           let questions = $("textarea[name='question[]']").map(function(){ return $(this).val(); }).get();
           let answers   = $("textarea[name='answer[]']").map(function(){ return $(this).val(); }).get();
           formData.append('question', JSON.stringify(questions));
           formData.append('answer', JSON.stringify(answers));

   
           // Append image if selected
           const imageInput = $('#image')[0];
           if (imageInput.files.length) {
               formData.append('image', imageInput.files[0]);
           }
   
           $.ajax({
               url: '{{ route("seo.save") }}',
               type: 'POST',
               data: formData,
               processData: false,
               contentType: false,
               beforeSend: function() {
                   $('#submitBtn').prop('disabled', true).text('Processing...');
               },
               success: function(response) {
                   toastr.success(response.message || 'seo saved successfully!');
                   if(response.success){
                       setTimeout(() => location.reload(), 1000);
                   }
               },
               error: function(xhr) {
                   if(xhr.status === 422){
                       let errors = xhr.responseJSON.errors;
                       let errorMessages = [];
                       $.each(errors, (key, val) => errorMessages.push(val[0]));
                       toastr.error(errorMessages.join('<br>'));
                   } else {
                       toastr.error(xhr.responseJSON?.message || 'Something went wrong!');
                   }
               },
               complete: function() {
                   $('#submitBtn').prop('disabled', false).text('Save');
               }
           });
       });
   });
</script>
@endpush