@extends('adminlte.app')

@section('content')
    <style>
      :root{
        --tfuel-primary:#0aa6c6;  /* ciano TFuel (aprox do layout atual) */
        --tfuel-dark:#0a2d3a;     /* azul petróleo */
        --tfuel-accent:#00b97c;   /* verde */
        --tfuel-warn:#f0ad4e;     /* âmbar */
        --tfuel-danger:#dc3545;   /* vermelho */
        --table-head:#eef3f6;
      }
      body { font-size: 0.86rem; }             /* menor que o anterior */
      .content-header h1 { font-weight: 700; color: var(--tfuel-dark); }
      .card-header { background:#fff; border-bottom:1px solid #dee2e6; }
      .btn-primary, .buttons-print.btn { background:var(--tfuel-primary); border-color:var(--tfuel-primary); }
      .btn-outline-primary { color:var(--tfuel-primary); border-color:var(--tfuel-primary); }
      .btn-outline-primary:hover{ background:var(--tfuel-primary); color:#fff; }
      .btn-danger { background:var(--tfuel-accent); border-color:var(--tfuel-accent); } /* “Gerar PDF” em verde TFuel */
      .badge-success { background:var(--tfuel-accent) !important; }
      .badge-warning { background:var(--tfuel-warn) !important; color:#222; }
      .badge-danger  { background:var(--tfuel-danger) !important; }
      .badge-secondary { background:#95a5a6 !important; }
      /* Tabela */
      #tabelashow { font-size:.86rem; }
      #tabelashow thead th {
        background:var(--table-head); color:#1f2937; border-color:#dfe7ec;
        font-weight:600; vertical-align:middle; white-space:nowrap;
      }
      #tabelashow tbody td { vertical-align:middle; white-space:nowrap; }
      .table-sm td, .table-sm th { padding:.36rem .45rem; }
      .text-num { text-align:right; }
      .badge-tight { font-size:.75rem; padding:.28rem .45rem; border-radius:.4rem; }
      .dt-buttons .btn { margin-right:.3rem; }
      .section-title {
        font-weight:600; color:var(--tfuel-dark); border-left:4px solid var(--tfuel-primary);
        padding-left:.5rem; margin: .75rem 0 .5rem;
      }
      /* Header com faixa TFuel opcional */
      .tfuel-strip{ background:linear-gradient(90deg, var(--tfuel-primary), var(--tfuel-accent)); height:4px; }
    </style>
  
<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">
                        @if(!$validar)
                            Folha de Caixa
                        @else
                            Validação Folha de Caixa
                        @endif
                    </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
    <x-folha_caixa.filtros :filtros="$filtros" :turnos="$turnos" :operadores="$operadores" :permissao="$permissao" :postos="$postos" :validar="$validar" />

    <div class="card mx-3 mt-3">
        <div class="card-header">
            <div class="row">  
                <div class="col-3">
                    Lista Folha de Caixa
                </div>
                <div class="col-9 text-right">
                    @if(!$validar)
                        <a href="{{ route('folha_de_caixa_create') }}" >
                            <button class="btn btn-primary" >Adicionar Folha de Caixa</button>
                        </a>
                    @endif
                </div>
            </div>
        </div>
        <div class="row m-2">
            
            <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>

<!-- 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>
    $(document).ready(function() {
        $('.btn-validar-ia').on('click', function(e) {
            e.preventDefault();
            $('#div-aguarde').removeClass('d-none');
            //desabilita Todos os botões para evitar múltiplos cliques
            $('.btn-validar-ia').prop('disabled', true);

            window.location.href = $(this).attr('href');
        });
    });
  
</script>

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

    $(document).ready(function () {

            const dataForm = '';
            const postoSelecionado = $('#posto_id').val();
            const data_inicio = $('#data_inicio').val();
            const data_fim = $('#data_fim').val();
            const turno = $('#turno').val();
            const operador_id = $('#operador_id').val();
            const validar = '{{ $validar}}';
            const validado = $('#validar').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_folhas_posto') }}",
                    method: 'GET',
                    data: dataForm + '&posto_id=' + posto.id + '&data_inicio=' + data_inicio + '&data_fim=' + data_fim + '&turno=' + turno + '&operador_id=' + operador_id + '&validar=' + validar + '&validado=' + validado,
                    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