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

<div class="content-wrapper">

    <section class="content-header">
      <h1>
      Imagens	      <small></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 == 'images' || $active == false ? 'class="active"' : '' !!}>
                        <a href="#menu" data-toggle="tab">Imagens</a>
                    </li>

                    <li {!! $active == 'slide' ? 'class="active"' : '' !!}>
                        <a href="#menu_rodape" data-toggle="tab">Slides</a>
                    </li>

                </ul>


                <div class="tab-content">

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

                        <form method="post" id="form_apagar" name="form_apagar">

                            <!-- box -->
                            <div class="box">
                                <div class="box-body">

                                                            
                                    <div id="tabela1_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                                        <div class="row">
                                            <div class="col-sm-12"><table id="tabela1" class="table table-bordered table-striped dataTable no-footer" role="grid" aria-describedby="tabela1_info">

                                        <thead>
                                            <tr role="row">
                                                <th>Titulo</th>
                                                <th>Imagem</th>
                                                <th>Descrição</th>
                                                <th>Opt.</th>
                                            </tr>
                                        </thead>
                                        
                                        <tbody>
                                            @foreach ($images as $layout)
                                            <tr role="row" class="odd">
                                                <td>{{ $layout->name }}</td>
                                                <td><img src="{{ asset($layout->image) }}" width="80px"/></td>
                                                <td>{{ $layout->description }}</td>
                                                <td>
                                                    @if ($layout->type == 'slide')
                                                    <input type="button" class="btn btn-primary" value="Editar" onclick="openModalEdit({{ $layout->id }}, '{{ $layout->description }}', '{{ asset($layout->image) }}', '{{ $layout->url }}')"/>            
                                                    @else 
                                                    <input type="button" class="btn btn-primary" value="Editar" onclick="openModalEdit({{ $layout->id }}, '{{ $layout->description }}', '{{ asset($layout->image) }}')"/>            
                                                    @endif
                                                    
                                                </td>
                                            </tr>
                                            @endforeach
                                            
                                            
                                        </tbody>

                                    </table></div></div>
                                    </div>

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

                                </div>

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

                        </form>

                    </div>

                    <div id="menu_rodape" class="tab-pane {!! $active == 'slide' ? 'active' : '' !!}">

                        <form method="post" id="form_apagar" name="form_apagar">

                            <!-- box -->
                            <div class="box">
                                <div class="box-body">

                                                            
                                    <div id="tabela1_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                                        <div class="row">
                                            <div class="col-sm-12"><table id="tabela1" class="table table-bordered table-striped dataTable no-footer" role="grid" aria-describedby="tabela1_info">

                                        <thead>
                                            <tr role="row">
                                                <th>Titulo</th>
                                                <th>Imagem</th>
                                                <th>Descrição</th>
                                                <th>Opt.</th>
                                            </tr>
                                        </thead>
                                        
                                        <tbody>
                                            @php
                                                $first = true;
                                            @endphp
                                            @foreach ($slides as $layout)

                                                <tr role="row" class="odd">
                                                    <td>{{ $layout->name }}</td>
                                                    <td><img src="{{ asset($layout->image) }}" width="80px"/></td>
                                                    <td>{{ $layout->description }}</td>
                                                    <td>
                                                        @if ($layout->type == 'slide')
                                                        <input type="button" class="btn btn-primary" value="Editar" onclick="openModalEdit({{ $layout->id }}, '{{ $layout->description }}', '{{ asset($layout->image) }}', '{{ $layout->url }}')"/>            
                                                        @else 
                                                        <input type="button" class="btn btn-primary" value="Editar" onclick="openModalEdit({{ $layout->id }}, '{{ $layout->description }}', '{{ asset($layout->image) }}')"/>            
                                                        @endif

                                                        @if ($first)
                                                            @php
                                                                $first = false;
                                                            @endphp
                                                            <form action="{{ route('admin.layout.destroy', $layout->id) }}" method="post" id="delete_{{ $layout->id }}" hidden>
                                                           
                                                            </form>
                                                        @else
                                                            <input type="button" class="btn btn-danger" value="Apagar" onclick="if (confirm('Excluir imagem selecionada?')) { $('#delete_{{ $layout->id }}').submit(); }" />
                                                            <form action="{{ route('admin.layout.destroy', $layout->id) }}" method="post" id="delete_{{ $layout->id }}" hidden>
                                                                @csrf
                                                                @method('DELETE')
                                                            </form>
                                                        @endif
                                                        
                                                    </td>
                                                </tr>
                                            @endforeach
                                            
                                            
                                        </tbody>

                                    </table>
                                    <input type="button" class="btn btn-primary" value="Novo" onclick="openModalCreate()"/>
                                    </div>
                                    </div>
                                    </div>

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

                                </div>

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

                        </form>
                        
                    </div>

                </div>

    </div>
    <!-- /.row -->
</section>
<!-- /.content -->

</div>
@include('admin.footer')

<script>
function openModalEdit(id, description, image, url = false){
        $("#url-group").attr("style", "display: none");
        $('#url').val('');

        $('#id_layout').val(id);
        $('#name').val(name);
        $('#description').html(description);
        $("#image").attr("src",image);

        if(!(url === false)){
            $('#url').val(url);
            $("#url-group").attr("style", "display: block");
        }
        
        $("#update").modal();
    }

function openModalCreate(){
    $("#create").modal();
}
</script>

<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 imagem</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.layout.update') }}" class="form-horizontal" method="post" enctype="multipart/form-data">
                 @csrf
                 @method('PUT')
                 <input type="text" name="id_layout" id="id_layout" hidden />
                <fieldset>
 
                   <div class="form-group">
                      <label class="col-md-12">Imagem</label>
                      <div class="col-md-12">
                         <center><img id="image" src="" width="300px"/></center>
    
                         <fieldset> 
                            <label>Imagem</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="file">
                                  </span>
                                  <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">Remover</a>
                                </div>
                            </div>
                            
                          </fieldset>


                          <div class="form-group" id="url-group" style="display: none;">
                            <label class="col-md-12">URL</label>
                            <div class="col-md-7">
                                <input type="text" name="url" id="url" class="form-control" value="">
                            </div>
                         </div>

                          <br>
                          <span style="color: #ff0000;" id="description"></span>
    
                        
                      </div>
                   </div>
                   <div style="text-align: left; width: 100%;">
                      <button type="submit" class="btn btn-primary">Salvar</button>
                   </div>
                </fieldset>
             </form>
             <script type="text/javascript">
                $(document).ready(function() {
                
                  $('.timepicker').timepicker({
                    showInputs: false,
                    showMeridian: false
                  });
                
                });
             </script>
          </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">Criar slide</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.layout.store') }}" class="form-horizontal" method="post" enctype="multipart/form-data">
                 @csrf
                 @method('POST')
                 
                <fieldset>
 
                   <div class="form-group">
                      <label class="col-md-12">Imagem</label>
                      <div class="col-md-12">
                        
    
                         <fieldset> 
               
                            <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="file_slide">
                                  </span>
                                  <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">Remover</a>
                                </div>
                            </div>
                            
                          </fieldset>


                          <div class="form-group">
                            <label class="col-md-12">URL</label>
                            <div class="col-md-7">
                                <input type="text" name="url_slide" id="url_slide" class="form-control" value="">
                            </div>
                         </div>

                          <br>
                          <span style="color: #ff0000;" id="description"></span>
    
                        
                      </div>
                   </div>
                   <div style="text-align: left; width: 100%;">
                      <button type="submit" class="btn btn-primary">Salvar</button>
                   </div>
                </fieldset>
             </form>
             <script type="text/javascript">
                $(document).ready(function() {
                
                  $('.timepicker').timepicker({
                    showInputs: false,
                    showMeridian: false
                  });
                
                });
             </script>
          </div>
          <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
          </div>
       </div>
    </div>
</div>