@extends('layouts.app')

@section('title', 'Admin - Tambah 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-plus text-blue-600 mr-2"></i>Tambah User
        </h1>
    </div>

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

            <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') }}" 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') }}" 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 <span class="text-red-500">*</span></label>
                <input type="password" id="password" name="password" required 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 <span class="text-red-500">*</span></label>
                <input type="password" id="password_confirmation" name="password_confirmation" required autocomplete="new-password"
                       class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500">
            </div>

            <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') ? '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 (akses penuh: dokumen, subkategori, user)</span>
                </label>
            </div>

            <div id="categoriesBlock" class="mb-4">
                <p class="text-sm font-medium text-gray-700 mb-2">Kategori dokumen yang boleh dikelola (kosongkan = semua):</p>
                <div class="space-y-2">
                    <label class="flex items-center">
                        <input type="checkbox" name="allowed_categories[]" value="warta_jemaat" {{ in_array('warta_jemaat', old('allowed_categories', [])) ? 'checked' : '' }}
                               class="category-cb rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                        <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', old('allowed_categories', [])) ? 'checked' : '' }}
                               class="category-cb rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" 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', old('allowed_categories', [])) ? '' : '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, old('allowed_subcategory_slugs', [])) ? 'checked' : '' }}
                               class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                        <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').checked;
    document.getElementById('categoriesBlock').style.display = isSuper ? 'none' : 'block';
}
function toggleSubcategories() {
    var tataChecked = document.querySelector('input[name="allowed_categories[]"][value="tata_ibadah"]').checked;
    document.getElementById('subcategoriesBlock').classList.toggle('hidden', !tataChecked);
}
document.addEventListener('DOMContentLoaded', function() {
    toggleCategories();
    toggleSubcategories();
});
</script>
@endpush
@endsection