@extends('layouts.app')

@section('title', 'Kelola Aktivitas DPR - Admin')

@section('content')
<div class="flex h-full min-h-screen bg-slate-50">
    @include('admin.partials.sidebar')

    {{-- Main Content --}}
    <div class="flex-1 overflow-x-hidden p-8">
        <div class="flex justify-between items-center mb-8">
            <h1 class="text-3xl font-bold text-slate-800">Kelola Aktivitas DPR</h1>
            <button onclick="document.getElementById('modal-tambah').classList.remove('hidden')" class="px-5 py-2.5 rounded-xl text-sm font-semibold text-white bg-red-600 hover:bg-red-700 transition-colors shadow-sm">
                + Tambah Aktivitas Baru
            </button>
        </div>

        {{-- Aktivitas List --}}
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-slate-50 border-b border-slate-100 text-sm font-medium text-slate-500">
                            <th class="py-4 px-6 font-medium">Judul & Komisi</th>
                            <th class="py-4 px-6 font-medium">Status & Progres</th>
                            <th class="py-4 px-6 font-medium">Target</th>
                            <th class="py-4 px-6 font-medium text-right">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse($aktivitas as $item)
                            <tr class="hover:bg-slate-50/50 transition-colors">
                                <td class="py-4 px-6">
                                    <div class="font-semibold text-slate-800 mb-1 max-w-md line-clamp-1">{{ $item->judul }}</div>
                                    <div class="text-xs text-slate-500">{{ $item->komisi }}</div>
                                </td>
                                <td class="py-4 px-6">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium mb-2
                                        @if($item->status == 'Sedang Berlangsung') bg-amber-100 text-amber-800
                                        @elseif($item->status == 'Selesai') bg-emerald-100 text-emerald-800
                                        @else bg-slate-100 text-slate-800
                                        @endif">
                                        {{ $item->status }}
                                    </span>
                                    <div class="flex items-center gap-2">
                                        <div class="w-24 h-1.5 bg-slate-200 rounded-full overflow-hidden">
                                            <div class="h-full bg-red-500 rounded-full" style="width: {{ $item->progress }}%"></div>
                                        </div>
                                        <span class="text-xs text-slate-500 font-medium">{{ $item->progress }}%</span>
                                    </div>
                                </td>
                                <td class="py-4 px-6 text-sm text-slate-600">
                                    {{ $item->target ?? '-' }}
                                </td>
                                <td class="py-4 px-6 text-right">
                                    <a href="{{ url('/aktivitas-dpr/' . $item->id) }}" target="_blank" class="text-sm text-red-600 hover:underline font-medium">Lihat</a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="py-8 px-6 text-center text-slate-500">Belum ada data aktivitas DPR.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        @if($aktivitas->hasPages())
            <div class="mt-8">
                {{ $aktivitas->links() }}
            </div>
        @endif
    </div>
</div>

{{-- Modal Tambah --}}
<div id="modal-tambah" class="fixed inset-0 z-50 hidden bg-slate-900/50 backdrop-blur-sm overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
        <div class="relative inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl w-full border border-slate-100">
            <form action="{{ url('/admin/aktivitas-dpr') }}" method="POST">
                @csrf
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <h3 class="text-xl font-bold text-slate-800 mb-6">Tambah Aktivitas DPR Baru</h3>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-semibold text-slate-700 mb-1">Judul Aktivitas</label>
                            <input type="text" name="judul" required class="w-full rounded-xl border border-slate-200 px-4 py-2 focus:border-red-400 focus:ring-1 focus:ring-red-200 text-sm">
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-semibold text-slate-700 mb-1">Komisi</label>
                                <input type="text" name="komisi" required placeholder="Contoh: Komisi I" class="w-full rounded-xl border border-slate-200 px-4 py-2 focus:border-red-400 focus:ring-1 focus:ring-red-200 text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-slate-700 mb-1">Status</label>
                                <select name="status" required class="w-full rounded-xl border border-slate-200 px-4 py-2 focus:border-red-400 focus:ring-1 focus:ring-red-200 text-sm">
                                    <option value="direncanakan">Direncanakan</option>
                                    <option value="sedang_berjalan">Sedang Berjalan</option>
                                    <option value="selesai">Selesai</option>
                                    <option value="ditunda">Ditunda</option>
                                </select>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-semibold text-slate-700 mb-1">Progres (%)</label>
                                <input type="number" name="progress" required min="0" max="100" value="0" class="w-full rounded-xl border border-slate-200 px-4 py-2 focus:border-red-400 focus:ring-1 focus:ring-red-200 text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-slate-700 mb-1">Target Penyelesaian</label>
                                <input type="text" name="target" placeholder="Contoh: Q4 2024" class="w-full rounded-xl border border-slate-200 px-4 py-2 focus:border-red-400 focus:ring-1 focus:ring-red-200 text-sm">
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-slate-700 mb-1">Deskripsi</label>
                            <textarea name="deskripsi" required rows="4" class="w-full rounded-xl border border-slate-200 px-4 py-2 focus:border-red-400 focus:ring-1 focus:ring-red-200 text-sm"></textarea>
                        </div>
                    </div>
                </div>
                <div class="bg-slate-50 px-4 py-4 sm:px-6 sm:flex sm:flex-row-reverse border-t border-slate-100">
                    <button type="submit" class="w-full inline-flex justify-center rounded-xl border border-transparent shadow-sm px-6 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 sm:ml-3 sm:w-auto sm:text-sm transition-colors">
                        Simpan Aktivitas
                    </button>
                    <button type="button" onclick="document.getElementById('modal-tambah').classList.add('hidden')" class="mt-3 w-full inline-flex justify-center rounded-xl border border-slate-300 shadow-sm px-6 py-2 bg-white text-base font-medium text-slate-700 hover:bg-slate-50 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm transition-colors">
                        Batal
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection