@extends('adminlte::page')

@section('title', 'Fechamento de caixa')

@section('content_header')
    <div class="row">
        <div class="col-md-12 col-12">
            <h1>Fechamento de Caixa</h1>
        </div>
    </div>
@stop

@section('content')
@if(Session::has('success'))
        @php
            $data = Session::get('success');
        @endphp

        @if (is_array($data))
            @foreach ($data as $msg)
                <div class="alert alert-success" role="alert">
                    <i class="fa fa-check"></i>
                    {{ $msg }}
                </div>
            @endforeach
        @else
            <div class="alert alert-success" role="alert">
                <i class="fa fa-check"></i>
                {{ $data }}
            </div>
        @endif
    @endif

    @if(Session::has('error'))
        @php
            $data = Session::get('error');
        @endphp

        @if (is_array($data))
            @foreach ($data as $msg)
                <div class="alert alert-danger" role="alert">
                    <i class="fa fa-times"></i>
                    {{ $msg }}
                </div>
            @endforeach
        @else
            <div class="alert alert-danger" role="alert">
                <i class="fa fa-times"></i>
                {{ $data }}
            </div>
        @endif
    @endif
    <div class="card">
        <div class="card-header">
            @if(($ultimoCaixa->user_operador ?? null) == $user->id)
                <div class="col-md-6">
                    <h5 class="card-title">Turno</h5>  
                </div>
            @else
                <div class="col-md-6">
                    <h5 class="card-title">Turno</h5>
                </div>
                @if(isset($ultimoCaixa))
                <form method="POST" id="formOperador" action="{{ route( 'Caixa.operador', $ultimoCaixa->id) }}">
                    @method('PUT')
                    @csrf
                    <div class="col-md-12 col-12 text-right" style="text-align: right;">
                        <button type="button" id="btnoperador" class="btn btn-primary ">
                            {{ __('Alterar de Operador') }}
                        </button>
                    </div> 
                </form>
                @endif    
            @endif 
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6 col-12">
                    <label>Turno: {{ $ultimoCaixa ? $ultimoCaixa->cod_caixa : NULL }}</label>
                </div>
                <div class="col-md-6 col-12">
                    <label>Início: {{ $UltimaAbertura ? \Carbon\Carbon::parse($UltimaAbertura)->format('d/m/y H:i:s') : NULL }}</label>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-12">
                    <label>Abertura por: {{ $User_abertura ? $User_abertura : NULL }}</label>
                </div>
                @if($situacaoCaixa == 1)
                    <div class="col-md-6 col-12">
                        <label>Final: {{ $UltimoFechamento ? \Carbon\Carbon::parse($UltimoFechamento)->format('d/m/y H:i:s') : NULL }}</label>
                    </div>
                @else
                    <div class="col-md-6 col-12">
                        <label>Final:</label>
                    </div>
                @endif
            </div>
            <div class="row">
                <div class="col-md-6 col-12">
                    <label>Operador: {{ $User_operador ? $User_operador : NULL }}</label>
                </div>

                <div class="col-md-6 col-12 btn-left">
                    <label>Status:</label>
                    @if($situacaoCaixa == 1 || is_null($situacaoCaixa))
                        <a  class="btn btn-danger">
                            Fechado
                        </a>
                    @else
                        <a  class="btn btn-success">
                            Aberto
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <br>
    <div class="row mb-3">
        <div class="col-md-12">
            @if(!$ultimoCaixa || $situacaoCaixa === 1)
                <a class="btn btn-success btn-lg btn-block btn-square" data-toggle="modal" data-target="#AberturaModal">
                    <i class="fas fa-check"></i><br>Abertura de Caixa
                </a>
            @else
                <a class="btn btn-danger btn-lg btn-block btn-square" data-toggle="modal" data-target="#FechamentoModal">
                    <i class="fas fa-times"></i><br>Fechamento de Caixa
                </a>
            @endif
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-md-6">
            <a class="btn btn-primary btn-lg btn-block mb-1 btn-square {{ $situacaoCaixa === 1 ? 'disabled' : '' }}" data-toggle="modal" data-target="#RetiradaCaixaModal">
                <br>Retirada de Caixa
            </a>
        </div>
        <div class="col-md-6">
            <a class="btn btn-primary btn-lg btn-block mb-1 btn-square {{ $situacaoCaixa === 1 ? 'disabled' : '' }}" data-toggle="modal" data-target="#ReforçoCaixaModal">
                <br>Reforço de Caixa
            </a>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-md-6">
            <a class="btn btn-primary btn-lg btn-block mb-1 btn-square" data-toggle="modal" data-target="#ValorCaixaModal">
                <br>Valor em Caixa  
            </a>
        </div>
        <div class="col-md-6">
            <a class="btn btn-primary btn-lg btn-block mb-1 btn-square" data-toggle="modal" data-target="#HistoricoCaixaModal">
                <br>Histórico de Caixa
            </a>
        </div>
    </div>

    <!--Modal Abetura -->
    <form method="POST" id="formAbertura" action="{{ route('Caixa.store') }}">
        @method('POST')
        @csrf
        <div class="modal" tabindex="-1" role="dialog" id="AberturaModal">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Abertura de Caixa</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row mb-3">
                            <div class="col-6">
                                <strong>Turno:</strong> {{ $novoTurno }}
                                <input type="hidden" name="turno" value="{{ $novoTurno }}">
                            </div>
                            <div class="col-6">
                                <strong>Data:</strong> <span id="datahora"></span>
                                <input type="hidden" name="datahora" id="inputDataHora">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-6">
                                <strong>Operador:</strong> {{ $operador }}
                                <input type="hidden" name="operador" value="{{ $operador }}"> 
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-6">
                                Troco Inicial
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <label>Dinheiro:</label>
                                <input id="valor_dinheiro" type="text" class="form-control @error('valor_dinheiro') is-invalid @enderror" name="valor_dinheiro" value="{{ old('valor_dinheiro', '0,00') }}"  autocomplete="valor_dinheiro" oninput="formatarValor(this)" onblur="if(this.value == '') this.value = '0,00';" autofocus>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="btnabertura" class="btn btn-success" data-dismiss="modal">Confirmar</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                    </div>
                </div>
            </div>
        </div>
    </form>   

    <!--Modal Fechamento -->
    @if(isset($ultimoCaixa))
    <form method="POST" id="formFechamento" action="{{ route( 'Caixa.update', $ultimoCaixa->id) }}">
        @method('PATCH')
        @csrf
        <div class="modal" tabindex="-1" role="dialog" id="FechamentoModal">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Abertura de Caixa</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row mb-3">
                            <div class="col-6">
                                <strong>Turno:</strong> {{ $ultimoCaixa ? $ultimoCaixa->cod_caixa : NULL }}
                                <input type="hidden" name="turno" value="{{ $novoTurno }}">
                            </div>
                            <div class="col-6">
                                <strong>Inicio:</strong> {{ $UltimaAbertura ? \Carbon\Carbon::parse($UltimaAbertura)->format('d/m/y H:i:s') : NULL }}
                                <input type="hidden" name="datahora">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-6">
                                <strong>Operador:</strong> {{ $operador }}
                                <input type="hidden" name="operador" value="{{ $operador }}"> 
                            </div>
                            <div class="col-6">
                                <strong>Final:</strong> <span id="datahoraFechamento"></span>
                                <input type="hidden" name="datahoraFechamento" id="inputDataHoraFechamento">
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-6">
                                Retirada Final
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <label>Dinheiro:</label>
                                <input id="valor_dinheiro_fechamento" type="text" class="form-control @error('valor_dinheiro_fechamento') is-invalid @enderror" name="valor_dinheiro_fechamento" value="{{ old('valor_dinheiro_fechamento', '0,00') }}" autocomplete="valor_dinheiro_fechamento" oninput="formatarValor(this); calcularDiferenca();" onblur="if(this.value == '') this.value = '0,00';" autofocus>
                            </div>
                            <div class="col-md-4">
                                <label>Caixa:</label>
                                <input id="valor_caixa" type="text" class="form-control" name="valor_caixa" value="{{ old('valor_caixa', number_format($ultimoCaixa->valor_caixa, 2, ',', '.')) }}" readonly>
                            </div>
                            <div class="col-md-4">
                                <label>Diferença:</label>
                                <input id="valor_diferenca" type="text" class="form-control" name="valor_diferenca" value="{{ old('valor_diferenca', '0,00') }}" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="btnfechamento" class="btn btn-success" data-dismiss="modal">Confirmar</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    @endif
    
    <!--Modal Retirada de Caixa -->
    @if(isset($ultimoCaixa))
    <form method="POST" id="formRetirada" action="{{ route( 'Caixa.retirada', $ultimoCaixa->id) }}">
        @method('PUT')
        @csrf
        <div class="modal" tabindex="-1" role="dialog" id="RetiradaCaixaModal">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Retirada de Caixa</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row mb-3">
                            <div class="col-6">
                                <strong>Operador:</strong> {{ $operador }}
                                <input type="hidden" name="operador" value="{{ $operador }}"> 
                            </div>
                            <div class="col-6">
                                <strong>Data:</strong> <span id="datahoraretirada"></span>
                                <input type="hidden" name="datahoraretirada" id="inputDataHoraretirada">
                            </div>
                        </div>
                        <hr>
                        <div class="row mb-3">
                            <div class="col-6">
                                Informe o valor que deseja da Retirar de Caixa
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <label>Observação:</label><span>(Opcional)</span>
                                <input id="observacao_retirada" type="text" class="form-control @error('observacao_retirada') is-invalid @enderror" name="observacao_retirada" value="{{ old('observacao_retirada') }}" autocomplete="observacao_retirada" autofocus>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <label>Valor:</label>
                                <input id="valor_retidada" type="text" class="form-control" name="valor_retidada" value="{{ old('valor_retidada', '0,00') }}" oninput="formatarValor(this)" onblur="if(this.value == '') this.value = '0,00';" >
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="btnretirada" class="btn btn-success" data-dismiss="modal">Confirmar</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    @endif

    <!--Modal Reforço de Caixa -->
    @if(isset($ultimoCaixa))
    <form method="POST" id="formReforco" action="{{ route( 'Caixa.reforco', $ultimoCaixa->id) }}">
        @method('PUT')
        @csrf
        <div class="modal" tabindex="-1" role="dialog" id="ReforçoCaixaModal">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Reforço de Caixa</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row mb-3">
                            <div class="col-6">
                                <strong>Operador:</strong> {{ $operador }}
                                <input type="hidden" name="operador" value="{{ $operador }}"> 
                            </div>
                            <div class="col-6">
                                <strong>Data:</strong> <span id="datahorareforco"></span>
                                <input type="hidden" name="datahorareforco" id="inputDataHorareforco">
                            </div>
                        </div>
                        <hr>
                        <div class="row mb-3">
                            <div class="col-6">
                                Informe o valor que deseja do Reforço de Caixa
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <label>Observação:</label><span>(Opcional)</span>
                                <input id="observacao_reforco" type="text" class="form-control @error('observacao_reforco') is-invalid @enderror" name="observacao_reforco" value="{{ old('observacao_reforco') }}" autocomplete="observacao_reforco" autofocus>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <label>Valor:</label>
                                <input id="valor_reforco" type="text" class="form-control" name="valor_reforco" value="{{ old('valor_reforco', '0,00') }}" oninput="formatarValor(this)" onblur="if(this.value == '') this.value = '0,00';" >
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="btnreforco" class="btn btn-success" data-dismiss="modal">Confirmar</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    @endif
    
    <!--Modal Valor de Caixa -->
    <div class="modal" tabindex="-1" role="dialog" id="ValorCaixaModal">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Caixa Detalhado</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="data_caixa">Data:</label>
                            <input type="date" class="form-control" id="data_caixa" name="data_caixa" value="{{ $data_inicio }}">
                        </div>
                        <div class="form-group col-md-3">
                            <label >Turno</label>
                            <select id="selectCodCaixa" class="form-control"></select>
                        </div>
                        
                        <div class="form-group col-md-3 align-self-end">
                            <button id="buscarCaixa"  type="button" class="btn btn-primary">Buscar</button>
                        </div>
                    </div>
                    <div class="table-responsive-sm">
                        <table class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th scope="col">Tipo de Pgto.</th>
                                    <th scope="col">Turno</th>
                                    <th scope="col">Total Turnos</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row">Operador</th>
                                    <td colspan="2" id="operadorTotal">Nenhum registro</td>
                                </tr>
                                <tr>
                                    <th></th>
                                </tr>
                                <tr>
                                    <th scope="row">Abertura</th>
                                    <td id="aberturaValor">Nenhum registro</td>
                                    <td id="aberturaValorTotal"></td>
                                </tr>
                                <tr>
                                    <th scope="row">Dinheiro</th>
                                    <td  id="dinheiroValor">Nenhum registro</td>
                                    <td id="dinheiroValorTotal"></td>
                                </tr>
                                <tr>
                                    <th scope="row">Reforço</th>
                                    <td id="reforcoValor">Nenhum registro</td>
                                    <td id="reforcoValorTotal"></td>
                                </tr>
                                <tr>
                                    <th></th>
                                </tr>
                                <tr>
                                    <th scope="row">Troco</th>
                                    <td  id="trocoValor">Nenhum registro</td>
                                    <td id="trocoValorTotal"></td>
                                </tr>
                                <tr>
                                    <th scope="row">Cancelamento</th>
                                    <td id="cancelamentoValor">Nenhum registro</td>
                                    <td id="cancelamentoValorTotal"></td>
                                </tr>
                                <tr>
                                    <th scope="row">Retirada</th>
                                    <td id="retiradaValor">Nenhum registro</td>
                                    <td id="retiradaValorTotal"></td>
                                </tr>
                                <tr>
                                    <th></th>
                                </tr>
                                <tr>
                                    <th scope="row">Valor em caixa</th>
                                    <td id="valorEmCaixaValor">Nenhum registro</td>
                                    <td id="ValoremCaixaTotal"></td>
                                </tr>
                                <tr>
                                    <th scope="row">Fechamento</th>
                                    <td id="fechamentoValor">Nenhum registro</td>
                                    <td id="fechamentoValorTotal"></td>
                                </tr>
                                <tr>
                                    <th scope="row">Diferença</th>
                                    <td id="diferencaValor">Nenhum registro</td>
                                    <td id="diferencaValorTotal"></td>
                                </tr>
                                <tr>
                                    <th></th>
                                </tr>
                                <tr>
                                <th scope="row">Pix</th>
                                    <td id="pixValor">Nenhum registro</td>
                                    <td id="pixValorTotal"></td>
                                </tr>
                                <tr>
                                    <th scope="row">Cheque</th>
                                    <td id="chequeValor">Nenhum registro</td>
                                    <td id="chequeValorTotal"></td>
                                </tr>
                                <tr>
                                    <th scope="row">Deposito</th>
                                    <td id="depositoValor">Nenhum registro</td>
                                    <td id="depositoValorTotal"></td>
                                </tr>
                                <tr>
                                    <th></th>
                                </tr>
                                <tr>
                                    <th scope="row">Cartão Débito</th>
                                    <td id="debitoValor">Nenhum registro</td>
                                    <td id="debitoValorTotal"></td>
                                </tr>
                                <tr>
                                    <th scope="row">Débito Cancelado</th>
                                    <td id="debitoCancelamentoValor">Nenhum registro</td>
                                    <td id="cancelamentodebitoValorTotal"></td>
                                </tr>
                                <tr>
                                    <th scope="row">Total Débito</th>
                                    <td id="debitoTotalValor">Nenhum registro</td>
                                    <td id="ValorTotalDebito"></td>
                                </tr>
                                <tr>
                                    <th></th>
                                </tr>
                                <tr>
                                    <th scope="row">Cartão Crédito</th>
                                    <td id="creditoValor">Nenhum registro</td>
                                    <td id="creditoValorTotal"></td>
                                </tr>
                                <tr>
                                    <th scope="row">Crédito Cancelado</th>
                                    <td id="creditoCancelamentoValor">Nenhum registro</td>
                                    <td id="cancelamentocreditoValorTotal"></td>
                                </tr>
                                <tr>
                                    <th scope="row">Total Crédito</th>
                                    <td id="creditoTotalValor">Nenhum registro</td>
                                    <td id="ValorTotalCredito"></td>
                                </tr>
                                <tr>
                                    <th></th>
                                </tr>
                                <tr>
                                    <th scope="row">Total Cartão</th>
                                    <td id="totalCartaoValor">Nenhum registro</td>
                                    <td id="ValorTotalCartao"></td>
                                </tr>
                                <tr>
                                    <th scope="row">Vendas do Dia</th>
                                    <td id="vendasDiaValor">Nenhum registro</td>
                                    <td id="ValorTotalVendas"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>
   

    <!--Modal Historico de Caixa -->
    <div class="modal" tabindex="-1" role="dialog" id="HistoricoCaixaModal">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Histórico de Caixa</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="formHistoricoCaixa">
                        <div class="form-row">
                            <div class="form-group col-md-3">
                                <label for="data_inicio">Data Início</label>
                                <input type="date" class="form-control" id="data_inicio" name="data_inicio" value="{{ $data_inicio }}">
                            </div>
                            <div class="form-group col-md-3">
                                <label for="data_fim">Data Fim</label>
                                <input type="date" class="form-control" id="data_fim" name="data_fim" value="{{ $data_fim }}">
                            </div>
                            <div class="form-group col-md-3">
                                <label for="cod_caixa">Turno</label>
                                <input type="number" class="form-control" id="cod_caixa" name="cod_caixa" value="{{ request('cod_caixa') }}">
                            </div>
                            <div class="form-group col-md-3 align-self-end">
                                <button type="submit" class="btn btn-primary">Buscar</button>
                            </div>
                        </div>
                    </form>

                    <div class="table-responsive-sm">
                        <table class="table table-striped table-bordered" id="tabelaCaixaHistorico">
                            <thead>
                                <tr>
                                    <th scope="col">Turno</th>
                                    <th scope="col">Venda</th>
                                    <th scope="col">Descrição</th>
                                    <th scope="col">Valor Mov</th>
                                    <th scope="col">Valor Caixa</th>
                                    <th scope="col">Forma PGTO.</th>
                                    <th scope="col">Data / Hora</th>
                                    <th scope="col">Operador</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Dados serão preenchidos via AJAX -->
                                <tr>
                                    <th scope="row" colspan="8">Nenhum registro encontrado</th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>
@stop

@section('css')

@stop

@section('js')
    <script>

        function formatarDataHora() {
            var agora = new Date();
            var dia = String(agora.getDate()).padStart(2, '0');
            var mes = String(agora.getMonth() + 1).padStart(2, '0'); // Janeiro é 0
            var ano = agora.getFullYear();
            var horas = String(agora.getHours()).padStart(2, '0');
            var minutos = String(agora.getMinutes()).padStart(2, '0');
            var segundos = String(agora.getSeconds()).padStart(2, '0');
    
            return `${dia}/${mes}/${ano} ${horas}:${minutos}:${segundos}`;
        }

        // Quando o modal de abertura for aberto, atualize a data e hora
        $('#AberturaModal').on('show.bs.modal', function () {
            document.getElementById('datahora').textContent = formatarDataHora();
        });

        $('#RetiradaCaixaModal').on('show.bs.modal', function () {
            document.getElementById('datahoraretirada').textContent = formatarDataHora();
        });

        $('#ReforçoCaixaModal').on('show.bs.modal', function () {
            document.getElementById('datahorareforco').textContent = formatarDataHora();
        });

        $('#FechamentoModal').on('show.bs.modal', function () {
            document.getElementById('datahoraFechamento').textContent = formatarDataHora();
            calcularDiferenca();
        });

        function formatValue(value) {
            // Se o valor for null ou undefined, retorna 'Nenhum registro'
            if (value === null || value === undefined) {
                return 'Nenhum registro';
            }
           
            return parseFloat(value).toFixed(2).replace('.', ',');
        }

        //Valor de caixa

        $(document).ready(function() {
            var responseData = []; // Variável para armazenar os dados retornados da requisição

            // Preenche automaticamente a data do dia atual
            var hoje = new Date();
            var dia = String(hoje.getDate()).padStart(2, '0');
            var mes = String(hoje.getMonth() + 1).padStart(2, '0'); // Mês começa do zero
            var ano = hoje.getFullYear();
            $('#data_caixa').val(`${ano}-${mes}-${dia}`);

            $('#buscarCaixa').on('click', function() {
                var data = $('#data_caixa').val();

                $.ajax({
                    url: '{{ route("Caixa.buscarValorCaixa") }}',
                    type: 'GET',
                    data: { data: data },
                    success: function(response) {
                        // Limpa o dropdown de códigos de caixa
                        $('#selectCodCaixa').empty();

                        responseData = response.data; // Armazena os dados para uso posterior
                        var totals = response.totals; // Aqui mantém o total que você já havia feito

                        if (responseData.length === 0 || !responseData.some(caixa => caixa.cod_caixa)) {
                            
                            Swal.fire({
                                icon: 'warning',
                                title: 'Nenhum Registro',
                                text: 'Não foi feita a abertura ou fechamento de caixa nesse dia.',
                            });
                            return;
                        }

                       

                        $('#aberturaValorTotal').text(formatValue(totals.total_abertura));
                        $('#dinheiroValorTotal').text(formatValue(totals.total_dinheiro));
                        $('#reforcoValorTotal').text(formatValue(totals.total_reforco));
                        $('#retiradaValorTotal').text(formatValue(totals.total_retirada));
                        $('#trocoValorTotal').text(formatValue(totals.total_troco));
                        $('#cancelamentoValorTotal').text(formatValue(totals.total_cancelamento));
                        $('#ValoremCaixaTotal').text(formatValue(totals.total_valor_em_caixa));
                        $('#fechamentoValorTotal').text(formatValue(totals.total_fechamento));
                        $('#diferencaValorTotal').text(formatValue(totals.total_diferenca));
                        $('#pixValorTotal').text(formatValue(totals.total_pix));
                        $('#chequeValorTotal').text(formatValue(totals.total_cheque));
                        $('#depositoValorTotal').text(formatValue(totals.total_deposito));
                        $('#debitoValorTotal').text(formatValue(totals.total_debito));
                        $('#cancelamentodebitoValorTotal').text(formatValue(totals.total_debito_cancelamento));
                        $('#ValorTotalDebito').text(formatValue(totals.total_debito_total));
                        $('#creditoValorTotal').text(formatValue(totals.total_credito));
                        $('#cancelamentocreditoValorTotal').text(formatValue(totals.total_credito_cancelamento));
                        $('#ValorTotalCredito').text(formatValue(totals.total_credito_total));
                        $('#ValorTotalCartao').text(formatValue(totals.total_cartao));
                        $('#ValorTotalVendas').text(formatValue(totals.total_vendas_dia));

                        if (response.data.length > 0) {
                            response.data.forEach(function(caixa) {
                                $('#selectCodCaixa').append(
                                    `<option value="${caixa.cod_caixa}">${caixa.cod_caixa}</option>`
                                );
                            });

                            // Exibe os dados do primeiro caixa como padrão
                            mostrarValores(response.data[0]);
                        } else {
                            // Preencher os campos com 'Nenhum registro'
                            preencherCamposComRegistroDefault();
                        }
                    },
                    error: function(xhr) {
                        console.error('Erro ao buscar valores do caixa:', xhr);
                    }
                });
            });

            $('#selectCodCaixa').on('change', function() {
                var selectedCodCaixa = $(this).val();


                if (responseData) {
                    var caixaSelecionada = responseData.find(caixa => caixa.cod_caixa == selectedCodCaixa);
        
                    if (caixaSelecionada) {
                         mostrarValores(caixaSelecionada);
                    } else {
                        console.error('Caixa selecionada não encontrada:', selectedCodCaixa);
                    }
                } else {
                    console.error('Dados da resposta não disponíveis');
                }
            });
            function mostrarValores(caixa) {
                $('#turno').text(caixa.cod_caixa);
                $('#operadorTotal').text(caixa.operador);
                $('#aberturaValor').text(formatValue(caixa.abertura));
                $('#dinheiroValor').text(formatValue(caixa.dinheiro));
                $('#reforcoValor').text(formatValue(caixa.reforco));
                $('#trocoValor').text(formatValue(caixa.troco));
                $('#cancelamentoValor').text(formatValue(caixa.cancelamento));
                $('#retiradaValor').text(formatValue(caixa.retirada));
                $('#valorEmCaixaValor').text(formatValue(caixa.valor_em_caixa));
                $('#fechamentoValor').text(formatValue(caixa.fechamento));
                $('#diferencaValor').text(formatValue(caixa.diferenca));
                $('#pixValor').text(formatValue(caixa.pix));
                $('#chequeValor').text(formatValue(caixa.cheque));
                $('#depositoValor').text(formatValue(caixa.deposito));
                $('#debitoValor').text(formatValue(caixa.debito));
                $('#debitoCancelamentoValor').text(formatValue(caixa.debito_cancelamento));
                $('#debitoTotalValor').text(formatValue(caixa.debito_total));
                $('#creditoValor').text(formatValue(caixa.credito));
                $('#creditoCancelamentoValor').text(formatValue(caixa.credito_cancelamento));
                $('#creditoTotalValor').text(formatValue(caixa.credito_total));
                $('#totalCartaoValor').text(formatValue(caixa.total_cartao));
                $('#vendasDiaValor').text(formatValue(caixa.vendas_dia));
            }

            function preencherCamposComRegistroDefault() {
                $('#operadorTotal').text('Nenhum registro');
                $('#aberturaValor').text('Nenhum registro');
                $('#dinheiroValor').text('Nenhum registro');
                $('#reforcoValor').text('Nenhum registro');
                $('#trocoValor').text('Nenhum registro');
                $('#cancelamentoValor').text('Nenhum registro');
                $('#retiradaValor').text('Nenhum registro');
                $('#valorEmCaixaValor').text('Nenhum registro');
                $('#fechamentoValor').text('Nenhum registro');
                $('#diferencaValor').text('Nenhum registro');
                $('#pixValor').text('Nenhum registro');
                $('#chequeValor').text('Nenhum registro');
                $('#depositoValor').text('Nenhum registro');
                $('#debitoValor').text('Nenhum registro');
                $('#debitoCancelamentoValor').text('Nenhum registro');
                $('#debitoTotalValor').text('Nenhum registro');
                $('#creditoValor').text('Nenhum registro');
                $('#creditoCancelamentoValor').text('Nenhum registro');
                $('#creditoTotalValor').text('Nenhum registro');
                $('#totalCartaoValor').text('Nenhum registro');
                $('#vendasDiaValor').text('Nenhum registro');
            }
        });

        //Busca caixa historico

        function formatDate(dataString) {
            const data = new Date(dataString);
            const dia = String(data.getDate()).padStart(2, '0');
            const mes = String(data.getMonth() + 1).padStart(2, '0');
            const ano = String(data.getFullYear()).slice(-2);
            const horas = String(data.getHours()).padStart(2, '0');
            const minutos = String(data.getMinutes()).padStart(2, '0');
    
            return `${dia}/${mes}/${ano} ${horas}:${minutos}`;
        }

        $(document).ready(function() {
            // Função para capturar o submit do formulário e enviar via AJAX
            $('#formHistoricoCaixa').on('submit', function(e) {
                e.preventDefault();

                // Pega os dados do formulário
                var data_inicio = $('#data_inicio').val();
                var data_fim = $('#data_fim').val();
                var cod_caixa = $('#cod_caixa').val();

                // Envia a requisição AJAX
                $.ajax({
                    url: '{{ route("Caixa.buscarHistorico") }}',
                    type: 'GET',
                    data: {
                        data_inicio: data_inicio,
                        data_fim: data_fim,
                        cod_caixa: cod_caixa
                    },
                    success: function(response) {
                        console.log(response);
                        // Limpa a tabela atual
                        $('#tabelaCaixaHistorico tbody').empty();

                        // Verifica se tem dados
                        if (response.caixahistoricos.length === 0) {
                            $('#tabelaCaixaHistorico tbody').append('<tr><td colspan="8">Nenhum registro encontrado</td></tr>');
                        } else {
                            // Preenche a tabela com os novos dados
                            $.each(response.caixahistoricos, function(index, caixahistorico) {
                                $('#tabelaCaixaHistorico tbody').append(`
                                    <tr>
                                        <th scope="row">${caixahistorico.cod_caixa}</th>
                                        <td>${caixahistorico.salecodigo ? caixahistorico.salecodigo : ''}</td>
                                        <td>${caixahistorico.descricao}</td>
                                        
                                        <td>${(formatValue(caixahistorico.valor))}</td>
                                        <td>${(formatValue(caixahistorico.valor_caixa ))}</td>
                                        <td>${caixahistorico.forma_pgto ? caixahistorico.forma_pgto : ''}</td>
                                        <td>${(formatDate(caixahistorico.data))}</td>
                                        <td>${caixahistorico.operador_nome || ''}</td>
                                    </tr>
                                `);
                            });
                        }
                    },
                    error: function(xhr) {
                        console.error('Erro ao buscar o histórico de caixa:', xhr);
                    }
                });
            });
        });
        

        function formatarValor(input) {
            let valor = input.value.replace(/\D/g, ''); // Remove tudo que não for dígito
            valor = (valor / 100).toFixed(2); // Converte para um número decimal
            valor = valor.replace('.', ','); // Troca ponto por vírgula
            valor = valor.replace(/\B(?=(\d{3})+(?!\d))/g, "."); // Adiciona ponto como separador de milhar
            input.value = valor;
        }

        function calcularDiferenca() {
            const valorDinheiro = parseFloat(document.getElementById('valor_dinheiro_fechamento').value.replace(/\./g, '').replace(',', '.')) || 0;
            const valorCaixa = parseFloat(document.getElementById('valor_caixa').value.replace(/\./g, '').replace(',', '.')) || 0;
    
            // Calcula a diferença
            const diferenca = valorCaixa - valorDinheiro;
    
            // Formata a diferença para o formato correto e exibe no campo de diferença
            document.getElementById('valor_diferenca').value = diferenca.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        }

        //Configuração de hora

        document.addEventListener('DOMContentLoaded', function() {
            const now = new Date();
            const dataHoraFormatada = now.toISOString().slice(0, 19).replace('T', ' ');
            document.getElementById('datahora').textContent = now.toLocaleString('pt-BR', {
                dateStyle: 'short',
                timeStyle: 'short'
            });
            document.getElementById('inputDataHora').value = dataHoraFormatada;
        });

    
        document.addEventListener('DOMContentLoaded', function() {
            const now = new Date();
            const dataHoraFormatada = now.toISOString().slice(0, 19).replace('T', ' ');
            document.getElementById('datahoraFechamento').textContent = now.toLocaleString('pt-BR', {
                dateStyle: 'short',
                timeStyle: 'short'
            });
            document.getElementById('inputDataHoraFechamento').value = dataHoraFormatada;
        });

        document.addEventListener('DOMContentLoaded', function() {
            const now = new Date();
            const dataHoraFormatada = now.toISOString().slice(0, 19).replace('T', ' ');
            document.getElementById('datahoraretirada').textContent = now.toLocaleString('pt-BR', {
                dateStyle: 'short',
                timeStyle: 'short'
            });
            document.getElementById('inputDataHoraretirada').value = dataHoraFormatada;
        });

        document.addEventListener('DOMContentLoaded', function() {
            const now = new Date();
            const dataHoraFormatada = now.toISOString().slice(0, 19).replace('T', ' ');
            document.getElementById('datahorareforco').textContent = now.toLocaleString('pt-BR', {
                dateStyle: 'short',
                timeStyle: 'short'
            });
            document.getElementById('inputDataHorareforco').value = dataHoraFormatada;
        });

        //Confirmação para enviar para o Controller

        document.getElementById('btnabertura').addEventListener('click', function(event) {
            event.preventDefault();

           
            Swal.fire({
                title: 'Confirmação',
                text: 'Deseja realmente fazer a abertura de caixa?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Confirmar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                
                    // Submete o formulário
                    document.getElementById('formAbertura').submit();
                }
            });
        
        });

        document.getElementById('btnretirada').addEventListener('click', function(event) {
            event.preventDefault();

           
            Swal.fire({
                title: 'Confirmação',
                text: 'Deseja realmente fazer a retirada de caixa?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Confirmar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                
                    // Submete o formulário
                    document.getElementById('formRetirada').submit();
                }
            });
        
        });

        document.getElementById('btnreforco').addEventListener('click', function(event) {
            event.preventDefault();

           
            Swal.fire({
                title: 'Confirmação',
                text: 'Deseja realmente fazer o Reforço de caixa?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Confirmar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                
                    // Submete o formulário
                    document.getElementById('formReforco').submit();
                }
            });
        
        });

        document.getElementById('btnfechamento').addEventListener('click', function(event) {
            event.preventDefault();

           
            Swal.fire({
                title: 'Confirmação',
                text: 'Deseja realmente fazer o Fechamento de caixa?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Confirmar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                
                    // Submete o formulário
                    document.getElementById('formFechamento').submit();
                }
            });
        
        });

        const btnOperador = document.getElementById('btnoperador');

        if (btnOperador) {
            btnOperador.addEventListener('click', function(event) {
                event.preventDefault();

                Swal.fire({
                    title: 'Confirmação',
                    text: 'Deseja realmente fazer a alteração do Operador?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Confirmar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        document.getElementById('formOperador').submit();
                    }
                });
            });
        }
        

      
    </script>
@stop