{% extends 'AppBundle::layout_backend.html.twig' %}

{% block title 'Gestión de Categorias'|trans %}

{% block stylesheets2nd %}

    {# <link href="https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.min.css" rel="stylesheet">#}

    {% stylesheets %}
        <link rel="stylesheet" href="{{ asset_url }}"/>
    {% endstylesheets %} 

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    
{% endblock %}

{% block bootstrap_stylesheets %}
    <link 
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" 
        crossorigin="anonymous"
    >
{% endblock %}

{% block bootstrap_javascript %}
    <script 
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" 
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" 
        crossorigin="anonymous">
    </script>
{% endblock %}
  
{% block content %}
    {% stylesheets 'bundles/app/css/views/CategoriesSeller/index.css' filter='cssrewrite' %}
        <link rel="stylesheet" href="{{ asset_url }}"/>
    {% endstylesheets %}
    <div class="box">
        <div class="box-body">
            <div class="row">
                <div class="col-xs-8 col-lg-8 col-md-8">
                    <div class='card'>
                        <div class="card-header">
                            <strong>Árbol de categorías</strong> <i data-toggle="tooltip" class="fa fa-question-circle cfj-info ml-1" data-placement="right" title="Haga click derecho sobre una categoría para editarla, eliminarla o generar una sub-categoría."></i>
                        </div>
                        <div id="principal-panel" class="card-body">
                            <div class="d-flex mt-1 mb-3">
                                <input type="search" id="searchBar" class="form-control rounded-start" maxlength="200" placeholder="Buscar categorías" aria-label="Buscar categorías" aria-describedby="button-addon2">
                                <button class="btn btn-custom-primary rounded-end" type="button" id="searchButton">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
                                    </svg>
                                </button>
                            </div>
                            <div id="categoryTree"></div>
                            <div hidden class="text-center" id="categoryPaginationDiv">
                                <nav aria-label="Paginado" id="categoryPagination"></nav>
                            </div>
                            <div id="loadingBox" class="alert alert-light text-center"><i class="fa fa-circle-o-notch fa-spin loading"></i> Cargando categorías...</div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-lg-4 col-md-4">
                    <div class='card'>
                        <div class="card-header">
                            <strong>Nueva categoría</strong>  
                        </div>
                        <div id="principal-panel" class="card-body">
                            <div>
                                <div class="mb-3">
                                    <label for="categoryCodeInput">Código: <span style="color:red">*</span></label>
                                    <input placeholder="Inserte el código de la categoría" class="form-control w-100" type="text" name="categoryCodeInput" id="categoryCodeInput">
                                </div>
                                <div class="mb-3">
                                    <label for="categoryNameInput">Nombre: <span style="color:red">*</span></label>
                                    <input placeholder="Inserte el nombre de la categoría" class="form-control w-100" type="text" name="categoryNameInput" id="categoryNameInput">
                                </div>
                                <div class="mb-3">
                                    <label>Categoría padre:</label>
                                    <div>
                                        <select id="selectCategoryParentCode" name="selectCategoryParentCode" class="form-control w-100"></select>
                                    </div>
                                </div>
                                <button id="newCategoryBtn" type="button" class="btn btn-sm btn-custom-primary w-25" style="float: right;" data-toggle="tooltip" data-placement="top">Crear</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% include 'AppBundle:CategoriesSeller:categories_seller_modal.html.twig' %}
{% endblock %}

{% block javascripts2nd %}

    {% javascripts
        '@AppBundle/Resources/public/js/HTML/global/html_blocks.js'
        '@AppBundle/Resources/public/js/Product/views/specific_blocks/categoryHelper.js'
        '@AppBundle/Resources/public/js/CategoriesSeller/categoriesSellerHelper.js'
    %}
        <script src="{{ asset_url }}"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    {% endjavascripts %}
{% endblock %}