@extends('layouts.master')

@section('title')
    Productos
@endsection

@section('css')
<link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
<div class="row">
    <div class="col-12">
        <h4 class="mb-0 text-primary fw-semibold" style="color: #020f82 !important;">Productos</h4>
        <hr class="my-3">

        <div class="card">
            <div class="card-body">
                <p class="text-muted mb-4">
                    Usa el siguiente formulario para mostrar los productos registrados en la aplicación.
                </p>

                <div class="row align-items-end g-3">
                    <div class="col-md-6">
                        <div class="row g-3">
                            <div class="col-12">
                                <label for="producto" class="form-label">Producto</label>
                                <input type="text" class="form-control" id="producto" name="producto" placeholder="">
                            </div>
                            <div class="col-12">
                                <label for="clasificacion" class="form-label">Clasificación</label>
                                <select class="form-select" id="clasificacion" name="clasificacion">
                                    <option value="">-- Todos --</option>
                                    <option value="uniformes">Uniformes</option>
                                    <option value="papeleria">Papelería</option>
                                    <option value="otros">Otros</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row g-3">
                            <div class="col-12">
                                <label for="estatus" class="form-label">Estatus</label>
                                <select class="form-select" id="estatus" name="estatus">
                                    <option value="activos">Activos</option>
                                    <option value="inactivos">Inactivos</option>
                                    <option value="ambos" selected>Ambos</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mt-2">
                    <div class="col-12 d-flex justify-content-end gap-2">
                        <button type="button" class="btn btn-primary btn-sm px-4 rounded" id="btn-buscar">
                            <i class="ri-search-line align-middle me-1"></i> Buscar
                        </button>
                        <button type="button" class="btn btn-warning text-white btn-sm px-4 rounded" id="btn-registrar" data-bs-toggle="modal" data-bs-target="#modalNuevoProducto">
                            <i class="ri-add-line align-middle me-1"></i> Registrar
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-body">
                <div id="productos-empty-state" class="text-center py-5">
                    <div class="avatar-xl mx-auto mb-2">
                        <div class="avatar-title bg-dark-subtle rounded-circle d-inline-flex align-items-center justify-content-center">
                            <i class="ri-information-line text-white fs-1"></i>
                        </div>
                    </div>
                    <p class="text-muted mb-0">Usa los filtros y da clic en Buscar.</p>
                </div>
                <div id="productos-results" class="d-none table-responsive">
                    <div class="d-flex justify-content-end gap-2 mb-3 flex-wrap">
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="btn-imprimir"><i class="ri-printer-line me-1"></i> Imprimir</button>
                        <button type="button" class="btn btn-outline-danger btn-sm" id="btn-pdf"><i class="ri-file-pdf-line me-1"></i> PDF</button>
                        <button type="button" class="btn btn-outline-success btn-sm" id="btn-excel"><i class="ri-file-excel-2-line me-1"></i> Excel</button>
                    </div>
                    <table class="table table-striped table-hover align-middle mb-0">
                        <thead class="table-primary">
                            <tr>
                                <th class="text-white">Descripción</th>
                                <th class="text-white">Clasificación</th>
                                <th class="text-white">Unidad</th>
                                <th class="text-white">Activo</th>
                                <th class="text-white text-end">Opciones</th>
                            </tr>
                        </thead>
                        <tbody id="tbody-productos"></tbody>
                    </table>
                    <p class="text-muted small mt-2 mb-0" id="productos-resumen"></p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalNuevoProducto" tabindex="-1" aria-labelledby="modalNuevoProductoLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title fw-bold" id="modalNuevoProductoLabel">Nuevo producto</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <p class="mb-4 text-dark" id="modal-prod-instruccion">Usa el siguiente formulario para <strong>REGISTRAR</strong> un nuevo producto.</p>

                <form id="formNuevoProducto">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="nombre_producto" class="form-label">* Nombre del producto</label>
                            <input type="text" class="form-control" id="nombre_producto" name="nombre_producto" required>
                        </div>
                        <div class="col-md-6 d-flex align-items-end gap-3 pb-1 flex-wrap">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="producto_activo" name="producto_activo" checked>
                                <label class="form-check-label" for="producto_activo">Producto activo</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="aplica_inventario" name="aplica_inventario" checked>
                                <label class="form-check-label" for="aplica_inventario">Aplica inventario</label>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label for="clasificacion_modal" class="form-label">* Clasificación</label>
                            <select class="form-select" id="clasificacion_modal" name="clasificacion_modal" required>
                                <option value="uniformes" selected>Uniformes</option>
                                <option value="libros_libretas">Libros y Libretas</option>
                                <option value="material_didactivco">Material Didáctico</option>

                                <option value="otros">Otros</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="unidad" class="form-label">Unidad</label>
                            <select class="form-select" id="unidad" name="unidad">
                                <option value="pieza" selected>Pieza</option>
                                <option value="galon">Galón</option>
                                <option value="litro">Litro</option>
                                <option value="kg">Kilogramo</option>
                                <option value="caja">Caja</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="modalidad_precios" class="form-label">* Modalidad de precios</label>
                            <select class="form-select" id="modalidad_precios" name="modalidad_precios" required>
                                <option value="unico" selected>Único</option>
                                <option value="variable">Por presentación</option>
                            </select>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-12">
                            <label for="descripcion" class="form-label">Descripción</label>
                            <textarea class="form-control" id="descripcion" name="descripcion" rows="3"></textarea>
                        </div>
                    </div>

                    <h6 class="text-primary fw-bold mb-2">Recargos</h6>
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label for="modalidad_recargos" class="form-label">* Modalidad de recargos</label>
                            <select class="form-select" id="modalidad_recargos" name="modalidad_recargos" required>
                                <option value="importe" selected>Importe</option>
                                <option value="porcentaje">Porcentaje</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="monto_recargo" class="form-label">Monto recargo</label>
                            <input type="number" class="form-control" id="monto_recargo" name="monto_recargo" value="0" min="0" step="0.01">
                        </div>
                        <div class="col-md-4">
                            <label for="abreviatura" class="form-label">* Abreviatura</label>
                            <input type="text" class="form-control" id="abreviatura" name="abreviatura" required maxlength="32">
                        </div>
                    </div>

                    <h6 class="text-primary fw-bold mb-2">Códigos</h6>
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <label for="codigo_barras" class="form-label">Código de barras</label>
                            <input type="text" class="form-control" id="codigo_barras" name="codigo_barras">
                        </div>
                        <div class="col-md-6">
                            <label for="codigo_ticket" class="form-label">Código para ticket</label>
                            <input type="text" class="form-control" id="codigo_ticket" name="codigo_ticket">
                        </div>
                    </div>

                    <h6 class="text-primary fw-bold mb-2">Impuestos</h6>
                    <div class="mb-4">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="iva" name="iva">
                            <label class="form-check-label" for="iva">IVA</label>
                        </div>
                    </div>

                    <h6 class="text-primary fw-bold mb-2">Precios y costo</h6>
                    <div class="row mb-4">
                        <div class="col-6 col-md mb-3">
                            <label for="costo" class="form-label">* Costo</label>
                            <div class="input-group">
                                <span class="input-group-text">$</span>
                                <input type="number" class="form-control" id="costo" name="costo" value="0" min="0" step="0.01" required>
                            </div>
                        </div>
                        @foreach ([
                            'precio_general' => 'Precio general',
                            'precio_empleados' => 'Precio empleados',
                            'precio_publico' => 'Precio público',
                            'precio_paquetes' => 'Precio paquetes',
                        ] as $id => $etiq)
                            <div class="col-6 col-md mb-3">
                                <label for="{{ $id }}" class="form-label">* {{ $etiq }}</label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control" id="{{ $id }}" name="{{ $id }}" value="0" min="0" step="0.01" required>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <p class="text-dark small fw-bold mb-0">Nota: Llenar campos obligatorios (*).</p>
                </form>
            </div>
            <div class="modal-footer justify-content-end border-top gap-2">
                <button type="button" class="btn btn-dark rounded" data-bs-dismiss="modal">Regresar</button>
                <button type="button" class="btn btn-success rounded" id="btn-guardar-producto">Guardar</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
@endsection

@section('script-bottom')
<script>
(function() {
    var TIPO = 'producto';
    var urlBuscar = @json(route('conceptos-venta.buscar'));
    var urlStore = @json(route('conceptos-venta.store'));
    var urlShowTpl = @json(route('conceptos-venta.show', ['concepto' => '__ID__']));
    var urlUpdateTpl = @json(route('conceptos-venta.update', ['concepto' => '__ID__']));
    var urlDeleteTpl = @json(route('conceptos-venta.destroy', ['concepto' => '__ID__']));
    var csrf = @json(csrf_token());

    var clasifLabels = { 'uniformes': 'Uniformes', 'papeleria': 'Papelería', 'otros': 'Otros' };
    var unidadLabels = { pieza: 'Pieza', galon: 'Galón', litro: 'Litro', kg: 'Kilogramo', caja: 'Caja' };
    var editId = null;
    var modalEl = document.getElementById('modalNuevoProducto');
    var modalTitle = document.getElementById('modalNuevoProductoLabel');
    var modalInstr = document.getElementById('modal-prod-instruccion');

    function escapeHtml(s) {
        var d = document.createElement('div');
        d.textContent = s;
        return d.innerHTML;
    }

    function limpiarModal() {
        editId = null;
        document.getElementById('formNuevoProducto').reset();
        document.getElementById('producto_activo').checked = true;
        document.getElementById('aplica_inventario').checked = true;
        document.getElementById('costo').value = '0';
        document.getElementById('monto_recargo').value = '0';
        ['precio_general','precio_empleados','precio_publico','precio_paquetes'].forEach(function(id) {
            document.getElementById(id).value = '0';
        });
        modalTitle.textContent = 'Nuevo producto';
        modalInstr.innerHTML = 'Usa el siguiente formulario para <strong>REGISTRAR</strong> un nuevo producto.';
    }

    document.getElementById('btn-registrar').addEventListener('click', limpiarModal);
    modalEl.addEventListener('hidden.bs.modal', limpiarModal);

    function renderTabla(items) {
        var tbody = document.getElementById('tbody-productos');
        tbody.innerHTML = '';
        items.forEach(function(row) {
            var tr = document.createElement('tr');
            var chk = row.activo ? 'checked' : '';
            var id = parseInt(row.id, 10);
            var clas = clasifLabels[row.clasificacion] || row.clasificacion;
            var unidad = row.unidad ? (unidadLabels[row.unidad] || row.unidad) : '—';
            tr.innerHTML =
                '<td>' + escapeHtml(row.nombre) + '</td>' +
                '<td>' + escapeHtml(clas) + '</td>' +
                '<td>' + escapeHtml(unidad) + '</td>' +
                '<td><input type="checkbox" class="form-check-input" disabled ' + chk + '></td>' +
                '<td class="text-end text-nowrap">' +
                '<button type="button" class="btn btn-sm btn-outline-primary btn-editar-pr me-1" data-id="' + id + '"><i class="ri-pencil-line"></i></button>' +
                '<button type="button" class="btn btn-sm btn-outline-danger btn-eliminar-pr" data-id="' + id + '"><i class="ri-delete-bin-line"></i></button>' +
                '</td>';
            tbody.appendChild(tr);
        });
        document.getElementById('productos-resumen').textContent = items.length ? ('Mostrando ' + items.length + ' registro(s).') : '';
    }

    function mensajeError(res, fb) {
        return res.json().then(function(b) {
            if (b.errors) {
                var m = [];
                Object.keys(b.errors).forEach(function(k) { m = m.concat(b.errors[k]); });
                return m.join('\n') || fb;
            }
            return b.message || fb;
        }).catch(function() { return fb; });
    }

    document.getElementById('btn-buscar').addEventListener('click', function() {
        var p = new URLSearchParams();
        p.set('tipo', TIPO);
        var q = (document.getElementById('producto').value || '').trim();
        var cl = document.getElementById('clasificacion').value;
        var est = document.getElementById('estatus').value;
        if (q) p.set('q', q);
        if (cl) p.set('clasificacion', cl);
        if (est) p.set('estatus', est);

        fetch(urlBuscar + '?' + p.toString(), { headers: { 'Accept': 'application/json' }, credentials: 'same-origin' })
            .then(function(r) { if (!r.ok) throw new Error(); return r.json(); })
            .then(function(data) {
                var items = data.items || [];
                document.getElementById('productos-empty-state').classList.add('d-none');
                document.getElementById('productos-results').classList.remove('d-none');
                if (!items.length) {
                    document.getElementById('tbody-productos').innerHTML =
                        '<tr><td colspan="5" class="text-center text-muted py-4">Sin resultados.</td></tr>';
                    document.getElementById('productos-resumen').textContent = '';
                    return;
                }
                renderTabla(items);
            })
            .catch(function() { Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudo buscar.' }); });
    });

    function payloadDesdeFormulario() {
        return {
            tipo: TIPO,
            nombre: (document.getElementById('nombre_producto').value || '').trim(),
            activo: document.getElementById('producto_activo').checked,
            clasificacion: document.getElementById('clasificacion_modal').value,
            unidad: document.getElementById('unidad').value || null,
            aplica_inventario: document.getElementById('aplica_inventario').checked,
            modalidad_precios: document.getElementById('modalidad_precios').value,
            descripcion: (document.getElementById('descripcion').value || '').trim() || null,
            modalidad_recargos: document.getElementById('modalidad_recargos').value,
            monto_recargo: parseFloat(document.getElementById('monto_recargo').value) || 0,
            abreviatura: (document.getElementById('abreviatura').value || '').trim(),
            codigo_barras: (document.getElementById('codigo_barras').value || '').trim() || null,
            codigo_ticket: (document.getElementById('codigo_ticket').value || '').trim() || null,
            aplica_iva: document.getElementById('iva').checked,
            costo: parseFloat(document.getElementById('costo').value) || 0,
            precio_general: parseFloat(document.getElementById('precio_general').value) || 0,
            precio_empleados: parseFloat(document.getElementById('precio_empleados').value) || 0,
            precio_publico: parseFloat(document.getElementById('precio_publico').value) || 0,
            precio_paquetes: parseFloat(document.getElementById('precio_paquetes').value) || 0
        };
    }

    document.getElementById('btn-guardar-producto').addEventListener('click', function() {
        var pl = payloadDesdeFormulario();
        if (!pl.nombre) { Swal.fire({ icon: 'warning', text: 'Indica el nombre del producto.' }); return; }
        if (!pl.abreviatura) { Swal.fire({ icon: 'warning', text: 'Indica la abreviatura.' }); return; }

        var btn = document.getElementById('btn-guardar-producto');
        btn.disabled = true;
        var url = editId ? urlUpdateTpl.replace('__ID__', encodeURIComponent(editId)) : urlStore;
        var method = editId ? 'PUT' : 'POST';

        fetch(url, {
            method: method,
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf, 'X-Requested-With': 'XMLHttpRequest' },
            credentials: 'same-origin',
            body: JSON.stringify(pl)
        }).then(function(r) {
            if (r.ok) return r.json().then(function(b) {
                Swal.fire({ icon: 'success', text: b.message || 'Guardado.' });
                var m = bootstrap.Modal.getInstance(modalEl);
                if (m) m.hide();
                document.getElementById('btn-buscar').click();
            });
            return mensajeError(r, 'No se pudo guardar.').then(function(msg) { Swal.fire({ icon: 'error', text: msg }); });
        }).catch(function() { Swal.fire({ icon: 'error', text: 'Error de red.' }); }).finally(function() { btn.disabled = false; });
    });

    document.getElementById('tbody-productos').addEventListener('click', function(e) {
        var ed = e.target.closest('.btn-editar-pr');
        if (ed) {
            var id = parseInt(ed.getAttribute('data-id'), 10);
            fetch(urlShowTpl.replace('__ID__', encodeURIComponent(id)), { headers: { 'Accept': 'application/json' }, credentials: 'same-origin' })
                .then(function(r) { if (!r.ok) throw new Error(); return r.json(); })
                .then(function(d) {
                    editId = d.id;
                    document.getElementById('nombre_producto').value = d.nombre || '';
                    document.getElementById('producto_activo').checked = !!d.activo;
                    document.getElementById('aplica_inventario').checked = d.aplica_inventario !== false && d.aplica_inventario !== null;
                    document.getElementById('clasificacion_modal').value = d.clasificacion || 'uniformes';
                    document.getElementById('unidad').value = d.unidad || 'pieza';
                    document.getElementById('modalidad_precios').value = d.modalidad_precios || 'unico';
                    document.getElementById('descripcion').value = d.descripcion || '';
                    document.getElementById('modalidad_recargos').value = d.modalidad_recargos || 'importe';
                    document.getElementById('monto_recargo').value = String(d.monto_recargo != null ? d.monto_recargo : 0);
                    document.getElementById('abreviatura').value = d.abreviatura || '';
                    document.getElementById('codigo_barras').value = d.codigo_barras || '';
                    document.getElementById('codigo_ticket').value = d.codigo_ticket || '';
                    document.getElementById('iva').checked = !!d.aplica_iva;
                    document.getElementById('costo').value = String(d.costo != null ? d.costo : 0);
                    document.getElementById('precio_general').value = String(d.precio_general != null ? d.precio_general : 0);
                    document.getElementById('precio_empleados').value = String(d.precio_empleados != null ? d.precio_empleados : 0);
                    document.getElementById('precio_publico').value = String(d.precio_publico != null ? d.precio_publico : 0);
                    document.getElementById('precio_paquetes').value = String(d.precio_paquetes != null ? d.precio_paquetes : 0);
                    modalTitle.textContent = 'Editar producto';
                    modalInstr.innerHTML = 'Modifica los datos y presiona <strong>GUARDAR</strong>.';
                    bootstrap.Modal.getOrCreateInstance(modalEl).show();
                })
                .catch(function() { Swal.fire({ icon: 'error', text: 'No se pudo cargar el registro.' }); });
            return;
        }
        var el = e.target.closest('.btn-eliminar-pr');
        if (el) {
            var idDel = parseInt(el.getAttribute('data-id'), 10);
            Swal.fire({ title: '¿Eliminar producto?', showCancelButton: true, confirmButtonText: 'Sí' }).then(function(res) {
                if (!res.isConfirmed) return;
                fetch(urlDeleteTpl.replace('__ID__', encodeURIComponent(idDel)), {
                    method: 'DELETE',
                    headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
                    credentials: 'same-origin'
                }).then(function(r) {
                    if (r.ok) return r.json().then(function(b) {
                        Swal.fire({ icon: 'success', text: b.message || 'Eliminado.' });
                        document.getElementById('btn-buscar').click();
                    });
                    return r.json().then(function(b) { Swal.fire({ icon: 'error', text: b.message }); });
                });
            });
        }
    });

    ['btn-imprimir','btn-pdf','btn-excel'].forEach(function(id) {
        document.getElementById(id).addEventListener('click', function() {
            Swal.fire({ icon: 'info', title: 'Próximamente', text: 'Exportación no configurada aún.' });
        });
    });
})();
</script>
@endsection