@extends('layouts.master')

@section('title', 'Vender')

@section('content')

<style>
    /* =========================================================
       BUSCADOR DATATABLE
    ========================================================= */

    #productos_filter {
        width: 100%;
        margin-bottom: 15px;
    }

    #productos_filter label {
        display: block;
        width: 100%;
        margin: 0;
        font-size: 0;
    }

    #productos_filter input {
        display: block;
        width: 100% !important;
        height: 52px;
        margin: 0 !important;
        padding: 10px 15px;
        border: 1px solid #ced4da;
        border-radius: 8px;
        font-size: 18px;
        box-shadow: none;
    }

    #productos_filter input:focus {
        border-color: #6c757d;
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.15);
    }

    /* =========================================================
       TABLA PRODUCTOS
    ========================================================= */

    #productos tbody td {
        vertical-align: middle;
    }

    .cantidad-grupo {
        white-space: nowrap;
    }

    .cantidad-btn {
        min-width: 42px;
        min-height: 42px;
    }

    .cantidad-input {
        width: 38px;
        border: 0;
        background: transparent;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        pointer-events: none;
    }

    .producto-nombre {
        font-weight: 600;
    }

    .producto-precio {
        white-space: nowrap;
        font-weight: 500;
    }

    /* =========================================================
       RESUMEN DEL PEDIDO
    ========================================================= */

    .tabla-resumen td,
    .tabla-resumen th {
        vertical-align: middle;
    }

    .resumen-vacio {
        padding: 25px 10px !important;
        color: #6c757d;
        text-align: center;
    }

    .btn-eliminar-linea {
        min-width: 38px;
        min-height: 38px;
    }

    /* =========================================================
       TOTALIZADOR
    ========================================================= */

    .totalizador-pedido {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 16px 0 22px 0;
        padding: 16px 18px;
        border-radius: 8px;
        background: #343a40;
        color: #ffffff;
    }

    .totalizador-columna {
        min-width: 0;
    }

    .totalizador-columna:last-child {
        text-align: right;
    }

    .total-label {
        margin: 0 0 5px 0;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        text-transform: uppercase;
        opacity: 0.8;
    }

    .total-cantidad {
        margin: 0;
        font-size: 30px;
        font-weight: 700;
        line-height: 1;
    }

    .total-valor {
        margin: 0;
        font-size: 30px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    /* =========================================================
       MOBILE
    ========================================================= */

    @media (max-width: 768px) {
        .content-header h1 {
            margin-bottom: 10px !important;
            font-size: 20px;
        }

        .card-body {
            padding: 10px;
        }

        #productos {
            font-size: 14px;
        }

        #productos th,
        #productos td {
            padding: 7px 5px;
        }

        .cantidad-btn {
            min-width: 37px;
            min-height: 38px;
            padding: 5px 8px;
        }

        .cantidad-input {
            width: 28px;
            font-size: 15px;
        }

        .modal-dialog {
            margin: 5px;
        }

        .modal-body {
            padding: 14px;
        }

        .tabla-resumen {
            font-size: 14px;
        }

        .tabla-resumen th,
        .tabla-resumen td {
            padding: 8px 5px;
        }

        .btn-eliminar-linea {
            min-width: 35px;
            min-height: 35px;
            padding: 5px 8px;
        }

        .totalizador-pedido {
            padding: 14px;
            margin-top: 12px;
        }

        .total-label {
            font-size: 12px;
        }

        .total-cantidad,
        .total-valor {
            font-size: 24px;
        }
    }
</style>


{{-- =========================================================
     ENCABEZADO
========================================================= --}}

<div class="content-header">

    <div class="container-fluid">

        <div class="row mb-2">

            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">

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

                    {{ str_replace(
                        'THE LIFT - Jazz Club - ',
                        'JC - ',
                        $evento->nombre
                    ) }}

                    <small>
                        {{ date('d/m', strtotime($evento->fecha)) }}
                    </small>

                </h1>

            </div>

            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">

                <button
                    type="button"
                    class="btn btn-outline-success btn-block"
                    data-toggle="modal"
                    data-target="#cerrarPedido"
                >
                    Cargar Pedido
                </button>

            </div>

        </div>

    </div>

</div>


{{-- =========================================================
     CARTA
========================================================= --}}

<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-regular fa-file-lines mr-1"></i>

                            <b>Caja</b> Carta

                        </h3>

                        <div class="card-tools">

                            <button
                                type="button"
                                class="btn btn-tool"
                                data-toggle="modal"
                                data-target="#cerrarPedidoCodigo"
                                title="Cerrar pedido por código"
                            >
                                <i class="fa-solid fa-code fa-lg"></i>
                            </button>

                            <button
                                type="button"
                                class="btn btn-tool"
                                data-toggle="modal"
                                data-target="#dineroCargar"
                                title="Cargar dinero"
                            >
                                <i class="fa-solid fa-money-bill fa-lg"></i>
                            </button>

                        </div>

                    </div>

                    <div class="card-body">

                        @if(count($productos))

                            <div class="table-responsive">

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

                                    <thead>

                                        <tr>
                                            <th>Cantidad</th>
                                            <th>Uno</th>
                                            <th>Producto</th>
                                            <th>Precio</th>
                                        </tr>

                                    </thead>

                                    <tbody>

                                        @foreach($productos as $producto)

                                            @php
                                                $precioProducto = $producto->precio($evento->id);
                                            @endphp

                                            <tr>

                                                <td>

                                                    <div class="btn-group cantidad-grupo">

                                                        <button
                                                            type="button"
                                                            class="btn btn-default cantidad-btn"
                                                            onclick="restar(
                                                                '{{ $producto->id }}',
                                                                @js($producto->nombre),
                                                                '{{ $precioProducto }}'
                                                            )"
                                                        >
                                                            <i class="fa-solid fa-minus"></i>
                                                        </button>

                                                        <button
                                                            type="button"
                                                            class="btn btn-default cantidad-btn"
                                                            tabindex="-1"
                                                        >

                                                            {{ Form::text(
                                                                'cantidad_'.$producto->id,
                                                                0,
                                                                [
                                                                    'id' => 'cantidad_'.$producto->id,
                                                                    'class' => 'cantidad-input',
                                                                    'readonly' => true
                                                                ]
                                                            ) }}

                                                        </button>

                                                        <button
                                                            type="button"
                                                            class="btn btn-default cantidad-btn"
                                                            onclick="sumar(
                                                                '{{ $producto->id }}',
                                                                @js($producto->nombre),
                                                                '{{ $precioProducto }}'
                                                            )"
                                                        >
                                                            <i class="fa-solid fa-plus"></i>
                                                        </button>

                                                    </div>

                                                </td>

                                                <td>

                                                    <button
                                                        type="button"
                                                        class="btn btn-default cantidad-btn"
                                                        onclick="uno(
                                                            '{{ $producto->id }}',
                                                            @js($producto->nombre),
                                                            '{{ $precioProducto }}'
                                                        )"
                                                        title="Vender una unidad"
                                                    >
                                                        <i class="fa-solid fa-1"></i>
                                                    </button>

                                                </td>

                                                <td>

                                                    <span class="producto-nombre">
                                                        {{ $producto->nombre }}
                                                    </span>

                                                </td>

                                                <td class="producto-precio">

                                                    $
                                                    {{ number_format(
                                                        $precioProducto,
                                                        0,
                                                        '',
                                                        '.'
                                                    ) }}

                                                </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>


{{-- =========================================================
     MODAL CARGAR DINERO
========================================================= --}}

<div
    class="modal fade"
    id="dineroCargar"
    tabindex="-1"
    role="dialog"
    aria-hidden="true"
>

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">
                    Cargar Dinero
                </h5>

                <button
                    type="button"
                    class="close"
                    data-dismiss="modal"
                    aria-label="Cerrar"
                >
                    <span aria-hidden="true">&times;</span>
                </button>

            </div>

            <div class="modal-body">

                {{ Form::open([
                    'route' => [
                        'cajero.vender.cargar.dinero',
                        Hashids::encode($evento->id, time())
                    ],
                    'method' => 'POST',
                    'id' => 'formCargarDinero'
                ]) }}

                {{ Form::label(
                    'hashDinero',
                    'Código',
                    ['style' => 'font-weight:bold;']
                ) }}

                *

                {{ Form::text(
                    'hash',
                    null,
                    [
                        'id' => 'hashDinero',
                        'maxlength' => 3,
                        'required' => true,
                        'class' => 'form-control',
                        'placeholder' => 'Ingrese el código del cliente'
                    ]
                ) }}

                <br>

                {{ Form::label(
                    'montoDinero',
                    'Monto',
                    ['style' => 'font-weight:bold;']
                ) }}

                *

                {{ Form::number(
                    'monto',
                    0,
                    [
                        'id' => 'montoDinero',
                        'required' => true,
                        'class' => 'form-control',
                        'min' => 0
                    ]
                ) }}

                <br>

                {{ Form::label(
                    'medioDinero',
                    'Medio de Pago',
                    ['style' => 'font-weight:bold;']
                ) }}

                *

                {{ Form::select(
                    'medio_id',
                    $ddMedios,
                    1,
                    [
                        'id' => 'medioDinero',
                        'required' => true,
                        'class' => 'form-control',
                        'placeholder' => 'Seleccione el medio de pago'
                    ]
                ) }}

                <br>

                <div class="form-check">

                    {{ Form::checkbox(
                        '10+',
                        true,
                        false,
                        [
                            'id' => 'recargoDiez',
                            'class' => 'form-check-input'
                        ]
                    ) }}

                    <label
                        for="recargoDiez"
                        class="form-check-label"
                        style="font-weight:bold;"
                    >
                        +10%
                    </label>

                </div>

                <hr>

                <div class="row">

                    <div class="col-6">

                        <button
                            type="button"
                            class="btn btn-outline-secondary btn-block"
                            data-dismiss="modal"
                        >
                            Cerrar
                        </button>

                    </div>

                    <div class="col-6">

                        {{ Form::submit(
                            'Cargar',
                            [
                                'class' => 'btn btn-outline-success btn-block',
                                'id' => 'cargarDineroButton'
                            ]
                        ) }}

                    </div>

                </div>

                {{ Form::close() }}

            </div>

        </div>

    </div>

</div>


{{-- =========================================================
     MODAL CARGAR PEDIDO POR NOMBRE
========================================================= --}}

<div
    class="modal fade"
    id="cerrarPedido"
    tabindex="-1"
    role="dialog"
    aria-hidden="true"
>

    <div class="modal-dialog modal-lg" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">

                    Cargar Pedido

                    <small>
                        Nombre y medio de pago
                    </small>

                </h5>

                <button
                    type="button"
                    class="close"
                    data-dismiss="modal"
                    aria-label="Cerrar"
                >
                    <span aria-hidden="true">&times;</span>
                </button>

            </div>

            <div class="modal-body">

                {{ Form::open([
                    'route' => [
                        'cajero.cerrar.pedido',
                        Hashids::encode($evento->id, time())
                    ],
                    'method' => 'POST',
                    'id' => 'myFormNombre'
                ]) }}

                {{ Form::label(
                    'nombrePedido',
                    'Nombre',
                    ['style' => 'font-weight:bold;']
                ) }}

                @if($evento->salon_id == 1)

                    {{ Form::text(
                        'nombre',
                        '-',
                        [
                            'id' => 'nombrePedido',
                            'class' => 'form-control',
                            'placeholder' => 'Ingrese el nombre del cliente'
                        ]
                    ) }}

                @else

                    {{ Form::text(
                        'nombre',
                        null,
                        [
                            'id' => 'nombrePedido',
                            'class' => 'form-control',
                            'placeholder' => 'Ingrese el nombre del cliente'
                        ]
                    ) }}

                @endif

                <br>

                {{ Form::label(
                    'medioPedido',
                    'Medio de Pago',
                    ['style' => 'font-weight:bold;']
                ) }}

                *

                @if($evento->salon_id == 1)

                    {{ Form::select(
                        'medio_id',
                        $ddMedios,
                        7,
                        [
                            'id' => 'medioPedido',
                            'required' => true,
                            'class' => 'form-control',
                            'placeholder' => 'Seleccione el medio de pago'
                        ]
                    ) }}

                @else

                    {{ Form::select(
                        'medio_id',
                        $ddMedios,
                        2,
                        [
                            'id' => 'medioPedido',
                            'required' => true,
                            'class' => 'form-control',
                            'placeholder' => 'Seleccione el medio de pago'
                        ]
                    ) }}

                @endif

                <br>

                <div class="form-check">

                    {{ Form::checkbox(
                        'entregado',
                        1,
                        null,
                        [
                            'id' => 'entregado',
                            'class' => 'form-check-input'
                        ]
                    ) }}

                    <label
                        for="entregado"
                        class="form-check-label"
                    >
                        Entregado
                    </label>

                </div>

                <br>

                <div class="table-responsive">

                    <table class="table table-hover table-striped tabla-resumen">

                        <thead>

                            <tr>
                                <th>Producto</th>
                                <th class="text-center">Cantidad</th>
                                <th class="text-right">Subtotal</th>
                                <th class="text-center" width="50"></th>
                            </tr>

                        </thead>

                        <tbody id="resumen"></tbody>

                    </table>

                </div>

                <div class="totalizador-pedido">

                    <div class="totalizador-columna">

                        <p class="total-label">
                            Artículos
                        </p>

                        <p
                            class="total-cantidad"
                            id="cantidadArticulos"
                        >
                            0
                        </p>

                    </div>

                    <div class="totalizador-columna">

                        <p class="total-label">
                            Total del pedido
                        </p>

                        <p
                            class="total-valor"
                            id="total"
                        >
                            $ 0
                        </p>

                    </div>

                </div>

                <button
                    type="submit"
                    class="btn btn-outline-success btn-block"
                    id="cerrarPedidoButtonNombre"
                >
                    Cargar Pedido
                </button>

                {{ Form::close() }}

            </div>

        </div>

    </div>

</div>


{{-- =========================================================
     MODAL CERRAR PEDIDO POR CÓDIGO
========================================================= --}}

<div
    class="modal fade"
    id="cerrarPedidoCodigo"
    tabindex="-1"
    role="dialog"
    aria-hidden="true"
>

    <div class="modal-dialog modal-lg" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">

                    Cerrar Pedido

                    <small>
                        Código
                    </small>

                </h5>

                <button
                    type="button"
                    class="close"
                    data-dismiss="modal"
                    aria-label="Cerrar"
                >
                    <span aria-hidden="true">&times;</span>
                </button>

            </div>

            <div class="modal-body">

                {{ Form::open([
                    'route' => [
                        'cajero.cerrar.pedidoCodigo',
                        Hashids::encode($evento->id, time())
                    ],
                    'method' => 'POST',
                    'id' => 'myFormCodigo'
                ]) }}

                {{ Form::label(
                    'hashPedido',
                    'Código',
                    ['style' => 'font-weight:bold;']
                ) }}

                {{ Form::text(
                    'hash',
                    null,
                    [
                        'id' => 'hashPedido',
                        'maxlength' => 3,
                        'class' => 'form-control',
                        'placeholder' => 'Ingrese el código del cliente'
                    ]
                ) }}

                <hr>

                <div class="table-responsive">

                    <table class="table table-hover table-striped tabla-resumen">

                        <thead>

                            <tr>
                                <th>Producto</th>
                                <th class="text-center">Cantidad</th>
                                <th class="text-right">Subtotal</th>
                                <th class="text-center" width="50"></th>
                            </tr>

                        </thead>

                        <tbody id="resumenn"></tbody>

                    </table>

                </div>

                <div class="totalizador-pedido">

                    <div class="totalizador-columna">

                        <p class="total-label">
                            Artículos
                        </p>

                        <p
                            class="total-cantidad"
                            id="cantidadArticulosCodigo"
                        >
                            0
                        </p>

                    </div>

                    <div class="totalizador-columna">

                        <p class="total-label">
                            Total del pedido
                        </p>

                        <p
                            class="total-valor"
                            id="totall"
                        >
                            $ 0
                        </p>

                    </div>

                </div>

                <div class="row">

                    <div class="col-6">

                        <button
                            type="button"
                            class="btn btn-outline-secondary btn-block"
                            data-dismiss="modal"
                        >
                            Cerrar
                        </button>

                    </div>

                    <div class="col-6">

                        <button
                            type="submit"
                            class="btn btn-outline-success btn-block"
                            id="cerrarPedidoButtonCodigo"
                        >
                            Cargar
                        </button>

                    </div>

                </div>

                {{ Form::close() }}

            </div>

        </div>

    </div>

</div>


{{-- =========================================================
     JAVASCRIPT DEL CARRITO
========================================================= --}}

<script type="text/javascript">
    /*
    |--------------------------------------------------------------------------
    | CARRITO
    |--------------------------------------------------------------------------
    |
    | Estructura:
    |
    | {
    |     productoId: {
    |         nombre: "...",
    |         precio: 1000,
    |         cantidad: 2
    |     }
    | }
    |
    */

    const cart = {};


    function toInt(valor)
    {
        return parseInt(
            String(valor)
                .replace(/\./g, '')
                .replace(/,/g, '')
                .replace(/[^\d-]/g, ''),
            10
        ) || 0;
    }


    function formatMoney(valor)
    {
        return '$ ' + toInt(valor).toLocaleString('es-AR');
    }


    function escapeHtml(texto)
    {
        const div =
            document.createElement('div');

        div.textContent =
            texto == null
                ? ''
                : String(texto);

        return div.innerHTML;
    }


    function setCantidadUI(id, cantidad)
    {
        const input =
            document.getElementById(
                'cantidad_' + id
            );

        if (input) {
            input.value = cantidad;
        }
    }


    function obtenerProductosCarrito()
    {
        return Object.keys(cart).filter(
            function(id)
            {
                return cart[id] &&
                    cart[id].cantidad > 0;
            }
        );
    }


    function calcularCantidadArticulos()
    {
        let cantidadTotal = 0;

        obtenerProductosCarrito().forEach(
            function(id)
            {
                cantidadTotal +=
                    cart[id].cantidad;
            }
        );

        return cantidadTotal;
    }


    function calcularTotal()
    {
        let total = 0;

        obtenerProductosCarrito().forEach(
            function(id)
            {
                const item =
                    cart[id];

                total +=
                    item.precio *
                    item.cantidad;
            }
        );

        return total;
    }


    function actualizarTotalizadores()
    {
        const cantidad =
            calcularCantidadArticulos();

        const total =
            calcularTotal();

        const cantidadNombre =
            document.getElementById(
                'cantidadArticulos'
            );

        const cantidadCodigo =
            document.getElementById(
                'cantidadArticulosCodigo'
            );

        const totalNombre =
            document.getElementById(
                'total'
            );

        const totalCodigo =
            document.getElementById(
                'totall'
            );

        if (cantidadNombre) {
            cantidadNombre.textContent =
                cantidad;
        }

        if (cantidadCodigo) {
            cantidadCodigo.textContent =
                cantidad;
        }

        if (totalNombre) {
            totalNombre.textContent =
                formatMoney(total);
        }

        if (totalCodigo) {
            totalCodigo.textContent =
                formatMoney(total);
        }
    }


    function eliminarProducto(id)
    {
        id = String(id);

        if (!cart[id]) {
            return;
        }

        delete cart[id];

        setCantidadUI(id, 0);

        renderAll();
    }


    function renderResumen(tbodyId, formId)
    {
        const tbody =
            document.getElementById(tbodyId);

        const form =
            document.getElementById(formId);

        if (!tbody || !form) {
            return;
        }

        tbody.innerHTML = '';

        /*
         * Borrar los inputs anteriores del carrito para
         * evitar que un producto se envíe duplicado.
         */
        form
            .querySelectorAll(
                'input[data-cart="1"]'
            )
            .forEach(
                function(input)
                {
                    input.remove();
                }
            );

        const productos =
            obtenerProductosCarrito();

        if (productos.length === 0) {
            const filaVacia =
                document.createElement('tr');

            filaVacia.innerHTML = `
                <td
                    colspan="4"
                    class="resumen-vacio"
                >
                    No agregaste productos al pedido.
                </td>
            `;

            tbody.appendChild(filaVacia);
        }

        productos.forEach(
            function(id)
            {
                const item =
                    cart[id];

                const subtotal =
                    item.precio *
                    item.cantidad;

                const fila =
                    document.createElement('tr');

                fila.id =
                    tbodyId +
                    '_pedido_' +
                    id;

                fila.innerHTML = `
                    <td>
                        <strong>
                            ${escapeHtml(item.nombre)}
                        </strong>
                    </td>

                    <td class="text-center">
                        ${item.cantidad}
                    </td>

                    <td class="text-right">
                        ${formatMoney(subtotal)}
                    </td>

                    <td class="text-center">

                        <button
                            type="button"
                            class="btn btn-sm btn-outline-danger btn-eliminar-linea"
                            onclick="eliminarProducto('${id}')"
                            title="Eliminar producto"
                        >
                            <i class="fa-solid fa-trash"></i>
                        </button>

                    </td>
                `;

                tbody.appendChild(fila);

                /*
                 * Se mantiene el formato que espera
                 * actualmente el backend:
                 *
                 * name="ID_PRODUCTO"
                 * value="CANTIDAD"
                 */
                const hidden =
                    document.createElement(
                        'input'
                    );

                hidden.type =
                    'hidden';

                hidden.name =
                    id;

                hidden.value =
                    item.cantidad;

                hidden.setAttribute(
                    'data-cart',
                    '1'
                );

                form.appendChild(hidden);
            }
        );
    }


    function renderAll()
    {
        renderResumen(
            'resumen',
            'myFormNombre'
        );

        renderResumen(
            'resumenn',
            'myFormCodigo'
        );

        actualizarTotalizadores();
    }


    function sumar(id, nombre, valor)
    {
        id = String(id);

        const precio =
            toInt(valor);

        if (!cart[id]) {
            cart[id] = {
                nombre: nombre,
                precio: precio,
                cantidad: 0
            };
        }

        cart[id].nombre =
            nombre;

        cart[id].precio =
            precio;

        cart[id].cantidad += 1;

        setCantidadUI(
            id,
            cart[id].cantidad
        );

        renderAll();
    }


    function restar(id, nombre, valor)
    {
        id = String(id);

        if (!cart[id]) {
            return;
        }

        if (cart[id].cantidad <= 0) {
            return;
        }

        cart[id].cantidad -= 1;

        if (cart[id].cantidad <= 0) {
            delete cart[id];

            setCantidadUI(
                id,
                0
            );
        } else {
            setCantidadUI(
                id,
                cart[id].cantidad
            );
        }

        renderAll();
    }


    function uno(id, nombre, valor)
    {
        /*
         * Mantiene el comportamiento original:
         * limpia el carrito y carga una unidad
         * del producto seleccionado.
         */

        document
            .querySelectorAll(
                '[id^="cantidad_"]'
            )
            .forEach(
                function(input)
                {
                    input.value = 0;
                }
            );

        Object
            .keys(cart)
            .forEach(
                function(cartId)
                {
                    delete cart[cartId];
                }
            );

        id = String(id);

        cart[id] = {
            nombre: nombre,
            precio: toInt(valor),
            cantidad: 1
        };

        setCantidadUI(
            id,
            1
        );

        renderAll();

        $('#cerrarPedido')
            .modal('show');
    }


    function validarPedidoAntesDeEnviar(
        event,
        botonId
    )
    {
        if (
            obtenerProductosCarrito()
                .length === 0
        ) {
            event.preventDefault();

            alert(
                'Debe agregar al menos un producto al pedido.'
            );

            return false;
        }

        const boton =
            document.getElementById(
                botonId
            );

        if (boton) {
            boton.disabled =
                true;

            boton.innerHTML =
                '<i class="fa-solid fa-spinner fa-spin mr-1"></i> Cargando...';
        }

        return true;
    }


    document.addEventListener(
        'DOMContentLoaded',
        function()
        {
            renderAll();

            const formNombre =
                document.getElementById(
                    'myFormNombre'
                );

            const formCodigo =
                document.getElementById(
                    'myFormCodigo'
                );

            const formDinero =
                document.getElementById(
                    'formCargarDinero'
                );

            if (formNombre) {
                formNombre.addEventListener(
                    'submit',
                    function(event)
                    {
                        validarPedidoAntesDeEnviar(
                            event,
                            'cerrarPedidoButtonNombre'
                        );
                    }
                );
            }

            if (formCodigo) {
                formCodigo.addEventListener(
                    'submit',
                    function(event)
                    {
                        validarPedidoAntesDeEnviar(
                            event,
                            'cerrarPedidoButtonCodigo'
                        );
                    }
                );
            }

            if (formDinero) {
                formDinero.addEventListener(
                    'submit',
                    function()
                    {
                        const boton =
                            document.getElementById(
                                'cargarDineroButton'
                            );

                        if (boton) {
                            boton.disabled =
                                true;
                        }
                    }
                );
            }
        }
    );
</script>


{{-- =========================================================
     DATATABLES
========================================================= --}}

<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()
    {
        $('#productos').DataTable({

            columnDefs: [
                {
                    orderable: false,
                    targets: [0, 1, 3]
                }
            ],

            /*
             * Ordenar alfabéticamente por producto.
             */
            order: [
                [2, 'asc']
            ],

            scrollX: true,

            pageLength: 100,

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

            language: {
                lengthMenu:
                    'Mostrar _MENU_ por página',

                zeroRecords:
                    'No se encontraron productos',

                info:
                    '',

                infoEmpty:
                    '',

                infoFiltered:
                    '',

                search:
                    '',

                paginate: {
                    first:
                        'Primera',

                    last:
                        'Última',

                    next:
                        'Siguiente',

                    previous:
                        'Anterior'
                }
            }
        });


        $('#productos_filter input')
            .attr(
                'placeholder',
                'Buscar producto...'
            )
            .attr(
                'autocomplete',
                'off'
            )
            .attr(
                'inputmode',
                'search'
            );


        $('#cerrarPedido, #cerrarPedidoCodigo')
            .on(
                'show.bs.modal',
                function()
                {
                    renderAll();
                }
            );
    });
</script>

@endsection