@extends('../layouts.app')

<link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-select-bs4/css/select.bootstrap4.min.css">
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/sweetalert2/dist/sweetalert2.min.css">
<link rel="stylesheet" href="css/preloader.css">

<style type="text/css">
    .modal-xl {
        max-width: 96% !important;
    }

    div#editar-conta-parcelada .modal-dialog,
    div#editar-conta-parcelada .modal-content {
        height: 96%;
    }

    div#editar-conta-parcelada .modal-body {
        overflow-y: scroll;
    }
</style>

@section('content')
@include('../layouts.headers.cards_prod')

<div class="container-fluid mt--5">
    <div class="row">
        <div class="col-md-4 order-md-2">
            <div class="card bg-secondary shadow">
                <div class="card-header bg-white border-0">
                    <div class="row align-items-center">
                        <div class="col-8">
                            <h3 class="mb-0">{{ __('Cadastros') }}</h3>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <button class="btn btn-block btn-lg btn-default my-1" data-target="#modal-cadastrar-classe" data-toggle="modal">Adicionar Classe</button>
                    <button class="btn btn-block btn-lg btn-default my-1" data-target="#modal-cadastrar-grupo" data-toggle="modal">Adicionar Grupo</button>
                    <button class="btn btn-block btn-lg btn-default my-1" data-target="#modal-cadastrar-subgrupo" data-toggle="modal">Adicionar Subgrupo</button>
                </div>
            </div>
        </div>
        <div class="col-md-8 order-md-1">
            <div class="card bg-secondary shadow">
                <div class="card-header bg-white border-0">
                    <div class="row align-items-center">
                        <div class="col-7">
                            <h3 class="mb-0">{{ __('Plano de Contas') }}</h3>
                        </div>
                        <div class="col-5">
                            <button class="btn btn-danger btn-sm float-right" id="esconder" type="button"><i class="fas fa-eye-slash"></i> Esconder</button>
                            <button class="btn btn-success btn-sm float-right" id="vizualizar" type="button"><i class="fas fa-eye"></i> Mostrar</button>
                        </div>
                    </div>
                </div>
                <div class="card-body">

                    <div class="row">

                        @foreach($classes as $classe)
                        <div class="accordion w-100" id="planoClasse">
                            <div class="card mb-1">
                                <div class="card-header" id="classe-{{$classe->id}}" data-toggle="collapse" data-target="#grupo-{{$classe->id}}" aria-expanded="false" aria-controls="grupo-{{$classe->id}}">
                                    <h5 class="mb-0">{{$classe->id}}-{{$classe->nome}}</h5>
                                </div>
                                <div id="grupo-{{$classe->id}}" class="collapse" data-parent="#planoClasse">
                                    <div class="card-body p-2">

                                        @foreach($grupos->where('id_classe_fk', $classe->id) as $grupo)
                                        <div class="accordion float-right" style="width:90%" id="planoGrupo">
                                            <div class="card mb-1">
                                                <div class="card-header" id="classe-{{$grupo->id}}" data-toggle="collapse" data-target="#subgrupo-{{$grupo->id}}" aria-expanded="false" aria-controls="subgrupo-{{$grupo->id}}">
                                                    <h5 class="mb-0">{{$grupo->nome}}</h5>
                                                </div>
                                                <div id="subgrupo-{{$grupo->id}}" class="collapse" data-parent="#planoGrupo">
                                                    <div class="card-body p-2">
                                                        @foreach($subgrupos->where('id_grupo_fk', $grupo->id) as $subgrupo)
                                                        <div class="accordion float-right" style="width:90%" id="planoSubgrupo">
                                                            <div class="card mb-1">
                                                                <div class="card-header" id="classe-{{$grupo->id}}" data-toggle="collapse" data-target="#item-{{$subgrupo->id}}" aria-expanded="false" aria-controls="item-{{$subgrupo->id}}">
                                                                    <h5 class="mb-0">{{$subgrupo->nome}}</h5>
                                                                </div>
                                                                <div id="item-{{$subgrupo->id}}" class="collapse" data-parent="#planoSubgrupo"></div>
                                                            </div>
                                                        </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<!--Modal Classe-->
<div class="modal fade" id="modal-cadastrar-classe" tabindex="-1" role="dialog" aria-labelledby="modal-cadastrar-classe" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    Cadastrar Classe
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="background-color:#f7fafc">
                <form method="post" action="{{route('configuracoes.plano_contas_classe')}}">
                    <!-- Passando o Token -->
                    {{csrf_field()}}
                    <div class="form-row">

                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-control-label" for="input-name">Nome</label>
                                <input type="text" class="form-control form-control-alternative" name="nome_classe">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
                        <button type="submit" class="btn btn-success" id="btn_salvar_alteracao">Salvar</button>

                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--Modal Grupo-->
<div class="modal fade" id="modal-cadastrar-grupo" tabindex="-1" role="dialog" aria-labelledby="modal-cadastrar-grupo" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    Cadastrar grupo
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="background-color:#f7fafc">
                <form method="post" action="{{route('configuracoes.plano_contas_grupo')}}">
                    <!-- Passando o Token -->
                    {{csrf_field()}}
                    <div class="form-row">

                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-control-label" for="input-name">Nome</label>
                                <input type="text" class="form-control form-control-alternative" name="nome_grupo">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-control-label" for="input-name">Classe</label>
                                <select class="form-control form-control-alternative" name="id_classe">
                                    @foreach($classes as $classe)
                                    <option value="{{$classe->id}}">{{$classe->nome}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
                        @can('editar-contas-a-pagar')
                        <button type="submit" class="btn btn-success" id="btn_salvar_alteracao">Salvar</button>
                        @endcan
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--Modal Subgrupo-->
<div class="modal fade" id="modal-cadastrar-subgrupo" tabindex="-1" role="dialog" aria-labelledby="modal-cadastrar-subgrupo" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    Cadastrar subgrupo
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="background-color:#f7fafc">
                <form method="post" action="{{route('configuracoes.plano_contas_subgrupo')}}">
                    <!-- Passando o Token -->
                    {{csrf_field()}}
                    <div class="form-row">

                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-control-label" for="input-name">Nome</label>
                                <input type="text" class="form-control form-control-alternative" name="nome_subgrupo">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-control-label" for="input-name">Grupo</label>
                                <select class="form-control form-control-alternative" name="id_grupo">
                                    @foreach($grupos as $grupo)
                                    <option value="{{$grupo->id}}">{{$grupo->nome}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
                        @can('editar-contas-a-pagar')
                        <button type="submit" class="btn btn-success" id="btn_salvar_alteracao">Salvar</button>
                        @endcan
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script src="{{ asset('argon/vendor/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.flash.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-select-bs4/js/dataTables.select.min.js') }}"></script>

<script>
    $(document).on('click', '#vizualizar', function() {
        $('#planoClasse .collapse').addClass('show');
    });

    $(document).on('click', '#esconder', function() {
        $('#planoClasse .collapse').removeClass('show');
    });
</script>

@endpush