@extends('layouts/layoutMaster')

@section('title', 'Settings')

@section('content')
<form method="POST" action="{{ route('admin.settings.update') }}" enctype="multipart/form-data">
  @csrf
  @method('PUT')

  <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-6">
    <div>
      <h4 class="mb-1">Settings</h4>
      <p class="mb-0 text-muted">Solo mostramos aqui la configuracion global que hoy si impacta el sitio publico.</p>
    </div>

    <button class="btn btn-primary" type="submit">Guardar cambios</button>
  </div>

  @if (session('status'))
    <div class="alert alert-success" role="alert">
      {{ session('status') }}
    </div>
  @endif

  @if ($errors->any())
    <div class="alert alert-danger" role="alert">
      <div class="fw-semibold mb-2">Hay campos pendientes por corregir.</div>
      <ul class="mb-0 ps-4">
        @foreach ($errors->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  <div class="card border-warning-subtle bg-label-warning mb-6">
    <div class="card-body">
      <h5 class="card-title mb-2">Panel reorganizado</h5>
      <p class="mb-0 text-muted">
        Sacamos de esta pantalla lo que estaba duplicado o no estaba conectado correctamente.
        Ciudades, logos, destacados y posts se siguen gestionando desde sus modulos propios.
      </p>
    </div>
  </div>

  <div class="row g-6">
    @foreach ($sections as $sectionKey => $section)
      @if ($sectionKey !== 'notes')
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h5 class="card-title mb-1">{{ $section['title'] }}</h5>
              <p class="card-subtitle text-muted mb-0">{{ $section['description'] }}</p>
            </div>
            <div class="card-body">
              <div class="row g-4">
                @foreach ($section['fields'] as $field)
                  @php
                    $meta = $fieldMeta[$field] ?? ['label' => $field];
                    $fieldType = $meta['type'] ?? 'text';
                    $fieldValue = old($field, $values[$field] ?? '');
                  @endphp

                  <div class="{{ $fieldType === 'textarea' ? 'col-12' : 'col-md-6' }}">
                    <label class="form-label" for="{{ $field }}">{{ $meta['label'] }}</label>

                    @if ($fieldType === 'textarea')
                      <textarea
                        class="form-control"
                        id="{{ $field }}"
                        name="{{ $field }}"
                        rows="3"
                        placeholder="{{ $meta['placeholder'] ?? '' }}">{{ $fieldValue }}</textarea>
                    @elseif ($fieldType === 'image')
                      <input
                        class="form-control"
                        id="{{ $field }}"
                        name="{{ $field }}"
                        type="text"
                        value="{{ $fieldValue }}"
                        placeholder="{{ $meta['placeholder'] ?? '' }}" />
                      <div class="form-text">Puedes usar una URL externa o subir una imagen local.</div>

                      <div class="mt-3">
                        <label class="form-label" for="{{ $field }}_file">Subir imagen</label>
                        <input class="form-control" id="{{ $field }}_file" name="{{ $field }}_file" type="file" accept=".jpg,.jpeg,.png,.webp,.avif,image/*" />
                      </div>

                      <div class="form-check mt-3">
                        <input class="form-check-input" id="{{ $field }}_remove" name="{{ $field }}_remove" type="checkbox" value="1" />
                        <label class="form-check-label" for="{{ $field }}_remove">Quitar imagen actual</label>
                      </div>

                      @if ($fieldValue)
                        <div class="border rounded p-3 bg-light mt-3">
                          <div class="fw-semibold mb-2">Vista previa actual</div>
                          <img
                            src="{{ $fieldValue }}"
                            alt="{{ $meta['label'] }}"
                            style="max-height: 180px; width: auto; border-radius: 12px;" />
                        </div>
                      @endif
                    @else
                      <input
                        class="form-control"
                        id="{{ $field }}"
                        name="{{ $field }}"
                        type="{{ str_contains($field, '_url') ? 'url' : (str_contains($field, 'score') ? 'number' : 'text') }}"
                        value="{{ $fieldValue }}"
                        placeholder="{{ $meta['placeholder'] ?? '' }}"
                        @if (str_contains($field, 'score')) step="0.01" min="0.10" max="0.99" @endif />
                    @endif
                  </div>
                @endforeach
              </div>
            </div>
          </div>
        </div>
      @endif
    @endforeach

    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h5 class="card-title mb-1">{{ $sections['notes']['title'] }}</h5>
          <p class="card-subtitle text-muted mb-0">{{ $sections['notes']['description'] }}</p>
        </div>
        <div class="card-body">
          <div class="row g-4">
            @foreach ($relatedModules as $module)
              <div class="col-md-6 col-xl-3">
                <div class="border rounded h-100 p-4">
                  <h6 class="mb-2">{{ $module['title'] }}</h6>
                  <p class="text-muted mb-4">{{ $module['description'] }}</p>
                  <a class="btn btn-label-primary w-100" href="{{ route($module['route']) }}">{{ $module['cta'] }}</a>
                </div>
              </div>
            @endforeach
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
@endsection