@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">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>Questionário</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> {{$reportMensal->mes}}</h5>
        </div>
        <div class="col-md-4">
            <h5><strong>Parceiro:</strong>  {{$reportMensal->posto->nome_posto}}</h5>
        </div>
        
            
    </div>
    <form action="{{route('report_mensal_questionario_store')}}" method="post" enctype="multipart/form-data">
        @csrf <!-- Adicione isso se estiver usando Laravel para proteção contra CSRF -->

      
                        @php
                            $categoria = '';
                        @endphp
                        @foreach($perguntasBD as $key => $perguntas)

                            @if($categoria != $perguntas->categoria)
                                @php
                                    $categoria = $perguntas->categoria;
                                @endphp
                             
                                <div class="col-sm-10 pl-3 pr-3 table-responsive">
                                    <div class="row">
                                        <div class="col-md-12 mb-2 mt-3 text-center">
                                            <strong>{{$perguntas->categoria}}</strong>
                                        </div>
                                    </div>
                                    <table id="questionario" class="table table-sm text-sm table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th style="width: 85%;" >Pergunta</th>
                                                <th style="width: 15%;">Resposta</th>
                                            </tr>
                                        </thead>
                                               
                                        <tbody>
                             
                            @endif
                            
                            <tr>
                                <td >{{$perguntas->descricao}}</td>
                                <td>
                                    <input type="radio" id="resposta_s{{$perguntas->id}}" name="resposta[{{$perguntas->id}}]" value="Sim"> Sim
                                    <input type="radio" id="resposta_n{{$perguntas->id}}" name="resposta[{{$perguntas->id}}]" checked value="Não"> Não
                                </td>
                            </tr> 
                           
                            @if( !isset($perguntasBD[$key+1]->categoria) || (isset($perguntasBD[$key+1]->categoria) && $categoria != $perguntasBD[$key+1]->categoria))

                                    </tbody>
                        
                                </table>
                            </div>
                             
                            @endif
                        @endforeach
                    
             
        
            <!-- Observações Importantes e Anexos -->
            <div class="ml-3 mt-3">
                <h5>Observações Importantes:</h5>
                <textarea id="observacao" name="observacao"  rows="4" cols="50"></textarea><br>

                <h5>Anexos (Fotos, Documentos, Etc)</h5>
                
                <label class="btn btn-primary">
                    Escolha  o arquivo <input type="file" id="anexo" name="anexo" style="display: none;">
                </label><br>
                <input type="hidden" id="report_mensal_id" name="report_mensal_id" value={{$reportMensal->id}}>
                <input type="hidden" id="user_id" name="user_id" value={{$reportMensal->user_id}}>
            </div>
            <!-- Botão de envio do formulário -->
            <div class="text-center mt-3">
                <input class="btn btn-primary" type="submit" value="Enviar">
            </div>
      
        </div>
    </form>
</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(){
            $('#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