@extends('checkout.master')

@section('title', "Carta Mesa")


@section('content')
    <div class="rounded border border-5 border-dark scroll-button">
        <a href="#formulario" class="fa-solid fa-arrow-down  fa-list"></a>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="card">
                    <div class="card-header ui-sortable-handle bg-dark text-light">
                        <h3 class="card-title">
                            <i class="fa-regular fa-calendar mr-1"></i>
                            Productos
                        </h3>
                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-toggle="modal" data-target="#ayuda">
                                <i class="fas fa-question fa-lg"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card">
                            <div class="card-body login-card-body">
                                    @foreach ($categorias  as $key => $categoria)
                                        @if(count($categoria->productos) > 0)
                                            <h4>{{$categoria->nombre}}</h4>
                                            <table id="productos" class="table table-hover table-striped nowrap" style="width:100%">
                                                <tbody>
                                                    @foreach ($categoria->productos as $keyy => $producto)
                                                        <tr>
                                                            <td style="vertical-align: middle; white-space: nowrap;">
                                                                <div class="btn-group">
                                                                    <button type="button" class="btn btn-default" onclick="restar('{{$producto->id}}','{{$producto->nombre}}', '{{$producto->precio}}');">
                                                                        <i class="fa-solid fa-minus"></i>
                                                                    </button>
                                                                    <button type="button" class="btn btn-default">
                                                                        {{ Form::text('cantidad_'.$producto->id, 0, ['min'=>0, 'size'=>1, 'id'=>"cantidad_".$producto->id]) }}
                                                                    </button>
                                                                    <button type="button" class="btn btn-default" onclick="sumar('{{$producto->id}}','{{$producto->nombre}}','{{$producto->precio}}');">
                                                                        <i class="fa-solid fa-plus"></i>
                                                                    </button>
                                                                </div>
                                                            </td>
                                                            <td style="vertical-align: middle;">
                                                                {{ $producto->nombre." - $".number_format($producto->precio, 0, '', '.') }}
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                            <br>
                                        @endif
                                    @endforeach
                                    <p hidden>Total: <b>$ </b><b id="total">0</b></p>
                                    <div id="formulario" class="row">
                                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                            <div class="modal-body">
                                                {{ Form::open(['route' => ['mesasqr.carta.pagar.mp', Hashids::encode($mesa->id, time())], 'method'=>'POST']) }}
                                                <table class="table table-hover table-striped nowrap" style="width:100%">
                                                    <thead>
                                                        <tr>
                                                            <th>Producto</th>
                                                            <th class="text-center">Cantidad</th>
                                                            <th class="text-right">Subtotal</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id='resumen'>

                                                    </tbody>
                                                    <tr>
                                                        <th>Total</th>
                                                        <td></td>
                                                        <th class="text-right" id="total_modal">0</th>
                                                    </tr>
                                                </table>
                                                <hr>
                                                <div class="row">
                                                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                                        {{ Form::submit('Pagar con MP', array('class'=> 'btn btn-success btn-lg aling-center', 'id'=>'cerrarPedidoButton')) }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Cerrar Pedido -->
    <div class="modal fade" id="cerrarPedido" tabindex="-1" role="dialog" aria-labelledby="productoEditar" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Resumen</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    {{ Form::open(['route' => ['mesasqr.carta.pagar.mp', Hashids::encode($mesa->id, time())], 'method'=>'POST']) }}
                    <table class="table table-hover table-striped nowrap" style="width:100%">
                        <thead>
                            <tr>
                                <th>Producto</th>
                                <th class="text-center">Cantidad</th>
                                <th class="text-right">Subtotal</th>
                            </tr>
                        </thead>
                        <tbody id='resumen'>

                        </tbody>
                        <tr>
                            <th>Total</th>
                            <td></td>
                            <th class="text-right" id="total_modal">0</th>
                        </tr>
                    </table>
                    <hr>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                            {{ Form::submit('Cargar', array('class'=> 'btn btn-outline-success btn-block', 'id'=>'cerrarPedidoButton')) }}
                            {{ Form::close() }}
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                            <button type="button" class="btn btn-outline-secondary btn-block" data-dismiss="modal">Cerrar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Ayuda Modal -->
    <div class="modal fade" id="ayuda" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ayudaModalLabel">Ayuda</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><i class="fa-solid fa-times"></i></span>
                    </button>
                </div>
                <div class="modal-body">
                    <h5><b>Donde es?</b></h5>
                    <p>
                        El mismo dia del evento te llegara por Whatsapp la direccion del evento y tambien podras visualizarla en este link.
                    </p>
                    <h5><b>Que es mi saldo?</b></h5>
                    <p>
                        Tu entrada tambien funciona como una biletera virtual.
                    </p>
                    <hr>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <button type="button" class="btn btn-outline-secondary btn-block" data-dismiss="modal">Cerrar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript">
            function restar(id, nombre, valor) {
                var num = document.getElementById("cantidad_" + id).value;
                   var cantidad = parseInt(num, 10) - 1;
                   if (num > 0) {
                       if (num != 0) {
                           document.getElementById("cantidad_" + id).value = cantidad;

                           var total_modal = document.getElementById("total_modal").textContent; // Cambio aquí
                           total_modal = parseInt(total_modal, 10) - parseInt(valor, 10);
                           document.getElementById('total_modal').innerHTML = ''; // Cambio aquí
                           document.getElementById('total_modal').textContent = total_modal; // Cambio aquí

                           var total_principal = document.getElementById("total").textContent; // Mantener el total principal para otras actualizaciones

                           if (cantidad == 0) {
                               document.getElementById("cantidad_" + id).value = 0;
                               var fila = document.getElementById(id).remove();
                           } else {
                               var fila = document.getElementById(id)
                               if (fila) {
                                   fila.remove();
                               }

                               var subtotal = cantidad * parseInt(valor, 10);

                               codigo = "<tr id='" + id + "'><td>" + nombre + "</td><td class='text-center'>" + cantidad + "</td><input name='" + id + "' value='" + cantidad + "' type='hidden'><td class='text-right'>$ " + subtotal + "</td></tr>";
                               document.getElementById('resumen').innerHTML += codigo;

                               var nuevo_total = parseInt(total_principal, 10) - parseInt(valor, 10);
                               document.getElementById('total').textContent = nuevo_total;
                           }
                       }
                   }
            }
            function sumar(id, nombre ,valor) {
                var num = document.getElementById("cantidad_" + id).value;
                var cantidad = parseInt(num, 10) + 1;
                document.getElementById("cantidad_" + id).value = cantidad;

                var total_modal = document.getElementById("total_modal").textContent; // Cambio aquí
                total_modal = parseInt(total_modal, 10) + parseInt(valor, 10);
                document.getElementById('total_modal').innerHTML = ''; // Cambio aquí
                document.getElementById('total_modal').textContent = total_modal; // Cambio aquí

                var total_principal = document.getElementById("total").textContent; // Mantener el total principal para otras actualizaciones

                var fila = document.getElementById(id);
                if (fila) {
                    fila.remove();
                }

                var subtotal = cantidad * parseInt(valor, 10);

                codigo = "<tr id='" + id + "'><td>" + nombre + "</td><td class='text-center'>" + cantidad + "</td><input name='" + id + "' value='" + cantidad + "' type='hidden'><td class='text-right'>$ " + subtotal + "</td></tr>";
                document.getElementById('resumen').innerHTML += codigo;

                var nuevo_total = parseInt(total_principal, 10) + parseInt(valor, 10);
                document.getElementById('total').textContent = nuevo_total;
            };



</script>

<style>
    .scroll-button {
        position: fixed;
        bottom: 110px;
        right: 40px;
        background-color: #f8f9fa;
        border-color: #ddd;
        color: #444;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        z-index: 1000;
    }

    .scroll-button a {
        text-decoration: none;
        border-color: #ddd;
        border: 10px;
        color: #444;
        font-weight: bold;
    }
</style>
@endsection