@extends('admin.layout')

@section('title', 'Tambah User')

@section('page-title', 'Pengaturan')
@section('page-subtitle', 'Kelola pendaftaran user dan akun baru')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-6" x-data="{ 
    level: '{{ old('level', '') }}', 
    username: '{{ old('username', '') }}',
    showConfirmModal: false 
}">


    <form action="{{ route('admin.users.store') }}" method="POST" id="userForm" @submit.prevent="showConfirmModal = true">
        @csrf
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            
            <!-- Left Column: User Preview / Photo -->
            <div class="lg:col-span-1 space-y-6">
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-8 border border-gray-100 dark:border-gray-700">
                    <h3 class="text-base font-bold text-gray-800 dark:text-white mb-8">Foto Profil (Opsional)</h3>
                    <div class="flex flex-col items-center">
                        <div class="w-36 h-36 bg-blue-500 rounded-full flex items-center justify-center text-white text-5xl font-bold mb-6 shadow-xl shadow-blue-500/20 overflow-hidden">
                            <template x-if="username.trim() !== ''">
                                <span x-text="username.trim().charAt(0).toUpperCase()" class="animate-fade-in"></span>
                            </template>
                            <template x-if="username.trim() === ''">
                                <i class="fas fa-user animate-fade-in"></i>
                            </template>
                        </div>
                        <div class="space-y-3 w-full max-w-[200px]">
                            <button type="button" class="w-full bg-blue-500 hover:bg-blue-600 text-white px-4 py-2.5 rounded-lg transition text-sm font-bold shadow-md shadow-blue-500/10">
                                Default Avatar
                            </button>
                            <button type="button" class="w-full text-red-500 hover:text-red-600 text-xs font-bold transition text-center">
                                Reset Foto
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column: Form Information -->
            <div class="lg:col-span-2">
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-8 border border-gray-100 dark:border-gray-700 mb-6">
                    <h3 class="text-base font-bold text-gray-800 dark:text-white mb-8">Informasi Profil</h3>
                    
                    <div class="space-y-6">
                        <!-- Nama & Username Group -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="nama" class="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Nama Lengkap</label>
                                <input type="text" name="nama" id="nama" value="{{ old('nama') }}" required
                                    class="w-full px-4 py-2.5 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-800 dark:text-white rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all text-sm sm:text-[13px]"
                                    placeholder="Nama Lengkap">
                                @error('nama') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label for="username" class="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Username</label>
                                <input type="text" name="username" id="username" x-model="username" value="{{ old('username') }}" required
                                    class="w-full px-4 py-2.5 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-800 dark:text-white rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all text-sm sm:text-[13px]"
                                    placeholder="Username">
                                @error('username') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        <!-- Password -->
                        <div>
                            <label for="password" class="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Password</label>
                            <input type="password" name="password" id="password" required
                                class="w-full px-4 py-2.5 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-800 dark:text-white rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all text-sm sm:text-[13px]"
                                placeholder="Min. 8 karakter">
                            @error('password') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                        </div>

                        <!-- Email -->
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Email</label>
                            <input type="email" name="email" id="email" value="{{ old('email') }}"
                                class="w-full px-4 py-2.5 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-800 dark:text-white rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all text-sm sm:text-[13px]"
                                placeholder="Email Address">
                        </div>

                        <!-- No Telepon -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="telp" class="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">No. Telepon</label>
                                <input type="tel" name="telp" id="telp" value="{{ old('telp') }}"
                                    class="w-full px-4 py-2.5 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-800 dark:text-white rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all text-sm sm:text-[13px]"
                                    placeholder="Nomor Telepon Aktif">
                            </div>
                            <div>
                                <label for="status" class="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Status Akun</label>
                                <select name="status" id="status" required
                                    class="w-full px-4 py-2.5 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-800 dark:text-white rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all text-sm sm:text-[13px] appearance-none bg-no-repeat bg-[right_1rem_center] bg-[length:1em_1em]"
                                    style="background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke=%22%236b7280%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%222%22 d=%22M19 9l-7 7-7-7%22%3E%3C/path%3E%3C/svg%3E');">
                                    <option value="N" {{ old('status') == 'N' ? 'selected' : '' }}>Aktif</option>
                                    <option value="Y" {{ old('status') == 'Y' ? 'selected' : '' }}>Nonaktif</option>
                                </select>
                            </div>
                        </div>

                        <!-- Level & Prodi Group -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4 border-t border-gray-50 dark:border-gray-700/50">
                            <div>
                                <label for="level" class="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Level Akses</label>
                                <select name="level" id="level" required x-model="level"
                                    class="w-full px-4 py-2.5 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-800 dark:text-white rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all text-sm sm:text-[13px] appearance-none bg-no-repeat bg-[right_1rem_center] bg-[length:1em_1em]"
                                    style="background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke=%22%236b7280%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%222%22 d=%22M19 9l-7 7-7-7%22%3E%3C/path%3E%3C/svg%3E');">
                                    <option value="">Pilih Level</option>
                                    @foreach($levels as $item)
                                        <option value="{{ $item->Id }}" {{ old('level') == $item->Id ? 'selected' : '' }}>{{ $item->Nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div x-show="level == '2'" x-transition>
                                <label for="kode_prodi" class="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Program Studi</label>
                                <select name="kode_prodi" id="kode_prodi" :required="level == '2'"
                                    class="w-full px-4 py-2.5 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-800 dark:text-white rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all text-sm sm:text-[13px] appearance-none bg-no-repeat bg-[right_1rem_center] bg-[length:1em_1em]"
                                    style="background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke=%22%236b7280%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%222%22 d=%22M19 9l-7 7-7-7%22%3E%3C/path%3E%3C/svg%3E');">
                                    <option value="">Pilih Program Studi</option>
                                    @foreach($prodis as $prodi)
                                        <option value="{{ $prodi->KodeID }}" {{ old('kode_prodi') == $prodi->KodeID ? 'selected' : '' }}>{{ $prodi->Nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="flex items-center space-x-3 mt-10 pt-8 border-t border-gray-50 dark:border-gray-700/50">
                        <button type="submit"
                            class="px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-bold text-sm transition-all shadow-lg shadow-blue-600/20 flex items-center">
                            <i class="fas fa-save mr-2"></i>
                            Simpan Akun
                        </button>
                        <a href="{{ route('admin.dashboard') }}"
                            class="border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-400 px-6 py-2.5 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition font-bold text-sm">
                            Batal
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!-- Confirmation Modal -->
    <div x-show="showConfirmModal" 
        class="fixed inset-0 z-[100] overflow-y-auto" 
        x-cloak
        x-effect="showConfirmModal ? document.body.classList.add('overflow-hidden') : document.body.classList.remove('overflow-hidden')">
        
        <!-- Backdrop -->
        <div class="fixed inset-0 bg-gray-900/60 backdrop-blur-sm transition-opacity"
            x-transition:enter="ease-out duration-300"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="ease-in duration-200"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
            @click="showConfirmModal = false"></div>

        <!-- Modal Container -->
        <div class="flex min-h-screen items-center justify-center p-4 text-center sm:p-0">
            <!-- Modal Panel -->
            <div class="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all w-full max-w-sm sm:my-8 sm:w-full sm:max-w-lg border border-gray-200 dark:border-gray-700"
                x-show="showConfirmModal"
                x-transition:enter="ease-out duration-300"
                x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                x-transition:leave="ease-in duration-200"
                x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
                
                <div class="bg-white dark:bg-gray-800 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/20 sm:mx-0 sm:h-10 sm:w-10">
                            <svg class="h-6 w-6 text-blue-600 dark:text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
                            </svg>
                        </div>
                        <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                            <h3 class="text-lg font-semibold leading-6 text-gray-900 dark:text-white">
                                Konfirmasi Simpan</h3>
                            <div class="mt-2">
                                <p class="text-sm text-gray-500 dark:text-gray-400">
                                    Apakah Anda yakin ingin menyimpan data user baru ini? 
                                    Pastikan semua informasi sudah benar sebelum menekan tombol simpan.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 dark:bg-gray-700/50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6 gap-2">
                    <button type="button" @click="document.getElementById('userForm').submit()"
                        class="inline-flex w-full justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 sm:ml-3 sm:w-auto transition-colors">
                        Simpan
                    </button>
                    <button type="button" @click="showConfirmModal = false"
                        class="mt-3 inline-flex w-full justify-center rounded-md bg-white dark:bg-gray-800 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-gray-300 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 sm:mt-0 sm:w-auto transition-colors">
                        Batal
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection