@extends('layouts.admin')

@section('content')
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <i class="flaticon-piggy-bank"></i> Contas
                </h3>
                <ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
                    <li class="m-nav__item m-nav__item--home">
                        <a href="{{route('dashboard')}}" class="m-nav__link m-nav__link--icon">
                            <i class="m-nav__link-icon la la-home"></i>
                        </a>
                    </li>
                    <li class="m-nav__separator">-</li>
                    <li class="m-nav__item">
                        <a href="" class="m-nav__link">
                            <span class="m-nav__link-text">
                                Contas
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="m-content">
        <div class="m-alert m-alert--icon m-alert--air m-alert--square alert alert-dismissible m--margin-bottom-30" role="alert">
            <div class="m-alert__icon m-alert__icon--top">
            </div>
            <div class="m-alert__text">
                <form class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed" id="form-account" name="form-account" enctype="multipart/form-data">
                    @csrf
                    <div class="m-portlet__body">
                        <div class="form-group m-form__group row">
                            <div class="col-lg-4">
                                <label>
                                    Cliente/Fornecedor
                                </label>
                                @component('components.companies')
                                @endcomponent
                            </div>
                            <div class="col-lg-4">
                                <label>
                                    Categoria
                                </label>
                                @component('components.categories')
                                @endcomponent
                            </div>
                            <div class="col-lg-4">
                                <label>
                                    Forma de pagamento
                                </label>
                                @component('components.payments')
                                @endcomponent
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <div class="col-lg-3">
                                <label>
                                    Status
                                </label>
                                @component('components.status')
                                @endcomponent
                            </div>
                            <div class="col-lg-4">
                                <label>
                                    Tipo
                                </label>
                                <div class="m-checkbox-inline">
                                    <label class="m-checkbox">
                                        <input type="checkbox" name="type[]" value="R"> Receita
                                        <span></span>
                                    </label>
                                    <label class="m-checkbox">
                                        <input type="checkbox" name="type[]" value="D"> Despesa
                                        <span></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        @include('includes.dataTable')
    </div>

    @include('includes.dropzone')

@endsection

@push('scripts')
    <script>
        $(document).ready(function(){
            $('#company_id, #category_id, #payment_id, #status, input[name="type[]"]').on('change', function(){
                $('#dataTable').DataTable().ajax.reload();
            });
        });
    </script>
@endpush