@extends('templates.prefeitura4.layout')

@section('content')
  @php $madara = 0 @endphp
  @php $madara1 = 0 @endphp

  <div class="allNotices">
    <div class="container">
      <div class="allNotices-title">
        <h4 class="font30">
          Todos os Projetos
        </h4>
      </div>
      {!! Form::open(['url' => routeTenant('projetos.busca'), 'method' => 'GET']) !!}
      <div class="allNotices-search">
        <input class="font16" type="text" id="allNotices-search" name="buscar" placeholder="Procure aqui o projeto 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 class="allNotices-body">
        @foreach ($projetos as $projeto)
          <div class="allNotices-card">
            <div class="allNotices-card-img">
              <img src="{{ $projeto->imagem->encode('data-url') }}" alt="{{ $projeto->titulo }}">
            </div>
            <div class="allNotices-card-content-format">
              <div class="allNotices-card-content">
                <div class="allNotices-card-content-header">
                  <div class="allNotices-card-content-header-type">
                    <i class="{{ $projeto->icon }}" aria-hidden="true"></i>
                    <p class="text-uppercase font12">{{ $projeto->name }}</p>
                  </div>
                  <div class="allNotices-card-content-header-share share">
                    <!-- Button trigger modal -->
                    <a href="projeto/{{ $projeto->url }}" type="button" data-toggle="modal" data-target="#exampleModal"
                      onclick="URL_SHARE('{{ routeTenant('site.projetos', [$projeto->url]) }}')" id="social-input-share">
                      <i class="fa fa-share-alt"></i>
                    </a>
                  </div>
                </div>

                <div class="allNotices-card-content-body">
                  <div class="allNotices-card-content-body-title">
                    <h3 @if (strlen($projeto->titulo) < 58) class="font20" 
                @else class="font16" @endif>
                      {{ $projeto->titulo }}</h3>
                  </div>
                  <div class="allNotices-card-content-body-content font16"
                    style="text-decoration: none; margin:0; gap:0;">
                    @php 
                      $notice = str_replace('<', " <!-- ", $projeto->descricao);
                      $notice = str_replace('>', " -->", $notice); 
                    @endphp
                    {!! $notice !!}
                  </div>
                </div>
                <div class="allNotices-card-content-footer">
                  <button type="button" onclick="window.location='{{ routeTenant('site.projeto', [$projeto->url]) }}'"
                    class="read-news font12">Saber Mais</button>
                </div>
              </div>
            </div>
          </div>
        @endforeach
        <div class="allNotices-paginate">
          {{ $projetos->links() }}
        </div>
      </div>
    </div>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true" style="top: 5vw; left: 20vw;">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title font20" id="exampleModalLabel">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="modal-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 font14">
              <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;
    }

    function copiarTexto() {
      let textoCopiado = document.getElementById("social-input");
      textoCopiado.select();
      textoCopiado.setSelectionRange(0, 99999)
      document.execCommand("copy");
      alert("Link Copiado Com Sucesso!");
    }
  </script>
@endsection