@extends('layouts.dashboard')
@section('title', 'Proposal PBPMD')
@section('page-title', 'Pengajuan Proposal PBPMD')

@section('content')
<div class="breadcrumb">
    <a href="{{ route('mahasiswa.dashboard') }}">Beranda</a> <span>›</span> <span>Proposal Saya</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">Proposal PBPMD</h1>
        <p class="section-sub" style="margin-bottom:0">Buat dan kirim proposal pengabdian Anda</p>
    </div>
    @if($proposal)
        @if($proposal->status == 'approved')
            <span class="tag tag-success" style="font-size:.78rem;padding:.4rem .8rem">✓ Disetujui</span>
        @elseif($proposal->status == 'revision' || $proposal->status == 'rejected')
            <span class="tag tag-danger" style="font-size:.78rem;padding:.4rem .8rem">⚠ Perlu Revisi</span>
        @else
            <span class="tag tag-pending" style="font-size:.78rem;padding:.4rem .8rem">⏳ Menunggu Review</span>
        @endif
    @endif
</div>

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

@if($proposalDeadline)
<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="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
    <div style="font-size:0.85rem;">
        <strong style="display:block; margin-bottom:0.1rem;">Batas Waktu Pengumpulan Proposal:</strong>
        {{ \Carbon\Carbon::parse($proposalDeadline)->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($proposal && ($proposal->status == 'revision' || $proposal->status == 'rejected') && $proposal->notes)
    {{-- Revision Alert --}}
    <div class="proposal-alert revision">
        <h4>⚠ Proposal Anda Perlu Direvisi</h4>
        <div style="background:var(--w);border-radius:var(--radsm);padding:.75rem 1rem;margin-top:.75rem;font-size:.82rem">
            <strong>Poin Revisi/Catatan:</strong>
            <p style="margin-top:.35rem;color:var(--gr600)">{{ $proposal->notes }}</p>
        </div>
    </div>
@endif

<form action="{{ route('mahasiswa.proposal.submit') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <div style="width:100%">
        <div>
            {{-- Tips before writing --}}
            <div class="card" style="margin-bottom:1rem">
                <h4 style="font-size:.95rem;font-weight:600;margin-bottom:.75rem">Sebelum Mulai Menulis Proposal</h4>
                <div style="display:flex;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--gr500);margin-bottom:1rem">
                    <span>✓ Pastikan tema sesuai panduan tahun ini</span>
                    <span>✓ Siapkan data pendukung (jurnal, lokasi)</span>
                </div>
                <div style="display:flex;gap:.5rem">
                    @php
                        $existingProps = \Illuminate\Support\Facades\Storage::disk('public')->files('templates');
                        $propUrl = '#';
                        foreach($existingProps as $file) {
                            if(str_starts_with(basename($file), 'template-proposal.')) {
                                $propUrl = route('template.preview', 'proposal');
                                break;
                            }
                        }
                    @endphp
                    @if($propUrl != '#')
                        <a href="{{ $propUrl }}" class="btn-outline-sm" target="_blank">📄 Lihat Template Proposal</a>
                    @endif
                </div>
            </div>

            {{-- Section 1 --}}
            <div class="proposal-form-section">
                <h4>1. Informasi Dasar</h4>
                <div class="form-group" style="margin-bottom:1rem">
                    <label style="font-size:.82rem;font-weight:600;color:var(--gr700);display:block;margin-bottom:.4rem">Desa Tujuan <span style="color:#dc2626">*</span></label>
                    <input type="text" class="proposal-input" value="{{ $village->name }} - Kec. {{ $village->district }}" readonly style="background:var(--gr50);color:var(--gr600);cursor:not-allowed">
                    <small style="color:var(--gr500);display:block;margin-top:.25rem">Pilihan desa ini diambil dari menu Pendaftaran Desa.</small>
                </div>
                <div class="form-group" style="margin-bottom:1rem">
                    <label style="font-size:.82rem;font-weight:600;color:var(--gr700);display:block;margin-bottom:.4rem">Judul Proposal <span style="color:#dc2626">*</span></label>
                    <input type="text" name="title" class="proposal-input" value="{{ $proposal->title ?? old('title') }}" required {{ ($proposal && $proposal->status == 'approved') ? 'readonly' : '' }}>
                </div>
            </div>

            {{-- Section 2: Dokumen --}}
            <div class="proposal-form-section">
                <h4>2. Upload Dokumen Proposal <span style="color:#dc2626">*</span></h4>
                @if(!$proposal || $proposal->status != 'approved')
                    <div style="margin-bottom:1rem">
                        <input type="file" name="file" id="file" style="display:none" accept=".pdf" {{ !$proposal ? '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" style="margin-bottom:.35rem"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                            <p style="font-size:.82rem;font-weight:500;color:var(--g600)">Klik untuk unggah file proposal terbaru</p>
                            <p style="font-size:.7rem;margin-top:.15rem">PDF maksimal 10MB</p>
                        </label>
                    </div>
                @endif
                
                @if($proposal)
                    <div class="doc-file">
                        <div class="doc-file-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div>
                        <div class="doc-file-info"><p>Proposal Terunggah</p><span>{{ $proposal->created_at->format('d M Y, H:i') }}</span></div>
                        <div class="doc-file-actions">
                            <a href="{{ Storage::url($proposal->file_path) }}" target="_blank" title="Lihat" style="color:var(--gr400)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></a>
                        </div>
                    </div>
                @endif
            </div>

            {{-- Bottom Action Bar --}}
            @if(!$proposal || $proposal->status != 'approved')
                <div style="display:flex;justify-content:space-between;align-items:center;padding:1.5rem 0 0.5rem 0;margin-top:1rem;border-top:1px solid var(--gr200)">
                    <span class="form-autosave">
                        @if($proposal && $proposal->status == 'pending')
                            <span style="color:var(--g600);font-weight:600">✓ Proposal Terkirim (Menunggu Verifikasi)</span>
                        @endif
                    </span>
                    <div class="form-actions">
                        @if(!$proposal)
                            <button type="submit" class="btn-action">▷ Kirim Proposal</button>
                        @elseif($proposal->status == 'pending')
                            <button type="submit" class="btn-action" style="background:var(--g600)">Update Proposal</button>
                        @elseif($proposal->status == 'revision' || $proposal->status == 'rejected')
                            <button type="submit" class="btn-action">▷ Kirim Revisi Proposal</button>
                        @endif
                    </div>
                </div>
            @endif
        </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