@extends('adminlte::page')

@section('title', 'Sigo 2.0')

@section('content_header')
    <span></span>
@stop

@section('content')
    <a href="{{ route('financeiro.contaPagar.create') }}" class="btn btn-secondary btn-md" style="margin-bottom: 8px;">Novo
        Cadastro</a>
    <div class="card">
        <div class="card-header">
            <h1 class="card-title" style="font-weight:bold;">Contas a Pagar</h1>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-sm-9">
                    <div class="form-group">
                        <label>Fornecedores:</label>
                        <select id="comboFornecedores" name="comboFornecedores" class="form-control">
                            <option value="">--- Selecione ---</option>
                            @foreach ($allFornecedores as $allFornecedor)
                                <option value="{{ $allFornecedor->for_codigo ?? '' }}">
                                    {{ $allFornecedor->for_codigo ?? '' }} - {{ $allFornecedor->nome ?? '' }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-sm-3">
                    <button type="button" class="btn btn-primary" style="margin-top: 31px;"
                        onclick="consultarContasAPagar();">Consultar</button>
                    <button type="button" class="btn btn-danger" style="margin-top: 31px;"
                        onclick="clearInputs();">Limpar</button>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-8">
                    <div class="form-group">
                        <label style="display: block;">Período:</label>
                        Inicial:
                        <input id="dataInicial" oninput="" type="date" class="form-control" value="">
                        Final:
                        <input id="dataFinal" oninput="" type="date" class="form-control" value="">
                    </div>
                </div>
                <div class="col-sm-2" style="margin-left: 15px;">
                    <div class="form-group">
                        <label style="">Avaliar período por:</label>
                        <div class="form-check">
                            <input class="form-check-input" id="periodoContas" type="radio" name="radioPeriodo"
                                value="'E'">
                            <label class="form-check-label">Emissão</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" id="periodoContas" type="radio" name="radioPeriodo"
                                value="'V'">
                            <label class="form-check-label">Vencimento</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" id="periodoContas" type="radio" name="radioPeriodo"
                                value="'P'">
                            <label class="form-check-label">Previsão</label>
                        </div>
                    </div>
                </div>
                <div class="col-sm-1" style="">
                    <div class="form-group">
                        <label style="">Status:</label>
                        <div class="form-check">
                            <input class="form-check-input" id="statusContas" type="radio" name="radioStatus"
                                value="'Aberto'">
                            <label class="form-check-label">Aberto</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" id="statusContas" type="radio" name="radioStatus"
                                value="'Quitado'">
                            <label class="form-check-label">Quitado</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" id="statusContas" type="radio" name="radioStatus"
                                value="'Cancelado'">
                            <label class="form-check-label">Cancelado</label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <table id="tableContasAPagar" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th class='direita'>Código</th>
                                <th class='direita'>Fornecedor</th>
                                <th class='direita'>Emissão</th>
                                <th class='direita'>Vencimento</th>
                                <th class='direita'>Previsão</th>
                                <th class='direita'>Valor Total</th>
                                <th class='direita'>Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="overlay" id="carregamento">
            <i class="fas fa-2x fa-sync fa-spin"></i>
        </div>
    </div>

    <div class="modal fade" id="modalDataCancelamento">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Adicionar Data de Cancelamento</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label>Data de Cancelamento:</label>
                                <input id="" oninput="" type="date" class="form-control"
                                    value="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal"
                        onclick="">Adicionar</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalReplicarContasAPagar">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Replicar Contas a Pagar</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <label>Conta a Replicar:</label>
                    <div class="row" style="margin-top: -32px;">
                        <div class="col-sm-2">
                            <div class="form-group">
                                <label>&nbsp;</label>
                                <input id="" oninput="" type="text" class="form-control" value=""
                                    disabled>
                            </div>
                        </div>
                        <div class="col-sm-6" style="margin-left: -12px;">
                            <div class="form-group">
                                <label>&nbsp;</label>
                                <input id="" oninput="" type="text" class="form-control" value=""
                                    disabled>
                            </div>
                        </div>
                        <div class="col-sm-4" style="margin-left: -12px;">
                            <div class="form-group">
                                <label>Vencimento:</label>
                                <input id="" oninput="" type="date" class="form-control" value=""
                                    disabled>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label>Quantidade de Contas a Gerar:</label>
                                <input id="" oninput="" type="number" class="form-control"
                                    value="">
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group" style="margin-left: 10px;">
                                <label style="">Intervalo Entre Contas:</label>
                                <div class="form-check" style="margin-left: 10px;">
                                    <input class="form-check-input" id="" onchange="" type="radio"
                                        name="radio1">
                                    <label class="form-check-label">Mensal</label>
                                    <span style="margin-left: 25px;"></span>
                                    <input class="form-check-input" id="" onchange="" type="radio"
                                        name="radio1">
                                    <label class="form-check-label">Dias</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4" style="margin-left: -60px;">
                            <div class="form-group">
                                <label>Qtd Dias:</label>
                                <input id="" oninput="" type="number" class="form-control"
                                    value="">
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="">Replicar</button>
                </div>
            </div>
        </div>
    </div> 
@stop

@section('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .select2-container {
            width: 100% !important;
        }

        .select2-selection--single {
            height: auto !important;
            padding: 5px 12px !important;
        }

        .select2-selection__arrow {
            top: 50% !important;
            transform: translateY(-50%) !important;
        }     
    </style>
@stop

@section('plugins.Datatables', true)
@section('plugins.DatatablesPlugins', true)
@section('plugins.Toastr', true)
@section('js')

    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.13.4/sorting/datetime-moment.js"></script>
    <script src="{{ asset('js/financeiro/contaPagarIndex.js') }}"></script>

    <script></script>
@stop