@extends('layouts.app')

@section('content')
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
    <div class="page-content">
        <!-- BEGIN PAGE HEADER-->
        <!-- BEGIN PAGE BAR -->
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li>
                    <a href="{{ url('/home') }}">Home</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <span>Categorias</span>
                </li>
            </ul>
        </div>
        <!-- END PAGE BAR -->
        <!-- BEGIN PAGE TITLE-->
        <h1 class="page-title nova-faixa"> Categorias
            <div class="pull-right">
                <i class="nova-faixa-icon icon-folder-alt"></i>
            </div>
        </h1>
        <h4>
            <small class="pull-right">
                <span class="ajuda" data-toggle="confirmation" data-popout="true" data-trigger="hover" data-placement="left" data-original-title="" title="" id="ajuda">
                    Ajuda <i class="fa fa-question-circle" aria-hidden="true"></i>
                </span>
            </small>
        </h4>
         <!-- END PAGE TITLE-->
        <!-- END PAGE HEADER-->
        <div class="row">
            <div class="col-md-12">
                <!-- BEGIN EXAMPLE TABLE PORTLET-->
                <div class="">                                 
                    <div class="portlet" style="margin-bottom: 0;">
                        <div class="portlet-body form">
                            <form class="horizontal-form" method="post" id="formPesquisa" onKeyPress="return submitenter(this,event)">
                                {{ csrf_field() }}  
                                <div class="" style="padding-bottom: 0;">
                                    <div class="row">
                                        <div class="col-md-12">
                                        @can('config-gestao_bot_categorias-cadastrar')
                                        <a data-toggle="modal" class="cadastrar">
                                            <button type="button" class="btn blue">
                                                <i class="fa fa-plus"></i> Cadastrar
                                            </button>
                                        </a>
                                        @endcan
                                        </div>
                                    </div>
                                    <div class="form-body row">
                                        <div class="col-md-12 nopadding" style="padding-bottom: 0px;">
                                            <div class="col-md-5">
                                                <div class="form-group">
                                                    <label class="control-label"><i class="fa fa-search"></i> Pesquisa - Categoria / Subcategoria</label>
                                                    <select multiple="" class="form-control" id="categorias_pai" name="categorias_pai[]" size="1">
                                                        @foreach( $categorias as $categoria )
                                                        @if( count($categoria->subCategoria) == 0 )
                                                        <option value="{{$categoria->id}}" data-descricao="{{$categoria->descricao}}">{{$categoria->nome}}</option>
                                                        @endif
                                                        @endforeach
                                                        @foreach( $categorias as $categoria )
                                                        @if( count($categoria->subCategoria) > 0 )
                                                        <optgroup label="{{$categoria->nome}}">
                                                            @foreach( $categoria->subCategoria as $sub )
                                                                <option class="subCategoria" value="{{$categoria->id}}">{{$sub->nome}}</option>
                                                            @endforeach
                                                        </optgroup>
                                                        @endif
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label">Descrição</label>
                                                    <input type="text" class="form-control" name="titulo" placeholder="Ex: Cobrança / Boletos / Categorias do setor financeiro.">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label class="control-label" style="width: 100%; height: 15px;"></label>
                                                    <!-- <a class="pull-right"> -->
                                                    <button type="button" class="btn blue" id="getCategoria">
                                                        <i class="fa fa-search"></i> Pesquisar
                                                    </button>
                                                    <!-- </a> -->
                                                </div>
                                            </div>
                                        </div>   
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <table class="table table-striped table-bordered table-advance table-hover table-checkable order-column" id="sample_1">
                            <thead>
                                <tr>
                                    <th>
                                        <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                            <input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes" />
                                            <span></span>
                                        </label>
                                    </th>
                                    <th><i class="fa fa-list"></i> Categoria </th>
                                    <th><i class="fa fa-wechat"></i> Qtd. de palavras </th>
                                    <th><i class="fa fa-indent"></i> Subcategoria </th>
                                    <th><i class="fa fa-pencil"></i> Descrição </th>
                                    <th><i class="fa fa-cogs"></i> Ações </th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <!-- END EXAMPLE TABLE PORTLET-->
            </div>
        </div>
    </div>
    <!-- END CONTENT BODY -->
</div>
<!-- END CONTENT -->

<!-- MODAL VISUALIZAR DE CATEGORIA -->
<div class="modal fade" id="visualizar" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background:#2598d8;font-weight: 600;color: white; ">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title" style="font-weight: 600 !important">Visualizar Categoria</h4>
            </div>
            <div class="modal-body" style="height: 300px; overflow-y: scroll;">
                <form action="" class="horizontal-form" method="post" id="categoriaVisualizar">
                    {{ csrf_field() }}
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label">Categoria</label>
                                <span class="required"> * </span>
                                <div id="nome_visualizar"></div>
                            </div>
                            <div class="form-group">
                                <div class="mt-repeater-visualizar-categoria">
                                    <label class="control-label">Subcategoria</label>
                                    <!-- <span class="required"> * </span> -->
                                    <div data-repeater-list="listaSubCategoria">
                                        <div data-repeater-item="" class="row">
                                            <div class="col-md-11" style="padding-bottom: 10px;">
                                                <input type="text" class="form-control" name="subCategoria" readonly="readonly">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label">Descrição</label>
                                <!-- <span class="required"> * </span> -->
                                <textarea rows="3" class="form-control" name="descricao" maxlength="180" style="resize: none" readonly="readonly"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal">Fechar</button>
                </div>
            </form>
            <div class="erros" style="display: none;">
                <div class="alert alert-danger">
                    <ul>
                    </ul>
                </div>
            </div>
            <div class="success" style="display: none;">
                <div class="alert alert-success">
                    <ul>
                    </ul>
                </div>
            </div>  
        </div>
    </div>
</div>

@can('config-gestao_bot_categorias-cadastrar')
<!-- MODAL CADASTRO DE CATEGORIA -->
<div class="modal fade" id="categoria" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background:#2598d8;font-weight: 600;color: white; ">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title" style="font-weight: 600 !important">Cadastrar Categoria</h4>
            </div>
            <div class="modal-body" style="height: 300px; overflow-y: scroll;">
                <form action="" class="horizontal-form" method="post" id="formCategorias">
                    {{ csrf_field() }}
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label">Categoria</label>
                                <span class="required"> * </span>
                                <input type="text" class="form-control" name="nome">
                            </div>
                            <div class="form-group">
                                <div class="mt-repeater-cadastrar-categoria">
                                    <label class="control-label">Subcategoria</label>
                                    <a href="javascript:;" data-repeater-create="" class="mt-repeater-cadastrar-categoria pull-right">
                                        <i class="fa fa-plus"></i> Adicionar Subcategoria
                                    </a>
                                    <div data-repeater-list="listaSubCategoria">
                                        <div data-repeater-item="" class="row">
                                            <div class="col-md-11" style="padding-bottom: 10px;">
                                                <input type="text" class="form-control" name="subCategoria">
                                            </div>
                                            <div class="col-md-1" style="padding-left: 0;">
                                                <a href="javascript:;" data-repeater-delete="" class="btn btn-danger">
                                                    <i class="fa fa-close"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label">Descrição</label>
                                <!-- <span class="required"> * </span> -->
                                <textarea rows="3" class="form-control" name="descricao" maxlength="180" style="resize: none"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal">Fechar</button>
                    <button type="button" class="btn blue" id="setCategoria">
                        <i class="fa fa-check"></i> Salvar</button>
                </div>
            </form>
            <div class="erros" style="display: none;">
                <div class="alert alert-danger">
                    <ul>
                    </ul>
                </div>
            </div>
            <div class="success" style="display: none;">
                <div class="alert alert-success">
                    <ul>
                    </ul>
                </div>
            </div>  
        </div>
    </div>
</div>
@endcan

@can('config-gestao_bot_categorias-editar')
<!-- MODAL EDITARA DE CATEGORIA -->
<div class="modal fade" id="editar" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background:#2598d8;font-weight: 600;color: white; ">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title" style="font-weight: 600 !important">Editar Categoria</h4>
            </div>
            <div class="modal-body" style="height: 300px; overflow-y: scroll;">
                <form action="" class="horizontal-form" method="post" id="categoriaEditar">
                    {{ csrf_field() }}
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label">Categoria</label>
                                <span class="required"> * </span>
                                <input type="text" class="form-control" name="nome">
                            </div>
                            <div class="form-group">
                                <div class="mt-repeater-editar-categoria">
                                    <label class="control-label">Subcategoria</label>
                                    <!-- <span class="required"> * </span> -->
                                    <a href="javascript:;" data-repeater-create="" class=" mt-repeater-visualizar-palavra-add pull-right">
                                        <i class="fa fa-plus"></i> Adicionar Subcategoria
                                    </a>
                                    <div data-repeater-list="listaSubCategoria">
                                        <div data-repeater-item="" class="row">
                                            <div class="col-md-11" style="padding-bottom: 10px;">
                                                <input type="text" class="form-control" name="subCategoria">
                                                <input type="hidden" name="sub_categoria_id" class="sub_categoria_id">
                                            </div>
                                            <div class="col-md-1" style="padding-left: 0;">
                                                <a href="javascript:;" data-repeater-delete="" class="btn btn-danger">
                                                    <i class="fa fa-close"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label">Descrição</label>
                                <!-- <span class="required"> * </span> -->
                                <textarea rows="3" class="form-control" name="descricao" maxlength="180" style="resize: none"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal">Fechar</button>
                    <button type="button" class="btn blue" id="editCategoria">
                        <i class="fa fa-check"></i> Salvar
                    </button>
                </div>
            </form>
            <div class="erros" style="display: none;">
                <div class="alert alert-danger">
                    <ul>
                    </ul>
                </div>
            </div>
            <div class="success" style="display: none;">
                <div class="alert alert-success">
                    <ul>
                    </ul>
                </div>
            </div>  
        </div>
    </div>
</div>
@endcan

@can('config-gestao_bot_categorias-excluir')
<div class="modal fade" id="categoria_excluir" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background:#2598d8;font-weight: 600;color: white; ">
                <button type="button" class="close" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="mensagem" style="font-weight: 600 !important"></h4>
            </div>
            <meta name="csrf-token-excluir" content="{{ csrf_token() }}">
            <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal">Não</button>
                    <button type="button" class="btn blue" id="excluirCategoria">
                        <i class="fa fa-check"></i> Sim</button>
            </div>
            <div class="erros" style="display: none;">
                <div class="alert alert-danger">
                    <ul>
                    </ul>
                </div>
            </div>
            <div class="success" style="display: none;">
                <div class="alert alert-success">
                    <ul>
                    </ul>
                </div>
            </div>  
        </div>
    </div>
</div>
@endcan

<link href="{{ asset('global/plugins/bootstrap-multiselect-master/dist/css/bootstrap-multiselect.css') }}" rel="stylesheet" type="text/css"/>
@endsection

@push('scripts')
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="{{ asset('global/scripts/datatable.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/datatables/datatables.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/jquery-repeater/jquery.repeater.1.2.1.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/bootstrap-multiselect-master/dist/js/bootstrap-multiselect.js') }}" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->

<script type="text/javascript">
$(document)
.ready(function() {
    $('#categorias_pai').multiselect({
        buttonClass: 'btn default',
        includeSelectAllOption: true,
        selectAllText: 'Selecionar todos',
        allSelectedText: 'Todos selecionados',
        nonSelectedText: 'Nenhuma categoria selecionada',
        numberDisplayed: 10,
        maxHeight: 200,
        buttonWidth: '100%',
        enableFiltering: true,
        enableCaseInsensitiveFiltering: true,
        filterPlaceholder: 'Pesquise aqui...',
        enableClickableOptGroups: true,
        enableCollapsibleOptGroups: true,
    });
});
</script>

<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="{{ asset('pages/scripts/categoria/table-datatables-managed.js') }}" type="text/javascript"></script>
<script src="{{ asset('pages/scripts/categoria/form-repeater.js') }}" type="text/javascript"></script>
<script src="{{ asset('pages/scripts/categoria/bootstrap-confirmation-index.js') }}" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
@endpush