@extends('layouts.dashboard')
@section('title', 'Laporan Akhir')
@section('page-title', 'Laporan Akhir')

@section('content')
<form action="{{ route('mahasiswa.laporan.submit') }}" method="POST" enctype="multipart/form-data">
    @csrf
    
    @if(!$proposal)
        <div style="background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:1rem;border-radius:var(--radsm);margin-bottom:1.5rem">
            Anda belum memiliki proposal yang disetujui. Laporan akhir hanya dapat diisi setelah proposal disetujui.
        </div>
    @else
        <input type="hidden" name="proposal_id" value="{{ $proposal->id }}">
    @endif

    <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem">
        <div style="display:flex;align-items:center;gap:.75rem">
            <h1 class="section-title" style="margin-bottom:0">Laporan Akhir PBPMD</h1>
            @if($report)
                @if($report->status == 'approved')
                    <span class="tag tag-success" style="font-size:.72rem;padding:.3rem .7rem">✓ Disetujui</span>
                @elseif($report->status == 'revision')
                    <span class="tag tag-danger" style="font-size:.72rem;padding:.3rem .7rem">⚠ Perlu Revisi</span>
                @elseif($report->status == 'pending')
                    <span class="tag tag-pending" style="font-size:.72rem;padding:.3rem .7rem">⏳ Menunggu Review</span>
                @else
                    <span class="tag tag-pending" style="font-size:.72rem;padding:.3rem .7rem">📄 Draf</span>
                @endif
            @endif
        </div>
        
        @if($proposal && (!$report || $report->status == 'draft' || $report->status == 'revision'))
        <div style="display:flex;gap:.75rem">
            <button type="submit" name="is_draft" value="1" class="btn-outline-sm">📋 Simpan Draf</button>
            <button type="submit" class="btn-action">▷ Kirim Laporan</button>
        </div>
        @endif
    </div>
    <p class="section-sub" style="margin-top:-.75rem">Kirim laporan kegiatan pengabdian Anda</p>

    @php
        $settingsFile = storage_path('app/deadlines.json');
        $deadlines = file_exists($settingsFile) ? json_decode(file_get_contents($settingsFile), true) : [];
        $laporanDeadline = $deadlines['laporan'] ?? null;
    @endphp

    @if($laporanDeadline)
    <div style="background:#fffbeb; border-left:4px solid #f59e0b; color:#b45309; padding:1rem; border-radius:var(--radsm); margin-bottom:1.5rem; display:flex; align-items:center; gap:.75rem;">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
        <div style="font-size:0.85rem;">
            <strong style="display:block; margin-bottom:0.1rem;">Batas Waktu Pengumpulan Laporan:</strong>
            {{ \Carbon\Carbon::parse($laporanDeadline)->locale('id')->isoFormat('dddd, D MMMM Y') }}
        </div>
    </div>
    @endif

    @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

    @if($report && $report->status == 'revision' && $report->notes)
        <div class="proposal-alert revision" style="margin-bottom: 1.5rem">
            <h4>⚠ Laporan Anda Perlu Direvisi</h4>
            <div style="background:var(--w);border-radius:var(--radsm);padding:.75rem 1rem;margin-top:.75rem;font-size:.82rem">
                <strong>Catatan Admin:</strong>
                <p style="margin-top:.35rem;color:var(--gr600)">{{ $report->notes }}</p>
            </div>
        </div>
    @endif

    <div class="proposal-grid">
        <div>
            {{-- Guide --}}
            <div class="card" style="margin-bottom:1.25rem;border-left:4px solid var(--g500);background:var(--g50);border-color:var(--g200)">
                <h4 style="font-size:.95rem;font-weight:600;color:var(--g800);margin-bottom:.75rem;display:flex;align-items:center;gap:.4rem">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" /></svg>
                    Panduan Pengisian Laporan
                </h4>
                <div style="font-size:.82rem;color:var(--gr600);line-height:1.8">
                    <p style="display:flex;align-items:center;gap:.4rem">✅ Pastikan menggunakan template laporan terbaru.</p>
                    <p style="display:flex;align-items:center;gap:.4rem">✅ Unggah minimal 10 foto dokumentasi kegiatan dalam file PDF.</p>
                </div>
                <div style="margin-top: 1rem;">
                    @php
                        $existingLaps = \Illuminate\Support\Facades\Storage::disk('public')->files('templates');
                        $lapUrl = '#';
                        foreach($existingLaps as $file) {
                            if(str_starts_with(basename($file), 'template-laporan.')) {
                                $lapUrl = route('template.preview', 'laporan');
                                break;
                            }
                        }
                    @endphp
                    @if($lapUrl != '#')
                        <a href="{{ $lapUrl }}" class="btn-outline-sm" target="_blank">📄 Lihat Template Laporan</a>
                    @endif
                </div>
            </div>

            {{-- Ringkasan Kegiatan --}}
            <div class="card" style="margin-bottom:1.25rem">
                <h4 style="font-size:1rem;font-weight:600;color:var(--g700);margin-bottom:1.25rem;display:flex;align-items:center;gap:.4rem">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path 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.25m3.75 9v6m3-3H9m1.5-12H5.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>
                    Ringkasan Kegiatan
                </h4>
                <div style="margin-bottom:1rem">
                    <label style="font-size:.82rem;font-weight:600;color:var(--gr700);display:block;margin-bottom:.4rem">Judul Laporan</label>
                    <input type="text" name="title" class="proposal-input" value="{{ $report ? $report->title : ($proposal ? $proposal->title : '') }}" {{ ($report && in_array($report->status, ['pending', 'approved'])) ? 'readonly' : 'required' }}>
                </div>
                <div>
                    <label style="font-size:.82rem;font-weight:600;color:var(--gr700);display:block;margin-bottom:.4rem">Executive Summary</label>
                    <textarea name="summary" class="proposal-input proposal-textarea" style="min-height:120px" placeholder="Tuliskan ringkasan eksekutif kegiatan..." {{ ($report && in_array($report->status, ['pending', 'approved'])) ? 'readonly' : 'required' }}>{{ $report->summary ?? '' }}</textarea>
                </div>
            </div>

            {{-- Dokumen Laporan --}}
            <div class="card">
                <h4 style="font-size:1rem;font-weight:600;color:var(--g700);margin-bottom:1.25rem;display:flex;align-items:center;gap:.4rem">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path 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.25m6.75 12-3-3m0 0-3 3m3-3v6m-1.5-15H5.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>
                    Upload File Laporan
                </h4>
                
                @if(!$proposal)
                    <div style="text-align:center;padding:1.5rem 1rem;color:var(--gr500);font-size:.85rem;background:var(--gr50);border-radius:var(--radsm);border:1px dashed var(--gr300)">
                        Silakan tunggu hingga proposal Anda disetujui untuk dapat mengunggah file laporan.
                    </div>
                @elseif(!$report || in_array($report->status, ['draft', 'revision']))
                    <div style="margin-bottom:1rem">
                        <input type="file" name="file" id="file" style="display:none" accept=".pdf" {{ (!$report || !$report->file_path) ? 'required' : '' }}>
                        <label for="file" style="display:block;border:2px dashed var(--gr300);border-radius:var(--radsm);padding:1.5rem;text-align:center;color:var(--gr400);cursor:pointer">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom:.35rem"><path d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" /></svg>
                            <p style="font-size:.82rem;font-weight:500;color:var(--g600)">Klik untuk unggah Laporan Lengkap terbaru</p>
                            <p style="font-size:.7rem;margin-top:.15rem">PDF maksimal 5MB</p>
                        </label>
                    </div>
                @endif
                
                @if($report && $report->file_path)
                    <div class="doc-file" style="margin-top:1rem">
                        <div class="doc-file-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path 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.25m2.25 0H5.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></div>
                        <div class="doc-file-info"><p>Laporan_Terunggah.pdf</p><span>{{ $report->updated_at->format('d M Y, H:i') }}</span></div>
                        <div class="doc-file-actions">
                            <a href="{{ Storage::url($report->file_path) }}" target="_blank" title="Lihat"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.964-7.178Z" /><path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg></a>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        {{-- Right Sidebar --}}
        <div>
            {{-- Status --}}
            <div class="card" style="margin-bottom:1rem">
                <h4 style="font-size:.88rem;font-weight:700;margin-bottom:1rem">Status Pengisian</h4>
                @php
                    $pct = 0;
                    if($report) $pct = 50;
                    if($report && $report->status != 'draft') $pct = 100;
                @endphp
                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem">
                    <span style="font-size:.82rem;font-weight:600;color:var(--gr600)">Progres Keseluruhan</span>
                    <span style="font-size:.82rem;font-weight:700;color:var(--g600)">{{ $pct }}%</span>
                </div>
                <div class="action-progress" style="margin-bottom:1.25rem"><div class="action-progress-bar" style="width:{{ $pct }}%;background:var(--g500)"></div></div>
                <div style="display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--gr100);font-size:.82rem">
                    <span style="display:flex;align-items:center;gap:.35rem;color:var(--gr600)">✅ Laporan</span>
                    <span style="font-weight:600;color:var(--g600)">{{ $report ? 'Terisi' : 'Belum' }}</span>
                </div>
            </div>


        </div>
    </div>
</form>

@push('scripts')
<script>
    document.getElementById('file')?.addEventListener('change', function(e) {
        if(this.files && this.files[0]) {
            let label = this.nextElementSibling;
            let text = label.querySelector('p:first-of-type');
            if(text) text.innerText = this.files[0].name;
            label.style.borderColor = 'var(--g500)';
            label.style.color = 'var(--g700)';
        }
    });
</script>
@endpush
@endsection