@extends('layouts.transparencia.painel')
@section('content')
    <style>
        .ui-autocomplete-loading {
            background: white url({{url('img/gif/ajax-loader.gif')}}) right center no-repeat;
        }
    </style>

    <h3 class="page-header"><span class="glyphicon glyphicon-file" aria-hidden="true"></span> {{$modulo[1]}} <small>(Incluir Novo Registro)</small></h3>
    <form name="FrmCreate" action="{{route('contas-publicas.store')}}" method="post" autocomplete="off">
        @csrf
        <div class="row">
            <div class="col-md-12">
                <label for=""><i style="color: grey">* Campo de Preenchimento Obrigatório</i></label>
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                <label for="">* Data Publicação</label>
                <div class="input-group">
                    <input type="text" class="form-control" name="ctb_dataenvio" id="ctb_dataenvio" required>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                    </span>
                </div>
            </div>
            <div class="col-md-4 col-md-offset-2">
                <label for="">* Grupo</label>
                <select class="form-control" name="ctb_grupo" id="category" required>
                    <option selected="selected"></option>
                    @foreach($categoria as $cat)
                        <option value="{{$cat->grp_id}}">{{$cat->grp_nome}}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label for="">* Subgrupo</label>
                <select class="form-control" name="ctb_subgrupo" id="subcategory" required></select>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8">
                <label for="">* Título da Publicação</label>
                <input type="text" class="form-control" name="ctb_titulo" required>
            </div>
            <div class="col-md-2">
                <label for="">Exercício</label>
                <input type="text" class="form-control" name="ctb_exercicio">
            </div>
            <div class="col-md-2">
                <label for="">Nº de Referência</label>
                <input type="text" class="form-control" name="ctb_ref">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <label for="">Descrição</label>
                <textarea cols="15" rows="5" class="form-control" name="ctb_descricao"></textarea>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-12">
                <button type="button" onclick="window.history.back()" class="btn btn-default"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Voltar</button>
                <button type="submit" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span> Salvar</button>
            </div>
        </div>
        <hr>
    </form>
@endsection
@push('script')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $(document).ready(function () {
            $('#category').on('change', function (e) {
                let grp_id = e.target.value;
                $.ajax({
                    url: "{{ route('sub-categoria') }}",
                    type: "POST",
                    data: {
                        id: grp_id
                    },
                    beforeSend: function () {
                        $.blockUI({message: '<img src="{{url('img/gif/ajax-loader.gif')}}" />'});
                    },
                    success: function (data) {
                        let select = $('#subcategory');
                        select.empty();
                        select.append('<option selected="selected"></option>');
                        $.each(data.subcategorias, function (index, subcategoria) {
                            select.append('<option value="' + subcategoria.sbg_id + '">' + subcategoria.sbg_nome + '</option>');
                        })
                        $.unblockUI();
                    }
                })
            });
        });
        $(function () {
            $('#ctb_dataenvio').mask('99/99/9999').datepicker();
        })
    </script>
    <script src="{{url(mix('modulos/transparencia/contas_publicas/js/create.js'))}}"></script>
@endpush