@extends('layouts.app')

@section('content')
<style>
    .welcome-card {
        background: linear-gradient(135deg, #6366f1, #4f46e5);
        color: #fff;
        border-radius: 12px;
        padding: 30px;
        margin-bottom: 30px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        text-align: center;
        animation: fadeSlideUp 0.8s ease forwards;
    }

    @keyframes fadeSlideUp {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .custom-table {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .custom-table thead {
        background: linear-gradient(135deg, #6366f1, #4f46e5);
        color: #fff;
    }

    .custom-table th, .custom-table td {
        padding: 15px;
        text-align: center;
        vertical-align: middle;
    }

    .custom-table tbody tr:nth-child(even) {
        background-color: #f9fafb;
    }

    .badge-status {
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: bold;
        display: inline-block;
    }

    .badge-menunggu {
        background-color: #facc15; /* kuning */
        color: #92400e;
    }

    .badge-diterima {
        background-color: #34d399; /* hijau */
        color: #064e3b;
    }

    .badge-ditolak {
        background-color: #f87171; /* merah */
        color: #7f1d1d;
    }
</style>

<div class="container py-5">
    <div class="welcome-card">
        <h2 class="mb-2" style="font-weight: 700;">Selamat Datang di Dashboard Admin</h2>
        <p style="font-size: 1.1rem;">Halo, <strong>{{ auth()->user()->name }}</strong>! Berikut daftar pendaftaran kegiatan mahasiswa.</p>
    </div>

    @if($kegiatans->count())
        <div class="table-responsive">
            <table class="custom-table">
                <thead>
                    <tr>
                        <th>Nama Mahasiswa</th>
                        <th>NIM</th>
                        <th>Kegiatan</th>
                        <th>Tanggal</th>
                        <th>Alasan</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($kegiatans as $kegiatan)
                        <tr>
                            <td>{{ $kegiatan->nama_mahasiswa }}</td>
                            <td>{{ $kegiatan->nim }}</td>
                            <td>{{ $kegiatan->nama_kegiatan }}</td>
                            <td>{{ $kegiatan->tanggal_kegiatan }}</td>
                            <td>{{ $kegiatan->alasan }}</td>
                            <td>
                                @if($kegiatan->status == 'menunggu')
                                    <span class="badge-status badge-menunggu">Menunggu</span>
                                @elseif($kegiatan->status == 'disetujui')
                                    <span class="badge-status badge-diterima">Disetujui</span>
                                @else
                                    <span class="badge-status badge-ditolak">{{ ucfirst($kegiatan->status) }}</span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @else
        <p class="text-center text-muted mt-4">Belum ada data pendaftaran kegiatan.</p>
    @endif
</div>
@endsection