{% extends "modulos/dashboard/dashboard.html" %}

{% block head %}
    {{ parent() }}

    <link rel="stylesheet" href="/node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="/node_modules/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css">
    <link rel="stylesheet" href="/node_modules/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" href="/node_modules/datatables.net-searchbuilder-bs4/css/searchBuilder.bootstrap4.min.css">
{% endblock %}

{% block content %}            
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">Producto</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="/productos">Productos</a></li>
                            <li class="breadcrumb-item active">Lista</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <div class="content">
            <div id="contenedor" class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Productos Registrados</h3>
                            </div>
                            
                            <div class="card-body">
                                <table id="products-table" class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>No</th>
                                            <th>Marca</th>
                                            <th>Nombre</th>
                                            <th>C&oacute;digo</th>
                                            <th>SKU</th>
                                            <th>Modelo</th>
                                            <th>Categor&iacute;a</th>
                                            <th>Imagenes</th>
                                            <th>Estatus</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for product in products %}
                                        <tr>
                                            <td class="align-middle"></td>
                                            <td class="align-middle">{{ product.m_product_id }}</td>
                                            <td class="align-middle">{{ product.marca }}</td>
                                            <td class="align-middle">{{ product.name }}</td>
                                            <td class="align-middle">
                                                <a href="/producto/{{ product.value }}">{{ product.value }}</a>
                                            </td>
                                            <td class="align-middle">{{ product.sku }}</td>
                                            <td class="align-middle">{{ product.modelo }}</td>
                                            <td class="align-middle">{{ product.categoria }}</td>
                                            <td class="align-middle">
                                                <div class="product-img">
                                                    <img class="img-circle" {% if product.image %}  src="{{ product.image }}" {% else %} src="https://via.placeholder.com/150" {% endif %} alt="{{ product.value }}">
                                                    <span class="badge {% if product.qtyimage > 0 %} badge-success {% else %} badge-warning {% endif %}">{{ product.qtyimage }}</span>
                                                </div>
                                            </td>
                                            <td class="align-middle">
                                                <span class="badge {% if product.isactive > Y %} badge-success {% else %} badge-danger {% endif %}">
                                                    {% if product.isactive > Y %} Activo {% else %} Inactivo {% endif %}
                                                </span>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascript %}
    {{ parent() }}

    <script src="/node_modules/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="/node_modules/datatables.net-dt/js/dataTables.dataTables.min.js"></script>
    <script src="/node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="/node_modules/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="/node_modules/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js"></script>
    <script src="/node_modules/jszip/dist/jszip.min.js"></script>
    <script src="/node_modules/pdfmake/build/pdfmake.min.js"></script>
    <script src="/node_modules/pdfmake/build/vfs_fonts.js"></script>
    <script src="/node_modules/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="/node_modules/datatables.net-buttons/js/buttons.print.min.js"></script>
    <script src="/node_modules/datatables.net-buttons/js/buttons.colVis.min.js"></script>
    <script src="/node_modules/datatables.net-colreorder/js/dataTables.colReorder.min.js"></script>
    <script src="/node_modules/datatables.net-colreorder-dt/js/colReorder.dataTables.min.js"></script>
    <script src="/node_modules/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
    <script src="/node_modules/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js"></script>
    <script src="/node_modules/datatables.net-searchbuilder/js/dataTables.searchBuilder.min.js"></script>
    <script src="/node_modules/datatables.net-searchbuilder-bs4/js/searchBuilder.bootstrap4.min.js"></script>

    <script>App.Jaxon.Product.init();</script>
{% endblock %}