@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="row">
    <!-- Header Toolbar -->
    <div class="col-12 mb-4 d-flex justify-content-between align-items-center flex-wrap gap-3">
        <div>
            <h3 class="font-bold text-white m-0">Ringkasan Dashboard</h3>
            <p class="text-muted small m-0">
                Informasi statistik data terpadu Universitas Cenderawasih 
                <span class="badge {{ Auth::user()->kode_role === 'ADMIN' ? 'bg-danger-subtle text-danger' : 'bg-primary-subtle text-primary' }} ms-1">
                    {{ Auth::user()->kode_role }}
                </span>
            </p>
        </div>
        <div class="d-flex flex-wrap gap-2">
            <button type="button" class="btn btn-outline-secondary btn-sm rounded-pill px-3" onclick="window.location.reload()">
                <i class="fas fa-sync-alt me-1"></i> Refresh
            </button>
            <a href="{{ route('public.home') }}" target="_blank" class="btn btn-primary btn-sm rounded-pill px-3">
                <i class="fas fa-eye me-1"></i> Lihat Portal Publik
            </a>
            @if (Auth::user()->kode_role === 'ADMIN')
                <a href="{{ route('users.index') }}" class="btn btn-warning btn-sm text-dark font-bold rounded-pill px-3">
                    <i class="fas fa-user-plus me-1"></i> Kelola User
                </a>
            @endif
            <form action="{{ route('logout') }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin keluar (Logout)?')" class="d-inline">
                @csrf
                <button type="submit" class="btn btn-outline-danger btn-sm rounded-pill px-3 font-semibold">
                    <i class="fas fa-sign-out-alt me-1"></i> Logout
                </button>
            </form>
        </div>
    </div>

    <!-- 4 Quick Stats Cards in Dark Portal Visual Style -->
    <div class="col-md-3 mb-4">
        <div class="card card-custom p-4 border-start border-4 border-primary h-100">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <span class="text-muted text-uppercase small font-bold">Data Wisudawan</span>
                    <h2 class="font-bold text-white mt-2 mb-0">{{ number_format($totalWisudawan) }}</h2>
                </div>
                <div class="p-3 rounded-3 bg-primary-subtle text-primary fs-4">
                    <i class="fas fa-graduation-cap"></i>
                </div>
            </div>
            <hr class="my-3 opacity-25">
            <a href="{{ route('wisudawan.index') }}" class="text-primary text-decoration-none small font-semibold d-flex align-items-center justify-content-between">
                <span>Lihat Detail Wisudawan</span>
                <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>

    <div class="col-md-3 mb-4">
        <div class="card card-custom p-4 border-start border-4 border-success h-100">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <span class="text-muted text-uppercase small font-bold">Data Penerimaan</span>
                    <h2 class="font-bold text-white mt-2 mb-0">{{ number_format($totalPendaftar) }}</h2>
                </div>
                <div class="p-3 rounded-3 bg-success-subtle text-success fs-4">
                    <i class="fas fa-users"></i>
                </div>
            </div>
            <hr class="my-3 opacity-25">
            <a href="{{ route('penerimaan.index') }}" class="text-success text-decoration-none small font-semibold d-flex align-items-center justify-content-between">
                <span>Lihat Detail Penerimaan</span>
                <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>

    <div class="col-md-3 mb-4">
        <div class="card card-custom p-4 border-start border-4 border-warning h-100">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <span class="text-muted text-uppercase small font-bold">Status Mahasiswa</span>
                    <h2 class="font-bold text-white mt-2 mb-0">{{ number_format($totalAktif) }}</h2>
                </div>
                <div class="p-3 rounded-3 bg-warning-subtle text-warning fs-4">
                    <i class="fas fa-chart-bar"></i>
                </div>
            </div>
            <hr class="my-3 opacity-25">
            <a href="{{ route('aklus.index') }}" class="text-warning text-decoration-none small font-semibold d-flex align-items-center justify-content-between">
                <span>Lihat Detail Status Mahasiswa</span>
                <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>

    <div class="col-md-3 mb-4">
        <div class="card card-custom p-4 border-start border-4 border-info h-100">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <span class="text-muted text-uppercase small font-bold">Program Studi</span>
                    <h2 class="font-bold text-white mt-2 mb-0">{{ number_format($totalProdi) }}</h2>
                </div>
                <div class="p-3 rounded-3 bg-info-subtle text-info fs-4">
                    <i class="fas fa-university"></i>
                </div>
            </div>
            <hr class="my-3 opacity-25">
            <a href="{{ route('prodi.index') }}" class="text-info text-decoration-none small font-semibold d-flex align-items-center justify-content-between">
                <span>Lihat Detail Prodi</span>
                <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>

    <!-- Tracer Study Kemdikbud Visual Analytics Component -->
    <div class="col-12 mb-4">
        <x-tracer-charts :data="$tracerStatistikData" title="Visualisasi Tracer Study (Masa Tunggu Lulusan)" />
    </div>

    <!-- Admin Quick Actions Banner (Visible to Admin Only) -->

    @if (Auth::user()->kode_role === 'ADMIN')
        <div class="col-12 mb-4">
            <div class="card card-custom p-4 border-start border-primary border-4 shadow-sm">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                    <div>
                        <h5 class="font-bold text-white m-0"><i class="fas fa-tools text-primary me-2"></i> Panel Aksi Administrator</h5>
                        <p class="text-muted small m-0">Fitur import data massal via file Excel/CSV, unduh format template resmi, dan kelola pengguna</p>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <!-- Dropdown Download Template -->
                        <div class="dropdown">
                            <button class="btn btn-outline-success btn-sm rounded-pill px-3 dropdown-toggle font-semibold" type="button" data-bs-toggle="dropdown">
                                <i class="fas fa-file-excel me-1"></i> Download Template Excel (.XLS)
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end shadow border-0 rounded-3">
                                <li>
                                    <a class="dropdown-item py-2" href="{{ route('template.wisudawan') }}">
                                        <i class="fas fa-file-excel text-primary me-2"></i> Template Data Wisudawan (.XLS)
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item py-2" href="{{ route('template.penerimaan') }}">
                                        <i class="fas fa-file-excel text-success me-2"></i> Template Data Penerimaan (.XLS)
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item py-2" href="{{ route('template.aklus') }}">
                                        <i class="fas fa-file-excel text-warning me-2"></i> Template Data AKLUS (.XLS)
                                    </a>
                                </li>
                            </ul>
                        </div>

                        <button type="button" class="btn btn-outline-primary btn-sm rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#modalImportWisudawan">
                            <i class="fas fa-file-import me-1"></i> Import Wisudawan
                        </button>
                        <button type="button" class="btn btn-outline-success btn-sm rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#modalImportPenerimaan">
                            <i class="fas fa-file-import me-1"></i> Import Penerimaan
                        </button>
                        <button type="button" class="btn btn-outline-warning btn-sm rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#modalImportAklus">
                            <i class="fas fa-file-import me-1"></i> Import AKLUS
                        </button>
                        <a href="{{ route('users.index') }}" class="btn btn-primary btn-sm rounded-pill px-3 font-semibold">
                            <i class="fas fa-user-plus me-1"></i> Kelola User
                        </a>
                        <a href="{{ route('log_aktivitas.index') }}" class="btn btn-warning btn-sm text-dark rounded-pill px-3 font-bold">
                            <i class="fas fa-history me-1"></i> Log Aktivitas ({{ number_format($totalLogsCount ?? 0) }})
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modals Import on Dashboard -->
        <div class="modal fade" id="modalImportWisudawan" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content rounded-4 border-0 shadow">
                    <div class="modal-header bg-primary text-white rounded-top-4">
                        <h5 class="modal-title font-bold"><i class="fas fa-file-excel me-2"></i> Import Data Wisudawan (.CSV / Excel)</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <form action="{{ route('import.wisudawan') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="modal-body p-4">
                            <div class="d-flex justify-content-between align-items-center mb-3 p-3 bg-light rounded-3">
                                <div>
                                    <small class="text-muted d-block">Belum memiliki format file?</small>
                                    <strong class="text-white small">Unduh template CSV resmi</strong>
                                </div>
                                <a href="{{ route('template.wisudawan') }}" class="btn btn-success btn-sm rounded-pill font-bold">
                                    <i class="fas fa-download me-1"></i> Download Template
                                </a>
                            </div>

                            <label class="form-label small font-bold">Pilih File CSV / Excel *</label>
                            <input type="file" name="file_excel" required accept=".csv,.xlsx,.xls" class="form-control mb-2">
                            <small class="text-muted d-block">Kolom: No Alumni, NIM, Nama Lengkap, JK, Kode Prodi, Fakultas, Tahun, IPK, Predikat, No Ijazah, Tgl Ijazah, Status Ijazah.</small>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-sm rounded-3" data-bs-dismiss="modal">Batal</button>
                            <button type="submit" class="btn btn-primary btn-sm rounded-3 px-4 font-bold">Upload & Import</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalImportPenerimaan" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content rounded-4 border-0 shadow">
                    <div class="modal-header bg-success text-white rounded-top-4">
                        <h5 class="modal-title font-bold"><i class="fas fa-file-excel me-2"></i> Import Data Penerimaan (.CSV / Excel)</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <form action="{{ route('import.penerimaan') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="modal-body p-4">
                            <div class="d-flex justify-content-between align-items-center mb-3 p-3 bg-light rounded-3">
                                <div>
                                    <small class="text-muted d-block">Belum memiliki format file?</small>
                                    <strong class="text-white small">Unduh template CSV resmi</strong>
                                </div>
                                <a href="{{ route('template.penerimaan') }}" class="btn btn-success btn-sm rounded-pill font-bold">
                                    <i class="fas fa-download me-1"></i> Download Template
                                </a>
                            </div>

                            <label class="form-label small font-bold">Pilih File CSV / Excel *</label>
                            <input type="file" name="file_excel" required accept=".csv,.xlsx,.xls" class="form-control mb-2">
                            <small class="text-muted d-block">Kolom: Kode Penerimaan, Kode Prodi, Kode Jalur, Tahun, Daya Tampung, Pendaftar, Diterima, Registrasi.</small>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-sm rounded-3" data-bs-dismiss="modal">Batal</button>
                            <button type="submit" class="btn btn-success btn-sm rounded-3 px-4 font-bold">Upload & Import</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalImportAklus" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content rounded-4 border-0 shadow">
                    <div class="modal-header bg-warning text-dark rounded-top-4">
                        <h5 class="modal-title font-bold"><i class="fas fa-file-excel me-2"></i> Import Data AKLUS (.CSV / Excel)</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <form action="{{ route('import.aklus') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="modal-body p-4">
                            <div class="d-flex justify-content-between align-items-center mb-3 p-3 bg-light rounded-3">
                                <div>
                                    <small class="text-muted d-block">Belum memiliki format file?</small>
                                    <strong class="text-white small">Unduh template CSV resmi</strong>
                                </div>
                                <a href="{{ route('template.aklus') }}" class="btn btn-warning btn-sm text-dark rounded-pill font-bold">
                                    <i class="fas fa-download me-1"></i> Download Template
                                </a>
                            </div>

                            <label class="form-label small font-bold">Pilih File CSV / Excel *</label>
                            <input type="file" name="file_excel" required accept=".csv,.xlsx,.xls" class="form-control mb-2">
                            <small class="text-muted d-block">Kolom: Kode AKLUS, Kode Prodi, Kode Periode, Tahun, Semester, Mhs Aktif, Mhs Lulus, Mhs Cuti, Mhs Nonaktif.</small>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-sm rounded-3" data-bs-dismiss="modal">Batal</button>
                            <button type="submit" class="btn btn-warning btn-sm text-dark rounded-3 px-4 font-bold">Upload & Import</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif

    <!-- Recent Activity & Wisudawan Overview -->
    <div class="col-md-8 mb-4">
        <div class="card card-custom p-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h5 class="font-bold m-0 text-white"><i class="fas fa-graduation-cap text-primary me-2"></i> Data Wisudawan Terbaru</h5>
                <a href="{{ route('wisudawan.index') }}" class="btn btn-outline-primary btn-sm rounded-pill px-3">Lihat Semua</a>
            </div>
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead>
                        <tr class="small font-bold text-uppercase">
                            <th>Nama Lengkap</th>
                            <th>NIM</th>
                            <th>Program Studi</th>
                            <th>IPK</th>
                            <th>Predikat</th>
                            <th class="text-end">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($recentWisudawan as $w)
                            <tr>
                                <td class="font-semibold text-white">{{ $w->nama_lengkap }}</td>
                                <td class="font-mono text-muted small">{{ $w->nim }}</td>
                                <td class="text-slate-300">{{ $w->prodi->nama_prodi ?? '-' }} ({{ $w->prodi->jenjang ?? 'S1' }})</td>
                                <td><span class="badge bg-primary px-2.5 py-1">{{ $w->ipk }}</span></td>
                                <td><span class="badge bg-info-subtle text-info border border-info-subtle">{{ $w->predikat }}</span></td>
                                <td class="text-end">
                                    <a href="{{ route('public.tracer.login', ['nim' => $w->nim]) }}" target="_blank" class="btn btn-outline-primary btn-sm rounded-pill px-2.5 py-1 font-semibold" style="font-size: 0.75rem;" title="Isi Tracer Study untuk alumni ini">
                                        <i class="fas fa-edit me-1"></i> Isi Tracer
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="6" class="text-center text-muted py-4">Belum ada data wisudawan.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Quick Stats Tracer Study -->
    <div class="col-md-4 mb-4">
        <div class="card card-custom p-4">
            <h5 class="font-bold mb-3 text-white"><i class="fas fa-poll text-primary me-2"></i> Progres Tracer Study</h5>
            <div class="text-center py-4">
                <h1 class="display-4 font-bold text-primary">{{ $tracerPersen }}%</h1>
                <p class="text-muted small">Status Kuesioner Alumni Selesai</p>
                <div class="progress rounded-pill mb-3" style="height: 10px;">
                    <div class="progress-bar bg-primary" role="progressbar" style="width: {{ $tracerPersen }}%"></div>
                </div>
                <div class="d-flex justify-content-between text-muted small">
                    <span>Selesai: <strong class="text-white">{{ number_format($tracerSelesai) }}</strong></span>
                    <span>Total Target: <strong class="text-white">{{ number_format($tracerTotal) }}</strong></span>
                </div>
            </div>
            <div class="d-flex flex-column gap-2 mt-2">
                <a href="{{ route('public.tracer.login') }}" target="_blank" class="btn btn-primary w-100 rounded-pill font-semibold">
                    <i class="fas fa-edit me-1"></i> Form Isi Tracer Study
                </a>
                <a href="{{ route('tracer.index') }}" class="btn btn-outline-secondary w-100 rounded-pill font-semibold">
                    <i class="fas fa-chart-pie me-1"></i> Buka Modul & Laporan Tracer
                </a>
            </div>
        </div>
    </div>

    @if (Auth::user() && Auth::user()->kode_role === 'ADMIN' && count($recentLogs) > 0)
        <!-- Recent Log Aktivitas Section (Admin Only) -->
        <div class="col-12 mb-4">
            <div class="card card-custom p-4">
                <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                    <div>
                        <h5 class="font-bold m-0 text-white d-flex align-items-center gap-2">
                            <i class="fas fa-history text-warning"></i> Log Aktivitas Sistem Terkini
                        </h5>
                        <p class="text-muted small m-0">Rekam jejak aktivitas mutakhir dari pengguna, operator, mahasiswa, dan publik</p>
                    </div>
                    <div class="d-flex gap-2">
                        <a href="{{ route('export.log_aktivitas') }}" class="btn btn-outline-success btn-sm rounded-pill px-3 font-semibold">
                            <i class="fas fa-file-excel me-1"></i> Ekspor Log
                        </a>
                        <a href="{{ route('log_aktivitas.index') }}" class="btn btn-warning btn-sm text-dark rounded-pill px-3 font-bold">
                            <i class="fas fa-external-link-alt me-1"></i> Lihat Semua Log ({{ number_format($totalLogsCount) }})
                        </a>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead>
                            <tr class="small font-bold text-uppercase">
                                <th style="width: 140px;">Waktu</th>
                                <th style="width: 180px;">Pelaksana</th>
                                <th style="width: 120px;">Modul</th>
                                <th style="width: 130px;">Aktivitas</th>
                                <th>Keterangan Aktivitas</th>
                                <th class="text-end" style="width: 100px;">IP Address</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($recentLogs as $log)
                                <tr>
                                    <td>
                                        <div class="text-white small font-semibold">{{ $log->created_at ? $log->created_at->diffForHumans() : '-' }}</div>
                                        <div class="text-muted font-monospace" style="font-size: 0.72rem;">{{ $log->created_at ? $log->created_at->format('d/m/Y H:i') : '-' }}</div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <span class="badge {{ $log->role_badge_class }}" style="font-size: 0.65rem;">
                                                {{ $log->role }}
                                            </span>
                                            <span class="text-white small font-semibold text-truncate" style="max-width: 120px;">
                                                {{ $log->nama_user ?? ($log->username ?? 'Guest') }}
                                            </span>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-dark border border-secondary text-light small">
                                            {{ $log->modul }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge {{ $log->aktivitas_badge_class }} small font-semibold">
                                            {{ $log->aktivitas }}
                                        </span>
                                    </td>
                                    <td class="text-light small">
                                        {{ Str::limit($log->deskripsi, 85) }}
                                    </td>
                                    <td class="text-end font-monospace text-muted small">
                                        {{ $log->ip_address ?? '127.0.0.1' }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    @endif
</div>
@endsection