{% extends 'header.html' %}

{% block css %}
<link rel='stylesheet' href='/static/css/tienda.css'>
{% endblock %}

{% block body %}
<!--<nav class="navbar navbar-expand-lg navbar-dark text-center sticky-top" id='navbar'>
    <a class="navbar-brand mx-auto active" style='color: #000000' href="/home" onclick='saveCart()'>Inicio</a>
    <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mx-auto">

            <li class="nav-item">
                <a class="nav-link" href="/verBotella" onclick='saveCart()'
                    style='color: #2671B6;'><strong>Botella</strong></a>
            </li>


            <li class="nav-item">
                <a class="nav-link" style='color: #2671B6;' href="/verCamisa"
                    onclick='saveCart()'><strong>Camisas</strong></a>
            </li>
        </ul>
        <ul class="nvbar-nav pull-sm-right">
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" style = 'color: #2671B6;' href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <strong>Dropdown link</strong>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
            <button type='button' class='btn btn-success' data-toggle="modal" data-target="Tiendita">Check out</button>

        </ul>
    </div>
</nav>-->

<div class='container-fluid'>
    <div class='row'>
        <br>

    </div>
    <div class='row'>
        {% set count = namespace(value=0) %}
        {% for item in items %}
        <div class='col-auto'>
            <div class="card">
                <img class="card-img-top" style='height: 18rem;' src="/static/{{item.path_a_imagen}}" alt="Card image">
                <div class="card-body">

                    <p class="card-text"><strong>{{item.nombre}}</strong></p>
                    <p class="card-text"> {{item.descripcion}}
                    </p>
                    <p class='card-text text-muted' style="text-align: end;"><strong>Precio :
                            ${{item.precio}}</strong></p>
                </div>
                <div class='card-footer'>
                    <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#Modal"
                        onclick="changeInput('{{item.nombre}}', '{{item.descripcion}}',{{item.id}},{{item.precio}},descripcion)">
                        Editar
                    </button>
                    <button type="button" class="btn btn-primary" data-toggle="modal"
                        data-target="#ModalDelete{{count.value}}">
                        Borrar
                    </button>

                </div>

            </div>

            <!-- onclick ='saveCart()' href="#" class="btn btn-primary">See Profile</a>-->

        </div>
        <div class="modal fade" id="ModalDelete{{count.value}}">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">¿Seguro que quieres borrar este item '{{item.nombre}}'?</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Una vez borrado no se podrá recuperar.
                    </div>
                    <div class="modal-footer">
                        <a href='/deleteItem/{{descripcion}}/{{item.id}}' type='button' class='btn btn-primary'>Quiero
                            Borrar</a>

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

        {% set count.value = count.value + 1 %}
        {% endfor %}

    </div>
</div>

<div class="modal fade" id="Modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Editar</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 action='/{{link}}/{{descripcion}}' method='POST' enctype="multipart/form-data">
                    <input type='hidden' name='idItem' id='idItem'>

                    Nombre: <input type="text" name='nombre' class="form-control" id='nombre' placeholder="Nombre">
                    <div class='form-row align-items-center'>
                        <div class='col-6'>
                            Categoría:
                            <select class="form-control" id="selectCat" name='selectCat' onchange='change("selectCat")'>
                                {% for categoria in categorias %}
                                <option value={{categoria.categoria}}>{{categoria.categoria}}</option>
                                {% endfor %}
                                <option value='0'>Nueva categoría</option>

                            </select>
                        </div>
                        <div class='col-6'>
                            Precio:
                            <div class="input-group mb-2 mr-sm-2">
                                <div class="input-group-prepend">
                                    <div class="input-group-text">$</div>
                                </div>
                                <input type="text" class="form-control" id="Precio" name='Precio' placeholder="Precio">
                            </div>
                        </div>
                    </div>
                    <div id='categoria'>
                        Nueva Categoría : <input type='text' name='nuevaCategoria' class='form-control'
                            id='nuevaCategoria'>
                    </div>
                    Descripción: <textarea class="form-control" name='descripcion' rows="5" id="descripcion"></textarea>
                    Imagen:
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" name='imagen' id="imagen" lang="en"
                            onchange='changePlaceHolder()'>
                        <label class="custom-file-label" id='placeholder' for="customFileLang">Choose other file</label>
                    </div>


                    <button type='submit' class='btn btn-primary'>Someter</button>
            </div>

            </form>






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

<script>


    $(document).ready(function () {
        $('#categoria').hide()
    });
    function change(string) {
        if ($('#' + string).val() == 0) {
            $('#categoria').show();
        }
        else {
            $('#categoria').hide();
        }

    }
    function changePlaceHolder() {
        var val = $('#imagen').val();
        $('#placeholder').html(val);
    }

    function changeInput(nombre, descripcion, id, precio, categoria) {
        $("#nombre").val(nombre);
        $('#selectCat').val(categoria);
        $('#Precio').val(precio);
        $('#descripcion').val(descripcion);
        $('#idItem').val(id);
    }



</script>
{% endblock %}