@extends('adminlte::page')

@section('title', 'Venda de Mercadoria(PDV)')

@section('content_header')
@stop

@section('content')
    <form id="formEnvioDados" method="POST" action="{{ route('sales.store') }}">
        @csrf
        <div class="row">
            <div class="col-12 col-md-12 col-lg-12">
                <div class="card shadow mt-2">
                    <div class="card-header bg-gradient-primary text-gray-100 py-2 d-flex flex-row align-items-center justify-content-between">
                        <h6 class="m-0 font-weight-bold">Venda de mercadoria</h6>
                    </div>
                    <div class="row pl-3 pr-3">
                        <div class="col-12 col-md-12 col-lg-6">
                            <div class="card" id="ClienteCard">
                                <h5 class="mb-0">
                                    <button id="btnselecionarcliente" class="btn btn-link" data-toggle="collapse" type="button" data-target="#ClienteCollapse" aria-expanded="true" aria-controls="ClienteCollapse">
                                        Selecionar Cliente <label><span id="id_cliente"></span></label> - <label><span id="nome_cliente"></span></label>
                                    </button>
                                </h5>
                
                                <div id="ClienteCollapse" class="collapse">
                                    <div class="card-body">
                                        <div class="input-group input-group-sm">
                                            <div class="input-group-prepend">
                                            </div>
                                            <div class="col-3 mt-2 d-flex flex-column">
                                                <label for="codigo_cliente" class="col-form-label text-md-end">{{ __('Código') }}</label>
                                                <div class="d-flex">
                                                    <input id="codigo_cliente" type="text" class="form-control @error('codigo_cliente') is-invalid @enderror ms-2" name="codigo_cliente" value="{{ old('codigo_cliente')}}" required autocomplete="codigo_cliente" autofocus>
                                                    <button class="btn btn-primary mb-1" id="btnConsulta_cliente" type="button" style="border-radius: 0rem;">
                                                        <i class="fa fa-search" aria-hidden="true"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="input-group-prepend">
                                            </div>
                                            <div class="col-9 mt-2">
                                                <label for="cliente" class="col-form-label text-md-end">{{ __('Cliente') }}</label>
                                                <select id="cliente" type="text" class="custom-select @error('cliente') is-invalid @enderror select2" name="cliente" value="{{ old('cliente') }}" autocomplete="cliente" autofocus>  
                                                </select> 
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-12 col-md-12 col-lg-6">
                            <div class="card" id="VendedorCard">
                                <h5 class="mb-0">
                                    <button id="btnselecionarvendedor" class="btn btn-link" data-toggle="collapse" type="button" data-target="#VendedorCollapse" aria-expanded="true" aria-controls="VendedorCollapse">
                                        Selecionar Vendedor <label><span id="id_vendedor"></span></label> - <label><span id="nome_vendedor"></span></label>    
                                    </button>
                                </h5>
                                <div id="VendedorCollapse" class="collapse">
                                    <div class="card-body">
                                        <div class="input-group input-group-sm">
                                            <div class="input-group-prepend">
                                            </div>
                                            <div class="col-3 mt-2 d-flex flex-column">
                                                <label for="codigo_vendedor" class="col-form-label text-md-end">{{ __('Código') }}</label>
                                                <div class="d-flex">
                                                    @if(isset($VendedorAtual))
                                                        <input id="codigo_vendedor" type="text" class="form-control @error('codigo_vendedor') is-invalid @enderror ms-2" name="codigo_vendedor" value="{{ $VendedorAtual->codigo }}" autocomplete="codigo_vendedor" autofocus>
                                                    @else
                                                        <input id="codigo_vendedor" type="text" class="form-control @error('codigo_vendedor') is-invalid @enderror ms-2" name="codigo_vendedor" value="{{ old('codigo_vendedor') }}" autocomplete="codigo_vendedor" autofocus>
                                                    @endif
                                                    <button class="btn btn-primary" id="btnConsulta_vendedor" type="button" style="border-radius: 0rem;">
                                                        <i class="fa fa-search" aria-hidden="true"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="input-group-prepend" title="Nome do produto"></div>
                                                <div class="col-9 mt-2">
                                                    <label for="vendedor" class="col-form-label text-md-end">{{ __('Vendedor') }}</label>
                                                    <select id="vendedor" type="text" class="custom-select @error('vendedor') is-invalid @enderror" name="vendedor" autocomplete="vendedor" autofocus>
                                                        @if(isset($VendedorAtual))
                                                            <option value="{{ $VendedorAtual->id }}" selected>{{ $VendedorAtual->nome }}</option>
                                                        @endif
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> 
                    </div>
                </div>

                <div class="col-12 col-md-6 col-lg-5">
                    <div class="card shadow mb-6" style="max-height: 430px;min-height: 420px;">
                        <div class="card-header bg-gradient-primary text-gray-100 py-2 d-flex flex-row align-items-center justify-content-between">
                            <h6 class="m-0 font-weight-bold">Selecionar Mercadorias</h6>
                        </div>
                        <div class="input-group  input-group-sm pl-3 pr-3">
                            <div class="input-group-prepend">
                            </div>
                            <div class="col-md-4  mt-2">
                                <label for="codigo_produto" class="col-form-label text-md-end">{{ __('Referência') }}</label>
                            </div>
                            <div class="col-12 d-flex">
                                <input id="codigo_produto" type="number" class="form-control @error('codigo_produto') is-invalid @enderror" name="codigo_produto" value="{{ old('codigo_produto')}}" autocomplete="nome" autofocus>
                                <button class="btn btn-primary" id="btnConsulta_produto" type="button" style="border-radius: 0rem;">
                                    <i class="fa fa-search" aria-hidden="true"></i>
                                </button>
                            </div>
                        </div>
             
                        <div class="input-group mt-2 input-group-sm pl-3 pr-3">
                            <div class="input-group-prepend" title="Nome do produto">
                            </div>
                            <div class="col-md-4 mt-2">
                                <label for="produto" class="col-form-label text-md-end">{{ __('Descrição') }}</label>
                            </div>
                            <div class="col-12 d-flex">
                                <select id="produto" type="text" class="custom-select @error('produto') is-invalid @enderror select" name="produto" value="{{ old('produto') }}" autocomplete="produto" autofocus>   
                                </select>
                            </div>
                        </div>
                        <div class="input-group mt-2 input-group-sm pl-3 pr-3">
                            <div class="input-group-prepend">
                            </div>
                            <div class="col-md-4  mt-2">
                                <label for="qtde" class="col-form-label text-md-end">{{ __('QTDE.') }}</label>
                                <input id="qtde" type="text" class="form-control @error('qtde') is-invalid @enderror" name="qtde" value="{{ old('qtde')}}" autocomplete="qtde" oninput="formatarqtde(this)" autofocus> 
                            </div>
                            <div class="input-group-prepend">
                            </div>
                            <div class="col-md-4  mt-2">
                                <label for="vlr_unitario" class="col-form-label text-md-end">{{ __('Valor Unitário') }}</label>
                                <input id="vlr_unitario" type="text" class="form-control @error('vlr_unitario') is-invalid @enderror" name="vlr_unitario" value="{{ old('vlr_unitario')}}" autocomplete="vlr_unitario" oninput="formatarValor(this)" autofocus>
                                <input id="vlr_original" type="hidden" class="form-control @error('vlr_original') is-invalid @enderror" name="vlr_original" value="{{ old('vlr_original')}}" autocomplete="vlr_original" oninput="formatarValor(this)">
                                <input id="desconto_max" type="hidden" class="form-control @error('desconto_max') is-invalid @enderror" name="desconto_max" value="{{ old('desconto_max')}}" autocomplete="desconto_max" oninput="formatarValor(this)">
                            </div>
                            <div class="input-group-prepend">
                            </div>
                            <div class="col-md-4 mt-2">
                                <label for="vlr_total" class="col-form-label text-md-end">{{ __('Valor Total') }}</label>
                                <input id="vlr_total" type="text" class="form-control @error('vlr_total') is-invalid @enderror" name="vlr_total" disabled value="{{ old('vlr_total')}}" autocomplete="vlr_total" oninput="formatarValor(this)" autofocus>
                            </div>
                        </div>
                        <hr class="sidebar-divider mb-2">

                        <div class="col-12 text-center mt-1 mb-1">
                            <button type="button" id="btnAdicionar_produto" class="btn btn-primary" disabled style="cursor: not-allowed;">Adicionar produto</button>
                        </div>
                    </div>
                </div>

                <!-- Listagem de Mercadorias -->
                <div class="col-12 col-md-6 col-lg-7">
                    <div class="card shadow mb-6" style="max-height: 430px; overflow-y: auto;min-height: 270px;">
                        <div class="card-header bg-primary text-gray-100 py-2 d-flex flex-row align-items-center justify-content-between">
                            <h6 class="m-0 font-weight-bold">Lista de Mercadorias</h6>
                        </div>
                        <div class="p-3">
                            <div class="table-responsive">
                                <div class="scrollbar">
                                    <table id="lista_produtos" class="table-striped table-hover table-sm text-center display compact" width="100%" cellspacing="0">
                                        <thead class="thead-light">
                                            <th>Ref.</th>
                                            <th>Descrição</th>
                                            <th>Edição</th>
                                            <th>QTDE.</th>
                                            <th>Vlr. Unit.</th>
                                            <th>Acres.(%)</th>
                                            <th>Desc.(%)</th>
                                            <th>Vlr. Total</th>
                                            <th>Base ICMS</th>
                                            <th>% ICMS</th>
                                            <th>Vlr. ICMS</th>
                                        </thead>
                                        <tbody id="tbody_produtos">
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tbody>
                                    </table>
                                </div>
                            </div>   
                        </div>
                    </div>
                    <div class="card shadow mb-6">
                        <div class="text-center mt-2">
                            <label for="vlr_venda" class="h4 font-weight-bold">Valor Total</label>
                            <div class="input-group input-group-lg">
                                <div class="input-group-prepend">
                                </div>
                                <input id="vlr_venda" type="number" class="form-control text-center  @error('vlr_venda') is-invalid @enderror" placeholder="0,00" readonly name="vlr_venda" value="{{ old('vlr_venda')}}" required autocomplete="vlr_venda" autofocus oninput="calcularDesconto()">
                            </div>
                        </div>
                        <div class="col-12 text-center mt-1">
                            <button type="button" id="btnfechar_venda" class="btn bg-success" data-toggle="modal" data-target="#modalfechar" disabled style="cursor: not-allowed;" >Finalizar venda (F10)</button>
                            <button type="button" id="btncancelar_venda" class="btn bg-danger" data-toggle="modal" data-target="#modalcancelar" disabled style="cursor: not-allowed;" >Cancelar venda(F9)</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal de Erro de quantidade -->
        <div class="modal fade" id="modalErroqtde" tabindex="-1" role="dialog" aria-labelledby="modalErroLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalErroLabel">Erro</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        A quantidade está zerada. Por favor, insira uma quantidade válida.
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal de Produto inexistente -->
        <div class="modal" tabindex="-1" role="dialog" id="modalErro">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Erro</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Mercadoria não cadastrada ou deletada.
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal de cancelamento -->
        <div class="modal fade" id="modalcancelar" tabindex="-1" aria-labelledby="CancelarModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="CancelarModalLabel">Cancelar Venda</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Deseja Realmente Cancelar essa venda?
                    </div>
                    <div class="modal-footer">
                        <a href="{{ route('sales.create') }}" class="btn btn-success" >Sim</a>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Não</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal de Fechamento -->
        <div class="modal fade" id="modalfechar" tabindex="-1" aria-labelledby="FecharModalLabel" aria-hidden="true" data-backdrop="static">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="modal-header">
                                <label class="modal-title" id="FecharModalLabel">Fechamento de Venda</label>
                            </div>
                            <div class="modal-body">
                                <label>Forma de Pagamento</label>
                                <select class="form-control" id="pagamento" name="pagamento" value="{{ old('pagamento') }}">
                                    <option value="1">Dinheiro</option>
                                    <option value="2">Pix</option>
                                    <option value="3">Cartão Crédito</option>
                                    <option value="4">Cartão Débito</option>
                                    <option value="5">Prazo</option>
                                    <option value="6">Cheque</option>
                                    <option value="7">Deposito</option>
                                    </select>
                                <label>Desconto</label>
                                <div class="row">
                                    <div class="col-3">
                                        <input id="vlrdescontoporcent" type="text" class="form-control text-center  @error('vlrdescontoporcent') is-invalid @enderror" name="vlrdescontoporcent" value="0,00" autocomplete oninput="calcularPercentual()" autofocus>
                                    </div>
                                    <div class="col-9">
                                        <input id="vlrdesconto" type="text" class="form-control text-center  @error('vlrdesconto') is-invalid @enderror" name="vlrdesconto" value="0,00" autocomplete="vlrdesconto" oninput="calcularDescontoAcrescimo()" autofocus>
                                    </div>
                                </div>
                                <label>Acréscimo</label>
                                <div class="row">
                                    <div class="col-3">
                                        <input id="vlracrescimoporcent" type="text" class="form-control text-center  @error('vlracrescimoporcent') is-invalid @enderror" name="vlracrescimoporcent" value="0,00"   oninput="calcularPercentual()" autocomplete autofocus>
                                    </div>
                                    <div class="col-9">
                                        <input id="vlracrescimo" type="text" class="form-control text-center  @error('vlracrescimo') is-invalid @enderror" name="vlracrescimo" value="0,00" autocomplete="vlracrescimo" oninput="calcularDescontoAcrescimo()" autofocus>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">                            
                                        <label>Valor</label>
                                        <input id="vlr_pgto" type="text" class="form-control text-center  @error('vlr_pgto') is-invalid @enderror" name="vlr_pgto" value="{{ old('vlr_pgto')}}" autocomplete="vlr_pgto" oninput="validarNumero(this); CalcularTroco()" autofocus required>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <label>Troco</label>
                                        <input id="troco" type="text" class="form-control text-center @error('troco') is-invalid @enderror" name="troco" value="0,00" autocomplete="troco" autofocus readonly>
                                    </div>
                                    <div class="col-6">
                                        <label>Falta a pagar</label>
                                        <input id="falta_pagar" type="text" class="form-control text-center @error('falta_pagar') is-invalid @enderror" name="falta_pagar" value="0,00" autocomplete="falta_pagar" oninput="Calcularfaltapagar()" autofocus readonly>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <label>Valor Bruto</label>
                                        <input id="vlr_venda_pgto_bruto" type="text" class="form-control text-center  @error('vlr_venda_pgto_bruto') is-invalid @enderror" name="vlr_venda_pgto_bruto" value="{{ old('vlr_venda_pgto_bruto')}}" autocomplete="vlr_venda_pgto_bruto" autofocus readonly>
                                    </div>
                                    <div class="col-6">
                                        <label>Valor Liquido</label>
                                        <input id="vlr_venda_pgto" type="text" class="form-control text-center  @error('vlr_venda_pgto') is-invalid @enderror" name="vlr_venda_pgto" value="{{ old('vlr_venda_pgto')}}" autocomplete="vlr_venda_pgto" autofocus readonly oninput="CalcularTroco()">
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" id="btnConfirmar" class="btn btn-success">Sim</button>
                                <button id="btncancelarpagamento" type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="modal-body" style="max-height: 485px; overflow-y: auto;min-height: 485px;">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <label class="modal-title" id="FecharModalLabel">Diferentes Pagamentos</label>
                                <hr>
                                <div class="table-responsive">
                                    <table id="lista_pagamentos" class="table-striped table-hover table-sm text-center display compact" width="100%" cellspacing="0">
                                        <tr>
                                            <thead class="thead-light">
                                                <th>Ordem</th>
                                                <th>Pgto.</th>
                                                <th>Vlr.</th>
                                                <th>Troco</th>
                                                <th>Desc.</th>
                                                <th>Acre.</th>
                                            </thead>
                                        </tr>
                                        <tbody id="tbody_pagamentos">
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                    
                            <label>Valor Pago</label>
                            <input id="pago" type="text" class="form-control text-center  @error('pago') is-invalid @enderror" name="pago" value="0,00" autocomplete="pago" autofocus readonly>
                    
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

@stop

@section('css')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css" rel="stylesheet" />

    <style>
        .table-responsive {
        overflow-x: auto;
        }

        .scrollbar {
            overflow-x: auto;
            max-height: 200px; /* Ajuste conforme necessário */
        }

        .scrollbar table {
            min-width: 900px; /* Ajuste conforme necessário para acomodar todas as colunas */
            
        }

       
        .select2-container {
            width: 100% !important;
        }

        .select2-selection--single {
            border: 1px solid #ced4da;
            border-radius: 4px;
            padding: 10px;
            height: 40px !important;
            box-sizing: border-box; 
        }

        .select2-selection__arrow {
            height: 38px; 
        }

        .select2-selection__rendered {
            color: #495057; 
            line-height: 40px; 
        }

        .select2-container--default .select2-selection--single .select2-selection__placeholder {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 14px;
            color: #6c757d;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .select2-container--default.select2-container--focus .select2-selection--single {
            border-color: #80bdff; 
        }

        .sidebar-collapse .sidebar-mini {
            width: 50px;
        }

        .campo-obrigatorio-faltando {
            border: 2px solid red; /* Estilo de borda para destacar */
        }
        
    </style>
@stop

@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/i18n/pt-BR.js"></script>
    <script src="{{ URL::asset('js/VendaProduct/Venda.js') }}"></script>

    <script>
        $(document).ready(function () {
        
            $('body').addClass('sidebar-collapse');
        });

        document.addEventListener('DOMContentLoaded', function() {
            // Input e select
            const codigoVendedorInput = document.getElementById('codigo_vendedor');
            const vendedorSelect = document.getElementById('vendedor');

            // Spans onde os valores serão exibidos
            const spanIdVendedor = document.getElementById('id_vendedor');
            const spanNomeVendedor = document.getElementById('nome_vendedor');

            // Função para atualizar os spans
            function atualizarValoresVendedor() {
                spanIdVendedor.textContent = codigoVendedorInput.value;
                const selectedOption = vendedorSelect.options[vendedorSelect.selectedIndex];
                spanNomeVendedor.textContent = selectedOption.text;
            }

            // Atualiza os spans quando o input de código do vendedor é alterado
            codigoVendedorInput.addEventListener('input', atualizarValoresVendedor);

            // Atualiza os spans quando o select de vendedor é alterado
            vendedorSelect.addEventListener('change', atualizarValoresVendedor);

            // Chamada inicial para garantir que os spans estejam corretos ao carregar a página
            atualizarValoresVendedor();
        });
        
    </script>
   
 
@stop