@extends('adminlte.app')
@section('content')

{{-- @php
  use App\Models\Tipo_Usuario;
  use App\Models\Posto;
  $permissao = Tipo_Usuario::where('id', auth()->user()->tipo_usuario_id)->first();
  if (!$permissao->report_mensal){
            abort(403,"Você não tem permissão de acesso");
        }
@endphp --}}


<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">Report Mensal</h1>
             </div><!-- /.col -->
             <div class="col-sm-6">

             </div><!-- /.col -->
         </div><!-- /.row -->
     </div><!-- /.container-fluid -->
 </div>
<!-- /.content-header -->

{{-- @if ($message = Session::get('success'))
<div class="alert alert-success">
    <p>{{ $message }}</p>
</div>
@endif --}}

<div class="card mx-3 mt-3">
    <div class="card-header">
        <div class="row">
            <div class="col-md-4">
                <h2>Avaliação Report Mensal</h2>
            </div>
            <div class="col-md-8 text-right">
                <a href="javascript:history.back()"><button type="button" id="voltar" class="btn btn-primary d-print-none">Voltar</button></a>
            </div>
        </div>
    </div>
    <div class="row ml-2 mt-3 mb-3">
        <div class="col-md-4">
        <h5> <strong>Mês:</strong> {{$questionario->reportMensal->mes}}</h5>
        </div>
        <div class="col-md-4">
            {{-- <h5><strong>Parceiro:</strong>  {{$questionario->reportMensal->posto()with(trashed)->nome_posto}}</h5> --}}
            <h5><strong>Parceiro:</strong>  {{$questionario->reportMensal->posto()->withTrashed()->first()->nome_posto}}</h5>
        </div>




    </div>

    <div class="row ml-2 mt-3 mb-3">

        <table>
            <tbody id="questionario1" class="table table-sm text-sm table-bordered table-striped">

                <tr>
                    <th>Categoria</th>
                    <th>Descriçao</th>
                    <th>Respostas</th>
                    <th>percentual Obtido</th>
                </tr>
                @foreach ($questionario->respostasQuestionarioReportMensal as $index => $respostas )
                    <tr>
                       <td><strong>{{$questionario->respostasQuestionarioReportMensal[$index]->perguntasReportMensal->categoria}}</strong></td>
                        <td>{{$questionario->respostasQuestionarioReportMensal[$index]->perguntasReportMensal->descricao}}</td>
                        <td class="text-center">{{$questionario->respostasQuestionarioReportMensal[$index]->resposta}}</td>
                        @if($questionario->respostasQuestionarioReportMensal[$index]->resposta==="Sim")
                            <td class="text-center">{{$questionario->respostasQuestionarioReportMensal[$index]->perguntasReportMensal->peso}}</td>
                        @else<td class="text-center">0</td>
                        @endif
                    </tr>

                @endforeach
                <tr>
                    <td colspan="3"  class="text-right pr-3 border-0"><strong>Total</strong></td>
                    <td class="text-center"><strong>{{$percentualMesAtual}}</strong></td>
                </tr>
            </tbody>
        </table>

    </div>

    <div class="ml-3 mt-3">
        <h5>Observações Importantes:</h5>
        <textarea id="observacao" name="observacao"  rows="4" cols="50">{{$questionario->observacao}}</textarea><br>

        @if(isset($questionario->anexo) && $questionario->anexo !=null)
        <h5>Anexos (Fotos, Documentos, Etc)</h5>
        <a href="/storage/anexo_questionario/{{$questionario->anexo}}" target="_blank">Visualizar o Anexo</a>
        @endif
    </div>
    {{-- <div class="row ml-2 mt-3 mb-3">
     <div class="col-md-4">
            <canvas id="graficoBarras" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
        </div>
    </div> --}}
</div>

 <!-- BAR CHART -->
 <div class="card ">
    <div class="card-header bg-dark text-white">
        {{-- <h3 class="card-title">{{ ucfirst($col) }} por Canais</h3> --}}
        <h3 class="card-title"> Grafico Avaliação</h3>

        <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse">
            <i class="fas fa-minus"></i>
            </button>
            <button type="button" class="btn btn-tool" data-card-widget="remove">
            <i class="fas fa-times"></i>
            </button>
        </div>
    </div>
    <div class="card-body">
        <div class="chart">
            {{-- <canvas id="barChart{{ $col }}" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas> --}}
            <canvas id="graficoBarras" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 80%;"></canvas>
        </div>
    </div>
    <!-- /.card-body -->
</div>
<!-- /.card -->


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


<script>
    var ctx = document.getElementById('graficoBarras').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Mes Anterior', 'Mes Atual','Ano Anterior'],
            datasets: [{
                label: 'Percentual Avaliação',
                data: [{{$percentualMesAnterior}}, {{$percentualMesAtual}}, {{$percentualAnoAnterior}}], // Aqui você coloca os valores correspondentes às categorias

                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
</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>
   $(document).ready(function(){
            $('#questionario').change(function(){
                var id = $(this).val();
                var src = $(this).data('src');
                $('#tbl_familia tbody').html('Buscando...');

                $.ajax({
                    url: src,
                    method: 'GET',
                    data: {id: id},
                    success: function(data){
                        var html = '';
                        $.each(data, function(key, value){
                            html += '<tr>';
                            html += '<td><input type="hidden" value="'+value.id+'" name="familia_id['+value.id+']">'+value.id+'</td>';
                            html += '<td>'+value.familia+'</td>';
                            html += '<td><input type="hidden" value="'+value.unidade_padrao+'" name="unidade_padrao['+value.id+']"> '+value.unidade_padrao+'</td>';
                            html += '<td><input type="number" step="0.01" min="0" class="form-control" name="sem_iva['+value.id+']"></td>';
                            html += '<td><input type="number" step="0.01" min="0" class="form-control" name="com_iva['+value.id+']"></td>';
                            html += '<td><input type="number" step="0.01" min="0" class="form-control" name="quebras['+value.id+']"></td>';
                            html += '<td><textarea class="form-control" name="justificativa['+value.id+']"></textarea></td>';
                            html += '<td><input type="file" class="" name="anexo1['+value.id+']"></td>';
                            html += '</tr>';
                        });
                        $('#tbl_familia tbody').html(html);
                    }
                });
            });
    });



</script> --}}
@endsection