<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
     <?php $__env->slot('header', null, []); ?> 
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <div>
                <h2 class="font-bold text-xl text-white leading-tight">Tambah User Baru</h2>
                <p class="text-teal-100 text-sm mt-0.5">Buat akun pengguna baru untuk sistem</p>
            </div>
            <a href="<?php echo e(route('admin.users.index')); ?>"
               class="inline-flex items-center gap-2 px-4 py-2 bg-white/20 hover:bg-white/30 text-white font-medium text-sm rounded-lg transition-colors self-start sm:self-auto">
                <i class="fas fa-arrow-left text-xs"></i> Kembali
            </a>
        </div>
     <?php $__env->endSlot(); ?>

    <div class="py-6 sm:py-8">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">

            <?php if($errors->any()): ?>
            <div class="mb-5 px-4 py-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700 rounded-xl">
                <p class="text-sm font-semibold text-red-700 dark:text-red-400 mb-1">
                    <i class="fas fa-exclamation-triangle mr-1"></i> Mohon perbaiki kesalahan berikut:
                </p>
                <ul class="list-disc list-inside text-sm text-red-600 dark:text-red-400 space-y-0.5">
                    <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><li><?php echo e($error); ?></li><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </ul>
            </div>
            <?php endif; ?>

            <div class="kkd-card">
                <form method="POST" action="<?php echo e(route('admin.users.store')); ?>" class="space-y-5">
                    <?php echo csrf_field(); ?>

                    
                    <div>
                        <h3 class="section-title mb-4 flex items-center gap-2">
                            <span class="w-6 h-6 rounded-full bg-teal-100 dark:bg-teal-900/40 flex items-center justify-center text-teal-600 dark:text-teal-400 text-xs font-bold">1</span>
                            Informasi Akun
                        </h3>

                        
                        <div class="mb-4">
                            <label class="form-label-dark mb-2">Role <span class="text-red-500">*</span></label>
                            <div class="grid grid-cols-3 gap-2 mt-1.5">
                                <?php $__currentLoopData = $roles; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $label): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <?php
                                    $icon = match($key) { 'admin' => 'fa-shield-alt', 'dokter' => 'fa-user-md', default => 'fa-user-nurse' };
                                    $isSelected = old('role') == $key;
                                ?>
                                <label class="role-card <?php echo e($isSelected ? 'role-card--active-'.$key : ''); ?>"
                                       data-role="<?php echo e($key); ?>"
                                       for="role_<?php echo e($key); ?>">
                                    <input type="radio" id="role_<?php echo e($key); ?>" name="role" value="<?php echo e($key); ?>"
                                           <?php echo e($isSelected ? 'checked' : ''); ?> class="sr-only" />
                                    <i class="fas <?php echo e($icon); ?> text-sm shrink-0"></i>
                                    <span class="text-sm font-medium truncate"><?php echo e($label); ?></span>
                                </label>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </div>
                            <?php if (isset($component)) { $__componentOriginalf94ed9c5393ef72725d159fe01139746 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginalf94ed9c5393ef72725d159fe01139746 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.input-error','data' => ['messages' => $errors->get('role'),'class' => 'mt-1']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('input-error'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['messages' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($errors->get('role')),'class' => 'mt-1']); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginalf94ed9c5393ef72725d159fe01139746)): ?>
<?php $attributes = $__attributesOriginalf94ed9c5393ef72725d159fe01139746; ?>
<?php unset($__attributesOriginalf94ed9c5393ef72725d159fe01139746); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalf94ed9c5393ef72725d159fe01139746)): ?>
<?php $component = $__componentOriginalf94ed9c5393ef72725d159fe01139746; ?>
<?php unset($__componentOriginalf94ed9c5393ef72725d159fe01139746); ?>
<?php endif; ?>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label for="name" class="form-label-dark">Nama Lengkap <span class="text-red-500">*</span></label>
                                <input id="name" type="text" name="name" value="<?php echo e(old('name')); ?>" required autofocus
                                       placeholder="Nama lengkap..."
                                       class="form-input-dark mt-1 w-full" />
                                <?php if (isset($component)) { $__componentOriginalf94ed9c5393ef72725d159fe01139746 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginalf94ed9c5393ef72725d159fe01139746 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.input-error','data' => ['messages' => $errors->get('name'),'class' => 'mt-1']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('input-error'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['messages' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($errors->get('name')),'class' => 'mt-1']); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginalf94ed9c5393ef72725d159fe01139746)): ?>
<?php $attributes = $__attributesOriginalf94ed9c5393ef72725d159fe01139746; ?>
<?php unset($__attributesOriginalf94ed9c5393ef72725d159fe01139746); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalf94ed9c5393ef72725d159fe01139746)): ?>
<?php $component = $__componentOriginalf94ed9c5393ef72725d159fe01139746; ?>
<?php unset($__componentOriginalf94ed9c5393ef72725d159fe01139746); ?>
<?php endif; ?>
                            </div>
                            <div>
                                <label for="username" class="form-label-dark">Username <span class="text-red-500">*</span></label>
                                <input id="username" type="text" name="username" value="<?php echo e(old('username')); ?>" required
                                       placeholder="Username unik..."
                                       class="form-input-dark mt-1 w-full" />
                                <?php if (isset($component)) { $__componentOriginalf94ed9c5393ef72725d159fe01139746 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginalf94ed9c5393ef72725d159fe01139746 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.input-error','data' => ['messages' => $errors->get('username'),'class' => 'mt-1']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('input-error'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['messages' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($errors->get('username')),'class' => 'mt-1']); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginalf94ed9c5393ef72725d159fe01139746)): ?>
<?php $attributes = $__attributesOriginalf94ed9c5393ef72725d159fe01139746; ?>
<?php unset($__attributesOriginalf94ed9c5393ef72725d159fe01139746); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalf94ed9c5393ef72725d159fe01139746)): ?>
<?php $component = $__componentOriginalf94ed9c5393ef72725d159fe01139746; ?>
<?php unset($__componentOriginalf94ed9c5393ef72725d159fe01139746); ?>
<?php endif; ?>
                            </div>
                            <div class="sm:col-span-2">
                                <label for="email" class="form-label-dark">Email <span class="text-red-500">*</span></label>
                                <input id="email" type="email" name="email" value="<?php echo e(old('email')); ?>" required
                                       placeholder="email@contoh.com"
                                       class="form-input-dark mt-1 w-full" />
                                <?php if (isset($component)) { $__componentOriginalf94ed9c5393ef72725d159fe01139746 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginalf94ed9c5393ef72725d159fe01139746 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.input-error','data' => ['messages' => $errors->get('email'),'class' => 'mt-1']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('input-error'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['messages' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($errors->get('email')),'class' => 'mt-1']); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginalf94ed9c5393ef72725d159fe01139746)): ?>
<?php $attributes = $__attributesOriginalf94ed9c5393ef72725d159fe01139746; ?>
<?php unset($__attributesOriginalf94ed9c5393ef72725d159fe01139746); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalf94ed9c5393ef72725d159fe01139746)): ?>
<?php $component = $__componentOriginalf94ed9c5393ef72725d159fe01139746; ?>
<?php unset($__componentOriginalf94ed9c5393ef72725d159fe01139746); ?>
<?php endif; ?>
                            </div>
                        </div>
                    </div>

                    <div class="border-t border-slate-100 dark:border-slate-700"></div>

                    
                    <div>
                        <h3 class="section-title mb-4 flex items-center gap-2">
                            <span class="w-6 h-6 rounded-full bg-teal-100 dark:bg-teal-900/40 flex items-center justify-center text-teal-600 dark:text-teal-400 text-xs font-bold">2</span>
                            Keamanan
                        </h3>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label for="password" class="form-label-dark">Password <span class="text-red-500">*</span></label>
                                <div class="relative mt-1">
                                    <input id="password" type="password" name="password" required
                                           placeholder="Min. 8 karakter"
                                           class="form-input-dark w-full pr-10" />
                                    <button type="button" onclick="togglePwd('password', this)"
                                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300">
                                        <i class="fas fa-eye text-sm"></i>
                                    </button>
                                </div>
                                <?php if (isset($component)) { $__componentOriginalf94ed9c5393ef72725d159fe01139746 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginalf94ed9c5393ef72725d159fe01139746 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.input-error','data' => ['messages' => $errors->get('password'),'class' => 'mt-1']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('input-error'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['messages' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($errors->get('password')),'class' => 'mt-1']); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginalf94ed9c5393ef72725d159fe01139746)): ?>
<?php $attributes = $__attributesOriginalf94ed9c5393ef72725d159fe01139746; ?>
<?php unset($__attributesOriginalf94ed9c5393ef72725d159fe01139746); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalf94ed9c5393ef72725d159fe01139746)): ?>
<?php $component = $__componentOriginalf94ed9c5393ef72725d159fe01139746; ?>
<?php unset($__componentOriginalf94ed9c5393ef72725d159fe01139746); ?>
<?php endif; ?>
                            </div>
                            <div>
                                <label for="password_confirmation" class="form-label-dark">Konfirmasi Password <span class="text-red-500">*</span></label>
                                <div class="relative mt-1">
                                    <input id="password_confirmation" type="password" name="password_confirmation" required
                                           placeholder="Ulangi password"
                                           class="form-input-dark w-full pr-10" />
                                    <button type="button" onclick="togglePwd('password_confirmation', this)"
                                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300">
                                        <i class="fas fa-eye text-sm"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="border-t border-slate-100 dark:border-slate-700 pt-4 flex flex-col-reverse sm:flex-row items-center justify-between gap-3">
                        <p class="text-xs text-slate-400 dark:text-slate-500">
                            <i class="fas fa-info-circle mr-1"></i> Field bertanda <span class="text-red-500">*</span> wajib diisi
                        </p>
                        <div class="flex gap-3 w-full sm:w-auto">
                            <a href="<?php echo e(route('admin.users.index')); ?>"
                               class="flex-1 sm:flex-none text-center px-5 py-2.5 bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-200 text-sm font-medium rounded-lg transition-colors">
                                Batal
                            </a>
                            <button type="submit"
                                    class="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-teal-600 hover:bg-teal-700 text-white text-sm font-semibold rounded-lg shadow transition-colors">
                                <i class="fas fa-save"></i> Simpan User
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <?php $__env->startPush('scripts'); ?>
    <script>
    function togglePwd(id, btn) {
        var input = document.getElementById(id);
        var icon  = btn.querySelector('i');
        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.replace('fa-eye','fa-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.replace('fa-eye-slash','fa-eye');
        }
    }

    document.querySelectorAll('.role-card').forEach(function(card) {
        card.addEventListener('click', function() {
            // Reset semua
            document.querySelectorAll('.role-card').forEach(function(c) {
                c.className = 'role-card';
                c.dataset.active = '';
            });
            // Aktifkan yg diklik
            var role = this.dataset.role;
            this.classList.add('role-card--active-' + role);
            this.querySelector('input[type=radio]').checked = true;
        });
    });
    </script>
    <?php $__env->stopPush(); ?>

    <style>
        .form-label-dark { display:block; font-size:.8125rem; font-weight:500; color:#475569; }
        .dark .form-label-dark { color:#94a3b8; }

        .form-input-dark {
            padding:.5rem .75rem; border:1px solid #e2e8f0; border-radius:.5rem;
            font-size:.875rem; background:#ffffff; color:#0f172a;
            outline:none; transition:border-color .15s,box-shadow .15s;
        }
        .dark .form-input-dark { background:#0f172a; border-color:#334155; color:#f1f5f9; }
        .form-input-dark:focus { border-color:#14b8a6; box-shadow:0 0 0 3px rgba(20,184,166,.15); }
        .dark .form-input-dark::placeholder { color:#475569; }

        /* Role card base */
        .role-card {
            display:flex; align-items:center; gap:.5rem;
            padding:.65rem .85rem;
            border:2px solid #e2e8f0; border-radius:.625rem;
            cursor:pointer; transition:all .15s;
            color:#64748b; background:#f8fafc; user-select:none;
        }
        .dark .role-card { border-color:#334155; background:#0f172a; color:#94a3b8; }
        .role-card:hover { border-color:#94a3b8; background:#f1f5f9; }
        .dark .role-card:hover { border-color:#475569; background:#1e293b; }

        /* Active per role */
        .role-card--active-admin {
            border-color:#f87171 !important; background:#fef2f2 !important;
            color:#b91c1c !important; box-shadow:0 0 0 3px rgba(248,113,113,.2);
        }
        .dark .role-card--active-admin {
            background:rgba(220,38,38,.15) !important;
            color:#fca5a5 !important; box-shadow:0 0 0 3px rgba(248,113,113,.15);
        }
        .role-card--active-petugas {
            border-color:#34d399 !important; background:#f0fdf4 !important;
            color:#065f46 !important; box-shadow:0 0 0 3px rgba(52,211,153,.2);
        }
        .dark .role-card--active-petugas {
            background:rgba(16,185,129,.15) !important;
            color:#6ee7b7 !important; box-shadow:0 0 0 3px rgba(52,211,153,.15);
        }
        .role-card--active-dokter {
            border-color:#60a5fa !important; background:#eff6ff !important;
            color:#1d4ed8 !important; box-shadow:0 0 0 3px rgba(96,165,250,.2);
        }
        .dark .role-card--active-dokter {
            background:rgba(37,99,235,.15) !important;
            color:#93c5fd !important; box-shadow:0 0 0 3px rgba(96,165,250,.15);
        }
    </style>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?><?php /**PATH C:\laragon\www\KESEHATAN\resources\views/admin/users/create.blade.php ENDPATH**/ ?>