@extends('layouts.back')

@section('titulo', 'Grupos de Comissão')

@section('page_header', 'Painel')

@section('breadcrumbs')
@if($item->id)
@breadcrumbs(["itens" => ["Grupos de Comissão" => route('grupos-comissoes.index'), "Editar grupo #" . $item->id => ""]])
@else
@breadcrumbs(["itens" => ["Grupos de Comissão" => route('grupos-comissoes.index'), "Criar grupo" => "" ]])
@endif
@endsection

@push('header_imports')
    <link href="{{asset('plugins/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{asset('adm/assets/js/jsTree/themes/default/style.min.css')}}" rel="stylesheet" type="text/css"/>
@endpush

@section('content')
    <div class="row">
        <div class="col-lg-12">

            @component('components.outros.botoes-padroes-topo', ['route' => 'grupos-comissoes', 'item' => $item])
            @endcomponent

            <form action="{{$item->id ? route('grupos-comissoes.update', $item->id) : route('grupos-comissoes.store')}}" method="post" enctype="multipart/form-dat" id="form-principal">
                @csrf
                {{$item->id ? method_field('PATCH') : ''}}

                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{{ $item->id ? 'Editar Grupo' : 'Novo Grupo'}}</h4>
                    </div>
                    <div class="card-body">

                        <ul class="nav nav-tabs nav-tabs-custom" role="tablist" id="tabs">
                            <li class="nav-item" id="tab-detalhes">
                                <a class="nav-link active" data-toggle="tab" href="#grupo" role="tab">
                                    <span class="d-none d-md-block"><i class="fa fa-exclamation-circle text-danger {{$errors->has('nome') ? '' : 'd-none'}} error-alert"></i> Grupo</span><span class="d-block d-md-none"><i class="mdi mdi-home-variant h5"></i></span>
                                </a>
                            </li>
                            <li class="nav-item" id="tab-representante">
                                <a class="nav-link" data-toggle="tab" href="#item-grupo" role="tab">
                                    <span class="d-none d-md-block"><i class="fa fa-exclamation-circle text-danger {{$errors->has('valor') || $errors->has('mes') || $errors->has('repeticoes') ? '' : 'd-none'}} error-alert"></i> Itens Grupo</span><span class="d-block d-md-none"><i class="mdi mdi-account h5"></i></span>
                                </a>
                            </li>
                        </ul>

                        @component('components.outros.alerta-erros', compact('errors'))
                        @endcomponent

                        <div class="tab-content">

                            <div class="tab-pane active" id="grupo" role="tabpanel">

                                <div class="form-group row" style="margin-top: 10px;">
                                    <div class="col-md-12 parent-class-fields">
                                        <label class="control-label col-md-8" for="nome">Nome <span class="required">*</span></label>
                                        <div class="col-md-12">
                                            <input type="text" class="form-control" name="nome" id="nome" maxlength="80" value="{{old('nome', $item->nome)}}" placeholder="Comissão Grupo João">
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="tab-pane" id="item-grupo" role="tabpanel">

                                <div class="panel-body">
                                    <nav class="nav-midia-historias">
                                        <input type="hidden" name="listaitenscomissao" id="listaitenscomissao" value="{{$item->id ? $item->itens()->get()->toJson() : '[]'}}"/>
                                    </nav>
                                </div>

                                <div class="form-group row">
                                    <div class="col-md-4 parent-class-fields">
                                        <label class="control-label col-md-8" for="mes_inicial">Mês <span class="required">*</span></label>
                                        <div class="col-md-12">
                                            <input type="number" class="form-control" id="mes" min="1" value="{{old('mes', 1)}}">
                                        </div>
                                    </div>
                                    <div class="col-md-8 parent-class-fields espacamento-superior-sm">
                                        <label class="control-label col-md-8" for="repeticoes">Repetições <span class="required">*</span></label>
                                        <div class="col-md-12">
                                            <input type="number" class="form-control" id="repeticoes" min="0" value="{{old('repeticoes', 0)}}">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <div class="col-md-3">
                                        <label class="control-label col-md-8" for="tipo">Tipo</label>
                                        <div class="col-md-12 parent-class-fields">
                                            <select class="form-control" style="width: 100%;" id="tipo" required>
                                                <option value="percentual" {{old('tipo') == 'percentual' ? 'checked' : ''}}>Percentual</option>
                                                <option value="valor" {{old('tipo') == 'valor' ? 'checked' : ''}}>Valor</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4 parent-class-fields espacamento-superior-sm">
                                        <label class="control-label col-md-8" for="valor"><span class="label-valor-tipo">Valor </span><span class="required">*</span></label>
                                        <div class="col-md-12">
                                            <input type="text" class="form-control" id="valor" maxlength="6" value="{{old('valor', 0)}}">
                                        </div>
                                    </div>
                                    <div class="col-md-5 col-sm-12" id="botoes-add-item">
                                        <div class="btn-group" style="bottom: -29px;">
                                            <button type="button" class="btn btn-purple waves-effect waves-light btn-salvar-grupo">Adicionar</button>
                                            <button type="button" class="btn btn-secondary waves-effect">Cancelar</button>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <table id="datatable" class="table table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                                        <table class="table table-bordered dt-responsive nowrap" cellspancing="0" width="100%">
                                            <thead>
                                                <tr>
                                                    {{-- <th class="no-sort">#</th> --}}
                                                    <th>Tipo</th>
                                                    <th>Valor</th>
                                                    <th>Mês Inicial</th>
                                                    <th>Repetições</th>
                                                    <th>Ações</th>
                                                </tr>
                                            </thead>
                                            <tbody id="grupos-add">
                                                @foreach($item->itens as $item_grupo)
                                                    <tr class="group-items">
                                                        {{-- <td>{{$item->id}}</td> --}}
                                                        <td class="col-tipo">{{ucfirst($item_grupo->tipo)}}</td>
                                                        <td class="col-valor">{{$item_grupo->valor}}</td>
                                                        <td class="col-mes-inicial">{{$item_grupo->mes}}</td>
                                                        <td class="col-repeticoes">{{$item_grupo->repeticoes}}</td>
                                                        <td>
                                                            <div class="btn-group">
                                                                {{-- <a href="javascript:void(0);" class="btn btn-default btn-sm btn-editar" data-id="{{$item->id}}"><i class="fa fa-pencil" aria-hidden="true"></i></a> --}}
                                                                <a href="javascript:void(0);" class="btn btn-default btn-sm btn-excluir" data-id="{{$item_grupo->id}}"><i class="fa fa-trash" aria-hidden="true"></i></a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </table>
                                </div>

                            </div>
                        </div>

                    </div>

                    <div class="card-footer">
                        <div class="pull-left ml-2">
                            <button class="btn btn-success waves-effect waves-light">Salvar</button>
                            <a href="{{route('grupos-comissoes.index')}}" class="btn btn-secondary waves-effect">Cancelar</a>
                        </div>
                    </div>
                </div>

            </form>

        </div>
    </div>

@endsection

@push('footer_imports_end')
    <script src="{{asset('plugins/select2/js/select2.min.js')}}"></script>
    <script src="{{asset('adm/assets/js/grupos_comissao.js')}}"></script>
    <script src="{{asset('js/validations/adm/valida.grupos-comissoes.js') }}"></script>
@endpush