@extends('admin.layouts.admin')

@section('title', 'Catálogo de ingredientes')

@section('content')

<div class="admin-page-title">Catálogo de ingredientes</div>
<p class="admin-page-sub">El árbol del dominio, ordenado por niveles. Busca por nombre, filtra por el fermento donde se usa, y edita cada uno (incluido el perfil que el motor necesita).</p>

@if(session('success'))
    <div class="fermenty-badge badge-active mb-3" style="display:inline-block;">{{ session('success') }}</div>
@endif
@if($errors->any())
    <div class="mb-3" style="color:#7A1A1A;">{{ $errors->first() }}</div>
@endif

{{-- Crear --}}
<div class="admin-card mb-3">
    <div class="admin-page-sub mb-2" style="font-weight:600;">Nuevo ingrediente</div>
    <form method="POST" action="{{ route('admin.ingredientes.store') }}" class="row g-2 align-items-end">
        @csrf
        <div class="col-12 col-md-4">
            <input type="text" name="name" class="form-control form-control-sm @error('ing_name') is-invalid @enderror" value="{{ old('name') }}" placeholder="Nombre" required>
            @error('ing_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>
        <div class="col-8 col-md-5">
            <select name="parent_id" class="form-select form-select-sm">
                <option value="">(raíz — sin padre)</option>
                @foreach($arbol as $row)
                    <option value="{{ $row['id'] }}">{{ str_repeat('— ', $row['depth']) }}{{ $row['name'] }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-6 col-md-2">
            <select name="canonical_unit" class="form-select form-select-sm">
                @foreach(['g'=>'g','kg'=>'kg','ml'=>'ml','l'=>'L','unit'=>'ud'] as $v => $l)
                    <option value="{{ $v }}">{{ $l }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-6 col-md-1">
            <button type="submit" class="btn btn-fermenty-primary btn-sm w-100">Crear</button>
        </div>
    </form>
</div>

{{-- Buscar + filtrar --}}
<div class="row g-2 mb-2 align-items-end">
    <div class="col-12 col-md-6">
        <input type="text" id="ingSearch" class="form-control form-control-sm" placeholder="Buscar por nombre…" autocomplete="off">
    </div>
    <div class="col-12 col-md-6">
        <form method="GET" action="{{ route('admin.ingredientes.index') }}" class="d-flex gap-2">
            <select name="fermento" class="form-select form-select-sm" onchange="this.form.submit()">
                <option value="">— Todos los fermentos —</option>
                @foreach($fermentos as $f)
                    <option value="{{ $f->id }}" {{ $fermentoId == $f->id ? 'selected' : '' }}>Usado en: {{ $f->name }}</option>
                @endforeach
            </select>
            @if($fermentoId)
                <a href="{{ route('admin.ingredientes.index') }}" class="btn btn-fermenty-outline btn-sm">Quitar</a>
            @endif
        </form>
    </div>
</div>

<div class="admin-card" style="overflow-x:auto;">
    <table class="table table-sm align-middle mb-0" style="font-size:.85rem;">
        <thead>
            <tr class="text-muted" style="font-size:.75rem;">
                <th>Ingrediente</th><th>Unidad</th><th>Perfil</th><th>Uso</th><th></th>
            </tr>
        </thead>
        <tbody id="ingRows">
            @foreach($arbol as $row)
                @php $n = $nodos[$row['id']]; $uso = $n->recipe_lines_count + $n->guide_lines_count; @endphp
                <tr data-name="{{ Str::lower($n->name) }}">
                    <td>
                        <span class="text-muted">{!! str_repeat('&nbsp;&nbsp;&nbsp;', $row['depth']) !!}{{ $row['depth'] > 0 ? '└ ' : '' }}</span>{{ $n->name }}
                    </td>
                    <td class="text-muted">{{ $n->canonical_unit }}</td>
                    <td class="text-muted" style="font-size:.78rem;">{{ $n->profile ? implode(' · ', array_keys($n->profile)) : '—' }}</td>
                    <td class="text-muted" title="{{ $n->recipe_lines_count }} recetas · {{ $n->guide_lines_count }} guías">{{ $uso }}</td>
                    <td class="text-end">
                        <a href="{{ route('admin.ingredientes.edit', $n) }}" class="btn-xs-admin">Editar</a>
                        @if($uso === 0 && $n->children_count === 0)
                            <form method="POST" action="{{ route('admin.ingredientes.destroy', $n) }}" class="d-inline"
                                  onsubmit="return confirm('¿Borrar «{{ $n->name }}»?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn-xs-admin" style="color:#7A1A1A;">Borrar</button>
                            </form>
                        @endif
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
    <div id="ingEmpty" class="text-muted text-center py-3" style="display:none;">Sin resultados.</div>
</div>

@endsection

@push('scripts')
<script>
    (function () {
        var input = document.getElementById('ingSearch');
        var rows  = Array.prototype.slice.call(document.querySelectorAll('#ingRows tr'));
        var empty = document.getElementById('ingEmpty');
        input.addEventListener('input', function () {
            var q = input.value.trim().toLowerCase();
            var visible = 0;
            rows.forEach(function (r) {
                var show = !q || r.dataset.name.indexOf(q) !== -1;
                r.style.display = show ? '' : 'none';
                if (show) visible++;
            });
            empty.style.display = visible ? 'none' : 'block';
        });
    })();
</script>
@endpush