@extends('layouts.admin')
@section('title', 'Detail Desa ' . $village->name)
@section('page-title', 'Detail Desa Mitra')

@section('content')
<div class="breadcrumb"><a href="{{ route('admin.dashboard') }}">Dashboard</a> <span>›</span> <a href="{{ route('admin.desa') }}">Data Desa</a> <span>›</span> <span style="color:var(--g600)">{{ $village->name }}</span></div>

<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem;flex-wrap:wrap;gap:.75rem">
    <div>
        <h1 class="section-title">Desa {{ $village->name }}</h1>
        <p class="section-sub" style="margin-bottom:0">Kecamatan {{ $village->district }} | DPL: {{ $village->coordinator }}</p>
    </div>
</div>

<div class="card" style="margin-bottom:2rem">
    <h3 style="margin-bottom:.5rem">Keterangan / Deskripsi Desa</h3>
    <p style="color:var(--gr600);line-height:1.6">{{ $village->description ?? 'Belum ada deskripsi desa.' }}</p>
</div>

<div class="card">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;flex-wrap:wrap;gap:.5rem">
        <h3 style="margin:0">Daftar Mahasiswa Terdaftar ({{ count($mahasiswa) }}/{{ $village->quota }})</h3>
        @if(count($mahasiswa) > 0)
        <button onclick="exportDesaExcel()" class="btn-action" style="font-size:.8rem;padding:.45rem 1rem;display:flex;align-items:center;gap:.35rem">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            Export Excel
        </button>
        @endif
    </div>
    
    {{-- Desktop Table --}}
    <div class="data-table-wrapper hide-mobile">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Nama Lengkap</th>
                    <th>NIM</th>
                    <th>Program Studi</th>
                    <th>Tanggal Mendaftar</th>
                </tr>
            </thead>
            <tbody>
                @forelse($mahasiswa as $mhs)
                <tr>
                    <td style="font-weight:600">
                        <div style="display:flex;align-items:center;gap:.5rem">
                            <div style="width:28px;height:28px;border-radius:50%;background:var(--g100);color:var(--g700);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:bold">{{ strtoupper(substr($mhs->name,0,2)) }}</div>
                            <div>
                                {{ $mhs->name }}
                                <div style="font-size:.7rem;color:var(--gr500);font-weight:normal">{{ $mhs->email }}</div>
                            </div>
                        </div>
                    </td>
                    <td>{{ $mhs->nim }}</td>
                    <td>{{ $mhs->prodi ?? '-' }}</td>
                    <td style="color:var(--gr400);font-size:.8rem">{{ $mhs->created_at->format('d M Y') }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" style="text-align:center;padding:2rem;color:var(--gr500)">Belum ada mahasiswa yang memilih desa ini.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Mobile Cards --}}
    <div class="show-mobile">
        @forelse($mahasiswa as $mhs)
        <div style="border:1px solid var(--gr200);border-radius:var(--radsm);padding:.85rem;margin-bottom:.6rem">
            <div style="display:flex;align-items:center;gap:.6rem">
                <div style="width:32px;height:32px;border-radius:50%;background:var(--g100);color:var(--g700);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:bold;flex-shrink:0">{{ strtoupper(substr($mhs->name,0,2)) }}</div>
                <div style="flex:1;min-width:0">
                    <div style="font-size:.85rem;font-weight:600;color:var(--gr800)">{{ $mhs->name }}</div>
                    <div style="font-size:.72rem;color:var(--gr500)">{{ $mhs->nim }} · {{ $mhs->prodi ?? '-' }} · {{ $mhs->created_at->format('d M Y') }}</div>
                </div>
            </div>
        </div>
        @empty
        <div style="text-align:center;padding:2rem;color:var(--gr500)">Belum ada mahasiswa yang memilih desa ini.</div>
        @endforelse
    </div>
</div>

@push('scripts')
<script>
function exportDesaExcel() {
    const data = [
        ['No', 'Nama Lengkap', 'NIM', 'Program Studi'],
        @foreach($mahasiswa as $i => $mhs)
        [{{ $i + 1 }}, @json($mhs->name), @json($mhs->nim), @json($mhs->prodi ?? '-')],
        @endforeach
    ];
    
    let csv = '\uFEFF'; // BOM for Excel UTF-8
    data.forEach(row => {
        csv += row.map(cell => '"' + String(cell).replace(/"/g, '""') + '"').join(',') + '\n';
    });
    
    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'Data Mahasiswa - Desa {{ $village->name }}.csv';
    a.click();
    URL.revokeObjectURL(url);
    
    if (typeof showToast === 'function') {
        showToast('success', 'Export Berhasil', 'File CSV berhasil diunduh.');
    }
}
</script>
@endpush
@endsection