@extends('admin.layouts.admin')

@section('title', 'Receta base — ' . $fermento->name)

@php
    // Unit options for the selects. Admin may enter in kg/L; stored canonical (g/ml/unit).
    $unitOptions = ['g' => 'g', 'kg' => 'kg', 'ml' => 'ml', 'l' => 'L', 'unit' => 'ud'];
    $stepOptions = $fermento->steps->sortBy('step_number');
    $fmt = fn ($v) => rtrim(rtrim(number_format((float) $v, 3, '.', ''), '0'), '.');
@endphp

@section('content')

<div class="mb-3">
    <a href="{{ route('admin.fermentos.show', $fermento) }}" class="btn-back">
        ← {{ $fermento->name }}
    </a>
</div>

<div class="admin-page-title">Receta base — {{ $fermento->name }}</div>
<p class="admin-page-sub">
    Ingredientes en métrico (g, ml). Se escalan a la cantidad que elija el usuario al iniciar un lote.
</p>

{{-- Rendimiento base --}}
<div class="admin-card mb-4">
    @if($fermento->hasBaseRecipe())
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <div class="ferment-info-label">Rendimiento base</div>
                <div class="admin-user-name">{{ $fmt($fermento->base_yield_value) }} {{ $fermento->base_yield_unit }}</div>
            </div>
            <a href="{{ route('admin.fermentos.edit', $fermento) }}" class="btn-xs-admin">
                Cambiar
            </a>
        </div>
    @else
        <div class="fermenty-empty py-3">
            <div class="empty-title">Falta el rendimiento base</div>
            <div class="empty-text">
                Define cuánto produce la receta base (p.ej. 2 L) para poder escalar los ingredientes.
            </div>
            <a href="{{ route('admin.fermentos.edit', $fermento) }}"
               class="btn btn-fermenty-primary btn-sm mt-3">Definir rendimiento</a>
        </div>
    @endif
</div>

{{-- Ingredientes actuales --}}
<div class="admin-page-sub mb-2" style="font-weight:600;">Ingredientes ({{ $fermento->ingredients->count() }})</div>

@forelse($fermento->ingredients as $ing)
    <div class="admin-card mb-3">
        <form method="POST"
              action="{{ route('admin.fermentos.ingredientes.update', [$fermento, $ing]) }}"
              class="row g-2 align-items-end">
            @csrf @method('PUT')

            <div class="col-12 col-md-4">
                <label class="form-label">Ingrediente y papel</label>
                <select name="ingredient_id" class="form-select form-select-sm" required>
                    <option value="">Ingrediente…</option>
                    @foreach($ingredients as $opt)
                        <option value="{{ $opt['id'] }}" {{ $ing->ingredient_id == $opt['id'] ? 'selected' : '' }}>{{ str_repeat('— ', $opt['depth']) }}{{ $opt['name'] }}</option>
                    @endforeach
                </select>
                <select name="papel" class="form-select form-select-sm mt-1" required>
                    <option value="" disabled {{ !$ing->papel ? 'selected' : '' }}>Papel…</option>
                    @foreach(['sustrato','medio','arrancador','saborizante','regulador'] as $p)
                        <option value="{{ $p }}" {{ $ing->papel === $p ? 'selected' : '' }}>{{ ucfirst($p) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label">Cantidad</label>
                <input type="number" step="0.001" min="0" name="quantity" class="form-control form-control-sm"
                       value="{{ $fmt($ing->quantity) }}" required>
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label">Unidad</label>
                <select name="unit" class="form-select form-select-sm">
                    @foreach($unitOptions as $val => $label)
                        <option value="{{ $val }}" {{ $ing->unit === $val ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label">Paso</label>
                <select name="guide_step_id" class="form-select form-select-sm">
                    <option value="">General</option>
                    @foreach($stepOptions as $s)
                        <option value="{{ $s->id }}" {{ $ing->guide_step_id == $s->id ? 'selected' : '' }}>
                            {{ $s->step_number }}. {{ Str::limit($s->title, 20) }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label">Fase</label>
                <select name="phase" class="form-select form-select-sm">
                    <option value="primary"   {{ $ing->phase === 'primary' ? 'selected' : '' }}>Primaria</option>
                    <option value="secondary" {{ $ing->phase === 'secondary' ? 'selected' : '' }}>Secundaria</option>
                </select>
            </div>

            <div class="col-12 col-md-8">
                <input type="text" name="notes" class="form-control form-control-sm"
                       placeholder="Notas (opcional)" value="{{ old('notes', $ing->notes) }}">
            </div>
            <div class="col-6 col-md-2 d-flex align-items-center gap-1 pt-2">
                <input type="checkbox" name="is_optional" value="1" class="form-check-input mt-0"
                       {{ $ing->is_optional ? 'checked' : '' }} title="Opcional">
                <span style="font-size:0.78rem;">Opcional</span>
            </div>
            <div class="col-6 col-md-2 pt-2">
                <button type="submit" class="btn btn-fermenty-primary btn-sm w-100">Guardar</button>
            </div>
        </form>

        <form method="POST"
              action="{{ route('admin.fermentos.ingredientes.destroy', [$fermento, $ing]) }}"
              onsubmit="return confirm('¿Eliminar este ingrediente?')" class="text-end mt-2">
            @csrf @method('DELETE')
            <button type="submit" class="btn btn-fermenty-outline btn-sm" style="color:#7A1A1A;border-color:#d8b4b4;">
                Eliminar
            </button>
        </form>
    </div>
@empty
    <div class="admin-card mb-3">
        <div class="empty-text">Aún no hay ingredientes en la receta base.</div>
    </div>
@endforelse

{{-- Añadir ingrediente --}}
<div class="admin-card mt-4">
    <div class="d-flex justify-content-between align-items-center mb-2">
        <div class="admin-page-sub" style="font-weight:600;">Añadir ingrediente</div>
        <button type="button" class="btn btn-fermenty-outline btn-sm js-crear-ing">+ Crear en el catálogo</button>
    </div>
    <form method="POST" action="{{ route('admin.fermentos.ingredientes.store', $fermento) }}"
          class="row g-2 align-items-end">
        @csrf

        <div class="col-12 col-md-4">
            <label class="form-label">Ingrediente y papel</label>
            <select name="ingredient_id" class="form-select form-select-sm @error('ingredient_id') is-invalid @enderror" required>
                <option value="">Elige del catálogo…</option>
                @foreach($ingredients as $opt)
                    <option value="{{ $opt['id'] }}" {{ old('ingredient_id') == $opt['id'] ? 'selected' : '' }}>{{ str_repeat('— ', $opt['depth']) }}{{ $opt['name'] }}</option>
                @endforeach
            </select>
            @error('ingredient_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
            <select name="papel" class="form-select form-select-sm mt-1" required>
                <option value="" disabled {{ old('papel') ? '' : 'selected' }}>Papel… (la sal es regulador)</option>
                @foreach(['sustrato','medio','arrancador','saborizante','regulador'] as $p)
                    <option value="{{ $p }}" {{ old('papel') === $p ? 'selected' : '' }}>{{ ucfirst($p) }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-6 col-md-2">
            <label class="form-label">Cantidad</label>
            <input type="number" step="0.001" min="0" name="quantity"
                   class="form-control form-control-sm @error('quantity') is-invalid @enderror"
                   value="{{ old('quantity') }}" required>
        </div>
        <div class="col-6 col-md-2">
            <label class="form-label">Unidad</label>
            <select name="unit" class="form-select form-select-sm">
                @foreach($unitOptions as $val => $label)
                    <option value="{{ $val }}" {{ old('unit') === $val ? 'selected' : '' }}>{{ $label }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-6 col-md-2">
            <label class="form-label">Paso</label>
            <select name="guide_step_id" class="form-select form-select-sm">
                <option value="">General</option>
                @foreach($stepOptions as $s)
                    <option value="{{ $s->id }}" {{ old('guide_step_id') == $s->id ? 'selected' : '' }}>
                        {{ $s->step_number }}. {{ Str::limit($s->title, 20) }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-6 col-md-2">
            <label class="form-label">Fase</label>
            <select name="phase" class="form-select form-select-sm">
                <option value="primary">Primaria</option>
                <option value="secondary">Secundaria</option>
            </select>
        </div>

        <div class="col-12 col-md-10">
            <input type="text" name="notes" class="form-control form-control-sm"
                   placeholder="Notas (opcional)" value="{{ old('notes') }}">
        </div>
        <div class="col-12 col-md-2">
            <button type="submit" class="btn btn-fermenty-primary btn-sm w-100">+ Añadir</button>
        </div>
    </form>
</div>

{{-- Crear ingrediente del catálogo en línea (mismo endpoint que el wizard). --}}
<div id="ingModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1050;align-items:center;justify-content:center;">
    <div style="background:#fff;border-radius:14px;padding:22px;max-width:460px;width:92%;box-shadow:0 12px 40px rgba(0,0,0,.2);">
        <h5 style="margin:0 0 4px;">Crear ingrediente</h5>
        <p class="text-muted" style="font-size:.82rem;margin-bottom:14px;">Se añade al catálogo. El perfil se hereda del padre; lo rellenas después si hace falta.</p>
        <form method="POST" action="{{ route('admin.ingredientes.store') }}">
            @csrf
            <label class="form-label">Nombre</label>
            <input type="text" name="name" required
                   class="form-control @error('ing_name') is-invalid @enderror" value="{{ old('name') }}">
            @error('ing_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
            <label class="form-label mt-2">Padre en el árbol</label>
            <select name="parent_id" class="form-select">
                <option value="">(raíz — sin padre)</option>
                @foreach($ingredients as $opt)
                    <option value="{{ $opt['id'] }}" {{ old('parent_id') == $opt['id'] ? 'selected' : '' }}>{{ str_repeat('— ', $opt['depth']) }}{{ $opt['name'] }}</option>
                @endforeach
            </select>
            <label class="form-label mt-2">Unidad</label>
            <select name="canonical_unit" class="form-select">
                @foreach(['g'=>'g','kg'=>'kg','ml'=>'ml','l'=>'L','unit'=>'ud'] as $v => $l)
                    <option value="{{ $v }}" {{ old('canonical_unit') == $v ? 'selected' : '' }}>{{ $l }}</option>
                @endforeach
            </select>
            <div class="d-flex gap-2 mt-3 justify-content-end">
                <button type="button" class="btn btn-fermenty-outline btn-sm" onclick="ingClose()">Cancelar</button>
                <button type="submit" class="btn btn-fermenty-primary btn-sm">Crear</button>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script>
    function ingClose() { document.getElementById('ingModal').style.display = 'none'; }
    document.querySelectorAll('.js-crear-ing').forEach(function (b) {
        b.addEventListener('click', function () { document.getElementById('ingModal').style.display = 'flex'; });
    });
    document.getElementById('ingModal').addEventListener('click', function (e) {
        if (e.target === this) ingClose();
    });
    @if($errors->has('ing_name'))
        document.getElementById('ingModal').style.display = 'flex';
    @endif
</script>
@endpush