<?php

/**
 * Workspace — Assign Owner View
 * Step 2: Couple Owner details
 */

/** @var array $old */
/** @var array $errors */
$old    = $old ?? [];
$errors = $errors ?? [];

// Helper password suggestion for Admin
$suggestedPassword = bin2hex(random_bytes(6));

?>

<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">

    <!-- Step Wizard Progress Indicator -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <h2 class="text-2xl font-bold leading-7 text-slate-900 sm:text-3xl tracking-tight">
                Provision New Workspace
            </h2>
            <span class="text-xs font-bold text-slate-400">Step 3 of 5</span>
        </div>
        <div class="mt-4 bg-slate-200 h-1.5 rounded-full overflow-hidden">
            <div class="h-full rounded-full transition-all duration-300" style="background-color: var(--brand-charcoal); width: 60%;"></div>
        </div>
        <div class="flex justify-between text-[10px] font-bold text-slate-400 mt-2">
            <span class="text-slate-650">1. Basic Info</span>
            <span class="text-slate-650">2. Preview Config</span>
            <span style="color: var(--brand-charcoal); font-weight: 800;">3. Couple Owner</span>
            <span>4. Assign Crew</span>
            <span>5. Finish & Review</span>
        </div>
    </div>

    <!-- Main Content Card -->
    <div class="card p-0 overflow-hidden bg-white border border-slate-150 rounded-2xl shadow-sm">
        
        <div class="bg-slate-50 px-6 py-4 border-b border-slate-150">
            <h3 class="text-sm font-bold text-slate-800">3. Couple Account Setup</h3>
            <p class="text-xxs text-slate-450 mt-0.5">Define the primary administrative owner credentials for the client portal.</p>
        </div>

        <?php if (!empty($errors)): ?>
            <div class="alert alert-danger mx-6 mt-6 bg-rose-50 border border-rose-150 text-rose-800 p-4 rounded-xl" role="alert">
                <div class="flex gap-2">
                    <i class="fa-solid fa-triangle-exclamation text-rose-600 text-sm mt-0.5"></i>
                    <p class="text-xs font-bold">Please correct the validation errors in the form below.</p>
                </div>
            </div>
        <?php endif; ?>

        <form
            method="POST"
            action="/app/admin/workspaces/create-owner"
            id="workspace-assign-owner-form"
            class="p-6 space-y-6"
            novalidate
        >
            <?= csrf_field() ?>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Display Name -->
                <div class="form-group space-y-1.5">
                    <label for="display_name" class="form-label text-xs font-bold text-slate-700">
                        Owner Display Name <span class="text-rose-500">*</span>
                    </label>
                    <input
                        type="text"
                        name="display_name"
                        id="display_name"
                        required
                        value="<?= escape_html($old['display_name'] ?? '') ?>"
                        placeholder="e.g. John & Jane"
                        class="form-input text-xs w-full rounded-xl <?= isset($errors['display_name']) ? 'is-invalid' : '' ?>"
                    >
                    <?php if (isset($errors['display_name'])): ?>
                        <p class="mt-1 text-xxs text-rose-600 font-semibold" id="error-display_name"><?= escape_html($errors['display_name']) ?></p>
                    <?php endif; ?>
                </div>

                <!-- Username -->
                <div class="form-group space-y-1.5">
                    <label for="username" class="form-label text-xs font-bold text-slate-700">
                        Owner Username <span class="text-rose-500">*</span>
                    </label>
                    <input
                        type="text"
                        name="username"
                        id="username"
                        required
                        value="<?= escape_html($old['username'] ?? '') ?>"
                        placeholder="e.g. johnjane"
                        class="form-input text-xs w-full rounded-xl <?= isset($errors['username']) ? 'is-invalid' : '' ?>"
                    >
                    <?php if (isset($errors['username'])): ?>
                        <p class="mt-1 text-xxs text-rose-600 font-semibold" id="error-username"><?= escape_html($errors['username']) ?></p>
                    <?php endif; ?>
                </div>

                <!-- Email -->
                <div class="form-group space-y-1.5">
                    <label for="email" class="form-label text-xs font-bold text-slate-700">
                        Owner Email Address <span class="text-rose-500">*</span>
                    </label>
                    <input
                        type="email"
                        name="email"
                        id="email"
                        required
                        value="<?= escape_html($old['email'] ?? '') ?>"
                        placeholder="e.g. couple@gmail.com"
                        class="form-input text-xs w-full rounded-xl <?= isset($errors['email']) ? 'is-invalid' : '' ?>"
                    >
                    <?php if (isset($errors['email'])): ?>
                        <p class="mt-1 text-xxs text-rose-600 font-semibold" id="error-email"><?= escape_html($errors['email']) ?></p>
                    <?php endif; ?>
                </div>

                <!-- Password -->
                <div class="form-group space-y-1.5">
                    <div class="flex justify-between items-center">
                        <label for="password" class="form-label text-xs font-bold text-slate-700 mb-0">
                            Owner Password <span class="text-rose-500">*</span>
                        </label>
                        <button
                            type="button"
                            id="btn-suggest-password"
                            class="text-xxs font-bold bg-none border-none cursor-pointer hover:opacity-85"
                            style="color: var(--brand-rose-gold);"
                        >
                            Suggest Secure Password
                        </button>
                    </div>
                    <input
                        type="text"
                        name="password"
                        id="password"
                        required
                        value="<?= escape_html($old['password'] ?? $suggestedPassword) ?>"
                        class="form-input text-xs w-full rounded-xl <?= isset($errors['password']) ? 'is-invalid' : '' ?>"
                    >
                    <?php if (isset($errors['password'])): ?>
                        <p class="mt-1 text-xxs text-rose-600 font-semibold" id="error-password"><?= escape_html($errors['password']) ?></p>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Actions Footer -->
            <div class="flex items-center justify-between pt-6 border-t border-slate-100">
                <a
                    href="/app/admin/workspaces/created"
                    class="btn btn-secondary text-xs font-bold px-4 py-2 rounded-xl flex items-center gap-1"
                >
                    <i class="fa-solid fa-arrow-left text-[10px]"></i> Back
                </a>
                <button
                    type="submit"
                    class="btn btn-primary text-xs font-bold px-6 py-2.5 rounded-xl flex items-center gap-1"
                >
                    Continue to Crew Assignment <i class="fa-solid fa-arrow-right text-[10px]"></i>
                </button>
            </div>

        </form>

    </div>

</div>

<!-- Suggester script -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const passwordInput = document.getElementById('password');
    const suggestBtn = document.getElementById('btn-suggest-password');

    if (suggestBtn) {
        suggestBtn.addEventListener('click', function() {
            // Generate secure random string
            const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*';
            let pwd = '';
            for (let i = 0; i < 12; i++) {
                pwd += chars.charAt(Math.floor(Math.random() * chars.length));
            }
            passwordInput.value = pwd;
        });
    }
});
</script>
