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

@php
    $suratPreviewUrl = $dosen->suratPreviewUrl();
    $suratPreviewType = $dosen->suratPreviewType();
    $suratDownloadUrl = $dosen->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">
            <div class="d-flex align-items-center">
                <div class="detail-shell__avatar mr-3">
                    @if($dosen->foto)
                        <img src="{{ asset($dosen->foto) }}" alt="{{ $dosen->nama_lengkap }}">
                    @else
                        <span>{{ strtoupper(substr($dosen->nama_lengkap, 0, 1)) }}</span>
                    @endif
                </div>
                <div>
                    <span class="detail-shell__eyebrow">Profil Dosen</span>
                    <h3 class="mb-1">{{ $dosen->nama_lengkap }}</h3>
                    <p class="text-muted mb-0">{{ $dosen->nama_program_studi }} - {{ $dosen->perguruanTinggi->nama_perguruan_tinggi ?? $dosen->nama_perguruan_tinggi }}</p>
                </div>
            </div>

            <div class="detail-shell__actions">
                <a href="{{ route('admin.dosen.edit', $dosen->id) }}" class="btn btn-warning rounded-pill px-4">Edit</a>
                <a href="{{ route('admin.dosen.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>{{ $dosen->nama_lengkap }}</strong></div>
                    <div class="detail-card__row"><span>Tempat, Tanggal Lahir</span><strong>{{ $dosen->tempat_lahir }}, {{ $dosen->tanggal_lahir }}</strong></div>
                    <div class="detail-card__row"><span>Jenis Kelamin</span><strong>{{ $dosen->jenis_kelamin }}</strong></div>
                    <div class="detail-card__row"><span>Daerah Asal</span><strong>{{ $dosen->daerah_asal }}</strong></div>
                    <div class="detail-card__row"><span>No HP</span><strong>{{ $dosen->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>{{ $dosen->perguruanTinggi->nama_perguruan_tinggi ?? $dosen->nama_perguruan_tinggi }}</strong></div>
                    <div class="detail-card__row"><span>Program Studi</span><strong>{{ $dosen->nama_program_studi }}</strong></div>
                    <div class="detail-card__row"><span>Fakultas</span><strong>{{ $dosen->fakultas }}</strong></div>
                    <div class="detail-card__row"><span>NIDN / NUPTK</span><strong>{{ $dosen->nidn_nuptk }}</strong></div>
                    @if($dosen->perguruanTinggi)
                        <div class="detail-card__row"><span>Kode Master PT</span><strong>{{ $dosen->perguruanTinggi->kode_pt }}</strong></div>
                    @endif
                </div>

                <div class="detail-card">
                    <span class="detail-card__eyebrow">Input Oleh</span>
                    <div class="detail-card__row"><span>Nama Operator</span><strong>{{ $dosen->user->name ?? 'Belum terhubung' }}</strong></div>
                    <div class="detail-card__row"><span>Email Operator</span><strong>{{ $dosen->user->email ?? '-' }}</strong></div>
                    <div class="detail-card__row"><span>Role</span><strong>{{ $dosen->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 Dosen</span>
                                @if($dosen->foto)
                                    <img src="{{ asset($dosen->foto) }}" alt="{{ $dosen->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 Pernyataan Pimpinan</span>
                                @if($suratPreviewUrl && $suratPreviewType === 'pdf')
                                    <div class="document-card__preview-shell">
                                        <iframe src="{{ $suratPreviewUrl }}" class="document-card__iframe" title="Preview surat dosen"></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 dosen" 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(17, 138, 178, 0.12), transparent 32%), linear-gradient(180deg, #fbfcfe 0%, #f4f8fc 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: #118ab2;
    }
    .detail-shell__avatar {
        width: 68px; height: 68px; border-radius: 20px; overflow: hidden; flex-shrink: 0;
        background: linear-gradient(135deg, #118ab2, #5bc0eb); 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, #fcfdff 0%, #f8fbff 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