@extends('layouts.master')

@section('title', 'Carta')

@section('content')

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

    #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: 50px;
        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 tr {
        cursor: pointer;
    }

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

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

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

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

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

    /* =========================================================
       RESUMEN
    ========================================================= */

    .tabla-resumen th,
    .tabla-resumen td {
        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,
    .total-valor {
        margin: 0;
        font-size: 30px;
        font-weight: 700;
        line-height: 1;
    }

    .total-valor {
        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: 8px 5px;
        }

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

        .cantidad-input {
            width: 30px;
            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-2 col-lg-2 mb-2">

                {{ Html::linkRoute(
                    'mozo.mesas',
                    'Mesas',
                    Hashids::encode($evento->id, time()),
                    [
                        'class' => 'btn btn-outline-secondary btn-block'
                    ]
                ) }}

            </div>

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

                <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>Mozo</b> Carta

                        </h3>

                    </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>Producto</th>
                                            <th>Precio</th>
                                        </tr>

                                    </thead>

                                    <tbody>

                                        @foreach($productos as $producto)

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

                                            <tr
                                                onclick="sumar(
                                                    '{{ $producto->id }}',
                                                    @js($producto->nombre),
                                                    '{{ $precioProducto }}'
                                                )"
                                            >

                                                <td onclick="event.stopPropagation()">

                                                    <div class="btn-group">

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

                                                    <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 PEDIDO
========================================================= --}}

<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">
                    Cerrar Pedido
                </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' => [
                        'mozo.comandar',
                        Hashids::encode($evento->id, time())
                    ],
                    'method' => 'POST',
                    'id' => 'myForm'
                ]) }}

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

                *

                {{ Form::select(
                    'mesa_id',
                    $ddMesas,
                    null,
                    [
                        'required' => true,
                        'class' => 'form-control',
                        'placeholder' => 'Seleccione la Mesa'
                    ]
                ) }}

                <br>

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

                {{ Form::text(
                    'nota',
                    null,
                    [
                        'class' => 'form-control',
                        'placeholder' => 'Observaciones del pedido...'
                    ]
                ) }}

                <br>

                <div class="form-check">

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

                    <label
                        class="form-check-label"
                        for="free"
                    >
                        Free
                    </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>

                <br>

                <div class="row">

                    <div class="col-12">

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

                    </div>

                </div>

                {{ Form::close() }}

            </div>

        </div>

    </div>

</div>


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

<script type="text/javascript">
    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 cantidad = 0;

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

        return cantidad;
    }


    function calcularTotal()
    {
        let total = 0;

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

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

        return total;
    }


    function actualizarTotalizador()
    {
        const cantidadElement =
            document.getElementById(
                'cantidadArticulos'
            );

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

        if (cantidadElement) {
            cantidadElement.textContent =
                calcularCantidadArticulos();
        }

        if (totalElement) {
            totalElement.textContent =
                formatMoney(calcularTotal());
        }
    }


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

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

        delete cart[id];

        setCantidadUI(id, 0);

        renderPedido();
    }


    function renderPedido()
    {
        const tbody =
            document.getElementById(
                'resumen'
            );

        const form =
            document.getElementById(
                'myForm'
            );

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

        tbody.innerHTML = '';

        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 =
                    '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);

                /*
                 * Mantiene el formato esperado por
                 * el controlador actual:
                 *
                 * 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);
            }
        );

        actualizarTotalizador();
    }


    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
        );

        renderPedido();
    }


    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
            );
        }

        renderPedido();
    }


    function uno(id, nombre, valor)
    {
        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);

        renderPedido();

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


    function validarPedido(event)
    {
        if (
            obtenerProductosCarrito()
                .length === 0
        ) {
            event.preventDefault();

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

            return false;
        }

        const boton =
            document.getElementById(
                'cerrarPedidoButton'
            );

        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()
        {
            renderPedido();

            const form =
                document.getElementById(
                    'myForm'
                );

            if (form) {
                form.addEventListener(
                    'submit',
                    validarPedido
                );
            }
        }
    );
</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, 2]
                }
            ],

            order: [
                [1, 'asc']
            ],

            scrollX: true,

            pageLength: 1000,

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

            language: {
                search:
                    '',

                zeroRecords:
                    'No se encontraron productos',

                info:
                    '',

                infoEmpty:
                    '',

                infoFiltered:
                    '',

                paginate: {
                    first:
                        'Primera',

                    last:
                        'Última',

                    next:
                        'Siguiente',

                    previous:
                        'Anterior'
                }
            }
        });


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


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

@endsection