@extends('layouts.main')

@php
    use App\Models\TingkatKegiatan;

    $levelLabel = optional(TingkatKegiatan::find($sertifikasi->level))->tingkat ?? $sertifikasi->level;
@endphp

@section('judul')
    <h1 class="page-heading d-flex flex-column justify-content-center text-dark fw-bold fs-3 m-0">Detail Sertifikasi</h1>
@endsection

@section('breadchums')
    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0">
        <li class="breadcrumb-item text-muted"><a href="{{ route('home') }}" class="text-muted text-hover-primary">Home</a></li>
        <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
        <li class="breadcrumb-item text-muted"><a href="{{ route('sertifikasi.index') }}" class="text-muted text-hover-primary">Sertifikasi</a></li>
        <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
        <li class="breadcrumb-item text-muted">Detail</li>
    </ul>
@endsection

@section('isi')
    <style>
        .prestasi-break,
        .prestasi-break a { overflow-wrap: anywhere; }
        @media (max-width: 767.98px) {
            .prestasi-detail-actions .btn { width: 100%; }
        }
    </style>
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <div class="d-flex flex-column flex-column-fluid">
            <div id="kt_app_content" class="app-content flex-column-fluid">
                <div id="kt_app_content_container" class="app-container container-fluid">
                    <div class="d-flex flex-column flex-sm-row justify-content-sm-end gap-2 mb-5 prestasi-detail-actions">
                        @can('update prestasi-sertifikasi')
                            <a href="{{ route('sertifikasi.edit', $sertifikasi) }}" class="btn btn-warning btn-sm">Edit</a>
                        @endcan
                        <a href="{{ route('sertifikasi.index') }}" class="btn btn-light btn-sm">Kembali</a>
                    </div>

                    <div class="card shadow-sm mb-8 prestasi-break">
                        <div class="card-header"><div class="card-title fw-bold">Data Sertifikasi</div></div>
                        <div class="card-body">
                            <div class="row g-5">
                                <div class="col-md-4"><strong>Level</strong><br>{{ $levelLabel }}</div>
                                <div class="col-md-4"><strong>Tanggal Sertifikat</strong><br>{{ optional($sertifikasi->tgl_sertifikat)->format('d-m-Y') }}</div>
                                <div class="col-md-8"><strong>Nama</strong><br>{{ $sertifikasi->nama }}</div>
                                <div class="col-md-4"><strong>Penyelenggara</strong><br>{{ $sertifikasi->penyelenggara }}</div>
                                <div class="col-md-6"><strong>URL Kegiatan</strong><br><a href="{{ $sertifikasi->url_peserta }}" target="_blank">{{ $sertifikasi->url_peserta }}</a></div>
                                <div class="col-md-6"><strong>URL Sertifikat</strong><br><a href="{{ $sertifikasi->url_sertifikat }}" target="_blank">{{ $sertifikasi->url_sertifikat }}</a></div>
                                <div class="col-md-6"><strong>URL Foto UPP</strong><br>{{ $sertifikasi->url_foto_upp ? '' : '-' }}@if($sertifikasi->url_foto_upp)<a href="{{ $sertifikasi->url_foto_upp }}" target="_blank">{{ $sertifikasi->url_foto_upp }}</a>@endif</div>
                                <div class="col-md-6"><strong>URL Dokumen Undangan</strong><br>{{ $sertifikasi->url_dokumen_undangan ? '' : '-' }}@if($sertifikasi->url_dokumen_undangan)<a href="{{ $sertifikasi->url_dokumen_undangan }}" target="_blank">{{ $sertifikasi->url_dokumen_undangan }}</a>@endif</div>
                                <div class="col-12"><strong>Keterangan</strong><br>{{ $sertifikasi->keterangan ?: '-' }}</div>
                            </div>
                        </div>
                    </div>

                    <div class="row g-8">
                        <div class="col-lg-6">
                            <div class="card shadow-sm">
                                <div class="card-header"><div class="card-title fw-bold">Mahasiswa</div></div>
                                <div class="card-body table-responsive">
                                    <table class="table table-row-dashed">
                                        <thead><tr><th>NIM</th><th>Nama</th></tr></thead>
                                        <tbody>
                                            @foreach ($sertifikasi->mahasiswa as $mahasiswa)
                                                <tr><td>{{ $mahasiswa->nim }}</td><td>{{ $mahasiswa->nama }}</td></tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="card shadow-sm">
                                <div class="card-header"><div class="card-title fw-bold">Dosen Pendamping</div></div>
                                <div class="card-body table-responsive">
                                    <table class="table table-row-dashed">
                                        <thead><tr><th>NIDN/NUPTK</th><th>Nama</th><th>Surat Tugas</th></tr></thead>
                                        <tbody>
                                            @forelse ($sertifikasi->dosen as $dosen)
                                                <tr>
                                                    <td>{{ $dosen->nuptk }}</td>
                                                    <td>{{ $dosen->nama }}</td>
                                                    <td>{{ $dosen->url_surat_tugas ? '' : '-' }}@if($dosen->url_surat_tugas)<a href="{{ $dosen->url_surat_tugas }}" target="_blank">Lihat</a>@endif</td>
                                                </tr>
                                            @empty
                                                <tr><td colspan="3" class="text-muted">Belum ada dosen.</td></tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection