<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create Account — OlaInvoice</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <style>
        * { box-sizing: border-box; }
        body {
            margin: 0; min-height: 100vh;
            font-family: 'Segoe UI', system-ui, sans-serif;
            background: #f0fdf4;
            display: flex; align-items: center; justify-content: center;
            padding: 1.5rem;
        }
        .auth-wrap { width: 100%; max-width: 480px; }
        .auth-card { background: white; border-radius: 16px; padding: 2.25rem 2rem; box-shadow: 0 4px 32px rgba(0,0,0,0.08); }
        .brand-mark { display: flex; align-items: center; gap: 10px; margin-bottom: 1.75rem; justify-content: center; }
        .brand-icon { width: 44px; height: 44px; background: #00a651; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
        .brand-icon svg { width: 26px; height: 26px; }
        .brand-icon-text { font-size: 1.4rem; font-weight: 800; color: #1e293b; letter-spacing: -0.5px; }
        .brand-icon-text span { color: #00a651; }
        h4 { font-size: 1.15rem; font-weight: 700; color: #1e293b; margin-bottom: 0.3rem; }
        p.sub { color: #64748b; font-size: 0.85rem; margin-bottom: 1.5rem; }
        .form-label { font-weight: 500; font-size: 0.83rem; color: #374151; margin-bottom: 4px; }
        .form-control { border-radius: 8px; border: 1.5px solid #e2e8f0; padding: 0.58rem 0.85rem; font-size: 0.88rem; }
        .form-control:focus { border-color: #00a651; box-shadow: 0 0 0 3px rgba(0,166,81,0.12); }
        .input-group-text { background: #f8fafc; border: 1.5px solid #e2e8f0; }
        .btn-main { background: #00a651; color: white; border: none; border-radius: 8px; font-weight: 600; padding: 0.65rem 1rem; font-size: 0.95rem; width: 100%; transition: background 0.15s; }
        .btn-main:hover { background: #007a3d; color: white; }
        .auth-footer { text-align: center; margin-top: 1.5rem; font-size: 0.75rem; color: #94a3b8; }
        .auth-footer a { color: #00a651; text-decoration: none; font-weight: 500; }
    </style>
</head>
<body>
<div class="auth-wrap">
    <div class="auth-card">

        <div class="brand-mark">
            <div class="brand-icon">
                <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="8" y="6" width="46" height="58" rx="5" fill="white" opacity="0.95"/>
                    <polygon points="42,6 54,18 42,18" fill="white" opacity="0.65"/>
                    <rect x="15" y="26" width="28" height="3" rx="1.5" fill="#007a3d" opacity="0.6"/>
                    <rect x="15" y="34" width="22" height="3" rx="1.5" fill="#007a3d" opacity="0.4"/>
                    <rect x="15" y="42" width="25" height="3" rx="1.5" fill="#007a3d" opacity="0.4"/>
                    <circle cx="61" cy="61" r="16" fill="#00c96a"/>
                    <circle cx="61" cy="61" r="12" fill="#007a3d"/>
                    <text x="61" y="66" text-anchor="middle" font-size="15" font-weight="900" font-family="Arial,sans-serif" fill="white">₦</text>
                </svg>
            </div>
            <div class="brand-icon-text">Ola<span>Invoice</span></div>
        </div>

        <h4>Create your account</h4>
        <p class="sub">Start sending professional invoices — free forever</p>

        <?php if($errors->any()): ?>
            <div class="alert alert-danger rounded-3 py-2 mb-3" style="font-size:0.82rem;">
                <i class="bi bi-exclamation-circle me-1"></i><?php echo e($errors->first()); ?>

            </div>
        <?php endif; ?>

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

            <div class="row g-3">
                <div class="col-sm-6">
                    <label class="form-label">Full Name <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control"
                           placeholder="Chukwuemeka Obi"
                           value="<?php echo e(old('name')); ?>" required>
                </div>
                <div class="col-sm-6">
                    <label class="form-label">Business Name <span class="text-danger">*</span></label>
                    <input type="text" name="business_name" class="form-control"
                           placeholder="Obi Creative Agency"
                           value="<?php echo e(old('business_name')); ?>" required>
                </div>
                <div class="col-sm-7">
                    <label class="form-label">Email Address <span class="text-danger">*</span></label>
                    <input type="email" name="email" class="form-control"
                           placeholder="you@business.com"
                           value="<?php echo e(old('email')); ?>" required>
                </div>
                <div class="col-sm-5">
                    <label class="form-label">Phone <span class="text-danger">*</span></label>
                    <input type="tel" name="phone" class="form-control"
                           placeholder="0801 234 5678"
                           value="<?php echo e(old('phone')); ?>" required>
                </div>
                <div class="col-sm-6">
                    <label class="form-label">Password <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <input type="password" name="password" id="pwd1"
                               class="form-control border-end-0"
                               placeholder="Min 8 characters" required>
                        <button type="button"
                                class="input-group-text border-start-0"
                                style="cursor:pointer;background:white;border:1.5px solid #e2e8f0;"
                                onclick="togglePwd('pwd1','eye1')">
                            <i id="eye1" class="bi bi-eye text-muted" style="font-size:0.85rem;"></i>
                        </button>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="form-label">Confirm Password <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <input type="password" name="password_confirmation" id="pwd2"
                               class="form-control border-end-0"
                               placeholder="Repeat password" required>
                        <button type="button"
                                class="input-group-text border-start-0"
                                style="cursor:pointer;background:white;border:1.5px solid #e2e8f0;"
                                onclick="togglePwd('pwd2','eye2')">
                            <i id="eye2" class="bi bi-eye text-muted" style="font-size:0.85rem;"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="form-check mt-3 mb-4">
                <input type="checkbox" class="form-check-input" id="terms" required>
                <label class="form-check-label" for="terms" style="font-size:0.82rem;color:#64748b;">
                    I agree to the <a href="#" style="color:#00a651;">Terms of Service</a>
                </label>
            </div>

            <button type="submit" class="btn-main">
                Create Free Account <i class="bi bi-arrow-right ms-1"></i>
            </button>

        </form>

        <p style="text-align:center;margin-top:1.1rem;font-size:0.85rem;color:#64748b;margin-bottom:0;">
            Already have an account?
            <a href="<?php echo e(route('login')); ?>"
               style="color:#00a651;font-weight:600;text-decoration:none;">
                Sign in
            </a>
        </p>

    </div>

    <div class="auth-footer">
        &copy; <?php echo e(date('Y')); ?> OlaInvoice &nbsp;·&nbsp;
        Made by
        <a href="https://adeyemoportfolio.armitech.com.ng/about.php"
           target="_blank" rel="noopener">
            Adeyemo Olamilekan
        </a>
    </div>
</div>

<script>
function togglePwd(inputId, iconId) {
    const input = document.getElementById(inputId);
    const icon  = document.getElementById(iconId);
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.replace('bi-eye', 'bi-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.replace('bi-eye-slash', 'bi-eye');
    }
}
</script>
</body>
</html>
<?php /**PATH C:\Users\Bunmi\Desktop\crud\resources\views/auth/register.blade.php ENDPATH**/ ?>