<!-- Llamamos el sidebar principal y el menu nav -->
<?php include('../elementos/sidebar.php'); ?>

<!-- Contenido propio de la pagina -->
<span id="module_active" dt="salsas"></span>


<!-- Modal -->
<div class="modal fade" id="receta_" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="title_modal"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div id="modal_body" class="modal-body">

            </div>

        </div>
    </div>
</div>


<!-- Main content -->
<section class="content">
    <div class="container-fluid">

        <div class="content-wrapper">

            <!-- Content Header (Page header) -->
            <section class="content-header">
                <div class="container-fluid">

                    <!-- TABLA MOVIMIENTOS -->
                    <div class="row">
                        <div class="col-12">

                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">Salsas </h5>

                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                        <button type="button" class="btn btn-tool" data-card-widget="remove">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>

                                </div>

                                <!--CONTENIDO TABLA -->

                                <div class="image_cont">
                                    <div class="cont_img" data-toggle="modal" data-target="#receta_">
                                        <h4 salsa="Albahaca">Albahaca</h4>
                                        <img salsa="Albahaca" class="image" style="width:300px" src="../../albahaca.jpg" alt="">
                                    </div>

                                    <div class="cont_img" data-toggle="modal" data-target="#receta_">
                                        <h4 salsa="Pimenton">Pimentón</h4>
                                        <img salsa="Pimenton" class="image" style="width:300px" src="../../pimenton.jpg" alt="">
                                    </div>

                                </div>

                            </div>

                            <style>
                                .image_cont {
                                    display: flex;
                                    justify-content: space-around;
                                    align-items: center;
                                    margin-bottom: 30px;
                                }

                                .image {
                                    border-radius: 10px;
                                }

                                .cont_img {
                                    margin: 10px;
                                    text-align: center;
                                }





                                @media (max-width: 700px) {
                                    .image_cont {
                                        flex-direction: column;
                                        justify-content: space-around;

                                    }
                                }
                            </style>

                            <script>
                                document.querySelector('.image_cont').addEventListener('click', (e) => {
                                    salsa = e.target.getAttribute('salsa')
                                    document.getElementById('title_modal').innerHTML = 'Preparación salsa de ' + salsa

                                    if (salsa == 'Albahaca') {
                                        albahaca = 40;azucar = 120;huevos = 4;sal = 5;pimienta = 3;vinagre = 30;aceite = 500;

                                        txt = `
                                        <form id="" >
                                            <div class="form-row" style="margin:5px" id="">

                                                <div class="form-group col-12 col-sm-12">
                                                    <label class="d-flex justify-content-between mb-0 text-secondary b" for="">Albahaca </label>
                                                    <input type="number" class="form-control form-control-sm input_" id="Albahaca" placeholder="Albahaca (gr)" >
                                                </div>

                                                <div class="form-group col-6 col-sm-6">
                                                    <label class="d-flex justify-content-between mb-0 text-secondary b" for="">Azucar </label>
                                                    <input type="number" class="form-control form-control-sm input_" id="Azucar" placeholder="Azucar (gr)" >
                                                </div>

                                                <div class="form-group col-6 col-sm-6">
                                                    <label class="d-flex justify-content-between mb-0 text-secondary b" for="">Huevo </label>
                                                    <input type="number" class="form-control form-control-sm input_" id="Huevo" placeholder="Huevo (gr)" >
                                                </div>
                                                
                                                <div class="form-group col-6 col-sm-6">
                                                    <label class="d-flex justify-content-between mb-0 text-secondary b" for="">Sal </label>
                                                    <input type="number" class="form-control form-control-sm input_" id="Sal" placeholder="Sal (gr)" >
                                                </div>

                                                <div class="form-group col-6 col-sm-6">
                                                    <label class="d-flex justify-content-between mb-0 text-secondary b" for="">Pimienta </label>
                                                    <input type="number" class="form-control form-control-sm input_" id="Pimienta" placeholder="Pimienta (gr)" >
                                                </div>

                                                <div class="form-group col-6 col-sm-6">
                                                    <label class="d-flex justify-content-between mb-0 text-secondary b" for="">Vinagre </label>
                                                    <input type="number" class="form-control form-control-sm input_" id="Vinagre" placeholder="Vinagre (gr)" >
                                                </div>

                                                <div class="form-group col-6 col-sm-6">
                                                    <label class="d-flex justify-content-between mb-0 text-secondary b" for="">Aceite </label>
                                                    <input type="number" class="form-control form-control-sm input_" id="Aceite" placeholder="Aceite (gr)" >
                                                </div>
                                            

                                            </div>
                                        </form>
                                        `
                                        document.getElementById('modal_body').innerHTML = txt

                                        document.getElementById('Albahaca').addEventListener('input', () => {
                                            a = document.getElementById('Albahaca').value
                                            document.getElementById('Azucar').value = Math.round((a * 10 * azucar) / albahaca) / 10
                                            document.getElementById('Huevo').value = Math.round((a * 10 * huevos) / albahaca) / 10
                                            document.getElementById('Sal').value = Math.round((a * 10 * sal) / albahaca) / 10
                                            document.getElementById('Pimienta').value = Math.round((a * 10 * pimienta) / albahaca) / 10
                                            document.getElementById('Vinagre').value = Math.round((a * 10 * vinagre) / albahaca) / 10
                                            document.getElementById('Aceite').value = Math.round((a * 10 * aceite) / albahaca) / 10
                                        })

                                        document.getElementById('Aceite').addEventListener('input', () => {
                                            a = document.getElementById('Aceite').value
                                            document.getElementById('Azucar').value = Math.round((a * 10 * azucar) / aceite) / 10
                                            document.getElementById('Huevo').value = Math.round((a * 10 * huevos) / aceite) / 10
                                            document.getElementById('Sal').value = Math.round((a * 10 * sal) / aceite) / 10
                                            document.getElementById('Pimienta').value = Math.round((a * 10 * pimienta) / aceite) / 10
                                            document.getElementById('Vinagre').value = Math.round((a * 10 * vinagre) / aceite) / 10
                                            document.getElementById('Albahaca').value = Math.round((a * 10 * albahaca) / aceite) / 10
                                        })

                                    } else {
                                        pimenton = 160;azucar = 100;huevos = 6;sal = 5;pimienta = 5;vinagre = 20;aceite = 500;

                                        txt = `
                                        <form id="" >
                                            <div class="form-row" style="margin:5px" id="">

                                                <div class="form-group col-12 col-sm-12">
                                                    <label class="d-flex justify-content-between mb-0 text-secondary b" for="">Pimenton </label>
                                                    <input type="number" class="form-control form-control-sm input_" id="Pimenton" placeholder="Pimenton (gr)" >
                                                </div>

                                                <div class="form-group col-6 col-sm-6">
                                                    <label class="d-flex justify-content-between mb-0 text-secondary b" for="">Azucar </label>
                                                    <input type="number" class="form-control form-control-sm input_" id="Azucar" placeholder="Azucar (gr)" >
                                                </div>

                                                <div class="form-group col-6 col-sm-6">
                                                    <label class="d-flex justify-content-between mb-0 text-secondary b" for="">Huevo </label>
                                                    <input type="number" class="form-control form-control-sm input_" id="Huevo" placeholder="Huevo (gr)" >
                                                </div>
                                                
                                                <div class="form-group col-6 col-sm-6">
                                                    <label class="d-flex justify-content-between mb-0 text-secondary b" for="">Sal </label>
                                                    <input type="number" class="form-control form-control-sm input_" id="Sal" placeholder="Sal (gr)" >
                                                </div>

                                                <div class="form-group col-6 col-sm-6">
                                                    <label class="d-flex justify-content-between mb-0 text-secondary b" for="">Pimienta </label>
                                                    <input type="number" class="form-control form-control-sm input_" id="Pimienta" placeholder="Pimienta (gr)" >
                                                </div>

                                                <div class="form-group col-6 col-sm-6">
                                                    <label class="d-flex justify-content-between mb-0 text-secondary b" for="">Vinagre </label>
                                                    <input type="number" class="form-control form-control-sm input_" id="Vinagre" placeholder="Vinagre (gr)" >
                                                </div>

                                                <div class="form-group col-6 col-sm-6">
                                                    <label class="d-flex justify-content-between mb-0 text-secondary b" for="">Aceite </label>
                                                    <input type="number" class="form-control form-control-sm input_" id="Aceite" placeholder="Aceite (gr)" >
                                                </div>
                                            

                                            </div>
                                        </form>
                                        `
                                        document.getElementById('modal_body').innerHTML = txt

                                        document.getElementById('Pimenton').addEventListener('input', () => {
                                            a = document.getElementById('Pimenton').value
                                            document.getElementById('Azucar').value = Math.round((a * 10 * azucar) / pimenton) / 10
                                            document.getElementById('Huevo').value = Math.round((a * 10 * huevos) / pimenton) / 10
                                            document.getElementById('Sal').value = Math.round((a * 10 * sal) / pimenton) / 10
                                            document.getElementById('Pimienta').value = Math.round((a * 10 * pimienta) / pimenton) / 10
                                            document.getElementById('Vinagre').value = Math.round((a * 10 * vinagre) / pimenton) / 10
                                            document.getElementById('Aceite').value = Math.round((a * 10 * aceite) / pimenton) / 10
                                        })

                                        document.getElementById('Aceite').addEventListener('input', () => {
                                            a = document.getElementById('Aceite').value
                                            document.getElementById('Azucar').value = Math.round((a * 10 * azucar) / aceite) / 10
                                            document.getElementById('Huevo').value = Math.round((a * 10 * huevos) / aceite) / 10
                                            document.getElementById('Sal').value = Math.round((a * 10 * sal) / aceite) / 10
                                            document.getElementById('Pimienta').value = Math.round((a * 10 * pimienta) / aceite) / 10
                                            document.getElementById('Vinagre').value = Math.round((a * 10 * vinagre) / aceite) / 10
                                            document.getElementById('Pimenton').value = Math.round((a * 10 * pimenton) / aceite) / 10
                                        })
                                    }

                                })
                            </script>


                            <!-- /.card -->
                        </div>
                        <!-- /.col -->
                    </div>

                </div>

            </section>


        </div>
    </div>

</section>