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

@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 Mahasiswa</span>
                <h3 class="mb-1">Daftar Profil Mahasiswa</h3>
                <p class="text-muted mb-0">Administrator melihat data mahasiswa per perguruan tinggi operator, lalu bisa membuka data di dalam setiap kelompok kampus.</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.mahasiswa.create') }}" class="btn btn-primary listing-shell__primary-btn"><i class="fas fa-plus mr-1"></i> Tambah Mahasiswa</a>
                    @if(auth()->user()?->role === 'admin')
                        <a href="{{ route('admin.mahasiswa.import') }}" class="btn btn-outline-success listing-shell__primary-btn ml-2"><i class="fas fa-file-import mr-1"></i> Import Excel/CSV</a>
                    @endif
                </div>
                @if(auth()->user()?->role === 'admin')
                    <div class="listing-filter">
                        <span class="listing-filter__label">Filter data:</span>
                        <a href="{{ route('admin.mahasiswa.index', ['owner_scope' => 'all']) }}" class="listing-filter__pill {{ ($ownerScope ?? 'all') === 'all' ? 'is-active' : '' }}">Semua Data</a>
                        <a href="{{ route('admin.mahasiswa.index', ['owner_scope' => 'mine']) }}" class="listing-filter__pill {{ ($ownerScope ?? 'all') === 'mine' ? 'is-active' : '' }}">Data Admin</a>
                        <form method="GET" action="{{ route('admin.mahasiswa.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
                            @if(!empty($selectedDataKelompokId))<input type="hidden" name="data_kelompok_id" value="{{ $selectedDataKelompokId }}">@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>
                        <form method="GET" action="{{ route('admin.mahasiswa.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
                            @if(!empty($selectedPerguruanTinggiId))<input type="hidden" name="perguruan_tinggi_id" value="{{ $selectedPerguruanTinggiId }}">@endif
                            <select name="data_kelompok_id" class="form-control listing-filter__select" data-searchable-select="true" data-search-placeholder="Cari data kelompok untuk filter..." onchange="this.form.submit()">
                                <option value="">Semua Data Kelompok</option>
                                @foreach(($dataKelompokFilters ?? collect()) as $dataKelompok)
                                    <option value="{{ $dataKelompok->id }}" {{ (int) ($selectedDataKelompokId ?? 0) === (int) $dataKelompok->id ? 'selected' : '' }}>
                                        {{ $dataKelompok->masterKelompok->nama_kelompok ?? 'Kelompok' }}
                                        @if($dataKelompok->masterKelompok?->kode_kelompok) ({{ $dataKelompok->masterKelompok->kode_kelompok }}) @endif
                                        - {{ $dataKelompok->mahasiswas_count }}/20 anggota
                                    </option>
                                @endforeach
                            </select>
                        </form>
                        @if(($ownerScope ?? 'all') === 'all')
                            <form method="GET" action="{{ route('admin.mahasiswa.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
                                @if(!empty($selectedDataKelompokId))<input type="hidden" name="data_kelompok_id" value="{{ $selectedDataKelompokId }}">@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(($groupedMahasiswas ?? collect())->isNotEmpty())
                    <div class="listing-group-toolbar">
                        <span class="listing-group-toolbar__counter" data-group-counter="mahasiswa">0 kampus terbuka dari 0</span>
                        <button type="button" class="listing-group-toolbar__btn" data-group-action="expand-all" data-group-scope="mahasiswa">
                            <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="mahasiswa">
                            <i class="fas fa-angle-double-up mr-1"></i> Tutup Semua
                        </button>
                    </div>
                @endif
                @forelse(($groupedMahasiswas ?? collect()) as $group)
                    @php($collapseId = 'mahasiswa-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 mahasiswa
                                    @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.mahasiswa.export', ['type' => 'excel', 'perguruan_tinggi_id' => $group->key !== 'unassigned' ? $group->key : null, 'owner_scope' => $ownerScope ?? 'all', 'operator_id' => $selectedOperatorId ?? null, 'data_kelompok_id' => $selectedDataKelompokId ?? 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.mahasiswa.export', ['type' => 'pdf', 'perguruan_tinggi_id' => $group->key !== 'unassigned' ? $group->key : null, 'owner_scope' => $ownerScope ?? 'all', 'operator_id' => $selectedOperatorId ?? null, 'data_kelompok_id' => $selectedDataKelompokId ?? 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>Mahasiswa</th>
                                        <th>NIM</th>
                                        <th>Studi</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.mahasiswa.partials.index-row', ['item' => $item, 'index' => $index])
                                    @endforeach
                                    @if($group->has_more)
                                        <tr>
                                            <td colspan="8" class="text-center py-3">
                                                <a href="{{ route('admin.mahasiswa.index', array_merge(request()->query(), ['perguruan_tinggi_id' => $group->key !== 'unassigned' ? $group->key : null, 'data_kelompok_id' => null])) }}" class="btn btn-outline-primary btn-sm rounded-pill">
                                                    <i class="fas fa-eye mr-1"></i> Lihat semua {{ $group->total_items }} mahasiswa
                                                </a>
                                            </td>
                                        </tr>
                                    @endif
                                </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-user-graduate"></i></div>
                        <h5 class="mb-2">Belum Ada Data Mahasiswa</h5>
                        <p class="text-muted mb-0">Data mahasiswa 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>Mahasiswa</th>
                                <th>NIM</th>
                                <th>Studi</th>
                                <th>Input Oleh</th>
                                <th>Kontak</th>
                                <th>Dokumen</th>
                                <th width="140">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($mahasiswas as $index => $item)
                                @include('admin.mahasiswa.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-user-graduate"></i></div>
                                            <h5 class="mb-2">Belum Ada Data Mahasiswa</h5>
                                            <p class="text-muted mb-0">Data mahasiswa yang ditambahkan akan muncul di halaman ini.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                    @if(method_exists($mahasiswas, 'links'))
                        <div class="d-flex justify-content-center mt-3">
                            {{ $mahasiswas->links() }}
                        </div>
                    @endif
                </div>
            @endif
        </div>
    </div>
</div>

<div class="modal fade" id="mahasiswaPhotoModal" 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="mahasiswaPhotoModalImage"></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(6,214,160,.14),transparent 34%),linear-gradient(180deg,#fbfffe 0,#f3fbf8 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:#0f9f7a}.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,#fbfffe 0,#f2fbf7 100%);border:1px solid #dceee8}.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 #d6ebe4;background:#fff}.listing-filter__pill{display:inline-flex;align-items:center;padding:.55rem .95rem;border-radius:999px;background:#eef8f5;color:#5c6f80;font-weight:700;border:1px solid #d6ebe4}.listing-filter__pill.is-active{background:linear-gradient(135deg,#0f9f7a 0,#38c8a1 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:#ebf8f3;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 #cde6de;background:#fff;color:#0f9f7a;font-weight:700}.listing-group-toolbar__btn--muted{color:#51697f}.listing-campus-group{border:1px solid #d6ebe4;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,#fbfffe 0,#f2fbf7 100%);border-bottom:1px solid #dceee8}.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:#e6f6f1;color:#0f7f63}.listing-campus-group__caret{padding:.45rem .6rem;background:#ebf8f3;color:#0f9f7a;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 #d6ebe4;background:#fff;color:#355067;font-size:.9rem}.listing-actions-dropdown__toggle::after{display:none}.listing-actions-dropdown__menu{padding:.45rem;border:1px solid #d6ebe4;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,#0f9f7a,#38c8a1);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:#f8fffc}.font-weight-600{font-weight:600}.empty-state__icon{width:76px;height:76px;border-radius:50%;background:rgba(15,159,122,.08);color:#0f9f7a;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-mahasiswa-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="mahasiswa"]');
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;};
$('#mahasiswaPhotoModal').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('#mahasiswaPhotoModalImage').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="mahasiswa"][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