<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>POS</title>
    <link rel="icon" href="data:,">
    @if(app()->getLocale() === 'ar')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css">
    @else
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    @endif
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <style>
        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #0dcaee 0%, #0a8fa5 40%, #064f6b 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Segoe UI', system-ui, sans-serif;
            padding: 1.5rem 0;
        }
        .auth-card {
            width: 100%;
            max-width: 460px;
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.25);
            overflow: hidden;
        }
        .auth-header {
            background: linear-gradient(135deg, #0dcaee, #0a8fa5);
            padding: 2rem 2rem 1.75rem;
            text-align: center;
            color: #fff;
        }
        .auth-header .brand-icon {
            width: 68px;
            height: 68px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin-bottom: .85rem;
            backdrop-filter: blur(6px);
        }
        .auth-body { padding: 1.75rem 2rem 1.25rem; }
        .form-control {
            border-radius: 10px;
            padding: 0.6rem 1rem;
            border: 1.5px solid #e0e0e0;
            transition: border-color .2s, box-shadow .2s;
        }
        .form-control:focus {
            border-color: #0dcaee;
            box-shadow: 0 0 0 3px rgba(13,202,238,.15);
        }
        .input-group-text {
            border-radius: 10px 0 0 10px;
            background: #f0fbfd;
            border: 1.5px solid #e0e0e0;
            border-right: none;
            color: #0a8fa5;
        }
        .input-group .form-control { border-radius: 0 10px 10px 0; }
        .btn-auth {
            background: linear-gradient(135deg, #0dcaee, #0a8fa5);
            border: none;
            border-radius: 10px;
            padding: .7rem;
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: .5px;
            color: #fff;
            transition: opacity .2s, transform .15s;
        }
        .btn-auth:hover { opacity: .9; transform: translateY(-1px); color: #fff; }
        .auth-footer { text-align: center; padding: 0 2rem 1.5rem; }
        .auth-link { color: #0a8fa5; text-decoration: none; font-weight: 500; }
        .auth-link:hover { text-decoration: underline; color: #064f6b; }
        .divider { display: flex; align-items: center; gap: .75rem; color: #aaa; font-size: .85rem; margin: 1rem 0; }
        .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #e8e8e8; }
    </style>
</head>
<body>
<div class="auth-card">
    <div class="auth-header">
        <div class="brand-icon"><i class="bi bi-person-plus"></i></div>
        <h4 class="fw-bold mb-1">{{ __('Create Account') }}</h4>
        <p class="mb-0 opacity-75 small">{{ __('Restaurant Management System') }}</p>
    </div>

    <div class="auth-body">
        @if($errors->any())
            <div class="alert alert-danger py-2 small">
                <ul class="mb-0 ps-3">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('register') }}">
            @csrf

            <div class="mb-3">
                <label class="form-label fw-semibold small text-secondary">{{ __('Full Name') }}</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-person"></i></span>
                    <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror"
                           value="{{ old('name') }}" placeholder="{{ __('John Doe') }}" required autofocus autocomplete="name">
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label fw-semibold small text-secondary">{{ __('Email Address') }}</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-envelope"></i></span>
                    <input type="email" name="email" id="email" class="form-control @error('email') is-invalid @enderror"
                           value="{{ old('email') }}" placeholder="{{ __('you@example.com') }}" required autocomplete="username">
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label fw-semibold small text-secondary">{{ __('Password') }}</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-lock"></i></span>
                    <input type="password" name="password" id="password" class="form-control @error('password') is-invalid @enderror"
                           placeholder="{{ __('Min. 8 characters') }}" required autocomplete="new-password">
                    <button class="btn btn-outline-secondary border-start-0 border" type="button" id="togglePwd" style="border-radius:0 10px 10px 0; border-color:#e0e0e0;">
                        <i class="bi bi-eye" id="eyeIcon"></i>
                    </button>
                </div>
            </div>

            <div class="mb-4">
                <label class="form-label fw-semibold small text-secondary">{{ __('Confirm Password') }}</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
                    <input type="password" name="password_confirmation" id="password_confirmation"
                           class="form-control" placeholder="{{ __('Repeat password') }}" required autocomplete="new-password">
                </div>
            </div>

            <button type="submit" class="btn btn-auth w-100">
                <i class="bi bi-person-check me-2"></i>{{ __('Create Account') }}
            </button>
        </form>
    </div>

    <div class="auth-footer">
        <div class="divider">{{ __('or') }}</div>
        <p class="mb-0 small text-muted">{{ __('Already have an account?') }}
            <a href="{{ route('login') }}" class="auth-link">{{ __('Sign in') }}</a>
        </p>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    document.getElementById('togglePwd').addEventListener('click', function() {
        const pwd = document.getElementById('password');
        const icon = document.getElementById('eyeIcon');
        if (pwd.type === 'password') {
            pwd.type = 'text';
            icon.className = 'bi bi-eye-slash';
        } else {
            pwd.type = 'password';
            icon.className = 'bi bi-eye';
        }
    });
</script>
</body>
</html>
