@extends('layouts.admin')
@section('title', 'Review Proposal')
@section('page-title', 'Proposal Review Console')

@section('content')
<div class="breadcrumb"><a href="{{ route('admin.dashboard') }}">Dashboard</a> <span>›</span> <a href="{{ route('admin.proposal') }}">Proposals</a> <span>›</span> <span>In Review</span> <span>›</span> <span>P-{{ str_pad($proposal->id, 4, '0', STR_PAD_LEFT) }}</span></div>

<div style="display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap">
    <span class="tag {{ $proposal->status == 'approved' ? 'tag-success' : ($proposal->status == 'revision' ? 'tag-wajib' : 'tag-pending') }}" style="font-size:.72rem;padding:.3rem .7rem">Status: {{ ucfirst($proposal->status) }}</span>
    <span class="tag" style="background:var(--gr100);color:var(--gr600);font-size:.72rem;padding:.3rem .7rem">📅 Sub: {{ $proposal->created_at->format('d M Y') }}</span>
</div>

{{-- Proposal Header --}}
<div class="card" style="margin-bottom:1.5rem">
    <div style="display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap">
        <div class="admin-avatar-sm" style="width:48px;height:48px;font-size:1rem;border-radius:50%;background:var(--g100);color:var(--g700);display:flex;align-items:center;justify-content:center;font-weight:bold">{{ strtoupper(substr($proposal->user->name, 0, 2)) }}</div>
        <div style="flex:1">
            <h2 style="font-size:1.15rem;font-weight:700">{{ $proposal->title }}</h2>
            <div style="display:flex;gap:1rem;flex-wrap:wrap;margin-top:.5rem;font-size:.8rem;color:var(--gr500)">
                <span>👤 {{ $proposal->user->name }} ({{ $proposal->user->nim }})</span><span>🎓 {{ $proposal->user->prodi ?? '-' }}</span><span>📍 {{ $proposal->village->name }}, Kec. {{ $proposal->village->district }}</span>
            </div>
        </div>
        <a href="{{ asset('storage/' . $proposal->file_path) }}" target="_blank" class="btn-outline-sm">⬇ Buka PDF</a>
    </div>
</div>

<div class="proposal-grid">
    <div>

        @if($proposal->notes)
        <div class="card" style="margin-bottom:1rem;background:#fffbeb;border-color:#fef3c7">
            <h3 style="font-size:.95rem;font-weight:700;margin-bottom:.5rem;color:#d97706">Catatan Review Sebelumnya</h3>
            <p style="font-size:.85rem;color:#b45309">{{ $proposal->notes }}</p>
        </div>
        @endif
    </div>

    {{-- Review Panel --}}
    <div>
        <div class="review-panel">
            <h3 style="font-size:.95rem;font-weight:700;margin-bottom:1.25rem;display:flex;align-items:center;gap:.4rem">📋 Panel Keputusan Review</h3>
            
            <form action="{{ route('admin.proposal.update', $proposal->id) }}" method="POST">
                @csrf
                <div class="review-decision">
                    <label class="decision-btn" style="cursor:pointer">
                        <input type="radio" name="status" value="approved" style="opacity:0;position:absolute" onchange="updateDecisionStyles(this)">
                        <div class="d-icon" style="background:var(--g100);color:var(--g700)">✓</div>
                        <div class="d-label">Setujui</div>
                        <div class="d-sub">Lanjut ke pelaksanaan</div>
                    </label>
                    <label class="decision-btn" style="cursor:pointer">
                        <input type="radio" name="status" value="revision" style="opacity:0;position:absolute" onchange="updateDecisionStyles(this)">
                        <div class="d-icon" style="background:#fef3c7;color:#d97706">↩</div>
                        <div class="d-label" style="color:#d97706">Revisi</div>
                        <div class="d-sub" style="color:#d97706">Kembalikan untuk perbaikan</div>
                    </label>
                    <label class="decision-btn" style="cursor:pointer">
                        <input type="radio" name="status" value="rejected" style="opacity:0;position:absolute" onchange="updateDecisionStyles(this)">
                        <div class="d-icon" style="background:#fef2f2;color:#dc2626">✗</div>
                        <div class="d-label">Tolak</div>
                        <div class="d-sub">Tidak memenuhi standar</div>
                    </label>
                </div>

                <div style="margin-top:1.25rem">
                    <label style="font-size:.82rem;font-weight:600;display:block;margin-bottom:.5rem">Catatan Khusus / Instruksi Revisi</label>
                    <textarea name="notes" class="proposal-input proposal-textarea" style="min-height:100px;width:100%" placeholder="Tuliskan alasan spesifik atau instruksi untuk mahasiswa..."></textarea>
                </div>

                <button type="submit" class="btn-submit-review" style="width:100%;margin-top:1.5rem">Kirim Keputusan Review</button>
            </form>
        </div>
    </div>
</div>

<script>
    function updateDecisionStyles(radio) {
        document.querySelectorAll('.decision-btn').forEach(btn => {
            btn.classList.remove('selected');
            btn.style.borderColor = 'var(--gr200)';
            btn.style.background = 'var(--w)';
        });
        
        const label = radio.closest('.decision-btn');
        label.classList.add('selected');
        
        if (radio.value === 'approved') {
            label.style.borderColor = 'var(--g500)';
            label.style.background = 'var(--g50)';
        } else if (radio.value === 'revision') {
            label.style.borderColor = '#f59e0b';
            label.style.background = '#fef3c7';
        } else if (radio.value === 'rejected') {
            label.style.borderColor = '#ef4444';
            label.style.background = '#fef2f2';
        }
    }
</script>
@endsection