@extends('layouts.admin')

@section('title', 'Catálogos')

@section('content')
@php
    $labels = [
        'categories' => 'Categorías',
        'brands' => 'Marcas',
        'units' => 'Unidades de inventario',
        'presentations' => 'Presentaciones',
    ];
    $singular = [
        'categories' => 'categoría',
        'brands' => 'marca',
        'units' => 'unidad de inventario',
        'presentations' => 'presentación',
    ];
    $subtitles = [
        'categories' => 'Atributos del catálogo auxiliar',
        'brands' => 'Atributos del catálogo auxiliar',
        'units' => 'Catálogo auxiliar de productos',
        'presentations' => 'Catálogo auxiliar de productos',
    ];
    $icons = [
        'categories' => 'bi-tags',
        'brands' => 'bi-award',
        'units' => 'bi-rulers',
        'presentations' => 'bi-layers',
    ];
@endphp

<div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
    <div>
        <h1 class="h3 mb-1 d-inline-flex align-items-center gap-2">
            {{ $labels[$catalog] }}
            @if($catalog === 'units')
                <x-help-tip text="Unidad mínima con la que se guarda el stock: lata, botella, pieza. No uses “caja” aquí — eso va en el empaque del producto." />
            @elseif($catalog === 'presentations')
                <x-help-tip text="Formato del producto (Lata 355ml, Botella 1L). Es descriptivo; no multiplica el inventario." />
            @elseif($catalog === 'categories')
                <x-help-tip text="Agrupación comercial del producto (bebidas, snacks, etc.)." />
            @elseif($catalog === 'brands')
                <x-help-tip text="Marca del fabricante o comercial." />
            @endif
        </h1>
        <p class="text-secondary mb-0">{{ $subtitles[$catalog] }}</p>
    </div>
    @if(auth()->user()->hasPermission('products.create'))
        <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#modalCreate">
            <i class="bi bi-plus-lg"></i> Nueva {{ $singular[$catalog] }}
        </button>
    @endif
</div>

@include('products.partials.catalog-nav', ['activeTab' => $catalog])

@if($errors->has('delete'))
    <div class="alert alert-danger">{{ $errors->first('delete') }}</div>
@endif

<div class="card">
    <div class="table-responsive">
        <table class="table align-middle mb-0">
            <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Código</th>
                    @if($catalog === 'units')
                        <th>Símbolo</th>
                    @endif
                    <th>Estado</th>
                    <th style="width:1%"></th>
                </tr>
            </thead>
            <tbody>
                @forelse($items as $item)
                    <tr>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <span class="product-thumb-placeholder"><i class="bi {{ $icons[$catalog] }}"></i></span>
                                <span class="fw-semibold">{{ $item->name }}</span>
                            </div>
                        </td>
                        <td class="font-monospace small">{{ $item->code }}</td>
                        @if($catalog === 'units')
                            <td>{{ $item->symbol ?: '—' }}</td>
                        @endif
                        <td>
                            <span class="badge text-bg-{{ $item->is_active ? 'success' : 'secondary' }}">
                                {{ $item->is_active ? 'Activo' : 'Inactivo' }}
                            </span>
                        </td>
                        <td class="text-nowrap">
                            @if(auth()->user()->hasPermission('products.update'))
                                <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="modal" data-bs-target="#modalEdit{{ $item->id }}">
                                    Editar
                                </button>
                                <form class="d-inline" method="POST" action="{{ route('catalogs.destroy', [$catalog, $item->id]) }}" onsubmit="return confirm(@json('¿Eliminar '.$singular[$catalog].' “'.$item->name.'”? Si está en uso por productos, no se permitirá.'));">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger" type="submit">
                                        <i class="bi bi-trash"></i> Eliminar
                                    </button>
                                </form>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="{{ $catalog === 'units' ? 5 : 4 }}">
                            <div class="product-empty">
                                <div class="product-empty-icon"><i class="bi {{ $icons[$catalog] }}"></i></div>
                                <div class="fw-semibold mb-1">Sin registros</div>
                                <div class="text-secondary small mb-3">Cree el primero para usarlo en productos.</div>
                                @if(auth()->user()->hasPermission('products.create'))
                                    <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#modalCreate">
                                        <i class="bi bi-plus-lg"></i> Crear
                                    </button>
                                @endif
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if(method_exists($items, 'hasPages') && $items->hasPages())
        <div class="card-footer">{{ $items->links() }}</div>
    @endif
</div>

@foreach($items as $item)
<div class="modal fade" id="modalEdit{{ $item->id }}" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <form class="modal-content" method="POST" action="{{ route('catalogs.update', [$catalog, $item->id]) }}">
            @csrf
            @method('PUT')
            <div class="modal-header">
                <h5 class="modal-title">Editar {{ $singular[$catalog] }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label class="form-label">Nombre</label>
                <input class="form-control mb-3" name="name" value="{{ $item->name }}" required>
                <label class="form-label">Código</label>
                <input class="form-control mb-3" value="{{ $item->code }}" readonly>
                @if($catalog === 'units')
                    <label class="form-label">Símbolo</label>
                    <input class="form-control mb-3" name="symbol" value="{{ $item->symbol }}">
                @endif
                <label class="form-label">Descripción</label>
                <textarea class="form-control mb-3" name="description">{{ $item->description }}</textarea>
                <label class="form-check">
                    <input class="form-check-input" type="checkbox" name="is_active" value="1" @checked($item->is_active)> Activo
                </label>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Cancelar</button>
                <button class="btn btn-primary" type="submit">Guardar</button>
            </div>
        </form>
    </div>
</div>
@endforeach

<div class="modal fade" id="modalCreate" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <form class="modal-content" method="POST" action="{{ route('catalogs.store', $catalog) }}">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Nueva {{ $singular[$catalog] }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label class="form-label">Nombre</label>
                <input class="form-control mb-3" name="name" required autofocus>
                <p class="small text-secondary mb-3">El código se genera automáticamente.</p>
                @if($catalog === 'units')
                    <label class="form-label">Símbolo</label>
                    <input class="form-control mb-3" name="symbol" placeholder="Ej. und, kg, lt">
                @endif
                <label class="form-label">Descripción</label>
                <textarea class="form-control" name="description"></textarea>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Cancelar</button>
                <button class="btn btn-primary" type="submit">Guardar</button>
            </div>
        </form>
    </div>
</div>
@endsection