@extends('front_box.default', ['title' => !isset($title) ? (isset($pedido) ? isset($isDelivery) ? ('Finalizando Pedido Delivery ' . $pedido->id) : ('Finalizando Comanda ' . $pedido->comanda) : 'Nova Venda - PDV (TimeFive)') : $title ])

@section('css')
<style>
:root{--tf-bg:#eaf1ff;--tf-card:#ffffff;--tf-text:#0f172a;--tf-muted:#465166;--tf-primary:#5ea2f7;--tf-secondary:#3b82f6;--tf-border:#cfe0ff}
html[data-bs-theme='foliage']{--tf-bg:#F0FFF0;--tf-card:#FFFFFF;--tf-text:#333333;--tf-muted:#666666;--tf-primary:#228B22;--tf-secondary:#1B6F1B;--tf-border:#A0522D}
html[data-bs-theme='foliage'] .tf-wrap{background:linear-gradient(180deg,var(--tf-bg),#E0F0E0)}
html[data-bs-theme='foliage'] .tf-header{background:#F5FFF5;border-color:var(--tf-border)}
html[data-bs-theme='foliage'] .tf-chip{background:#F0FFF0;border-color:var(--tf-border);color:var(--tf-text)}
html[data-bs-theme='foliage'] .tf-toolbar .btn-success{background:linear-gradient(90deg,#228B22,#6B8E23);color:#fff}
html[data-bs-theme='foliage'] .tf-toolbar .btn-primary{background:linear-gradient(90deg,#228B22,#1B6F1B);color:#fff}
html[data-bs-theme='foliage'] .tf-table thead th{background:rgba(34,139,34,0.2);color:var(--tf-text);border-bottom-color:var(--tf-border)}
html[data-bs-theme='foliage'] .dropdown-menu{background:#FFFFFF;border:1px solid #A0522D}
html[data-bs-theme='foliage'] .dropdown-item{color:#333333}
html[data-bs-theme='foliage'] .dropdown-item:hover{background:#F0FFF0;color:#228B22}

html[data-bs-theme='nature']{--tf-bg:#F0FFF0;--tf-card:#F5FFFA;--tf-text:#2F4F4F;--tf-muted:#A0522D;--tf-primary:#6B8E23;--tf-secondary:#556B2F;--tf-border:#DCDCDC}
html[data-bs-theme='nature'] .tf-wrap{background:linear-gradient(180deg,var(--tf-bg),#F5FFFA)}
html[data-bs-theme='nature'] .tf-header{background:#E0FFF0;border-color:var(--tf-border)}
html[data-bs-theme='nature'] .tf-chip{background:#F0FFF0;border-color:var(--tf-border);color:var(--tf-text)}
html[data-bs-theme='nature'] .tf-toolbar .btn-success{background:linear-gradient(90deg,#7CFC00,#6B8E23);color:#2F4F4F}
html[data-bs-theme='nature'] .tf-toolbar .btn-primary{background:linear-gradient(90deg,#6B8E23,#556B2F);color:#fff}
html[data-bs-theme='nature'] .tf-table thead th{background:rgba(107,142,35,0.2);color:var(--tf-text);border-bottom-color:var(--tf-border)}
html[data-bs-theme='nature'] .dropdown-menu{background:#F5FFFA;border:1px solid #DCDCDC}
html[data-bs-theme='nature'] .dropdown-item{color:#2F4F4F}
html[data-bs-theme='nature'] .dropdown-item:hover{background:#F0FFF0;color:#6B8E23}
.tf-wrap{min-height:100vh;background:var(--tf-bg);padding:12px}
.tf-grid{display:grid;grid-template-columns: 68% 32%; gap:14px}
.tf-panel{background:var(--tf-card);border:1px solid var(--tf-border);border-radius:16px;box-shadow:0 10px 24px rgba(30,58,138,.08);padding:12px;color:var(--tf-text)}
.tf-header{background:linear-gradient(90deg,#f0f6ff,#e3eeff);border:1px solid var(--tf-border);border-radius:16px;box-shadow:0 8px 18px rgba(30,58,138,.10);padding:10px;margin-bottom:10px}
.tf-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tf-top .tf-chip{background:#e6efff;border:1px solid var(--tf-border);border-radius:999px;padding:6px 12px;color:#0f172a;font-weight:600}
.tf-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tf-toolbar .btn{border-radius:12px;padding:6px 12px}
.tf-toolbar .btn-success{background:linear-gradient(90deg,#25c26e,#7dd3fc);border:0;color:#0b0f14}
.tf-toolbar .btn-primary{background:linear-gradient(90deg,#3b82f6,#60a5fa);border:0}
.tf-toolbar .btn-secondary{background:linear-gradient(90deg,#334155,#64748b);border:0}
.tf-toolbar .btn-info{background:linear-gradient(90deg,#0ea5e9,#38bdf8);border:0;color:#0b0f14}
.tf-actions-dd{position:relative;margin-left:auto}
.tf-actions-dd .btn-actions{background:linear-gradient(90deg,#6d28d9,#7c3aed);border:0;color:#fff}
.tf-actions-dd .dropdown-menu{position:absolute;right:0;top:36px;display:none}
.tf-actions-dd .dropdown-menu,.tf-actions-menu{z-index:1060}
.tf-actions-dd .dropdown-menu.show{display:block}
.tf-actions-menu{min-width:280px;padding:10px;border-radius:14px;border:1px solid var(--tf-border);box-shadow:0 14px 28px rgba(30,58,138,.12)}
.tf-actions-menu h6{margin:6px 10px;font-weight:700;color:#0f172a}
.tf-actions-list{display:flex;flex-direction:column;gap:8px;padding:4px 6px}
.tf-chip-act{display:block;width:100%;border-radius:12px;padding:12px 14px;font-weight:700;margin:0;border:1px solid var(--tf-border);cursor:pointer;box-shadow:0 6px 14px rgba(30,58,138,.10);transition:background .2s, transform .2s}
.tf-chip-act:hover{transform:translateY(-1px)}
.tf-act-red{background:#fee2e2;color:#991b1b}
.tf-act-gray{background:#e5e7eb;color:#1f2937}
.tf-act-amber{background:#fef3c7;color:#92400e}
.tf-act-cyan{background:#cffafe;color:#0e7490}
.tf-act-violet{background:#ddd6fe;color:#4c1d95}
.tf-act-pink{background:#ffe4e6;color:#9f1239}
.tf-act-blue{background:#dbeafe;color:#1d4ed8}
.tf-toolbar .tf-icon-btn{width:48px;height:32px;display:flex;align-items:center;justify-content:center;padding:0}
.tf-toolbar .tf-icon-btn.btn-danger{background:linear-gradient(90deg,#ef4444,#f87171);border:0;color:#fff}
.tf-form-row{display:grid;grid-template-columns: 1fr 120px 160px 140px; gap:8px;align-items:center}
.tf-form-row .btn-add{height:42px;border-radius:10px;background:linear-gradient(90deg,var(--tf-primary),#93c5fd);border:0;color:#0b0f14;font-weight:700}
.tf-input,.tf-select{height:42px;border-radius:10px;border:1px solid var(--tf-border);background:#f8fbff;color:#0f172a;padding:8px 10px}
.tf-barcode{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.tf-barcode .tf-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--tf-border);background:#f8fbff;color:#0f172a;font-size:22px}
.tf-barcode .tf-input{flex:1}
.tf-table{margin-top:10px;border-radius:12px;overflow:hidden}
.tf-table table{width:100%;border-collapse:collapse}
.tf-table thead th{background:#eaf2ff;color:#0f172a;padding:10px;border-bottom:1px solid var(--tf-border);text-align:left;font-size:12px}
.tf-table tbody td{padding:10px;border-bottom:1px solid var(--tf-border)}
.tf-actions{display:grid;grid-template-columns: 1fr 1fr 1fr; gap:8px;margin-top:8px}
.tf-actions .tf-chip{background:#f8fbff;border:1px solid var(--tf-border);border-radius:10px;padding:10px;color:#0f172a}
.tf-right .btn{height:42px;border-radius:12px}
.tf-right .btn-success{background:linear-gradient(90deg,#60a5fa,#93c5fd);border:0;color:#0b0f14}
.tf-right .btn-primary{background:linear-gradient(90deg,#3b82f6,#60a5fa);border:0}
.tf-right .btn-dark{background:linear-gradient(90deg,#1e3a8a,#1d4ed8);border:0}
.tf-total{background:#f0f6ff;border:1px solid var(--tf-border);border-radius:12px;padding:12px}
.tf-total .v{font-size:28px;color:#2563eb;font-weight:800}
.select2-container{width:100% !important}
.tf-wrap .select2-container--default .select2-selection--single{height:42px;border-radius:12px;border:1px solid #cfe0ff;background:#ffffff;color:#0f172a;box-shadow:0 8px 18px rgba(30,58,138,.12)}
.tf-wrap .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:42px;color:#fff;padding-left:12px}
.tf-wrap .select2-container--default .select2-selection--single .select2-selection__arrow{height:42px}
.tf-wrap .select2-dropdown{background:#ffffff;border:1px solid #cfe0ff;border-radius:14px;box-shadow:0 14px 28px rgba(30,58,138,.18)}
.tf-wrap .select2-results__option{color:#0f172a;padding:12px 14px}
.tf-wrap .select2-results__option--highlighted{background:#3b82f6;color:#fff}
.tf-wrap .select2-search__field{border:1px solid #cfe0ff;border-radius:12px;background:#ffffff;color:#0f172a}
@media (max-width:900px){ .tf-grid{grid-template-columns:1fr} }
</style>
@endsection

@section('content')
<div class="tf-wrap main">
  <div class="tf-header">
    <div class="tf-top">
      <span class="tf-chip">Empresa: <strong>{{ $empresa->nome }}</strong></span>
      <span class="tf-chip">Usuário: <strong>{{ $user->name }}</strong></span>
      


      <span class="tf-chip d-offline d-none">OFFLINE</span>
      <strong class="timer">{{ date('d/m/Y H:i:s') }}</strong>
      <div style="margin-left:auto;display:flex;gap:8px">
        <button type="button" class="btn btn-light btn-sm" onclick="vendaSuspensa()">Vendas suspensas</button>
        <button type="button" class="btn btn-dark btn-sm" onclick="reiniciarVenda()">Reiniciar</button>
      </div>
    </div>
    <div class="tf-toolbar">
      <button type="button" class="btn btn-danger btn-sm tf-icon-btn" onclick="openModalCliente()" title="Cliente"><i class="ri-user-3-line"></i></button>
      <button type="button" class="btn btn-success btn-sm" onclick="openModalVendedor()">Informar Vendedor</button>
      <a href="{{ route('pre-venda.index') }}" class="btn btn-info btn-sm btn-lista-prevendas" data-url="{{ route('pre-venda.index') }}">Lista de Pré-vendas</a>
      <a href="{{ route('vendas.index') }}" class="btn btn-secondary btn-sm btn-lista-vendas" data-url="{{ route('vendas.index') }}">Lista de Vendas</a>
      @can('troca_view')
      <a href="{{ route('trocas.index') }}" class="btn btn-dark btn-sm btn-lista-trocas" data-url="{{ route('trocas.index') }}">Lista de Trocas</a>
      @endcan

      <div class="dropdown tf-actions-dd">
        <button class="btn btn-primary btn-sm btn-actions" type="button" onclick="openActionsDropdown()">Ações</button>
        <div class="dropdown-menu tf-actions-menu dropdown-menu-end">
          <h6>Selecione:</h6>
          <div class="tf-actions-list">
            <span class="tf-chip-act tf-act-red action-devolucao">Devolução</span>
            <span class="tf-chip-act tf-act-gray action-sangria">Sangria</span>
            <span class="tf-chip-act tf-act-amber action-suprimento">Suprimento de Caixa</span>
            <span class="tf-chip-act tf-act-cyan action-apontar-comanda">Apontar Comanda</span>
            <span class="tf-chip-act tf-act-violet action-mesas">Mesas</span>
            <span class="tf-chip-act tf-act-pink action-fechar-caixa">Fechar Caixa</span>
            <span class="tf-chip-act tf-act-gray action-config">Configuração</span>
            <span class="tf-chip-act tf-act-amber action-rascunhos">Rascunhos</span>
            <span class="tf-chip-act tf-act-blue action-fluxo">Fluxo Diário</span>
            <span class="tf-chip-act tf-act-blue action-sair">Sair</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  {!!Form::open()->post()->route('frontbox.store')->id('form-pdv')!!}
  <div class="tf-grid">
      <div class="tf-panel">
        <div class="tf-barcode">
          <span class="tf-icon"><i class="ri-barcode-line"></i></span>
          <input id="inp-codigo-barras" type="text" class="tf-input" placeholder="Clique aqui para ativar o leitor de código de barras [F1]" disabled>
          <button type="button" id="toggle-barcode" class="btn btn-sm btn-secondary">Ativar Leitor</button>
        </div>
        <div class="mb-2"><input id="inp-pesquisa" type="text" class="tf-input" placeholder="Pesquisar produto [shift+f]"></div>
        <div class="tf-form-row">
          <select class="tf-select select2" name="produto_id" id="produto_id">
            <option value="">Produto</option>
          @foreach($produtos as $p)
          <option data-valor="{{ $p->valor_unitario }}" value="{{ $p->id }}" @if($p->validaEstoque() == 0) disabled @endif>#{{ $p->numero_sequencial }} {{ $p->nome }} [R${{ __moeda($p->valor_unitario) }}]</option>
          @endforeach
        </select>
        <input id="inp-quantidade" type="tel" name="quantidade" class="tf-input qtd" value="1" placeholder="Quantidade">
        <input id="inp-valor_unitario" type="tel" name="valor_unitario" class="tf-input moeda value_unit" placeholder="Valor unitário">
        <button type="button" id="btn-adicionar" class="btn btn-add">Adicionar</button>
      </div>

      <div class="tf-table div-itens">
        <table class="itens">
          <thead><tr><th>ID</th><th>Produto</th><th>Quantidade</th><th>Valor</th><th>Subtotal</th><th>#</th></tr></thead>
          <tbody></tbody>
        </table>
      </div>

      <div class="tf-actions">
        <div class="tf-chip" onclick="openModalDesconto()">Desconto <strong class="desconto">R$ 0,00</strong></div>
        <div class="tf-chip" onclick="openModalAcrescimo()">Acréscimo <strong class="acrescimo">R$ 0,00</strong></div>
        <div class="tf-chip" onclick="openModalListaPreco()">Lista de Preços</div>
        <div class="tf-chip" onclick="openModalValorFrete()">Valor de frete <strong class="valor_frete">R$ 0,00</strong></div>
        <div class="tf-chip" onclick="openModalObservacao()">Observação</div>
      </div>
    </div>

    <div class="tf-panel tf-right">
      <div class="tf-total">TOTAL R$: <strong class="v total-venda">R$ 0,00</strong></div>
      <div class="mt-2 d-grid gap-2">
        <button type="button" class="btn btn-success" onclick="openModalDinheiro()">Dinheiro [F4]</button>
        <button type="button" class="btn btn-primary" onclick="openModalCartao('03')">Crédito [F2]</button>
        <button type="button" class="btn btn-danger" onclick="openModalCartao('04')">Débito [F3]</button>
        <button type="button" class="btn btn-dark" onclick="setPagamento('17')">PIX [F9]</button>
        <button type="button" class="btn btn-secondary" onclick="openModalMultiploPagamento()">Múltiplo pagamento [F7]</button>
        <button type="button" class="btn btn-light" onclick="$('.modal-acoes').modal('show')">Ações do PDV [ctrl+a]</button>
      </div>
      <div class="mt-2"><select class="form-select" id="tipo_pagamento_sel"><option value="01">01 - Dinheiro</option>@foreach($tiposPagamento as $key => $t) @if($key != '01')<option value="{{ $key }}">{{ $t }}</option>@endif @endforeach</select></div>
      <div class="mt-2"><input id="inp-valor_recebido" class="form-control moeda" placeholder="Valor recebido"></div>
      <div class="mt-2 alert alert-info">Troco: <strong class="valor-troco">R$ 0,00</strong></div>
      <div class="mt-2 d-grid gap-2"><button type="button" class="btn btn-success btn-fiscal" data-bs-toggle="modal" data-bs-target=".modal-finalizar">Finalizar</button></div>
      <div class="mt-2 d-grid gap-2"><button type="button" id="btn-suspender" class="btn btn-warning">Suspender venda</button></div>
    </div>
  </div>
  {!!Form::close()!!}

  @include('front_box.partials_form3.modal_desconto')
  @include('front_box.partials_form3.modal_acrescimo')
  @include('front_box.partials_form3.modal_frete')
  @include('front_box.partials_form3.modal_observacao')
  @include('front_box.partials_form3.modal_cartao')
  @include('front_box.partials_form3.modal_lista_preco')
  @include('front_box.partials_form3.modal_dinheiro')
  @include('front_box.partials_form3.modal_finalizar')
  @include('modals._cpf_nota', ['not_submit' => true])
  @include('front_box.partials_form3.modal_cliente')
  @include('front_box.partials_form3.modal_vendedor')
  @include('front_box.partials_form3.modal_fatura')
  @include('front_box.partials_form3.modal_acoes')
  @include('front_box.partials_form3.modal_vendas_off')
  @include('front_box.partials_form3.modal_suprimento')
  @include('front_box.partials_form3.modal_sangria')
  @include('front_box.partials_form3.modal_fechamento_caixa')
      @include('modals._vendas_suspensas')

  <input type="hidden" value="{{ json_encode($produtos) }}" id="produtos-hidden">
  <input type="hidden" value="{{ $config->balanca_digito_verificador }}" id="balanca_digito_verificador">
  <input type="hidden" value="{{ $isVendaSuspensa ? $item->id : 0 }}" id="venda_suspensa_id">
  <input type="hidden" value="{{ isset($itensVenda) ? $item->id : 0 }}" id="venda_id">
  <input type="hidden" value="{{ $isVendaSuspensa ? json_encode($itenSuspensa) : '[]' }}" id="itens_venda_suspensa">
  <input type="hidden" value="{{ isset($itensVenda) ? json_encode($itensVenda) : '[]' }}" id="itens_venda">
  <input type="hidden" id="definir_vendedor_pdv" value="{{ $config ? $config->definir_vendedor_pdv : 0 }}">
  <input type="hidden" id="cliente_padrao" value="{{ isset($clientePadrao) && $clientePadrao ? $clientePadrao->id : 0 }}">
  <input type="hidden" id="impressao_sem_janela_cupom" value="{{ $config ? $config->impressao_sem_janela_cupom : 0 }}">

  <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">@csrf</form>

</div>
@endsection

@section('js')
<script src="/js/frente_caixa3.js?v={{ time() }}"></script>
<script>
$(function(){
  try{
    // Fix dropdowns manually
    var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
    var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
      return new bootstrap.Dropdown(dropdownToggleEl)
    });

    var active = localStorage.getItem('pdv-timefive-barcode-active') === 'true';
    var $input = $('#inp-codigo-barras');
    var $btn = $('#toggle-barcode');
    if(active){
      $input.prop('disabled', false);
      $btn.text('Desativar Leitor');
    }else{
      $input.prop('disabled', true);
      $btn.text('Ativar Leitor');
    }
    $btn.off('click').on('click', function(){
      var nowActive = $input.is(':disabled');
      if(nowActive){
        $input.prop('disabled', false);
        $btn.text('Desativar Leitor');
        localStorage.setItem('pdv-timefive-barcode-active', 'true');
      }else{
        $input.prop('disabled', true);
        $btn.text('Ativar Leitor');
        localStorage.setItem('pdv-timefive-barcode-active', 'false');
      }
    });

    // Handler para o botão Fechar Caixa
    $('.action-fechar-caixa').off('click').on('click', function(){
      abrirModalFechamentoCaixa();
    });
  }catch(e){}
});

function abrirModalFechamentoCaixa() {
  var modal = new bootstrap.Modal(document.getElementById('modal-fechamento-caixa'));
  modal.show();
  
  // Carrega os dados do caixa
  $.ajax({
    url: path_url + 'caixa/fechar-empresa/{{ $caixa->id }}',
    method: 'GET',
    success: function(response) {
      $('#fechamento-caixa-content').html(response);
    },
    error: function(xhr) {
      $('#fechamento-caixa-content').html(`
        <div class="alert alert-danger">
          <i class="ri-error-warning-line me-2"></i>
          Erro ao carregar informações do caixa. Tente novamente.
        </div>
      `);
    }
  });
}
</script>
<style>
.modal-lista-vendas .modal-dialog,.modal-lista-trocas .modal-dialog,.modal-lista-prevendas .modal-dialog,.modal-fluxo .modal-dialog,.modal-devolucao .modal-dialog{max-width:96%}
.modal-lista-vendas .modal-content,.modal-lista-trocas .modal-content,.modal-lista-prevendas .modal-content,.modal-fluxo .modal-content,.modal-devolucao .modal-content{border-radius:16px}
.modal-lista-vendas .modal-body,.modal-lista-trocas .modal-body,.modal-lista-prevendas .modal-body,.modal-fluxo .modal-body,.modal-devolucao .modal-body{padding:0;height:80vh}
.modal-lista-vendas .iframe-lista,.modal-lista-trocas .iframe-lista,.modal-lista-prevendas .iframe-lista,.modal-fluxo .iframe-lista,.modal-devolucao .iframe-lista{width:100%;height:100%;border:0;border-radius:0 0 16px 16px}
</style>
<div class="modal fade modal-lista-vendas" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Lista de Vendas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <iframe class="iframe-lista" src="about:blank"></iframe>
      </div>
    </div>
  </div>
  </div>
<div class="modal fade modal-fluxo" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Fluxo Diário</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <iframe class="iframe-lista" src="about:blank"></iframe>
      </div>
    </div>
  </div>
  </div>
<div class="modal fade modal-devolucao" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Devolução</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <iframe class="iframe-lista" src="about:blank"></iframe>
      </div>
    </div>
  </div>
  </div>
<div class="modal fade modal-lista-prevendas" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Lista de Pré-vendas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <iframe class="iframe-lista" src="about:blank"></iframe>
      </div>
    </div>
  </div>
  </div>
<div class="modal fade modal-lista-trocas" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Lista de Trocas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <iframe class="iframe-lista" src="about:blank"></iframe>
      </div>
    </div>
  </div>
  </div>
@endsection