@extends(layoutTenant())

@section('content')
  <div class="row">
    <div class="col-12">
      <div class="page-title-box">
        <h4 class="page-title float-left">Lista de Slider</h4>
        <div class="float-right">
          {!! Form::open([
              'url' => routeTenant('slider.buscar'),
              'class' => 'form form-inline',
              'style' => 'height:40px;width: 100%;',
          ]) !!}
          {!! Form::text('buscar', null, ['class' => 'form-control', 'style' => 'height:40px;width: 70%;']) !!}
          {!! Form::submit('buscar', ['class' => 'btn btn-primary  btn-outline-success ']) !!}
          {!! Form::close() !!}
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
  <!-- end row -->

  @if (session('success'))

  <div class="alert alert-success">
      {{ session('success') }}
  </div>

@endif
  @if ($portal->template == 'prefeitura4')
    {!! Form::model($hero_slider, [
        'url' => routeTenant('slider.hero_store'),
        'enctype' => 'multipart/form-data',
        'class' => 'form',
        'id' => 'enviarimagem',
    ]) !!}
    {{-- HERO SLIDER --}}
    <img class="first-slide d-block w-100 " id="photo" src=@if(isset($hero_slider)){{asset($hero_slider->img)}} @else{{ asset('imgs/hero.png') }} @endif alt=" slide" style="height:424px; object-fit: fill">
    <div class="container"
      style="
        position: absolute; 
        left:400px; 
        top:250px;
        width:1000px;
        display:flex;
        flex-direction:column;
        justfy-content:center;
        align-items:center;
        gap:130px;
        ">
      <div class="text-center hero-title text-uppercase">
        <h2 id="hero_title" class="font30">titulo</h2>
        <h2 id="hero_subtitle" class="font30"> subtitulo:</h2>
      </div>
      <div class="hero-input">
        <div class="hero-input-text font16 row" style="flex-wrap: nowrap;">
          <input style="width:700px" type="text" class="inputseach" name="buscar" id="uc_painel_buscar"
            placeholder="Procure aqui a informação que quer saber" />
          <button class="hero-input-button" style="margin-left:-30px; display:flex;">
            <i class="fa fa-search" aria-hidden="true"></i> &nbsp;
          </button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-6">
        {!! Form::label('titulo', 'titulo:') !!}
        {!! Form::text('titulo', old('titulo'), [
            'class' => 'form-control',
            'required',
            'maxlength' => '65',
            'id' => 'hero_slider-titulo',
        ]) !!}
        {!! Form::hidden('account_id', $portal->id) !!}
      </div>
      <div class="col-lg-6">
        {!! Form::label('subtitulo', 'subtitulo:') !!}
        {!! Form::text('subtitulo', old('subtitulo'), [
            'class' => 'form-control',
            'required',
            'maxlength' => '65',
            'id' => 'hero_slider-subtitulo',
        ]) !!}
      </div>
    </div>
    <div class="col-lg-4" style="margin-top:30px;">
      {!! Form::label('img', 'imagem:')!!}
      {!! Form::file('img') !!}
    </div>
    <div class="form-group col-lg-4">
      {!! Form::submit('Salvar Slider', [
          'class' => 'btn btn-primary',
          'style' => 'margin-top: 10px;',
          'name' => 'save',
      ]) !!}
    </div>
    <div style="margin-bottom: 50px;"></div>
    {!!Form::close()!!}
  @endif
  <div class="row" style="margin-top: -20px;  min-height: 100px; position: relative; ">
    <div style="position: absolute;  padding: 20px;  border-radius: 12px;  ">
      <div class="float-left" style=" ">
        <a href="{{ routeTenant('slider.create') }}" class="btn btn-success "><i class=""></i> Adicionar Novo
          Slider</a>
      </div>
    </div>
  </div>
  <!-- recent orders  -->
  <!-- ============================================================== -->
  <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
    <div class="card">
      <h5 class="card-header">Sliders</h5>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table">
            <thead class="bg-light">
              <tr class="border-0">
                <th class="border-0">IMAGEM</th>
                <th class="border-0">Titulo</th>
                <th class="border-0">Nome</th>
                <th class="border-0">Data</th>
                <th class="border-0">Funções</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($categories as $category)
                <tr>
                  <td width="30%">
                    <div class="m-r-10"><img src="{{ asset($category->img) }}" width="100%;" alt=""></div>
                  </td>
                  <td>
                    <div class="m-r-10">{{ $category->titulo }}</div>
                  </td>
                  <td>{{ $category->name }} </td>
                  <td>{{ date('d/m/Y', strtotime($category->created_at)) }} </td>
                  <td>
                    <a href="{{ routeTenant('slider.detalhes', ['id' => $category->id]) }}" title="Visualizar"
                      class="btn btn-warning"><i class="fa fa-eye" aria-hidden="true"></i>
                    </a>
                    <a href="{{ routeTenant('slider.edit', ['slider' => $category->id]) }}" title="Editar"
                      class="btn btn-primary"> <i class="fa fa-edit" aria-hidden="true"></i>
                    </a>
                    <a href="{{ routeTenant('slider.delete', [$category->id]) }}" title="Deletar"
                      data-confirm='Tem certeza de que deseja Desativar o item selecionado?' class="btn btn-danger"><i
                        class="fa fa-trash" aria-hidden="true"></i>
                    </a>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
          {!! $categories->links() !!}
        </div>
      </div>
    </div>
  </div>
  <!-- ============================================================== -->
  <!-- end recent orders  -->
@endsection

@section('post-script')
  <script>
    $(document).ready(function() {
      $('a[data-confirm]').click(function(ev) {
        var href = $(this).attr('href');
        if (!$('#confirm-delete').length) {
          $('body').append('<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" ' +
            'aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog">' +
            '<div class="modal-content"><div class="modal-header bg-danger text-white">DELETAR SLIDER' +
            '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
            '<span aria-hidden="true">&times;</span></button></div><div class="modal-body">' +
            'Tem certeza de que deseja Deletar Slider ?</div><div class="modal-footer">' +
            '<button type="button" class="btn btn-success" data-dismiss="modal">Cancelar' +
            '</button><a class="btn btn-danger text-white" id="dataComfirmOK">Deletar</a><' +
            '/div></div></div></div>');
        }
        $('#dataComfirmOK').attr('href', href);
        $('#confirm-delete').modal({
          show: true
        });
        return false;
      });
    });
  </script>
  <script>
    let photo = document.getElementById("photo");
    let file = document.getElementById("img");

    $(function() {
      $("#img").change(function() {
        const file = ($(this)[0].files[0]);
        const fileReader = new FileReader();
        fileReader.onloadend = function() {
          photo.src = fileReader.result;
        }
        fileReader.readAsDataURL(file);
      })
    })
  </script>
  <script>
  $("#hero_slider-titulo").keyup(function() {
    {
      document.getElementById("hero_title").innerHTML = document.getElementById('hero_slider-titulo').value;
    }
  });
  $("#hero_slider-subtitulo").keyup(function() {
    document.getElementById("hero_subtitle").innerHTML = document.getElementById("hero_slider-subtitulo").value + ':';
  });
</script>
@endsection