

<?php $__env->startSection('title', 'Tambah User - Kei\'s Store'); ?>

<?php $__env->startSection('content'); ?>
<div class="container-fluid px-4 py-3">

    
    <div class="hero-section mb-5">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
            <div>
                <h1 class="display-6 fw-bold mb-2">
                    ✨ Tambah User Baru
                </h1>
                <p class="text-muted mb-0">Buat user baru untuk mengelola Kei's Store</p>
            </div>
            
            <div>
                <a href="<?php echo e(route('users.index')); ?>" class="btn-outline-modern">
                    <i class="bi bi-arrow-left"></i>
                    <span>Kembali ke Daftar User</span>
                </a>
            </div>
        </div>
    </div>

    
    <?php if($errors->any()): ?>
        <div class="alert-modern alert-error-modern mb-4">
            <i class="bi bi-exclamation-triangle-fill"></i>
            <div class="alert-content">
                <strong>Terjadi Kesalahan!</strong>
                <ul class="mb-0 mt-1 ps-3">
                    <?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>
            <button class="close-alert"><i class="bi bi-x-lg"></i></button>
        </div>
    <?php endif; ?>

    
    <div class="form-card">
        <div class="form-card-header">
            <div class="header-icon">
                <i class="bi bi-person-plus-fill"></i>
            </div>
            <div>
                <h3 class="header-title">Form Tambah User</h3>
                <p class="header-subtitle">Isi data user di bawah ini dengan benar</p>
            </div>
        </div>

        <div class="form-card-body">
            <form action="<?php echo e(route('users.store')); ?>" method="POST" class="modern-form" id="userForm">
                <?php echo csrf_field(); ?>

                <div class="row">
                    
                    <div class="col-md-6 mb-4">
                        <label for="username" class="form-label-modern">
                            <i class="bi bi-person-badge-fill"></i>
                            Username
                            <span class="required-badge">Wajib</span>
                        </label>
                        <div class="input-wrapper">
                            <span class="input-icon">
                                <i class="bi bi-person-fill"></i>
                            </span>
                            <input type="text" name="username" id="username"
                                   class="form-input-modern" 
                                   value="<?php echo e(old('username')); ?>"
                                   placeholder="Masukkan username..."
                                   required
                                   autocomplete="off">
                        </div>
                        <div class="form-hint">
                            <i class="bi bi-info-circle"></i>
                            Username minimal 3 karakter
                        </div>
                        <?php $__errorArgs = ['username'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <div class="form-hint text-danger">
                                <i class="bi bi-exclamation-circle"></i>
                                <?php echo e($message); ?>

                            </div>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    
                    <div class="col-md-6 mb-4">
                        <label for="email" class="form-label-modern">
                            <i class="bi bi-envelope-fill"></i>
                            Email
                            <span class="required-badge">Wajib</span>
                        </label>
                        <div class="input-wrapper">
                            <span class="input-icon">
                                <i class="bi bi-envelope-paper-fill"></i>
                            </span>
                            <input type="email" name="email" id="email"
                                   class="form-input-modern" 
                                   value="<?php echo e(old('email')); ?>"
                                   placeholder="Masukkan email..."
                                   required
                                   autocomplete="off">
                        </div>
                        <div class="form-hint">
                            <i class="bi bi-info-circle"></i>
                            Email harus valid dan unik
                        </div>
                        <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <div class="form-hint text-danger">
                                <i class="bi bi-exclamation-circle"></i>
                                <?php echo e($message); ?>

                            </div>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    
                    <div class="col-md-6 mb-4">
                        <label for="password" class="form-label-modern">
                            <i class="bi bi-lock-fill"></i>
                            Password
                            <span class="required-badge">Wajib</span>
                        </label>
                        <div class="input-wrapper">
                            <span class="input-icon">
                                <i class="bi bi-key-fill"></i>
                            </span>
                            <input type="password" name="password" id="password"
                                   class="form-input-modern" 
                                   placeholder="Masukkan password..."
                                   required
                                   minlength="4">
                            <button type="button" class="toggle-password" onclick="togglePassword('password')">
                                <i class="bi bi-eye-slash"></i>
                            </button>
                        </div>
                        <div class="form-hint">
                            <i class="bi bi-info-circle"></i>
                            Password minimal 4 karakter
                        </div>
                        <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <div class="form-hint text-danger">
                                <i class="bi bi-exclamation-circle"></i>
                                <?php echo e($message); ?>

                            </div>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    
                    <div class="col-md-6 mb-4">
                        <label for="role" class="form-label-modern">
                            <i class="bi bi-people-fill"></i>
                            Role User
                            <span class="required-badge">Wajib</span>
                        </label>
                        <div class="input-wrapper">
                            <span class="input-icon">
                                <i class="bi bi-shield-lock-fill"></i>
                            </span>
                            <select name="role" id="role" class="form-input-modern" required>
                                <option value="">-- Pilih Role --</option>
                                <option value="admin" <?php echo e(old('role') == 'admin' ? 'selected' : ''); ?>>Admin</option>
                                <option value="pengguna" <?php echo e(old('role') == 'pengguna' ? 'selected' : ''); ?>>Pengguna</option>
                            </select>
                        </div>
                        <div class="form-hint">
                            <i class="bi bi-info-circle"></i>
                            Admin memiliki akses penuh, Pengguna hanya bisa berbelanja
                        </div>
                        <?php $__errorArgs = ['role'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <div class="form-hint text-danger">
                                <i class="bi bi-exclamation-circle"></i>
                                <?php echo e($message); ?>

                            </div>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>
                </div>

                
                <div class="form-actions">
                    <button type="submit" class="btn-submit-modern" id="submitBtn">
                        <i class="bi bi-check-lg"></i>
                        <span>Simpan User</span>
                        <div class="btn-spinner d-none">
                            <div class="spinner-border spinner-border-sm" role="status"></div>
                        </div>
                    </button>
                    <a href="<?php echo e(route('users.index')); ?>" class="btn-cancel-modern">
                        <i class="bi bi-x-lg"></i>
                        <span>Batal</span>
                    </a>
                </div>
            </form>
        </div>
    </div>

    
    <div class="info-tips mt-4">
        <div class="tips-content">
            <i class="bi bi-lightbulb-fill"></i>
            <div>
                <strong>Tips:</strong>
                Gunakan password yang kuat dan mudah diingat. Role Admin memiliki akses penuh ke seluruh sistem.
            </div>
        </div>
    </div>
</div>

<style>
/* MODERN CSS RESET & VARIABLES */
:root {
    --pink-primary: #ec4899;
    --pink-dark: #db2777;
    --pink-light: #fdf2f8;
    --pink-soft: #fce7f3;
    --pink-gradient: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    --pink-gradient-soft: linear-gradient(135deg, #fbcfe8 0%, #fce7f3 100%);
    --gray-50: #faf9fe;
    --gray-100: #f5f3ff;
    --gray-200: #ede9fe;
    --gray-600: #6b7280;
    --gray-800: #1f2937;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-pink: 0 4px 14px 0 rgba(236, 72, 153, 0.25);
    --shadow-pink-lg: 0 20px 25px -12px rgba(236, 72, 153, 0.3);
}

/* HERO SECTION */
.hero-section {
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    padding: 2rem 2rem;
    border-radius: 28px;
    margin-bottom: 2rem;
}

.display-6 {
    font-size: 1.875rem;
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* BUTTON OUTLINE MODERN */
.btn-outline-modern {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    color: var(--pink-primary);
    border: 2px solid var(--pink-primary);
    border-radius: 60px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-outline-modern:hover {
    background: var(--pink-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-pink);
}

/* ALERT MODERN */
.alert-modern {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 16px;
    font-size: 0.875rem;
    position: relative;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-error-modern {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fecaca;
    color: #991b1b;
}

.alert-content {
    flex: 1;
}

.alert-content strong {
    display: block;
    margin-bottom: 4px;
}

.alert-content ul {
    margin-top: 8px;
    padding-left: 20px;
}

.close-alert {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.close-alert:hover {
    opacity: 1;
}

/* FORM CARD */
.form-card {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(236, 72, 153, 0.1);
}

.form-card-header {
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    padding: 24px 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid rgba(236, 72, 153, 0.1);
}

.header-icon {
    width: 56px;
    height: 56px;
    background: var(--pink-gradient);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-icon i {
    font-size: 28px;
    color: white;
}

.header-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 4px 0;
}

.header-subtitle {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin: 0;
}

.form-card-body {
    padding: 32px;
}

/* FORM GROUP MODERN */
.form-label-modern {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.form-label-modern i {
    color: var(--pink-primary);
    font-size: 1rem;
}

.required-badge {
    background: var(--pink-soft);
    color: var(--pink-primary);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 500;
    margin-left: 8px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 16px;
    color: #9ca3af;
    font-size: 1rem;
    pointer-events: none;
    z-index: 1;
}

.form-input-modern {
    width: 100%;
    padding: 14px 16px 14px 44px;
    font-size: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    transition: all 0.3s ease;
    background: white;
}

select.form-input-modern {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    padding-right: 44px;
}

.form-input-modern:focus {
    outline: none;
    border-color: var(--pink-primary);
    box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.1);
}

.form-input-modern.is-valid {
    border-color: #10b981;
}

.form-input-modern.is-invalid {
    border-color: #ef4444;
}

.toggle-password {
    position: absolute;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    font-size: 1rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.toggle-password:hover {
    color: var(--pink-primary);
}

.form-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--gray-600);
}

.form-hint i {
    font-size: 0.7rem;
}

.form-hint.text-danger {
    color: #ef4444;
}

/* FORM ACTIONS */
.form-actions {
    display: flex;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.btn-submit-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 28px;
    background: var(--pink-gradient);
    color: white;
    border: none;
    border-radius: 60px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-pink);
    min-width: 160px;
}

.btn-submit-modern:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-pink-lg);
}

.btn-submit-modern:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-cancel-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    background: transparent;
    color: var(--gray-600);
    border: 2px solid #e5e7eb;
    border-radius: 60px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-cancel-modern:hover {
    border-color: var(--pink-primary);
    color: var(--pink-primary);
    transform: translateY(-1px);
}

/* INFO TIPS */
.info-tips {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 16px;
    padding: 12px 20px;
    border: 1px solid #fcd34d;
}

.tips-content {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    color: #92400e;
}

.tips-content i {
    font-size: 1.25rem;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .hero-section {
        padding: 1.5rem;
    }
    
    .display-6 {
        font-size: 1.25rem;
    }
    
    .form-card-header {
        padding: 20px;
    }
    
    .form-card-body {
        padding: 20px;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .btn-submit-modern,
    .btn-cancel-modern {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .header-icon {
        width: 48px;
        height: 48px;
    }
    
    .header-icon i {
        font-size: 24px;
    }
    
    .header-title {
        font-size: 1rem;
    }
    
    .header-subtitle {
        font-size: 0.75rem;
    }
}

/* LOADING SPINNER */
.btn-spinner {
    display: inline-flex;
}

/* ANIMATION FOR FORM */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-card {
    animation: fadeInUp 0.5s ease;
}
</style>

<script>
// Toggle password visibility
function togglePassword(fieldId) {
    const field = document.getElementById(fieldId);
    const toggleBtn = field.nextElementSibling;
    const icon = toggleBtn.querySelector('i');
    
    if (field.type === 'password') {
        field.type = 'text';
        icon.classList.remove('bi-eye-slash');
        icon.classList.add('bi-eye');
    } else {
        field.type = 'password';
        icon.classList.remove('bi-eye');
        icon.classList.add('bi-eye-slash');
    }
}

// Form validation
const form = document.getElementById('userForm');
const submitBtn = document.getElementById('submitBtn');
const btnText = submitBtn.querySelector('span');
const btnSpinner = submitBtn.querySelector('.btn-spinner');

// Real-time validation
const usernameField = document.getElementById('username');
const emailField = document.getElementById('email');
const passwordField = document.getElementById('password');
const roleField = document.getElementById('role');

function validateUsername() {
    const value = usernameField.value.trim();
    if (value.length >= 3) {
        usernameField.classList.remove('is-invalid');
        usernameField.classList.add('is-valid');
        return true;
    } else if (value.length > 0) {
        usernameField.classList.remove('is-valid');
        usernameField.classList.add('is-invalid');
        return false;
    } else {
        usernameField.classList.remove('is-valid', 'is-invalid');
        return false;
    }
}

function validateEmail() {
    const value = emailField.value.trim();
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (emailRegex.test(value)) {
        emailField.classList.remove('is-invalid');
        emailField.classList.add('is-valid');
        return true;
    } else if (value.length > 0) {
        emailField.classList.remove('is-valid');
        emailField.classList.add('is-invalid');
        return false;
    } else {
        emailField.classList.remove('is-valid', 'is-invalid');
        return false;
    }
}

function validatePassword() {
    const value = passwordField.value;
    if (value.length >= 4) {
        passwordField.classList.remove('is-invalid');
        passwordField.classList.add('is-valid');
        return true;
    } else if (value.length > 0) {
        passwordField.classList.remove('is-valid');
        passwordField.classList.add('is-invalid');
        return false;
    } else {
        passwordField.classList.remove('is-valid', 'is-invalid');
        return false;
    }
}

function validateRole() {
    const value = roleField.value;
    if (value !== '') {
        roleField.classList.remove('is-invalid');
        roleField.classList.add('is-valid');
        return true;
    } else {
        roleField.classList.remove('is-valid');
        roleField.classList.add('is-invalid');
        return false;
    }
}

usernameField.addEventListener('input', validateUsername);
emailField.addEventListener('input', validateEmail);
passwordField.addEventListener('input', validatePassword);
roleField.addEventListener('change', validateRole);

// Form submit with validation
if (form) {
    form.addEventListener('submit', function(e) {
        const isUsernameValid = validateUsername();
        const isEmailValid = validateEmail();
        const isPasswordValid = validatePassword();
        const isRoleValid = validateRole();
        
        if (!isUsernameValid || !isEmailValid || !isPasswordValid || !isRoleValid) {
            e.preventDefault();
            alert('Silakan lengkapi semua data dengan benar!');
            return false;
        }
        
        // Show loading state
        btnText.classList.add('d-none');
        btnSpinner.classList.remove('d-none');
        submitBtn.disabled = true;
    });
}

// Close alert functionality
document.querySelectorAll('.close-alert').forEach(button => {
    button.addEventListener('click', function() {
        this.closest('.alert-modern').style.display = 'none';
    });
});

// Auto hide alerts after 5 seconds
setTimeout(function() {
    document.querySelectorAll('.alert-modern').forEach(alert => {
        alert.style.display = 'none';
    });
}, 5000);

// Focus on username field
document.getElementById('username').focus();
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\comca\resources\views/users/create.blade.php ENDPATH**/ ?>