@extends('layouts.novo_padrao')

@section('content')
    <div class="py-12 maincontent">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            @if (session('success'))
                <div id="alert-success" class="alert alert-success" role="alert">
                    {{ session('success') }}
                </div>
            @endif

            @if (session('error'))
                <div id="alert-error" class="alert alert-danger" role="alert">
                    {{ session('error') }}
                </div>
            @endif

            <div class="bgcomponent overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <h1 class="text-2xl font-bold mb-4">Lista de Visitas</h1>

                    <div class="mb-12">
                        <div class="novavisita">
                            <a href="{{ route('nova_visita') }}" class="btn btn-newVisita">
                                <i class="fas fa-plus"></i> Nova Visita
                            </a>
                        </div>
                    </div>

                    <div class="table">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Visitante</th>
                                    <th>Data</th>
                                    <th>Horário</th>
                                    <th>Status</th>
                                    <th>Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($visitas as $visita)
                                    <tr>

                                        <td>{{ $visita->visitante->nome }}</td>
                                        <td>{{ \Carbon\Carbon::parse($visita->data_visita)->format('d/m/Y') }}</td>
                                        <td>{{ \Carbon\Carbon::parse($visita->created_at)->format('h:m') }}</td>
                                        <td>
                                            @if ($visita->status == 'agendada')
                                                <span class="badge bg-primary">Agendada</span>
                                            @elseif($visita->status == 'concluida')
                                                <span class="badge bg-success">Concluída</span>
                                            @elseif($visita->status == 'cancelada')
                                                <span class="badge bg-danger">Cancelada</span>
                                            @else
                                                <span class="badge bg-secondary">{{ $visita->status }}</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <a href="{{ route('visitas.show', $visita->id) }}"
                                                    class="btn btn-info btn-sm">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="{{ route('visitas.edit', $visita->id) }}"
                                                    class="btn btn-warning btn-sm">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal"
                                                    data-bs-target="#deleteModal{{ $visita->id }}">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>

                                            <!-- Modal de confirmação de exclusão -->
                                            <div class="modal fade" id="deleteModal{{ $visita->id }}" tabindex="-1"
                                                aria-labelledby="deleteModalLabel{{ $visita->id }}" aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title"
                                                                id="deleteModalLabel{{ $visita->id }}">Confirmar Exclusão
                                                            </h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            Tem certeza que deseja excluir a visita de
                                                            {{ $visita->nome_visitante }}?
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary"
                                                                data-bs-dismiss="modal">Cancelar</button>
                                                            <form action="{{ route('visitas.destroy', $visita->id) }}"
                                                                method="POST">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="submit"
                                                                    class="btn btn-danger">Excluir</button>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center">Nenhuma visita encontrada.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    {{-- <div class="mt-4">
                        {{ $visitas->links() }}
                    </div> --}}
                </div>
            </div>
        </div>
    </div>

    <script>
        window.onload = function() {
            setTimeout(function() {
                var successAlert = document.getElementById('alert-success');
                if (successAlert) {
                    successAlert.style.opacity = '0';
                    setTimeout(function() {
                        successAlert.remove();
                    }, 500); // Aguarda a transição antes de remover o elemento
                }
            }, 10000);

            setTimeout(function() {
                var errorAlert = document.getElementById('alert-error');
                if (errorAlert) {
                    errorAlert.style.opacity = '0';
                    setTimeout(function() {
                        errorAlert.remove();
                    }, 500); // Aguarda a transição antes de remover o elemento
                }
            }, 10000);
        };
    </script>
@endsection