@extends('layouts.master')

@section('title', 'Stock')

@section('content')

    <div class="content-header">

        <div class="container-fluid">

            <div class="row mb-2">

                <div class="col-12">

                    <h1 class="m-0 text-dark">

                        Barra

                        <small>
                            Stock
                        </small>

                    </h1>

                </div>

            </div>

        </div>

    </div>



    <section class="content">

        <div class="container-fluid">

            <div class="row">

                <div class="col-12">

                    <div class="card">

                        <div class="card-header ui-sortable-handle bg-dark text-light">

                            <h3 class="card-title">

                                <i class="fa-solid fa-boxes-stacked mr-1"></i>

                                Stock

                            </h3>

                        </div>



                        <div class="card-body">

                            @if(count($productos))

                                <div class="table-responsive">

                                    <table
                                        id="stockTable"
                                        class="table table-hover table-striped nowrap"
                                        style="width:100%;"
                                    >

                                        <thead>

                                            <tr>

                                                <th>
                                                    Categoría
                                                </th>

                                                <th>
                                                    Producto
                                                </th>


                                                @foreach($depositos as $deposito)

                                                    <th class="text-center">
                                                        {{ $deposito->nombre }}
                                                    </th>

                                                @endforeach


                                                <th class="text-center">
                                                    Total
                                                </th>

                                                <th class="text-center">
                                                    Mínimo
                                                </th>

                                                <th class="text-center">
                                                    Estado
                                                </th>

                                                <th class="text-center">
                                                    Pedido
                                                </th>

                                            </tr>

                                        </thead>



                                        <tbody>

                                            @foreach($productos as $producto)

                                                @php

                                                    /*
                                                     * ==========================================
                                                     * CALCULAR STOCK TOTAL
                                                     * ==========================================
                                                     */

                                                    $totalProducto = 0;


                                                    foreach($depositos as $deposito) {

                                                        $key =
                                                            $producto->id . '-' . $deposito->id;


                                                        $stockItem =
                                                            $stocks->get($key);


                                                        $totalProducto +=
                                                            $stockItem
                                                                ? (int) $stockItem->cantidad
                                                                : 0;

                                                    }


                                                    /*
                                                     * ==========================================
                                                     * CALCULAR PEDIDO
                                                     * ==========================================
                                                     */

                                                    $pack =
                                                        max(
                                                            1,
                                                            (int) ($producto->pack ?? 1)
                                                        );


                                                    $faltante =
                                                        max(
                                                            0,
                                                            (int) $producto->minimo
                                                                - $totalProducto
                                                        );


                                                    $packsPedido =
                                                        $faltante > 0
                                                            ? (int) ceil(
                                                                $faltante / $pack
                                                            )
                                                            : 0;


                                                    $pedido =
                                                        $packsPedido * $pack;

                                                    /*
                                                     * ==========================================
                                                     * TOTAL EN PACKS
                                                     * ==========================================
                                                     */
                                                    $totalPacks = $pack > 0
                                                        ? $totalProducto / $pack
                                                        : 0;

                                                @endphp



                                                <tr
                                                    id="fila-producto-{{ $producto->id }}"
                                                    data-producto="{{ $producto->id }}"
                                                >


                                                    {{-- ======================================= --}}
                                                    {{-- CATEGORIA --}}
                                                    {{-- ======================================= --}}

                                                    <td style="vertical-align:middle;">

                                                        {{ @$producto->categoria->nombre }}

                                                    </td>



                                                    {{-- ======================================= --}}
                                                    {{-- PRODUCTO --}}
                                                    {{-- ======================================= --}}

                                                    <td style="vertical-align:middle;">

                                                        <strong>

                                                            {{ $producto->nombre }}

                                                        </strong>


                                                        @if($producto->volumen)

                                                            <br>

                                                            <small class="text-muted">

                                                                {{ $producto->volumen }} cc

                                                            </small>

                                                        @endif


                                                        @if($pack > 1)

                                                            <br>

                                                            <small class="text-muted">

                                                                Pack x {{ $pack }}

                                                            </small>

                                                        @endif

                                                    </td>



                                                    {{-- ======================================= --}}
                                                    {{-- DEPOSITOS --}}
                                                    {{-- ======================================= --}}

                                                    @foreach($depositos as $deposito)

                                                        @php

                                                            $key =
                                                                $producto->id . '-' . $deposito->id;


                                                            $stockItem =
                                                                $stocks->get($key);


                                                            $cantidad =
                                                                $stockItem
                                                                    ? (int) $stockItem->cantidad
                                                                    : 0;

                                                        @endphp


                                                        <td
                                                            class="text-center"
                                                            style="
                                                                vertical-align:middle;
                                                                min-width:120px;
                                                            "
                                                        >

                                                            <div
                                                                class="stock-input-container"
                                                                style="
                                                                    display:flex;
                                                                    align-items:center;
                                                                    justify-content:center;
                                                                    gap:8px;
                                                                "
                                                            >

                                                                <input
                                                                    type="number"
                                                                    min="0"
                                                                    step="1"

                                                                    class="
                                                                        form-control
                                                                        form-control-sm
                                                                        text-center
                                                                        stock-input
                                                                    "

                                                                    style="
                                                                        width:80px;
                                                                        display:inline-block;
                                                                    "

                                                                    value="{{ $cantidad }}"

                                                                    data-producto="{{ $producto->id }}"
                                                                    data-deposito="{{ $deposito->id }}"
                                                                    data-original="{{ $cantidad }}"
                                                                >


                                                                <span
                                                                    class="stock-status"
                                                                    style="
                                                                        display:inline-block;
                                                                        width:20px;
                                                                    "
                                                                ></span>

                                                            </div>

                                                        </td>

                                                    @endforeach



                                                    {{-- ======================================= --}}
                                                    {{-- TOTAL --}}
                                                    {{-- ======================================= --}}

                                                    <td
                                                        class="
                                                            text-center
                                                            font-weight-bold
                                                            total-producto
                                                        "

                                                        id="total-producto-{{ $producto->id }}"

                                                        data-order="{{ $totalProducto }}"
                                                        data-pack="{{ $pack }}"

                                                        style="
                                                            vertical-align:middle;
                                                            font-size:16px;
                                                            white-space:nowrap;
                                                        "
                                                    >

                                                        <strong
                                                            class="total-unidades"
                                                            style="font-size:17px;"
                                                        >
                                                            {{ $totalProducto }}
                                                        </strong>

                                                        <br>

                                                        <small class="text-muted total-packs">
                                                            @if($pack > 1)
                                                                {{ rtrim(rtrim(number_format($totalPacks, 2, '.', ''), '0'), '.') }}
                                                                {{ $totalPacks == 1 ? 'pack' : 'packs' }}
                                                                x {{ $pack }}
                                                            @else
                                                                {{ $totalProducto }}
                                                                {{ $totalProducto == 1 ? 'pack' : 'packs' }}
                                                                x 1
                                                            @endif
                                                        </small>

                                                    </td>



                                                    {{-- ======================================= --}}
                                                    {{-- MINIMO --}}
                                                    {{-- ======================================= --}}

                                                    @php

    $packsMinimo = $producto->minimo > 0
        ? (int) ceil($producto->minimo / $pack)
        : 0;

@endphp

<td
    class="text-center"
    style="
        vertical-align:middle;
        white-space:nowrap;
    "
    data-order="{{ $producto->minimo }}"
>

    <strong style="font-size:17px;">
        {{ $producto->minimo }}
    </strong>

    <br>

    @if($producto->minimo > 0)

        <small class="text-muted">

            {{ $packsMinimo }}

            {{ $packsMinimo == 1 ? 'pack' : 'packs' }}

            x {{ $pack }}

        </small>

    @else

        <small class="text-muted">
            —
        </small>

    @endif

</td>



                                                    {{-- ======================================= --}}
                                                    {{-- ESTADO --}}
                                                    {{-- ======================================= --}}

                                                    <td
                                                        class="
                                                            text-center
                                                            estado-producto
                                                        "

                                                        id="estado-producto-{{ $producto->id }}"

                                                        data-order="{{
                                                            $totalProducto >= $producto->minimo
                                                                ? 1
                                                                : 0
                                                        }}"

                                                        style="vertical-align:middle;"
                                                    >


                                                        @if(
                                                            $totalProducto >=
                                                            $producto->minimo
                                                        )

                                                            <i
                                                                class="
                                                                    fa-solid
                                                                    fa-circle-check
                                                                    text-success
                                                                    fa-lg
                                                                "
                                                                title="Stock suficiente"
                                                            ></i>

                                                        @else

                                                            <i
                                                                class="
                                                                    fa-solid
                                                                    fa-circle-exclamation
                                                                    text-danger
                                                                    fa-lg
                                                                "
                                                                title="Stock bajo"
                                                            ></i>

                                                        @endif

                                                    </td>



                                                    {{-- ======================================= --}}
                                                    {{-- PEDIDO --}}
                                                    {{-- ======================================= --}}

                                                    <td
                                                        class="
                                                            text-center
                                                            pedido-producto
                                                        "

                                                        id="pedido-producto-{{ $producto->id }}"

                                                        data-pack="{{ $pack }}"
                                                        data-minimo="{{ $producto->minimo }}"
                                                        data-order="{{ $pedido }}"

                                                        style="
                                                            vertical-align:middle;
                                                            min-width:110px;
                                                        "
                                                    >


                                                        @if($pedido > 0)

                                                            <strong
                                                                class="
                                                                    text-danger
                                                                    pedido-unidades
                                                                "
                                                                style="font-size:17px;"
                                                            >

                                                                {{ $pedido }}

                                                            </strong>

                                                            <br>

                                                            <small
                                                                class="
                                                                    text-muted
                                                                    pedido-packs
                                                                "
                                                            >

                                                                {{ $packsPedido }}

                                                                {{
                                                                    $packsPedido == 1
                                                                        ? 'pack'
                                                                        : 'packs'
                                                                }}

                                                                x {{ $pack }}

                                                            </small>


                                                        @else

                                                            <span
                                                                class="
                                                                    text-success
                                                                    pedido-unidades
                                                                "
                                                                style="font-size:17px;"
                                                            >

                                                                0

                                                            </span>

                                                            <br>

                                                            <small
                                                                class="
                                                                    text-muted
                                                                    pedido-packs
                                                                "
                                                            >

                                                                —

                                                            </small>

                                                        @endif

                                                    </td>


                                                </tr>

                                            @endforeach

                                        </tbody>

                                    </table>

                                </div>


                            @else

                                <div>

                                    <br>

                                    <p class="text-center">

                                        No Existen Registros

                                    </p>

                                    <br>

                                </div>

                            @endif

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </section>




    {{-- ========================================================= --}}
    {{-- CSS --}}
    {{-- ========================================================= --}}

    <style>

        .card-body {
            overflow-x: hidden;
        }


        .dataTables_wrapper {
            width: 100%;
        }


        .dataTables_scroll {
            width: 100%;
        }


        .dataTables_scrollBody {
            overflow-x: auto !important;
        }


        /*
         * INPUT STOCK
         */

        .stock-input {
            font-weight: bold;
        }


        .stock-input:focus {
            box-shadow: none;
        }


        /*
         * CAMBIADO PERO NO GUARDADO
         */

        .stock-input.modificado {
            border: 2px solid #ffc107;
        }


        /*
         * GUARDANDO
         */

        .stock-input.guardando {
            opacity: 0.6;
        }


        /*
         * GUARDADO
         */

        .stock-input.guardado {
            border: 2px solid #28a745;
        }


        /*
         * ERROR
         */

        .stock-input.error {
            border: 2px solid #dc3545;
        }


        /*
         * PEDIDO
         */

        .pedido-producto {
            white-space: nowrap;
        }


        @media(max-width: 767px) {

            .stock-input {
                width: 70px !important;
            }

        }

    </style>




    {{-- ========================================================= --}}
    {{-- DATATABLE --}}
    {{-- ========================================================= --}}

    <link
        rel="stylesheet"
        href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css"
    >


    <script
        src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"
    ></script>


    <script
        src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"
    ></script>


    <script
        src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"
    ></script>




    <script>

        $(document).ready(function() {


            /*
             * =====================================================
             * POSICIONES DE COLUMNAS
             * =====================================================
             *
             * 0 = categoria
             * 1 = producto
             *
             * despues vienen los depositos
             *
             * total   = 2 + cantidad depositos
             * minimo  = 3 + cantidad depositos
             * estado  = 4 + cantidad depositos
             * pedido  = 5 + cantidad depositos
             *
             */

            var columnaEstado =
                {{ count($depositos) + 4 }};


            var columnaPedido =
                {{ count($depositos) + 5 }};



            /*
             * =====================================================
             * DATATABLE
             * =====================================================
             */

            var tabla = $('#stockTable').DataTable({
                "columnDefs": [
                                    { "orderable": false, "targets": [2,3,4,8] }
                                ],
                "order": [

                    /*
                     * Stock bajo primero
                     */

                    [
                        columnaEstado,
                        'asc'
                    ],

                    /*
                     * Categoria
                     */

                    [
                        0,
                        'asc'
                    ],

                    /*
                     * Producto
                     */

                    [
                        1,
                        'asc'
                    ]

                ],


                "scrollX": true,


                "pageLength": 500,


                "language": {

                    "lengthMenu":
                        "Mostrar _MENU_ por página",

                    "zeroRecords":
                        "No existen registros",

                    "info":
                        "",

                    "infoEmpty":
                        "",

                    "infoFiltered":
                        "",

                    "search":
                        "Buscar:",


                    "paginate": {

                        "first":
                            "Primera",

                        "last":
                            "Última",

                        "next":
                            "Siguiente",

                        "previous":
                            "Anterior"

                    }

                },


                "dom":
                    '<"top"f>rt<"bottom"><"clear">'

            });




            /*
             * =====================================================
             * DETECTAR MODIFICACION
             * =====================================================
             */

            $(document).on(
                'input',
                '.stock-input',
                function()
                {

                    var input =
                        $(this);


                    var valorOriginal =
                        parseInt(
                            input.attr('data-original')
                        ) || 0;


                    var valorActual =
                        parseInt(
                            input.val()
                        ) || 0;


                    input.removeClass(
                        'guardado error guardando'
                    );


                    if (
                        valorActual !==
                        valorOriginal
                    ) {

                        input.addClass(
                            'modificado'
                        );

                    } else {

                        input.removeClass(
                            'modificado'
                        );

                    }

                }
            );




            /*
             * =====================================================
             * GUARDAR AL SALIR
             * =====================================================
             */

            $(document).on(
                'change',
                '.stock-input',
                function()
                {

                    guardarStock(
                        $(this)
                    );

                }
            );




            /*
             * =====================================================
             * ENTER = GUARDAR
             * =====================================================
             */

            $(document).on(
                'keydown',
                '.stock-input',
                function(e)
                {

                    if (
                        e.key === 'Enter'
                    ) {

                        e.preventDefault();

                        $(this).blur();

                    }

                }
            );




            /*
             * =====================================================
             * GUARDAR STOCK
             * =====================================================
             */

            function guardarStock(input)
            {


                /*
                 * Evitar doble guardado
                 */

                if (
                    input.data('guardando')
                ) {

                    return;

                }



                var productoId =
                    input.data('producto');


                var depositoId =
                    input.data('deposito');


                var cantidad =
                    parseInt(
                        input.val()
                    );



                /*
                 * Corregir cantidades invalidas
                 */

                if (
                    isNaN(cantidad) ||
                    cantidad < 0
                ) {

                    cantidad = 0;

                    input.val(0);

                }



                var cantidadOriginal =
                    parseInt(
                        input.attr(
                            'data-original'
                        )
                    ) || 0;



                /*
                 * Si no cambió no guardar
                 */

                if (
                    cantidad ===
                    cantidadOriginal
                ) {

                    input.removeClass(
                        'modificado guardado error guardando'
                    );

                    return;

                }



                var status =
                    input
                        .closest(
                            '.stock-input-container'
                        )
                        .find(
                            '.stock-status'
                        );



                /*
                 * Estado guardando
                 */

                input.data(
                    'guardando',
                    true
                );


                input
                    .removeClass(
                        'modificado guardado error'
                    )
                    .addClass(
                        'guardando'
                    );


                status.html(
                    '<i class="fa-solid fa-spinner fa-spin text-secondary"></i>'
                );



                /*
                 * AJAX
                 */

                $.ajax({

                    url:
                        '{{ route("barra.stock.actualizar") }}',

                    type:
                        'POST',


                    data: {

                        _token:
                            '{{ csrf_token() }}',

                        producto_id:
                            productoId,

                        deposito_id:
                            depositoId,

                        cantidad:
                            cantidad

                    },



                    /*
                     * =============================================
                     * SUCCESS
                     * =============================================
                     */

                    success:
                        function(response)
                        {


                            input.data(
                                'guardando',
                                false
                            );


                            if (
                                !response.success
                            ) {

                                mostrarError(
                                    input,
                                    status
                                );

                                return;

                            }



                            /*
                             * Nuevo valor original
                             */

                            input.attr(
                                'data-original',
                                response.cantidad
                            );



                            input
                                .removeClass(
                                    'guardando modificado error'
                                )
                                .addClass(
                                    'guardado'
                                );



                            status.html(
                                '<i class="fa-solid fa-check text-success"></i>'
                            );



                            /*
                             * =====================================
                             * ACTUALIZAR TOTAL
                             * =====================================
                             */

                            actualizarTotal(
                                productoId,
                                response.total
                            );



                            /*
                             * =====================================
                             * ESTADO
                             * =====================================
                             */

                            actualizarEstado(

                                productoId,

                                response.total,

                                response.minimo

                            );



                            /*
                             * =====================================
                             * PEDIDO
                             * =====================================
                             */

                            actualizarPedido(

                                productoId,

                                response.total,

                                response.minimo

                            );



                            /*
                             * Actualizar DataTables
                             */

                            tabla
                                .row(
                                    $('#fila-producto-' + productoId)
                                )
                                .invalidate(
                                    'dom'
                                );



                            /*
                             * Sacar tilde luego
                             */

                            setTimeout(
                                function()
                                {

                                    input.removeClass(
                                        'guardado'
                                    );

                                    status.html('');

                                },
                                1500
                            );

                        },



                    /*
                     * =============================================
                     * ERROR
                     * =============================================
                     */

                    error:
                        function(xhr)
                        {


                            input.data(
                                'guardando',
                                false
                            );


                            mostrarError(
                                input,
                                status
                            );


                            var mensaje =
                                'No se pudo actualizar el stock.';


                            if (
                                xhr.responseJSON &&
                                xhr.responseJSON.message
                            ) {

                                mensaje =
                                    xhr.responseJSON.message;

                            }


                            console.error(
                                mensaje
                            );

                        }

                });

            }




            /*
             * =====================================================
             * MOSTRAR ERROR
             * =====================================================
             */

            function mostrarError(
                input,
                status
            )
            {

                input
                    .removeClass(
                        'guardando guardado'
                    )
                    .addClass(
                        'error'
                    );


                status.html(
                    '<i class="fa-solid fa-xmark text-danger"></i>'
                );

            }




            /*
             * =====================================================
             * ACTUALIZAR TOTAL Y TOTAL DE PACKS
             * =====================================================
             */

            function actualizarTotal(
                productoId,
                total
            )
            {

                var celda =
                    $(
                        '#total-producto-' +
                        productoId
                    );


                var pack =
                    parseInt(
                        celda.attr(
                            'data-pack'
                        )
                    ) || 1;


                total =
                    parseInt(total) || 0;


                var totalPacks =
                    pack > 0
                        ? total / pack
                        : 0;


                var totalPacksTexto =
                    Number.isInteger(totalPacks)
                        ? totalPacks.toString()
                        : totalPacks
                            .toFixed(2)
                            .replace(/\.?0+$/, '');


                celda.attr(
                    'data-order',
                    total
                );


                celda
                    .find('.total-unidades')
                    .text(total);


                celda
                    .find('.total-packs')
                    .text(
                        totalPacksTexto +
                        (totalPacks === 1
                            ? ' pack'
                            : ' packs') +
                        ' x ' +
                        pack
                    );

            }



            /*
             * =====================================================
             * ACTUALIZAR ESTADO
             * =====================================================
             */

            function actualizarEstado(
                productoId,
                total,
                minimo
            )
            {


                var estado =
                    $(
                        '#estado-producto-' +
                        productoId
                    );


                total =
                    parseInt(total) || 0;


                minimo =
                    parseInt(minimo) || 0;



                if (
                    total >= minimo
                ) {

                    estado
                        .attr(
                            'data-order',
                            1
                        )
                        .html(
                            '<i class="fa-solid fa-circle-check text-success fa-lg" title="Stock suficiente"></i>'
                        );

                } else {

                    estado
                        .attr(
                            'data-order',
                            0
                        )
                        .html(
                            '<i class="fa-solid fa-circle-exclamation text-danger fa-lg" title="Stock bajo"></i>'
                        );

                }

            }




            /*
             * =====================================================
             * ACTUALIZAR PEDIDO
             * =====================================================
             */

            function actualizarPedido(
                productoId,
                total,
                minimo
            )
            {


                var celda =
                    $(
                        '#pedido-producto-' +
                        productoId
                    );


                var pack =
                    parseInt(
                        celda.attr(
                            'data-pack'
                        )
                    ) || 1;



                total =
                    parseInt(total) || 0;


                minimo =
                    parseInt(minimo) || 0;



                /*
                 * Cuánto falta
                 */

                var faltante =
                    Math.max(
                        0,
                        minimo - total
                    );



                var packsPedido =
                    0;


                var pedido =
                    0;



                /*
                 * Redondear hacia arriba
                 * según tamaño del pack
                 */

                if (
                    faltante > 0
                ) {

                    packsPedido =
                        Math.ceil(
                            faltante / pack
                        );


                    pedido =
                        packsPedido * pack;

                }



                /*
                 * Valor utilizado
                 * para ordenar DataTables
                 */

                celda.attr(
                    'data-order',
                    pedido
                );



                /*
                 * Mostrar pedido
                 */

                if (
                    pedido > 0
                ) {


                    celda.html(

                        '<strong ' +

                            'class="text-danger pedido-unidades" ' +

                            'style="font-size:17px;"' +

                        '>' +

                            pedido +

                        '</strong>' +


                        '<br>' +


                        '<small class="text-muted pedido-packs">' +

                            packsPedido +

                            (
                                packsPedido === 1
                                    ? ' pack'
                                    : ' packs'
                            ) +

                            ' x ' +

                            pack +

                        '</small>'

                    );


                } else {


                    celda.html(

                        '<span ' +

                            'class="text-success pedido-unidades" ' +

                            'style="font-size:17px;"' +

                        '>' +

                            '0' +

                        '</span>' +


                        '<br>' +


                        '<small class="text-muted pedido-packs">' +

                            '—' +

                        '</small>'

                    );

                }

            }


        });

    </script>


@endsection



@section('javascript')
@endsection