@extends('layouts.app')

@section('title', 'Kelola Raperda - 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">
            <div>
                <h1 class="text-3xl font-bold text-slate-800">Kelola Raperda</h1>
                <p class="text-slate-500 mt-1">Publikasikan draf peraturan daerah beserta pasal-pasalnya untuk dikawal masyarakat.</p>
            </div>
            <button onclick="document.getElementById('modal-raperda').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 shrink-0">
                + Tambah Raperda
            </button>
        </div>

        <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/50 border-b border-slate-100 text-sm font-medium text-slate-500">
                            <th class="py-4 px-6 font-medium">Judul</th>
                            <th class="py-4 px-6 font-medium">Komisi</th>
                            <th class="py-4 px-6 font-medium">Pasal</th>
                            <th class="py-4 px-6 font-medium">Status</th>
                            <th class="py-4 px-6 font-medium">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse($perda as $item)
                            <tr class="hover:bg-slate-50/50 transition-colors">
                                <td class="py-4 px-6">
                                    <a href="{{ route('kawal-perda.show', $item->id) }}" target="_blank" class="font-medium text-slate-800 hover:text-red-600 hover:underline line-clamp-1 max-w-xs">{{ $item->judul }}</a>
                                    @if($item->nomor)
                                        <p class="text-xs text-slate-400 mt-0.5">{{ $item->nomor }}</p>
                                    @endif
                                </td>
                                <td class="py-4 px-6 text-sm text-slate-600">{{ $item->komisi ?? '-' }}</td>
                                <td class="py-4 px-6 text-sm text-slate-600">{{ $item->pasal_count }}</td>
                                <td class="py-4 px-6">
                                    <form action="{{ url('/admin/kawal-perda/' . $item->id . '/status') }}" method="POST">
                                        @csrf
                                        <select name="status" onchange="this.form.submit()"
                                                class="w-36 rounded-lg border border-slate-200 px-3 py-2 focus:border-red-400 focus:ring-1 focus:ring-red-200 text-sm bg-white">
                                            @foreach(['draf', 'pembahasan', 'disahkan', 'ditolak'] as $st)
                                                <option value="{{ $st }}" {{ $item->status == $st ? 'selected' : '' }}>{{ ucfirst($st) }}</option>
                                            @endforeach
                                        </select>
                                    </form>
                                </td>
                                <td class="py-4 px-6">
                                    <form action="{{ url('/admin/kawal-perda/' . $item->id) }}" method="POST" onsubmit="return confirm('Hapus raperda ini beserta seluruh pasal dan votenya?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-sm text-red-600 hover:underline font-medium">Hapus</button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="py-8 px-6 text-center text-slate-500">Belum ada raperda.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

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

{{-- Modal Tambah Raperda --}}
<div id="modal-raperda" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4 py-8">
        <div class="fixed inset-0 bg-slate-900/50" onclick="document.getElementById('modal-raperda').classList.add('hidden')"></div>
        <div class="relative bg-white rounded-2xl shadow-xl max-w-2xl w-full p-8">
            <h2 class="text-xl font-bold text-slate-800 mb-6">Tambah Raperda Baru</h2>
            <form action="{{ url('/admin/kawal-perda') }}" method="POST">
                @csrf
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-semibold text-slate-700 mb-1">Judul <span class="text-red-500">*</span></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">Nomor</label>
                            <input type="text" name="nomor" placeholder="Contoh: Raperda No. 8 Tahun 2026" 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">Komisi</label>
                            <input type="text" name="komisi" placeholder="Contoh: Komisi III" 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">Status <span class="text-red-500">*</span></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="draf">Draf</option>
                            <option value="pembahasan">Pembahasan</option>
                            <option value="disahkan">Disahkan</option>
                            <option value="ditolak">Ditolak</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-slate-700 mb-1">Ringkasan / Deskripsi <span class="text-red-500">*</span></label>
                        <textarea name="isi" required rows="3" 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>

                    {{-- Pasal dinamis --}}
                    <div>
                        <div class="flex items-center justify-between mb-2">
                            <label class="block text-sm font-semibold text-slate-700">Pasal-Pasal</label>
                            <button type="button" onclick="tambahPasal()" class="text-xs font-semibold text-red-600 hover:underline">+ Tambah Pasal</button>
                        </div>
                        <div id="daftar-pasal" class="space-y-3"></div>
                    </div>
                </div>

                <div class="flex justify-end gap-3 mt-6 pt-4 border-t border-slate-100">
                    <button type="button" onclick="document.getElementById('modal-raperda').classList.add('hidden')" class="px-5 py-2.5 rounded-xl border border-slate-200 text-sm font-semibold text-slate-600 bg-white hover:bg-slate-50 transition-colors">
                        Batal
                    </button>
                    <button type="submit" class="px-6 py-2.5 rounded-xl text-sm font-semibold text-white bg-red-600 hover:bg-red-700 transition-colors">
                        Publikasikan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    let nomorPasal = 0;

    function tambahPasal() {
        nomorPasal++;
        const wadah = document.getElementById('daftar-pasal');
        const baris = document.createElement('div');
        baris.className = 'p-3 rounded-xl bg-slate-50 border border-slate-100 space-y-2';
        baris.innerHTML =
            '<div class="flex items-center gap-2">' +
            '<input type="text" name="pasal_nomor[]" value="Pasal ' + nomorPasal + '" required class="flex-1 rounded-lg border border-slate-200 px-3 py-1.5 text-sm focus:border-red-400 focus:ring-1 focus:ring-red-200">' +
            '<button type="button" class="text-xs text-red-600 hover:underline font-medium shrink-0" onclick="this.closest(\'div\').parentElement.remove()">Hapus</button>' +
            '</div>' +
            '<textarea name="pasal_isi[]" rows="2" required placeholder="Isi pasal..." class="w-full rounded-lg border border-slate-200 px-3 py-1.5 text-sm focus:border-red-400 focus:ring-1 focus:ring-red-200"></textarea>';
        wadah.appendChild(baris);
    }

    // Mulai dengan satu baris pasal
    tambahPasal();
</script>
@endpush
@endsection