@extends('admin.layouts.admin')

@section('title', 'Receta · Pasos e ingredientes')

@section('content')

<div class="admin-page-title">{{ $recipe->name }}</div>
<p class="admin-page-sub">
    El proceso vive en la <strong>guía</strong> ({{ $recipe->guide?->name }}). La receta solo decide
    qué pasos opcionales entran y qué ingredientes lleva cada paso.
</p>

@include('admin.recetas.wizard._stepper', ['active' => 'steps'])

@php
    $general = $recipe->ingredients->whereNull('guide_step_id');
    $byStep  = $recipe->ingredients->whereNotNull('guide_step_id')->groupBy('guide_step_id');
    $optionals = $process->where('is_optional', true);
@endphp

{{-- ── Pasos opcionales: interruptor (presencia = encendido) ── --}}
@if($optionals->isNotEmpty())
    <div class="admin-card mb-4">
        <div class="admin-user-name mb-2">Pasos opcionales</div>
        <p class="admin-page-sub" style="font-size:0.82rem;">Marca los que esta receta incluye. Los obligatorios van siempre.</p>
        <form method="POST" action="{{ route('admin.recetas.wizard.steps.optionals', $recipe) }}">
            @csrf
            @foreach($optionals as $opt)
                <div class="d-flex align-items-center gap-2 mb-1">
                    <input type="checkbox" name="optionals[]" value="{{ $opt->id }}" class="form-check-input mt-0"
                           {{ in_array($opt->id, $onOptionals) ? 'checked' : '' }}>
                    <span>Paso {{ $opt->step_number }} · {{ $opt->title }}</span>
                </div>
            @endforeach
            <button type="submit" class="btn btn-fermenty-primary btn-sm mt-2">Guardar opcionales</button>
        </form>
    </div>
@endif

{{-- Los ingredientes se ELIGEN del catálogo. Si falta uno (chucrut/kimchi), se crea
     aquí mismo sin salir de la pantalla. --}}
<div class="d-flex justify-content-end mb-2">
    <button type="button" class="btn btn-fermenty-outline btn-sm js-crear-ing">+ Crear ingrediente en el catálogo</button>
</div>

{{-- ── Ingredientes generales (sin paso) ── --}}
<div class="admin-card mb-3">
    <div class="admin-user-name mb-2">Ingredientes generales (sin paso)</div>
    @foreach($general as $ing)
        @include('admin.recetas.wizard._ingredient', ['ing' => $ing])
    @endforeach
    @include('admin.recetas.wizard._ingredient_add', ['guideStepId' => ''])
</div>

{{-- ── El proceso de la guía, con sus ingredientes por paso ── --}}
@foreach($process as $step)
    @php $skipped = $step->is_optional && ! in_array($step->id, $onOptionals); @endphp
    <div class="admin-card mb-3" style="{{ $skipped ? 'opacity:.55;' : '' }}">
        <div class="d-flex align-items-center gap-2 mb-2">
            <div class="step-number" style="flex-shrink:0;">{{ $step->step_number }}</div>
            <div class="admin-user-name">{{ $step->title }}</div>
            @if($step->is_optional)
                <span class="fermenty-badge {{ $skipped ? 'badge-paused' : 'badge-active' }}" style="font-size:0.7rem;">
                    opcional · {{ $skipped ? 'apagado' : 'encendido' }}
                </span>
            @endif
        </div>
        @unless($skipped)
            @foreach(($byStep[$step->id] ?? collect()) as $ing)
                @include('admin.recetas.wizard._ingredient', ['ing' => $ing])
            @endforeach
            @include('admin.recetas.wizard._ingredient_add', ['guideStepId' => $step->id, 'ingredients' => $ingredients])
        @endunless
    </div>
@endforeach

<div class="d-flex gap-2 mt-3">
    <a href="{{ route('admin.recetas.wizard.basics', $recipe) }}" class="btn btn-fermenty-outline btn-sm">← Datos</a>
    <form method="POST" action="{{ route('admin.recetas.wizard.finish', $recipe) }}">
        @csrf
        <button type="submit" class="btn btn-fermenty-primary btn-sm">Finalizar</button>
    </form>
</div>

{{-- Crear ingrediente del catálogo en línea. Se pide el padre (el árbol es de
     profundidad libre) y la unidad; el perfil se hereda del padre. --}}
<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 $ing)
                    <option value="{{ $ing['id'] }}" {{ old('parent_id') == $ing['id'] ? 'selected' : '' }}>{{ str_repeat('— ', $ing['depth']) }}{{ $ing['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';   // reabre con el error
    @endif
</script>
@endpush