@extends('layouts.simple.master')

@section('title', 'Form Validation')

@section('css')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/prism.css') }}">
<style>
.stroke-success {
    stroke: rgb(101, 191, 96) !important;
}
</style>

@endsection

@section('main_content')
<div class="container-fluid">
    <div class="page-title">
        <div class="row">
            <div class="col-sm-6">
                <h3>Pedido {{$p_visu->id}}</h3>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href=""> <svg class="stroke-icon">
                                <use href="{{ asset('assets/svg/icon-sprite.svg#stroke-home') }}"></use>
                            </svg></a></li>
                    <li class="breadcrumb-item">Vendas</li>
                    <li class="breadcrumb-item active">Pedido Saída</li>
                </ol>
            </div>
        </div>
    </div>
</div><!-- Container-fluid starts-->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-sm-6">
                            <h5>Detalhes do Pedido</h5>
                            <span><a href="#"></a></span>
                        </div>
                        <div class="col-sm-6">
                            <div class="text-end">
                                <a href="{{ route('pedidos.OS-pedidos', ['id' => $p_visu->id]) }}" target="_blank" class="btn btn-primary"><i class="fa-regular fa-file-lines pe-2 f-14"></i>Ordem Serviço</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="row">
                            <div class="col-md-3 mb-3">
                                <h6>Venda</h6>
                                <span> {{$p_visu->id}} </span>
                            </div>
                            <div class="col-md-3 mb-3">
                                <h6>Data de Entrada</h6>
                                <span> {{$p_visu->ped_dt_entrada}} </span>
                            </div>
                            <div class="col-md-3 mb-3">
                                <h6>Data de Saída</h6>
                                <span>{{$p_visu->ped_dt_saida}}</span>
                            </div>
                            <div class="col-md-3 mb-3">
                                <h6>Data Prevista</h6>
                                <span>{{$p_visu->ped_dt_prevista}}</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3 mb-3">
                                <h6>Destinatário</h6>
                                <span>{{$p_visu->nome_cliente}}</span>
                            </div>
                            <div class=" col-md-3 mb-3" id="div_cnpj">
                                <h6>Tipo Pedido</h6>
                                <span>{{$p_visu->tipo_pedidos_desc}}</span>
                            </div>
                            <div class="col-md-3 mb-3">
                                <h6>Status</h6>
                                <span>{{$p_visu->descricao}}</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3 mb-3">
                                <h6>Natureza da Operacao </label>
                                    <span></span>

                            </div>
                            <div class="col-md-3 mb-3">
                                <h6>Vendedor</h6>
                                <span></span>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div>
                        <h5>Produtos</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive leave-request-table custom-scrollbar">
                            <table class="table" id="leave-employee">
                                <thead>
                                    <tr>
                                        <th>Produto</th>
                                        <th>SKU</th>
                                        <th>Qtde</th>
                                        <th>UN</th>
                                        <th>Vlr Uni</th>
                                        <th>Total</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($pedidos_detalhes as $p_det )
                                    <tr>
                                        <td>{{$p_det->nome}}</td>
                                        <td>{{$p_det->codigo_sku}}</td>
                                        <td>{{$p_det->det_quantidade}}</td>
                                        <td></td>
                                        <td>{{$p_det->det_valor_uni}}</td>
                                        <td></td>
                                        @if($p_det->ped_etapa_id == 1)
                                        <td>
                                            <div class="popover-main">
                                                <div class="card-body common-flex popover-wrapper">
                                                    <i class="stroke-success example-popover estoque-info" id="ex02" data-id="{{$p_det->det_produto_id}}" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="carregando informações" title="Informações" data-feather="alert-circle"></i>
                                                </div>
                                            </div>
                                        </td>
                                        @else
                                        @endif
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>




                    </div>
                    <hr>

                    <div>
                        <h5>Dados Adicionais</h5>
                        <span><a href="#"></a></span>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <h6>Observações</h6>
                                <span></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <h6>Observações Internas</h6>
                                <span></span>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div>
                        <h5>Campos Personalizados</h5><span><a href="#"></a></span>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <h6>Assinatura</h6>
                                <span></span>
                            </div>

                            <div class="col-md-6 mb-3">
                                <h6>Número do Terminal</h6>
                                <span></span>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <h6>Cobrar</h6>
                                <span></span>
                            </div>

                            <div class="col-md-6 mb-3">
                                <h6>Concluído</h6>
                                <span></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <h6>Motivo</h6>
                                <span></span>
                            </div>


                        </div>
                    </div>
                    <!--   <div class="select-box select-box2">
                            <div id="teste-cont" class="options-container options-container2 custom-scrollbar">
                                <div class="selection-option selection-option2" id="selection-op"><input class="radio" id="webdesigner" type="radio" name="category"><label class="mb-0"
                                        for="webdesigner">web&ndash;designer</label></div>
                                <div class="selection-option selection-option2" id="selection-op"><input class="radio" id="film" type="radio"
                                        name="category"><label class="mb-0" for="film">Film
                                        &amp; animation</label></div>
                                <div class="selection-option selection-option2" id="selection-op"><input class="radio" id="software" type="radio"
                                        name="category"><label class="mb-0" for="software">Software
                                        engineer</label></div>

                            </div>
                            <div class="selected-box selected-box2" id="teste">Select Your Profession</div>
                            <div class="search-box search-box2" id="teste-box"><input type="text" placeholder="Start Typing...">
                            </div>
                        </div>-->

                    <div class="card-footer text-end">
                        <button id="btn_cadastrar" class="btn btn-success" type="submit">Salvar</button>
                        <a href="{{ route('pedidos') }}" class="btn btn-secondary">Voltar</a>
                    </div>

                </div>
            </div>
        </div>
    </div>
    @endsection

    @section('scripts')

    <script src="{{ asset('assets/js/prism/prism.min.js') }}"></script>
    <script src="{{ asset('assets/js/clipboard/clipboard.min.js') }}"></script>
    <script src="{{ asset('assets/js/custom-card/custom-card.js') }}"></script>
    <!--<script src="//{{ asset('assets/js/popover-custom.js') }}"></script>-->
    <script>
        $(document).ready(function() {
            $(".example-popover").click(function() {
                var produtoId = $(this).data('id'); // Obtém o ID do produto clicado
                var popoverElement = $(this); // add a referência do elemento clicado

                $.ajax({
    type: "GET",
    url: "/pedidos/detalhesEst",
    data: {
        produtoId: produtoId
    },
    success: function(data) {

        console.log("Dados recebidos da API:", data);

        let estoqueFisico = 0;
        let quantidadeVenda = 0; 

        let movimentacoes = Array.isArray(data) ? data : [data]; 

        movimentacoes.forEach(mov => {
            console.log("Processando movimentação:", mov);

            let quantidade = mov.lanc_quantidade ? Number(mov.lanc_quantidade) : 0;
            let det_quantidade = mov.det_quantidade ? Number(mov.det_quantidade) : 0;
            let tipo = mov.lanc_tipo ? mov.lanc_tipo.toUpperCase() : "";

            if (tipo === "ENTRADA") {
                estoqueFisico += quantidade;
            } else if (tipo === "SAIDA") {
                estoqueFisico -= quantidade;
            }

            if (det_quantidade && !isNaN(det_quantidade)) {
                quantidadeVenda += Number(mov.det_quantidade);
            }
        });

        // Agora calcula corretamente o estoque depois da venda
        let estoqueDepoisVenda = estoqueFisico - quantidadeVenda;

        var estoqueInfo = `
            <strong>Estoque físico:</strong> ${estoqueFisico} <br>
            <strong>Estoque mínimo:</strong> 0 <br>
            <strong>Estoque máximo:</strong> 0 <br>
            <strong>Estoque depois da venda:</strong> ${estoqueDepoisVenda}
        `;

        // Remove popover antigo para evitar cache
        popoverElement.popover("dispose");

        // Atualiza e exibe o popover com os novos dados
        popoverElement.attr("data-bs-content", estoqueInfo);
        popoverElement.popover({
            html: true,
            trigger: "focus",
            placement: "left",
        }).popover("show");
    },
    error: function() {
        popoverElement.popover("dispose").attr("data-bs-content", "Erro ao carregar informações.")
            .popover({
                html: true,
                trigger: "focus",
                placement: "left"
            }).popover("show");
    }
});


            });

            // Inicializa os popovers
            $(".estoque-info").popover({
                html: true,
                trigger: "focus"
            });
        });
    </script>
    @endsection