@extends('adminlte.app')

@section('content')

<div class="content-wrapper pb-3">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Depósitos Folha de Caixa</h1>
                </div>
                <div class="col-sm-6">
            
                </div>
            </div>
        </div>
    </div>

    @if ($message = Session::get('success'))
    <div class="alert alert-success">
        <p>{{ $message }}</p>
    </div>
    @endif
    @if ($message = Session::get('error'))
        <div class="alert alert-danger">
            <p>{{ $message }}</p>
        </div>
    @endif
    <div class="card mx-3 mt-3">
        <div class="card-header">
            <div class="row">  
                <div class="col-3">
                    Filtros
                </div>
                <div class="col-9 text-right">
                  
                </div>
            </div>
        </div>
        <form method="GET" action="{{ route('validar_depositos_index') }}" >
                <div class="row m-2 p-2 align-items-end">

                    <div class="col-md-3">
                        <label for="posto_id" class="mr-2">Posto:</label>
                        <select name="posto_id" id="posto_id" class="form-control">
                            <option value="">Todos</option>
                            @foreach($postos as $posto)
                                <option value="{{ $posto->id }}" {{ request('posto_id') == $posto->id ? 'selected' : '' }}>{{ $posto->nome_posto }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="data_folha_caixa" class="mr-2">Data Folha de Caixa:</label>
                        <input type="date" name="data_folha_caixa" id="data_folha_caixa" class="form-control" value="{{ request('data_folha_caixa') }}">
                    </div>
                    <div class="col-md-3">
                        <label for="status_deposito" class="mr-2">Status Depósito:</label>
                        <select name="status_deposito" id="status_deposito" class="form-control">
                            <option value="">Todos</option>
                            <option value="pendente" {{ request('status_deposito') == 'pendente' ? 'selected' : '' }}>Pendente</option>
                            <option value="confirmado" {{ request('status_deposito') == 'confirmado' ? 'selected' : '' }}>Confirmado</option>
                            <option value="em_falta" {{ request('status_deposito') == 'em_falta' ? 'selected' : '' }}>Em Falta</option>
                            <option value="valor_divergente" {{ request('status_deposito') == 'valor_divergente' ? 'selected' : '' }}>Valor Divergente</option>
                        </select>
                    </div>
                    <div class="col-md-3 mt-4">
                        <button type="submit" class="btn btn-primary">Filtrar</button>
                    </div>
                    
                </div>
        </form>
    </div>

    <div class="card mx-3 mt-3">
        <div class="card-header">
            <div class="row">  
                <div class="col-3">
                    Lista de Depósitos Folha de Caixa
                </div>
                <div class="col-9 text-right">
                  
                </div>
            </div>
        </div>
        <div class="row m-2">
            <div class="col-sm-12 table-responsive">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Dia da Semana</th>
                            <th class="text-end">Valor</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($depositosPorDia as $item)
                            <tr>
                                <td>{{ $item['dia_semana'] }}</td>
                                <td class="text-end">{{ number_format($item['valor'], 2, ",", " ") }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            {{-- <x-folha_caixa_depositos.tabela_depositos :folhas="$folhas" /> --}}

            <div class="col-12" id="div-depositos-por-posto">
                    @foreach ($postos as $posto)
                        <div class="resultado-posto mb-3" id="posto-{{ $posto->id }}">
                            <strong>{{ $posto->nome_posto }}</strong>
                            <div class="conteudo"></div>
                        </div>
                    @endforeach
            </div>
        </div>
    </div>
</div>

<!-- Modal Valor Divergente -->
<div class="modal fade" id="modalValorDivergente" tabindex="-1" role="dialog" aria-labelledby="modalValorDivergenteLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalValorDivergenteLabel">Informar Valor Divergente</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="GET" action="{{ route('validar_depositos_valor_divergente') }}">
                <div class="modal-body">
                    <input type="hidden" name="id" id="formaPagamentoId" value="">
                    <div class="form-group">
                        <label for="valorDivergente">Valor Divergente</label>
                        <input type="number" step="0.01" class="form-control" name="valor_divergente" id="valorDivergente" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                    <button type="submit" class="btn btn-primary">Salvar</button>

                </div>
            </form>
        </div>
    </div>
</div>

<script>

    function passaId(id){
        document.getElementById('formaPagamentoId').value = id;
    }
</script>


<!-- DataTables  & Plugins -->
<script src={{ asset('/plugins/datatables/jquery.dataTables.min.js') }}></script>
<script src={{ asset('/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}></script>
<script src={{ asset('/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}></script>
<script src={{ asset('/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}></script>
<script src={{ asset('/plugins/datatables-buttons/js/dataTables.buttons.min.js') }}></script>
<script src={{ asset('/plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}></script>
<script src={{ asset('/plugins/jszip/jszip.min.js') }}></script>
<script src={{ asset('/plugins/pdfmake/pdfmake.min.js') }}></script>
<script src={{ asset('/plugins/pdfmake/vfs_fonts.js') }}></script>
<script src={{ asset('/plugins/datatables-buttons/js/buttons.html5.min.js') }}></script>
<script src={{ asset('/plugins/datatables-buttons/js/buttons.print.min.js') }}></script>
<script src={{ asset('/plugins/datatables-buttons/js/buttons.colVis.min.js') }}></script>

<script>
    let todosPostos = @json($postos);

    $(document).ready(function () {

            const dataForm = '';
            const postoSelecionado = $('#posto_id').val();
            const statusDepositoSelecionado = $('#status_deposito').val();
            const dataFolhaCaixaSelecionado = $('#data_folha_caixa').val();

            // Limpa antes de carregar
            $('#div-depositos-por-posto').empty();

            let postosParaConsultar = [];

            if (postoSelecionado === 'Todos' || postoSelecionado === '') {
                postosParaConsultar = todosPostos;
            } else {
                const encontrado = todosPostos.find(p => p.id == postoSelecionado);
                if (encontrado) {
                    postosParaConsultar.push(encontrado);
                }
            }

            postosParaConsultar.forEach(posto => {
                // Cria um container para o posto
                const divId = `posto-${posto.id}`;
                $('#div-depositos-por-posto').append(`
                    <div id="${divId}" class="mb-3">
                        <div class="conteudo">
                            <p class="text-lg bg-primary  p-2 mb-0 mx-2">
                                <i class="fas fa-spinner fa-spin"></i> Aguarde, carregando posto ${posto.nome_posto}...
                            </p>
                        </div>
                    </div>
                `);

                const container = $(`#${divId} .conteudo`);

                $.ajax({
                    url: "{{ route('consultar_depositos_posto') }}",
                    method: 'GET',
                    data: dataForm + '&posto_id=' + posto.id + '&status_deposito=' + statusDepositoSelecionado + '&data_folha_caixa=' + dataFolhaCaixaSelecionado,
                    success: function (response) {
                        container.html(response);
                    },
                    error: function () {
                        container.html('<div class="alert alert-danger">Erro ao buscar dados para o posto ' + posto.nome_posto + '.</div>');
                    }
                });
            });

    });
    </script>
@endsection