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

@section('admin_content')
<div class="container-fluid">
    <div class="card listing-shell border-0 shadow-sm">
        <div class="card-header bg-white border-0 listing-shell__header">
            <div>
                <span class="listing-shell__eyebrow">Data Dosen</span>
                <h3 class="mb-1">Daftar Profil Dosen</h3>
                <p class="text-muted mb-0">Administrator melihat data dosen yang dikelompokkan berdasarkan perguruan tinggi operator.</p>
            </div>
        </div>
        <div class="card-body">
            <div class="listing-shell__controls {{ auth()->user()?->role === 'admin' ? 'listing-shell__controls--with-filter' : '' }}">
                <div class="listing-shell__action">
                    <a href="{{ route('admin.dosen.create') }}" class="btn btn-primary listing-shell__primary-btn"><i class="fas fa-plus mr-1"></i> Tambah Dosen</a>
                </div>
                @if(auth()->user()?->role === 'admin')
                    <div class="listing-filter">
                        <span class="listing-filter__label">Filter data:</span>
                        <a href="{{ route('admin.dosen.index', ['owner_scope' => 'all']) }}" class="listing-filter__pill {{ ($ownerScope ?? 'all') === 'all' ? 'is-active' : '' }}">Semua Data</a>
                        <a href="{{ route('admin.dosen.index', ['owner_scope' => 'mine']) }}" class="listing-filter__pill {{ ($ownerScope ?? 'all') === 'mine' ? 'is-active' : '' }}">Data Admin</a>
                        <form method="GET" action="{{ route('admin.dosen.index') }}" class="listing-filter__form">
                            <input type="hidden" name="owner_scope" value="{{ $ownerScope ?? 'all' }}">
                            @if(!empty($selectedOperatorId))<input type="hidden" name="operator_id" value="{{ $selectedOperatorId }}">@endif
                            <select name="perguruan_tinggi_id" class="form-control listing-filter__select" data-searchable-select="true" data-search-placeholder="Cari perguruan tinggi untuk filter..." onchange="this.form.submit()">
                                <option value="">Semua Perguruan Tinggi</option>
                                @foreach(($perguruanTinggiFilters ?? collect()) as $perguruanTinggi)
                                    <option value="{{ $perguruanTinggi->id }}" {{ (int) ($selectedPerguruanTinggiId ?? 0) === (int) $perguruanTinggi->id ? 'selected' : '' }}>{{ $perguruanTinggi->nama_perguruan_tinggi }}@if($perguruanTinggi->singkatan) ({{ $perguruanTinggi->singkatan }})@endif</option>
                                @endforeach
                            </select>
                        </form>
                        @if(($ownerScope ?? 'all') === 'all')
                            <form method="GET" action="{{ route('admin.dosen.index') }}" class="listing-filter__form">
                                <input type="hidden" name="owner_scope" value="all">
                                @if(!empty($selectedPerguruanTinggiId))<input type="hidden" name="perguruan_tinggi_id" value="{{ $selectedPerguruanTinggiId }}">@endif
                                <select name="operator_id" class="form-control listing-filter__select" onchange="this.form.submit()">
                                    <option value="">Semua Operator</option>
                                    @foreach(($operators ?? collect()) as $operator)
                                        <option value="{{ $operator->id }}" {{ (int) ($selectedOperatorId ?? 0) === (int) $operator->id ? 'selected' : '' }}>{{ $operator->name }} - {{ $operator->email }}</option>
                                    @endforeach
                                </select>
                            </form>
                        @endif
                    </div>
                @endif
            </div>

            @if(auth()->user()?->role === 'admin')
                @if(($groupedDosens ?? collect())->isNotEmpty())
                    <div class="listing-group-toolbar">
                        <span class="listing-group-toolbar__counter" data-group-counter="dosen">0 kampus terbuka dari 0</span>
                        <button type="button" class="listing-group-toolbar__btn" data-group-action="expand-all" data-group-scope="dosen">
                            <i class="fas fa-angle-double-down mr-1"></i> Buka Semua
                        </button>
                        <button type="button" class="listing-group-toolbar__btn listing-group-toolbar__btn--muted" data-group-action="collapse-all" data-group-scope="dosen">
                            <i class="fas fa-angle-double-up mr-1"></i> Tutup Semua
                        </button>
                    </div>
                @endif
                @forelse(($groupedDosens ?? collect()) as $group)
                    @php($collapseId = 'dosen-campus-group-' . \Illuminate\Support\Str::slug($group->key . '-' . $group->campus_name))
                    <section class="listing-campus-group">
                        <button type="button" class="listing-campus-group__header listing-campus-group__toggle" data-toggle="collapse" data-target="#{{ $collapseId }}" aria-expanded="true" aria-controls="{{ $collapseId }}">
                            <div>
                                <div class="listing-campus-group__eyebrow">Perguruan Tinggi</div>
                                <h4 class="mb-1">{{ $group->campus_name }} @if($group->campus_abbr)<span class="listing-campus-group__chip">{{ $group->campus_abbr }}</span>@endif</h4>
                                <p class="text-muted mb-0">
                                    {{ $group->total_items }} data dosen
                                    @if(($group->operator_names ?? collect())->isNotEmpty())
                                        • diinput {{ $group->operator_names->implode(', ') }}
                                    @endif
                                </p>
                            </div>
                            <span class="listing-campus-group__actions">
                                <div class="btn-group btn-group-sm mr-2" role="group" onclick="event.stopPropagation();">
                                    <a href="{{ route('admin.dosen.export', ['type' => 'excel', 'perguruan_tinggi_id' => $group->key !== 'unassigned' ? $group->key : null, 'owner_scope' => $ownerScope ?? 'all', 'operator_id' => $selectedOperatorId ?? null]) }}" class="btn btn-outline-success" title="Export Excel" onclick="event.stopPropagation();"><i class="fas fa-file-excel"></i> Excel</a>
                                    <a href="{{ route('admin.dosen.export', ['type' => 'pdf', 'perguruan_tinggi_id' => $group->key !== 'unassigned' ? $group->key : null, 'owner_scope' => $ownerScope ?? 'all', 'operator_id' => $selectedOperatorId ?? null]) }}" class="btn btn-outline-danger" title="Export PDF" onclick="event.stopPropagation();"><i class="fas fa-file-pdf"></i> PDF</a>
                                </div>
                                <span class="listing-campus-group__caret"><i class="fas fa-chevron-down"></i></span>
                            </span>
                        </button>
                        <div id="{{ $collapseId }}" class="collapse show">
                        <div class="listing-table-wrap">
                            <table class="table table-hover align-middle listing-table">
                                <thead>
                                    <tr>
                                        <th width="60">No</th>
                                        <th>Dosen</th>
                                        <th>NIDN / NUPTK</th>
                                        <th>Institusi</th>
                                        <th>Input Oleh</th>
                                        <th>Kontak</th>
                                        <th>Dokumen</th>
                                        <th width="140">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($group->items as $index => $item)
                                        @include('admin.dosen.partials.index-row', ['item' => $item, 'index' => $index])
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        </div>
                    </section>
                @empty
                    <div class="empty-state text-center py-5">
                        <div class="empty-state__icon mb-3"><i class="fas fa-chalkboard-teacher"></i></div>
                        <h5 class="mb-2">Belum Ada Data Dosen</h5>
                        <p class="text-muted mb-0">Data dosen yang ditambahkan operator akan dikelompokkan per perguruan tinggi di halaman ini.</p>
                    </div>
                @endforelse
            @else
                <div class="listing-table-wrap">
                    <table class="table table-hover align-middle listing-table">
                        <thead>
                            <tr>
                                <th width="60">No</th>
                                <th>Dosen</th>
                                <th>NIDN / NUPTK</th>
                                <th>Institusi</th>
                                <th>Input Oleh</th>
                                <th>Kontak</th>
                                <th>Dokumen</th>
                                <th width="140">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($dosens as $index => $item)
                                @include('admin.dosen.partials.index-row', ['item' => $item, 'index' => $index])
                            @empty
                                <tr>
                                    <td colspan="8">
                                        <div class="empty-state text-center py-5">
                                            <div class="empty-state__icon mb-3"><i class="fas fa-chalkboard-teacher"></i></div>
                                            <h5 class="mb-2">Belum Ada Data Dosen</h5>
                                            <p class="text-muted mb-0">Data dosen yang ditambahkan akan muncul di halaman ini.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>
</div>

<div class="modal fade" id="dosenPhotoModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content listing-photo-modal">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title listing-photo-modal__title">Preview Foto</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body pt-2"><img src="" alt="" class="listing-photo-modal__image" id="dosenPhotoModalImage"></div>
        </div>
    </div>
</div>

<style>
.listing-shell{border-radius:24px;overflow:visible}.listing-shell__header{padding:2rem;display:flex;gap:1rem;flex-wrap:wrap;background:radial-gradient(circle at top right,rgba(17,138,178,.12),transparent 32%),linear-gradient(180deg,#fbfcfe 0,#f4f8fc 100%);border-radius:24px 24px 0 0}.listing-shell__eyebrow,.listing-campus-group__eyebrow{display:inline-block;margin-bottom:.55rem;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#118ab2}.listing-shell__controls{display:grid;gap:1.25rem;margin-bottom:1.75rem}.listing-shell__controls--with-filter{padding:1.25rem;border-radius:22px;background:linear-gradient(180deg,#fbfdff 0,#f4f9fd 100%);border:1px solid #e1edf6}.listing-shell__action{display:flex;justify-content:center}.listing-shell__primary-btn{border-radius:14px;padding:.72rem 1.2rem}.listing-filter{display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap}.listing-filter__label{color:#6c7a89;font-weight:600}.listing-filter__form{margin:0}.listing-filter__select{min-width:280px;border-radius:999px;border:1px solid #dbe7f1;background:#fff}.listing-filter__pill{display:inline-flex;align-items:center;padding:.55rem .95rem;border-radius:999px;background:#f1f6fb;color:#5c6f80;font-weight:700;border:1px solid #dbe7f1}.listing-filter__pill.is-active{background:linear-gradient(135deg,#118ab2 0,#5bc0eb 100%);color:#fff;border-color:transparent}.listing-group-toolbar{display:flex;justify-content:flex-end;gap:.65rem;margin-bottom:1rem;flex-wrap:wrap;align-items:center}.listing-group-toolbar__counter{display:inline-flex;align-items:center;padding:.52rem .8rem;border-radius:999px;background:#edf5fb;color:#355067;font-weight:700;font-size:.84rem}.listing-group-toolbar__btn{display:inline-flex;align-items:center;padding:.58rem .9rem;border-radius:12px;border:1px solid #cfe0ed;background:#fff;color:#118ab2;font-weight:700}.listing-group-toolbar__btn--muted{color:#51697f}.listing-campus-group{border:1px solid #dbe7f1;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 12px 26px rgba(15,23,42,.04)}.listing-campus-group+.listing-campus-group{margin-top:1.25rem}.listing-campus-group__header{padding:1.15rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:linear-gradient(180deg,#fbfdff 0,#f4f8fc 100%);border-bottom:1px solid #e5eef6}.listing-campus-group__toggle{width:100%;border:0;text-align:left;cursor:pointer}.listing-campus-group__actions{display:inline-flex;align-items:center}.listing-campus-group__chip,.listing-campus-group__caret{display:inline-flex;align-items:center;padding:.3rem .7rem;border-radius:999px;font-size:.75rem;font-weight:700}.listing-campus-group__chip{background:#e8f4fb;color:#0d6d8d}.listing-campus-group__caret{padding:.45rem .6rem;background:#edf5fb;color:#118ab2;transition:transform .2s ease}.listing-campus-group__toggle[aria-expanded="true"] .listing-campus-group__caret{transform:rotate(180deg)}.listing-table thead th{border-top:0;background:#f8fbff;color:#1f2d3d;font-weight:700;white-space:nowrap}.listing-table-wrap{width:100%;overflow-x:auto;overflow-y:visible}.listing-actions-dropdown{position:relative;z-index:20}.listing-actions-dropdown__toggle{display:inline-flex;align-items:center;justify-content:center;min-width:96px;padding:.5rem .8rem;border-radius:12px;font-weight:700;border:1px solid #dbe7f1;background:#fff;color:#355067;font-size:.9rem}.listing-actions-dropdown__toggle::after{display:none}.listing-actions-dropdown__menu{padding:.45rem;border:1px solid #dbe7f1;border-radius:16px;box-shadow:0 14px 32px rgba(15,23,42,.08);min-width:170px;margin-top:.45rem;z-index:1055}.listing-actions-dropdown__item{display:flex;align-items:center;border-radius:12px;padding:.6rem .75rem;font-weight:600;color:#243444}.listing-actions-dropdown__item--danger{color:#b42333;background:transparent;border:0;width:100%;text-align:left}.listing-avatar{width:52px;height:52px;border-radius:16px;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,#118ab2,#5bc0eb);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}.listing-avatar__trigger{padding:0;border:0;background:transparent;width:100%;height:100%;cursor:zoom-in}.listing-avatar img{width:100%;height:100%;object-fit:cover}.listing-photo-modal{border-radius:24px;overflow:hidden}.listing-photo-modal__image{width:100%;max-height:70vh;object-fit:contain;border-radius:18px;background:#f8fbff}.font-weight-600{font-weight:600}.empty-state__icon{width:76px;height:76px;border-radius:50%;background:rgba(17,138,178,.08);color:#118ab2;display:inline-flex;align-items:center;justify-content:center;font-size:1.8rem}@media (max-width:767.98px){.listing-shell__controls--with-filter{padding:1rem;gap:1rem}.listing-filter{align-items:stretch;justify-content:stretch}.listing-filter__label{width:100%;text-align:center}.listing-filter__pill{justify-content:center;flex:1 1 140px}.listing-filter__form,.listing-filter__select,.listing-actions-dropdown__toggle,.listing-actions-dropdown__menu{width:100%;min-width:0}.listing-campus-group__header{align-items:flex-start;flex-direction:column}.listing-campus-group__actions,.listing-group-toolbar{width:100%;justify-content:space-between}.listing-group-toolbar__counter{width:100%;justify-content:center}}
</style>
<script>
document.addEventListener('DOMContentLoaded',function(){
const storageKey='admin-dosen-campus-groups';
const readState=function(){try{return JSON.parse(localStorage.getItem(storageKey)||'{}');}catch(error){return {};}};const writeState=function(state){localStorage.setItem(storageKey,JSON.stringify(state));};
const counter=document.querySelector('[data-group-counter="dosen"]');
const updateCounter=function(){if(!counter){return;}const panels=document.querySelectorAll('.listing-campus-group .collapse');const total=panels.length;let open=0;panels.forEach(function(panel){if(panel.classList.contains('show')){open+=1;}});counter.textContent=open+' kampus terbuka dari '+total;};
$('#dosenPhotoModal').on('show.bs.modal',function(event){const button=$(event.relatedTarget);const modal=$(this);modal.find('.listing-photo-modal__title').text(button.data('photo-title')||'Preview Foto');modal.find('#dosenPhotoModalImage').attr('src',button.data('photo-src')).attr('alt',button.data('photo-title')||'Preview Foto');});
document.querySelectorAll('.listing-campus-group__link[data-href]').forEach(function(link){link.addEventListener('click',function(event){event.stopPropagation();window.location.href=link.dataset.href;});});
document.querySelectorAll('.listing-campus-group__toggle[data-target]').forEach(function(toggle){
const selector=toggle.getAttribute('data-target');const panel=document.querySelector(selector);if(!panel){return;}const panelId=panel.id;const state=readState();
if(Object.prototype.hasOwnProperty.call(state,panelId)&&state[panelId]===false){toggle.setAttribute('aria-expanded','false');panel.classList.remove('show');}
$(panel).on('shown.bs.collapse',function(){const nextState=readState();nextState[panelId]=true;writeState(nextState);toggle.setAttribute('aria-expanded','true');updateCounter();});
$(panel).on('hidden.bs.collapse',function(){const nextState=readState();nextState[panelId]=false;writeState(nextState);toggle.setAttribute('aria-expanded','false');updateCounter();});
});
document.querySelectorAll('[data-group-scope="dosen"][data-group-action]').forEach(function(button){
button.addEventListener('click',function(){
const state=readState();
document.querySelectorAll('.listing-campus-group__toggle[data-target]').forEach(function(toggle){
const panel=document.querySelector(toggle.getAttribute('data-target'));if(!panel){return;}
if(button.dataset.groupAction==='expand-all'){state[panel.id]=true;$(panel).collapse('show');toggle.setAttribute('aria-expanded','true');}
if(button.dataset.groupAction==='collapse-all'){state[panel.id]=false;$(panel).collapse('hide');toggle.setAttribute('aria-expanded','false');}
});
writeState(state);
updateCounter();
});
});
updateCounter();
});
</script>
@endsection