<?php
   

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <title>Acomodo de Lugares</title>
</head>
<style>
    h1{
        text-align: center;
    }
    .form-lugar{
        padding-left: 25px;
        padding-right: 20px;
        width: 500px;
    }
    .lugares{
        padding: 25px;
    }
    .fas{
        font-size: 25px;
    }
    .lugares {
        display: flex;
        justify-content: center;
    }
    .table-seat {
        align-self: center;
    }
    .indicadores {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .text{
        margin-left: 25px;
    }
    .input-width{
        width: 100px;
    }
    .button-save {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    
</style>
<body>
    <h1 class="mt-3 mb-3">Acomodo de Lugares</h1>
    <div class="container">
        <div class="row justify-content-md-center">
            <div class="col-md-auto">
                <h5>Seleciona el numero de filas y columnas</h5>
                <div class="form-lugar">
                    <label for="columnas">Numero de personas por filas</label>
                    <br>
                    <input type="number" name="columnas" id="columnas" class="form-control input-width"> <!--input columnas-->
                    <br>
                    <select class="form-select input-width" id="form-select" aria-label="Default select example"> <!--selec para filas-->
                        <option selected>Filas</option> <!-- FOR para las opciones de las filas comienza en 65 = A en codigo ascii A-Z-->
                        <?php 
                            for($i=65; $i<=90; $i++){
                        ?>
                            <option value="<?=$i?>"><?= chr($i)?></option>
                        <?php
                            }
                        ?>
                    </select>
                </div>
            </div>

            <div class="col-md-auto align-self-center">
                <div class="icons-select">
                    <h5>Selecciona el icono para la aplicación</h5>
                    <div class="form-check mt-5">
                        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" value="bike">
                        <label class="form-check-label" for="flexRadioDefault1">
                            <i class="fas fa-biking"></i>
                        </label>
                    </div>
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" value="person" checked>
                        <label class="form-check-label" for="flexRadioDefault2">
                            <i class="fas fa-user"></i>
                        </label>
                    </div>
                </div>
            </div>

        </div>
    </div>
    

    <div class="indicadores"> <!-- -->
        <div class="container-indicadores">
            <h5 class="mt-5 mb-3">Selecciona los lugares que quieras disponibles</h5>
            <p class="text"><i class="fas fa-square icon-select text-primary"></i> Lugares Seleccionados</p>
            <p class="text"><i class="fas fa-square icon-nonselect text-secondary"></i> Lugares No Seleccionados</p>
        </div>
    </div>

    <div class="lugares"> <!-- Aqui aparecen los asientos en cuanto se coloca un numero de columnas y filas, se crea una funcion-->
        
        
    </div>

    <div class="button-save">
        <button id="button-saveB" type="button" class="btn btn-primary button-saveB" onClick="alertParametros()">Guardar</button>
    </div>  

    <script>
        var numColumns = 0; //variable numero de columnas (numero de personas por filas)
        var numFilas = 0; //variable numero de filas
        var numfilasr = 0; //resta para letra de la fila
        var nameButton; //nombre el asiento
        const seatList = [];
        const notseatList = [];
        $(document).ready(function() {
            $("#columnas").keyup(function() { //obtenemos en tiempo real el numero de columnas
                numColumns = $(this).val();
                if(numColumns > 0 && numFilas != 0 && numFilas != 'e' && numfilasr > 0){ //si ya estan las filas y columnas creamos la tabla
                    $("#button-saveB").attr("onClick","alertParametros(true)"); //cambiamos el onclick del boton de guardar
                    createTable();
                }  
            });
            
        });
        $('.form-select').change(function () {//obtenemos en tiempo real el numero de filas
            numFilas = $('.form-select').val(); //obtenemos el valor de la fila en codigo ascii (65 al 90)
            numfilasr = numFilas - 64; //sacamos el numero de la fila ejemplo (66 - 64 = 2, selecciono dos filas el usuario A y B)
            if(numColumns > 0 && numFilas != 0 && numFilas != 'e' && numfilasr > 0){ //si ya estan las filas y columnas creamos la tabla
                $("#button-saveB").attr("onClick","alertParametros(true)"); //cambiamos el onclick del boton de guardar
                createTable();
            }   
 
        });
        
        function createTable(){ //SE CREA LA TABLA SEGUN LO QUE SELECCIONE EL USUARIO
            $("table").remove(".table-seat"); //en caso que la tabla ya exista y agreguen una fila o columna la eliminamos
            var seatNumber;
            var table = '<table class="table-seat">'; //empezamos a crear el codigo de la tabla
            for (var i = 0; i < numfilasr; i++) { //creamos el numero de filas
                table += '<tr>'; 
                for(var j = 0; j<numColumns; j++){ //creamo el numero de columnas
                    seatNumber = String.fromCharCode(65 + i) + (j + 1); //creamos el nombre del asiento
                    if(seatList.includes(seatNumber)){ // si el nombre del asiento esta en la lista, se crea de color azul ya que ya estaba seleccionado
                        table += ('<td><button id="button'+seatNumber+'" type="button" class="btn btn-primary btn-sm" onClick="addSeat(\'' + seatNumber + '\')">'+ seatNumber +'</button></td>');
                    }else{ //sino se crea colos gris 
                        table += ('<td><button id="button'+seatNumber+'" type="button" class="btn btn-secondary btn-sm" onClick="addSeat(\'' + seatNumber + '\')">'+ seatNumber +'</button></td>');
                    }

                    notseatList.push(seatNumber);
                }
                table += '</tr>';  
                 
            }
            table += '</table>';
            $(".lugares").append(table); //agregamos el codigo al div con la clase lugares
        }
        function addSeat(valueId){ //CAMBIAMOS EL COLOR DEL LUGAR SELECCIONADO
            nameButton = "#button" + valueId; //creamos el nombre del boton
            var className = $(nameButton).attr('class'); //obtenemos la clase del boton que se presionó 
            if(className.includes('btn-secondary')){ // si la clase contiene la clase btn-secondary
                $(nameButton).removeClass('btn-secondary').addClass('btn-primary'); //la cambiamos a lugar seleccionado
                seatList.push(valueId); //agregamos a la lista
            }else{ //si no
                $(nameButton).removeClass('btn-primary').addClass('btn-secondary'); //cambiamos a lugar no seleccionado
                const index = seatList.indexOf(valueId); //obtenemos el nombre del asiento
                if (index > -1) { // si existe el asiento
                    seatList.splice(index, 1); //se elimina
                }
            }
        }

        function alertParametros(bandAlert = false){ // si la funcion no arroja nada la bandera es false
            if(!bandAlert){
                swal({
                    title: "Completa todos los campos",
                    text: "indica cuantas filas y personas por fila",
                    icon: "warning",
                });
            }else{
                var icon = $('.icons-select input:radio:checked').val()
                let difference = notseatList.filter(x => !seatList.includes(x)); // sacamos los asientos no disponibles
                $.post("insert-info.php",{"icon":icon ,"columnas":numColumns, "filas":numfilasr, "seats":difference.toString()}, function(respuesta){ //hacemos la peticion para insertar los datos
                    if(respuesta == 1){ // si es 1 se inserto
                        swal({
                            title: "Se registro con exito",
                            icon: "success",
                        }); 
                    }else { // no se inserto
                        swal({
                            title: respuesta,
                            icon: "error",
                        }); 
                    }
                });
                
            }
            
        }
        
    </script>
</body>
</html>