@extends('layouts.publicador.novo_padrao')

@section('content')
    <div class="container my-4 py-3">
        <div class="pesquisa">
        </div>
        @if (session('status-success'))
            <div class="alert alert-success text-center remove-after-3s" role="alert">
                {{ session('status-success') }}
            </div>
        @endif

        @if (session('status-error'))
            <div class="alert alert-danger text-center remove-after-3s" role="alert">
                {{ session('status-error') }}
            </div>
        @endif
        <div class="w-100 text-right mb-3">
            <a href="{{ route('publicador.itinerante-bairros.form') }}" class="btn btn-sm btn-success">Adicionar</a>
        </div>
        <table class="table table-sm table-striped table-bordered table-hover">
            <thead class="thead-default">
                <tr>
                    <th class="w-25">Seção Hotsite Itinerante</th>
                    <th class="d-none d-sm-table-cell">Local de realização do evento</th>
                    <th class="d-none d-sm-table-cell">Data do evento</th>
                    <th>Ações</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($show as $index => $register)
                    @if ($show[$index]->section == 'noticias')
                        <tr>
                            <td style="text-transform:uppercase">{{ $register->section }}</td>
                            <td>{{ $register->bairro }}</td>
                            <td> -- </td>
                            <td>
                                <form method="get"
                                    action="{{ route('publicador.itinerante-bairros.delete', ['id' => $register->id]) }}">
                                    @csrf
                                    <a href="{{ route('publicador.itinerante-bairros.edit', ['id' => $register->id]) }}"
                                        class="btn btn-primary btn-sm" title="Alterar"><span
                                            class="fa fa-pencil"></span></a>
                                    <button class="btn btn-danger btn-sm btn-delete" type="submit"><span
                                            class="fa fa-trash"></span></button>
                                </form>
                            </td>
                        </tr>
                    @elseif ($show[$index]->section == 'videos')
                    <tr>
                        <td>{{ $register->section }}</td>
                        <td>{{ $show[1]->bairro }}</td>
                        <td>{{ \Carbon\Carbon::parse($show[0]->data_evento)->format('d/m/Y H:i') }}
                        </td>
                        <td>
                            <a href="{{ route('publicador.itinerante-bairros.edit', ['id' => $register->id]) }}"
                                class="btn btn-primary btn-sm" title="Alterar"><span class="fa fa-pencil"></span></a>
                            </form>
                        </td>
                    </tr>
                    @else
                    <tr>
                        <td>{{ $register->section }}</td>
                        <td>{{ $register->bairro }}</td>
                        <td>{{ \Carbon\Carbon::parse($show[0]->data_evento)->format('d/m/Y H:i') }}
                        </td>
                        <td>
                            <a href="{{ route('publicador.itinerante-bairros.edit', ['id' => $register->id]) }}"
                                class="btn btn-primary btn-sm" title="Alterar"><span class="fa fa-pencil"></span></a>
                            </form>
                        </td>
                    </tr>
                    @endif
                @endforeach
            </tbody>
        </table>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var removeAfter3sElements = document.querySelectorAll(".remove-after-3s");
            var transitionDuration = 0.5;

            setTimeout(function() {
                removeAfter3sElements.forEach(function(element, index) {
                    element.style.transition = "transform " + transitionDuration + "s, opacity " +
                        transitionDuration + "s";
                    element.style.transform = "translateX(-100%)";
                    element.style.opacity = "0";

                    setTimeout(function() {
                        element.style.display = "none";
                    }, transitionDuration * 1000 + (index * 200));
                });
            }, 5000);
        });
    </script>
    <style>
        table.table.table-sm.table-striped.table-bordered.table-hover {
            text-align: center;
        }

        td {
            text-transform: uppercase;
        }
    </style>
@endsection