@extends('layouts.app')

@section('content')
<style>
.cat-section { border-radius: 10px; padding: 6px 10px; }
.cat-blue   { background:#eff6ff; }
.cat-purple { background:#f5f3ff; }
.table-cat td, .table-cat th { padding: .3rem .5rem; font-size: .8rem; line-height: 1.2; }
.table-cat img, .table-cat .img-placeholder { width: 32px !important; height: 32px !important; }
.table-cat .form-select-sm { font-size: .74rem; padding: .15rem .35rem; }
.table-cat .btn-sm { padding: .12rem .4rem; font-size: .74rem; }
</style>

<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-2">
        <h5 class="text-secondary fw-bold mb-0"><i class="bi bi-grid-3x3-gap-fill me-1"></i>Gestión de Categorías</h5>
        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#createCategoryModal">
            <i class="bi bi-plus-lg"></i> Nueva Categoría
        </button>
    </div>

    @if(session('success'))<div class="alert alert-success py-1 px-2 small mb-2">{{ session('success') }}</div>@endif
    @if(session('error'))<div class="alert alert-danger py-1 px-2 small mb-2">{{ session('error') }}</div>@endif

    {{-- Barra de asignación masiva: para cuando hay muchas categorías y no
         tiene sentido entrar a editar una por una. Selecciona varias con los
         checkboxes de la izquierda, elige la impresora aquí, y aplica a todas
         de un jalón. --}}
    <form id="bulkPrinterForm" action="{{ route('categories.bulk_printer') }}" method="POST" class="mb-2">
        @csrf
        <div class="cat-section cat-purple d-flex align-items-center gap-2 flex-wrap">
            <span class="fw-semibold" style="font-size:.8rem"><i class="bi bi-printer"></i> Asignar impresora a seleccionadas:</span>
            <select name="printer_id" class="form-select form-select-sm" style="max-width:200px">
                <option value="">Cocina (por defecto)</option>
                @foreach($printers as $printer)
                        <option value="{{ $printer->id }}">{{ $printer->name }}</option>
                @endforeach
            </select>
            <button type="submit" id="btnBulkApply" class="btn btn-sm btn-primary fw-semibold" disabled>
                <i class="bi bi-check2-all"></i> Aplicar a <span id="bulkCount">0</span>
            </button>
            <span class="text-muted" style="font-size:.7rem">Marca los checkboxes de la tabla.</span>
        </div>
    </form>

    <div class="cat-section cat-blue">
        <div class="table-responsive">
            <table class="table table-hover align-middle table-cat mb-0">
                <thead>
                    <tr>
                        <th style="width:30px"><input type="checkbox" id="checkAll" class="form-check-input"></th>
                        <th>Imagen</th>
                        <th>Nombre</th>
                        <th>Estado</th>
                        <th>Impresora</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($categories as $category)
                        <tr>
                            <td>
                                <input type="checkbox" class="form-check-input cat-checkbox" value="{{ $category->id }}"
                                       form="bulkPrinterForm" name="category_ids[]" onchange="actualizarContadorBulk()">
                            </td>
                            <td>
                                @if($category->image)
                                    <img src="{{ asset('storage/' . $category->image) }}" class="rounded" style="object-fit: cover;">
                                @else
                                    <div class="bg-secondary text-white d-flex justify-content-center align-items-center rounded img-placeholder">
                                        <i class="bi bi-image" style="font-size:.7rem"></i>
                                    </div>
                                @endif
                            </td>
                            <td class="fw-bold">{{ $category->name }}</td>
                            <td>
                                @if($category->is_active)
                                    <span class="badge bg-success" style="font-size:.68rem">Activo</span>
                                @else
                                    <span class="badge bg-secondary" style="font-size:.68rem">Inactivo</span>
                                @endif
                            </td>
                            <td>
                                <select class="form-select form-select-sm printer-inline-select" style="min-width:130px"
                                        data-category-id="{{ $category->id }}" onchange="guardarImpresoraInline(this)">
                                    <option value="">Cocina (por defecto)</option>
                                    @foreach($printers as $printer)
                                            <option value="{{ $printer->id }}" {{ $category->printer_id == $printer->id ? 'selected' : '' }}>{{ $printer->name }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td>
                                <button type="button" class="btn btn-sm btn-outline-primary me-1" title="Editar"
                                    onclick="editCategory({{ $category->id }}, '{{ addslashes($category->name) }}', {{ $category->image ? "'".asset('storage/'.$category->image)."'" : 'null' }}, {{ $category->printer_id ?? 'null' }})">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <form action="{{ route('categories.destroy', $category) }}" method="POST" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="confirmarAccion('Se eliminará la categoría \'{{ addslashes($category->name) }}\' de forma permanente.', {peligroso:true, confirmText:'Sí, eliminar', titulo:'¿Eliminar categoría?'}).then(ok => { if(ok) this.closest('form').submit(); });">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center text-muted py-3">
                                No hay categorías registradas aún.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="createCategoryModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Nueva Categoría</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('categories.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="name" class="form-label">Nombre de la Categoría</label>
                        <input type="text" class="form-control" id="name" name="name" required placeholder="Ej: Bebidas Calientes">
                    </div>
                    <div class="mb-3">
                        <label for="image" class="form-label">Imagen (Opcional)</label>
                        <input type="file" class="form-control" id="image" name="image" accept="image/*">
                    </div>
                    <div class="mb-3">
                        <label for="printer_id" class="form-label">¿A qué impresora imprime? <span class="text-muted small">(opcional)</span></label>
                        <select class="form-select" id="printer_id" name="printer_id">
                            <option value="">Cocina (por defecto)</option>
                            @foreach($printers as $printer)
                                    <option value="{{ $printer->id }}">{{ $printer->name }}</option>
                            @endforeach
                        </select>
                        <div class="form-text small">Ej: si esta categoría es "Carnes a la Parrilla", elige la impresora "Parrilla". Configúralas en Configuración → Impresoras.</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="editCategoryModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Editar Categoría</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editCategoryForm" action="" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="edit_name" class="form-label">Nombre de la Categoría</label>
                        <input type="text" class="form-control" id="edit_name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <img id="edit_current_image" src="" class="rounded mb-2 border d-none" width="70" height="70" style="object-fit:cover;">
                        <label for="edit_image" class="form-label">Imagen (deja en blanco para no cambiarla)</label>
                        <input type="file" class="form-control" id="edit_image" name="image" accept="image/*">
                    </div>
                    <div class="mb-3">
                        <label for="edit_printer_id" class="form-label">¿A qué impresora imprime? <span class="text-muted small">(opcional)</span></label>
                        <select class="form-select" id="edit_printer_id" name="printer_id">
                            <option value="">Cocina (por defecto)</option>
                            @foreach($printers as $printer)
                                    <option value="{{ $printer->id }}">{{ $printer->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Guardar Cambios</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    function editCategory(id, name, imageUrl, printerId) {
        document.getElementById('editCategoryForm').action = '{{ url("categories") }}/' + id;
        document.getElementById('edit_name').value = name;
        document.getElementById('edit_printer_id').value = printerId ?? '';
        const img = document.getElementById('edit_current_image');
        if (imageUrl) {
            img.src = imageUrl;
            img.classList.remove('d-none');
        } else {
            img.classList.add('d-none');
        }
        new bootstrap.Modal(document.getElementById('editCategoryModal')).show();
    }

    // ── Guardar la impresora de UNA categoría al instante (sin abrir el modal) ──
    function guardarImpresoraInline(select) {
        const categoryId = select.dataset.categoryId;
        const printerId = select.value;
        select.disabled = true;

        fetch(`{{ url('categories') }}/${categoryId}/printer`, {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
            body: JSON.stringify({ printer_id: printerId || null }),
        })
        .then(r => { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })
        .then(() => {
            select.classList.add('border-success');
            setTimeout(() => select.classList.remove('border-success'), 900);
        })
        .catch(() => {
            mostrarAlerta('No se pudo guardar. Revisa tu conexión e intenta de nuevo.', 'error', 'Ups');
        })
        .finally(() => { select.disabled = false; });
    }

    // ── Selección masiva: contador + "seleccionar todo" ──
    function actualizarContadorBulk() {
        const marcados = document.querySelectorAll('.cat-checkbox:checked').length;
        document.getElementById('bulkCount').textContent = marcados;
        document.getElementById('btnBulkApply').disabled = marcados === 0;
    }

    document.getElementById('checkAll').addEventListener('change', function () {
        document.querySelectorAll('.cat-checkbox').forEach(cb => cb.checked = this.checked);
        actualizarContadorBulk();
    });

    document.getElementById('bulkPrinterForm').addEventListener('submit', function (e) {
        const marcados = document.querySelectorAll('.cat-checkbox:checked').length;
        if (marcados === 0) { e.preventDefault(); return; }
        e.preventDefault();
        const nombreImpresora = this.querySelector('[name="printer_id"]').selectedOptions[0].text;
        const form = this;
        confirmarAccion(`Se va a asignar la impresora "${nombreImpresora}" a ${marcados} categoría(s).`, {
            titulo: '¿Confirmar asignación masiva?',
            confirmText: 'Sí, asignar',
        }).then(ok => { if (ok) HTMLFormElement.prototype.submit.call(form); });
    });
</script>
@endsection