<?= $this->extend('layout/default') ?>

<?= $this->section('content') ?>

<style>
    .profile-sidebar {
        background: #fff;
        border-right: 1px solid #e2e8f0;
        padding: 2rem 0;
        text-align: center;
        height: 100%;
        min-height: calc(100vh - 100px);
    }
    .profile-img-placeholder {
        width: 120px;
        height: 120px;
        background: #e2e8f0;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 4rem;
        margin-bottom: 1rem;
    }
    .profile-name {
        font-weight: 700;
        color: #334155;
        font-size: 1.1rem;
        margin: 0.5rem 1rem;
        text-transform: uppercase;
    }
    .profile-nim {
        color: #64748b;
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
    }
    .profile-status {
        background: #0ea5e9;
        color: #fff;
        padding: 4px 16px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: bold;
        display: inline-block;
        margin-bottom: 2rem;
        text-transform: uppercase;
    }
    .profile-nav {
        text-align: left;
        list-style: none;
        padding: 0;
        margin: 0;
        border-top: 1px solid #e2e8f0;
    }
    .profile-nav li {
        border-bottom: 1px solid #e2e8f0;
    }
    .profile-nav a {
        display: block;
        padding: 12px 20px;
        color: #64748b;
        text-decoration: none;
        font-size: 0.875rem;
        transition: all 0.2s;
    }
    .profile-nav a:hover {
        background: #f8fafc;
        color: #334155;
    }
    .profile-nav a.active {
        background: #f1f5f9;
        color: #4f46e5;
        border-left: 4px solid #4f46e5;
        font-weight: 600;
    }
    .profile-nav i {
        margin-right: 10px;
        font-size: 1.1rem;
        vertical-align: middle;
    }
    
    .profile-content {
        padding: 2rem;
        background: #fff;
        min-height: calc(100vh - 100px);
    }
    .content-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid #e2e8f0;
        padding-bottom: 1rem;
        margin-bottom: 2rem;
    }
    .content-title {
        font-size: 1rem;
        font-weight: 600;
        color: #475569;
        text-transform: uppercase;
    }
    .nav-tabs {
        border-bottom: none;
        margin: 0;
    }
    .nav-tabs .nav-link {
        border: none;
        color: #64748b;
        font-weight: 500;
        padding: 0.5rem 1rem;
        background: transparent;
    }
    .nav-tabs .nav-link.active {
        color: #4f46e5;
        border-bottom: 2px solid #4f46e5;
    }
    
    .data-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border-top: 1px solid #e2e8f0;
    }
    .data-row {
        display: flex;
        padding: 12px 16px;
        border-bottom: 1px solid #e2e8f0;
    }
    .data-label {
        width: 150px;
        font-weight: 600;
        color: #475569;
        font-size: 0.875rem;
    }
    .data-label.required::after {
        content: " *";
        color: #ef4444;
    }
    .data-value {
        flex: 1;
        color: #334155;
        font-size: 0.875rem;
    }
    .section-title {
        grid-column: span 2;
        padding: 1rem 16px 0.5rem;
        font-weight: 600;
        color: #64748b;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        text-transform: uppercase;
        font-size: 0.85rem;
    }
</style>

<div class="row g-0" style="background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; margin-top: -1rem;">
    <!-- Sidebar -->
    <div class="col-md-3 profile-sidebar">
        <div class="profile-img-placeholder">
            <i class='bx bxs-user'></i>
        </div>
        <div class="profile-name"><?= $mhs['nama_lengkap'] ?></div>
        <div class="profile-nim"><?= $mhs['nim'] ?> - <?= $mhs['jenjang'] ?? 'S1' ?> <?= $mhs['nama_prodi'] ?></div>
        
        <?php 
        $status = strtoupper($mhs['status_mahasiswa'] ?? 'AKTIF');
        $bgStatus = $status == 'AKTIF' ? '#0ea5e9' : ($status == 'LULUS' ? '#10b981' : '#f59e0b');
        ?>
        <div class="profile-status" style="background-color: <?= $bgStatus ?>;"><?= $status ?></div>
        
        <ul class="profile-nav">
            <li><a href="#" class="active"><i class='bx bx-user'></i> Data Mahasiswa</a></li>
            <li><a href="#"><i class='bx bx-folder'></i> Data Akademik</a></li>
            <li><a href="#"><i class='bx bx-list-ul'></i> Kartu Rencana Studi</a></li>
            <li><a href="#"><i class='bx bx-history'></i> Aktivitas Kuliah Mahasiswa</a></li>
            <li><a href="#"><i class='bx bx-info-circle'></i> Kartu Hasil Studi</a></li>
            <li><a href="#"><i class='bx bx-money'></i> Tagihan dan Pembayaran Mahasiswa</a></li>
            <li><a href="#"><i class='bx bx-id-card'></i> Generate KTM</a></li>
            <li><a href="#"><i class='bx bx-import'></i> Import Nilai Transfer</a></li>
        </ul>
    </div>
    
    <!-- Main Content -->
    <div class="col-md-9 profile-content">
        <div class="content-header">
            <div class="content-title">
                <i class='bx bx-edit'></i> DETIL MAHASISWA - <?= $mhs['nim'] ?> / <?= strtoupper($mhs['nama_lengkap']) ?>
            </div>
            <ul class="nav nav-tabs" id="profileTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="pribadi-tab" data-bs-toggle="tab" data-bs-target="#pribadi" type="button" role="tab">Data Pribadi</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="ortu-tab" data-bs-toggle="tab" data-bs-target="#ortu" type="button" role="tab">Orang Tua / Wali</button>
                </li>
            </ul>
        </div>
        
        <div class="tab-content" id="profileTabsContent">
            <!-- TAB DATA PRIBADI -->
            <div class="tab-pane fade show active" id="pribadi" role="tabpanel">
                <div class="data-grid">
                    <div class="data-row">
                        <div class="data-label required">Nama</div>
                        <div class="data-value"><?= strtoupper($mhs['nama_lengkap']) ?></div>
                    </div>
                    <div class="data-row">
                        <div class="data-label required">Nama Ibu Kandung</div>
                        <div class="data-value"><?= strtoupper($mhs['nama_ibu_kandung'] ?? '-') ?></div>
                    </div>
                    
                    <div class="data-row">
                        <div class="data-label required">Tempat Lahir</div>
                        <div class="data-value"><?= strtoupper($mhs['tempat_lahir'] ?? '-') ?></div>
                    </div>
                    <div class="data-row">
                        <div class="data-label required">Tanggal Lahir</div>
                        <div class="data-value">
                            <?= !empty($mhs['tanggal_lahir']) ? date('d F Y', strtotime($mhs['tanggal_lahir'])) : '-' ?>
                        </div>
                    </div>
                    
                    <div class="data-row">
                        <div class="data-label">Jenis Kelamin</div>
                        <div class="data-value"><?= ($mhs['jenis_kelamin'] == 'L' || $mhs['jenis_kelamin'] == 'Laki-Laki') ? 'Laki-laki' : 'Perempuan' ?></div>
                    </div>
                    <div class="data-row">
                        <div class="data-label required">Agama</div>
                        <div class="data-value"><?= $mhs['agama'] ?? '-' ?></div>
                    </div>
                    
                    <div class="data-row">
                        <div class="data-label required">NIK</div>
                        <div class="data-value"><?= $mhs['nik'] ?? '-' ?></div>
                    </div>
                    <div class="data-row">
                        <div class="data-label">NISN</div>
                        <div class="data-value"><?= $mhs['nisn'] ?? '-' ?></div>
                    </div>
                    
                    <div class="data-row">
                        <div class="data-label">NPWP</div>
                        <div class="data-value"><?= $mhs['npwp'] ?? '-' ?></div>
                    </div>
                    <div class="data-row">
                        <div class="data-label required">Kewarganegaraan</div>
                        <div class="data-value"><?= $mhs['kewarganegaraan'] ?? 'Indonesia' ?></div>
                    </div>
                    
                    <div class="data-row">
                        <div class="data-label">Jalan</div>
                        <div class="data-value"><?= strtoupper($mhs['jalan'] ?? $mhs['alamat'] ?? '-') ?></div>
                    </div>
                    <div class="data-row">
                        <div class="data-label">Dusun</div>
                        <div class="data-value"><?= strtoupper($mhs['dusun'] ?? '-') ?></div>
                    </div>
                    
                    <div class="data-row">
                        <div class="data-label">RT</div>
                        <div class="data-value"><?= $mhs['rt'] ?? '-' ?></div>
                    </div>
                    <div class="data-row">
                        <div class="data-label">RW</div>
                        <div class="data-value"><?= $mhs['rw'] ?? '-' ?></div>
                    </div>
                    
                    <div class="data-row">
                        <div class="data-label required">Kelurahan</div>
                        <div class="data-value"><?= strtoupper($mhs['kelurahan'] ?? '-') ?></div>
                    </div>
                    <div class="data-row">
                        <div class="data-label">Kodepos</div>
                        <div class="data-value"><?= $mhs['kode_pos'] ?? '-' ?></div>
                    </div>
                    
                    <div class="data-row" style="grid-column: span 2;">
                        <div class="data-label required">Kecamatan</div>
                        <div class="data-value"><?= $mhs['kecamatan'] ?? '-' ?></div>
                    </div>
                    
                    <div class="data-row" style="grid-column: span 2;">
                        <div class="data-label">Jenis Tinggal</div>
                        <div class="data-value"><?= $mhs['jenis_tinggal'] ?? '-' ?></div>
                    </div>
                    
                    <div class="data-row">
                        <div class="data-label">Telepon</div>
                        <div class="data-value"><?= $mhs['telepon'] ?? '-' ?></div>
                    </div>
                    <div class="data-row">
                        <div class="data-label required">HP</div>
                        <div class="data-value"><?= $mhs['no_hp'] ?? '-' ?></div>
                    </div>
                    
                    <div class="data-row" style="grid-column: span 2;">
                        <div class="data-label required">Email</div>
                        <div class="data-value"><?= strtolower($mhs['email_pribadi'] ?? '-') ?></div>
                    </div>
                    
                    <div class="data-row">
                        <div class="data-label required">Penerima KPS ?</div>
                        <div class="data-value"><?= ($mhs['penerima_kps'] == 'Ya' || $mhs['penerima_kps'] == '1') ? 'Penerima KPS' : 'Bukan penerima KPS' ?></div>
                    </div>
                    <div class="data-row">
                        <div class="data-label">No KPS</div>
                        <div class="data-value"><?= $mhs['nomor_kps'] ?? '-' ?></div>
                    </div>
                    
                    <div class="data-row">
                        <div class="data-label">No. Rekening</div>
                        <div class="data-value"><?= $mhs['no_rekening'] ?? '-' ?></div>
                    </div>
                    <div class="data-row">
                        <div class="data-label">Nama Pemilik Rekening</div>
                        <div class="data-value"><?= $mhs['nama_pemilik_rekening'] ?? '-' ?></div>
                    </div>
                    <div class="data-row" style="grid-column: span 2;">
                        <div class="data-label">Nama Bank</div>
                        <div class="data-value"><?= $mhs['nama_bank'] ?? '-' ?></div>
                    </div>
                </div>
            </div>
            
            <!-- TAB ORANG TUA / WALI -->
            <div class="tab-pane fade" id="ortu" role="tabpanel">
                <div class="data-grid">
                    <div class="section-title">Ayah</div>
                    
                    <div class="data-row" style="grid-column: span 2;">
                        <div class="data-label">NIK Ayah</div>
                        <div class="data-value"><?= $mhs['nik_ayah'] ?? '-' ?></div>
                    </div>
                    <div class="data-row" style="grid-column: span 2;">
                        <div class="data-label">Nama Ayah</div>
                        <div class="data-value"><?= strtoupper($mhs['nama_ayah'] ?? '-') ?></div>
                    </div>
                    <div class="data-row" style="grid-column: span 2;">
                        <div class="data-label">Tanggal Lahir</div>
                        <div class="data-value"><?= !empty($mhs['tanggal_lahir_ayah']) ? date('d F Y', strtotime($mhs['tanggal_lahir_ayah'])) : '-' ?></div>
                    </div>
                    <div class="data-row" style="grid-column: span 2;">
                        <div class="data-label">Pendidikan</div>
                        <div class="data-value"><?= $mhs['pendidikan_ayah'] ?? '-' ?></div>
                    </div>
                    <div class="data-row" style="grid-column: span 2;">
                        <div class="data-label">Pekerjaan</div>
                        <div class="data-value"><?= $mhs['pekerjaan_ayah'] ?? '-' ?></div>
                    </div>
                    <div class="data-row" style="grid-column: span 2;">
                        <div class="data-label">Penghasilan</div>
                        <div class="data-value"><?= $mhs['penghasilan_ayah'] ?? '-' ?></div>
                    </div>
                    
                    <div class="section-title">Ibu</div>
                    
                    <div class="data-row" style="grid-column: span 2;">
                        <div class="data-label">NIK Ibu Kandung</div>
                        <div class="data-value"><?= $mhs['nik_ibu'] ?? '-' ?></div>
                    </div>
                    <div class="data-row" style="grid-column: span 2;">
                        <div class="data-label required">Nama Ibu Kandung</div>
                        <div class="data-value"><?= strtoupper($mhs['nama_ibu_kandung'] ?? '-') ?></div>
                    </div>
                    <div class="data-row" style="grid-column: span 2;">
                        <div class="data-label">Tanggal Lahir</div>
                        <div class="data-value"><?= !empty($mhs['tanggal_lahir_ibu']) ? date('d F Y', strtotime($mhs['tanggal_lahir_ibu'])) : '-' ?></div>
                    </div>
                    <div class="data-row" style="grid-column: span 2;">
                        <div class="data-label">Pendidikan</div>
                        <div class="data-value"><?= $mhs['pendidikan_ibu'] ?? '-' ?></div>
                    </div>
                    <div class="data-row" style="grid-column: span 2;">
                        <div class="data-label">Pekerjaan</div>
                        <div class="data-value"><?= $mhs['pekerjaan_ibu'] ?? '-' ?></div>
                    </div>
                    <div class="data-row" style="grid-column: span 2;">
                        <div class="data-label">Penghasilan</div>
                        <div class="data-value"><?= $mhs['penghasilan_ibu'] ?? '-' ?></div>
                    </div>
                    
                    <div class="section-title">Wali</div>
                    
                    <div class="data-row" style="grid-column: span 2;">
                        <div class="data-label">Nama Wali</div>
                        <div class="data-value"><?= strtoupper($mhs['nama_wali'] ?? '-') ?></div>
                    </div>
                    <div class="data-row" style="grid-column: span 2;">
                        <div class="data-label">Tanggal Lahir</div>
                        <div class="data-value"><?= !empty($mhs['tanggal_lahir_wali']) ? date('d F Y', strtotime($mhs['tanggal_lahir_wali'])) : '-' ?></div>
                    </div>
                    <div class="data-row" style="grid-column: span 2;">
                        <div class="data-label">Pendidikan</div>
                        <div class="data-value"><?= $mhs['pendidikan_wali'] ?? '-' ?></div>
                    </div>
                    <div class="data-row" style="grid-column: span 2;">
                        <div class="data-label">Pekerjaan</div>
                        <div class="data-value"><?= $mhs['pekerjaan_wali'] ?? '-' ?></div>
                    </div>
                    <div class="data-row" style="grid-column: span 2;">
                        <div class="data-label">Penghasilan</div>
                        <div class="data-value"><?= $mhs['penghasilan_wali'] ?? '-' ?></div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</div>

<?= $this->endSection() ?>
