@extends('layouts.app')

@section('title', 'Admin - Edit User')

@section('content')
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="mb-6">
        <a href="{{ route('admin.users.index') }}" class="text-blue-600 hover:text-blue-800 mb-4 inline-block">
            <i class="fas fa-arrow-left mr-2"></i>Kembali ke Daftar User
        </a>
        <h1 class="text-3xl font-bold text-gray-900">
            <i class="fas fa-user-edit text-blue-600 mr-2"></i>Edit User
        </h1>
    </div>

    <div class="bg-white rounded-lg shadow-md p-6">
        <form action="{{ route('admin.users.update', $user) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="mb-4">
                <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nama <span class="text-red-500">*</span></label>
                <input type="text" id="name" name="name" value="{{ old('name', $user->name) }}" required
                       class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 @error('name') border-red-500 @enderror">
                @error('name')<p class="text-red-500 text-sm mt-1">{{ $message }}</p>@enderror
            </div>

            <div class="mb-4">
                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email (untuk login) <span class="text-red-500">*</span></label>
                <input type="email" id="email" name="email" value="{{ old('email', $user->email) }}" required
                       class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 @error('email') border-red-500 @enderror">
                @error('email')<p class="text-red-500 text-sm mt-1">{{ $message }}</p>@enderror
            </div>

            <div class="mb-4">
                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password baru (kosongkan jika tidak diubah)</label>
                <input type="password" id="password" name="password" autocomplete="new-password"
                       class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 @error('password') border-red-500 @enderror">
                @error('password')<p class="text-red-500 text-sm mt-1">{{ $message }}</p>@enderror
            </div>

            <div class="mb-4">
                <label for="password_confirmation" class="block text-sm font-medium text-gray-700 mb-1">Konfirmasi Password baru</label>
                <input type="password" id="password_confirmation" name="password_confirmation" autocomplete="new-password"
                       class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500">
            </div>

            @if($user->id !== auth()->id())
            <div class="mb-4 p-4 bg-gray-50 rounded-lg">
                <label class="flex items-center">
                    <input type="checkbox" name="is_super_admin" value="1" {{ old('is_super_admin', $user->is_super_admin) ? 'checked' : '' }} id="is_super_admin" onchange="toggleCategories()"
                           class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                    <span class="ml-2 text-sm font-medium text-gray-700">Super Admin</span>
                </label>
            </div>
            @else
            <p class="text-sm text-gray-500 mb-4">Anda tidak dapat mengubah role akun sendiri.</p>
            <input type="hidden" name="is_super_admin" value="1">
            @endif

            <div id="categoriesBlock" class="mb-4" style="display: {{ $user->is_super_admin ? 'none' : 'block' }};">
                <p class="text-sm font-medium text-gray-700 mb-2">Kategori dokumen yang boleh dikelola:</p>
                @php
                    $allowedCats = old('allowed_categories', $user->allowed_categories ?? []);
                    $allowedSubs = old('allowed_subcategory_slugs', $user->allowed_subcategory_slugs ?? []);
                @endphp
                <div class="space-y-2">
                    <label class="flex items-center">
                        <input type="checkbox" name="allowed_categories[]" value="warta_jemaat" {{ in_array('warta_jemaat', $allowedCats) ? 'checked' : '' }} class="category-cb rounded border-gray-300">
                        <span class="ml-2">Warta Jemaat</span>
                    </label>
                    <label class="flex items-center">
                        <input type="checkbox" name="allowed_categories[]" value="tata_ibadah" {{ in_array('tata_ibadah', $allowedCats) ? 'checked' : '' }} class="category-cb rounded border-gray-300" onchange="toggleSubcategories()">
                        <span class="ml-2">Tata Ibadah</span>
                    </label>
                </div>
                <div id="subcategoriesBlock" class="mt-3 pl-6 border-l-2 border-gray-200 {{ in_array('tata_ibadah', $allowedCats) ? '' : 'hidden' }}">
                    <p class="text-sm text-gray-600 mb-2">Subkategori Tata Ibadah (kosongkan = semua):</p>
                    @foreach($subcategories as $sub)
                    <label class="flex items-center mb-1">
                        <input type="checkbox" name="allowed_subcategory_slugs[]" value="{{ $sub->slug }}"
                               {{ in_array($sub->slug, $allowedSubs) ? 'checked' : '' }} class="rounded border-gray-300">
                        <span class="ml-2">{{ $sub->name }}</span>
                    </label>
                    @endforeach
                </div>
            </div>

            <div class="flex justify-end gap-2">
                <a href="{{ route('admin.users.index') }}" class="bg-gray-300 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-400">Batal</a>
                <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700">
                    <i class="fas fa-save mr-2"></i>Simpan
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function toggleCategories() {
    var isSuper = document.getElementById('is_super_admin');
    if (!isSuper) return;
    document.getElementById('categoriesBlock').style.display = isSuper.checked ? 'none' : 'block';
}
function toggleSubcategories() {
    var tata = document.querySelector('input[name="allowed_categories[]"][value="tata_ibadah"]');
    if (!tata) return;
    document.getElementById('subcategoriesBlock').classList.toggle('hidden', !tata.checked);
}
document.addEventListener('DOMContentLoaded', function() {
    toggleCategories();
    toggleSubcategories();
});
</script>
@endpush
@endsection