@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> {{$respostaQuestionario->reportMensal->mes}}</h5>
        </div>
        <div class="col-md-4">
            <h5><strong>Parceiro:</strong>  {{$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

        <div class="container-fluid px-2 px-md-3">

            @foreach($perguntasBD as $key => $perguntas)

                {{-- Título da categoria --}}
                @if($categoria != $perguntas->categoria)
                    @php $categoria = $perguntas->categoria; @endphp
                    <div class="row mt-4 mb-2">
                        <div class="col-12 text-center">
                            <h5 style="background-color: #343a40" class="text-white font-weight-bold">{{ $categoria }}</h5>
                            <hr class="mt-1">
                        </div>
                    </div>
                @endif

                {{-- Card da pergunta --}}
                <div class="card mb-3 shadow-sm">
                    <div class="card-body">

                        <p class="mb-3 font-weight-bold">
                            {{ $perguntas->descricao }}
                        </p>

                        <div class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
                            
                            <label class="btn btn-outline-success col-md-2 col-6 @if($respostaQuestionario->respostasQuestionarioReportMensal[$key]->resposta=='Sim') active @endif">
                                <input type="radio"
                                    name="resposta[{{$perguntas->id}}]"
                                    value="Sim"
                                    autocomplete="off"
                                    @if($respostaQuestionario->respostasQuestionarioReportMensal[$key]->resposta=='Sim') checked @endif> 
                                ✔ Sim
                            </label>

                            <label class="btn btn-outline-danger col-md-2 col-6 @if($respostaQuestionario->respostasQuestionarioReportMensal[$key]->resposta=='Não') active @endif">
                                <input type="radio"
                                    name="resposta[{{$perguntas->id}}]"
                                    value="Não"
                                    autocomplete="off"
                                    @if($respostaQuestionario->respostasQuestionarioReportMensal[$key]->resposta=='Não') checked @endif> 
                                ✖ Não
                            </label>

                        </div>

                    </div>
                </div>

            @endforeach

        </div>




            <!-- Observações Importantes e Anexos -->
            <div class="mx-3 my-3">
                <h5>Observações Importantes:</h5>
                <textarea id="observacao" name="observacao"  rows="4" class="form-control" >{{$respostaQuestionario->observacao}}</textarea><br>

                @if(isset($respostaQuestionario->anexos[0]) && $respostaQuestionario->anexos[0] !=null)
                    <h5>Anexos (Fotos, Documentos, Etc)</h5>
                    @foreach($respostaQuestionario->anexos as $anexo)
                        <a href="/storage/anexo_questionario/{{$anexo->anexo}}" target="_blank" title="Visualizar Anexo" class="btn btn-primary btn-sm"><i class="fas fa-paperclip"></i></a> 
                    @endforeach
                @endif


                <input type="hidden" id="report_mensal_id" name="report_mensal_id" value={{$respostaQuestionario->reportMensal->id}}>
                <input type="hidden" id="user_id" name="user_id" value={{$respostaQuestionario->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