<?php

/**
 * Workspace — Assign Crew View (Step 3/4)
 */

/** @var array $crews */
/** @var array $old */
/** @var array $errors */

?>

<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 4 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: 80%;"></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 class="text-slate-650">3. Couple Owner</span>
            <span style="color: var(--brand-charcoal); font-weight: 800;">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">4. Crew Accounts Assignment (Optional)</h3>
            <p class="text-xxs text-slate-450 mt-0.5">Select crew operators to manage guest check-ins for this wedding event.</p>
        </div>

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

            <!-- Crew Selection list -->
            <div class="space-y-3">
                <?php if (empty($crews)): ?>
                    <div class="p-6 bg-slate-50 border border-slate-150 rounded-xl text-center text-xs text-slate-500 space-y-1">
                        <i class="fa-solid fa-user-slash text-slate-350 text-xl block mb-1"></i>
                        <p class="font-bold">No crew operators available</p>
                        <p class="text-xxs text-slate-400">You can create crew accounts under the Crew Management page.</p>
                    </div>
                <?php else: ?>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <?php foreach ($crews as $crew): 
                            $name = $crew['display_name'] ?: $crew['username'];
                        ?>
                            <label class="relative flex items-start p-4 rounded-xl border border-slate-150 bg-white hover:bg-slate-50/50 transition-colors cursor-pointer select-none">
                                <div class="flex items-center h-5">
                                    <input
                                        type="checkbox"
                                        name="crew_ids[]"
                                        value="<?= (int) $crew['id'] ?>"
                                        class="h-4 w-4 rounded border-slate-300 text-slate-800 focus:ring-slate-500"
                                    >
                                </div>
                                <div class="ml-3 text-xs">
                                    <span class="block font-bold text-slate-800"><?= escape_html($name) ?></span>
                                    <span class="block text-xxs text-slate-450 mt-0.5 font-mono"><?= escape_html($crew['email']) ?></span>
                                </div>
                            </label>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>

            <!-- Actions Footer -->
            <div class="flex items-center justify-between pt-6 border-t border-slate-100">
                <a
                    href="/app/admin/workspaces/create-owner"
                    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 Review <i class="fa-solid fa-arrow-right text-[10px]"></i>
                </button>
            </div>

        </form>

    </div>

</div>
