@extends('layouts.app')

@section('content')

    <div class="painel-inicial">
        <div class="row mb-3">
            <div class="col-12">
                <div class="card faixa-resumo">
                    <div class="card-body py-3">
                        <div class="d-flex flex-wrap align-items-center justify-content-between">
                            <div>
                                <h4 class="mb-1">Dashboard de Operacoes</h4>
                                <p class="mb-0 text-muted">Resumo rapido de vendas, metas e estoque.</p>
                            </div>
                            {{-- <a class="btn botao-acao-vendas" href="{{ asset('/balcao') }}">
                                <i class="fa fa-shopping-cart mr-1"></i> Nova Venda
                            </a> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12 grid-margin">
                <div class="card painel-vendas-dia">
                    <div class="card-body">
                        <div class="cabecalho-vendas-dia d-flex flex-wrap align-items-center justify-content-between">
                            <div>
                                <h4 class="mb-1">Vendas do Dia</h4>
                                <p class="mb-0 text-muted">Resumo de vendas, metas e estoque</p>
                            </div>
                            <a class="btn botao-acao-vendas" href="{{ asset('/balcao') }}">
                                <i class="fa fa-shopping-cart mr-1"></i> Nova Venda
                            </a>
                        </div>

                        <div class="row linha-indicadores-vendas">
                            <div class="col-xl-3 col-lg-6 col-md-6 grid-margin stretch-card mb-0">
                                <div class="card cartao-indicador cartao-indicador--vendas w-100">
                                    <div class="card-body">
                                       {{--  <div class="icone-indicador bolha-icone bolha-icone--vendas">
                                            <i class="fa fa-shopping-bag"></i>
                                        </div> --}}
                                        <h4 class="valor-indicador">{{ $pedidos->vendido }}</h4>
                                        <p class="titulo-indicador mb-1">Vendas do dia</p>
                                        <small class="descricao-indicador">Total de itens vendidos hoje</small>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-3 col-lg-6 col-md-6 grid-margin stretch-card mb-0">
                                <div class="card cartao-indicador cartao-indicador--meta w-100">
                                    <div class="card-body">
                                       {{--  <div class="icone-indicador bolha-icone bolha-icone--meta">
                                            <i class="fa fa-bullseye"></i>
                                        </div> --}}
                                        <h4 class="valor-indicador">{{ $pedidos->meta }}</h4>
                                        <p class="titulo-indicador mb-1">Meta de itens</p>
                                        <small class="descricao-indicador">Faltam {{ $pedidos->dias }} dias para fechar</small>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-3 col-lg-6 col-md-6 grid-margin stretch-card mb-0">
                                <div class="card cartao-indicador cartao-indicador--media w-100">
                                    <div class="card-body">
                                       {{--  <div class="icone-indicador bolha-icone bolha-icone--media">
                                            <i class="fa fa-line-chart"></i>
                                        </div> --}}
                                        <h4 class="valor-indicador">{{ $pedidos->media }}</h4>
                                        <p class="titulo-indicador mb-1">Media de vendas / dia</p>
                                        <small class="descricao-indicador">Desempenho medio diario</small>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-3 col-lg-6 col-md-6 grid-margin stretch-card mb-0">
                                <div class="card cartao-indicador cartao-indicador--estoque w-100">
                                    <div class="card-body">
                                        {{-- <div class="icone-indicador bolha-icone bolha-icone--estoque">
                                            <i class="fa fa-cube"></i>
                                        </div> --}}
                                        <h4 class="valor-indicador">{{ $produtos->sem_saldo < 0 ? $produtos->sem_saldo * -1 : $produtos->sem_saldo }}</h4>
                                        <p class="titulo-indicador mb-1">Produtos sem saldo</p>
                                        <small class="descricao-indicador">Itens que precisam de reposicao</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12 grid-margin">
                <div class="card cartao-painel">
                    <div class="card-header cabecalho-painel d-flex flex-wrap align-items-center justify-content-between">
                        <h5 class="mb-0">Ranking de Produtos</h5>
                        <a class="btn botao-acao-vendas" href="{{ route('ranking_produtos.excel') }}">
                            <i class="fa fa-download mr-1"></i> Exportar para Excel
                        </a>
                    </div>
                    <div class="card-body corpo-grafico">
                        {!! $chart->container() !!}
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12 grid-margin">
                <div class="card cartao-painel">
                    <div class="card-header cabecalho-painel">
                        <h6 class="mb-0">Produtos com Estoque Minimo</h6>
                    </div>
                    <div class="card-body">
                        <div class="lista-estoque-minimo">
                            <div class="cabecalho-lista-estoque d-none d-md-flex">
                                <div class="coluna-posicao">#</div>
                                <div class="coluna-produto">Nome</div>
                                <div class="coluna-progresso">Nivel de Estoque</div>
                                <div class="coluna-percentual">Saldo</div>
                            </div>

                            @foreach($produtos->estoque as $i => $list)
                                @php
                                    $minimo = (int) $list->produto->estoque_minimo;
                                    $saldo = (int) $list->saldo;
                                    $percentual = $minimo > 0 ? round(($saldo / $minimo) * 100) : 0;
                                    $percentualExibicao = max(0, $percentual);
                                    $percentualBarra = min(100, max(5, $percentualExibicao));
                                    $paleta = ['azul', 'verde', 'roxo', 'laranja'];
                                    $corLinha = $paleta[$i % count($paleta)];
                                @endphp

                                <div class="item-estoque-minimo item-estoque-minimo--{{ $corLinha }}">
                                    <div class="coluna-posicao">{{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}</div>

                                    <div class="coluna-produto">
                                        <div class="nome-produto-estoque">{{ $list->produto->descricao }}</div>
                                        <div class="codigo-produto-estoque">{{ $list->produto->codigo }}</div>
                                    </div>

                                    <div class="coluna-progresso">
                                        <div class="barra-progresso-estoque">
                                            <span class="preenchimento-progresso" style="width: {{ $percentualBarra }}%"></span>
                                        </div>
                                        <small class="meta-estoque">Minimo: {{ $minimo }} | Saldo: {{ $saldo }}</small>
                                    </div>

                                    <div class="coluna-percentual">
                                        <span class="badge-percentual">{{ $percentualExibicao }}%</span>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="pagination-wrapper mt-3">
                            <div class="btn-group">
                                <a href="{{ asset('/home?excel=ESTOQUE')}}" class="btn botao-acao-vendas">
                                 Exportar para Excel
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal relatório -->

    <div class="modal fade" id="ModalRelatorio" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="card">
                        <div class="card-body">
                            <form action="{{ route('produtos.kardex') }}" method="post">
                                @csrf
                                <div class="form-group row">
                                    <label  class="col-sm-2 col-form-label">Data de Início da movimentação</label>
                                    <div class="col-sm-10">
                                        <input type="date" class="form-control border border-dark" name="data_de">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label  class="col-sm-2 col-form-label">Data Fim da Movimentação</label>
                                    <div class="col-sm-10">
                                        <input type="date" class="form-control border border-dark" name="data_ate">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">Código do Produto (início)</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control border border-dark" name="codigo_de">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">Código do Produto ( Fim )</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control border border-dark" name="codigo_ate">
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary mb-2">Gerar Relatório</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!----------------- MODAL METAS --------------------->
    <div class="modal fade" id="MyMETAS" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">

            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Minhas Metas</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @isset($pedidos->mymetas)
                        <div class="card">
                            <div class="card-body">
                                <table class="table table-striped table-hover">
                                    <thead>
                                    <tr>
                                        <th>Data Início</th>
                                        <th>Data Fim</th>
                                        <th>Meta Valor (R$)</th>
                                        <th>Valor Vendido R$</th>
                                        <th>Meta Itens</th>
                                        <th>Itens Vendidos</th>
                                        <th>Média Por dia</th>
                                        <th>Meta diária</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($pedidos->mymetas as $mymeta)
                                        <tr>
                                            <td>{{ $mymeta['dtinicio'] }}</td>
                                            <td>{{ $mymeta['dtfim'] }}</td>
                                            <td>{{ number_format($mymeta['valor'],2,',','') }}</td>
                                            <td>{{ number_format($mymeta['valor_vendido'],2,',','') }}</td>
                                            <td>{{ $mymeta['itens'] }}</td>
                                            <td>{{ $mymeta['itens_vendidos'] }}</td>
                                            <td>{{ $mymeta['media_dia'] }}</td>
                                            <td>{{ $mymeta['meta_dia'] }}</td>

                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>

                        </div>

                    @else
                        <h3>Não existem metas cadastradas para seu usuário.</h3>
                    @endisset
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>

                </div>
            </div>
        </div>
    </div>

    <!-- Modal PRODUTOS SEM SALDO -->

    <div class="modal fade" id="ModalSemSaldo" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12 grid-margin">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="card-title">Produtos Sem Saldo</h4>
                                    <div class="table-responsive">
                                        <div class="pagination-wrapper">
                                            <div class="btn-group">
                                                @if($produtos->lista->currentPage() < 2)
                                                    <a href="" class="btn btn-primary btn-sm disabled" disabled> Voltar <i class="fa fa-arrow-circle-o-right"></i></a>
                                                @else
                                                    <a href="{{ $produtos->lista->url( $produtos->lista->currentPage() - 1 ) }}  " class="btn btn-primary btn-sm"> Voltar <i class="fa fa-arrow-circle-o-left"></i></a>
                                                    @for($i = 2; $i < $produtos->lista->currentPage();$i++)
                                                        <a href="{{ $produtos->lista->url($i) }}" class="btn btn-sm btn-secondary">{{$i}}</a>
                                                    @endfor
                                                @endif
                                                <a href="{{ $produtos->lista->url( $produtos->lista->currentPage() + 1 ) }}" class="btn btn-primary btn-sm"> Próximo <i class="fa fa-arrow-circle-o-right"></i></a>
                                                <a href="{{ asset('/home?excel=SEM_SALDO')}}" class="btn btn-info btn-sm"> Exportar Excel <font-awesome-icon :icon="['fas', 'download']" /></a>
                                                <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#ModalRelatorio"> Relatório </a>
                                            </div>
                                        </div>
                                        <table class="table table-bordered">
                                            <thead>
                                            <tr>
                                                <th>
                                                    #
                                                </th>
                                                <th>
                                                    Código Produto
                                                </th>
                                                <th>
                                                    Nome Produto
                                                </th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            @foreach($produtos->lista as $i => $list)
                                                <tr>
                                                    <td>
                                                        {{ $i + 1 }}
                                                    </td>
                                                    <td>
                                                        {{ $list->codigo }}
                                                    </td>
                                                    <td>
                                                        {{ $list->descricao }}
                                                    </td>
                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>
                                        <div class="pagination-wrapper">
                                            <div class="btn-group">
                                                @if($produtos->lista->currentPage() < 2)
                                                    <a href="" class="btn btn-primary btn-sm disabled" disabled> Voltar <i class="fa fa-arrow-circle-o-right"></i></a>
                                                @else
                                                    <a href="{{ $produtos->lista->url( $produtos->lista->currentPage() - 1 ) }}  " class="btn btn-primary btn-sm"> Voltar <i class="fa fa-arrow-circle-o-left"></i></a>
                                                    @for($i = 2; $i < $produtos->lista->currentPage();$i++)
                                                        <a href="{{ $produtos->lista->url($i) }}" class="btn btn-sm btn-secondary">{{$i}}</a>
                                                    @endfor
                                                @endif
                                                <a href="{{ $produtos->lista->url( $produtos->lista->currentPage() + 1 ) }}" class="btn btn-primary btn-sm"> Próximo <i class="fa fa-arrow-circle-o-right"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('script')
    <script type="text/javascript">
        $('.preloader-area').hide();
    </script>
@endpush