@extends('layouts.app')

@section('title', $aktivitas->judul)

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    {{-- Breadcrumb --}}
    <nav class="flex items-center gap-2 text-sm text-slate-400 mb-6">
        <a href="{{ url('/') }}" class="hover:text-red-600 transition-colors">Beranda</a>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        <a href="{{ url('/aktivitas-dpr') }}" class="hover:text-red-600 transition-colors">Aktivitas DPR</a>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        <span class="text-slate-600 truncate max-w-xs">{{ $aktivitas->judul }}</span>
    </nav>

    {{-- Main Card --}}
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
        <div class="p-8">
            <div class="flex flex-wrap items-center gap-3 mb-4">
                <span class="px-3 py-1 rounded-full text-xs font-semibold bg-red-50 text-red-700">{{ $aktivitas->komisi }}</span>
                <span class="px-3 py-1 rounded-full text-xs font-medium
                    @if($aktivitas->status == 'sedang_berjalan') bg-amber-50 text-amber-700
                    @elseif($aktivitas->status == 'selesai') bg-emerald-50 text-emerald-700
                    @elseif($aktivitas->status == 'direncanakan') bg-blue-50 text-blue-700
                    @else bg-slate-50 text-slate-600
                    @endif">
                    {{ $aktivitas->status_label }}
                </span>
            </div>

            <h1 class="text-2xl sm:text-3xl font-bold text-slate-800 mb-6">{{ $aktivitas->judul }}</h1>

            {{-- Progress Section --}}
            <div class="bg-slate-50 rounded-xl p-6 mb-6 border border-slate-100">
                <div class="flex justify-between items-center mb-3">
                    <span class="text-sm font-semibold text-slate-700">Progres Pembahasan</span>
                    <span class="text-2xl font-bold text-slate-800">{{ $aktivitas->progress }}%</span>
                </div>
                <div class="w-full h-4 bg-slate-200 rounded-full overflow-hidden">
                    <div class="h-full rounded-full transition-all duration-1000 ease-out bg-red-500"
                         style="width: {{ $aktivitas->progress }}%;"></div>
                </div>
                @if($aktivitas->target)
                    <p class="mt-3 text-sm text-slate-500">
                        <span class="font-medium">Target:</span> {{ $aktivitas->target }}
                    </p>
                @endif
            </div>

            {{-- Description --}}
            <div class="mb-6">
                <h2 class="text-lg font-semibold text-slate-800 mb-3">Deskripsi</h2>
                <div class="prose prose-slate max-w-none text-slate-600 leading-relaxed">
                    {!! nl2br(e($aktivitas->deskripsi)) !!}
                </div>
            </div>

            {{-- Voting & Sentimen Publik --}}
            @php
                $totalVotes = $aktivitas->setuju_count + $aktivitas->tidak_setuju_count;
                $setujuPercent = $totalVotes > 0 ? round(($aktivitas->setuju_count / $totalVotes) * 100) : 0;
                $tidakSetujuPercent = $totalVotes > 0 ? 100 - $setujuPercent : 0;
            @endphp
            <div class="mt-8 pt-6 border-t border-slate-100 js-vote-group">
                <h3 class="text-lg font-semibold text-slate-800 mb-4">Sentimen Publik</h3>

                {{-- Percentage Bar --}}
                <div class="mb-6">
                    <div class="flex justify-between text-sm font-medium mb-2">
                        <span class="js-sentimen-setuju-label text-emerald-600">{{ $setujuPercent }}% Setuju</span>
                        <span class="js-sentimen-tidak-label text-red-600">{{ $tidakSetujuPercent }}% Tidak Setuju</span>
                    </div>
                    <div class="w-full h-3 bg-slate-100 rounded-full overflow-hidden flex">
                        <div class="js-sentimen-setuju-bar h-full bg-emerald-500 transition-all duration-1000" style="width: {{ $setujuPercent }}%"></div>
                        <div class="js-sentimen-tidak-bar h-full bg-red-500 transition-all duration-1000" style="width: {{ $tidakSetujuPercent }}%"></div>
                    </div>
                    <p class="text-xs text-slate-400 mt-2 text-center"><span class="js-sentimen-total">{{ number_format($totalVotes) }}</span> total suara &middot; Dimulai sejak {{ $aktivitas->created_at->translatedFormat('d M Y') }}</p>
                </div>

                {{-- Vote Buttons --}}
                @auth
                    <div class="flex gap-4">
                        <button type="button" data-vote="setuju" data-url="{{ url('/aktivitas-dpr/' . $aktivitas->id . '/vote') }}"
                                class="js-vote flex-1 py-3 rounded-xl font-semibold flex items-center justify-center gap-2 transition-all border cursor-pointer disabled:opacity-60 hover:shadow-sm {{ $userVote === 'setuju' ? 'bg-emerald-50 text-emerald-700 border-emerald-200' : 'bg-slate-50 text-slate-600 border-slate-200' }}">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"/></svg>
                            Setuju (<span class="js-count-setuju">{{ number_format($aktivitas->setuju_count) }}</span>)
                        </button>
                        <button type="button" data-vote="tidak_setuju" data-url="{{ url('/aktivitas-dpr/' . $aktivitas->id . '/vote') }}"
                                class="js-vote flex-1 py-3 rounded-xl font-semibold flex items-center justify-center gap-2 transition-all border cursor-pointer disabled:opacity-60 hover:shadow-sm {{ $userVote === 'tidak_setuju' ? 'bg-red-50 text-red-600 border-red-200' : 'bg-slate-50 text-slate-600 border-slate-200' }}">
                            <svg class="w-5 h-5 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"/></svg>
                            Tidak Setuju (<span class="js-count-tidak">{{ number_format($aktivitas->tidak_setuju_count) }}</span>)
                        </button>
                    </div>
                @else
                    <div class="bg-slate-50 rounded-xl p-6 text-center border border-slate-100">
                        <p class="text-sm text-slate-500 mb-3">Login untuk ikut memberikan suara Anda pada agenda ini.</p>
                        <a href="{{ url('/login') }}" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl text-sm font-semibold text-white bg-red-600 hover:bg-red-700 transition-all">
                            Masuk Sekarang
                        </a>
                    </div>
                @endauth
            </div>
        </div>
    </div>

    {{-- Back Link --}}
    <div class="mt-6">
        <a href="{{ url('/aktivitas-dpr') }}" class="inline-flex items-center gap-2 text-sm font-semibold text-red-600 hover:text-red-800 transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
            Kembali ke Aktivitas DPR
        </a>
    </div>
</div>
@endsection