@extends('admin.layouts.admin')

@section('title', isset($step) ? 'Editar paso' : 'Nuevo paso')

@section('content')

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

<div class="admin-page-title">
    {{ isset($step) ? 'Editar paso ' . $step->step_number . ': ' . $step->title : 'Nuevo paso — ' . $fermento->name }}
</div>
<p class="admin-page-sub">{{ $fermento->name }} — {{ $fermento->name }}</p>

<form method="POST"
      action="{{ isset($step)
          ? route('admin.fermentos.pasos.update', [$fermento, $step])
          : route('admin.fermentos.pasos.store', $fermento) }}"
      class="fermenty-form">
    @csrf
    @if(isset($step)) @method('PUT') @endif

    {{-- Info del paso --}}
    <div class="admin-card mb-4">
        <div class="admin-card-title">Información del paso</div>

        <div class="row g-3 mb-3">
            <div class="col-md-2">
                <label class="form-label">Número</label>
                <input type="number" name="step_number" class="form-control"
                       value="{{ old('step_number', $step->step_number ?? $nextStepNumber ?? 1) }}"
                       min="1" required>
            </div>
            <div class="col-md-10">
                <label class="form-label">Título del paso</label>
                <input type="text" name="title"
                       class="form-control @error('title') is-invalid @enderror"
                       value="{{ old('title', $step->title ?? '') }}"
                       placeholder="Ej: Preparar el té" required>
                @error('title') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>
        </div>

        <div class="mb-3">
            <label class="form-label">Descripción</label>
            <textarea name="description" class="form-control" rows="4"
                      placeholder="Explica qué debe hacer el usuario en este paso...">{{ old('description', $step->description ?? '') }}</textarea>
        </div>

        <div class="row g-3">
            <div class="col-md-4">
                <label class="form-label">Día mínimo</label>
                <input type="number" name="min_day" class="form-control" min="0"
                       value="{{ old('min_day', $step->min_day ?? 0) }}"
                       placeholder="0">
            </div>
            <div class="col-md-4">
                <label class="form-label">Día máximo</label>
                <input type="number" name="max_day" class="form-control" min="0"
                       value="{{ old('max_day', $step->max_day ?? '') }}"
                       placeholder="Opcional">
            </div>
            <div class="col-md-4 d-flex align-items-end">
                <div class="d-flex align-items-center gap-2 pb-2">
                    <input type="checkbox" name="is_optional" id="is_optional"
                           class="form-check-input mt-0" value="1"
                           {{ old('is_optional', $step->is_optional ?? false) ? 'checked' : '' }}>
                    <label for="is_optional" class="form-check-label">Paso opcional</label>
                </div>
            </div>
        </div>
    </div>

    {{-- Acciones --}}
    <div class="admin-card mb-4">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="admin-card-title mb-0">Acciones del paso</div>
            <button type="button" class="btn btn-fermenty-outline btn-sm" id="addAction">
                + Añadir acción
            </button>
        </div>

        <div id="actionsList">
            @if(isset($step) && $step->actions->count() > 0)
                @foreach($step->actions as $i => $action)
                    <div class="action-row mb-3" id="action_{{ $i }}">
                        <div class="d-flex gap-2 align-items-start">
                            <select name="actions[{{ $i }}][action_type]"
                                    class="form-select" style="width:140px;flex-shrink:0;">
                                @foreach(['prepare','wait','bottle','taste','measure','stir','filter','other'] as $type)
                                    <option value="{{ $type }}"
                                        {{ $action->action_type === $type ? 'selected' : '' }}>
                                        {{ $type }}
                                    </option>
                                @endforeach
                            </select>
                            <input type="text"
                                   name="actions[{{ $i }}][description]"
                                   class="form-control"
                                   value="{{ $action->description }}"
                                   placeholder="Descripción de la acción" required>
                            <input type="hidden" name="actions[{{ $i }}][order]" value="{{ $action->order }}">
                            <button type="button" class="btn btn-sm flex-shrink-0"
                                    style="background:#FDECEA;color:#7A1A1A;border:0.5px solid #F5B8B8;border-radius:8px;padding:8px 12px;"
                                    onclick="removeAction('action_{{ $i }}')">✕</button>
                        </div>
                    </div>
                @endforeach
            @else
                <div id="actionsHint" class="text-center py-3"
                     style="font-size:0.85rem;color:#7AB858;">
                    Pulsa "Añadir acción" para definir las acciones concretas de este paso
                </div>
            @endif
        </div>
    </div>

    {{-- Pistas (Hints) --}}
    <div class="admin-card mb-4">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="admin-card-title mb-0">Pistas del paso (Premium)</div>
            <button type="button" class="btn btn-fermenty-outline btn-sm" id="addHint">
                + Añadir pista
            </button>
        </div>

        <div id="hintsList">
            @if(isset($step) && $step->hints->count() > 0)
                @foreach($step->hints as $i => $hint)
                    <div class="hint-row mb-3" id="hint_{{ $i }}">
                        <div class="d-flex gap-2 align-items-start mb-2">
                            <input type="hidden" name="hints[{{ $i }}][id]" value="{{ $hint->id }}">
                            <input type="text"
                                   name="hints[{{ $i }}][title]"
                                   class="form-control"
                                   style="max-width:220px;"
                                   value="{{ $hint->title }}"
                                   placeholder="Título corto (opcional)">
                            <input type="hidden" name="hints[{{ $i }}][order]" value="{{ $hint->order }}">
                            <button type="button" class="btn btn-sm flex-shrink-0"
                                    style="background:#FDECEA;color:#7A1A1A;border:0.5px solid #F5B8B8;border-radius:8px;padding:8px 12px;"
                                    onclick="removeHint('hint_{{ $i }}')">✕</button>
                        </div>
                        <textarea name="hints[{{ $i }}][content]"
                                  class="form-control"
                                  rows="3"
                                  placeholder="Detalle importante o consejo útil para este paso"
                                  required>{{ $hint->content }}</textarea>
                    </div>
                @endforeach
            @else
                <div id="hintsHint" class="text-center py-3"
                     style="font-size:0.85rem;color:#7AB858;">
                    Pulsa "Añadir pista" para agregar consejos que verá el usuario Premium en este paso
                </div>
            @endif
        </div>
    </div>

    {{-- Submit --}}
    <div class="d-flex gap-3">
        <button type="submit" class="btn btn-fermenty-primary">
            {{ isset($step) ? 'Guardar cambios' : 'Crear paso' }}
        </button>
        <a href="{{ route('admin.fermentos.pasos.index', $fermento) }}"
           class="btn btn-fermenty-outline">Cancelar</a>
    </div>

</form>

@endsection

@push('scripts')
<script>
var actionCount = {{ isset($step) ? $step->actions->count() : 0 }};
var actionTypes = ['prepare','wait','bottle','taste','measure','stir','filter','other'];
var hintCount = {{ isset($step) ? $step->hints->count() : 0 }};

document.getElementById('addAction').addEventListener('click', function() {
    var hint = document.getElementById('actionsHint');
    if (hint) hint.style.display = 'none';

    var typeOptions = actionTypes.map(function(t) {
        return '<option value="' + t + '">' + t + '</option>';
    }).join('');

    var html = '<div class="action-row mb-3" id="action_' + actionCount + '">' +
        '<div class="d-flex gap-2 align-items-start">' +
            '<select name="actions[' + actionCount + '][action_type]" class="form-select" style="width:140px;flex-shrink:0;">' +
                typeOptions +
            '</select>' +
            '<input type="text" name="actions[' + actionCount + '][description]" class="form-control" placeholder="Descripción de la acción" required>' +
            '<input type="hidden" name="actions[' + actionCount + '][order]" value="' + (actionCount + 1) + '">' +
            '<button type="button" class="btn btn-sm flex-shrink-0" ' +
                'style="background:#FDECEA;color:#7A1A1A;border:0.5px solid #F5B8B8;border-radius:8px;padding:8px 12px;" ' +
                'onclick="removeAction(\'action_' + actionCount + '\')">✕</button>' +
        '</div>' +
    '</div>';

    document.getElementById('actionsList').insertAdjacentHTML('beforeend', html);
    actionCount++;
});

document.getElementById('addHint').addEventListener('click', function() {
    var hint = document.getElementById('hintsHint');
    if (hint) hint.style.display = 'none';

    var html = '<div class="hint-row mb-3" id="hint_' + hintCount + '">' +
        '<div class="d-flex gap-2 align-items-start mb-2">' +
            '<input type="text" name="hints[' + hintCount + '][title]" class="form-control" style="max-width:220px;" placeholder="Título corto (opcional)">' +
            '<input type="hidden" name="hints[' + hintCount + '][order]" value="' + (hintCount + 1) + '">' +
            '<button type="button" class="btn btn-sm flex-shrink-0" ' +
                'style="background:#FDECEA;color:#7A1A1A;border:0.5px solid #F5B8B8;border-radius:8px;padding:8px 12px;" ' +
                'onclick="removeHint(\'hint_' + hintCount + '\')">✕</button>' +
        '</div>' +
        '<textarea name="hints[' + hintCount + '][content]" class="form-control" rows="3" placeholder="Detalle importante o consejo útil para este paso" required></textarea>' +
    '</div>';

    document.getElementById('hintsList').insertAdjacentHTML('beforeend', html);
    hintCount++;
});

function removeAction(id) {
    var el = document.getElementById(id);
    if (el) el.remove();
    if (document.querySelectorAll('.action-row').length === 0) {
        var hint = document.getElementById('actionsHint');
        if (hint) hint.style.display = 'block';
    }
}

function removeHint(id) {
    var el = document.getElementById(id);
    if (el) el.remove();
    if (document.querySelectorAll('.hint-row').length === 0) {
        var hint = document.getElementById('hintsHint');
        if (hint) hint.style.display = 'block';
    }
}
</script>
@endpush