@extends('admin.layouts.admin')

@section('title', 'Recetas')

@php
    $fmt = fn ($v) => $v !== null ? rtrim(rtrim(number_format((float) $v, 3, ',', '.'), '0'), ',') : null;
    $statusBadge = ['published' => 'badge-active', 'draft' => 'badge-paused', 'pending' => 'badge-warn', 'rejected' => 'badge-warn'];
@endphp

@section('content')

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <div class="admin-page-title">Recetas</div>
        <p class="admin-page-sub mb-0">Todas las recetas del catálogo.</p>
    </div>
    <a href="{{ route('admin.recetas.wizard.create') }}" class="btn btn-fermenty-primary btn-sm">+ Nueva receta</a>
</div>

{{-- Filtros --}}
<div class="admin-card mb-3">
    <form method="GET" action="{{ route('admin.recetas.index') }}" class="row g-2 align-items-end">
        <div class="col-12 col-md-4">
            <label class="form-label">Categoría (tipo de fermentación)</label>
            <select name="category" class="form-select form-select-sm">
                <option value="">Todas</option>
                @foreach($categories as $cat)
                    <option value="{{ $cat->id }}" {{ $categoryId === $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">Fermento</label>
            <select name="ferment" class="form-select form-select-sm">
                <option value="">Todos</option>
                @foreach($ferments as $f)
                    <option value="{{ $f->id }}" {{ $fermentId === $f->id ? 'selected' : '' }}>{{ $f->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-12 col-md-4 d-flex gap-2">
            <button type="submit" class="btn btn-fermenty-primary btn-sm">Filtrar</button>
            @if($categoryId || $fermentId)
                <a href="{{ route('admin.recetas.index') }}" class="btn btn-fermenty-outline btn-sm">Limpiar</a>
            @endif
        </div>
    </form>
</div>

<div class="admin-card">
    <div class="admin-table-wrap">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Imagen</th>
                    <th>Receta</th>
                    <th>Fermento</th>
                    <th>Categoría</th>
                    <th>Rinde</th>
                    <th>Ingr.</th>
                    <th>Lotes</th>
                    <th>Estado</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                @forelse($recipes as $recipe)
                    <tr>
                        <td>
                            @if($recipe->image_url)
                                <img src="{{ $recipe->image_url }}" alt="{{ $recipe->name }}" style="width:56px;height:40px;object-fit:cover;border-radius:8px;">
                            @else
                                <span class="text-muted" style="font-size:0.8rem;">—</span>
                            @endif
                        </td>
                        <td>
                            <div class="admin-user-name">
                                {{ $recipe->name }}
                                @if($recipe->is_official)
                                    <span class="fermenty-badge badge-premium" style="font-size:0.62rem;">oficial</span>
                                @endif
                            </div>
                            <div class="admin-user-email">{{ $recipe->slug }}</div>
                        </td>
                        <td class="admin-user-email">{{ $recipe->guide?->name ?? '—' }}</td>
                        <td>
                            @if($recipe->guide?->category)
                                <span class="fermenty-badge badge-active" style="font-size:0.72rem;">{{ $recipe->guide->category->name }}</span>
                            @else
                                <span class="text-muted" style="font-size:0.8rem;">—</span>
                            @endif
                        </td>
                        <td class="admin-user-email">
                            @if($recipe->base_yield_value){{ $fmt($recipe->base_yield_value) }} {{ $recipe->base_yield_unit }}@else—@endif
                        </td>
                        <td>{{ $recipe->ingredients_count }}</td>
                        <td>{{ $recipe->batches_count }}</td>
                        <td><span class="fermenty-badge {{ $statusBadge[$recipe->status] ?? 'badge-paused' }}">{{ $recipe->status }}</span></td>
                        <td>
                            <div class="d-flex gap-1">
                                <a href="{{ route('admin.recetas.wizard.steps', $recipe) }}" class="btn-xs-admin">Editar</a>
                                <button type="button" class="btn-xs-admin js-duplicar"
                                        data-id="{{ $recipe->id }}" data-name="{{ $recipe->name }}"
                                        title="Copia perfil e ingredientes; luego cambias el saborizante">Duplicar</button>
                                @if($recipe->batches_count === 0 && $recipe->guide_id)
                                    <form method="POST"
                                          action="{{ route('admin.fermentos.recetas.destroy', [$recipe->guide_id, $recipe]) }}"
                                          onsubmit="return confirm('¿Eliminar esta receta?')">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn-xs-admin" style="color:#7A1A1A;">Eliminar</button>
                                    </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="9" class="text-center text-muted py-3">No hay recetas con esos filtros.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($recipes->hasPages())
        <div class="d-flex justify-content-center mt-3">{{ $recipes->links() }}</div>
    @endif
</div>

{{-- Modal de duplicar: pide el nombre nuevo (slug limpio de entrada), valida en el
     sitio y reabre con el error de colisión sin perder el gesto. --}}
<div id="dupModal" 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:440px;width:92%;box-shadow:0 12px 40px rgba(0,0,0,.2);">
        <h5 style="margin:0 0 4px;">Duplicar receta</h5>
        <p class="text-muted" style="font-size:.82rem;margin-bottom:14px;">Hereda el perfil y los ingredientes; solo cambias lo que varíe (el saborizante).</p>
        <form method="POST" action="{{ route('admin.recetas.wizard.duplicate') }}">
            @csrf
            <input type="hidden" name="source_id" id="dupSource" value="{{ old('source_id') }}">
            <label class="form-label">Nombre de la nueva receta</label>
            <input type="text" name="name" id="dupName" required
                   class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}">
            @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
            <div class="d-flex gap-2 mt-3 justify-content-end">
                <button type="button" class="btn btn-fermenty-outline btn-sm" onclick="dupClose()">Cancelar</button>
                <button type="submit" class="btn btn-fermenty-primary btn-sm">Duplicar</button>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script>
    function dupOpen(id, name) {
        document.getElementById('dupSource').value = id;
        var n = document.getElementById('dupName');
        n.placeholder = name;                 // el origen como pista, no como valor
        document.getElementById('dupModal').style.display = 'flex';
        n.focus();
    }
    function dupClose() { document.getElementById('dupModal').style.display = 'none'; }
    document.querySelectorAll('.js-duplicar').forEach(function (b) {
        b.addEventListener('click', function () { dupOpen(b.dataset.id, b.dataset.name); });
    });
    document.getElementById('dupModal').addEventListener('click', function (e) {
        if (e.target === this) dupClose();     // clic fuera cierra
    });
    @if($errors->has('name') && old('source_id'))
        document.getElementById('dupModal').style.display = 'flex';  // reabre con el error
    @endif
</script>
@endpush