@extends('adminlte::page')

@section('title', 'Editar Clase EFE')
@section('plugins.Datatables', true)
@section('plugins.DatatablesPlugins', true)

@section('content_header')
    <h1>Editar Clase EFE</h1>
@stop

@section('content')
@php
    /** @var \App\Models\EfeClassification $model */
    $model = $efeClassification ?? $efe_classification ?? null;
    $subcategories = ($subcategories ?? collect())->sortBy('code');

    // Config local para la DataTable de subcategorías
    $subcatHeads = [
        ['label' => 'Código', 'width' => 20],
        'Nombre',
        ['label' => 'Acciones', 'no-export' => true, 'width' => 10, 'class' => 'text-center'],
    ];
    $subcatConfig = [
        'order'   => [[0, 'asc'], [1, 'asc']],
        'columns' => [null, null, ['orderable' => false, 'searchable' => false]],
        'dom'     => 'Bfrtip',
        'buttons' => ['copy','excel','csv','print'],
    ];
@endphp

{{-- CARD 1: Formulario EFE --}}
<div class="card card-outline">
    <div class="card-header d-flex align-items-center">
        <i class="fas fa-layer-group mr-2"></i>
        <h3 class="card-title mb-0">Editar - {{ $model->name }}</h3>

        <a href="{{ route('catalogs.efe_classification.index') }}" class="btn btn-default ml-auto">
            <i class="fas fa-arrow-left"></i> Volver
        </a>
    </div>

    <div class="card-body">
        <form method="POST"
              action="{{ route('catalogs.efe_classification.update', $model->efe_classification_id) }}"
              novalidate>
            @csrf
            @method('PUT')

            <div class="form-group">
                <label for="code">Código</label>
                <input
                    type="text"
                    name="code"
                    id="code"
                    value="{{ old('code', $model->code) }}"
                    class="form-control @error('code') is-invalid @enderror">
                @error('code')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group">
                <label for="name">Nombre</label>
                <input
                    type="text"
                    name="name"
                    id="name"
                    value="{{ old('name', $model->name) }}"
                    class="form-control @error('name') is-invalid @enderror">
                @error('name')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            @can('efe_classification.update')
            <button type="submit" class="btn btn-success">
                <i class="fas fa-save"></i> Guardar
            </button>
            @endcan

            <a href="{{ route('catalogs.efe_classification.index') }}" class="btn btn-secondary ml-1">
                Cancelar
            </a>
        </form>
    </div>
</div>

{{-- CARD 2: Subcategorías (DataTable + alta rápida) --}}
<div class="card card-outline">
    <div class="card-header">
        <div class="d-flex align-items-center">
            <i class="fas fa-sitemap mr-2"></i>
            <h3 class="card-title mb-0">Subcategorías</h3>
            <span class="badge badge-info ml-2" id="sccCount">{{ $subcategories->count() }}</span>
        </div>
        @can('subcategory_classification.create')
        <div class="mt-3">
            <label for="quick_name" class="mb-1">Nueva subcategoría</label>
            <div class="input-group">
                <input type="text"
                       id="quick_name"
                       class="form-control"
                       placeholder="Escribe el nombre...">
                <div class="input-group-append">
                    <button id="btnQuickAdd" type="button" class="btn btn-primary" title="Agregar">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
            </div>
            <small class="form-text text-muted">El código se generará automáticamente.</small>
            <div id="quick_errors" class="text-danger mt-2" style="display:none;"></div>
        </div>
        @endcan
    </div>

    <div class="card-body">
        <x-adminlte-datatable id="tblSubcats" :heads="$subcatHeads" :config="$subcatConfig"
                              striped hoverable bordered with-buttons>
            @foreach($subcategories as $s)
                <tr>
                    <td>{{ $s->code }}</td>
                    <td>{{ $s->name }}</td>
                    <td class="text-center">
                        @can('subcategory_classification.edit')
                        <a class="btn btn-xs btn-outline-warning"
                           href="{{ route('catalogs.subcategory_classification.edit', $s->subcategory_classification_id) }}"
                           title="Editar">
                            <i class="fas fa-edit"></i>
                        </a>
                        @endcan
                    </td>
                </tr>
            @endforeach
        </x-adminlte-datatable>
    </div>
</div>

{{-- Modal: Creando --}}
<div class="modal fade" id="modalCreating" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
    <div class="modal-content text-center p-4">
      <i class="fas fa-spinner fa-spin fa-2x mb-3"></i>
      <h5 class="mb-0">Creando registro…</h5>
    </div>
  </div>
</div>

{{-- Modal: Éxito --}}
<div class="modal fade" id="modalSuccess" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
    <div class="modal-content text-center p-4">
      <i class="fas fa-check-circle fa-2x text-success mb-3"></i>
      <h5 class="mb-2">Registro creado</h5>
      <button type="button" class="btn btn-success btn-sm" data-dismiss="modal">OK</button>
    </div>
  </div>
</div>
@stop
@push('js')
<script>
(function () {
    const btn = document.getElementById('btnQuickAdd');
    const input = document.getElementById('quick_name');
    const errorsBox = document.getElementById('quick_errors');
    const badge = document.getElementById('sccCount');
    const tableId = '#tblSubcats';

    const efeId = {{ ($efeClassification ?? $efe_classification ?? $model)->efe_classification_id }};

    function getCsrfToken() {
        const meta = document.querySelector('meta[name="csrf-token"]');
        return meta ? meta.getAttribute('content') : '{{ csrf_token() }}';
    }
    function showCreating() { $('#modalCreating').modal('show'); }
    function hideCreating() { $('#modalCreating').modal('hide'); }
    function showSuccess()  { $('#modalSuccess').modal('show'); }

    async function quickAdd() {
        const name = (input?.value || '').trim();
        if (!name) {
            errorsBox.style.display = 'block';
            errorsBox.textContent = 'El nombre es requerido.';
            return;
        }
        errorsBox.style.display = 'none';
        errorsBox.textContent = '';

        showCreating();

        try {
            const res = await fetch("{{ route('catalogs.subcategory_classification.ajax_store') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': getCsrfToken(),
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ efe_classification_id: efeId, name }),
            });

            if (res.status === 422) {
                const data = await res.json();
                const errs = data.errors || {};
                const first = (errs.name && errs.name[0]) ||
                              (errs.efe_classification_id && errs.efe_classification_id[0]) ||
                              'Validación inválida.';
                hideCreating();
                errorsBox.style.display = 'block';
                errorsBox.textContent = first;
                return;
            }

            if (!res.ok) {
                hideCreating();
                errorsBox.style.display = 'block';
                errorsBox.textContent = 'Ocurrió un error al crear la subcategoría.';
                return;
            }

            const data = await res.json();

            // Agregar fila a DataTable
            const dt = $(tableId).DataTable();
            dt.row.add([
                data.item.code,
                data.item.name,
                `<a class="btn btn-xs btn-outline-warning" href="${data.item.edit_url}" title="Editar">
                    <i class="fas fa-edit"></i>
                 </a>`
            ]).draw(false);

            // Actualizar contador y limpiar input
            if (badge) badge.textContent = data.count;
            if (input) input.value = '';

            hideCreating();
            showSuccess();
        } catch (e) {
            hideCreating();
            errorsBox.style.display = 'block';
            errorsBox.textContent = 'Error de red o servidor. Intenta de nuevo.';
        }
    }

    if (btn) btn.addEventListener('click', quickAdd);
    if (input) {
        input.addEventListener('keydown', function (ev) {
            if (ev.key === 'Enter') {
                ev.preventDefault();
                quickAdd();
            }
        });
    }
})();
</script>
@endpush