@extends('layouts.publicador.novo_padrao')

@section('content')
    <div class="container">
        <div class="content-wrapper">

            @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.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->cidade }}</td>
                                <td> -- </td>
                                <td>
                                    <form method="get"
                                        action="{{ route('publicador.itinerante.delete', ['id' => $register->id]) }}">
                                        @csrf
                                        <a href="{{ route('publicador.itinerante.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]->cidade }}</td>
                                <td>{{ \Carbon\Carbon::parse($show[0]->data_evento)->format('d/m/Y H:i') }}
                                </td>
                                <td>
                                    <a href="{{ route('publicador.itinerante.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->cidade }}</td>
                                <td>{{ \Carbon\Carbon::parse($show[0]->data_evento)->format('d/m/Y H:i') }}
                                </td>
                                <td>
                                    <a href="{{ route('publicador.itinerante.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>
    </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