@extends('layouts.admin', [
    'title' => 'Detail Mahasiswa',
    'header' => 'Detail Mahasiswa'
])

@php
    $suratPreviewUrl = $mahasiswa->suratPreviewUrl();
    $suratPreviewType = $mahasiswa->suratPreviewType();
    $suratDownloadUrl = $mahasiswa->suratDownloadUrl();
@endphp

@section('admin_content')
<div class="container-fluid">
    <div class="card detail-shell border-0 shadow-sm">
        <div class="card-header bg-white border-0 detail-shell__header detail-shell__header--student">
            <div class="d-flex align-items-center">
                <div class="detail-shell__avatar mr-3">
                    @if($mahasiswa->foto)
                        <img src="{{ asset($mahasiswa->foto) }}" alt="{{ $mahasiswa->nama_lengkap }}">
                    @else
                        <span>{{ strtoupper(substr($mahasiswa->nama_lengkap, 0, 1)) }}</span>
                    @endif
                </div>
                <div>
                    <span class="detail-shell__eyebrow">Profil Mahasiswa</span>
                    <h3 class="mb-1">{{ $mahasiswa->nama_lengkap }}</h3>
                    <p class="text-muted mb-0">{{ $mahasiswa->nama_program_studi }} - Semester {{ $mahasiswa->semester }}</p>
                </div>
            </div>

            <div class="detail-shell__actions">
                <a href="{{ route('admin.mahasiswa.edit', $mahasiswa->id) }}" class="btn btn-warning rounded-pill px-4">Edit</a>
                <a href="{{ route('admin.mahasiswa.index') }}" class="btn btn-light border rounded-pill px-4">Kembali</a>
            </div>
        </div>

        <div class="card-body detail-shell__body">
            <div class="detail-grid">
                <div class="detail-card">
                    <span class="detail-card__eyebrow">Identitas</span>
                    <div class="detail-card__row"><span>Nama Lengkap</span><strong>{{ $mahasiswa->nama_lengkap }}</strong></div>
                    <div class="detail-card__row"><span>Tempat, Tanggal Lahir</span><strong>{{ $mahasiswa->tempat_lahir }}, {{ $mahasiswa->tanggal_lahir }}</strong></div>
                    <div class="detail-card__row"><span>Jenis Kelamin</span><strong>{{ $mahasiswa->jenis_kelamin }}</strong></div>
                    <div class="detail-card__row"><span>Daerah Asal</span><strong>{{ $mahasiswa->daerah_asal }}</strong></div>
                    <div class="detail-card__row"><span>No HP</span><strong>{{ $mahasiswa->no_hp }}</strong></div>
                </div>

                <div class="detail-card">
                    <span class="detail-card__eyebrow">Akademik</span>
                    <div class="detail-card__row"><span>Perguruan Tinggi</span><strong>{{ $mahasiswa->perguruanTinggi->nama_perguruan_tinggi ?? $mahasiswa->nama_perguruan_tinggi }}</strong></div>
                    <div class="detail-card__row"><span>Program Studi</span><strong>{{ $mahasiswa->nama_program_studi }}</strong></div>
                    <div class="detail-card__row"><span>NIM</span><strong>{{ $mahasiswa->nim }}</strong></div>
                    <div class="detail-card__row"><span>Semester</span><strong>{{ $mahasiswa->semester }}</strong></div>
                    <div class="detail-card__row"><span>Kelompok KKN</span><strong>{{ $mahasiswa->dataKelompok?->masterKelompok?->nama_kelompok ? $mahasiswa->dataKelompok->masterKelompok->nama_kelompok . ' (' . $mahasiswa->dataKelompok->masterKelompok->kode_kelompok . ')' : 'Belum ditempatkan' }}</strong></div>
                    @if($mahasiswa->perguruanTinggi)
                        <div class="detail-card__row"><span>Kode Master PT</span><strong>{{ $mahasiswa->perguruanTinggi->kode_pt }}</strong></div>
                    @endif
                </div>

                <div class="detail-card">
                    <span class="detail-card__eyebrow">Data Kelompok</span>
                    <div class="detail-card__row"><span>Dosen Pembimbing Lapangan</span><strong>{{ $mahasiswa->dataKelompok?->dosenPembimbingLapangan?->nama_lengkap ?? '-' }}</strong></div>
                    <div class="detail-card__row"><span>Nama Kelompok</span><strong>{{ $mahasiswa->dataKelompok?->masterKelompok?->nama_kelompok ? $mahasiswa->dataKelompok->masterKelompok->nama_kelompok . ' (' . $mahasiswa->dataKelompok->masterKelompok->kode_kelompok . ')' : '-' }}</strong></div>
                    <div class="detail-card__row"><span>Wilayah</span><strong>{{ $mahasiswa->dataKelompok?->kabupaten?->nama_kabupaten ?? '-' }}, {{ $mahasiswa->dataKelompok?->kecamatan?->nama_kecamatan ?? '-' }}, {{ $mahasiswa->dataKelompok?->desa?->nama_desa ?? '-' }}</strong></div>
                </div>

                <div class="detail-card">
                    <span class="detail-card__eyebrow">Input Oleh</span>
                    <div class="detail-card__row"><span>Nama Operator</span><strong>{{ $mahasiswa->user->name ?? 'Belum terhubung' }}</strong></div>
                    <div class="detail-card__row"><span>Email Operator</span><strong>{{ $mahasiswa->user->email ?? '-' }}</strong></div>
                    <div class="detail-card__row"><span>Role</span><strong>{{ $mahasiswa->user->role ?? '-' }}</strong></div>
                </div>

                <div class="detail-card detail-card--full">
                    <span class="detail-card__eyebrow">Lampiran</span>
                    <div class="row">
                        <div class="col-md-6 mb-3 mb-md-0">
                            <div class="document-card">
                                <span class="document-card__label">Foto Mahasiswa</span>
                                @if($mahasiswa->foto)
                                    <img src="{{ asset($mahasiswa->foto) }}" alt="{{ $mahasiswa->nama_lengkap }}" class="img-fluid rounded">
                                @else
                                    <div class="text-muted">Belum ada foto.</div>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="document-card">
                                <span class="document-card__label">Surat Pendukung</span>
                                @if($suratPreviewUrl && $suratPreviewType === 'pdf')
                                    <div class="document-card__preview-shell">
                                        <iframe src="{{ $suratPreviewUrl }}" class="document-card__iframe" title="Preview surat mahasiswa"></iframe>
                                    </div>
                                    <div class="document-card__actions">
                                        <a href="{{ $suratPreviewUrl }}" class="btn btn-outline-primary rounded-pill" target="_blank" rel="noopener">
                                            <i class="fas fa-external-link-alt mr-1"></i> Buka Surat
                                        </a>
                                        <a href="{{ $suratDownloadUrl }}" class="btn btn-light border rounded-pill">
                                            <i class="fas fa-download mr-1"></i> Unduh
                                        </a>
                                    </div>
                                @elseif($suratPreviewUrl && $suratPreviewType === 'image')
                                    <div class="document-card__preview-shell document-card__preview-shell--image">
                                        <img src="{{ $suratPreviewUrl }}" alt="Preview surat mahasiswa" class="document-card__image">
                                    </div>
                                    <div class="document-card__actions">
                                        <a href="{{ $suratPreviewUrl }}" class="btn btn-outline-primary rounded-pill" target="_blank" rel="noopener">
                                            <i class="fas fa-expand mr-1"></i> Buka Surat
                                        </a>
                                        <a href="{{ $suratDownloadUrl }}" class="btn btn-light border rounded-pill">
                                            <i class="fas fa-download mr-1"></i> Unduh
                                        </a>
                                    </div>
                                @elseif($suratDownloadUrl)
                                    <p class="document-card__hint">Preview otomatis tersedia untuk PDF, JPG, JPEG, dan PNG. Dokumen ini tetap bisa dibuka dari tombol di bawah.</p>
                                    <a href="{{ $suratDownloadUrl }}" class="btn btn-outline-primary rounded-pill" target="_blank" rel="noopener">
                                        <i class="fas fa-file-alt mr-1"></i> Buka Surat
                                    </a>
                                @else
                                    <div class="text-muted">Belum ada surat.</div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .detail-shell { border-radius: 24px; overflow: hidden; }
    .detail-shell__header {
        padding: 2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
        background: radial-gradient(circle at top right, rgba(6, 214, 160, 0.14), transparent 34%), linear-gradient(180deg, #fbfffe 0%, #f3fbf8 100%);
    }
    .detail-shell__header--student {
        background: radial-gradient(circle at top right, rgba(6, 214, 160, 0.14), transparent 34%), linear-gradient(180deg, #fbfffe 0%, #f3fbf8 100%);
    }
    .detail-shell__eyebrow, .detail-card__eyebrow {
        display: inline-block; margin-bottom: .55rem; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #0f9f7a;
    }
    .detail-shell__avatar {
        width: 68px; height: 68px; border-radius: 20px; overflow: hidden; flex-shrink: 0;
        background: linear-gradient(135deg, #0f9f7a, #38c8a1); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem;
    }
    .detail-shell__avatar img { width: 100%; height: 100%; object-fit: cover; }
    .detail-shell__body { padding: 2rem; background: #f7f9fc; }
    .detail-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .detail-card {
        background: #fff; border: 1px solid #e7edf5; border-radius: 20px; padding: 1.5rem;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    }
    .detail-card--full { grid-column: 1 / -1; }
    .detail-card__row {
        display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid #edf2f7;
    }
    .detail-card__row:last-child { border-bottom: 0; padding-bottom: 0; }
    .detail-card__row span { color: #6c7a89; }
    .detail-card__row strong { color: #1f2d3d; text-align: right; }
    .document-card {
        height: 100%; padding: 1rem 1.1rem; border: 1px dashed #bfd0e0; border-radius: 18px;
        background: linear-gradient(180deg, #fcfffe 0%, #f5fbf9 100%);
    }
    .document-card__label { display: block; margin-bottom: .75rem; font-weight: 600; color: #22313f; }
    .document-card__preview-shell {
        overflow: hidden;
        border: 1px solid #d8e2ee;
        border-radius: 16px;
        background: #fff;
    }
    .document-card__preview-shell--image {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 360px;
        padding: 1rem;
    }
    .document-card__iframe {
        width: 100%;
        min-height: 420px;
        border: 0;
        background: #fff;
    }
    .document-card__image {
        display: block;
        max-width: 100%;
        max-height: 520px;
        border-radius: 12px;
        object-fit: contain;
    }
    .document-card__actions {
        display: flex;
        gap: .75rem;
        flex-wrap: wrap;
        margin-top: 1rem;
    }
    .document-card__hint {
        margin-bottom: 1rem;
        color: #5b6b79;
    }
    @media (max-width: 991.98px) { .detail-grid { grid-template-columns: 1fr; } }
</style>
@endsection