@extends('layouts.app')

@section('title', 'Profil ADIA (LLDIKTI III)')

@section('content')
<div class="container-fluid px-0">
    <!-- Premium Hero Section Header -->
    <div class="card card-custom border-0 rounded-4 overflow-hidden mb-4 shadow-sm text-white" style="background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);">
        <div class="card-body p-5">
            <div class="row align-items-center">
                <div class="col-md-9 mb-3 mb-md-0">
                    <span class="badge bg-warning text-dark px-3 py-1.5 fw-bold mb-3" style="font-size: 0.8rem; letter-spacing: 0.5px;">PROFIL LEMBAGA WILAYAH III</span>
                    <h2 class="fw-extrabold mb-2" style="font-size: 2rem; letter-spacing: -0.5px;">ADIA (LLDIKTI WILAYAH III)</h2>
                    <p class="text-white-50 mb-0 fs-6 leading-relaxed" style="max-width: 700px;">
                        Portal Manajemen Konseling & Bimbingan Integritas Akademik di bawah naungan Lembaga Layanan Pendidikan Tinggi (LLDIKTI) Wilayah III DKI Jakarta.
                    </p>
                </div>
                <div class="col-md-3 text-md-end text-center">
                    <div class="bg-white p-3 rounded-4 shadow-sm d-inline-block">
                        <img src="{{ asset('images/logo-lldikti3.png') }}" alt="Logo ADIA LLDIKTI 3" style="max-height: 70px; width: auto; object-fit: contain;">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- Left Column: Vision, Mission & Duties -->
        <div class="col-lg-8">
            <!-- Visi & Misi Card -->
            <div class="card card-custom p-4 mb-4 border-0 shadow-sm rounded-4">
                <div class="d-flex align-items-center gap-2 mb-4">
                    <div class="bg-primary-subtle text-primary rounded-3 p-2 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                        <i class="fa-solid fa-bullseye fs-5"></i>
                    </div>
                    <h5 class="fw-bold mb-0 text-dark">Visi & Misi Lembaga</h5>
                </div>
                
                <div class="mb-4 bg-light p-4 rounded-4 border-start border-4 border-primary">
                    <h6 class="fw-bold text-primary mb-2" style="font-size: 0.85rem; letter-spacing: 0.5px;">VISI UTAMA</h6>
                    <p class="text-dark-emphasis mb-0 italic" style="font-size: 0.95rem; line-height: 1.6; font-style: italic;">
                        "Menjadi fasilitator peningkatan mutu pendidikan tinggi yang andal, berintegritas, dan inovatif di wilayah DKI Jakarta guna mewujudkan perguruan tinggi swasta yang sehat, taat asas, dan berdaya saing global."
                    </p>
                </div>
                
                <div>
                    <h6 class="fw-bold text-secondary mb-3" style="font-size: 0.85rem; letter-spacing: 0.5px;">MISI STRATEGIS ADIA</h6>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="p-3 bg-light rounded-3 h-100 border border-slate-100">
                                <div class="d-flex gap-2 align-items-start">
                                    <i class="fa-solid fa-circle-check text-success mt-1"></i>
                                    <div>
                                        <h6 class="fw-semibold mb-1" style="font-size: 0.85rem;">Tata Kelola PTS Sehat</h6>
                                        <p class="text-muted mb-0 small">Memfasilitasi penjaminan mutu eksternal perguruan tinggi swasta di DKI Jakarta.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-3 bg-light rounded-3 h-100 border border-slate-100">
                                <div class="d-flex gap-2 align-items-start">
                                    <i class="fa-solid fa-circle-check text-success mt-1"></i>
                                    <div>
                                        <h6 class="fw-semibold mb-1" style="font-size: 0.85rem;">Integritas Akademik</h6>
                                        <p class="text-muted mb-0 small">Mengembangkan sistem pencegahan pelanggaran akademik dan plagiarisme secara preventif.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-3 bg-light rounded-3 h-100 border border-slate-100">
                                <div class="d-flex gap-2 align-items-start">
                                    <i class="fa-solid fa-circle-check text-success mt-1"></i>
                                    <div>
                                        <h6 class="fw-semibold mb-1" style="font-size: 0.85rem;">Layanan Konseling Kampus</h6>
                                        <p class="text-muted mb-0 small">Menyediakan pendampingan psikologis terpadu bagi mahasiswa, dosen, dan tenaga pendidik.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-3 bg-light rounded-3 h-100 border border-slate-100">
                                <div class="d-flex gap-2 align-items-start">
                                    <i class="fa-solid fa-circle-check text-success mt-1"></i>
                                    <div>
                                        <h6 class="fw-semibold mb-1" style="font-size: 0.85rem;">Kolaborasi Wilayah</h6>
                                        <p class="text-muted mb-0 small">Membangun sinergi yang harmonis di antara seluruh pemangku kepentingan perguruan tinggi.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tugas & Fungsi Card -->
            <div class="card card-custom p-4 border-0 shadow-sm rounded-4">
                <div class="d-flex align-items-center gap-2 mb-4">
                    <div class="bg-primary-subtle text-primary rounded-3 p-2 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                        <i class="fa-solid fa-circle-info fs-5"></i>
                    </div>
                    <h5 class="fw-bold mb-0 text-dark">Tugas Pokok & Fungsi Portal KITA</h5>
                </div>
                
                <p class="text-muted" style="font-size: 0.9rem; line-height: 1.6;">
                    ADIA (LLDIKTI Wilayah III) memegang peran pengawasan strategis atas penyelenggaraan tridharma perguruan tinggi. Aplikasi **KITA AKADEMIK** dikembangkan sebagai pilar penting untuk menjalankan tugas pembinaan berikut:
                </p>

                <div class="row g-3">
                    <div class="col-md-4 text-center">
                        <div class="p-3 bg-light rounded-3 h-100">
                            <div class="fs-2 text-primary mb-2"><i class="fa-solid fa-hand-holding-heart"></i></div>
                            <h6 class="fw-bold text-dark mb-1" style="font-size: 0.85rem;">Pencegahan Preventif</h6>
                            <p class="text-muted mb-0 small">Bimbingan konseling sejak dini untuk mengantisipasi stres akademik dan konflik sosial.</p>
                        </div>
                    </div>
                    <div class="col-md-4 text-center">
                        <div class="p-3 bg-light rounded-3 h-100">
                            <div class="fs-2 text-danger mb-2"><i class="fa-solid fa-user-shield"></i></div>
                            <h6 class="fw-bold text-dark mb-1" style="font-size: 0.85rem;">Proteksi & Pemulihan</h6>
                            <p class="text-muted mb-0 small">Respons cepat Satgas Kampus untuk kasus perundungan dan pendampingan oleh Psikolog.</p>
                        </div>
                    </div>
                    <div class="col-md-4 text-center">
                        <div class="p-3 bg-light rounded-3 h-100">
                            <div class="fs-2 text-warning mb-2"><i class="fa-solid fa-scale-balanced"></i></div>
                            <h6 class="fw-bold text-dark mb-1" style="font-size: 0.85rem;">Sidang Etik Ilmiah</h6>
                            <p class="text-muted mb-0 small">Pengawasan kredibilitas penelitian dan penjatuhan sanksi oleh Rektor PTS.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Column: Contact Details & Location -->
        <div class="col-lg-4">
            <!-- Kontak Card -->
            <div class="card card-custom p-4 mb-4 border-0 shadow-sm rounded-4 h-auto">
                <div class="d-flex align-items-center gap-2 mb-3">
                    <div class="bg-primary-subtle text-primary rounded-3 p-2 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                        <i class="fa-solid fa-address-book fs-5"></i>
                    </div>
                    <h5 class="fw-bold mb-0 text-dark">Kontak Resmi</h5>
                </div>
                
                <ul class="list-unstyled mb-0 d-flex flex-column gap-3 mt-2" style="font-size: 0.9rem;">
                    <li class="d-flex align-items-start gap-2.5">
                        <i class="fa-solid fa-location-dot text-primary mt-1" style="width: 16px;"></i>
                        <span class="text-muted leading-normal">
                            <strong>Alamat Kantor:</strong><br>
                            Jl. Cawang Baru No. 26, Cawang, Kec. Kramat Jati, Kota Jakarta Timur, DKI Jakarta 13610
                        </span>
                    </li>
                    <li class="d-flex align-items-center gap-2.5">
                        <i class="fa-solid fa-phone text-primary" style="width: 16px;"></i>
                        <span class="text-muted"><strong>Telepon:</strong> (021) 8090275</span>
                    </li>
                    <li class="d-flex align-items-center gap-2.5">
                        <i class="fa-solid fa-envelope text-primary" style="width: 16px;"></i>
                        <span class="text-muted"><strong>Email:</strong> info@lldikti3.go.id</span>
                    </li>
                    <li class="d-flex align-items-center gap-2.5">
                        <i class="fa-solid fa-globe text-primary" style="width: 16px;"></i>
                        <span class="text-muted"><strong>Website:</strong> <a href="https://lldikti3.kemdikbud.go.id" target="_blank" class="text-decoration-none">lldikti3.kemdikbud.go.id</a></span>
                    </li>
                </ul>
            </div>

            <!-- Peta Lokasi Card -->
            <div class="card card-custom p-4 border-0 shadow-sm rounded-4">
                <div class="d-flex align-items-center gap-2 mb-3">
                    <div class="bg-primary-subtle text-primary rounded-3 p-2 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                        <i class="fa-solid fa-map-location-dot fs-5"></i>
                    </div>
                    <h5 class="fw-bold mb-0 text-dark">Peta Kantor</h5>
                </div>
                <div class="ratio ratio-4x3 rounded-3 overflow-hidden border border-slate-100 shadow-sm">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.1158223616616!2d106.86877027586884!3d-6.2484649611802375!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f3a61f3bb91f%3A0xe51be210d7a049be!2sLLDIKTI%20Wilayah%20III!5e0!3m2!1sid!2sid!4v1700000000000" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                </div>
            </div>
        </div>
    </div>

    @if(auth()->check() && auth()->user()->isLldiktiRole())
    <!-- Section Khusus Admin LLDIKTI: Daftar Satgas PTS -->
    <div id="satgas-pts" class="row mt-3">
        <div class="col-12">
            <div class="card card-custom p-4 border-0 shadow-sm rounded-4 mb-4 border-top border-4 border-danger">
                <div class="d-flex align-items-center gap-2 mb-4">
                    <div class="bg-danger-subtle text-danger rounded-3 p-2 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                        <i class="fa-solid fa-users-gear fs-5"></i>
                    </div>
                    <h5 class="fw-bold mb-0 text-dark">Daftar Admin Satgas PTS Terdaftar</h5>
                </div>
                
                <p class="text-muted mb-4" style="font-size: 0.9rem;">
                    Sebagai Admin LLDIKTI III, Anda dapat memonitor seluruh pengguna dengan peran <strong>Satgas Kampus</strong> yang bertugas di berbagai Perguruan Tinggi Swasta (PTS) beserta jumlah kasus yang telah berhasil mereka selesaikan.
                </p>

                @if(isset($satgasUsers) && $satgasUsers->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0" style="font-size: 0.9rem;">
                            <thead class="bg-light">
                                <tr class="text-muted">
                                    <th>NAMA SATGAS</th>
                                    <th>PTS / UNIVERSITAS</th>
                                    <th>EMAIL</th>
                                    <th>NIDN / NIK</th>
                                    <th class="text-center">KASUS SELESAI</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($satgasUsers as $satgas)
                                <tr>
                                    <td>
                                        <div class="fw-bold text-dark">{{ $satgas->name }}</div>
                                        <span class="badge bg-secondary" style="font-size: 0.7rem;">Admin Satgas</span>
                                    </td>
                                    <td class="fw-semibold text-primary">{{ $satgas->pts_nama ?? '-' }}</td>
                                    <td>{{ $satgas->email }}</td>
                                    <td>{{ $satgas->nim_nidn ?? '-' }}</td>
                                    <td class="text-center">
                                        <span class="badge bg-success rounded-pill px-3 py-2 fs-6">
                                            {{ $satgas->completed_cases }} Kasus
                                        </span>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center py-5 bg-light rounded-4">
                        <i class="fa-solid fa-users-slash text-muted mb-3" style="font-size: 3rem; opacity: 0.5;"></i>
                        <h6 class="fw-bold text-dark mb-1">Belum Ada Satgas PTS</h6>
                        <p class="text-muted small mb-0">Saat ini belum ada pengguna yang terdaftar sebagai Satgas Kampus di sistem.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
    @endif
</div>
@endsection