@extends('admin.layouts.admin')

@php $editando = $consejo->exists; @endphp

@section('title', $editando ? 'Editar consejo' : 'Nuevo consejo')

@section('content')

<div class="mb-3">
    <a href="{{ route('admin.consejos.index') }}" class="btn-back">← Consejos</a>
</div>

<div class="admin-page-title">
    {{ $editando ? 'Editar consejo' : 'Nuevo consejo' }}
    @if(isset($desde))
        <span class="fermenty-badge badge-premium ms-1">versión en «{{ $consejo->locale }}» partiendo del texto en «{{ $desde->locale }}» — tradúcelo antes de guardar</span>
    @endif
</div>

<div class="row justify-content-center">
    <div class="col-12 col-lg-7">
        <div class="admin-card mt-4">
            <form method="POST"
                  action="{{ $editando ? route('admin.consejos.update', $consejo) : route('admin.consejos.store') }}"
                  class="fermenty-form">
                @csrf
                @if($editando) @method('PUT') @endif

                {{-- La regla nivel↔referencia del modelo, si rechaza, sale aquí --}}
                @error('level') <div class="alert alert-danger py-2" style="font-size:0.85rem;">{{ $message }}</div> @enderror

                <div class="row g-3 mb-3">
                    <div class="col-6">
                        <label class="form-label">Nivel <span class="text-muted" style="font-size:0.78rem;">hasta dónde es cierto</span></label>
                        <select name="level" id="nivelSel" class="form-select" required>
                            @foreach(\App\Models\Hint::NIVELES as $nivel)
                                <option value="{{ $nivel }}" @selected(old('level', $consejo->level ?? 'general') === $nivel)>
                                    {{ ['general' => 'General', 'category' => 'Categoría', 'ferment' => 'Fermento', 'step' => 'Paso'][$nivel] }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-6">
                        <label class="form-label">Idioma</label>
                        <select name="locale" class="form-select" required>
                            @foreach(\App\Http\Controllers\Admin\HintController::LOCALES as $idioma)
                                <option value="{{ $idioma }}" @selected(old('locale', $consejo->locale ?? 'es') === $idioma)>{{ $idioma }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                {{-- El dueño, dependiente del nivel: el 80 % del valor de la pantalla --}}
                <div class="mb-3 nivel-dep" data-nivel="category">
                    <label class="form-label">Categoría</label>
                    <select name="fermentation_category_id" class="form-select">
                        <option value="">— elige categoría —</option>
                        @foreach($categorias as $cat)
                            <option value="{{ $cat->id }}" @selected((int) old('fermentation_category_id', $consejo->fermentation_category_id) === $cat->id)>{{ $cat->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="mb-3 nivel-dep" data-nivel="ferment">
                    <label class="form-label">Fermento</label>
                    <select name="guide_id" class="form-select">
                        <option value="">— elige fermento —</option>
                        @foreach($guias as $guia)
                            <option value="{{ $guia->id }}" @selected((int) old('guide_id', $consejo->guide_id) === $guia->id)>{{ $guia->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="nivel-dep" data-nivel="step">
                    <div class="row g-3 mb-3">
                        <div class="col-6">
                            <label class="form-label">Fermento</label>
                            <select id="guiaDelPaso" class="form-select">
                                <option value="">— elige fermento —</option>
                                @foreach($guias as $guia)
                                    <option value="{{ $guia->id }}" @selected((int) old('guide_step_guide', $consejo->guideStep?->guide_id) === $guia->id)>{{ $guia->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label">Paso <span class="text-muted" style="font-size:0.78rem;">de ese fermento</span></label>
                            <select name="guide_step_id" id="pasoSel" class="form-select"
                                    data-actual="{{ old('guide_step_id', $consejo->guide_step_id) }}">
                                <option value="">— primero el fermento —</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Título <span class="text-muted" style="font-size:0.78rem;">opcional</span></label>
                    <input type="text" name="title" maxlength="120" class="form-control @error('title') is-invalid @enderror"
                           value="{{ old('title', $consejo->title) }}">
                    @error('title') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>

                <div class="mb-3">
                    <label class="form-label">Consejo</label>
                    <textarea name="content" rows="4" maxlength="500" required
                              class="form-control @error('content') is-invalid @enderror"
                              placeholder="La prosa del porqué: para el lector, no para el motor.">{{ old('content', $consejo->content) }}</textarea>
                    @error('content') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>

                <div class="row g-3 mb-3">
                    <div class="col-4">
                        <label class="form-label">Orden</label>
                        <input type="number" name="order" min="1" class="form-control"
                               value="{{ old('order', $consejo->order ?? 1) }}">
                        <div class="form-text" style="font-size:0.78rem;">Entre los del mismo dueño e idioma.</div>
                    </div>
                    <div class="col-8 nivel-dep" data-nivel="general category ferment">
                        <label class="form-label">Síntoma <span class="text-muted" style="font-size:0.78rem;">si es un remedio del solucionador</span></label>
                        <select name="symptom" id="sintomaSel" class="form-select @error('symptom') is-invalid @enderror">
                            <option value="">— sin síntoma —</option>
                            @foreach(\App\Models\Hint::SINTOMAS as $sintoma)
                                <option value="{{ $sintoma }}" @selected(old('symptom', $consejo->symptom) === $sintoma)>{{ str_replace('_', ' ', $sintoma) }}</option>
                            @endforeach
                        </select>
                        @error('symptom') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        {{-- §5: quien escribe tiene que saber para quién escribe --}}
                        <div class="form-text" id="sintomaConsecuencia" style="font-size:0.8rem;display:none;"></div>
                    </div>
                </div>

                <div class="mb-3 nivel-dep" data-nivel="general">
                    <div class="form-check">
                        <input type="checkbox" name="is_daily" id="isDaily" value="1" class="form-check-input"
                               @checked(old('is_daily', $consejo->is_daily))>
                        <label for="isDaily" class="form-check-label">Consejo del día <span class="text-muted" style="font-size:0.78rem;">rota en portada</span></label>
                    </div>
                    <div class="form-text" style="font-size:0.78rem;">
                        La rotación depende del recuento por idioma: al añadir o quitar uno, deja los tres idiomas con el mismo número.
                    </div>
                </div>

                <div class="d-flex gap-3">
                    <button type="submit" class="btn btn-fermenty-primary">{{ $editando ? 'Guardar cambios' : 'Crear' }}</button>
                    <a href="{{ route('admin.consejos.index') }}" class="btn btn-fermenty-outline">Cancelar</a>
                </div>
            </form>
        </div>

        {{-- Idiomas hermanos: qué está traducido y qué falta (briefing §6) --}}
        @if($editando)
            <div class="admin-card mt-3">
                <div class="admin-page-sub mb-2" style="font-weight:600;">Este consejo en los tres idiomas</div>
                @php $porIdioma = ($hermanas ?? collect())->keyBy('locale'); @endphp
                @foreach(\App\Http\Controllers\Admin\HintController::LOCALES as $idioma)
                    <div class="d-flex justify-content-between align-items-center py-1" style="border-bottom:1px dashed #eee;font-size:0.85rem;">
                        <span><span class="fermenty-badge">{{ $idioma }}</span></span>
                        @if($idioma === $consejo->locale)
                            <span class="text-muted">éste</span>
                        @elseif($hermana = $porIdioma->get($idioma))
                            <a href="{{ route('admin.consejos.edit', $hermana) }}" class="btn-xs-admin">Editar</a>
                        @else
                            <span>
                                <span class="fermenty-badge badge-premium me-1">sin traducir</span>
                                <a href="{{ route('admin.consejos.create', ['desde' => $consejo->id, 'idioma' => $idioma]) }}"
                                   class="btn-xs-admin">Crear en {{ $idioma }}</a>
                            </span>
                        @endif
                    </div>
                @endforeach
                <div class="form-text mt-2" style="font-size:0.78rem;">
                    Un consejo sin sus hermanas no está terminado: la web cae al español sin avisar a nadie.
                    Las versiones se emparejan por nivel, dueño y orden.
                </div>
            </div>
        @endif
    </div>
</div>

<script>
(function () {
    // Paso por fermento: el selector plano con todos los pasos del sistema es
    // inservible en cuanto haya diez fermentos — se filtra por el fermento elegido.
    const PASOS = @json($guias->mapWithKeys(fn ($g) => [$g->id => $g->steps->map(fn ($s) => [
        'id' => $s->id, 'texto' => 'Paso ' . $s->step_number . ' — ' . $s->title,
    ])->values()]));

    const nivelSel  = document.getElementById('nivelSel');
    const guiaPaso  = document.getElementById('guiaDelPaso');
    const pasoSel   = document.getElementById('pasoSel');
    const sintoma   = document.getElementById('sintomaSel');
    const conSec    = document.getElementById('sintomaConsecuencia');

    function pintaNivel() {
        const nivel = nivelSel.value;
        document.querySelectorAll('.nivel-dep').forEach(function (caja) {
            const visible = caja.dataset.nivel.split(' ').includes(nivel);
            caja.style.display = visible ? '' : 'none';
            // Ocultos también deshabilitados: un campo de otro nivel no viaja
            // en el POST y la regla del modelo no recibe referencias de más.
            caja.querySelectorAll('select, input').forEach(function (campo) {
                campo.disabled = ! visible;
            });
        });
        if (nivel === 'step') { pintaPasos(); }
        pintaConsecuencia();
    }

    function pintaPasos() {
        const pasos = PASOS[guiaPaso.value] || [];
        const actual = pasoSel.dataset.actual;
        pasoSel.innerHTML = '<option value="">— elige paso —</option>' + pasos.map(function (p) {
            return '<option value="' + p.id + '"' + (String(p.id) === actual ? ' selected' : '') + '>' + p.texto + '</option>';
        }).join('');
    }

    function pintaConsecuencia() {
        if (! sintoma || sintoma.disabled || ! sintoma.value) {
            if (conSec) { conSec.style.display = 'none'; }
            return;
        }
        const seguridad = sintoma.value === 'moho' || sintoma.value === 'sobrepresion';
        conSec.style.display = '';
        conSec.innerHTML = seguridad
            ? '<strong>Seguridad:</strong> saldrá para todos, gratis (Planes §3.2). '
              + 'El solucionador aún no existe: la fila espera a su ventana.'
            : '<strong>El 101:</strong> saldrá solo para Pro. '
              + 'El solucionador aún no existe: la fila espera a su ventana.';
    }

    nivelSel.addEventListener('change', pintaNivel);
    guiaPaso.addEventListener('change', function () { pasoSel.dataset.actual = ''; pintaPasos(); });
    if (sintoma) { sintoma.addEventListener('change', pintaConsecuencia); }
    pintaNivel();
})();
</script>

@endsection