@extends('layouts.app')

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

    .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, #4f46e5, #6366f1);
        color: #fff;
    }

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

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

<div class="container py-5">
    <div class="welcome-card">
        <h2>Halo, <strong>{{ Auth::user()->name }}</strong>!</h2>
        <p>Berikut adalah data semua pendaftaran kegiatan mahasiswa.</p>
    </div>

    @if(session('success'))
        <div class="alert alert-success text-center">{{ session('success') }}</div>
    @endif

    <div class="table-responsive">
        <table class="custom-table">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Nama Mahasiswa</th>
                    <th>NIM</th>
                    <th>Fakultas</th>
                    <th>Prodi</th>
                    <th>Kegiatan</th>
                    <th>Tanggal</th>
                    <th>Alasan</th>
                    <th>Status</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($kegiatans as $key => $kegiatan)
                    <tr>
                        <td>{{ $key + 1 }}</td>
                        <td>{{ $kegiatan->nama_mahasiswa }}</td>
                        <td>{{ $kegiatan->nim }}</td>
                        <td>{{ $kegiatan->fakultas }}</td>
                        <td>{{ $kegiatan->prodi }}</td>
                        <td>{{ $kegiatan->nama_kegiatan }}</td>
                        <td>{{ $kegiatan->tanggal_kegiatan }}</td>
                        <td>{{ $kegiatan->alasan }}</td>
                        <td>{{ ucfirst($kegiatan->status) }}</td>
                        <td>
    <div class="d-flex flex-wrap gap-2 justify-content-center">

        <form action="{{ route('admin.approve', $kegiatan->id) }}" method="POST">
            @csrf
            <div class="card p-2 shadow-sm" style="border-radius: 12px; background: #dcfce7; border: 2px solid #22c55e;">
                <button type="submit" class="btn btn-success btn-sm fw-bold">
                    ✅ Setujui
                </button>
            </div>
        </form>

        <form action="{{ route('admin.reject', $kegiatan->id) }}" method="POST">
            @csrf
            <div class="card p-2 shadow-sm" style="border-radius: 12px; background: #fef9c3; border: 2px solid #eab308;">
                <button type="submit" class="btn btn-warning btn-sm fw-bold">
                    ❌ Tolak
                </button>
            </div>
        </form>

        <a href="{{ route('admin.edit', $kegiatan->id) }}">
            <div class="card p-2 shadow-sm" style="border-radius: 12px; background: #dbeafe; border: 2px solid #3b82f6;">
                <button type="button" class="btn btn-primary btn-sm fw-bold">
                    ✏️ Edit
                </button>
            </div>
        </a>

        <form action="{{ route('admin.delete', $kegiatan->id) }}" method="POST" onsubmit="return confirm('Yakin ingin menghapus?')">
            @csrf
            <div class="card p-2 shadow-sm" style="border-radius: 12px; background: #fee2e2; border: 2px solid #ef4444;">
                <button type="submit" class="btn btn-danger btn-sm fw-bold">
                    🗑️ Hapus
                </button>
            </div>
        </form>

    </div>
</td>

                    </tr>
                @empty
                    <tr>
                        <td colspan="10" class="text-center text-muted">Belum ada data pendaftaran.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection