@extends('adminlte::page')

@section('title', 'Page Sections')

@section('content_header')
<h1 class="text-dark text-bold text-center my-2">{{ $service->name }} - Page Sections</h1>
@stop

@section('content')
<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Manage Page Sections</h3>
        </div>
        <div class="card-body">
          <form action="{{ route('admin.visa.save-all', $service->id) }}" method="POST" enctype="multipart/form-data">
            @csrf

            {{-- Add New Section Dropdown - Only show sections not yet added --}}
            @php
              $addedSections = $sections->pluck('section_name')->toArray();
              $availableSections = [
                // 'hero_banner' => 'Hero Banner',
                'why_choose' => 'Why Choose Us',
                'countries_table' => 'Countries Table',
                // 'how_to_apply' => 'How to Apply',
                'popular_destinations' => 'Popular Destinations',
                'pricing_card' => 'Pricing Card',
                'in_person_section' => 'In Person Section',  // ADD THIS
                'remote_section' => 'Remote Section',
                // 'faq' => 'FAQ Section',
                // 'cta_banner' => 'CTA Banner',
              ];
              $remainingSections = array_diff_key($availableSections, array_flip($addedSections));
            @endphp

            <div class="row mb-4">
              <div class="col-md-4">
                @if(count($remainingSections) > 0)
                  <div class="input-group">
                    <select class="form-control" id="new_section_type">
                      <option value="">-- Add New Section --</option>
                      @foreach($remainingSections as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                      @endforeach
                    </select>
                    <div class="input-group-append">
                      <button type="button" class="btn btn-success" onclick="addSection()">
                        <i class="fas fa-plus"></i> Add
                      </button>
                    </div>
                  </div>
                @else
                  <div class="alert alert-success mb-0 py-2">
                    <i class="fas fa-check-circle"></i> All sections have been added!
                  </div>
                @endif
              </div>
              <div class="col-md-8 text-right">
                <span class="text-muted">{{ count($addedSections) }} of {{ count($availableSections) }} sections
                  added</span>
              </div>
            </div>

            {{-- Sections Accordion --}}
            @if($sections->count() > 0)
              <div class="accordion" id="sectionsAccordion">
                @foreach($sections as $index => $section)
                  <div class="card" id="section-card-{{ $section->id }}">
                    <div class="card-header p-0">
                      <h2 class="mb-0 d-flex align-items-center">
                        <button class="btn btn-link btn-block text-left p-3 {{ $index > 0 ? 'collapsed' : '' }}"
                          type="button" data-toggle="collapse" data-target="#collapse-{{ $section->id }}">
                          <i class="fas fa-layer-group mr-2"></i>
                          <strong>{{ ucwords(str_replace('_', ' ', $section->section_name)) }}</strong>
                          <span class="badge {{ $section->is_active ? 'badge-success' : 'badge-secondary' }} ml-2"
                            id="badge-{{ $section->id }}">
                            {{ $section->is_active ? 'Active' : 'Inactive' }}
                          </span>
                        </button>
                        <div class="btn-group mr-3">
                          <button type="button"
                            class="btn btn-sm {{ $section->is_active ? 'btn-outline-warning' : 'btn-outline-success' }}"
                            id="toggle-btn-{{ $section->id }}" onclick="toggleActive({{ $section->id }})">
                            <i class="fas fa-{{ $section->is_active ? 'eye-slash' : 'eye' }}"
                              id="eye-icon-{{ $section->id }}"></i>
                          </button>
                          <button type="button" class="btn btn-sm btn-outline-danger"
                            onclick="deleteSection({{ $section->id }})">
                            <i class="fas fa-trash"></i>
                          </button>
                        </div>
                      </h2>
                    </div>
                    <div id="collapse-{{ $section->id }}" class="collapse {{ $index === 0 ? 'show' : '' }}"
                      data-parent="#sectionsAccordion">
                      <div class="card-body">
                        <input type="hidden" name="sections[{{ $section->id }}][id]" value="{{ $section->id }}">
                        <input type="hidden" name="sections[{{ $section->id }}][section_name]"
                          value="{{ $section->section_name }}">
                        <input type="hidden" name="sections[{{ $section->id }}][is_active]"
                          value="{{ $section->is_active ? '1' : '0' }}" id="is_active_{{ $section->id }}">

                        @php $content = $section->content ?? []; @endphp
                        @php $prefix = "sections[{$section->id}][content]"; @endphp

                        {{-- HERO BANNER --}}
                        @if($section->section_name == 'hero_banner')
                          <div class="row">
                            <div class="col-md-6">
                              <div class="form-group">
                                <label>Title <span class="text-danger">*</span></label>
                                <input type="text" name="{{ $prefix }}[title]" class="form-control"
                                  value="{{ $content['title'] ?? '' }}">
                              </div>
                            </div>
                            <div class="col-md-6">
                              <div class="form-group">
                                <label>Subtitle</label>
                                <input type="text" name="{{ $prefix }}[subtitle]" class="form-control"
                                  value="{{ $content['subtitle'] ?? '' }}">
                              </div>
                            </div>
                            <div class="col-md-12">
                              <div class="form-group">
                                <label>Description</label>
                                <textarea name="{{ $prefix }}[description]" class="form-control"
                                  rows="3">{{ $content['description'] ?? '' }}</textarea>
                              </div>
                            </div>
                            <div class="col-md-4">
                              <div class="form-group">
                                <label>Button Text</label>
                                <input type="text" name="{{ $prefix }}[cta_text]" class="form-control"
                                  value="{{ $content['cta_text'] ?? '' }}">
                              </div>
                            </div>
                            <div class="col-md-4">
                              <div class="form-group">
                                <label>Button Link</label>
                                <input type="text" name="{{ $prefix }}[cta_link]" class="form-control"
                                  value="{{ $content['cta_link'] ?? '' }}">
                              </div>
                            </div>
                            <div class="col-md-4">
                              <div class="form-group">
                                <label>Side Image</label>
                                @if(!empty($content['side_image']))
                                  <div class="mb-2"><img src="{{ asset('storage/' . $content['side_image']) }}"
                                      class="img-thumbnail" style="max-height:80px;"></div>
                                @endif
                                <input type="file" name="{{ $prefix }}[side_image]" class="form-control-file">
                              </div>
                            </div>
                          </div>

                          {{-- WHY CHOOSE US --}}
                        @elseif($section->section_name == 'why_choose')
                          <div class="row">
                            <div class="col-md-6">
                              <div class="form-group">
                                <label>Section Title</label>
                                <input type="text" name="{{ $prefix }}[section_title]" class="form-control"
                                  value="{{ $content['section_title'] ?? '' }}">
                              </div>
                            </div>
                            <div class="col-md-6">
                              <div class="form-group">
                                <label>Section Subtitle</label>
                                <input type="text" name="{{ $prefix }}[section_subtitle]" class="form-control"
                                  value="{{ $content['section_subtitle'] ?? '' }}">
                              </div>
                            </div>
                          </div>
                          <hr>
                          <label><strong>Features</strong></label>
                          <div id="features-{{ $section->id }}" class="repeater-container">
                            @php $features = $content['features'] ?? [['icon' => '', 'title' => '', 'description' => '']]; @endphp
                            @foreach($features as $i => $feature)
                              <div class="card card-outline card-primary mb-2 repeater-item feature-item">
                                <div class="card-body p-3">
                                  <div class="row">
                                    <div class="col-md-2">
                                      <div class="form-group mb-0">
                                        <label>Icon</label>
                                        <input type="text" name="{{ $prefix }}[features][{{ $i }}][icon]"
                                          class="form-control form-control-sm" value="{{ $feature['icon'] ?? '' }}">
                                      </div>
                                    </div>
                                    <div class="col-md-4">
                                      <div class="form-group mb-0">
                                        <label>Title</label>
                                        <input type="text" name="{{ $prefix }}[features][{{ $i }}][title]"
                                          class="form-control form-control-sm" value="{{ $feature['title'] ?? '' }}">
                                      </div>
                                    </div>
                                    <div class="col-md-5">
                                      <div class="form-group mb-0">
                                        <label>Description</label>
                                        <input type="text" name="{{ $prefix }}[features][{{ $i }}][description]"
                                          class="form-control form-control-sm" value="{{ $feature['description'] ?? '' }}">
                                      </div>
                                    </div>
                                    <div class="col-md-1 d-flex align-items-end">
                                      <button type="button" class="btn btn-sm btn-danger"
                                        onclick="removeRepeaterItem(this, '#features-{{ $section->id }}')">
                                        <i class="fas fa-times"></i>
                                      </button>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            @endforeach
                          </div>
                          <button type="button" class="btn btn-sm btn-outline-primary"
                            onclick="addFeature({{ $section->id }}, '{{ $prefix }}')">
                            <i class="fas fa-plus"></i> Add Feature
                          </button>

                          {{-- COUNTRIES TABLE (Simplified) --}}
                        @elseif($section->section_name == 'countries_table')
                          <div class="row">
                            <div class="col-md-6">
                              <div class="form-group">
                                <label>Section Title</label>
                                <input type="text" name="{{ $prefix }}[section_title]" class="form-control"
                                  value="{{ $content['section_title'] ?? '' }}">
                              </div>
                            </div>
                            <div class="col-md-6">
                              <div class="form-group">
                                <label>Section Subtitle</label>
                                <input type="text" name="{{ $prefix }}[section_subtitle]" class="form-control"
                                  value="{{ $content['section_subtitle'] ?? '' }}">
                              </div>
                            </div>
                          </div>
                          <hr>
                          <label><strong>Countries</strong></label>
                          <div id="countries-{{ $section->id }}" class="repeater-container">
                            @php $countries = $content['countries'] ?? [['name' => '', 'title' => '', 'subtitle' => '', 'link' => '']]; @endphp
                            @foreach($countries as $i => $country)
                              <div class="card card-outline card-info mb-2 repeater-item country-item">
                                <div class="card-body p-3">
                                  <div class="row">
                                    <div class="col-md-3">
                                      <div class="form-group mb-0">
                                        <label>Name</label>
                                        <input type="text" name="{{ $prefix }}[countries][{{ $i }}][name]"
                                          class="form-control form-control-sm" value="{{ $country['name'] ?? '' }}"
                                          placeholder="e.g., USA">
                                      </div>
                                    </div>
                                    <div class="col-md-3">
                                      <div class="form-group mb-0">
                                        <label>Title</label>
                                        <input type="text" name="{{ $prefix }}[countries][{{ $i }}][title]"
                                          class="form-control form-control-sm" value="{{ $country['title'] ?? '' }}"
                                          placeholder="e.g., USA e-Visa">
                                      </div>
                                    </div>
                                    <div class="col-md-3">
                                      <div class="form-group mb-0">
                                        <label>Subtitle</label>
                                        <input type="text" name="{{ $prefix }}[countries][{{ $i }}][subtitle]"
                                          class="form-control form-control-sm" value="{{ $country['subtitle'] ?? '' }}"
                                          placeholder="e.g., Fast Processing">
                                      </div>
                                    </div>
                                    <div class="col-md-2">
                                      <div class="form-group mb-0">
                                        <label>Link</label>
                                        <input type="text" name="{{ $prefix }}[countries][{{ $i }}][link]"
                                          class="form-control form-control-sm" value="{{ $country['link'] ?? '' }}"
                                          placeholder="/visa/usa">
                                      </div>
                                    </div>
                                    <div class="col-md-1 d-flex align-items-end">
                                      <button type="button" class="btn btn-sm btn-danger"
                                        onclick="removeRepeaterItem(this, '#countries-{{ $section->id }}')">
                                        <i class="fas fa-times"></i>
                                      </button>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            @endforeach
                          </div>
                          <button type="button" class="btn btn-sm btn-outline-info"
                            onclick="addCountry({{ $section->id }}, '{{ $prefix }}')">
                            <i class="fas fa-plus"></i> Add Country
                          </button>

                          {{-- HOW TO APPLY --}}
                        @elseif($section->section_name == 'how_to_apply')
                          <div class="row">
                            <div class="col-md-4">
                              <div class="form-group">
                                <label>Section Title</label>
                                <input type="text" name="{{ $prefix }}[section_title]" class="form-control"
                                  value="{{ $content['section_title'] ?? '' }}">
                              </div>
                            </div>
                            <div class="col-md-4">
                              <div class="form-group">
                                <label>Section Subtitle</label>
                                <input type="text" name="{{ $prefix }}[section_subtitle]" class="form-control"
                                  value="{{ $content['section_subtitle'] ?? '' }}">
                              </div>
                            </div>
                            <div class="col-md-4">
                              <div class="form-group">
                                <label>Side Image</label>
                                @if(!empty($content['side_image']))
                                  <div class="mb-1"><img src="{{ asset('storage/' . $content['side_image']) }}"
                                      class="img-thumbnail" style="max-height:50px;"></div>
                                @endif
                                <input type="file" name="{{ $prefix }}[side_image]" class="form-control-file">
                              </div>
                            </div>
                          </div>
                          <hr>
                          <label><strong>Steps</strong></label>
                          <div id="steps-{{ $section->id }}" class="repeater-container">
                            @php $steps = $content['steps'] ?? [['title' => '', 'description' => '']]; @endphp
                            @foreach($steps as $i => $step)
                              <div class="card card-outline card-success mb-2 repeater-item step-item">
                                <div class="card-body p-3">
                                  <div class="row">
                                    <div class="col-md-1">
                                      <div class="form-group mb-0">
                                        <label>Step</label>
                                        <input type="text" class="form-control form-control-sm step-number" value="{{ $i + 1 }}"
                                          readonly>
                                      </div>
                                    </div>
                                    <div class="col-md-4">
                                      <div class="form-group mb-0">
                                        <label>Title</label>
                                        <input type="text" name="{{ $prefix }}[steps][{{ $i }}][title]"
                                          class="form-control form-control-sm" value="{{ $step['title'] ?? '' }}">
                                      </div>
                                    </div>
                                    <div class="col-md-6">
                                      <div class="form-group mb-0">
                                        <label>Description</label>
                                        <input type="text" name="{{ $prefix }}[steps][{{ $i }}][description]"
                                          class="form-control form-control-sm" value="{{ $step['description'] ?? '' }}">
                                      </div>
                                    </div>
                                    <div class="col-md-1 d-flex align-items-end">
                                      <button type="button" class="btn btn-sm btn-danger"
                                        onclick="removeRepeaterItem(this, '#steps-{{ $section->id }}')">
                                        <i class="fas fa-times"></i>
                                      </button>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            @endforeach
                          </div>
                          <button type="button" class="btn btn-sm btn-outline-success"
                            onclick="addStep({{ $section->id }}, '{{ $prefix }}')">
                            <i class="fas fa-plus"></i> Add Step
                          </button>

                          {{-- POPULAR DESTINATIONS --}}
                        @elseif($section->section_name == 'popular_destinations')
                          <div class="row">
                            <div class="col-md-6">
                              <div class="form-group">
                                <label>Section Title</label>
                                <input type="text" name="{{ $prefix }}[section_title]" class="form-control"
                                  value="{{ $content['section_title'] ?? '' }}">
                              </div>
                            </div>
                            <div class="col-md-6">
                              <div class="form-group">
                                <label>Section Subtitle</label>
                                <input type="text" name="{{ $prefix }}[section_subtitle]" class="form-control"
                                  value="{{ $content['section_subtitle'] ?? '' }}">
                              </div>
                            </div>
                          </div>
                          <hr>
                          <label><strong>Destinations</strong></label>
                          <div id="destinations-{{ $section->id }}" class="repeater-container">
                            @php $destinations = $content['destinations'] ?? [['title' => '', 'subtitle' => '', 'link' => '', 'image' => '']]; @endphp
                            @foreach($destinations as $i => $dest)
                              <div class="card card-outline card-warning mb-2 repeater-item destination-item">
                                <div class="card-body p-3">
                                  <div class="row">
                                    <div class="col-md-3">
                                      <div class="form-group mb-0">
                                        <label>Title</label>
                                        <input type="text" name="{{ $prefix }}[destinations][{{ $i }}][title]"
                                          class="form-control form-control-sm" value="{{ $dest['title'] ?? '' }}"
                                          placeholder="e.g., Thailand">
                                      </div>
                                    </div>
                                    <div class="col-md-3">
                                      <div class="form-group mb-0">
                                        <label>Subtitle</label>
                                        <input type="text" name="{{ $prefix }}[destinations][{{ $i }}][subtitle]"
                                          class="form-control form-control-sm" value="{{ $dest['subtitle'] ?? '' }}"
                                          placeholder="e.g., Tourist Visa from $49">
                                      </div>
                                    </div>
                                    <div class="col-md-3">
                                      <div class="form-group mb-0">
                                        <label>Link</label>
                                        <input type="text" name="{{ $prefix }}[destinations][{{ $i }}][link]"
                                          class="form-control form-control-sm" value="{{ $dest['link'] ?? '' }}"
                                          placeholder="/visa/thailand">
                                      </div>
                                    </div>
                                    <div class="col-md-3">
                                      <div class="form-group mb-0">
                                        <label>Price</label>
                                        <input type="text" name="{{ $prefix }}[destinations][{{ $i }}][price]"
                                          class="form-control form-control-sm" value="{{ $dest['price'] ?? '' }}"
                                          placeholder="$50">
                                      </div>
                                    </div>
                                    <div class="col-md-2">
                                      <div class="form-group mb-0">
                                        <label>Image</label>
                                        @if(!empty($dest['image']))
                                          <div><img src="{{'https://visament.com/' . $dest['image'] }}" style="max-height:20px;"
                                              class="mb-1"></div>
                                        @endif
                                        <input type="file" name="{{ $prefix }}[destinations][{{ $i }}][image]"
                                          class="form-control-file form-control-sm">
                                      </div>
                                    </div>
                                    <div class="col-md-1 d-flex align-items-end">
                                      <button type="button" class="btn btn-sm btn-danger"
                                        onclick="removeRepeaterItem(this, '#destinations-{{ $section->id }}')">
                                        <i class="fas fa-times"></i>
                                      </button>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            @endforeach
                          </div>
                          <button type="button" class="btn btn-sm btn-outline-warning"
                            onclick="addDestination({{ $section->id }}, '{{ $prefix }}')">
                            <i class="fas fa-plus"></i> Add Destination
                          </button>

                          {{-- PRICING CARD (New Section) --}}
                        @elseif($section->section_name == 'pricing_card')
                          <div class="row">
                            <div class="col-md-6">
                              <div class="form-group">
                                <label>Section Title</label>
                                <input type="text" name="{{ $prefix }}[section_title]" class="form-control"
                                  value="{{ $content['section_title'] ?? '' }}" placeholder="e.g., Choose Your Visa">
                              </div>
                            </div>
                            <div class="col-md-6">
                              <div class="form-group">
                                <label>Section Subtitle</label>
                                <input type="text" name="{{ $prefix }}[section_subtitle]" class="form-control"
                                  value="{{ $content['section_subtitle'] ?? '' }}"
                                  placeholder="e.g., Select the best option for your travel">
                              </div>
                            </div>
                          </div>
                          <hr>
                          <div class="row">
                            <div class="col-md-3">
                              <div class="form-group">
                                <label>Price</label>
                                <input type="text" name="{{ $prefix }}[price]" class="form-control"
                                  value="{{ $content['price'] ?? '' }}" placeholder="e.g., $91">
                              </div>
                            </div>
                          </div>
                          <hr>
                          <label><strong>Features (Title & Value)</strong></label>
                          <div id="pricing-features-{{ $section->id }}" class="repeater-container">
                            @php $pricingFeatures = $content['pricing_features'] ?? [['title' => '', 'value' => '']]; @endphp
                            @foreach($pricingFeatures as $i => $pf)
                              <div class="card card-outline card-primary mb-2 repeater-item pricing-feature-item">
                                <div class="card-body p-3">
                                  <div class="row">
                                    <div class="col-md-5">
                                      <div class="form-group mb-0">
                                        <label>Title</label>
                                        <input type="text" name="{{ $prefix }}[pricing_features][{{ $i }}][title]"
                                          class="form-control form-control-sm" value="{{ $pf['title'] ?? '' }}"
                                          placeholder="e.g., Entries">
                                      </div>
                                    </div>
                                    <div class="col-md-6">
                                      <div class="form-group mb-0">
                                        <label>Value</label>
                                        <input type="text" name="{{ $prefix }}[pricing_features][{{ $i }}][value]"
                                          class="form-control form-control-sm" value="{{ $pf['value'] ?? '' }}"
                                          placeholder="e.g., Multiple">
                                      </div>
                                    </div>
                                    <div class="col-md-1 d-flex align-items-end">
                                      <button type="button" class="btn btn-sm btn-danger"
                                        onclick="removeRepeaterItem(this, '#pricing-features-{{ $section->id }}')">
                                        <i class="fas fa-times"></i>
                                      </button>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            @endforeach
                          </div>
                          <button type="button" class="btn btn-sm btn-outline-primary mb-3"
                            onclick="addPricingFeature({{ $section->id }}, '{{ $prefix }}')">
                            <i class="fas fa-plus"></i> Add Feature
                          </button>
                          <hr>
                          <div class="row">
                            <div class="col-md-6">
                              <div class="form-group">
                                <label>Button Text</label>
                                <input type="text" name="{{ $prefix }}[button_text]" class="form-control"
                                  value="{{ $content['button_text'] ?? '' }}" placeholder="e.g., Start Application →">
                              </div>
                            </div>
                            <div class="col-md-6">
                              <div class="form-group">
                                <label>Button Link</label>
                                <input type="text" name="{{ $prefix }}[button_link]" class="form-control"
                                  value="{{ $content['button_link'] ?? '' }}" placeholder="/apply">
                              </div>
                            </div>
                          </div>

                          {{-- FAQ --}}
                        @elseif($section->section_name == 'faq')
                          <div class="row">
                            <div class="col-md-6">
                              <div class="form-group">
                                <label>Section Title</label>
                                <input type="text" name="{{ $prefix }}[section_title]" class="form-control"
                                  value="{{ $content['section_title'] ?? '' }}">
                              </div>
                            </div>
                            <div class="col-md-6">
                              <div class="form-group">
                                <label>Section Subtitle</label>
                                <input type="text" name="{{ $prefix }}[section_subtitle]" class="form-control"
                                  value="{{ $content['section_subtitle'] ?? '' }}">
                              </div>
                            </div>
                          </div>
                          <hr>
                          <label><strong>FAQs</strong></label>
                          <div id="faqs-{{ $section->id }}" class="repeater-container">
                            @php $faqs = $content['faqs'] ?? [['question' => '', 'answer' => '']]; @endphp
                            @foreach($faqs as $i => $faq)
                              <div class="card card-outline card-secondary mb-2 repeater-item faq-item">
                                <div class="card-body p-3">
                                  <div class="row">
                                    <div class="col-md-5">
                                      <div class="form-group mb-0">
                                        <label>Question</label>
                                        <input type="text" name="{{ $prefix }}[faqs][{{ $i }}][question]"
                                          class="form-control form-control-sm" value="{{ $faq['question'] ?? '' }}">
                                      </div>
                                    </div>
                                    <div class="col-md-6">
                                      <div class="form-group mb-0">
                                        <label>Answer</label>
                                        <textarea name="{{ $prefix }}[faqs][{{ $i }}][answer]"
                                          class="form-control form-control-sm" rows="2">{{ $faq['answer'] ?? '' }}</textarea>
                                      </div>
                                    </div>
                                    <div class="col-md-1 d-flex align-items-end">
                                      <button type="button" class="btn btn-sm btn-danger"
                                        onclick="removeRepeaterItem(this, '#faqs-{{ $section->id }}')">
                                        <i class="fas fa-times"></i>
                                      </button>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            @endforeach
                          </div>
                          <button type="button" class="btn btn-sm btn-outline-secondary"
                            onclick="addFaq({{ $section->id }}, '{{ $prefix }}')">
                            <i class="fas fa-plus"></i> Add FAQ
                          </button>

                          {{-- CTA BANNER --}}
                        @elseif($section->section_name == 'cta_banner')
                          <div class="row">
                            <div class="col-md-6">
                              <div class="form-group">
                                <label>Title</label>
                                <input type="text" name="{{ $prefix }}[title]" class="form-control"
                                  value="{{ $content['title'] ?? '' }}">
                              </div>
                            </div>
                            <div class="col-md-6">
                              <div class="form-group">
                                <label>Description</label>
                                <input type="text" name="{{ $prefix }}[description]" class="form-control"
                                  value="{{ $content['description'] ?? '' }}">
                              </div>
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                                <label>Button Text</label>
                                <input type="text" name="{{ $prefix }}[button_text]" class="form-control"
                                  value="{{ $content['button_text'] ?? '' }}">
                              </div>
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                                <label>Button Link</label>
                                <input type="text" name="{{ $prefix }}[button_link]" class="form-control"
                                  value="{{ $content['button_link'] ?? '' }}">
                              </div>
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                                <label>Background Color</label>
                                <input type="color" name="{{ $prefix }}[bg_color]" class="form-control"
                                  value="{{ $content['bg_color'] ?? '#1E40AF' }}" style="height:38px;">
                              </div>
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                                <label>Text Color</label>
                                <input type="color" name="{{ $prefix }}[text_color]" class="form-control"
                                  value="{{ $content['text_color'] ?? '#FFFFFF' }}" style="height:38px;">
                              </div>
                            </div>
                          </div>
                          {{-- IN PERSON SECTION --}}
                        @elseif($section->section_name == 'in_person_section')
                          <div class="row">
                            <div class="col-md-6">
                              <div class="form-group">
                                <label>Section Title</label>
                                <input type="text" name="{{ $prefix }}[section_title]" class="form-control"
                                  value="{{ $content['section_title'] ?? '' }}">
                              </div>
                            </div>
                            <div class="col-md-6">
                              <div class="form-group">
                                <label>Section Subtitle</label>
                                <input type="text" name="{{ $prefix }}[section_subtitle]" class="form-control"
                                  value="{{ $content['section_subtitle'] ?? '' }}">
                              </div>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-4">
                              <div class="form-group">
                                <label>Address</label>
                                <input type="text" name="{{ $prefix }}[address]" class="form-control"
                                  value="{{ $content['address'] ?? '' }}">
                              </div>
                            </div>
                            <div class="col-md-4">
                              <div class="form-group">
                                <label>Get Direction Link</label>
                                <input type="text" name="{{ $prefix }}[direction_link]" class="form-control"
                                  value="{{ $content['direction_link'] ?? '' }}">
                              </div>
                            </div>
                            <div class="col-md-4">
                              <div class="form-group">
                                <label>Download Form Link</label>
                                <input type="text" name="{{ $prefix }}[download_form_link]" class="form-control"
                                  value="{{ $content['download_form_link'] ?? '' }}">
                              </div>
                            </div>
                          </div>
                          <hr>
                          <label><strong>In Person Steps</strong></label>
                          <div id="in_person-{{ $section->id }}" class="repeater-container">
                            @php $inPersonItems = $content['in_person'] ?? [['title' => '', 'subtitle' => '']]; @endphp
                            @foreach($inPersonItems as $i => $item)
                              <div class="card card-outline card-info mb-2 repeater-item in_person-item">
                                <div class="card-body p-3">
                                  <div class="row">
                                    <div class="col-md-4">
                                      <div class="form-group mb-0">
                                        <label>Title</label>
                                        <input type="text" name="{{ $prefix }}[in_person][{{ $i }}][title]"
                                          class="form-control form-control-sm" value="{{ $item['title'] ?? '' }}"
                                          placeholder="e.g., Prepare your Documents">
                                      </div>
                                    </div>
                                    <div class="col-md-6">
                                      <div class="form-group mb-0">
                                        <label>Subtitle</label>
                                        <input type="text" name="{{ $prefix }}[in_person][{{ $i }}][subtitle]"
                                          class="form-control form-control-sm" value="{{ $item['subtitle'] ?? '' }}"
                                          placeholder="e.g., Gather all documents...">
                                      </div>
                                    </div>
                                    <div class="col-md-1 d-flex align-items-end">
                                      <button type="button" class="btn btn-sm btn-danger"
                                        onclick="removeRepeaterItem(this, '#in_person-{{ $section->id }}')">
                                        <i class="fas fa-times"></i>
                                      </button>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            @endforeach
                          </div>
                          <button type="button" class="btn btn-sm btn-outline-info"
                            onclick="addInPerson({{ $section->id }}, '{{ $prefix }}')">
                            <i class="fas fa-plus"></i> Add In-Person Step
                          </button>

                          {{-- REMOTE SECTION --}}
                        @elseif($section->section_name == 'remote_section')
                          <div class="row">
                            <div class="col-md-6">
                              <div class="form-group">
                                <label>Section Title</label>
                                <input type="text" name="{{ $prefix }}[section_title]" class="form-control"
                                  value="{{ $content['section_title'] ?? '' }}">
                              </div>
                            </div>
                            <div class="col-md-6">
                              <div class="form-group">
                                <label>Section Subtitle</label>
                                <input type="text" name="{{ $prefix }}[section_subtitle]" class="form-control"
                                  value="{{ $content['section_subtitle'] ?? '' }}">
                              </div>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-4">
                              <div class="form-group">
                                <label>Address</label>
                                <input type="text" name="{{ $prefix }}[address]" class="form-control"
                                  value="{{ $content['address'] ?? '' }}">
                              </div>
                            </div>
                            <div class="col-md-4">
                              <div class="form-group">
                                <label>Mail Link</label>
                                <input type="text" name="{{ $prefix }}[mail_link]" class="form-control"
                                  value="{{ $content['mail_link'] ?? '' }}">
                              </div>
                            </div>
                            <div class="col-md-4">
                              <div class="form-group">
                                <label>Download Form Link</label>
                                <input type="text" name="{{ $prefix }}[download_form_link]" class="form-control"
                                  value="{{ $content['download_form_link'] ?? '' }}">
                              </div>
                            </div>
                          </div>
                          <hr>
                          <label><strong>Remote Steps</strong></label>
                          <div id="remote-{{ $section->id }}" class="repeater-container">
                            @php $remoteItems = $content['remote'] ?? [['title' => '', 'subtitle' => '']]; @endphp
                            @foreach($remoteItems as $i => $item)
                              <div class="card card-outline card-info mb-2 repeater-item remote-item">
                                <div class="card-body p-3">
                                  <div class="row">
                                    <div class="col-md-4">
                                      <div class="form-group mb-0">
                                        <label>Title</label>
                                        <input type="text" name="{{ $prefix }}[remote][{{ $i }}][title]"
                                          class="form-control form-control-sm" value="{{ $item['title'] ?? '' }}"
                                          placeholder="e.g., Prepare your Documents">
                                      </div>
                                    </div>
                                    <div class="col-md-6">
                                      <div class="form-group mb-0">
                                        <label>Subtitle</label>
                                        <input type="text" name="{{ $prefix }}[remote][{{ $i }}][subtitle]"
                                          class="form-control form-control-sm" value="{{ $item['subtitle'] ?? '' }}"
                                          placeholder="e.g., Collect all documents...">
                                      </div>
                                    </div>
                                    <div class="col-md-1 d-flex align-items-end">
                                      <button type="button" class="btn btn-sm btn-danger"
                                        onclick="removeRepeaterItem(this, '#remote-{{ $section->id }}')">
                                        <i class="fas fa-times"></i>
                                      </button>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            @endforeach
                          </div>
                          <button type="button" class="btn btn-sm btn-outline-info"
                            onclick="addRemote({{ $section->id }}, '{{ $prefix }}')">
                            <i class="fas fa-plus"></i> Add Remote Step
                          </button>
                        @endif

                      </div>
                    </div>
                  </div>
                @endforeach
              </div>

              <div class="mt-4">
                <button type="submit" class="btn btn-primary btn-lg">
                  <i class="fas fa-save"></i> Save All Changes
                </button>
              </div>
            @else
              <div class="alert alert-info text-center">
                <i class="fas fa-info-circle"></i> No sections added yet. Use the dropdown above to add sections.
              </div>
            @endif
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

{{-- Delete Form --}}
<form id="delete-form" method="POST" style="display:none;">
  @csrf
  @method('DELETE')
</form>

{{-- Add Section Form --}}
<form id="add-section-form" method="POST" action="{{ route('admin.visa.store', $service->id) }}" style="display:none;">
  @csrf
  <input type="hidden" name="section_name" id="add-section-name">
</form>
@stop

@section('js')
<script>
  const serviceId = {{ $service->id }};

  function addSection() {
    const select = document.getElementById('new_section_type');
    const type = select.value;
    if (!type) {
      alert('Please select a section type');
      return;
    }
    document.getElementById('add-section-name').value = type;
    document.getElementById('add-section-form').submit();
  }

  function toggleActive(sectionId) {
    const input = document.getElementById('is_active_' + sectionId);
    const badge = document.getElementById('badge-' + sectionId);
    const toggleBtn = document.getElementById('toggle-btn-' + sectionId);
    const eyeIcon = document.getElementById('eye-icon-' + sectionId);

    if (input.value === '1') {
      input.value = '0';
      badge.className = 'badge badge-secondary ml-2';
      badge.textContent = 'Inactive';
      toggleBtn.className = 'btn btn-sm btn-outline-success';
      eyeIcon.className = 'fas fa-eye';
    } else {
      input.value = '1';
      badge.className = 'badge badge-success ml-2';
      badge.textContent = 'Active';
      toggleBtn.className = 'btn btn-sm btn-outline-warning';
      eyeIcon.className = 'fas fa-eye-slash';
    }
  }

  function deleteSection(sectionId) {
    if (confirm('Are you sure you want to delete this section?')) {
      const form = document.getElementById('delete-form');
      form.action = '{{ url("admin/services/visa/sections") }}/' + serviceId + '/destroy/' + sectionId;
      form.submit();
    }
  }

  // Generic remove repeater item with minimum 1 check
  function removeRepeaterItem(btn, containerId) {
    const container = document.querySelector(containerId);
    const items = container.querySelectorAll('.repeater-item');
    if (items.length > 1) {
      btn.closest('.repeater-item').remove();
      reindexSteps(containerId);
    } else {
      alert('You must have at least one item.');
    }
  }

  // Reindex step numbers
  function reindexSteps(containerId) {
    const container = document.querySelector(containerId);
    if (!container) return;
    const stepNumbers = container.querySelectorAll('.step-number');
    stepNumbers.forEach((input, index) => {
      input.value = index + 1;
    });
  }

  function addFeature(sectionId, prefix) {
    const container = document.getElementById('features-' + sectionId);
    const index = container.querySelectorAll('.feature-item').length;
    const html = `
        <div class="card card-outline card-primary mb-2 repeater-item feature-item">
            <div class="card-body p-3">
                <div class="row">
                    <div class="col-md-2">
                        <div class="form-group mb-0">
                            <label>Icon</label>
                            <input type="text" name="${prefix}[features][${index}][icon]" class="form-control form-control-sm">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group mb-0">
                            <label>Title</label>
                            <input type="text" name="${prefix}[features][${index}][title]" class="form-control form-control-sm">
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="form-group mb-0">
                            <label>Description</label>
                            <input type="text" name="${prefix}[features][${index}][description]" class="form-control form-control-sm">
                        </div>
                    </div>
                    <div class="col-md-1 d-flex align-items-end">
                        <button type="button" class="btn btn-sm btn-danger" onclick="removeRepeaterItem(this, '#features-${sectionId}')">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
    container.insertAdjacentHTML('beforeend', html);
  }

  function addCountry(sectionId, prefix) {
    const container = document.getElementById('countries-' + sectionId);
    const index = container.querySelectorAll('.country-item').length;
    const html = `
        <div class="card card-outline card-info mb-2 repeater-item country-item">
            <div class="card-body p-3">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group mb-0">
                            <label>Name</label>
                            <input type="text" name="${prefix}[countries][${index}][name]" class="form-control form-control-sm" placeholder="e.g., USA">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group mb-0">
                            <label>Title</label>
                            <input type="text" name="${prefix}[countries][${index}][title]" class="form-control form-control-sm" placeholder="e.g., USA e-Visa">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group mb-0">
                            <label>Subtitle</label>
                            <input type="text" name="${prefix}[countries][${index}][subtitle]" class="form-control form-control-sm" placeholder="e.g., Fast Processing">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group mb-0">
                            <label>Link</label>
                            <input type="text" name="${prefix}[countries][${index}][link]" class="form-control form-control-sm" placeholder="/visa/usa">
                        </div>
                    </div>
                    <div class="col-md-1 d-flex align-items-end">
                        <button type="button" class="btn btn-sm btn-danger" onclick="removeRepeaterItem(this, '#countries-${sectionId}')">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
    container.insertAdjacentHTML('beforeend', html);
  }

  function addStep(sectionId, prefix) {
    const container = document.getElementById('steps-' + sectionId);
    const index = container.querySelectorAll('.step-item').length;
    const html = `
        <div class="card card-outline card-success mb-2 repeater-item step-item">
            <div class="card-body p-3">
                <div class="row">
                    <div class="col-md-1"><div class="form-group mb-0"><label>Step</label><input type="text" class="form-control form-control-sm step-number" value="${index + 1}" readonly></div></div>
                    <div class="col-md-4"><div class="form-group mb-0"><label>Title</label><input type="text" name="${prefix}[steps][${index}][title]" class="form-control form-control-sm"></div></div>
                    <div class="col-md-6"><div class="form-group mb-0"><label>Description</label><input type="text" name="${prefix}[steps][${index}][description]" class="form-control form-control-sm"></div></div>
                    <div class="col-md-1 d-flex align-items-end"><button type="button" class="btn btn-sm btn-danger" onclick="removeRepeaterItem(this, '#steps-${sectionId}')"><i class="fas fa-times"></i></button></div>
                </div>
            </div>
        </div>
    `;
    container.insertAdjacentHTML('beforeend', html);
  }

  function addDestination(sectionId, prefix) {
    const container = document.getElementById('destinations-' + sectionId);
    const index = container.querySelectorAll('.destination-item').length;
    const html = `
        <div class="card card-outline card-warning mb-2 repeater-item destination-item">
            <div class="card-body p-3">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group mb-0">
                            <label>Title</label>
                            <input type="text" name="${prefix}[destinations][${index}][title]" class="form-control form-control-sm" placeholder="e.g., Thailand">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group mb-0">
                            <label>Subtitle</label>
                            <input type="text" name="${prefix}[destinations][${index}][subtitle]" class="form-control form-control-sm" placeholder="e.g., Tourist Visa from $49">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group mb-0">
                            <label>Link</label>
                            <input type="text" name="${prefix}[destinations][${index}][link]" class="form-control form-control-sm" placeholder="/visa/thailand">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group mb-0">
                            <label>Price</label>
                            <input type="text" name="${prefix}[destinations][${index}][price]" class="form-control form-control-sm" placeholder="$50">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group mb-0">
                            <label>Image</label>
                            <input type="file" name="${prefix}[destinations][${index}][image]" class="form-control-file form-control-sm">
                        </div>
                    </div>
                    <div class="col-md-1 d-flex align-items-end">
                        <button type="button" class="btn btn-sm btn-danger" onclick="removeRepeaterItem(this, '#destinations-${sectionId}')">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
    container.insertAdjacentHTML('beforeend', html);
  }

  function addPricingFeature(sectionId, prefix) {
    const container = document.getElementById('pricing-features-' + sectionId);
    const index = container.querySelectorAll('.pricing-feature-item').length;
    const html = `
        <div class="card card-outline card-primary mb-2 repeater-item pricing-feature-item">
            <div class="card-body p-3">
                <div class="row">
                    <div class="col-md-5">
                        <div class="form-group mb-0">
                            <label>Title</label>
                            <input type="text" name="${prefix}[pricing_features][${index}][title]" class="form-control form-control-sm" placeholder="e.g., Entries">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group mb-0">
                            <label>Value</label>
                            <input type="text" name="${prefix}[pricing_features][${index}][value]" class="form-control form-control-sm" placeholder="e.g., Multiple">
                        </div>
                    </div>
                    <div class="col-md-1 d-flex align-items-end">
                        <button type="button" class="btn btn-sm btn-danger" onclick="removeRepeaterItem(this, '#pricing-features-${sectionId}')">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
    container.insertAdjacentHTML('beforeend', html);
  }

  function addInPerson(sectionId, prefix) {
    const container = document.getElementById('in_person-' + sectionId);
    const index = container.querySelectorAll('.in_person-item').length;
    const html = `
        <div class="card card-outline card-info mb-2 repeater-item in_person-item">
            <div class="card-body p-3">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group mb-0">
                            <label>Title</label>
                            <input type="text" name="${prefix}[in_person][${index}][title]" class="form-control form-control-sm" placeholder="e.g., Prepare your Documents">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group mb-0">
                            <label>Subtitle</label>
                            <input type="text" name="${prefix}[in_person][${index}][subtitle]" class="form-control form-control-sm" placeholder="e.g., Gather all documents...">
                        </div>
                    </div>
                    <div class="col-md-1 d-flex align-items-end">
                        <button type="button" class="btn btn-sm btn-danger" onclick="removeRepeaterItem(this, '#in_person-${sectionId}')">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
    container.insertAdjacentHTML('beforeend', html);
}

function addRemote(sectionId, prefix) {
    const container = document.getElementById('remote-' + sectionId);
    const index = container.querySelectorAll('.remote-item').length;
    const html = `
        <div class="card card-outline card-info mb-2 repeater-item remote-item">
            <div class="card-body p-3">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group mb-0">
                            <label>Title</label>
                            <input type="text" name="${prefix}[remote][${index}][title]" class="form-control form-control-sm" placeholder="e.g., Prepare your Documents">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group mb-0">
                            <label>Subtitle</label>
                            <input type="text" name="${prefix}[remote][${index}][subtitle]" class="form-control form-control-sm" placeholder="e.g., Collect all documents...">
                        </div>
                    </div>
                    <div class="col-md-1 d-flex align-items-end">
                        <button type="button" class="btn btn-sm btn-danger" onclick="removeRepeaterItem(this, '#remote-${sectionId}')">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
    container.insertAdjacentHTML('beforeend', html);
}

  function addFaq(sectionId, prefix) {
    const container = document.getElementById('faqs-' + sectionId);
    const index = container.querySelectorAll('.faq-item').length;
    const html = `
        <div class="card card-outline card-secondary mb-2 repeater-item faq-item">
            <div class="card-body p-3">
                <div class="row">
                    <div class="col-md-5"><div class="form-group mb-0"><label>Question</label><input type="text" name="${prefix}[faqs][${index}][question]" class="form-control form-control-sm"></div></div>
                    <div class="col-md-6"><div class="form-group mb-0"><label>Answer</label><textarea name="${prefix}[faqs][${index}][answer]" class="form-control form-control-sm" rows="2"></textarea></div></div>
                    <div class="col-md-1 d-flex align-items-end"><button type="button" class="btn btn-sm btn-danger" onclick="removeRepeaterItem(this, '#faqs-${sectionId}')"><i class="fas fa-times"></i></button></div>
                </div>
            </div>
        </div>
    `;
    container.insertAdjacentHTML('beforeend', html);
  }
</script>
@stop