@include('admin.header', [
   'elementActive' => 'faq'
])

<div class="content-wrapper">

    <section class="content-header">
      <h1>
      FAQ      
      <small>Adicione questões sobre a Rádio</small> 
      
      </h1> 
    </section>





<!-- Main content -->
<section class="content">
   <div class="row">
    <div class="col-xs-12">    		

        <div class="nav-tabs-custom">
           <ul class="nav nav-tabs ">
              <li {!! $active == 'questions' || $active == false ? 'class="active"' : '' !!}  >
                 <a href="#questions" data-toggle="tab">Questões</a>
              </li>
              <li {!! $active == 'texts' ? 'class="active"' : '' !!}>
                 <a href="#texts" data-toggle="tab">Textos</a>
              </li>
              <li {!! $active == 'colors' ? 'class="active"' : '' !!}>
                  <a href="#colors" data-toggle="tab" aria-expanded="false">Cores</a>
            </li>
           </ul>

           <div class="tab-content">
              <div id="questions" class="tab-pane {!! $active == 'questions' || $active == false ? 'active' : '' !!}">

                 <form action="" method="post" id="form_apagar" name="form_apagar">
                    
                    <!-- box -->
                    <div class="box">
                       <div class="box-body">

                        <div style="text-align:left;">
                                 
                            <button type="button" class="btn btn-primary" onclick="openModalCreate();">Novo</button>
                            <button type="button" class="btn btn-danger" onclick="deletefaqitems()">Apagar selecionados</button>
                            <br/>
                            <br/>
                            <form class="form-group">
                               <div class="form-check">
                                  <input class="form-check-input" type="checkbox" name="enable" id="enable" {{ $enable ? 'checked' : '' }} onclick="enableFAQ()" id="flexCheckDefault">
                                  <label class="form-check-label" for="flexCheckDefault">
                                     Habilitar FAQ
                                  </label>
                                  </div>
                               </form>
                            
                      </div>
                      
                      <input type="input" name="faqitems" id="faqitems" hidden/>
                        <script>
                            function deletefaqitems(){
                                if($('#faqitems').val().length === 0){
                                    alert('Selecione pelo menos um item a ser excluído');
                                }else{
                                    if (confirm('Apagar todos os itens selecionados?')) {
                                        $(':button').prop( "disabled", true );
                                        $.ajax({
                                            headers: {
                                                'X-CSRF-Token': "{{ csrf_token() }}",
                                            },
                                            type: 'DELETE',
                                            url: "{{ URL::to('admin/faq/destroy')}}/"+btoa($('#faqitems').val()),
                                            data: {},
                                            enctype: 'multipart/form-data',
                                            success: function(data){
                                                location.reload();
                                            },
                                            error: function(data){
                                                alert('Falhou ao deletar');
                                                $(':button').prop( "disabled", false );
                                            }
                                        });
                                    }
                                }
                            }
                            function multiselectfaqitems(checkbox, id){
                                if(checkbox == 'on'){
                                    $('#faqitems').val($('#faqitems').val()+id+':');
                                }else{
                                    $('#faqitems').val($('#faqitems').val().replace(id+':', ''));
                                }
                            }
                        </script>

                          <table class="table table-bordered table-striped">
                                
                                <thead>
                                   <tr>
                                      <th>Item</th>
                                      <th>Questão</th>
                                      <th>Resposta</th>
                                      <th>Opt.</th>
                                   </tr>
                                </thead>
                                
                                <tbody id="sortable" class="ui-sortable">
                                
                                   @foreach ($faqs as $faq)
                                      <tr id="item_22">
                                          <td style="cursor:pointer;"><input type="checkbox" onclick="multiselectfaqitems($(this).filter(':checked').val(), {!!  $faq->id !!});" /></td>
                                            <td>{{ $faq->question }}</td>
                                            <td>{{ $faq->answer }}</td>
                                               <td>
                                               <input type="button" class="btn btn-primary" value="Editar" onclick="openModalEdit({{ $faq->id }}, '{{ $faq->question }}', '{{ $faq->answer }}')"/>
                                               <input type="button" class="btn btn-danger" value="Apagar" onclick="if (confirm('Excluir imagem selecionada?')) { $('#delete_{{ $faq->id }}').submit(); }" />
                                               <form action="{{ route('admin.faq.destroy', $faq->id) }}" method="post" id="delete_{{ $faq->id }}" hidden>
                                                  @csrf
                                                  @method('DELETE')
                                               </form>

                                            </td>
                                      </tr>
                                   @endforeach
                                      
                                                                    </tbody>

                          </table>

                          <div class="col-12">
                             <div class="col-12 text-right">
                                {!! $faqs->links("pagination::bootstrap-4") !!}

                             </div>
                       </div>

                       </div>

                    </div>
                    <!-- /.box -->

                 </form>

              </div>
              <div id="texts" class="tab-pane {!! $active == 'texts' ? 'active' : '' !!}">
                 <form action="{{ route('admin.faq.texts.update') }}" class="form-horizontal" method="post">
                     @csrf
                     @method('PUT')
                 <fieldset>
                     <div class="form-group">
                        <label class="col-md-12">Titulo</label>
                        <div class="col-md-7">
                           <input name="title" value="{{ $faqtexts->title }}" type="text" class="form-control">
                        </div>
                     </div>
                     <div class="form-group">
                        <label class="col-md-12">Mensagem</label>
                        <div class="col-md-7">
                           <textarea class="form-control" name="message">{{ $faqtexts->message  }}</textarea>
                        </div>
                     </div>
                  </fieldset>
                  <div>
                     <button type="submit" class="btn btn-primary">Salvar</button>
                  </div>
                 </form>
             </div>
             <div id="colors" class="tab-pane {!! $active == 'colors' ? 'active' : '' !!}">
               <div class="tab-content">
                  <div class="tab-pane active">

                     
                     <div id="cores" class="tab-pane {!! $active == 'colors' ? 'active' : '' !!}">
                        <form action="{{ route('admin.faq.colors.update') }}" class="form-horizontal" method="post">
                           @csrf
                           @method('PUT')
   
                           <div class="col-md-5">
                               <div class="row" style="margin-left:15px;">
                                   <div class="col-md-4 form-group">
                                      <label for="color">Fundo (Blog e Eventos)</label>
                                      <input type="color" id="color" name="color" onchange="clickColor(0, -1, -1, 5)" value="{{ $faqColors->color }}" style="width:85%;height: 36px;">
                                   </div>
                                   {{-- <div class="col-md-8 form-group">
                                    <label for="background_file"><br/></label>
                                    <div class="fileupload fileupload-new" data-provides="fileupload">
                                       <div class="input-append">
                                          <div class="uneditable-input">
                                          <i class="fa fa-file fileupload-exists"></i>
                                          <span class="fileupload-preview"></span>
                                          </div>
                                          <span class="btn btn-default btn-file">
                                          <span class="fileupload-exists">Alterar</span>
                                          <span class="fileupload-new">Procurar arquivo</span>
                                          <input type="file" name="background">
                                          </span>
                                          <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">Remover</a>
                                       </div>
                                    </div>
                                   </div> --}}
                                </div>
                           </div>
   
                              
                           <div class="col-md-7">
                              <style>
                                  iframe {
                                      width: 900px;
                                      height: 400px;
                                      overflow: auto;
                                  }
                              </style>
                              <label for="color">Pré-visualização</label>
                              <iframe src="{{ route('home.index') }}" frameborder="0" width="100%" height="400"></iframe>
                          </div>
                              
                              
                                                            
                           <div style="padding-top:15px;">
                              <button type="submit" class="btn btn-primary">Salvar</button>
                           </div>
   
                        </form>
                        </div>
   
                  </div>
   
               </div>  
            </div>
              </div>
       </div>
   </div>
   <!-- /.row -->
</section>
<!-- /.content -->




   </div>




   <div id="update" class="modal fade" role="dialog">
    <div class="modal-dialog modal-md">
       <!-- Modal content-->
       <div class="modal-content" id="conteudo_modal">
          <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal">×</button>
             <h5 class="modal-title modal_titulo">Editar anúncio</h5>
          </div>
          <div class="modal-body" id="modal_conteudo_m">
             <style type="text/css">
                .bootstrap-timepicker-widget table{
                background-color: #fff !important;
                }
             </style>
             <form action="{{ route('admin.faq.update') }}" class="form-horizontal" method="post" enctype="multipart/form-data">
                 @csrf
                 @method('PUT')
                 <input type="text" name="id_faq" id="id_faq" hidden />
                <fieldset>
                   <div class="form-group">
                      <label class="col-md-12">Pergunta</label>
                      <div class="col-md-12">
                         <input name="question" id="question" type="text" class="form-control">
                      </div>
                   </div>

                    <div class="form-group">
                        <label class="col-md-12">Resposta</label>
                        <div class="col-md-12">
                            <textarea name="answer" id="answer" class="form-control"></textarea>
                        </div>
                    </div>

                   <div style="text-align: left; width: 100%;">
                      <button type="submit" class="btn btn-primary">Salvar</button>
                   </div>
                </fieldset>
             </form>
          </div>
          <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
          </div>
       </div>
    </div>
</div>


<div id="create" class="modal fade" role="dialog">
    <div class="modal-dialog modal-md">
       <!-- Modal content-->
       <div class="modal-content" id="conteudo_modal">
          <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal">×</button>
             <h5 class="modal-title modal_titulo">Editar anúncio</h5>
          </div>
          <div class="modal-body" id="modal_conteudo_m">
             <style type="text/css">
                .bootstrap-timepicker-widget table{
                background-color: #fff !important;
                }
             </style>
             <form action="{{ route('admin.faq.store') }}" class="form-horizontal" method="post" enctype="multipart/form-data">
                 @csrf
                <fieldset>
                   <div class="form-group">
                      <label class="col-md-12">Pergunta</label>
                      <div class="col-md-12">
                         <input name="question" id="question" type="text" class="form-control">
                      </div>
                   </div>

                    <div class="form-group">
                        <label class="col-md-12">Resposta</label>
                        <div class="col-md-12">
                            <textarea name="answer" id="answer" class="form-control"></textarea>
                        </div>
                    </div>

                   <div style="text-align: left; width: 100%;">
                      <button type="submit" class="btn btn-primary">Salvar</button>
                   </div>
                </fieldset>
             </form>
          </div>
          <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
          </div>
       </div>
    </div>
</div>

@include('admin.footer')

<script>
    function enableFAQ(){
        $('#enable').prop( "disabled", true );
        $.ajax({
            headers: {
                    'X-CSRF-Token': "{{ csrf_token() }}",
            },
            type: 'PUT',
            url: "{{ route('admin.faq.update') }}",
            data: { 
                enable: $('#enable').is(':checked')
            },
            enctype: 'multipart/form-data',
            success: function(data){
                $('#enable').prop( "disabled", false );
            },
            error: function(data){
                $('#enable').prop( "disabled", false );
                console.log('Erro no Ajax !');
            }
        });
    }
    function openModalCreate(){
        $("#create").modal();
    }
    function openModalEdit(id, question, answer){
        $('#id_faq').val(id);

        $('#question').val(question);
        $('#answer').val(answer);

        $("#update").modal();
    }
</script>