@extends('layouts.layout_admin')
@section('title', 'Módulo Categoría | ')

@section('assets')
    <!-- This page plugin CSS -->
    <link href="{{ asset('plugin/datatables.net-bs4/css/dataTables.bootstrap4.css') }}" rel="stylesheet">
    <link href="{{ asset('css/admin/modulos.css') }}" rel="stylesheet">
@endsection

@section('scripts')
    <!--This page plugins -->
    <script src="{{ URL::asset('plugin/datatables/media/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ URL::asset('plugin/dist/js/pages/datatable/custom-datatable.js') }}"></script>
    <script src="{{ URL::asset('plugin/block-ui/jquery.blockUI.js') }}"></script>
    <script src="{{ URL::asset('js/admin/categoria.js') }}"></script>
@endsection

@section('page-breadcrumb')
    <h4 class="page-title">Módulo categorías</h4>
@endsection

@section('content')
    <div class="row">
        <div class="col-12 mo_categoria">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive table_categoria">
                        <div class="col-12 np">
                            <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modalCategoria"><i
                                    class="mr-1 mdi mdi-plus-outline"></i>Agregar categoría</button>
                            <button class="btn btn-danger btn-sm" id="deleteRowsSelect" style="display: none"><i
                                    class="mdi mdi-delete mr-2"></i>Eliminar filas</button>
                        </div>
                        <table id="table_categoria" class="table table-striped table-bordered display no-wrap"
                            style="width:100%">
                            <thead>
                                <tr>
                                    <th class="custom-checkbox text-center" style="width: 25px">
                                        <input type="checkbox" class="custom-control-input checkRowTable"
                                            id="checkSelectAll">
                                        <label class="custom-control-label" for="checkSelectAll"></label>
                                    </th>
                                    <th>Nombre español</th>
                                    <th>Nombre inglés</th>
                                    <th style="width: 50px">Orden de visualización</th>
                                    <th style="width: 50px">Estado</th>
                                    <th style="width: 50px">Opciones</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para agregar/editar categorias -->
    <div class="modal fade modalRegistro" id="modalCategoria" data-backdrop="static" data-keyboard="false" tabindex="-1"
        role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Nueva Categoría</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="col-12 form-group row nm np">
                        <div class="col-12 col-sm-4">
                            <label class="mb-0">Orden de visualización:</label>
                        </div>
                        <div class="col-10 col-sm-4">
                            <input type="number" id="ordenCategoria" class="form-control input-number" min="1">
                            <div class="invalid-feedback">
                                Ingresar un número mayor a 0.
                            </div>
                        </div>
                        <div class="col-1">
                            <span class="d-inline-block icon_info" id="tooltipModal" tabindex="0" data-toggle="tooltip"
                                title="Establezca el orden de visualización de las categorías, el número 1, representa el primer registro o la categoría que se mostrará en la parte superior.">
                                <i class="fas fa-info-circle"></i></span>
                        </div>
                    </div>
                    <div class="col-12 form-group row nm np">
                        <div class="col-12 col-sm-4">
                            <label class="mb-0">Nombre español:</label>
                        </div>
                        <div class="col-12 col-sm-8">
                            <input type="text" id="nombre_es" class="form-control">
                            <div class="invalid-feedback">
                                Campo requerido.
                            </div>
                        </div>
                    </div>
                    <div class="col-12 form-group row nm np">
                      <div class="col-12 col-sm-4">
                          <label class="mb-0">Nombre inglés:</label>
                      </div>
                      <div class="col-12 col-sm-8">
                          <input type="text" id="nombre_en" class="form-control">
                          <div class="invalid-feedback">
                              Campo requerido.
                          </div>
                      </div>
                  </div>
                    <div class="col-12 form-group row nm np">
                        <div class="col-12 col-sm-4">
                            <label class="mb-0">Estado:</label>
                        </div>
                        <div class="col-12 col-sm-8">
                            <select id="estadoCategoria" class="form-control">
                                <option value="1">Activo</option>
                                <option value="0">Inactivo</option>
                            </select>
                            <div class="invalid-feedback">
                                Campo requerido.
                            </div>
                        </div>
                    </div>
                    <input type="hidden" id="idcategoria">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-primary" id="btnAddCategoria" value="new">Guardar</button>
                </div>
            </div>
        </div>
    </div>
@endsection