@extends('layouts.dashboard')
@section('title', auth()->user()->village_id ? 'Desa Pilihan Saya' : 'Pilih Desa Tujuan')
@section('page-title', auth()->user()->village_id ? 'Desa Pilihan Saya' : 'Pilih Desa Tujuan')

@section('content')
<div class="breadcrumb">
    <a href="{{ route('mahasiswa.dashboard') }}">Beranda</a> <span>›</span> <span>{{ auth()->user()->village_id ? 'Desa Pilihan Saya' : 'Pilih Desa Tujuan' }}</span>
</div>

@if(auth()->user()->village_id)
    <h1 class="section-title">Desa Pilihan Saya</h1>
    <p class="section-sub">Anda telah memilih desa ini sebagai tempat pelaksanaan pengabdian PBPMD.</p>
    
    @php
        $myVillage = $villages->firstWhere('id', auth()->user()->village_id);
        $groupMembers = \App\Models\User::where('village_id', auth()->user()->village_id)->where('role', 'mahasiswa')->get();
    @endphp

    @if($myVillage)
    <div style="display:flex; flex-direction:column; gap:2rem; margin-top:1.5rem">
        {{-- Card Desa Terpilih --}}
        <div class="desa-card" style="max-width:500px">
            <div class="desa-body">
                <h3>{{ $myVillage->name }}</h3>
                <div class="desa-loc" style="display:flex;align-items:center;gap:0.35rem;margin-bottom:0.75rem;font-size:0.8rem;color:var(--gr500);">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" /></svg>
                    Kecamatan {{ $myVillage->district }}
                </div>
                <p class="desa-desc" style="font-size:0.85rem;color:var(--gr600);line-height:1.5;">{{ $myVillage->description ?? 'Belum ada deskripsi desa.' }}</p>
                <div class="desa-dosen" style="margin-top: 1rem; display:flex; align-items:center; gap:0.75rem; padding:0.75rem; background:var(--gr50); border-radius:8px;">
                    <div class="dosen-avatar" style="width:36px;height:36px;border-radius:50%;background:var(--gr200);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--gr700);font-size:0.85rem;">{{ strtoupper(substr($myVillage->coordinator, 0, 2)) }}</div>
                    <div class="dosen-info" style="display:flex;flex-direction:column;"><span style="font-size:.68rem;color:var(--gr500)">Dosen Pendamping</span><strong style="font-size:0.85rem;color:var(--gr800);">{{ $myVillage->coordinator }}</strong></div>
                </div>
                <div class="desa-progress" style="margin-top:1.25rem;">
                    <div class="desa-progress-header" style="display:flex;justify-content:space-between;font-size:0.75rem;margin-bottom:0.4rem;color:var(--gr600);"><span>Progress Kuota</span><span style="font-weight:600;color:var(--gr700)">{{ $myVillage->users_count }}/{{ $myVillage->quota }} terisi</span></div>
                    @php $pct = $myVillage->quota > 0 ? ($myVillage->users_count / $myVillage->quota) * 100 : 100; @endphp
                    <div class="desa-progress-bar" style="height:6px;background:var(--gr100);border-radius:10px;overflow:hidden;"><div class="desa-progress-fill" style="height:100%;width:{{ min(100, $pct) }}%;background:{{ $pct >= 100 ? '#ef4444' : ($pct > 80 ? '#f59e0b' : 'var(--g500)') }};border-radius:10px;"></div></div>
                </div>
            </div>
        </div>

        {{-- Daftar Mahasiswa --}}
        <div class="kelompok-container" style="background: #fff; padding: 1.5rem; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 4px 12px rgba(0,0,0,0.04);">
            <h3 style="font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; color: #1e293b; display: flex; align-items: center; gap: 0.5rem;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" /></svg>
                Anggota Kelompok Desa {{ $myVillage->name }}
            </h3>
            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem;">
                @foreach($groupMembers as $member)
                    <div style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: #f8fafc; border-radius: 8px; border: 1px solid #f1f5f9;">
                        <div class="member-avatar" style="width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--g600, #16a34a), var(--g800, #166534)); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #fff; font-size: 0.85rem; flex-shrink: 0;">
                            {{ strtoupper(substr($member->name, 0, 2)) }}
                        </div>
                        <div style="overflow: hidden;">
                            <div class="member-name" style="font-weight: 600; font-size: 0.85rem; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="{{ $member->name }}">
                                {{ $member->name }} {!! $member->id === auth()->user()->id ? '<span style="color:#16a34a;font-size:0.7rem;">(Anda)</span>' : '' !!}
                            </div>
                            <div class="member-nim" style="font-size: 0.75rem; color: #64748b;">{{ $member->nim ?? '-' }}</div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif

@else

    <h1 class="section-title">Pilih Desa Tujuan PBPMD</h1>
    <p class="section-sub">Pilih satu desa tempat Anda akan melaksanakan pengabdian.</p>

    <div class="warning-banner">
        <div class="warning-icon">⚠</div>
        <div>
            <h4>Perhatian: Pemilihan Desa Bersifat Final</h4>
            <p>Setelah Anda memilih desa, pilihan tidak dapat diubah tanpa persetujuan admin LPPM. Pastikan Anda memilih dengan pertimbangan matang.</p>
        </div>
    </div>

    <p style="font-size:.85rem;color:var(--gr500);margin-bottom:1rem">Menampilkan {{ count($villages) }} desa yang masih tersedia</p>
    
    <div class="desa-grid">
        @forelse($villages as $desa)
        @php
            $filledQuota = $desa->users_count ?? 0;
            $pct = $desa->quota > 0 ? ($filledQuota / $desa->quota) * 100 : 100;
        @endphp
        <div class="desa-card">
            <div class="desa-body">
                <h3>{{ $desa->name }}</h3>
                <div class="desa-loc" style="display:flex;align-items:center;gap:0.35rem;margin-bottom:0.75rem;font-size:0.8rem;color:var(--gr500);">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" /></svg>
                    Kecamatan {{ $desa->district }}
                </div>
                <p class="desa-desc" style="font-size:0.85rem;color:var(--gr600);line-height:1.5;">{{ $desa->description ?? 'Belum ada deskripsi desa.' }}</p>
                <div class="desa-dosen" style="margin-top: 1rem; display:flex; align-items:center; gap:0.75rem; padding:0.75rem; background:var(--gr50); border-radius:8px;">
                    <div class="dosen-avatar" style="width:36px;height:36px;border-radius:50%;background:var(--gr200);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--gr700);font-size:0.85rem;">{{ strtoupper(substr($desa->coordinator, 0, 2)) }}</div>
                    <div class="dosen-info" style="display:flex;flex-direction:column;"><span style="font-size:.68rem;color:var(--gr500)">Dosen Pendamping</span><strong style="font-size:0.85rem;color:var(--gr800);">{{ $desa->coordinator }}</strong></div>
                </div>
                <div class="desa-progress" style="margin-top:1.25rem;">
                    <div class="desa-progress-header" style="display:flex;justify-content:space-between;font-size:0.75rem;margin-bottom:0.4rem;color:var(--gr600);"><span>Progress Kuota</span><span style="font-weight:600;color:var(--gr700)">{{ $filledQuota }}/{{ $desa->quota }} terisi</span></div>
                    <div class="desa-progress-bar" style="height:6px;background:var(--gr100);border-radius:10px;overflow:hidden;"><div class="desa-progress-fill" style="height:100%;width:{{ min(100, $pct) }}%;background:{{ $pct >= 100 ? '#ef4444' : ($pct > 80 ? '#f59e0b' : 'var(--g500)') }};border-radius:10px;"></div></div>
                </div>
                <div class="desa-actions" style="margin-top:1.5rem;">
                    <form action="{{ route('mahasiswa.desa.pilih', $desa->id) }}" method="POST" style="width: 100%;">
                        @csrf
                        <button type="submit" class="btn-action" style="width: 100%; text-align: center; {{ $pct >= 100 ? 'opacity: 0.5; pointer-events: none;' : '' }}" onclick="return confirm('Anda yakin memilih desa ini? Pilihan tidak dapat diubah nanti.')">{{ $pct >= 100 ? 'Kuota Penuh' : 'Pilih Desa Ini' }}</button>
                    </form>
                </div>
            </div>
        </div>
        @empty
        <div style="grid-column: 1/-1; text-align: center; padding: 3rem; background: var(--w); border-radius: var(--rad); border: 1px dashed var(--gr300);">
            <h4 style="color: var(--gr600);">Belum ada data desa tersedia.</h4>
        </div>
        @endforelse
    </div>

@endif
@endsection