@extends('layouts.app')

@section('title', 'Add User - SIPHLN')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">

    <!-- Header Bar -->
    <div class="flex justify-between items-center bg-white p-5 rounded-lg shadow border border-gray-200">
        <div>
            <h1 class="text-xl font-bold text-gray-800">Add User</h1>
            <p class="text-gray-500 text-sm">Create a new system user</p>
        </div>
        <a href="{{ route('users.index') }}" class="bg-gray-500 hover:bg-gray-600 text-white text-sm font-medium px-4 py-2 rounded-lg shadow transition">
            Cancel
        </a>
    </div>

    @if ($errors->any())
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg shadow-sm">
            <ul class="list-disc pl-5">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- Form Card -->
    <div class="bg-white p-6 rounded-lg shadow border border-gray-200">
        <form action="{{ route('users.store') }}" method="POST" class="space-y-6" x-data="{ role: '{{ old('role', 'staff') }}' }">
            @csrf

            <!-- Section 1: Basic Information -->
            <div>
                <h3 class="text-sm font-bold uppercase text-teal-800 tracking-wider mb-4 pb-2 border-b border-gray-100">1. Basic Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Full Name *</label>
                        <input type="text" name="name" value="{{ old('name') }}" required class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500 bg-gray-50">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Email Address *</label>
                        <input type="email" name="email" value="{{ old('email') }}" required class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500 bg-gray-50">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">NIK (16 Digit)</label>
                        <input type="text" name="nik" value="{{ old('nik') }}" pattern="\d{16}" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">NIP (18 Digit)</label>
                        <input type="text" name="nip" value="{{ old('nip') }}" pattern="\d{18}" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                    </div>

                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Unit Kerja (Organization Unit)</label>
                        <select name="organization_unit_id" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500 bg-gray-50">
                            <option value="">-- Select Unit --</option>
                            @foreach($organizationUnits as $unit)
                                <option value="{{ $unit->id }}" {{ old('organization_unit_id') == $unit->id ? 'selected' : '' }}>
                                    {{ $unit->acronym ? $unit->acronym . ' - ' . $unit->organization_unit : $unit->organization_unit }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                </div>
            </div>

            <!-- Section 2: Account Settings -->
            <div>
                <h3 class="text-sm font-bold uppercase text-teal-800 tracking-wider mb-4 pb-2 border-b border-gray-100">2. Account Settings</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">User Role *</label>
                        <select name="role" x-model="role" required class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                            <option value="staff">Staff</option>
                            <option value="admin_kementerian">Admin Kementerian</option>
                            <option value="super_admin">Super Admin</option>
                        </select>
                    </div>

                    <div x-show="role === 'admin_kementerian'">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Kementerian / Lembaga *</label>
                        <select name="ministry_id" x-bind:disabled="role !== 'admin_kementerian'"
                                class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                            <option value="">-- Select Ministry --</option>
                            @foreach($ministries as $ministry)
                                <option value="{{ $ministry->id }}" {{ old('ministry_id') == $ministry->id ? 'selected' : '' }}>
                                    {{ $ministry->ministry_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Password *</label>
                        <input type="password" name="password" required placeholder="Minimum 8 characters" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                    </div>

                    <div class="md:col-span-2 pt-2">
                        <label class="flex items-center space-x-3 bg-gray-50 p-3 rounded-lg border border-gray-200 cursor-pointer">
                            <input type="checkbox" name="is_approved" value="1" class="w-5 h-5 text-teal-600 border-gray-300 rounded focus:ring-teal-500">
                            <div>
                                <span class="block text-sm font-bold text-gray-800">Approved</span>
                                <span class="block text-xs text-gray-500">Allow this user to login to the system immediately</span>
                            </div>
                        </label>
                    </div>

                </div>
            </div>

            <!-- Section 3: Access Modules -->
            <div>
                <h3 class="text-sm font-bold uppercase text-teal-800 tracking-wider mb-4 pb-2 border-b border-gray-100">3. Access Modules</h3>
                <p class="text-xs text-gray-500 mb-3">Pilih satu atau lebih modul yang dapat diakses akun ini.</p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    @foreach(['SIPHLN_P2P' => 'Modul SIPHLN (Ditjen P2P)', 'CARE_I' => 'Modul CARE-I (Lintas K/L)'] as $moduleValue => $moduleLabel)
                        <label class="flex items-center space-x-3 bg-gray-50 p-3 rounded-lg border border-gray-200 cursor-pointer">
                            <input type="checkbox" name="app_module[]" value="{{ $moduleValue }}"
                                   {{ in_array($moduleValue, old('app_module', ['SIPHLN_P2P'])) ? 'checked' : '' }}
                                   class="w-5 h-5 text-teal-600 border-gray-300 rounded focus:ring-teal-500">
                            <span class="block text-sm font-medium text-gray-700">{{ $moduleLabel }}</span>
                        </label>
                    @endforeach
                </div>
            </div>

            <!-- Submit Button -->
            <div class="pt-6 mt-6 border-t border-gray-200 flex justify-end">
                <button type="submit" class="bg-teal-700 hover:bg-teal-800 text-white font-medium px-8 py-2.5 rounded-lg shadow-md transition">
                    Create User
                </button>
            </div>
        </form>
    </div>

</div>
@endsection