@extends('layouts.almoxarifado.painel')
@section('content')
    <style>
        .ui-autocomplete-loading {
            background: white url({{url('imagens/gif/ajax-loader.gif')}}) right center no-repeat;
        }
    </style>
    <div class="panel panel-default">
        <div class="panel-heading"><b>Pesquisar</b></div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-2">
                    <input type="text" name="codigo" id="codigo" class="form-control" placeholder="Por código" maxlength="8" onkeypress="return digitos(event);" required>
                </div>
                <div class="col-md-4">
                    <input type="text" name="almoxarife" id="almoxarife" class="form-control" placeholder="Por almoxarife" required>
                </div>
                <div class="col-md-2">
                    <input type="text" name="cpf" id="cpf" class="form-control" placeholder="Por CPF" maxlength="11" onkeypress="return digitos(event);" required>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-3 col-md-offset-9">
            {{--            <a href="{{route('create_pedido_compra')}}" class="btn btn-primary btn-block">--}}
            {{--                <i class="fa fa-plus-square" aria-hidden="true"></i>&nbsp;Novo Pedido</a>--}}
            <button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target=".bs-example-modal-lg"><i class="fa fa-plus-square" aria-hidden="true"></i> &nbsp;Novo Pedido</button>
        </div>
    </div>
    <h3 class="page-header"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Lista de Pedido de Compra</h3>
    <table class="table table-hover data-table">
        <thead>
        <tr>
            <th width="5%">PEDIDO</th>
            <th width="10%">N.º CONTRATO</th>
            <th width="10%">DATA PEDIDO</th>
            <th width="47%">FORNECEDOR</th>
            <th width="10%">VALOR CONTRATO</th>
            <th width="6%">STATUS</th>
            <th width="12%">AÇAO</th>
        </tr>
        </thead>
    </table>

    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form name="FrmCreate" action="{{route('pedido.store')}}" method="post" autocomplete="off">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-3">
                                <label for="">N.º Contrato</label>
                                <input type="text" class="form-control" id="contrato-search" placeholder="Digite o n.º do contrato" required>
                                <input type="hidden" name="contrato_id" id="contrato_id">
                            </div>
                            {{--                            <div class="col-md-6">--}}
                            {{--                                <label for="">Fornecedor</label>--}}
                            {{--                                <input type="text" class="form-control" id="fornecedor-search" required>--}}
                            {{--                                <input type="hidden" name="fornecedor_id" id="fornecedor_id">--}}
                            {{--                            </div>--}}
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <label for="">Justificativa</label>
                                <textarea class="form-control" name="justificativa" id="justificativa" cols="10" rows="3" required></textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label for="">Local Requerente</label>
                                <input type="text" class="form-control" name="local_requerente">
                            </div>
                            <div class="col-md-6">
                                <label for="">Pessoal Requerente</label>
                                <input type="text" class="form-control" name="pessoa_requerente">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                        <span id="btn-pedido"></span>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script src="{{url(mix('modulos/almoxarifado/search_js/search.js'))}}"></script>
    <script src="{{url(mix('modulos/almoxarifado/pedido/js/create.js'))}}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            let oTable = $('.data-table').DataTable({
                searching: false,
                lengthChange: false,
                iDisplayLength: 15,
                processing: true,
                serverSide: true,
                ordering: false,
                //order: [[2, "asc"]],
                ajax: {
                    url: '{{ route('pedido.index') }}',
                    data: function (d) {
                        // d.codigo = $('input[name=codigo]').val();
                        // d.almoxarife = $('input[name=almoxarife]').val();
                        // d.cpf = $('input[name=cpf]').val();
                    }
                },
                columns: [
                    {data: 'codigo', name: 'codigo'},
                    {data: 'n_contrato', name: 'n_contrato'},
                    {data: 'data_pedido', name: 'data_pedido'},
                    {data: 'razaosocial', name: 'razaosocial'},
                    {data: 'vlr_contrato', name: 'vlr_contrato'},
                    {data: 'status', name: 'status'},
                    {data: 'acao', name: 'acao', orderable: false, searchable: false},
                ],
                language: {
                    "sEmptyTable": "Nenhum registro encontrado",
                    "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                    "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
                    "sInfoFiltered": "(Filtrados de _MAX_ registros)",
                    "sInfoPostFix": "",
                    "sInfoThousands": ".",
                    "sLengthMenu": "_MENU_ resultados por página",
                    "sLoadingRecords": "Carregando...",
                    "sProcessing": "Processando...",
                    "sZeroRecords": "Nenhum registro encontrado",
                    "sSearch": "Pesquisar",
                    "oPaginate": {
                        "sNext": "Próximo",
                        "sPrevious": "Anterior",
                        "sFirst": "Primeiro",
                        "sLast": "Último"
                    },
                    "oAria": {
                        "sSortAscending": ": Ordenar colunas de forma ascendente",
                        "sSortDescending": ": Ordenar colunas de forma descendente"
                    }
                }
            });

            $('#almoxarife, #codigo, #cpf').keyup(function () {
                oTable.draw();
            });

            $(document).on("click", '.deleteRecord', function () {
                let id = $(this).attr('data-id');
                let token = $("meta[name='csrf-token']").attr("content");

                if (window.confirm("Deseja excluir registro?")) {
                    $.ajax(
                        {
                            url: urlBase + '/almoxarifado/pedido/' + id,
                            type: 'DELETE',
                            data: {
                                "id": id,
                                "_token": token,
                            },
                            success: function () {
                                $.blockUI({
                                    message: '<div class="alert alert-success alert-dismissible" role="alert"><strong><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Parabéns: </strong> registro excluído com sucesso (:',
                                    timeout: 1500,
                                    onOverlayClick: $.unblockUI
                                });
                                oTable.draw();
                            },
                            error: function (data) {
                                if (data.status === 405) {
                                    alert('Você não tem permissão para esta ação.')
                                }
                            }
                        });
                }
            });
        });
    </script>
@endpush