@extends('templates.prefeitura4.layout')

@section('content')
  <div class="eventos-index">
    {{-- <div class="container"> --}}
    <div class="eventos-index-header">
      <div class="eventos-index-title ">
        <h4>Calendário de Eventos e Publicações</h4>
      </div>
      {!! Form::open(['url' => routeTenant('eventos.busca'), 'method' => 'GET']) !!}
      <div class="allNotices-search">
        <input class="font16" type="text" id="allNotices-search" name="buscar" placeholder="Procure aqui o evento que quer encontrar">
        <button>
          <i class="fa fa-search" aria-hidden="true"></i> &nbsp;
        </button>
      </div>
      @if(isset($busca))
    <div class="videos-search-header" style="width: 100vw">
      <div class="container">
        <div class="row">
          <div class="videos-search-header-text col-md-12">
            <h1>
              Procurando: {{ $busca }}</h1>
          </div>
        </div>
      </div>
    </div>
    @endif
      {!! Form::close() !!}
    </div>
    <div class="eventos-index-body">
      <div class="eventos-index-body-inner">
        @php $i = 0; @endphp
        @foreach ($eventos as $evento)
          <div class="eventos-index-card">
            <div class="eventos-index-card-img">
              <img src="{{ $evento->img->encode('data-url') }}" alt="{{ $evento->title }}">
            </div>
            <div class="eventos-index-card-content-format">
              <div class="eventos-index-card-content">
                <div class="eventos-index-card-content-header">
                  <div class="eventos-index-card-content-header-type">
                    <i class="{{ $evento->icon }}" aria-hidden="true"></i>
                    <p class="text-uppercase">{{ $evento->name }}</p>
                  </div>
                </div>
                <div class="eventos-index-card-content-body">
                  <div class="eventos-index-card-content-body-date">
                    20 JUL 2022
                  </div>
                  <div class="eventos-index-card-content-body-title">
                    <h3
                      @if (strlen($evento->title) < 58) style="font-size: 20px;" 
                      @else style="font-size: 16px;" @endif>
                      {{ $evento->title }}
                    </h3>
                  </div>
                </div>

                <div class="eventos-index-card-content-footer">
                  <div id={{"description".$i}} style="display:none;">{{$evento->descricao}}</div>
                  <a href="#" type="button" data-toggle="modal" data-target="#modalEvento"
                    onclick="MODAL_IMG('{{ asset($evento->image) }}','{{ $evento->title }}', '{{$evento->data}}', '{{ $evento->name }}', '{{$evento->endereco}}', '{{$evento->web}}', {{$i++}})"
                    id="social-input-share">
                    <p>Saiba Mais</p>
                  </a>
                  <div class="eventos-index-card-content-header-share share">
                    <a href="#" type="button" data-toggle="modal" data-target="#modalShare"
                      onclick="URL_SHARE('{{ routeTenant('site.eventos', [$evento->url]) }}')" id="social-input-share">
                      <i class="fa fa-share-alt"></i>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        @endforeach
      </div>
    </div>
    <div class="eventos-index-paginate">
      {{ $eventos->links() }}
    </div>
    {{-- </div> --}}
  </div>

  {{-- MODAL-EVENTO --}}

  <div class="modal fade" id="modalEvento" tabindex="-1" role="dialog" aria-labelledby="modalEventoLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content modal-evento-content">
        <div class="modal-evento-header">
          <div class="modal-img" id="modal-item-img">
            <img id="modal-img" src="" alt="">
          </div>
          <button type="button" class="close modal-evento-close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-evento-body">
          <div class="modal-evento-title" id="modal-evento-item-title">
            <h3 id="modal-evento-title"></h3>
          </div>
          <div class="container">
            <div class="modal-evento-item" id="modal-evento-item-data">
              <i class="fa fa-calendar"></i>
              <p>Data: </p>
              <p id="modal-evento-data"></p>
            </div>
            <div class="modal-evento-item">
              <i class="fa fa-plus-square-o" id="modal-evento-item-categoria"></i>
              <p>Categoria: </p>
              <p id="modal-evento-categoria"></p>
            </div>
            <div class="modal-evento-item" id="modal-evento-item-endereco">
              <i class="fa fa-map-marker"></i>
              <p>Endereço: </p>
              <p id="modal-evento-endereco"></p>
            </div>
            <div class="modal-evento-item" id="modal-evento-item-web">
              <i class="fa fa-globe"></i>
              <p>Web: </p>
              <p id="modal-evento-web"></p>
            </div>
            <div class="modal-evento-item" id="modal-evento-item-description">
              <i class="fa fa-file-text-o"></i>
              <p id="modal-evento-description"></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="modalShare" tabindex="-1" role="dialog" aria-labelledby="modalShareLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalShareLabel">Compartilhar</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="container">
            {{-- ATENTION --}}
            <div class="modal-social">
              <a href="#">
                <div class="social-buttons">
                  <i class="fa fa-envelope" aria-hidden="true"></i>
                </div>
              </a>
              <a href="#">
                <div class="social-buttons">
                  <i class="fa fa-facebook" aria-hidden="true"></i>
                </div>
              </a>
              <a href="#">
                <div class="social-buttons">
                  <i class="fa fa-whatsapp" aria-hidden="true"></i>
                </div>
              </a>
              <a href="#">
                <div class="social-buttons">
                  <i class="fa fa-twitter" aria-hidden="false"></i>
                </div>
              </a>
            </div>
            <div class="social-input">
              <input type="url" readonly id="social-input">
              <button class="center" onclick="copiarTexto()">
                <i class="fa fa-copy" aria-hidden="true"></i> &nbsp;
              </button>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
@endsection
@section('post-script')
  <script>
    function URL_SHARE(y) {
      var x = document.getElementById("social-input");
      x.value = y;
    }
  </script>
  <script>
    function MODAL_IMG(img, title, data, category, endereco, web, i) {
      var x = document.getElementById("modal-img");
      x.src = img;
      var x = document.getElementById("modal-evento-title");
      x.innerHTML = title;
      var x = document.getElementById("modal-evento-data");
      x.innerHTML = data;
      var x = document.getElementById("modal-evento-categoria");
      x.innerHTML = category;
      var x = document.getElementById("modal-evento-endereco");
      x.innerHTML = endereco;
      var x = document.getElementById("modal-evento-web");
      x.innerHTML = web;
      var x = document.getElementById("modal-evento-description");
      x.innerHTML = document.getElementById("description" + i).innerHTML;
    }
  </script>
  <script>
    function copiarTexto() {
      let textoCopiado = document.getElementById("social-input");
      textoCopiado.select();
      textoCopiado.setSelectionRange(0, 99999)
      document.execCommand("copy");
      alert("Link Copiado Com Sucesso!");
    }
  </script>
@endsection