<!DOCTYPE html>
<html lang="id" class="h-full bg-gray-50">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login — Service Center</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        brand: {
                            50:  '#eff6ff',
                            100: '#dbeafe',
                            500: '#3b82f6',
                            600: '#2563eb',
                            700: '#1d4ed8',
                            800: '#1e40af',
                        }
                    }
                }
            }
        }
    </script>
</head>
<body class="h-full flex items-center justify-center px-4">

<div class="w-full max-w-sm">

    
    <div class="text-center mb-8">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-brand-600 rounded-2xl shadow-lg mb-4">
            <svg class="w-9 h-9 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M9 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V9m-9-6l6 6m0 0H9m6 0V3"/>
            </svg>
        </div>
        <h1 class="text-2xl font-bold text-gray-900 tracking-tight">Service Center</h1>
        <p class="text-sm text-gray-500 mt-1">Masuk untuk mengakses dashboard</p>
    </div>

    
    <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-8">

        
        <?php if($errors->any()): ?>
        <div class="mb-5 flex items-start gap-3 bg-red-50 border border-red-200 rounded-xl px-4 py-3">
            <svg class="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586
                         10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414
                         -1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                      clip-rule="evenodd"/>
            </svg>
            <p class="text-sm text-red-700"><?php echo e($errors->first('email')); ?></p>
        </div>
        <?php endif; ?>

        <form method="POST" action="<?php echo e(route('login')); ?>">
            <?php echo csrf_field(); ?>

            
            <div class="mb-5">
                <label for="email" class="block text-sm font-semibold text-gray-700 mb-1.5">
                    Email
                </label>
                <input type="email" id="email" name="email" required autocomplete="email"
                       value="<?php echo e(old('email')); ?>"
                       placeholder="nama@example.com"
                       class="w-full rounded-xl border px-4 py-3 text-sm transition
                              <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-400 bg-red-50 <?php else: ?> border-gray-300 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                              focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent
                              placeholder-gray-400">
            </div>

            
            <div class="mb-6">
                <label for="password" class="block text-sm font-semibold text-gray-700 mb-1.5">
                    Password
                </label>
                <div class="relative">
                    <input type="password" id="password" name="password" required autocomplete="current-password"
                           placeholder="••••••••"
                           class="w-full rounded-xl border border-gray-300 px-4 py-3 pr-11 text-sm transition
                                  focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent
                                  placeholder-gray-400">
                    
                    <button type="button" tabindex="-1"
                            onclick="const i=document.getElementById('password'); i.type = i.type==='password'?'text':'password'"
                            class="absolute inset-y-0 right-3 flex items-center text-gray-400 hover:text-gray-600">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542
                                     7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                        </svg>
                    </button>
                </div>
            </div>

            
            <div class="flex items-center justify-between mb-6">
                <label class="flex items-center gap-2 cursor-pointer select-none">
                    <input type="checkbox" name="remember" value="1"
                           class="w-4 h-4 rounded border-gray-300 text-brand-600
                                  focus:ring-brand-500 focus:ring-2 cursor-pointer">
                    <span class="text-sm text-gray-600">Ingat saya</span>
                </label>
            </div>

            
            <button type="submit"
                    class="w-full flex items-center justify-center gap-2 bg-brand-600 text-white
                           font-semibold text-sm rounded-xl px-4 py-3.5 hover:bg-brand-700
                           active:bg-brand-800 transition shadow-md shadow-brand-100
                           focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3
                             3 0 013-3h7a3 3 0 013 3v1"/>
                </svg>
                Masuk
            </button>
        </form>

    </div>

    
    <?php if(app()->isLocal()): ?>
    <div class="mt-6 rounded-xl bg-amber-50 border border-amber-200 p-4 text-xs text-amber-800">
        <p class="font-semibold mb-2">Akun default (development):</p>
        <div class="space-y-1 font-mono">
            <p>admin@service.test / password</p>
            <p>teknisi@service.test / password</p>
            <p>kurir@service.test / password</p>
        </div>
    </div>
    <?php endif; ?>

    <p class="text-center text-xs text-gray-400 mt-6">
        &copy; <?php echo e(date('Y')); ?> Service Center. All rights reserved.
    </p>

</div>

</body>
</html>
<?php /**PATH C:\laragon\www\Service-sistem\resources\views/auth/login.blade.php ENDPATH**/ ?>