@extends('layouts.app')

@section('content')

<div class="container">

    {{-- Título da página --}}
    <div class="row justify-content-center" style="margin-top: 3rem; text-align:center">
        <div class="col-md-12">
            <div class="row justify-content-between">
                <div class="col-sm">
                    <select id="seletor" class="form-control select-submeta" onchange="exibirEditais(this)" style="width: 140px;">
                        <option value="aberto" selected>Aberto(s)</option>
                        <option value="encerrado">Encerrado(s)</option>
                        <option value="abrira">Previstos</option>
                        <option value="todos">Todos</option>
                    </select>
                </div>
                <div class="col-sm" style="margin-bottom: 10px">
                    @if($flag == 'false')
                        @if(count($eventos)>0)
                            <h5 class="card-title mb-0" style="font-size:25px; font-family:Arial, Helvetica, sans-serif; color:#1492E6">Editais</h5>
                        @else
                            <h5 class="card-title mb-0" style="font-size:25px; font-family:Arial, Helvetica, sans-serif; color:#1492E6">Edital</h5>
                        @endif
                    @else
                        <h5 class="card-title mb-0" style="font-size:25px; font-family:Arial, Helvetica, sans-serif; color:#1492E6">Resultado da busca por: <span style="font-style: italic; font-weight:bold">{{$palavra}}</span></h5>
                    @endif
                </div>
                <div class="col-sm">
                    <form action="{{route('coord.home')}}" method="get">
                        @csrf
                        <div class="btn-group">
                            <input type="text" class="form-control shadow-sm" name="buscar" placeholder="Digite o nome do edital" value="{{$palavra}}" style="margin-right: 5px;border-radius:8px; border-color:#fff;">
                            <button type="submit" class="btn btn-light shadow-sm" style="border-radius: 8px">
                                <img src="{{asset('img/icons/logo_lupa.png')}}" alt="" width="20px">
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <hr>
        </div>
    </div>

    {{-- Grid de cards --}}
    <div class="row row-cols-4 justify-content-center g-4">
        @if(count($eventos) > 0)
            @foreach ($eventos as $evento)

                {{-- Verificando o status do evento para determinar a classe CSS correta --}}
                @if (Auth::check())
                    @if($evento->fimSubmissao >= $hoje && $hoje >= $evento->inicioSubmissao)
                        <a href="{{ route('evento.visualizar', ['id'=> $evento->id]) }}" style="text-decoration: none;" class="col evento aberto">
                    @elseif($hoje > $evento->fimSubmissao)
                        <a href="{{ route('evento.visualizar', ['id'=> $evento->id]) }}" style="text-decoration: none;" class="col evento encerrado">
                    @else
                        <a href="{{ route('evento.visualizar', ['id'=> $evento->id]) }}" style="text-decoration: none;" class="col evento abrira">
                    @endif
                @else
                    @if($evento->fimSubmissao >= $hoje && $hoje >= $evento->inicioSubmissao)
                        <a href="{{ route('evento.visualizarNaoLogado', ['id' => $evento->id]) }}" style="text-decoration: none;" class="col evento aberto">
                    @elseif($hoje > $evento->fimSubmissao)
                        <a href="{{ route('evento.visualizarNaoLogado', ['id' => $evento->id]) }}" style="text-decoration: none;" class="col evento encerrado">
                    @else
                        <a href="{{ route('evento.visualizarNaoLogado', ['id'=> $evento->id]) }}" style="text-decoration: none;" class="col evento abrira">
                    @endif
                @endif
                    <div class="card mb-4" style="border-radius:12px; height: 100%;">
                        @if(isset($evento->fotoEvento))
                            <img src="{{ asset('storage/eventos/'.$evento->id.'/logo.png') }}" class="card-img-top" alt="...">
                        @else
                            <img src="{{ asset('img/img_fundo.png') }}" class="card-img-top" alt="..." style="border-radius: 12px;">
                        @endif
                        <div class="card-body">
                            <h4 class="card-title" style="color: #01487E; font-family:Arial, Helvetica, sans-serif; font-size:20px; font-weight:bold">
                                {{ $evento->nome }}
                            </h4>

                            {{-- Informações dos eventos (Submissão, Revisão, etc.) --}}
                            <div class="row mb-2">
                                <div class="col-2">
                                    <img src="{{ asset('img/icons/icon_submissao.png') }}" class="card-img-top" alt="..." style="width:45px;">
                                </div>
                                <div class="col-10">
                                    <div style="font-size:18px; font-weight:normal; color:black;">Submissão</div>
                                    <div style="color: #909090">{{ date('d/m/Y', strtotime($evento->inicioSubmissao)) }} - {{ date('d/m/Y', strtotime($evento->fimSubmissao)) }}</div>
                                </div>
                            </div>

                            <div class="row mb-2">
                                <div class="col-2">
                                    <img src="{{ asset('img/icons/icon_revisao.png') }}" class="card-img-top" alt="..." style="width:45px;">
                                </div>
                                <div class="col-10">
                                    <div style="font-size:18px; font-weight:normal; color:black;">Revisão</div>
                                    <div style="color: #909090">{{ date('d/m/Y', strtotime($evento->inicioRevisao)) }} - {{ date('d/m/Y', strtotime($evento->fimRevisao)) }}</div>
                                </div>
                            </div>

                            <div class="row mb-2">
                                <div class="col-2">
                                    <img src="{{ asset('img/icons/icon_resultado_preliminar.png') }}" class="card-img-top" alt="..." style="width:45px;">
                                </div>
                                <div class="col-10">
                                    <div style="font-size:18px; font-weight:normal; color:black;">Resultado Preliminar</div>
                                    <div style="color: #909090">{{ date('d/m/Y', strtotime($evento->resultado_preliminar)) }}</div>
                                </div>
                            </div>

                            <div class="row mb-2">
                                <div class="col-2">
                                    <img src="{{ asset('img/icons/icon_recurso.png') }}" class="card-img-top" alt="..." style="width:45px;">
                                </div>
                                <div class="col-10">
                                    <div style="font-size:18px; font-weight:normal; color:black;">Recurso</div>
                                    <div style="color: #909090">{{ date('d/m/Y', strtotime($evento->inicio_recurso)) }} - {{ date('d/m/Y', strtotime($evento->fim_recurso)) }}</div>
                                </div>
                            </div>

                            <div class="row mb-2">
                                <div class="col-2">
                                    <img src="{{ asset('img/icons/icon_resultado_final.png') }}" class="card-img-top" alt="..." style="width:45px;">
                                </div>
                                <div class="col-10">
                                    <div style="font-size:18px; font-weight:normal; color:black;">Resultado Final</div>
                                    <div style="color: #909090">{{ date('d/m/Y', strtotime($evento->resultado_final)) }}</div>
                                </div>
                            </div>

                        </div>
                    </div>
                </a>
            @endforeach
        @else
            <div class="form-row justify-content-lg-center" style="width:100%; margin-top:4rem; text-align:center">
                <div class="col-md-12">
                    <img src="{{asset('img/icons/logo_projeto.png')}}" alt="..." width="190px">
                </div>
                @if($flag == 'true')
                    <div class="col-md-5" style="text-align: center;margin-top:1rem">
                        <h5>Nenhum edital encontrado!</h5>
                        <a href="{{route('coord.home')}}">Clique aqui para ver todos os editais</a>
                    </div>
                @else
                    <div class="col-md-5" style="text-align: center;margin-top:1rem"><h5>Nenhum edital cadastrado!</h5></div>
                @endif
            </div>
        @endif
    </div>

</div>

@endsection

@section('javascript')
<script>
    exibirEditais(document.getElementById("seletor"))

    function exibirEditais(select) {
        let abertos = document.getElementsByClassName("aberto");
        let encerrados = document.getElementsByClassName("encerrado");
        let vaiAbrir = document.getElementsByClassName("abrira");

        if(select.value == "todos") {
            for(let i = 0; i < abertos.length; i++ ){
                abertos[i].style.display = "block";
            }
            for(let j = 0; j < encerrados.length; j++ ){
                encerrados[j].style.display = "block";
            }
            for(let l = 0; l < vaiAbrir.length; l++ ){
                vaiAbrir[l].style.display = "block";
            }
        } else if(select.value == "aberto") {
            for(let i = 0; i < abertos.length; i++){
                abertos[i].style.display = "block";
            }
            for(let j = 0; j < encerrados.length; j++ ){
                encerrados[j].style.display = "none";
            }
            for(let l = 0; l < vaiAbrir.length; l++ ){
                vaiAbrir[l].style.display = "none";
            }
        } else if(select.value == "abrira") {
            for(let l = 0; l < vaiAbrir.length; l++ ){
                vaiAbrir[l].style.display = "block";
            }
            for(let i = 0; i < abertos.length; i++){
                abertos[i].style.display = "none";
            }
            for(let j = 0; j < encerrados.length; j++ ){
                encerrados[j].style.display = "none";
            }
        } else {
            for(let j = 0; j < encerrados.length; j++ ){
                encerrados[j].style.display = "block";
            }
            for(let i = 0; i < abertos.length; i++){
                abertos[i].style.display = "none";
            }
            for(let l = 0; l < vaiAbrir.length; l++ ){
                vaiAbrir[l].style.display = "none";
            }
        }
    }
</script>
@endsection