@extends('layouts.layout_pagina', 
[
    'icone_titulo'=>'fas fa-search',
    'titulo'=>'Relatorio - Venda de Produtos',
    'breadcrumb'=>['Consulta','Consulta Vendas']
])

@section('css')
    <link rel="stylesheet" href="{{{ URL::asset('js/DataTables/datatables.min.css') }}}" />
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.4/css/buttons.dataTables.min.css" />
@endsection

@section('scripts')
    <script src="{{{ URL::asset('js/DataTables/datatables.min.js') }}}"></script>
    <script src="{{{ URL::asset('js/views/consulta/consulta_vendas.js') }}}"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.print.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
@endsection

@section('pagina')

    <style>
        .hidden {
            display: none;
        }
    </style>
    
    <div class="container-fluid">       
        <div class="card mt-2">
            <div class="card-header cor-card-header text-white d-flex bg-primary-gradient" style="height: 50px; align-items: center">               
                <h2> Relatorio - Vendas de Produtos </h2>                          
            </div>
            <div class="card-body">
                <form method="GET" action="{{route('consulta.vendas.pesquisa')}}">
                    <div class="row" >
                       
                        <div class="col-12 col-md-3">
                            <label class="col-form-label text-md-left">Início</label>
                            <br/>
                            <input class="form-control" type="date" name="dataInicio"/>
                        </div>

                        <div class="col-12 col-md-3">
                            <label class="col-form-label">Termino</label>
                            <br/>
                            <input class="form-control" type="date" name="dataFinal"/>
                        </div>

                        <div class="col-12 col-md-2 text-center">
                            <label for="btnPesquisa" class="col-form-label">&nbsp;</label>
                            <br/>
                            <button id="btnPesquisa" type="submit" class="btn btn-success"><i class="fas fa-search"></i> Pesquisar</button>
                        </div>
                        <div class="col-md-2"></div>
                    </div>
                </form>
            </div>
            <div class="card-body">
                <div class="row" >
                    <div class="col panel panel-primary table-responsive">
                        <table id="tbConsultaVenda" class="table table-hover text-left" style="width:100%">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Cupom</th>                                    
                                    <th>Data</th>
                                    <th>Cliente</th>
                                    <th>Valor Total</th>                                    
                                </tr>
                            </thead>
                        
                                <tbody>
                                    @php 
                                        $total = 0;                                                                              
                                    @endphp
                                    @foreach($listaVenda as $venda)
                                    <tr>
                                        <td>
                                            <button class="btn btn-warning btn-xs" onclick="toggleDetails({{ $venda->id }})">Formas Pg.</button>
                                            <span name="itensBtn" class="btn btn-xs btn-secondary text-white cursor-pointer" data="{{$venda->id}}" style="cursor: pointer;color: #009933;" title="Baixar Valor">Itens Venda</span>
                                        </td>
                                        <td>{{ $venda->id }}</td>
                                        <td>{{ $venda->dt_criacao }}</td>
                                        <td>{{ $venda->Cliente->nome }}</td>
                                        <td>{{ $venda->valor_total }}</td> 
                                    </tr>
                                    <tr id="details_{{ $venda->id }}" class="hidden">
                                        <td colspan="5">
                                            <table border="1" style="margin-left: 700px;">
                                                <thead>
                                                    <tr>
                                                        <th>Forma de Pagamento</th>
                                                        <th>Valor Unitário</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($venda->hasV_VFormasPagamento as $detalhe)
                                                        <tr>
                                                            <td>{{ $detalhe->descricao }}</td>
                                                            <td>{{ $detalhe->valor }}</td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                    @php 
                                        $total= $total + $venda->valor_total; 
                                    @endphp 
                                @endforeach
                        
                                </tbody>
                        </table>
                    </div>
                </div>
                 
                <div class="card mt-2">                    
                    <div class="card-header cor-card-header text-white d-flex bg-primary-gradient" style="height: 50px; align-items: center">               
                        <h2> Totalização </h2>                          
                    </div>
                  
                    <div class="card-body">
                        <div class="row" >

                             <div class="col-sm-6 col-md-8">                               
                            </div>
        
                            <div class="col-sm-6 col-md-4">
                                <div class="card card-stats card-round">
                                    <div class="card-body ">
                                        <div class="row">
                                            <div class="col-5">
                                                <div class="icon-big text-center">
                                                    <i class="flaticon-coins text-success"></i>
                                                </div>
                                            </div>
                                            <div class="col-7 col-stats">
                                                <div class="numbers">
                                                    <p class="card-category"> Faturamento:</p>
                                                    <h4 class="card-title">R$ {{number_format($total,2,',','.')}}</h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>      
                          
        
                            
                            
                        </div>
        
        
        
                    </div>


                </div>


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


    
    
 <!-- Modal edição-->
 <div class="modal fade" id="listaitens" tabindex="-1" role="dialog" aria-labelledby="editconta" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">

        <div class="modal-content">
            <div class="modal-header card-header cor-card-header text-white d-flex justify-content-between bg-primary-gradient">
                <h5 class="modal-title" > Lista de Itens </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="card-body">           

                <div class="row" >
                    <div class="col panel panel-primary table-responsive">
                        <table id="tbItens" class="table table-hover text-left">
                                <thead>
                                    <tr>
                                        
                                        <th>Produto</th>
                                        <th>Unidade</th>
                                        <th>Qtde</th>
                                        <th>Preço</th>
                                        <th>Total</th>
                                    </tr>
                                </thead>
                                <tbody>


                                </tbody>
                        </table>
                    </div>
                </div>
               


            </div>

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




    <script>
        function toggleDetails(id) {
            var details = document.getElementById('details_' + id);
            details.classList.toggle('hidden');
        }
    </script>

@endsection