<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
	<meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interfaz de Selección</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- SweetAlert CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10">
    <style>
        .cuadricula {
            display: grid;
            grid-template-columns: repeat(19, 1fr);
            grid-template-rows: repeat(14, 1fr);
            width: 70vw;
            height: 70vh;
            gap: 1px;
            box-sizing: border-box;
            border: 1px solid #ccc;
        }

        .cuadro {
            border: 1px solid #aaa;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: calc(0.5vw + 0.5vh);
        }

        .diagram-container {
            position: relative;
            width: 135px;
            height: 116px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }

        .diagram-square {
            width: 50px;
            height: 50px;
            order: 2;
        }

        .diagram-letter {
            position: absolute;
            font-size: 16px;
            font-family: Arial, sans-serif;
            width: 25px;
            text-align: center;
        }

        #diagram-a {
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            order: 1;
        }

        #diagram-b {
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            order: 3;
        }

        #diagram-c {
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            order: 4;
        }

        #diagram-d {
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            order: 5;
        }

    </style>
</head>
<body>
    <script>
        $('body').on('click','#eliminar_asientos', function(e){
            $('#lugares').val('');
        });

        $('body').on('change','#evento', function(e){
            var $this = $(this);
            $('#lugares').val('');

            $.ajax({
                url: '<?php echo e(route("mesas_posicion")); ?>',
                type: "POST",
                data: {
                    _token : $('meta[name="csrf-token"]').attr('content'),
                    "dato" : $this.val(),
                },
                beforeSend: function(){
                    $("#div_mesas").html('<div class="d-flex justify-content-center"><div class="spinner-border" role="status" style="margin-right: 2%;"></div>...Cargando mesas</div>');
                }
            }).done(function (response) {
                $("#div_mesas").html(response.html);

                console.log(response);
            }).fail(function (response) {
                console.log("fallo");
                console.log(response);
            });
        })

        $('body').on('submit','.form_guardar', function(e){
            e.preventDefault();

            formData = new FormData(document.getElementById($(this).attr('id')));
            var url = $(`#${$(this).attr('id')}`).attr('action');

            var lugares = $('#lugares').val();
            var evento = $('#evento option:selected').text();
            var nombre = $('#nombre').val();
            var telefono = $('#telefono').val();

            Swal.fire({
                icon: "question",
                html: `<p>Estás por <b>confirmar</b> los lugares:</p>
                    <p><b>${lugares}</b>,</p>
                    <p>Del evento:</p>
                    <p><b>${evento}</b>,</p>
                    <p>A nombre de:</p>
                    <p><b>${nombre}</b>,</p>
                    <p>Contacto:</p>
                    <p><b>${telefono}</b></p>
                    <p><b>¿Deseas continuar?</b></p>
                `,
                showDenyButton: true,
                showCancelButton: true,
                confirmButtonText: "Sí, confirmar",
                denyButtonText: `No, cancelar`,
                width: '65%',
                didOpen: () => {
                    document.querySelector('.swal2-html-container').style.maxHeight = '390px';
                }
            }).then((result) => {
                if (result.isConfirmed)
                {
                    $.ajax({
                        type:'POST',
                        url:url,
                        contentType: false,
                        processData: false,
                        datatype: "JSON",
                        data: formData,
                        beforeSend: function(){
                            $("#btn_guardar").val("Enviando..");
                            $("#btn_guardar").attr("disabled","disabled");
                        }
                    }).done(function (response) {
                        Swal.fire({
                            icon: response.icon,
                            title: response.title,
                            text: response.text,
                        });

                        $(location).attr('href',response.ruta);
                        console.log(response);
                    }).fail(function (response) {
                        console.log("fallo");
                        console.log(response);

                        $(".error").remove();

                        $.each(response.responseJSON.errors, function (index, value) {
                            $("#" + index).after('<span class="error form-text text-danger"><b>'+value+'</b></span>');
                        });
                    });
                }
                else if (result.isDenied)
                {
                    Swal.fire("Se cancelo la reservación", "", "info");
                }
            });

            $("#btn_guardar").val("Guardar");
            $("#btn_guardar").attr("disabled",false);
        })
    </script>
    <form method="POST" action="<?php echo e($editar ? route('actualizar_reservacion', $evento['id']) : route('guardar_reservacion')); ?>" class="form_guardar" id="form_guardar_reservacion" enctype="multipart/form-data">
        <?php echo csrf_field(); ?>
        <div class="row text-center">
            <div class="col-xl-12 mb-4">
                <div class="form-row">
                    <div class="form-group row col-12">
                        <label class="col-3 form-label col text-lg-right text-left">Seleccione el evento</label>
                        <div class="col-9">
                            <?php echo e(route('mesas_posicion')); ?>

                            <div class="input-group input-group-lg input-group-solid">
                                <select name="evento" id="evento" class="form-control form-control-lg form-control-solid" data-ruta="<?php echo e(route('mesas_posicion')); ?>">
                                    <option disabled selected>-- Seleccione una opción --</option>
                                    <?php $__currentLoopData = $eventos_all; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="<?php echo e($item->id); ?>"><?php echo e($item->nombre); ?></option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row col-5">
                        <label class="col-form-label col-3 text-lg-right text-left">Nombre</label>
                        <div class="col-9">
                            <input name="nombre" id="nombre" class="form-control form-control-lg form-control-solid" type="text" />
                        </div>
                    </div>
                    <div class="form-group row col-7">
                        <label class="col-form-label col-3 text-lg-right text-left">Lugares seleccionados</label>
                        <div class="col-9">
                            <div class="input-group">
                                <input type="text" class="form-control form-control-lg form-control-solid" name="lugares" id="lugares" readonly>
                                <div class="input-group-append">
                                    <button class="btn btn-danger" type="button" id="eliminar_asientos">
                                        <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <g fill="none" stroke="white" stroke-width="2">
                                                <line x1="3" y1="3" x2="21" y2="21" />
                                                <line x1="21" y1="3" x2="3" y2="21" />
                                            </g>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="lugaresArray" id="lugaresArray" readonly>
                    </div>
                    <div class="form-group row col-5">
                        <label class="col-form-label col-3 text-lg-right text-left">Teléfono</label>
                        <div class="col-9">
                            <input name="telefono" id="telefono" class="form-control form-control-lg form-control-solid" type="text" />
                        </div>
                    </div>
                    <div class="form-group row col-7">
                        <label class="col-form-label col-3 text-lg-right text-left">Folio/Transacción</label>
                        <div class="col-9">
                            <input name="folio" id="folio" class="form-control form-control-lg form-control-solid" type="text" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-12 my-2 mb-4" id="div_mesas"></div>

            <div class="col-xl-12 my-2 mt-5">
                <div class="form-group row mb-3">
                    <div class="col-12">
                        <button type="submit" class="btn btn-success" id="btn_guardar"><?php echo e($editar ? "Actualizar" : "Guardar"); ?></button>
                        <a href="<?php echo e(route('lista_reservacion')); ?>" class="btn btn-danger font-weight-bolder">Cancelar</a>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!-- jQuery and Bootstrap JavaScript -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html><?php /**PATH /home/fyiusr/public_html/qa-foliatti.itiapp.fyi/resources/views/reservaciones/mesas_posiciones.blade.php ENDPATH**/ ?>