@extends('back.layouts.admin_main')
@section('administrador')

@php
    $f = is_array($nosotros->features) ? $nosotros->features : (json_decode($nosotros->features ?? '[]', true) ?: []);
    // placeholders si no hay features
    if (empty($f)) {
        $f = [
            [
                'order'=>1,'icon_path'=>'img/icono/time-orange.svg','title'=>'Servicio rápido','body'=>'',
                'footer_text'=>null,'bullets'=>[['order'=>1,'number'=>'2','text'=>'Envíos semanales desde Miami a Asunción']]
            ],
            [
                'order'=>2,'icon_path'=>'img/icono/ahorro.svg','title'=>'Tarifas competitivas','body'=>'',
                'footer_text'=>null,'bullets'=>[]
            ],
            [
                'order'=>3,'icon_path'=>'img/icono/atencion-orange.svg','title'=>'Servicio rápido','body'=>'',
                'footer_text'=>null,'bullets'=>[]
            ],
        ];
    }
@endphp

<style>
    .preview-box { height: 120px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fafafa; border:1px solid #eee; }
    .preview-box img { max-height: 100%; max-width: 100%; object-fit: contain; }
    .card-feature { border:1px solid #eee; }
    .small-label { font-size:12px; }
</style>

<div class="col-12">
    <div class="col-12 bg-white p-3 rounded">
        <h5 class="mb-3">Editar: Nosotros (Front)</h5>

        <form id="formNosotros" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="id" value="{{ $nosotros->id }}">

            <!-- HERO -->
            <div class="col-12 mb-4">
                <h6 class="mb-2">Encabezado (Hero)</h6>
                <div class="row g-3">
                    <div class="col-md-4">
                        <div class="form-floating">
                            <input type="text" class="form-control" name="hero_title" value="{{ $nosotros->hero_title }}">
                            <label class="small-label">Título</label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-floating">
                            <input type="text" class="form-control" name="breadcrumb_label" value="{{ $nosotros->breadcrumb_label }}">
                            <label class="small-label">Breadcrumb</label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-floating" style="display: none;">
                            <input type="text" class="form-control" name="hero_bg_image" id="hero_bg_image" value="{{ $nosotros->hero_bg_image }}">
                            <label class="small-label">Path fondo (hero_bg_image)</label>
                        </div>

                        <div class="mt-2" style="display: none;">
                            <label class="small-label d-block mb-1">o Subir imagen</label>
                            <input type="file" name="hero_bg_image_file" id="hero_bg_image_file" class="form-control" accept=".jpg,.jpeg,.png,.webp,.svg">
                        </div>

                        <div class="preview-box mt-2" id="prev_hero" style="display: none;">
                            <img src="{{ asset($nosotros->hero_bg_image) }}" alt="">
                        </div>
                    </div>
                </div>
            </div>

            <!-- QUIÉNES SOMOS -->
            <div class="col-12 mb-4">
                <h6 class="mb-2">Sección: Quiénes somos</h6>
                <div class="row g-3">
                    <div class="col-md-3">
                        <div class="form-floating">
                            <input type="text" class="form-control" name="section1_title_prefix" value="{{ $nosotros->section1_title_prefix }}">
                            <label class="small-label">Título (prefijo)</label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-floating">
                            <input type="text" class="form-control" name="section1_title_highlight" value="{{ $nosotros->section1_title_highlight }}">
                            <label class="small-label">Título (destacado)</label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating">
                            <input type="text" class="form-control" name="section1_image" id="section1_image" value="{{ $nosotros->section1_image }}">
                            <label class="small-label">Path imagen lateral</label>
                        </div>

                        <div class="mt-2">
                            <label class="small-label d-block mb-1">o Subir imagen</label>
                            <input type="file" name="section1_image_file" id="section1_image_file" class="form-control" accept=".jpg,.jpeg,.png,.webp,.svg">
                        </div>

                        <div class="preview-box mt-2" id="prev_section1">
                            <img src="{{ asset($nosotros->section1_image) }}" alt="">
                        </div>
                    </div>

                    <div class="col-12">
                        <label class="small-label">Contenido (HTML)</label>
                        <textarea name="section1_html" class="form-control summernote" rows="6">{!! $nosotros->section1_html !!}</textarea>
                    </div>
                </div>
            </div>

            <!-- FEATURES -->
            <div class="col-12 mb-4">
                <h6 class="mb-2">Tarjetas (features)</h6>

                @foreach($f as $i => $feat)
                    <div class="card card-feature mb-3">
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-1">
                                    <div class="form-floating">
                                        <input type="number" class="form-control" name="features[{{ $i }}][order]" value="{{ $feat['order'] ?? ($i+1) }}">
                                        <label class="small-label">Orden</label>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" name="features[{{ $i }}][icon_path]" id="icon_path_{{ $i }}" value="{{ $feat['icon_path'] ?? '' }}">
                                        <label class="small-label">Icono (path)</label>
                                    </div>

                                    <div class="mt-2">
                                        <label class="small-label d-block mb-1">o Subir icono</label>
                                        <input type="file" name="features[{{ $i }}][icon_file]" id="icon_file_{{ $i }}" class="form-control" accept=".jpg,.jpeg,.png,.webp,.svg">
                                    </div>

                                    <div class="preview-box mt-2" id="prev_icon_{{ $i }}">
                                        @if(!empty($feat['icon_path'])) <img src="{{ asset($feat['icon_path']) }}" alt=""> @endif
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" name="features[{{ $i }}][title]" value="{{ $feat['title'] ?? '' }}">
                                        <label class="small-label">Título</label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" name="features[{{ $i }}][footer_text]" value="{{ $feat['footer_text'] ?? '' }}">
                                        <label class="small-label">Texto inferior (opcional)</label>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <label class="small-label">Contenido</label>
                                    <textarea class="form-control summernote" name="features[{{ $i }}][body]" rows="4">{!! $feat['body'] ?? '' !!}</textarea>
                                </div>

                                @php $bul = $feat['bullets'] ?? []; @endphp
                                @if(!empty($bul))
                                    <div class="col-12">
                                        <div class="table-responsive">
                                            <table class="table table-sm align-middle">
                                                <thead>
                                                    <tr>
                                                        <th style="width:90px;">Orden</th>
                                                        <th style="width:120px;">Número</th>
                                                        <th>Texto</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($bul as $j => $b)
                                                        <tr>
                                                            <td>
                                                                <input type="number" class="form-control form-control-sm" name="features[{{ $i }}][bullets][{{ $j }}][order]" value="{{ $b['order'] ?? ($j+1) }}">
                                                            </td>
                                                            <td>
                                                                <input type="text" class="form-control form-control-sm" name="features[{{ $i }}][bullets][{{ $j }}][number]" value="{{ $b['number'] ?? '' }}">
                                                            </td>
                                                            <td>
                                                                <input type="text" class="form-control form-control-sm" name="features[{{ $i }}][bullets][{{ $j }}][text]" value="{{ $b['text'] ?? '' }}">
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                            <small class="text-muted">* Solo edición. No se permiten eliminaciones desde este panel.</small>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- MISIÓN / VISIÓN -->
            <div class="col-12 mb-4">
                <div class="row g-3">
                    <div class="col-lg-6">
                        <h6 class="mb-2">Misión</h6>
                        <div class="form-floating mb-2">
                            <input type="text" class="form-control" name="mission_title" value="{{ $nosotros->mission_title }}">
                            <label class="small-label">Título</label>
                        </div>

                        <div class="form-floating mb-2">
                            <input type="text" class="form-control" name="mission_image" id="mission_image" value="{{ $nosotros->mission_image }}">
                            <label class="small-label">Imagen (path)</label>
                        </div>

                        <div class="mt-2">
                            <label class="small-label d-block mb-1">o Subir imagen</label>
                            <input type="file" name="mission_image_file" id="mission_image_file" class="form-control" accept=".jpg,.jpeg,.png,.webp,.svg">
                        </div>

                        <div class="preview-box mb-2" id="prev_mission">
                            <img src="{{ asset($nosotros->mission_image) }}" alt="">
                        </div>

                        <label class="small-label">Contenido</label>
                        <textarea name="mission_text" class="form-control summernote" rows="5">{!! $nosotros->mission_text !!}</textarea>
                    </div>

                    <div class="col-lg-6">
                        <h6 class="mb-2">Visión</h6>
                        <div class="form-floating mb-2">
                            <input type="text" class="form-control" name="vision_title" value="{{ $nosotros->vision_title }}">
                            <label class="small-label">Título</label>
                        </div>

                        <div class="form-floating mb-2">
                            <input type="text" class="form-control" name="vision_image" id="vision_image" value="{{ $nosotros->vision_image }}">
                            <label class="small-label">Imagen (path)</label>
                        </div>

                        <div class="mt-2">
                            <label class="small-label d-block mb-1">o Subir imagen</label>
                            <input type="file" name="vision_image_file" id="vision_image_file" class="form-control" accept=".jpg,.jpeg,.png,.webp,.svg">
                        </div>

                        <div class="preview-box mb-2" id="prev_vision">
                            <img src="{{ asset($nosotros->vision_image) }}" alt="">
                        </div>

                        <label class="small-label">Contenido</label>
                        <textarea name="vision_text" class="form-control summernote" rows="5">{!! $nosotros->vision_text !!}</textarea>
                    </div>
                </div>
            </div>

            <div class="col-12 text-end border-top pt-3">
                <button type="submit" class="btn btn-dark">GUARDAR CAMBIOS</button>
            </div>
        </form>
    </div>
</div>
@push('scripts')
<script>
function filePreview(input, imgSelector) {
  const f = input.files && input.files[0];
  if (!f) return;
  const reader = new FileReader();
  reader.onload = e => { document.querySelector(imgSelector).setAttribute('src', e.target.result); };
  reader.readAsDataURL(f);
}

(function waitForJQ(){
  // Fallback defensivo por si el bundle tarda en cargar
  if (typeof window.$ === 'undefined') { return setTimeout(waitForJQ, 50); }

  $(function () {
    console.log('[Nosotros] jQuery listo, enlazando submit…');

    // Previews por PATH
    $('#hero_bg_image').on('input', function(){ $('#prev_hero img').attr('src', '/'+this.value.replace(/^\/+/,'') ); });
    $('#section1_image').on('input', function(){ $('#prev_section1 img').attr('src', '/'+this.value.replace(/^\/+/,'') ); });
    $('#mission_image').on('input', function(){ $('#prev_mission img').attr('src', '/'+this.value.replace(/^\/+/,'') ); });
    $('#vision_image').on('input', function(){ $('#prev_vision img').attr('src', '/'+this.value.replace(/^\/+/,'') ); });

    // Previews por FILE
    $('#hero_bg_image_file').on('change', function(){ filePreview(this, '#prev_hero img'); });
    $('#section1_image_file').on('change', function(){ filePreview(this, '#prev_section1 img'); });
    $('#mission_image_file').on('change', function(){ filePreview(this, '#prev_mission img'); });
    $('#vision_image_file').on('change', function(){ filePreview(this, '#prev_vision img'); });

    // Features: PATH + FILE
    @foreach($f as $i => $feat)
      $('#icon_path_{{ $i }}').on('input', function(){
        $('#prev_icon_{{ $i }}').html('<img src="/'+this.value.replace(/^\/+/,'')+'">');
      });
      $('#icon_file_{{ $i }}').on('change', function(){
        const box = '#prev_icon_{{ $i }} img';
        if (!$(box).length) $('#prev_icon_{{ $i }}').html('<img>');
        filePreview(this, box);
      });
    @endforeach

    // Guardar (AJAX)
    $('#formNosotros').on('submit', function(e){
      e.preventDefault();
      console.log('[Nosotros] submit disparado');

      const fd = new FormData(this);
      // Summernote -> asegurar contenido
      $('.summernote').each(function(){
        const name = $(this).attr('name');
        fd.set(name, $(this).summernote('code'));
      });

      $.ajax({
        url: "{{ route('back.actualizarNosotros') }}",
        method: "POST",
        data: fd,
        processData: false,
        contentType: false,
        success: function(resp){
          console.log('[Nosotros] OK', resp);
          alert('Cambios guardados 👌');
        },
        error: function(xhr){
          console.error('[Nosotros] ERROR', xhr.status, xhr.responseText);
          if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
            let html = '';
            Object.entries(xhr.responseJSON.errors).forEach(([field, msgs]) => {
              html += `• ${field}: ${msgs.join(', ')}\n`;
            });
            alert('Revisá los campos:\n\n' + html);
          } else if (xhr.status === 419) {
            alert('La sesión expiró. Actualizá la página e intentá de nuevo.');
          } else {
            const msg = (xhr.responseJSON && xhr.responseJSON.message)
                ? xhr.responseJSON.message
                : (xhr.responseText || 'Error desconocido');
            alert('Error al guardar: ' + msg);
          }
        }
      });
    });
  });
})();
</script>
@endpush
@endsection