@extends('layouts.dashboard')
@section('title', 'Lengkapi Dokumen KKN')
@section('page-title', 'Lengkapi Dokumen')

@section('content')
<div class="breadcrumb">
    <a href="{{ route('mahasiswa.dashboard') }}">Beranda</a> <span>›</span> <span style="color:var(--g600)">Lengkapi Dokumen</span>
</div>

<style>
    .doc-box {
        margin-bottom: 1.5rem;
        padding: 1.25rem;
        border: 1px solid var(--gr200);
        border-radius: var(--rad);
        background: #f8fafc;
    }
    .doc-label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: .75rem;
        color: var(--gr800);
    }
    .doc-input {
        width: 100%;
        background: white;
        padding: 0.6rem;
        border: 1px dashed var(--gr400);
        border-radius: var(--radsm);
    }
    .doc-desc {
        display: block;
        margin-top: 0.5rem;
        color: var(--gr600);
        font-size: 0.85rem;
    }
    @media (max-width: 640px) {
        .doc-box {
            padding: 1rem;
            margin-bottom: 1rem;
        }
        .doc-label {
            font-size: 0.9rem;
            gap: 0.4rem;
        }
        .doc-label svg {
            width: 18px;
            height: 18px;
        }
        .doc-desc {
            font-size: 0.75rem;
        }
        .doc-input {
            padding: 0.5rem;
            font-size: 0.85rem;
        }
    }
</style>

<h1 class="section-title">Upload Dokumen Wajib</h1>
<p class="section-sub">Sebelum memilih desa dan melanjutkan ke dashboard, Anda diwajibkan untuk mengunggah berkas-berkas persyaratan di bawah ini.</p>

@if(session('success'))
    <div style="background:var(--g50);border:1px solid var(--g200);color:var(--g800);padding:1rem;border-radius:var(--radsm);margin-bottom:1.5rem">
        {{ session('success') }}
    </div>
@endif

@if($errors->any())
    <div style="background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:1rem;border-radius:var(--radsm);margin-bottom:1.5rem">
        <ul style="margin:0;padding-left:1.5rem">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="card" style="max-width:800px">
    <h3 style="margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:1px solid var(--gr100)">Form Kelengkapan Dokumen</h3>
    
    <form action="{{ route('mahasiswa.lengkapi-dokumen.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        
        <div class="doc-box">
            <label class="doc-label">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--b600)"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" /></svg>
                Bukti Pembayaran KKN @if(!$user->bukti_pembayaran) <span style="color:#ef4444">*</span> @endif
            </label>
            <input type="file" name="bukti_pembayaran" class="doc-input form-input" {{ $user->bukti_pembayaran ? '' : 'required' }} accept=".pdf,.jpg,.jpeg,.png">
            <small class="doc-desc">Pilih file foto atau scan bukti transfer. Format: PDF, JPG, PNG (Maks 15MB).</small>
            @if($user->bukti_pembayaran)
                <div style="margin-top:0.75rem;font-size:0.85rem;color:#16a34a;display:flex;align-items:center;gap:0.3rem">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
                    File sudah diunggah. <a href="{{ asset('storage/' . $user->bukti_pembayaran) }}" target="_blank" style="color:var(--b600);text-decoration:underline">Lihat file Anda</a>
                </div>
            @endif
        </div>
        
        <div class="doc-box">
            <label class="doc-label">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--b600)"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" /></svg>
                KHS (Kartu Hasil Studi) @if(!$user->khs) <span style="color:#ef4444">*</span> @endif
            </label>
            <input type="file" name="khs" class="doc-input form-input" {{ $user->khs ? '' : 'required' }} accept=".pdf,.jpg,.jpeg,.png">
            <small class="doc-desc">Unggah KHS semester terakhir Anda. Format: PDF, JPG, PNG (Maks 15MB).</small>
            @if($user->khs)
                <div style="margin-top:0.75rem;font-size:0.85rem;color:#16a34a;display:flex;align-items:center;gap:0.3rem">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
                    File sudah diunggah. <a href="{{ asset('storage/' . $user->khs) }}" target="_blank" style="color:var(--b600);text-decoration:underline">Lihat file Anda</a>
                </div>
            @endif
        </div>

        <div class="doc-box">
            <label class="doc-label">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--b600)"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" /></svg>
                KRS (Kartu Rencana Studi) @if(!$user->krs) <span style="color:#ef4444">*</span> @endif
            </label>
            <input type="file" name="krs" class="doc-input form-input" {{ $user->krs ? '' : 'required' }} accept=".pdf,.jpg,.jpeg,.png">
            <small class="doc-desc">Unggah KRS yang memuat mata kuliah KKN. Format: PDF, JPG, PNG (Maks 15MB).</small>
            @if($user->krs)
                <div style="margin-top:0.75rem;font-size:0.85rem;color:#16a34a;display:flex;align-items:center;gap:0.3rem">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
                    File sudah diunggah. <a href="{{ asset('storage/' . $user->krs) }}" target="_blank" style="color:var(--b600);text-decoration:underline">Lihat file Anda</a>
                </div>
            @endif
        </div>

        <div class="doc-box">
            <label class="doc-label">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--b600)"><path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" /></svg>
                Sertifikat PKBI @if(!$user->sertifikat_pkbi) <span style="color:#ef4444">*</span> @endif
            </label>
            <input type="file" name="sertifikat_pkbi" class="doc-input form-input" {{ $user->sertifikat_pkbi ? '' : 'required' }} accept=".pdf,.jpg,.jpeg,.png">
            <small class="doc-desc">Unggah scan Sertifikat PKBI. Format: PDF, JPG, PNG (Maks 15MB).</small>
            @if($user->sertifikat_pkbi)
                <div style="margin-top:0.75rem;font-size:0.85rem;color:#16a34a;display:flex;align-items:center;gap:0.3rem">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
                    File sudah diunggah. <a href="{{ asset('storage/' . $user->sertifikat_pkbi) }}" target="_blank" style="color:var(--b600);text-decoration:underline">Lihat file Anda</a>
                </div>
            @endif
        </div>

        <button type="submit" class="btn-action" style="width:100%; padding: 0.8rem; font-size: 1rem;">Unggah Semua Dokumen</button>
    </form>
</div>

@push('scripts')
<script>
    document.querySelectorAll('.doc-input').forEach(input => {
        input.addEventListener('change', function(e) {
            if (this.files && this.files[0]) {
                const fileSizeMB = this.files[0].size / 1024 / 1024;
                if (fileSizeMB > 15) {
                    // Reset input
                    this.value = '';
                    
                    // Show custom styled popup
                    if (typeof customAlert === 'function') {
                        customAlert(
                            'Ukuran File Terlalu Besar', 
                            'File yang Anda pilih berukuran ' + fileSizeMB.toFixed(1) + 'MB. Maksimal ukuran file yang diizinkan adalah 15MB. Silakan kompres file Anda terlebih dahulu.', 
                            'danger'
                        );
                    } else {
                        alert('Ukuran File Terlalu Besar!\nFile yang Anda pilih berukuran ' + fileSizeMB.toFixed(1) + 'MB. Maksimal ukuran file yang diizinkan adalah 15MB.');
                    }
                }
            }
        });
    });
</script>
@endpush
@endsection