@extends('admin.layouts.admin')

@section('title', 'Settings - SIVILIMA Admin')
@section('breadcrumb_title', 'Site Settings')
@section('breadcrumb')
  <li class="breadcrumb-item active" aria-current="page">Settings</li>
@endsection

@section('content')
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
  {{ session('success') }}
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<form method="POST" action="{{ route('admin.settings.update') }}">
  @csrf

  @foreach($settings as $group => $items)
    @if($group === 'seo') @continue @endif
    @php $items = $items->filter(fn($s) => $s->type !== 'json'); @endphp
    @if($items->isNotEmpty())
    <div class="card mb-3">
      <div class="card-header">
        <h6 class="mb-0 text-capitalize">{{ $group }} Settings</h6>
      </div>
      <div class="card-body">
        <div class="row g-3">
          @foreach($items as $setting)
          <div class="col-12">
            <label class="form-label">{{ $setting->label ?? $setting->key }}</label>
            @if($setting->type === 'textarea')
            <textarea class="form-control" name="settings[{{ $setting->key }}]" rows="3">{{ old("settings.{$setting->key}", $setting->value) }}</textarea>
            @else
            <input type="text" class="form-control" name="settings[{{ $setting->key }}]" value="{{ old("settings.{$setting->key}", $setting->value) }}">
            @endif
          </div>
          @endforeach
        </div>
      </div>
    </div>
    @endif
  @endforeach

  {{-- Home Stats Editor --}}
  @php
    $jsonItems = \App\Models\SiteSetting::where('type', 'json')->get()->keyBy('key');
    $stats = json_decode($jsonItems->get('home_stats')?->value ?? '[]', true);
    $features = json_decode($jsonItems->get('home_features')?->value ?? '[]', true);
  @endphp

  <div class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h6 class="mb-0">Home Page - Stats</h6>
      <button type="button" class="btn btn-sm btn-primary add-stat-row">+ Add Stat</button>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-bordered" id="stats-table">
          <thead>
            <tr><th>Number</th><th>Label</th><th width="80"></th></tr>
          </thead>
          <tbody>
            @foreach($stats as $i => $stat)
            <tr>
              <td><input type="text" name="stats[{{ $i }}][number]" class="form-control" value="{{ $stat['number'] }}"></td>
              <td><input type="text" name="stats[{{ $i }}][label]" class="form-control" value="{{ $stat['label'] }}"></td>
              <td><button type="button" class="btn btn-sm btn-outline-danger remove-row"><i class="bi bi-x-lg"></i></button></td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h6 class="mb-0">Home Page - Features</h6>
      <button type="button" class="btn btn-sm btn-primary add-feat-row">+ Add Feature</button>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-bordered" id="features-table">
          <thead>
            <tr><th>Title</th><th>Description</th><th width="80"></th></tr>
          </thead>
          <tbody>
            @foreach($features as $i => $feat)
            <tr>
              <td><input type="text" name="features[{{ $i }}][title]" class="form-control" value="{{ $feat['title'] }}"></td>
              <td><input type="text" name="features[{{ $i }}][desc]" class="form-control" value="{{ $feat['desc'] }}"></td>
              <td><button type="button" class="btn btn-sm btn-outline-danger remove-row"><i class="bi bi-x-lg"></i></button></td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>

  {{-- About Page - Core Values --}}
  @php $aboutValues = json_decode($jsonItems->get('about_values')?->value ?? '[]', true); @endphp
  <div class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h6 class="mb-0">About Page - Core Values</h6>
      <button type="button" class="btn btn-sm btn-primary add-about-value-row">+ Add Value</button>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-bordered" id="about-values-table">
          <thead>
            <tr><th>Title</th><th>Description</th><th width="80"></th></tr>
          </thead>
          <tbody>
            @foreach($aboutValues as $i => $val)
            <tr>
              <td><input type="text" name="about_values[{{ $i }}][title]" class="form-control" value="{{ $val['title'] }}"></td>
              <td><input type="text" name="about_values[{{ $i }}][desc]" class="form-control" value="{{ $val['desc'] }}"></td>
              <td><button type="button" class="btn btn-sm btn-outline-danger remove-row"><i class="bi bi-x-lg"></i></button></td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>

  {{-- About Page - Timeline Milestones --}}
  @php $milestones = json_decode($jsonItems->get('about_milestones')?->value ?? '[]', true); @endphp
  <div class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h6 class="mb-0">About Page - Timeline Milestones</h6>
      <button type="button" class="btn btn-sm btn-primary add-milestone-row">+ Add Milestone</button>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-bordered" id="milestones-table">
          <thead>
            <tr><th width="120">Year</th><th>Title</th><th>Description</th><th width="80"></th></tr>
          </thead>
          <tbody>
            @foreach($milestones as $i => $m)
            <tr>
              <td><input type="text" name="milestones[{{ $i }}][year]" class="form-control" value="{{ $m['year'] }}"></td>
              <td><input type="text" name="milestones[{{ $i }}][title]" class="form-control" value="{{ $m['title'] }}"></td>
              <td><input type="text" name="milestones[{{ $i }}][desc]" class="form-control" value="{{ $m['desc'] }}"></td>
              <td><button type="button" class="btn btn-sm btn-outline-danger remove-row"><i class="bi bi-x-lg"></i></button></td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="d-flex justify-content-end">
    <button type="submit" class="btn btn-primary px-4">Save All Settings</button>
  </div>
</form>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
  function addRow(tableId, prefix, fields) {
    const tbody = document.querySelector(tableId + ' tbody');
    const idx = tbody.children.length;
    const tr = document.createElement('tr');
    tr.innerHTML = fields.map(f => {
      if (f === 'remove') return '<td><button type="button" class="btn btn-sm btn-outline-danger remove-row"><i class="bi bi-x-lg"></i></button></td>';
      return '<td><input type="text" name="' + prefix + '[' + idx + '][' + f + ']" class="form-control"></td>';
    }).join('');
    tbody.appendChild(tr);
    bindRemove(tr.querySelector('.remove-row'));
  }

  function bindRemove(btn) {
    if (!btn) return;
    btn.addEventListener('click', function() {
      const tr = this.closest('tr');
      const tableId = tr.closest('table').id;
      tr.remove();
      if (tableId === 'stats-table') reindex('stats-table', 'stats');
      if (tableId === 'features-table') reindex('features-table', 'features');
      if (tableId === 'about-values-table') reindex('about-values-table', 'about_values');
      if (tableId === 'milestones-table') reindex('milestones-table', 'milestones');
    });
  }

  function reindex(tableId, prefix) {
    document.querySelectorAll('#' + tableId + ' tbody tr').forEach((tr, i) => {
      tr.querySelectorAll('input').forEach(inp => {
        inp.name = inp.name.replace(new RegExp('^' + prefix + '\\[\\d+\\]'), prefix + '[' + i + ']');
      });
    });
  }

  document.querySelectorAll('.remove-row').forEach(bindRemove);

  document.querySelector('.add-stat-row')?.addEventListener('click', function() {
    addRow('#stats-table', 'stats', ['number', 'label', 'remove']);
  });
  document.querySelector('.add-feat-row')?.addEventListener('click', function() {
    addRow('#features-table', 'features', ['title', 'desc', 'remove']);
  });
  document.querySelector('.add-about-value-row')?.addEventListener('click', function() {
    addRow('#about-values-table', 'about_values', ['title', 'desc', 'remove']);
  });
  document.querySelector('.add-milestone-row')?.addEventListener('click', function() {
    addRow('#milestones-table', 'milestones', ['year', 'title', 'desc', 'remove']);
  });
});
</script>
@endpush