@extends('padrao')
@section('content')
<div class="row clearfix">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="card">
            <div class="header">
                <h2>
                    <strong>Filtro</strong> Estoque
                </h2>
            </div>
            <div class="body">
                <form id="form_validation" action="{{ route('listar_produto_estoque')}}" method="GET"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="row clearfix">
                        <div class="col-sm-4">
                            <div class="form-group form-float">
                                <div class="form-line">
                                    <input style="display:inline; width: calc(100% - 40px   )" type="text"
                                        class="form-control" id="descricao_produto" name="filtro_descricao_produto"
                                        readonly value="@if(isset($_GET['filtro_descricao_produto'])){{$_GET['filtro_descricao_produto']}}@endif">
                                    <label class="form-label">Produto</label>
                                    <button type="button"
                                        class="btn btn-primary btn-circle waves-effect waves-circle waves-float bt_busca_produto">
                                        <i class="material-icons">search</i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="id_produto" name="filtro_id_produto"
                            value="@if(isset($_GET['filtro_id_produto'])){{$_GET['filtro_id_produto']}}@endif">
                        <div class="col-sm-3">
                            <div class="form-group form-float">
                                <div class="form-line">
                                    <input name="filtro_data_inicio" type="date" placeholder="Selecione a data"
                                        value="@if(isset($_GET['filtro_data_inicio'])){{$_GET['filtro_data_inicio']}}@endif">
                                    <label class="form-label" style="top: -10px;left: 0;font-size: 12px;">Data
                                        Inicial</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group form-float">
                                <div class="form-line">
                                    <input name="filtro_data_final" type="date" placeholder="Selecione a data"
                                        value="@if(isset($_GET['filtro_data_final'])){{$_GET['filtro_data_final']}}@endif">
                                    <label class="form-label" style="top: -10px;left: 0;font-size: 12px;">Data
                                        Final</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <div class="form-group form-float">
                                <div class="form-line">
                                    <select tabindex="-1" name="filtro_fiscal" class="form-label">
                                        <option value="" {{{ ''==old('filtro_fiscal', (isset($_GET['filtro_fiscal']))
                                                            ? $_GET['filtro_fiscal'] : '') ? 'selected' : ''
                                                            }}}>Geral</option>
                                        <option value="1" {{{ '1'==old('filtro_fiscal', (isset($_GET['filtro_fiscal']))
                                                            ? $_GET['filtro_fiscal'] : '') ? 'selected' : ''
                                                            }}}>Fiscal</option>
                                    </select>
                                    <label class="form-label" style="top: -10px;left: 0;font-size: 12px;">Tipo Estoque
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="pull-right">
                                <button class="btn btn-primary waves-effect" type="submit"> <i
                                        class="material-icons">search</i>
                                    <span>BUSCAR</span></button>
                            </div>
                        </div>
                    </div>

                </form>

            </div>
        </div>
        <div class="card">
            <div class="header">
                <h2>
                    <strong>Listagem</strong> Estoque
                </h2>
            </div>
            <div class="body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>ID Produto</th>
                                <th>Produto</th>
                                <th>Qtd Ant</th>
                                <th>Qtd Vend</th>
                                <th>Qtd Atual</th>
                                <th>Data</th>
                                <th>Motivo</th>
                                <th>Tipo</th>
                                <th>DOC</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(!empty($estoques))
                            @foreach ($estoques as $estoque)
                            <tr>
                                <td class="id_estoque" scope="row" style="width:50px"> {{$estoque->id}}</td>
                                <td> {{$estoque->id_produto}} </td>
                                <td> {{$estoque->descricao_longa}} </td>
                                <td> {{$estoque->qtd_atual}} </td>
                                <td> {{$estoque->qtd_venda}} </td>
                                <td> {{$estoque->qtd_novo}} </td>
                                <td> {{Str::formatBRDatetime($estoque->data_estoque)}} </td>
                                <td> {{$estoque->motivo}}</td>
                                <td class="text-center">
                                    @switch($estoque->tipo_movimento)
                                    @case(0)
                                    <span class="label bg-green">Entrada</span>
                                    @break
                                    @case(1)
                                    <span class="label bg-red">Saída</span>
                                    @break
                                    @endswitch
                                </td>
                                <td> {{$estoque->id_referencia}} </td>
                                <td style="width:40px">
                                    <a class="bg-teal btn-circle waves-effect waves-circle waves-float" target="_blank"
                                        href="{{ route('editar_faturamento', ['id' => $estoque->id_referencia]) }}">
                                        <i class="material-icons">
                                            visibility</i>
                                    </a>
                                </td>
                            </tr>
                            @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
                <div class="row">
                    <div class="col-sm-12 col-md-5">
                        <div>
                            @if(!empty($estoques))
                            {{$estoques->lastItem().' de '.$estoques->total().' registros'}}
                            @endif
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-7">
                        @if(!empty($estoques))
                        {{ $estoques->links() }}
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade bd-busca-produto-modal-lg" tabindex="-1" role="dialog"
            aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" style="max-width: 80%;">

                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="myLargeModalLabel">Filtro produto</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 clearfix">
                            <div class="col-sm-9">
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <input id="filtro_produto" type="text" class="form-control" value="">
                                        <label class="form-label">Filtro ex: descrição, cod ou ean</label>
                                    </div>
                                </div>
                            </div>
                            @if (empty($faturamento) || $faturamento->status < 2) <div class="pull-right">
                                <button type="button" class="btn btn-primary waves-effect bt_busca_produto"> <i
                                        class="material-icons">search</i>
                                    <span>BUSCAR</span></button>
                        </div>
                        @endif
                    </div>
                    <div class="table-responsive">
                        <table id="table_busca_produto" class="table table-bordered table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th class="select-filter">Descrição</th>
                                    <th class="select-filter">Codigo de barras</th>
                                    <th class="select-filter">Unidade</th>
                                    <th>Quantidade</th>
                                    <th style="width:50px"></th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
@endsection

@section('js')
<script>
$('.bt_busca_produto').on('click', function() {
    event.preventDefault();
    $.LoadingOverlay("show");
    let filtro = $('#filtro_produto').val();
    $.getJSON("{{ route('busca_produto_estoque') }}", {
            filtro: filtro,
        }, function(response) {
            if (response.produtos.length == 0) {
                swal("Nenhum produto encontrado", 'Verifique e tente novamente!', "warning");
                $("#busca_produto").val("");
            } else {
                exibir_busca_produto(response.produtos, response.aliquota_icms);
            }
            $.LoadingOverlay("hide");
        })
        .fail(function() {
            $.LoadingOverlay("hide");
            swal("Falha ao consultar o produto", '', "error");
        });
});

function exibir_busca_produto(produtos, aliquota_icms) {
    $("#table_busca_produto").find('tbody').empty();
    $.each(produtos, function(key, produto) {
        $("#table_busca_produto").find('tbody')
            .append($('<tr data-produto-id="' + produto.id + '" data-produto="' + produto.descricao_longa +
                    '" >')
                .append($('<td>')
                    .append(produto.id)
                ).append($('<td>')
                    .append(produto.descricao_longa)
                ).append($('<td>')
                    .append(produto.ean)
                ).append($('<td>')
                    .append(produto.unidade)
                ).append($('<td>')
                    .append(produto.qtd)
                ).append($('<td style="width:50px">')
                    .append(
                        '<button type="button" class="btn btn-primary btn-circle waves-effect waves-circle waves-float selecionar_produto"> <i class="material-icons"> done</i></button>'
                    )
                )
            );
    });
    $('.bd-busca-produto-modal-lg').modal('show');
}

$(document).on('click', '.selecionar_produto', function() {
    let produto_id = $(this).closest("tr").data("produto-id");
    let produto_descricao = $(this).closest("tr").data("produto");
    $('#descricao_produto').val(produto_descricao).trigger("focus");
    $('#id_produto').val(produto_id).trigger("focus");
    $('.bd-busca-produto-modal-lg').modal('hide');
});
</script>



@endsection