@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('coaching.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="{{ $coaching->id ?? '' }}">
                     <input type="hidden" name="old_image" id="old_image" value="{{ $coaching->image ?? '' }}">
                     <input type="hidden" name="old_image_webp" id="old_image_webp" value="{{ $coaching->image_webp ?? '' }}">
                     <input type="hidden" name="old_image_two" id="old_image_two" value="{{ $coaching->image_two ?? '' }}">
                     <input type="hidden" name="old_image_two_webp" id="old_image_two_webp" value="{{ $coaching->image_two_webp ?? '' }}">
                     @csrf
                     <div class="col-12 col-md-4"> 
                        <label class="form-label" for="type">Coaching Type</label> 
                        <select class="form-select select2" id="type" name="type">
                        <option value="Online"  {{ !empty($coaching) && $coaching->type === 'Online'  ? 'selected' : '' }}>Online</option>
                        <option value="Offline" {{ !empty($coaching) && $coaching->type === 'Offline' ? 'selected' : '' }}>Offline</option>
                        </select>
                     </div>
                     <div class="col-12 col-md-4">
                        <label for="display_name" class="form-label">Display Name</label>
                        <input class="form-control" type="text" id="display_name" name="display_name" value="{{ $coaching->display_name ?? '' }}" placeholder="Enter Display Name">
                     </div>
                     <div class="col-12 col-md-4">
                        <label for="heading" class="form-label">Heading</label>
                        <input class="form-control" type="text" id="heading" name="heading" value="{{ $coaching->heading ?? '' }}" placeholder="Enter Heading">
                     </div>
                     <div class="col-12">
                        <label for="short_description" class="form-label">Short Description</label>
                        <textarea class="form-control" id="short_description" name="short_description" rows="3" placeholder="Enter Short Description">{{ $coaching->short_description ?? '' }}</textarea>
                     </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">{{ $coaching->description ?? '' }}</textarea>
                     </div>
                     <div class="col-12 col-md-6">
                        <label for="program_heading" class="form-label">Program Heading</label>
                        <input class="form-control" type="text" id="program_heading" 
                           name="program_heading" 
                           value="{{ $coaching->program_heading ?? '' }}" 
                           placeholder="Enter Program Heading">
                     </div>
                     <!-- NEW FIELD: Class Heading -->
                     <div class="col-12 col-md-6 mt-3">
                        <label for="class_heading" class="form-label">Class Heading</label>
                        <input class="form-control" type="text" id="class_heading" 
                           name="class_heading" 
                           value="{{ $coaching->class_heading ?? '' }}" 
                           placeholder="Enter Class Heading">
                     </div>
                     <!-- NEW FIELD: Class Short Detail -->
                     <div class="col-12 col-md-12 mt-3">
                        <label for="class_short_detail" class="form-label">Class Short Detail</label>
                        <input class="form-control" type="text" id="class_short_detail" 
                           name="class_short_detail" 
                           value="{{ $coaching->class_short_detail ?? '' }}" 
                           placeholder="Enter Class Short Detail">
                     </div>
                     <div class="col-12 col-md-12">
                        <label for="program_short_description" class="form-label">Program Short Description</label>
                        <textarea class="form-control" id="program_short_description" 
                           name="program_short_description" rows="3"
                           placeholder="Enter Program Short Description">{{ $coaching->program_short_description ?? '' }}</textarea>
                     </div>
                     <!-- NEW FIELD: Class Short Description -->
                     <div class="col-12 col-md-12 mt-3">
                        <label for="class_short_description" class="form-label">Class Short Description</label>
                        <textarea class="form-control" id="class_short_description" 
                           name="class_short_description" rows="3"
                           placeholder="Enter Class Short Description">{{ $coaching->class_short_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">{{ $coaching->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">{{ $coaching->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">{{ $coaching->meta_description ?? '' }}</textarea>
                     </div>
                     <!-- Image -->
                     <div class="col-12 col-md-4">
                        <label for="image" class="form-label">Image 1</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($coaching?->image))
                           <a href="{{ asset($coaching->image) }}" target="_blank">
                           <img id="imagePreview" src="{{ asset($coaching->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 col-md-4">
                        <label for="image_two" class="form-label">Image 2</label>
                        <input class="form-control" type="file" name="image_two" id="image_two" accept=".jpg,.jpeg,.png" onchange="previewImage(this, 'imageTwoPreview')">
                        <div class="mt-2">
                           @if(!empty($coaching?->image_two))
                           <a href="{{ asset($coaching->image_two) }}" target="_blank">
                           <img id="imageTwoPreview" src="{{ asset($coaching->image_two) }}" alt="Image" class="img-thumbnail" style="max-height: 100px;">
                           </a>
                           @else
                           <img id="imageTwoPreview" class="img-thumbnail" style="display:none; max-height:100px;">
                           @endif
                        </div>
                     </div>
                     <hr>
                     <div class="col-12">
                        <label class="form-label">Overview</label>
                        <div id="overviewRepeater">
                           {{-- If editing & overview exists --}}
                           @if(!empty($coaching->overview) && is_array($coaching->overview))
                           @foreach($coaching->overview as $index => $overview)
                           <div class="overview-item border rounded p-3 mb-3">
                              <div class="row g-3">
                                 <div class="col-md-12">
                                    <input type="text" name="overview_heading[]" class="form-control"
                                       placeholder="Heading" value="{{ $overview['heading'] }}">
                                 </div>
                                 <div class="col-md-12 mt-2">
                                    <textarea name="overview_short_description[]" class="form-control"
                                       rows="2" placeholder="Short Description">{{ $overview['short_description'] }}</textarea>
                                 </div>
                                 <div class="col-md-12 mt-2 text-end">
                                    {{-- Add button only on first row --}}
                                    @if($index == 0)
                                    <button type="button" class="btn btn-success addOverview">
                                    <i class="fas fa-plus"></i>
                                    </button>
                                    @endif
                                    {{-- Remove only if more than 1 --}}
                                    @if(count($coaching->overview) > 1)
                                    <button type="button" class="btn btn-danger removeOverview">
                                    <i class="fas fa-minus"></i>
                                    </button>
                                    @endif
                                 </div>
                              </div>
                           </div>
                           @endforeach
                           @else
                           {{-- Default first row --}}
                           <div class="overview-item border rounded p-3 mb-3">
                              <div class="row g-3">
                                 <div class="col-md-12">
                                    <input type="text" name="overview_heading[]" class="form-control" placeholder="Heading">
                                 </div>
                                 <div class="col-md-12 mt-2">
                                    <textarea name="overview_short_description[]" class="form-control" rows="2"
                                       placeholder="Short Description"></textarea>
                                 </div>
                                 <div class="col-md-12 mt-2 text-end">
                                    <button type="button" class="btn btn-success addOverview">
                                    <i class="fas fa-plus"></i>
                                    </button>
                                 </div>
                              </div>
                           </div>
                           @endif
                        </div>
                     </div>
                     <hr>
                     <div class="col-12">
                        <label class="form-label">About Program</label>
                        <div id="aboutRepeater">
                           {{-- If edit & about_program exists --}}
                           @if(!empty($coaching->about_program) && is_array($coaching->about_program))
                           @foreach($coaching->about_program as $index => $about)
                           <div class="about-item border rounded p-3 mb-3">
                              <div class="row g-3">
                                 <div class="col-md-12">
                                    <input type="text" name="about_heading[]" class="form-control"
                                       placeholder="Heading" value="{{ $about['heading'] }}">
                                 </div>
                                 <div class="col-md-12 mt-2">
                                    <textarea name="about_short_description[]" class="form-control" rows="2"
                                       placeholder="Short Description">{{ $about['short_description'] }}</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 addAbout"><i class="fas fa-plus"></i></button>
                                    @endif
                                    {{-- Show Remove only if more than 1 row --}}
                                    @if(count($coaching->about_program) > 1)
                                    <button type="button" class="btn btn-danger removeAbout"><i class="fas fa-minus"></i></button>
                                    @endif
                                 </div>
                              </div>
                           </div>
                           @endforeach
                           @else
                           <div class="about-item border rounded p-3 mb-3">
                              <div class="row g-3">
                                 <div class="col-md-12">
                                    <input type="text" name="about_heading[]" class="form-control" placeholder="Heading">
                                 </div>
                                 <div class="col-md-12 mt-2">
                                    <textarea name="about_short_description[]" class="form-control" rows="2"
                                       placeholder="Short Description"></textarea>
                                 </div>
                                 <div class="col-md-12 mt-2 text-end">
                                    <button type="button" class="btn btn-success addAbout"><i class="fas fa-plus"></i></button>
                                 </div>
                              </div>
                           </div>
                           @endif
                        </div>
                     </div>
                     <hr>
                     <div class="col-12">
                        <label class="form-label">FAQs</label>
                        <div id="faqRepeater">
                           {{-- If edit & faqs exists --}}
                           @if(!empty($coaching->faqs) && is_array($coaching->faqs))
                           @foreach($coaching->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($coaching->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($coaching) && $coaching->status === 'Active' ? 'selected' : '' }}>Active</option>
                        <option value="Inactive" {{ !empty($coaching) && $coaching->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 Overview row
       $(document).on("click", ".addOverview", function () {
           let html = `
           <div class="overview-item border rounded p-3 mb-3">
               <div class="row g-3">
   
                   <div class="col-md-12">
                       <input type="text" name="overview_heading[]" class="form-control" placeholder="Heading">
                   </div>
   
                   <div class="col-md-12 mt-2">
                       <textarea name="overview_short_description[]" class="form-control" rows="2"
                           placeholder="Short Description"></textarea>
                   </div>
   
                   <div class="col-md-12 mt-2 text-end">
                       <button type="button" class="btn btn-danger removeOverview">
                           <i class="fas fa-minus"></i>
                       </button>
                   </div>
   
               </div>
           </div>`;
   
           $("#overviewRepeater").append(html);
       });
   
       // Remove Overview row
       $(document).on("click", ".removeOverview", function () {
           $(this).closest(".overview-item").remove();
       });
   
   });
</script>
<script>
   $(document).ready(function () {
   
       // Add new About Program row
       $(document).on("click", ".addAbout", function () {
           let html = `
           <div class="about-item border rounded p-3 mb-3">
               <div class="row g-3">
   
                   <div class="col-md-12">
                       <input type="text" name="about_heading[]" class="form-control" placeholder="Heading">
                   </div>
   
                   <div class="col-md-12 mt-2">
                       <textarea name="about_short_description[]" class="form-control" rows="2"
                           placeholder="Short Description"></textarea>
                   </div>
   
                   <div class="col-md-12 mt-2 text-end">
                       <button type="button" class="btn btn-danger removeAbout"><i class="fas fa-minus"></i></button>
                   </div>
               </div>
           </div>`;
           $("#aboutRepeater").append(html);
       });
   
       // Remove About Program row
       $(document).on("click", ".removeAbout", function () {
           $(this).closest(".about-item").remove();
       });
   
   });
</script>
<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(); // Only if using WYSIWYG editor like CKEditor/TinyMCE

        const formData = new FormData();

        // CSRF + ID
        formData.append('_token', $('input[name="_token"]').val());
        formData.append('id', $('#id').val());

        // Basic Fields
        formData.append('type', $('#type').val());
        formData.append('display_name', $('#display_name').val());
        formData.append('heading', $('#heading').val());
        formData.append('short_description', $('#short_description').val());
        formData.append('description', $('#description').val());
        formData.append('program_heading', $('#program_heading').val());

        // NEW ADDED FIELDS
        formData.append('class_heading', $('#class_heading').val());
        formData.append('class_short_detail', $('#class_short_detail').val());
        formData.append('class_short_description', $('#class_short_description').val());
        formData.append('program_short_description', $('#program_short_description').val());

        // Meta fields
        formData.append('meta_title', $('#meta_title').val());
        formData.append('meta_keyword', $('#meta_keyword').val());
        formData.append('meta_description', $('#meta_description').val());

        // Status
        formData.append('status', $('#status').val());

        // Old images
        formData.append('old_image', $('#old_image').val());
        formData.append('old_image_webp', $('#old_image_webp').val());
        formData.append('old_image_two', $('#old_image_two').val());
        formData.append('old_image_two_webp', $('#old_image_two_webp').val());

        // FAQ Repeater
        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));

        // Overview Repeater
        let overviewHeading = $("input[name='overview_heading[]']").map(function () { return $(this).val(); }).get();
        let overviewShortDesc = $("textarea[name='overview_short_description[]']").map(function () { return $(this).val(); }).get();
        formData.append('overview_heading', JSON.stringify(overviewHeading));
        formData.append('overview_short_description', JSON.stringify(overviewShortDesc));

        // About Program Repeater
        let aboutHeadings = $("input[name='about_heading[]']").map(function () { return $(this).val(); }).get();
        let aboutShortDesc = $("textarea[name='about_short_description[]']").map(function () { return $(this).val(); }).get();
        formData.append('about_heading', JSON.stringify(aboutHeadings));
        formData.append('about_short_description', JSON.stringify(aboutShortDesc));

        // Image 1
        let imageInput = $('#image')[0];
        if (imageInput.files.length > 0) {
            formData.append('image', imageInput.files[0]);
        }

        // Image 2
        let imageTwoInput = $('#image_two')[0];
        if (imageTwoInput.files.length > 0) {
            formData.append('image_two', imageTwoInput.files[0]);
        }

        $.ajax({
            url: '{{ route("coaching.save") }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function () {
                $('#submitBtn').prop('disabled', true).text('Processing...');
            },
            success: function (response) {
                toastr.success(response.message || 'Saved successfully!');
                if (response.success) {
                    setTimeout(() => location.reload(), 1000);
                }
            },
            error: function (xhr) {
                if (xhr.status === 422) {
                    let errors = xhr.responseJSON.errors;
                    $.each(errors, function (key, val) {
                        toastr.error(val[0]);
                    });
                } else {
                    toastr.error(xhr.responseJSON?.message || 'Something went wrong!');
                }
            },
            complete: function () {
                $('#submitBtn').prop('disabled', false).html('<i class="fas fa-save"></i> Save');
            }
        });

    });
});
</script>

@endpush