@extends('backend.layouts.app')

@section('title', 'Create Backend User')

@push('styles')
    <link href="{{ asset('vendor/select2/dist/css/select2.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
    @php
        $pageTitle = 'Create Backend User';
        $indexRoute = 'backend-user.index';
        $indexLabel = 'Backend Users';
    @endphp
    @include('backend.layouts.partials._page_header')

    <div class="space-y-6">

        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">

            <div class="px-5 py-5">
                <p class="text-sm text-gray-500 dark:text-gray-400">
                    Fill in the information below to create a new backend user account.
                </p>
            </div>

            <form action="{{ route('backend-user.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="border-t border-gray-100 p-6 dark:border-gray-800">
                    <div class="flex flex-col gap-8 lg:flex-row">

                        <!-- Left: Profile Picture (Resume Style) -->
                        <div class="lg:w-48 shrink-0">
                            <div class="flex flex-col items-center gap-3">
                                <div class="relative h-36 w-36">
                                    <div id="avatarPlaceholder"
                                        class="flex h-36 w-36 items-center justify-center rounded-2xl bg-gradient-to-br from-gray-300 to-gray-500 ring-4 ring-gray-100 dark:from-gray-600 dark:to-gray-700 dark:ring-gray-800">
                                        <span id="avatarInitial" class="text-5xl font-bold text-white">U</span>
                                    </div>
                                    <img id="avatarImg" alt="Profile Picture"
                                        class="absolute inset-0 hidden h-36 w-36 rounded-2xl object-cover ring-4 ring-gray-100 dark:ring-gray-800">
                                </div>
                                <div class="w-full">
                                    <label class="mb-1.5 block text-center text-sm font-medium text-gray-700 dark:text-gray-400">Profile Picture</label>
                                    <input type="file" name="profile_picture" id="profile_picture" class="filepond w-full" accept="image/*">
                                    @error('profile_picture')
                                        <p class="text-theme-xs text-error-500 mt-1.5 text-center">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Right: Form Fields -->
                        <div x-data="{ mode: '{{ old('password_mode', 'manual') }}' }" class="flex-1 space-y-5">

                    <!-- USERNAME -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">
                            Username <span class="text-error-500">*</span>
                        </label>
                        <input type="text" name="username" value="{{ old('username') }}" placeholder="johndoe"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('username') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 @else border-gray-300 dark:border-gray-700 @enderror">

                        @error('username')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- EMAIL -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">
                            Email Address <span class="text-error-500">*</span>
                        </label>
                        <input type="email" name="email" value="{{ old('email') }}" placeholder="example@domain.com"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('email') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 @else border-gray-300 dark:border-gray-700 @enderror">

                        @error('email')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- PASSWORD MODE -->
                    <div class="rounded-xl border border-gray-200 bg-gray-50/60 p-4 dark:border-gray-700 dark:bg-white/[0.02]">
                        <label class="mb-2.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Password Setup</label>
                        <div class="grid grid-cols-1 gap-2.5 sm:grid-cols-3">
                            <label class="flex cursor-pointer items-start gap-2.5 rounded-lg border bg-white px-3 py-2.5 text-sm dark:bg-gray-900"
                                :class="mode === 'manual' ? 'border-brand-500 ring-1 ring-brand-500/30' : 'border-gray-300 dark:border-gray-700'">
                                <input type="radio" name="password_mode" value="manual" x-model="mode"
                                    class="mt-0.5 text-brand-500 focus:ring-brand-500">
                                <span>
                                    <span class="block font-medium text-gray-800 dark:text-white/90">Set manually</span>
                                    <span class="block text-xs text-gray-500 dark:text-gray-400">You type the password</span>
                                </span>
                            </label>

                            <label class="flex cursor-pointer items-start gap-2.5 rounded-lg border bg-white px-3 py-2.5 text-sm dark:bg-gray-900"
                                :class="mode === 'temporary' ? 'border-brand-500 ring-1 ring-brand-500/30' : 'border-gray-300 dark:border-gray-700'">
                                <input type="radio" name="password_mode" value="temporary" x-model="mode"
                                    class="mt-0.5 text-brand-500 focus:ring-brand-500">
                                <span>
                                    <span class="block font-medium text-gray-800 dark:text-white/90">Email temporary password</span>
                                    <span class="block text-xs text-gray-500 dark:text-gray-400">System generates & emails it</span>
                                </span>
                            </label>

                            <label class="flex cursor-pointer items-start gap-2.5 rounded-lg border bg-white px-3 py-2.5 text-sm dark:bg-gray-900"
                                :class="mode === 'invite' ? 'border-brand-500 ring-1 ring-brand-500/30' : 'border-gray-300 dark:border-gray-700'">
                                <input type="radio" name="password_mode" value="invite" x-model="mode"
                                    class="mt-0.5 text-brand-500 focus:ring-brand-500">
                                <span>
                                    <span class="block font-medium text-gray-800 dark:text-white/90">Send activation link</span>
                                    <span class="block text-xs text-gray-500 dark:text-gray-400">User sets own password</span>
                                </span>
                            </label>
                        </div>

                        <p x-show="mode === 'manual'" class="mt-3 text-xs text-gray-500 dark:text-gray-400">
                            The user will be required to change this password after the first login.
                        </p>
                        <p x-show="mode === 'temporary'" style="display: none;"
                            class="mt-3 text-xs text-gray-500 dark:text-gray-400">
                            A random temporary password will be emailed to the user. The account is <strong>Active immediately</strong> and the user must change the password after the first login.
                        </p>
                        <p x-show="mode === 'invite'" style="display: none;"
                            class="mt-3 text-xs text-gray-500 dark:text-gray-400">
                            An activation link will be emailed. The account stays <strong>Inactive</strong> until the user activates it and sets their own password.
                        </p>

                        @error('password_mode')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- PASSWORD (WITH CENTERED TOGGLE ICON) -->
                    <div x-show="mode === 'manual'">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">
                            Password <span class="text-error-500">*</span>
                        </label>

                        <div x-data="{ showPassword: false }" class="relative">
                            <input :type="showPassword ? 'text' : 'password'" name="password" placeholder="Enter password"
                                class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border bg-transparent bg-none px-4 py-2.5 pr-11 pl-4 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('password') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 @else border-gray-300 dark:border-gray-700 @enderror">
                            <span @click="showPassword = !showPassword" class="absolute top-1/2 right-4 z-30 -translate-y-1/2 cursor-pointer">
                                <svg x-show="!showPassword" class="fill-gray-500 dark:fill-gray-400" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.0002 13.8619C7.23361 13.8619 4.86803 12.1372 3.92328 9.70241C4.86804 7.26761 7.23361 5.54297 10.0002 5.54297C12.7667 5.54297 15.1323 7.26762 16.0771 9.70243C15.1323 12.1372 12.7667 13.8619 10.0002 13.8619ZM10.0002 4.04297C6.48191 4.04297 3.49489 6.30917 2.4155 9.4593C2.3615 9.61687 2.3615 9.78794 2.41549 9.94552C3.49488 13.0957 6.48191 15.3619 10.0002 15.3619C13.5184 15.3619 16.5055 13.0957 17.5849 9.94555C17.6389 9.78797 17.6389 9.6169 17.5849 9.45932C16.5055 6.30919 13.5184 4.04297 10.0002 4.04297ZM9.99151 7.84413C8.96527 7.84413 8.13333 8.67606 8.13333 9.70231C8.13333 10.7286 8.96527 11.5605 9.99151 11.5605H10.0064C11.0326 11.5605 11.8646 10.7286 11.8646 9.70231C11.8646 8.67606 11.0326 7.84413 10.0064 7.84413H9.99151Z"/>
                                </svg>
                                <svg x-show="showPassword" class="fill-gray-500 dark:fill-gray-400" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: none;">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.63803 3.57709C4.34513 3.2842 3.87026 3.2842 3.57737 3.57709C3.28447 3.86999 3.28447 4.34486 3.57737 4.63775L4.85323 5.91362C3.74609 6.84199 2.89363 8.06395 2.4155 9.45936C2.3615 9.61694 2.3615 9.78801 2.41549 9.94558C3.49488 13.0957 6.48191 15.3619 10.0002 15.3619C11.255 15.3619 12.4422 15.0737 13.4994 14.5598L15.3625 16.4229C15.6554 16.7158 16.1302 16.7158 16.4231 16.4229C16.716 16.13 16.716 15.6551 16.4231 15.3622L4.63803 3.57709ZM12.3608 13.4212L10.4475 11.5079C10.3061 11.5423 10.1584 11.5606 10.0064 11.5606H9.99151C8.96527 11.5606 8.13333 10.7286 8.13333 9.70237C8.13333 9.5461 8.15262 9.39434 8.18895 9.24933L5.91885 6.97923C5.03505 7.69015 4.34057 8.62704 3.92328 9.70247C4.86803 12.1373 7.23361 13.8619 10.0002 13.8619C10.8326 13.8619 11.6287 13.7058 12.3608 13.4212ZM16.0771 9.70249C15.7843 10.4569 15.3552 11.1432 14.8199 11.7311L15.8813 12.7925C16.6329 11.9813 17.2187 11.0143 17.5849 9.94561C17.6389 9.78803 17.6389 9.61696 17.5849 9.45938C16.5055 6.30925 13.5184 4.04303 10.0002 4.04303C9.13525 4.04303 8.30244 4.17999 7.52218 4.43338L8.75139 5.66259C9.1556 5.58413 9.57311 5.54303 10.0002 5.54303C12.7667 5.54303 15.1323 7.26768 16.0771 9.70249Z"/>
                                </svg>
                            </span>
                        </div>

                        <p class="text-theme-xs text-gray-500 dark:text-gray-400 mt-1.5">
                            Password must be at least 6 characters long.
                        </p>

                        @error('password')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- FIRST NAME - Sekarang dengan required * dan error border -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">
                            First Name <span class="text-error-500">*</span>
                        </label>
                        <input type="text" name="first_name" value="{{ old('first_name') }}"
                            placeholder="Enter first name"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('first_name') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 @else border-gray-300 dark:border-gray-700 @enderror">

                        @error('first_name')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- LAST NAME - Sekarang dengan required * dan error border -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">
                            Last Name <span class="text-error-500">*</span>
                        </label>
                        <input type="text" name="last_name" value="{{ old('last_name') }}" placeholder="Enter last name"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('last_name') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 @else border-gray-300 dark:border-gray-700 @enderror">

                        @error('last_name')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- ROLES -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">
                            Roles
                        </label>
                        <div x-data="{ isOptionSelected: false }" class="relative z-20 bg-transparent">
                            <select name="roles[]" multiple
                                class="js-role-select dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border bg-transparent bg-none px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('roles') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 @else border-gray-300 dark:border-gray-700 @enderror @error('roles.*') border-error-300 dark:border-error-700 @enderror"
                                :class="isOptionSelected && 'text-gray-800 dark:text-white/90'"
                                @change="isOptionSelected = true">
                                @foreach ($roles as $role)
                                    <option value="{{ $role->name }}" @selected(in_array($role->name, old('roles', []), true))>
                                        {{ $role->name }}
                                    </option>
                                @endforeach
                            </select>
                            <span class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                                <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </span>
                        </div>
                        <p class="text-theme-xs text-gray-500 dark:text-gray-500 mt-1">
                            Hold Ctrl (Windows) / Command (Mac) to choose multiple roles.
                        </p>
                        @error('roles')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                        @error('roles.*')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- STATUS TOGGLE (manual mode sahaja) -->
                    <div x-show="mode === 'manual'" class="flex items-start gap-3 pt-2">
                        <div x-data="{ toggle: {{ old('is_active', true) ? 'true' : 'false' }} }" class="flex items-center gap-3">
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-400">Status</span>
                            <button type="button" @click="toggle = !toggle"
                                :class="toggle ? 'bg-brand-500' : 'bg-gray-300 dark:bg-gray-600'"
                                class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200">
                                <span :class="toggle ? 'translate-x-full' : ''"
                                    class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200"></span>
                            </button>
                            <span class="text-sm" :class="toggle ? 'text-success-600 dark:text-success-400' : 'text-gray-400'" x-text="toggle ? 'Active' : 'Inactive'"></span>
                            <input type="hidden" name="is_active" x-bind:value="toggle ? '1' : '0'">
                        </div>
                    </div>

                    <!-- STATUS NOTE (temporary / invite mode) -->
                    <div x-show="mode !== 'manual'" style="display: none;"
                        class="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2.5 text-xs text-gray-500 dark:border-gray-700 dark:bg-white/[0.02] dark:text-gray-400">
                        <span x-show="mode === 'temporary'"><strong>Status:</strong> Active immediately — temporary password will be emailed.</span>
                        <span x-show="mode === 'invite'"><strong>Status:</strong> Inactive until the user activates the account via the emailed link.</span>
                    </div>

                    <!-- EMAIL VERIFICATION TOGGLE dibuang — sistem tak enforce email_verified_at
                         (tiada middleware 'verified' pada mana-mana route admin), jadi ia hanya
                         menghantar email yang tiada siapa wajib tindak balas. -->


                        </div><!-- /Right: Form Fields -->

                    </div><!-- /flex row -->
                </div>

                <!-- ACTION BUTTONS -->
                <div class="flex justify-end gap-3 border-t border-gray-100 px-6 py-4 dark:border-gray-800">

                    <a href="{{ route('backend-user.index') }}"
                        class="rounded-lg border px-4 py-2 text-sm text-gray-700 dark:text-gray-300">
                        Cancel
                    </a>

                    <button type="submit"
                        class="rounded-lg bg-brand-500 px-4 py-2 text-sm text-white hover:bg-brand-600">
                        Save
                    </button>

                </div>

            </form>

        </div>
    </div>

@endsection

@push('scripts')
    <script src="{{ asset('vendor/jquery.min.js') }}"></script>
    <script src="{{ asset('vendor/select2/dist/js/select2.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const $roleSelect = $('.js-role-select');

            if ($roleSelect.length) {
                $roleSelect.select2({
                    searchable: true,
                    width: '100%',
                    placeholder: 'Select roles',
                    closeOnSelect: false
                });
            }

            document.querySelectorAll('.filepond').forEach((el) => {
                FilePond.create(el, {
                    credits: false,
                    allowImagePreview: true,
                    imagePreviewHeight: 170,
                    storeAsFile: true,
                    onaddfile: (error, file) => {
                        if (!error && file && file.file) {
                            const reader = new FileReader();
                            reader.onload = (e) => {
                                const img = document.getElementById('avatarImg');
                                img.src = e.target.result;
                                img.classList.remove('hidden');
                            };
                            reader.readAsDataURL(file.file);
                        }
                    }
                });
            });

            // Live preview: full name + email + avatar initial (resume panel)
            function refreshPreview() {
                const fn = (document.querySelector('input[name="first_name"]') || {}).value || '';
                const ln = (document.querySelector('input[name="last_name"]') || {}).value || '';
                const em = (document.querySelector('input[name="email"]') || {}).value || '';
                const name = (fn + ' ' + ln).trim();
                document.getElementById('namePreview').textContent = name || '-';
                document.getElementById('emailPreview').textContent = em || '-';
                document.getElementById('avatarInitial').textContent = (fn.trim().charAt(0) || 'U').toUpperCase();
            }
            ['first_name', 'last_name', 'email'].forEach((n) => {
                const el = document.querySelector('input[name="' + n + '"]');
                if (el) el.addEventListener('input', refreshPreview);
            });
            refreshPreview();
        });
    </script>
@endpush