@extends('landing.auth.layout')

@section('title', 'Daftar')

@section('content')
    <div x-data="formRegister()">
        <section class="relative min-h-screen bg-cover bg-center bg-no-repeat px-4 py-8"
            style="background-image: url('{{ asset('landing/images/bg/2.jpg') }}')">
            <div class="z-2 absolute inset-0 bg-gradient-to-b from-transparent to-black" id="particles-snow"></div>
            <div class="z-3 container relative mx-auto py-8">
                <div class="flex w-full justify-center">
                    <div
                        class="mx-4 w-full max-w-[500px] rounded-2xl border border-white/20 bg-white/95 p-4 shadow-2xl backdrop-blur-sm md:p-6">

                        <div class="mb-3 text-center">
                            <a href="/beranda">
                                <img class="mx-auto inline-block h-6 w-auto md:h-7"
                                    src="{{ asset('landing') }}/images/logo-dark.png" alt=""
                                    style="width: 160px; height: 28px; object-fit: cover;">
                            </a>
                            <p class="mt-1 text-xs text-gray-600 md:text-sm">Buat akun baru!</p>
                        </div>

                        <template x-if="emailSent">
                            <div class="mb-6 rounded-lg border border-green-200 bg-green-50 px-4 py-4">
                                <div class="flex items-start">
                                    <div class="flex-shrink-0">
                                        <i class="fa-solid fa-check-circle text-lg text-green-400"></i>
                                    </div>
                                    <div class="ml-3">
                                        <h3 class="text-sm font-medium text-green-800">Email berhasil dikirim!</h3>
                                        <div class="mt-2 text-sm text-green-700">
                                            <p x-text="successMessage"></p>
                                            <p class="mt-2 font-medium">
                                                Silakan Coba cek folder inbox atau folder spam
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>

                        <template x-if="!emailSent">
                            <form class="space-y-3" @submit.prevent="submitForm">

                                <div class="rounded" x-data="enumerationSelect({ key: 'Status Pegawai', customParams: { criteria: 'key:StatusPegawai' } })"
                                    @set-select-status-pegawai.window="setSelected($event.detail.value)">
                                    <label class="mb-1 block text-sm font-medium text-gray-700" for="status_pegawai_id">
                                        Status Pegawai <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <select id="status_pegawai_id" x-ref="select" x-model="inputData.status_pegawai_id"
                                            :class="{ 'border-red-500 ring-red-500': errors.status_pegawai_id }">
                                        </select>
                                    </div>
                                    <template x-if="errors.status_pegawai_id">
                                        <p class="mt-1 text-sm text-red-600" x-text="errors.status_pegawai_id[0]"></p>
                                    </template>
                                </div>

                                <div class="space-y-2">
                                    <label class="block text-xs font-semibold text-gray-700 md:text-sm">Foto Profil</label>
                                    <div class="group relative">
                                        <div class="flex items-center justify-center">
                                            <div class="relative">
                                                <div class="flex h-20 w-16 items-center justify-center rounded-xl border-2 border-dashed border-green-200 bg-gradient-to-br from-green-50 to-green-100 transition-all duration-300 hover:border-green-300 hover:from-green-100 hover:to-green-200 md:h-24 md:w-20"
                                                    :class="{ 'overflow-hidden border-solid': profilePhoto }">
                                                    <template x-if="!profilePhoto">
                                                        <div class="text-center">
                                                            <i class="mb-1 h-6 w-6 text-green-400" data-feather="user"></i>
                                                            <p class="text-xs font-medium text-green-600">4:6</p>
                                                        </div>
                                                    </template>
                                                    <template x-if="profilePhoto">
                                                        <img class="h-full w-full rounded-xl object-cover" alt="Profile"
                                                            :src="profilePhoto">
                                                    </template>
                                                </div>

                                                <button
                                                    class="absolute -bottom-2 -right-2 flex h-8 w-8 items-center justify-center rounded-full bg-green-600 text-white shadow-lg transition-all duration-200 hover:scale-110 hover:bg-green-700 hover:shadow-xl"
                                                    type="button" @click="openUploadModal()">
                                                    <i class="h-4 w-4" data-feather="camera"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <p class="mt-2 text-center text-xs text-gray-500">Klik untuk mengunggah foto</p>
                                    </div>

                                    <input class="sr-only" id="image" type="file" accept="image/*" x-ref="imageInput"
                                        @change="handlePhotoUploaded($event)">


                                    <template x-if="errors.photo">
                                        <p class="text-xs text-red-500" x-text="errors.photo"></p>
                                    </template>
                                </div>


                                <div class="space-y-1" x-show="inputData.userType === 'asn'" x-transition>
                                    <label class="block text-xs font-semibold text-gray-700 md:text-sm">NIP</label>
                                    <div class="relative">
                                        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                            <i class="h-4 w-4 text-gray-400" data-feather="credit-card"></i>
                                        </div>
                                        <input
                                            class="w-full rounded-xl border-2 border-gray-200 py-2 pl-9 pr-4 text-sm outline-none transition-all duration-200 hover:border-gray-300 focus:border-green-500 focus:ring-4 focus:ring-green-500/20"
                                            type="text" x-model="inputData.nip" placeholder="Masukkan NIP Anda"
                                            :class="{ 'border-red-500': errors.nip }">
                                    </div>
                                    <p class="text-xs text-gray-500">*18 digit nomor induk pegawai</p>
                                    <template x-if="errors.nip">
                                        <p class="text-xs text-red-500" x-text="errors.nip"></p>
                                    </template>
                                </div>

                                <div class="space-y-1" x-show="inputData.userType === 'non'" x-transition>
                                    <label class="block text-xs font-semibold text-gray-700 md:text-sm">NIK</label>
                                    <div class="relative">
                                        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                            <i class="h-4 w-4 text-gray-400" data-feather="credit-card"></i>
                                        </div>
                                        <input
                                            class="w-full rounded-xl border-2 border-gray-200 py-2 pl-9 pr-4 text-sm outline-none transition-all duration-200 hover:border-gray-300 focus:border-green-500 focus:ring-4 focus:ring-green-500/20"
                                            type="text" x-model="inputData.nik" placeholder="Masukkan NIK Anda"
                                            :class="{ 'border-red-500': errors.nik }">
                                    </div>
                                    <p class="text-xs text-gray-500">*16 digit nomor induk kependudukan</p>
                                    <template x-if="errors.nik">
                                        <p class="text-xs text-red-500" x-text="errors.nik"></p>
                                    </template>
                                </div>

                                <div class="space-y-1">
                                    <label class="block text-xs font-semibold text-gray-700 md:text-sm">Nama
                                        Lengkap</label>
                                    <div class="relative">
                                        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                            <i class="h-4 w-4 text-gray-400" data-feather="user"></i>
                                        </div>
                                        <input
                                            class="w-full rounded-xl border-2 border-gray-200 py-2 pl-9 pr-4 text-sm outline-none transition-all duration-200 hover:border-gray-300 focus:border-green-500 focus:ring-4 focus:ring-green-500/20"
                                            type="text" x-model="inputData.full_name" placeholder="Masukkan Nama Anda"
                                            :class="{ 'border-red-500': errors.full_name }">
                                    </div>
                                    <template x-if="errors.full_name">
                                        <p class="text-xs text-red-500" x-text="errors.full_name"></p>
                                    </template>
                                </div>

                                <div class="space-y-1">
                                    <label class="block text-xs font-semibold text-gray-700 md:text-sm">Username</label>
                                    <div class="relative">
                                        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                            <i class="h-4 w-4 text-gray-400" data-feather="user"></i>
                                        </div>
                                        <input
                                            class="w-full rounded-xl border-2 border-gray-200 py-2 pl-9 pr-4 text-sm outline-none transition-all duration-200 hover:border-gray-300 focus:border-green-500 focus:ring-4 focus:ring-green-500/20"
                                            type="text" x-model="inputData.username"
                                            placeholder="Masukkan Username Anda"
                                            :class="{ 'border-red-500': errors.username }">
                                    </div>
                                    <template x-if="errors.username">
                                        <p class="text-xs text-red-500" x-text="errors.username"></p>
                                    </template>
                                </div>

                                <div class="space-y-1">
                                    <label class="block text-xs font-semibold text-gray-700 md:text-sm">Email</label>
                                    <div class="relative">
                                        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                            <i class="h-4 w-4 text-gray-400" data-feather="mail"></i>
                                        </div>
                                        <input
                                            class="w-full rounded-xl border-2 border-gray-200 py-2 pl-9 pr-4 text-sm outline-none transition-all duration-200 hover:border-gray-300 focus:border-green-500 focus:ring-4 focus:ring-green-500/20"
                                            type="email" x-model="inputData.email" placeholder="Masukkan Email Anda"
                                            :class="{ 'border-red-500': errors.email }">
                                    </div>
                                    <p class="text-xs text-gray-500">*email aktif dan bisa digunakan</p>
                                    <template x-if="errors.email">
                                        <p class="text-xs text-red-500" x-text="errors.email"></p>
                                    </template>
                                </div>

                                <div class="space-y-1">
                                    <label class="block text-xs font-semibold text-gray-700 md:text-sm">Password</label>
                                    <div class="relative">
                                        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                            <i class="h-4 w-4 text-gray-400" data-feather="lock"></i>
                                        </div>
                                        <input
                                            class="w-full rounded-xl border-2 border-gray-200 py-2 pl-9 pr-10 text-sm outline-none transition-all duration-200 hover:border-gray-300 focus:border-green-500 focus:ring-4 focus:ring-green-500/20"
                                            x-model="inputData.password" :type="showPassword ? 'text' : 'password'"
                                            placeholder="Masukkan Password" :class="{ 'border-red-500': errors.password }">
                                        <button class="absolute inset-y-0 right-0 flex items-center pr-3" type="button"
                                            @click="showPassword = !showPassword">
                                            <i class="h-4 w-4 text-gray-400 transition-colors hover:text-gray-600"
                                                :data-feather="showPassword ? 'eye-off' : 'eye'"></i>
                                        </button>
                                    </div>
                                    <template x-if="errors.password">
                                        <p class="text-xs text-red-500" x-text="errors.password"></p>
                                    </template>
                                </div>

                                <div class="space-y-1">
                                    <label class="block text-xs font-semibold text-gray-700 md:text-sm">Konfirmasi
                                        Password</label>
                                    <div class="relative">
                                        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                            <i class="h-4 w-4 text-gray-400" data-feather="lock"></i>
                                        </div>
                                        <input
                                            class="w-full rounded-xl border-2 border-gray-200 py-2 pl-9 pr-10 text-sm outline-none transition-all duration-200 hover:border-gray-300 focus:border-green-500 focus:ring-4 focus:ring-green-500/20"
                                            x-model="inputData.password_confirmation"
                                            :type="showConfirmPassword ? 'text' : 'password'"
                                            placeholder="Konfirmasi Password"
                                            :class="{ 'border-red-500': errors.password_confirmation }">
                                        <button class="absolute inset-y-0 right-0 flex items-center pr-3" type="button"
                                            @click="showConfirmPassword = !showConfirmPassword">
                                            <i class="h-4 w-4 text-gray-400 transition-colors hover:text-gray-600"
                                                :data-feather="showConfirmPassword ? 'eye-off' : 'eye'"></i>
                                        </button>
                                    </div>
                                    <template x-if="errors.password_confirmation">
                                        <p class="text-xs text-red-500" x-text="errors.password_confirmation"></p>
                                    </template>
                                </div>
                                <button
                                    class="mt-4 flex w-full items-center justify-center space-x-2 rounded-xl bg-gradient-to-r from-green-600 to-green-700 py-2.5 text-sm font-semibold text-white transition-all duration-200 hover:-translate-y-0.5 hover:from-green-700 hover:to-green-800 hover:shadow-lg active:translate-y-0 disabled:cursor-not-allowed disabled:opacity-50"
                                    type="submit" :disabled="isLoading">
                                    <template x-if="!isLoading">
                                        <i class="h-4 w-4" data-feather="user-plus"></i>
                                    </template>
                                    <template x-if="isLoading">
                                        <div class="h-4 w-4 animate-spin rounded-full border-b-2 border-white"></div>
                                    </template>
                                    <span x-text="isLoading ? 'Mendaftar...' : 'Daftar'"></span>
                                </button>

                                <div class="border-t border-gray-100 pt-2 text-center">
                                    <span class="text-xs text-gray-500">Sudah punya akun?</span>
                                    <a class="ml-1 text-xs font-bold text-green-600 transition-colors hover:text-green-700"
                                        href="/login">
                                        Masuk sekarang
                                    </a>
                                </div>
                            </form>
                        </template>
                    </div>
                </div>
            </div>
        </section>

        <div class="fixed bottom-4 end-4 z-10 md:bottom-6 md:end-6">
            <a class="back-button flex size-10 items-center justify-center rounded-full bg-green-600 text-white shadow-lg transition-all duration-200 hover:-translate-y-1 hover:bg-green-700 hover:shadow-xl md:size-12"
                href="#" title="Kembali">
                <i class="h-4 w-4 md:h-5 md:w-5" data-feather="arrow-left"></i>
            </a>
        </div>
    </div>

    <div x-data="uploadModal()">
        @include('landing.auth.modal-upload')
    </div>
@endsection

@push('style')
    @vite(['resources/js/landing/auth/register/import.js'])
@endpush