@extends('layout.backoffice')
@section('content')
    <div class="row">
        <div class="col-lg-4">
            <div class="card card-primary card-outline">
                <div class="card-header">
                    <h3 class="card-title">Arbol</h3>
                </div>
                <div class="card-body">
                    <div class="hummingbird-treeview p-0">
                        <ul id="treeview" class="hummingbird-base p-0">
                            @foreach ($arbol as $cat)
                                <li>
                                    @if(empty($cat["sub_cat"]))
                                        <label class="checkbox-inline"><a href="{{ url('backoffice/producto/categoria?id='.$cat["id_categoria"]) }}">{{ $cat["nombre"] }}</a></label>
                                @else
                                    <li>
                                        <i class="fa fa-plus"></i>
                                        <label class="checkbox-inline"><a href="{{ url('backoffice/producto/categoria?id='.$cat["id_categoria"]) }}">{{ $cat["nombre"] }}</a></label>
                                        <ul>
                                            @foreach ($cat["sub_cat"] as $subcat)
                                                <li>
                                                    <label class="checkbox-inline"><a href="{{ url('backoffice/producto/categoria?id='.$subcat["id_categoria"]) }}">{{$subcat["nombre"]}}</a></label>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </li>
                                    @endif
                                    </li>
                                    @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="card card-primary card-outline">
                <div class="card-header">
                    <h3 class="card-title">Gestión Categoría</h3>
                </div>
                <div class="card-body">
                    <form id="categoria">
                        <div class="row">
                            <input type="hidden" value="" name="entity"/>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label>Nombre</label>
                                    <input value="" name="nombre" type="text" class="form-control form-control-border form-control-sm system_validador_vacio" id="nombre">
                                </div>
                            </div>
                            <div class="form-group col-12 col-md-6">
                                <label>Categoría padre</label>
                                <select name="categoria_padre" id="categoria_padre" class="custom-select form-control-border form-control-sm rounded-0">
                                    <option value=""></option>
                                    @foreach ($arbol as $cat)
                                        <option value="{{ $cat["id_categoria"] }}">{{ $cat["nombre"] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-12 col-md-6">
                                <label>Estado</label>
                                <select name="estado" id="estado" class="custom-select form-control-border form-control-sm rounded-0 system_validador_vacio">
                                    <option value=""></option>
                                    <option value="1">Activo</option>
                                    <option value="0">Inactivo</option>
                                </select>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label>URL</label>
                                    <input value="" name="url" type="text" class="form-control form-control-border form-control-sm" id="url">
                                    <small id="emailHelp" class="form-text text-muted">Dejar en blanco para generar automaticamente</small>
                                </div>
                            </div>
                            <div class="col-sm-6 col-12">
                                <div class="form-group">
                                    <label>Meta Titulo (SEO)</label>
                                    <input value="" name="seo_meta_titulo" type="text" class="form-control form-control-border form-control-sm" id="seo_meta_titulo">
                                </div>
                            </div>
                            <div class="col-sm-6 col-12">
                                <div class="form-group">
                                    <label>Palabras Clave (SEO)</label>
                                    <input value="" name="seo_meta_palabras_clave" type="text" class="form-control form-control-border form-control-sm" id="seo_meta_palabras_clave">
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label>Meta Descripción (SEO)</label>
                                    <textarea name="seo_meta_descripcion" type="text" class="form-control form-control-border form-control-sm system_validador_vacio" id="seo_meta_descripcion" rows="3""></textarea>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="card-footer">
                                        <button type="button" id="btn_guardar" class="btn btn-primary btn-sm btn-flat">Guardar</button>
                                    </div>
            </div>
        </div>
    </div>
    <script src="{{ URL::asset('dist/js/hummingbird-treeview.min.js') }}"></script>
    <link rel="stylesheet" href="{{URL::asset('dist/css/hummingbird-treeview.css')}}">
    <style>
        .hummingbird-treeview .fa {
            font-size: 14px
        }

        .hummingbird-treeview, .hummingbird-treeview * {
            font-size: 18px
        }
    </style>
    <script>
        jQuery("#treeview").hummingbird();
        jQuery("#treeview").hummingbird("collapseAll");
        jQuery(document).ready(function () {
            jQuery('.datetimepicker-input').change();
            jQuery('#estado').val("").change();
            jQuery('#categoria_padre').val("").change();
        });

        jQuery(document).on('click', '#btn_guardar', function () {
            if (system_validarcampos("categoria")) {
                axios.post('categoria', getDataJson("categoria")).then(function (resp) {
                    if (resp.data.error === 0) {
                        Swal.fire("Categoría creado", '', 'success').then(function () {
                            location.reload();
                        });
                    } else {
                        notificarUsuario(resp.data.mensaje);
                    }
                });
            }
        });

        jQuery(document).on('click', '#btn_actualizar', function () {
            if (system_validarcampos("categoria")) {
                axios.put('categoria', getDataJson("categoria")).then(function (resp) {
                    if (resp.data.error === 0) {
                        Swal.fire("Categoría actualizada", '', 'success').then(function () {
                            location.reload();
                        });
                    } else {
                        notificarUsuario(resp.data.mensaje);
                    }
                });
            }
        });

    </script>
@endsection