@extends('layouts.admin')

@section('title', 'Pengaturan Halaman')

@section('content')
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white">📄 Pengaturan Halaman</h1>
</div>

@if(session('success'))
    <div class="mb-4 text-green-600 dark:text-green-400 font-medium">
        {{ session('success') }}
    </div>
@endif

<div class="overflow-x-auto bg-white dark:bg-gray-800 rounded-lg shadow border dark:border-gray-700">
    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm">
        <thead class="bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-300 uppercase text-xs tracking-wider">
            <tr>
                <th class="px-6 py-3 text-left">#</th>
                <th class="px-6 py-3 text-left">Nama Halaman</th>
                <th class="px-6 py-3 text-right">Status</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
            @forelse ($pageSettings as $setting)
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                    <td class="px-6 py-4">{{ $loop->iteration }}</td>
                    <td class="px-6 py-4">{{ $setting->section_name }}</td>
                    <td class="px-6 py-4 text-right">
                        <form action="{{ route('admin.page-setting.update', $setting) }}" method="POST">
                            @csrf
                            @method('PUT')
                            <input type="hidden" name="section_name" value="{{ $setting->section_name }}">
                            <input type="hidden" name="is_active" value="{{ $setting->is_active ? 0 : 1 }}">
                            <button type="submit"
                                    class="inline-flex items-center px-4 py-1.5 rounded-full text-xs font-semibold transition
                                           {{ $setting->is_active ? 'bg-green-100 text-green-700 dark:bg-green-800 dark:text-green-200' : 'bg-gray-300 text-gray-700 dark:bg-gray-700 dark:text-gray-300' }}">
                                <i class="fas {{ $setting->is_active ? 'fa-check-circle' : 'fa-ban' }} mr-2"></i>
                                {{ $setting->is_active ? 'Aktif (Klik Nonaktif)' : 'Nonaktif (Klik Aktif)' }}
                            </button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="3" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">Belum ada data.</td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

<div class="mt-6">
    {{ $pageSettings->links('vendor.pagination.tailwind') }}
</div>
@endsection