<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Set Up Your Business — 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>
        body { background: #f4f6f9; font-family: 'Segoe UI', system-ui, sans-serif; }
        .onboard-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
        .onboard-card { background: white; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); width: 100%; max-width: 560px; }
        .onboard-header { background: linear-gradient(135deg, #00a651, #007a3d); border-radius: 16px 16px 0 0; padding: 2rem; color: white; }
        .onboard-body { padding: 2rem; }
        .step-indicator { display: flex; gap: 6px; margin-bottom: 1rem; }
        .step-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); }
        .step-dot.active { background: white; width: 24px; border-radius: 4px; }
        .section-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; margin-bottom: 0.75rem; margin-top: 1.5rem; }
        .section-title:first-child { margin-top: 0; }
        .form-control:focus, .form-select:focus { border-color: #00a651; box-shadow: 0 0 0 0.2rem rgba(0,166,81,0.15); }
        .form-label { font-weight: 500; font-size: 0.875rem; color: #374151; }
        .btn-brand { background: #00a651; border-color: #00a651; color: white; font-weight: 600; padding: 0.65rem 1.5rem; }
        .btn-brand:hover { background: #007a3d; border-color: #007a3d; color: white; }
        .logo-upload-zone {
            border: 2px dashed #e2e8f0; border-radius: 10px;
            padding: 1.5rem; text-align: center; cursor: pointer;
            transition: all 0.2s; background: #f8fafc;
        }
        .logo-upload-zone:hover { border-color: #00a651; background: #f0fdf4; }
        .logo-preview { display: none; width: 80px; height: 80px; border-radius: 8px; object-fit: cover; margin: 0 auto; }
    </style>
</head>
<body>
<div class="onboard-wrapper">
    <div class="onboard-card">
        <div class="onboard-header">
            <div class="step-indicator">
                <div class="step-dot"></div>
                <div class="step-dot active"></div>
                <div class="step-dot"></div>
            </div>
            <h4 class="fw-700 mb-1">Set up your business profile</h4>
            <p class="mb-0 opacity-75 small">This information appears on your invoices. You can update it anytime.</p>
        </div>

        <div class="onboard-body">
            <?php if($errors->any()): ?>
                <div class="alert alert-danger rounded-3 small py-2 mb-3">
                    <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('onboarding')); ?>" enctype="multipart/form-data" novalidate>
                <?php echo csrf_field(); ?>

                
                <div class="section-title"><i class="bi bi-image me-1"></i> Business Logo (optional)</div>
                <div class="logo-upload-zone" onclick="document.getElementById('logoInput').click()">
                    <img id="logoPreview" class="logo-preview" src="" alt="Logo preview">
                    <div id="logoPlaceholder">
                        <i class="bi bi-cloud-arrow-up fs-2 text-muted"></i>
                        <p class="text-muted small mb-0 mt-1">Click to upload your logo</p>
                        <p class="text-muted" style="font-size:0.72rem;">PNG, JPG up to 2MB</p>
                    </div>
                </div>
                <input type="file" id="logoInput" name="logo" accept="image/*" class="d-none">

                
                <div class="section-title"><i class="bi bi-building me-1"></i> Business Details</div>
                <div class="row g-3">
                    <div class="col-sm-6">
                        <label class="form-label">Business Type</label>
                        <select name="business_type" class="form-select">
                            <option value="">— Select —</option>
                            <option value="sole_proprietor" <?php echo e(old('business_type') === 'sole_proprietor' ? 'selected' : ''); ?>>Sole Proprietor</option>
                            <option value="partnership"     <?php echo e(old('business_type') === 'partnership'     ? 'selected' : ''); ?>>Partnership</option>
                            <option value="llc"             <?php echo e(old('business_type') === 'llc'             ? 'selected' : ''); ?>>Limited Liability (LLC)</option>
                            <option value="plc"             <?php echo e(old('business_type') === 'plc'             ? 'selected' : ''); ?>>Public Limited Company</option>
                            <option value="ngo"             <?php echo e(old('business_type') === 'ngo'             ? 'selected' : ''); ?>>NGO / Non-profit</option>
                            <option value="freelancer"      <?php echo e(old('business_type') === 'freelancer'      ? 'selected' : ''); ?>>Freelancer</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Business Address <span class="text-danger">*</span></label>
                        <textarea name="address" rows="2" required
                            class="form-control <?php $__errorArgs = ['address'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                            placeholder="14 Admiralty Way, Lekki Phase 1, Lagos"><?php echo e(old('address')); ?></textarea>
                    </div>
                </div>

                
                <div class="section-title"><i class="bi bi-bank me-1"></i> Bank Details (for payments)</div>
                <div class="row g-3">
                    <div class="col-sm-6">
                        <label class="form-label">Bank Name <span class="text-danger">*</span></label>
                        <select name="bank_name" class="form-select <?php $__errorArgs = ['bank_name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" required>
                            <option value="">— Select Bank —</option>
                            <?php $__currentLoopData = [
                                'Access Bank','First Bank of Nigeria','Guaranty Trust Bank',
                                'United Bank for Africa','Zenith Bank','Fidelity Bank',
                                'First City Monument Bank','Stanbic IBTC Bank',
                                'Sterling Bank','Union Bank','Wema Bank',
                                'Opay','Kuda Bank','Palmpay','Moniepoint','Providus Bank'
                            ]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $bank): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($bank); ?>" <?php echo e(old('bank_name') === $bank ? 'selected' : ''); ?>><?php echo e($bank); ?></option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                    </div>
                    <div class="col-sm-6">
                        <label class="form-label">Account Number <span class="text-danger">*</span></label>
                        <input type="text" name="account_number" maxlength="10"
                               class="form-control <?php $__errorArgs = ['account_number'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                               placeholder="0123456789"
                               value="<?php echo e(old('account_number')); ?>" required>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Account Name <span class="text-danger">*</span></label>
                        <input type="text" name="account_name"
                               class="form-control <?php $__errorArgs = ['account_name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                               placeholder="OBI CREATIVE AGENCY"
                               value="<?php echo e(old('account_name')); ?>" required
                               style="text-transform:uppercase;">
                        <div class="form-text">Enter the name exactly as it appears on your bank account</div>
                    </div>
                </div>

                <div class="d-flex justify-content-between align-items-center mt-4">
                    <a href="<?php echo e(route('logout')); ?>" class="btn btn-link text-muted text-decoration-none small"
                       onclick="return confirm('Log out and continue later?')">
                        Continue later
                    </a>
                    <button type="submit" class="btn btn-brand">
                        Complete Setup <i class="bi bi-arrow-right ms-2"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Logo preview
document.getElementById('logoInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = function(ev) {
        const preview     = document.getElementById('logoPreview');
        const placeholder = document.getElementById('logoPlaceholder');
        preview.src = ev.target.result;
        preview.style.display = 'block';
        placeholder.style.display = 'none';
    };
    reader.readAsDataURL(file);
});

// Auto-uppercase account name
document.querySelector('[name="account_name"]')?.addEventListener('input', function() {
    const pos = this.selectionStart;
    this.value = this.value.toUpperCase();
    this.setSelectionRange(pos, pos);
});
</script>
</body>
</html>
<?php /**PATH C:\Users\Bunmi\Desktop\crud\resources\views/auth/onboarding.blade.php ENDPATH**/ ?>