@extends('adminlte::page')

@section('title', 'Editar Subcategoría')
@section('plugins.Datatables', true)
@section('plugins.DatatablesPlugins', true)

@section('content_header')
    <h1>Editar Subcategoría</h1>
@stop

@section('content')
@php /** @var \App\Models\SubcategoryClassification $row */ @endphp

{{-- CARD 1: Formulario de Subcategoría --}}
<div class="card card-outline">
    <div class="card-header d-flex align-items-center">
        <i class="fas fa-sitemap mr-2"></i>
        <h3 class="card-title mb-0">Editar: {{ $row->name }}</h3>
        <a href="{{ route('catalogs.subcategory_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.subcategory_classification.update', $row->subcategory_classification_id) }}"
              novalidate>
            @csrf
            @method('PUT')

            <div class="form-group">
                <label for="efe_classification_id">Categoría EFE</label>
                <select name="efe_classification_id" id="efe_classification_id"
                        class="form-control @error('efe_classification_id') is-invalid @enderror">
                    <option value="">-- Selecciona --</option>
                    @foreach($efes as $efe)
                        <option value="{{ $efe->efe_classification_id }}"
                                {{ old('efe_classification_id', $row->efe_classification_id) == $efe->efe_classification_id ? 'selected' : '' }}>
                            {{ $efe->code }} — {{ $efe->name }}
                        </option>
                    @endforeach
                </select>
                @error('efe_classification_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

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

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

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

{{-- CARD 2: Budget Class relacionados (DataTable + alta rápida por AJAX) --}}
@php
    $bcHeads = [
        ['label' => 'Código', 'width' => 20],
        'Nombre',
        ['label' => 'Acciones', 'no-export' => true, 'width' => 10, 'class' => 'text-center'],
    ];
    $bcConfig = [
        'order'   => [[0, 'asc'], [1, 'asc']],
        'columns' => [null, null, ['orderable' => false, 'searchable' => false]],
        'dom'     => 'Bfrtip',
        'buttons' => ['copy','excel','csv','print'],
    ];
@endphp

<div class="card card-outline">
    <div class="card-header">
        <div class="d-flex align-items-center">
            <i class="fas fa-list mr-2"></i>
            <h3 class="card-title mb-0">Budget Class</h3>
            <span class="badge badge-info ml-2" id="bcCount">{{ ($budgetClasses ?? collect())->count() }}</span>
        </div>

        @can('efe_classification.create')
        <div class="mt-3">
            <label for="bc_name" class="mb-1">Nueva Budget Class</label>
            <div class="input-group">
                <input type="text"
                       id="bc_name"
                       class="form-control"
                       placeholder="Escribe el nombre...">
                <div class="input-group-append">
                    <button id="btnBcAdd" 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="bc_errors" class="text-danger mt-2" style="display:none;"></div>
        </div>
        @endcan
    </div>

    <div class="card-body">
        <x-adminlte-datatable id="tblBudgetClasses" :heads="$bcHeads" :config="$bcConfig"
                              striped hoverable bordered with-buttons>
            @foreach(($budgetClasses ?? collect()) as $bc)
                <tr>
                    <td>{{ $bc->code }}</td>
                    <td>{{ $bc->name }}</td>
                    <td class="text-center">
                        @can('efe_classification.update')
                        <a class="btn btn-xs btn-outline-warning"
                           href="{{ route('catalogs.budget_class.edit', $bc->budget_class_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('btnBcAdd');
    const input = document.getElementById('bc_name');
    const errs  = document.getElementById('bc_errors');
    const badge = document.getElementById('bcCount');
    const tableId = '#tblBudgetClasses';

    const subcatId = {{ $row->subcategory_classification_id }};

    function csrf() {
        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 quickAddBudgetClass() {
        const name = (input?.value || '').trim();
        if (!name) {
            errs.style.display = 'block';
            errs.textContent = 'El nombre es requerido.';
            return;
        }
        errs.style.display = 'none';
        errs.textContent = '';

        showCreating();
        try {
            const res = await fetch("{{ route('catalogs.budget_class.ajax_store') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrf(),
                    'Accept': 'application/json',
                },
                body: JSON.stringify({
                    subcategory_classification_id: subcatId,
                    name: name
                    // code lo genera el servidor
                }),
            });

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

            if (!res.ok) {
                hideCreating();
                errs.style.display = 'block';
                errs.textContent = 'Ocurrió un error al crear el registro.';
                return;
            }

            const data = await res.json();

            // Agregar nueva 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 badge y limpiar input
            if (badge) badge.textContent = data.count;
            if (input) input.value = '';

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

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