@extends('layout')

@section('almacenes-active', 'active')
@section('nota_ingreso-active', 'active')

@section('bread-module', 'Almacén')
@section('bread-submodule', 'Almacénes')
@section('hero-title', 'Ver nota de ingreso')
@section('hero-subtitle', 'Almacénes')

@section('content')

@php
    // Solo se muestran las tallas que tienen stock (cantidad > 0) en al menos un color del detalle.
    $detalleData = json_decode($detalle, true) ?: [];
    $tallasConStockIds = collect($detalleData)
        ->filter(fn ($item) => (float) ($item['cantidad'] ?? 0) > 0)
        ->pluck('talla_id')
        ->unique();
    $tallasConStock = $tallas->whereIn('id', $tallasConStockIds)->values();
@endphp

    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="row">
            <div class="col-lg-12">
                <div class="ibox">

                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-12">

                                <div class="card shadow-sm border-0">
                                    <div class="card-header bg-success text-white">
                                        <h6 class="mb-0">
                                            <i class="fas fa-file-invoice"></i> Nota de Ingresos
                                        </h6>
                                    </div>

                                    <div class="card-body">

                                        <div class="row">

                                            <!-- Registrador -->
                                            <div class="col-12 col-sm-6 col-md-3 mb-2">
                                                <label class="text-success mb-0">
                                                    <i class="fas fa-user"></i> Registrador
                                                </label>
                                                <div class="font-weight-bold">
                                                    {{ $notaingreso->registrador_nombre }}
                                                </div>
                                            </div>

                                            <!-- Fecha -->
                                            <div class="col-12 col-sm-6 col-md-3 mb-2">
                                                <label class="text-success mb-0">
                                                    <i class="fas fa-calendar-alt"></i> Fecha
                                                </label>
                                                <div class="font-weight-bold">
                                                    {{ \Carbon\Carbon::parse($notaingreso->created_at)->format('d/m/Y H:i') }}
                                                </div>
                                            </div>

                                            <!-- Destino -->
                                            <div class="col-12 col-sm-6 col-md-3 mb-2">
                                                <label class="text-success mb-0">
                                                    <i class="fas fa-warehouse"></i> Destino
                                                </label>
                                                <div class="font-weight-bold">
                                                    {{ $notaingreso->almacen_destino_nombre ?? '-' }}
                                                </div>
                                            </div>

                                            <!-- Observación -->
                                            <div class="col-12 col-md-3 mb-2">
                                                <label class="text-success mb-0">
                                                    <i class="fas fa-comment-dots"></i> Observación
                                                </label>
                                                <div class="font-weight-bold text-truncate"
                                                    title="{{ $notaingreso->observacion }}">
                                                    {{ $notaingreso->observacion ?? 'Sin observación' }}
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                </div>

                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="panel panel-success">
                                    <div class="panel-heading">
                                        <h4 class=""><b>Detalle de la Nota de Ingreso</b></h4>
                                    </div>
                                    <div class="panel-body">

                                        <div class="row m-t-sm" style="text-transform:uppercase">
                                            <div class="col-lg-12">
                                                @include('almacenes.nota_ingresos.tabla-productos', [
                                                    'carrito' => 'carrito',
                                                    'tallas' => $tallasConStock,
                                                ])
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group row">
                            <div class="col-md-6 text-left" style="color:#fcbc6c">
                                <i class="fa fa-exclamation-circle"></i> <small>Los campos marcados con asterisco
                                    (<label class="required"></label>) son obligatorios.</small>
                            </div>
                            <div class="col-md-6 text-right">
                                <a href="{{ route('almacenes.nota_ingreso.index') }}" id="btn_cancelar"
                                    class="btn btn-w-m btn-default">
                                    <i class="fa fa-arrow-left"></i> Regresar
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
    @include('almacenes.nota_ingresos.modal_edit')
@stop

@push('styles')
    <link href="{{ asset('Inspinia/css/plugins/select2/select2.min.css') }}" rel="stylesheet">
    <!-- DataTable -->
    <link href="{{ asset('Inspinia/css/plugins/dataTables/datatables.min.css') }}" rel="stylesheet">
@endpush

@push('scripts')
    <!-- Select2 -->
    <script src="{{ asset('Inspinia/js/plugins/select2/select2.full.min.js') }}"></script>

    <script>
        $(".select2_form").select2({
            placeholder: "SELECCIONAR",
            allowClear: true,
            width: '100%',
        });
    </script>

    <script>
        const selectModelo = document.querySelector('#modelo');
        const tallas = @json($tallasConStock);
        const detalleNotaIngresoPrevia = @json($detalle);
        const bodyTablaProductos = document.querySelector('#table-productos tbody');
        const bodyTablaDetalle = document.querySelector('#table-detalle tbody');
        const btnAgregarDetalle = document.querySelector('#btn_agregar_detalle');
        const inputProductos = document.querySelector('#notadetalle_tabla');

        let modelo_id = null;
        let carrito = [];

        document.addEventListener('DOMContentLoaded', () => {
            events();
            console.log(detalleNotaIngresoPrevia);
            cargarDetalleNotaIngresoPrevio();
        })

        function events() {

            //======== EVENTO ELIMINAR PRODUCTO DEL CARRITO ============
            document.addEventListener('click', (e) => {
                if (e.target.classList.contains('delete-product')) {
                    const productoId = e.target.getAttribute('data-producto');
                    const colorId = e.target.getAttribute('data-color');
                    eliminarProducto(productoId, colorId);
                    pintarDetalleNotaIngreso(carrito);
                }
            })

            //============== EVENTO VALIDACIÓN INPUT CANTIDADES ==========
            document.addEventListener('input', (e) => {
                if (e.target.classList.contains('inputCantidad')) {
                    e.target.value = e.target.value.replace(/^0+|[^0-9]/g, '');
                }
            })
        }

        //========== CARGAR DETALLE NOTA INGRESO PREVIA =============
        const cargarDetalleNotaIngresoPrevio = () => {
            carrito = JSON.parse(detalleNotaIngresoPrevia);
            pintarDetalleNotaIngreso(carrito);
        }

        //========= FUNCIÓN ELIMINAR PRODUCTO DEL CARRITO =============
        const eliminarProducto = (productoId, colorId) => {
            carrito = carrito.filter((p) => {
                return !(p.producto_id == productoId && p.color_id == colorId);
            })
        }


        //============ REORDENAR CARRITO ===============
        const reordenarCarrito = () => {
            carrito.sort(function(a, b) {
                if (a.producto_id === b.producto_id) {
                    return a.color_id - b.color_id;
                } else {
                    return a.producto_id - b.producto_id;
                }
            });
        }

        //=============== FORMAR OBJETO PRODUCTO PARA INSERTAR EN EL CARRITO POSTERIORMENTE =============
        const formarProducto = (ic) => {
            const producto_id = ic.getAttribute('data-producto-id');
            const producto_nombre = ic.getAttribute('data-producto-nombre');
            const color_id = ic.getAttribute('data-color-id');
            const color_nombre = ic.getAttribute('data-color-nombre');
            const talla_id = ic.getAttribute('data-talla-id');
            const talla_nombre = ic.getAttribute('data-talla-nombre');
            const cantidad = ic.value ? ic.value : 0;
            const producto = {
                producto_id,
                producto_nombre,
                color_id,
                color_nombre,
                talla_id,
                talla_nombre,
                cantidad
            };
            return producto;
        }

        //================== LIMPIAR TABLA DETALLE ===============
        function clearDetalleCotizacion() {
            while (bodyTablaDetalle.firstChild) {
                bodyTablaDetalle.removeChild(bodyTablaDetalle.firstChild);
            }
        }

        //====== RENDERIZAR TABLA DETALLE NOTA INGRESO ==============
        function pintarDetalleNotaIngreso(carrito) {
            let fila = ``;
            let htmlTallas = ``;
            const producto_color_procesado = [];
            clearDetalleCotizacion();

            carrito.forEach((c) => {
                htmlTallas = ``;
                if (!producto_color_procesado.includes(`${c.producto_id}-${c.color_id}`)) {
                    fila += `<tr>
                            <td> </td>
                            <th>${c.producto_nombre} - ${c.color_nombre}</th>`;

                    //tallas
                    tallas.forEach((t) => {
                        let cantidad = carrito.filter((ct) => {
                            return ct.producto_id == c.producto_id && ct.color_id == c.color_id && t
                                .id == ct.talla_id;
                        });
                        cantidad.length != 0 ? cantidad = cantidad[0].cantidad : cantidad = 0;
                        htmlTallas += `<td>${Number(cantidad) > 0 ? cantidad : ''}</td>`;
                    })



                    fila += htmlTallas;
                    bodyTablaDetalle.innerHTML = fila;
                    producto_color_procesado.push(`${c.producto_id}-${c.color_id}`)
                }
            })
        }
    </script>
@endpush