@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">
                <div class="card shadow">
                    <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 p-2 align-items-end">
                        <div class="col-md-2">
                            <div class="d-flex align-items-center w-100" style="gap: 10px;">
                                <label for="codigo_cliente"
                                    style="margin: 0; padding: 0; white-space: nowrap; display: inline-block;">{{ __('Código') }}</label>
                                <div class="d-flex flex-grow-1 ms-1">
                                    <input id="codigo_cliente" type="text"
                                        class="form-control form-control-sm @error('codigo_cliente') is-invalid @enderror"
                                        name="codigo_cliente" value="{{ old('codigo_cliente') }}" required>
                                    <button class="btn btn-primary btn-sm ms-1" id="btnConsulta_cliente" type="button">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-10">
                            <div class="d-flex align-items-center w-100" style="gap: 10px;">
                                <label for="cliente"
                                    class="mb-0"
                                    style="margin: 0; padding: 0; white-space: nowrap; display: inline-block;">{{ __('Cliente') }}</label>
                                <select id="cliente"
                                        class="form-select form-select-sm @error('cliente') is-invalid @enderror select2 flex-grow-1 ms-0"
                                        name="cliente">
                                </select>
                            </div>
                        </div>
                    </div>
                                        <hr>
                     <div class="col-12 text-right">
                        <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>
                        <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>
                    </div>

                    <div class="row p-2 align-items-end">
                        <div class="col-md-2">
                            <label for="codigo_produto" class="col-form-label">{{ __('Referência') }}</label>
                            <div class="input-group input-group-sm">
                                <input id="codigo_produto" type="text" class="form-control @error('codigo_produto') is-invalid @enderror" name="codigo_produto" value="{{ old('codigo_produto') }}">
                                <div class="input-group-append">
                                    <button class="btn btn-primary btn-sm" id="btnConsulta_produto" type="button">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <label for="produto" class="col-form-label">{{ __('Descrição') }}</label>
                            <select id="produto" class="custom-select @error('produto') is-invalid @enderror select" name="produto">
                            </select>
                        </div>

                        <div class="col-md-1">
                            <label for="qtde" class="col-form-label">{{ __('QTDE.') }}</label>
                            <input id="qtde" type="text" class="form-control @error('qtde') is-invalid @enderror" name="qtde" value="{{ old('qtde')}}" oninput="formatarqtde(this)">
                        </div>

                        <div class="col-md-2">
                            <label for="vlr_unitario" class="col-form-label">{{ __('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')}}" oninput="formatarValor(this)">
                            <input id="vlr_original" type="hidden" name="vlr_original" value="{{ old('vlr_original') }}">
                            <input id="desconto_max" type="hidden" name="desconto_max" value="{{ old('desconto_max') }}">
                        </div>

                        <div class="col-md-2">
                            <label for="vlr_total" class="col-form-label">{{ __('Valor Total') }}</label>
                            <input id="vlr_total" type="text" class="form-control @error('vlr_total') is-invalid @enderror" name="vlr_total" value="{{ old('vlr_total')}}" disabled oninput="formatarValor(this)">
                        </div>

                        <div class="col-md-2 text-center">
                            <button type="button" id="btnAdicionar_produto" class="btn btn-primary w-100" disabled style="cursor: not-allowed;">Adicionar produto</button>
                        </div>
                    </div>
                    <div class="p-3">
                        <div class="table-responsive">
                            <div class="table-wrapper" style="max-height: 220px; min-height: 220px; overflow-y: auto;">
                                <table id="lista_produtos" class="table 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>Preço</th>
                                        <th>Acres.(%)</th>
                                        <th>Desc.(%)</th>
                                        <th>Preço Total</th>
                                    </thead>
                                    <tbody id="tbody_produtos">
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                    </tbody>
                                </table>
                            </div>
                        </div>   
                    </div>
                    <div class="text-center">
                        <input id="vlr_venda" type="hidden" 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 class="fixed-footer bg-dark text-white border-top py-3 px-4 d-flex justify-content-between align-items-center shadow-lg" style="font-size: 1.25rem;">
                        <div>
                            <strong class="text-white">Qtde. de Itens:</strong>
                            <span id="total_qtde" class="ml-2 badge badge-light px-3 py-2" style="font-size: 1.2rem;">0</span>
                        </div>
                        <div>
                            <strong class="text-white">Valor Total:</strong>
                            <span id="total_valor" class="ml-2 badge badge-success px-3 py-2" style="font-size: 1.5rem;">R$ 0,00</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="modal fade" id="modalErroqtde" tabindex="-1" role="dialog" aria-labelledby="modalErroLabel" aria-hidden="true" style="z-index: 9999;">
            <div class="modal-dialog modal-dialog-centered" 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>

        <div class="modal" tabindex="-1" role="dialog" id="modalErro" style="z-index: 9999;">
            <div class="modal-dialog modal-dialog-centered" 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>

        <div class="modal fade" id="modalcancelar" tabindex="-1" aria-labelledby="CancelarModalLabel" aria-hidden="true" style="z-index: 9999;">
            <div class="modal-dialog modal-dialog-centered">
                <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>

        <div class="modal fade" id="modalfechar" tabindex="-1" aria-labelledby="FecharModalLabel" aria-hidden="true" data-backdrop="static" style="z-index: 9999;">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <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>

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

    <style>
        
        .table-wrapper {
            max-height: 240px; 
            min-height: 240px;
            overflow-y: auto;
            border: 1px solid #dee2e6;
        }

        .scrollbar {
            overflow-x: auto;
            max-height: 200px;
        }

        .scrollbar table {
            min-width: 900px;
            
        }

        .table-responsive {
            overflow-x: auto;
        }

        .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;
        }

        .col-form-label {
            min-width: 120px;
            text-align: left; 
        }

        .swal2-container {
            z-index: 10000 !important;
        }
        
    </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>
@stop