@extends('adminlte.app')

@section('content')

    <div class="content-wrapper">
        @if ($message = Session::get('success'))
            <div class="alert alert-success">
                <p>{{ $message }}</p>
            </div>
        @endif
       
        <div class="content-header">
            <div class="container-fluid" >
                <form id="formConsulta" method="GET" action="{{ route('dashboard_postos_gerencial_index') }}">
                     <div class="row mb-2 align-items-end" id="divIntervalos">
                        
                        <div class="col-sm-3">
                            <label for="intervalo_data" class="form-label">Intervalo</label>
                            <select name="intervalo_data" id="intervalo_data" class=" form-control form-control-lg" >
                                <option @if(isset($intervalo_data) && $intervalo_data =="Personalizado") selected @endif value="Personalizado">Personalizado</option>
                                <option @if(isset($intervalo_data) && $intervalo_data =="0") selected @endif value="0">Este Mês</option>
                                <option @if(isset($intervalo_data) && $intervalo_data =="1") selected @endif value="1">Mês Anterior</option>
                                <option @if(isset($intervalo_data) && $intervalo_data =="2") selected @endif value="2">Mesmo Mês Ano Anterior</option>
                                <option @if(isset($intervalo_data) && $intervalo_data =="3") selected @endif value="3">Este Trimestre</option>
                                <option @if(isset($intervalo_data) && $intervalo_data =="4") selected @endif value="4">Este Ano</option>
                                <option @if(isset($intervalo_data) && $intervalo_data =="5") selected @endif value="5">Trimestre Anterior</option>
                                <option @if(isset($intervalo_data) && $intervalo_data =="6") selected @endif value="6">Ano Anterior</option>
                            
                            </select> 
                        </div>
                        <div class="col-sm-3">
                            <label for="data_inicial" class="form-label">Data Inicial</label>
                            <input type="date" class="form-control form-control-lg" id="data_inicial" name="data_inicial" value="{{ $data_inicial ?? date('Y-m-01') }}" required>
                        </div>
                        <div class="col-sm-3">
                            <label for="data_final" class="form-label">Data Final</label>
                            <input type="date" class="form-control form-control-lg" id="data_final" name="data_final" value="{{ $data_final ?? date('Y-m-t') }}" required>
                        </div>
                        
                        <div class="col-sm-3">
                            <button type="submit" id="btnConsultar" class="btn btn-primary btn-lg mt-4" title="Consultar">
                                <i class="fas fa-search"></i> Consultar
                            </button>
                        </div>
                    </div>
                </form>
           
            </div>
        </div>
      {{-- <div class="row px-3 mr-0 text-sm">
        <div class="col-sm-12">
            <div class="table-responsive">
                <table class="table table-sm tabelashow" id="tabelashow">
                    <thead>
                        
                            <th class="text-center">
                                mes
                            </th>
                            <th class="text-center">
                                posto_nome
                            </th>
                            <th class="text-center">
                                gestor_posto
                            </th>
                            <th class="text-center">
                                familia_id
                            </th>
                            <th class="text-center">
                                familia
                            </th>
                            <th class="text-center">
                                sem_iva
                            </th>
                            <th class="text-center">
                                com_iva
                            </th>
                            
                    
                    </thead>
                    <tbody>
                        @foreach($check as $key=> $check)
                            <tr>
                                <td class="text-center">
                                    {{ $check->mes }}
                                </td>
                                <td class="text-center">
                                    {{ $check->posto_nome }}
                                </td>
                                <td class="text-center">
                                    {{ $check->gestor_posto }}
                                </td>
                                <td class="text-center">
                                    {{ $check->familia_id }}
                                </td>
                                <td class="text-center">
                                    {{ $check->familia }}
                                </td>
                                <td class="text-center">
                                    {{$check->sem_iva}}
                                </td>
                                <td class="text-center">
                                    {{$check->com_iva}}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

      </div> --}}
{{-- produtos --}}
        <div class="row px-3 mr-0 text-sm">

            <div class="col-sm-8 ">
                <x-dashboard_postos_gerencial.grafico-gestor :vendasLitros="$vendasLitros"  id="litros"/>
            </div>
            <div class="col-sm-4 ">
                <x-dashboard_postos_gerencial.tabela :vendas="$vendasLitros" tipo="Litros" rotulo="Gestores" id="litros"/>
            </div>
                
        </div>

        <div class="row px-3 mr-0 text-sm">

            <div class="col-sm-12 ">
                <x-dashboard_postos_gerencial.tabela-cruzada :vendas="$produtos" :rotulos="$gestoresPostos" tipo="Produtos" />
            </div>
           
        </div>

        <div class="row px-3 mr-0 text-sm">

            <div class="col-sm-12 ">
                <x-dashboard_postos_gerencial.grafico-euros-gestor tipo="Familias" :vendas="$familias" :rotulos="$gestoresPostos" />
            </div>
           
        </div>

        <div class="row px-3 mr-0 text-sm">

            <div class="col-sm-12 ">
                <x-dashboard_postos_gerencial.tabela-cruzada :vendas="$familias" :rotulos="$gestoresPostos" tipo="Euros" />
            </div>
           
        </div>

        <div class="row px-3 mr-0 text-sm">

            <div class="col-sm-8 ">
                <x-dashboard_postos_gerencial.grafico-gestor :vendasLitros="$quebrasPorcentagem" id="quebras"/>
            </div>
            <div class="col-sm-4 ">
                <x-dashboard_postos_gerencial.tabela-quebras :vendas="$vendasQuebras" :totaisFamiliasPorGestor="$totaisFamiliasPorGestor" :quebrasPorcentagem="$quebrasPorcentagem"  tipo="Quebras %" rotulo="Gestores" id="quebras"/>
            </div>
                
        </div>

        <div class="row px-3 mr-0 text-sm">

            <div class="col-sm-12 ">
                <x-dashboard_postos_gerencial.grafico-gestor tipo="Racio" :vendasLitros="$racioTotais" id="racio"  />
            </div>
           
        </div>

        <div class="row px-3 mr-0 text-sm">

            <div class="col-sm-12 ">
                <x-dashboard_postos_gerencial.tabela-cruzada :vendas="$racio" :rotulos="$gestoresPostos" tipo="Racio" />
            </div>
           
        </div>

        <div class="row px-3 mr-0 text-sm">

            <div class="col-sm-12 ">
                <x-dashboard_postos_gerencial.grafico-gestor tipo="Litros" :vendasLitros="$rotasLitros" id="rotasLitros"  />
            </div>
           
        </div>

        <div class="row px-3 mr-0 text-sm">

            <div class="col-sm-12 ">
                <x-dashboard_postos_gerencial.tabela-cruzada :vendas="$produtosRotas" :rotulos="$rotasPostos" tipo="Rotas" />
            </div>
           
        </div>

        <div class="row px-3 mr-0 text-sm">

            <div class="col-sm-12 ">
                <x-dashboard_postos_gerencial.grafico-gestor tipo="Litros" :vendasLitros="$rotasEuros" id="rotasEuros"  />
            </div>
           
        </div>

        <div class="row px-3 mr-0 text-sm">

            <div class="col-sm-12 ">
                <x-dashboard_postos_gerencial.tabela-cruzada :vendas="$familiasRotas" :rotulos="$rotasPostos" tipo="Rotas" />
            </div>
           
        </div>


         <div class="row px-3 mr-0 text-sm">

            <div class="col-sm-12 ">
                <x-dashboard_postos_gerencial.grafico-euros-gestor tipo="Objetivos" :vendas="$objetivosFamilias" :rotulos="$gestoresPostos" />
            </div>
           
        </div>

        <div class="row px-3 mr-0 text-sm">

            <div class="col-sm-12 ">
                <x-dashboard_postos_gerencial.tabela-cruzada :vendas="$objetivosFamilias" :rotulos="$gestoresPostos" tipo="Objetivos" />
            </div>
           
        </div>

        <div class="row px-3 mr-0 text-sm">

            <div class="col-sm-12 ">
                <x-dashboard_postos_gerencial.grafico-euros-gestor tipo="ObjetivosCombustiveis" :vendas="$objetivosCombustiveis" :rotulos="$gestoresPostos" />
            </div>
           
        </div>

        <div class="row px-3 mr-0 text-sm">

            <div class="col-sm-12 ">
                <x-dashboard_postos_gerencial.tabela-cruzada :vendas="$objetivosCombustiveis" :rotulos="$gestoresPostos" tipo="ObjetivosCombustiveis" />
            </div>
           
        </div>
    </div>
    
    <!-- ChartJS -->
    <script src="../../plugins/chart.js/Chart.min.js"></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>

 
    <!-- Page specific script -->

    <script>
        var table = $('.tabelashow').DataTable( {
            
            "paging": true,
            "lengthChange": false,
            "searching": false,
            "ordering": true,
            "info": true,
            "autoWidth": false,
            "responsive": true,
            "buttons": [ "csv", "excel", "pdf", {"extend":"print","text":"Imprimir"}, {"extend":"colvis","text":"Colunas"}],
            "lengthMenu": [[8, 10, 25, 50, -1], [8, 10, 25, 50, "All"]],
                        "bJQueryUI": true,
                        "oLanguage": {
                            "sProcessing":   "Processando...",
                            "sLengthMenu":   "Registros _MENU_ ",
                            "sZeroRecords":  "Não foram encontrados resultados",
                            "sInfo":         "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                            "sInfoEmpty":    "Mostrando de 0 até 0 de 0 registros",
                            "sInfoFiltered": "",
                            "sInfoPostFix":  "",
                            "sSearch":       "Buscar:",
                            "sUrl":          "",
                            "oPaginate": {
                                "sFirst":    "Primeiro",
                                "sPrevious": "Anterior",
                                "sNext":     "Seguinte",
                                "sLast":     "Último"
                            }
                        }
        
        } )
        .buttons().container().appendTo('#tabelashow_wrapper .col-md-6:eq(0)');
    </script>

    <script src={{ asset('/plugins/jquery/jquery.min.js') }}></script>
    <script src={{ asset('/plugins/bootstrap/js/bootstrap.bundle.min.js') }}></script>


<script>
    document.addEventListener("DOMContentLoaded", function () {
        const intervaloSelect = document.getElementById("intervalo_data");
        const dataInicialInput = document.getElementById("data_inicial");
        const dataFinalInput = document.getElementById("data_final");

        let alterandoViaSelect = false;

        intervaloSelect.addEventListener("change", function () {
            const hoje = new Date();
            let dataInicial, dataFinal;
            alterandoViaSelect = true;

            switch (this.value) {
                case "0": // Este mês
                    dataInicial = new Date(hoje.getFullYear(), hoje.getMonth(), 1);
                    dataFinal = new Date(hoje.getFullYear(), hoje.getMonth() + 1, 0);
                    break;
                case "1": // Mês anterior
                    dataInicial = new Date(hoje.getFullYear(), hoje.getMonth() - 1, 1);
                    dataFinal = new Date(hoje.getFullYear(), hoje.getMonth(), 0);
                    break;
                case "2": // Mesmo mês do ano anterior
                    dataInicial = new Date(hoje.getFullYear() - 1, hoje.getMonth(), 1);
                    dataFinal = new Date(hoje.getFullYear() - 1, hoje.getMonth() + 1, 0);
                    break;
                case "3": // Este trimestre
                    const trimestreAtual = Math.floor(hoje.getMonth() / 3);
                    dataInicial = new Date(hoje.getFullYear(), trimestreAtual * 3, 1);
                    dataFinal = new Date(hoje.getFullYear(), (trimestreAtual + 1) * 3, 0);
                    break;
                case "4": // Este ano
                    dataInicial = new Date(hoje.getFullYear(), 0, 1);
                    dataFinal = new Date(hoje.getFullYear(), 11, 31);
                    break;
                case "5": // Trimestre anterior
                    const trimestreAnterior = Math.floor((hoje.getMonth() - 3 + 12) / 3) % 4;
                    const anoTrimestreAnterior = hoje.getMonth() < 3 ? hoje.getFullYear() - 1 : hoje.getFullYear();
                    dataInicial = new Date(anoTrimestreAnterior, trimestreAnterior * 3, 1);
                    dataFinal = new Date(anoTrimestreAnterior, (trimestreAnterior + 1) * 3, 0);
                    break;
                case "6": // Ano anterior
                    dataInicial = new Date(hoje.getFullYear() - 1, 0, 1);
                    dataFinal = new Date(hoje.getFullYear() - 1, 11, 31);
                    break;
                default: // Personalizado
                    alterandoViaSelect = false;
                    return;
            }

            dataInicialInput.value = formatDate(dataInicial);
            dataFinalInput.value = formatDate(dataFinal);
            alterandoViaSelect = false;
        });

        dataInicialInput.addEventListener("change", marcarComoPersonalizado);
        dataFinalInput.addEventListener("change", marcarComoPersonalizado);

        function marcarComoPersonalizado() {
            if (!alterandoViaSelect) {
                intervaloSelect.value = "Personalizado";
            }
        }

        function formatDate(date) {
            const yyyy = date.getFullYear();
            const mm = String(date.getMonth() + 1).padStart(2, '0');
            const dd = String(date.getDate()).padStart(2, '0');
            return `${yyyy}-${mm}-${dd}`;
        }
    });
</script>


@endsection