<?php

/**
 * Workspace — Create View
 * Step 1: Basic Information
 */

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

$eventTypes = [
    1 => ['name' => 'Wedding', 'slug' => 'wedding', 'desc' => 'Full wedding management platform'],
    2 => ['name' => 'Engagement', 'slug' => 'engagement', 'desc' => 'Simplified engagement event']
];

$commercialPlans = [
    1 => ['name' => 'Starter', 'slug' => 'starter', 'desc' => 'Up to 150 guests, 15 gallery images'],
    2 => ['name' => 'Pro', 'slug' => 'professional', 'desc' => 'Up to 500 guests, 30 gallery images'],
    3 => ['name' => 'Custom', 'slug' => 'custom', 'desc' => 'Configurable guest limit, 50 gallery images']
];

?>

<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 1 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: 20%;"></div>
        </div>
        <div class="flex justify-between text-[10px] font-bold text-slate-400 mt-2">
            <span style="color: var(--brand-charcoal); font-weight: 800;">1. Basic Info</span>
            <span>2. Preview Config</span>
            <span>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">1. Workspace Configuration</h3>
            <p class="text-xxs text-slate-450 mt-0.5">Define core details and subscription pricing targets for the new tenant.</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"
            id="workspace-provision-form"
            class="p-6 space-y-6"
            novalidate
        >
            <?= csrf_field() ?>

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

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

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

                <!-- Slug -->
                <div class="form-group space-y-1.5">
                    <div class="flex justify-between items-center">
                        <label for="slug" class="form-label text-xs font-bold text-slate-700 mb-0">
                            URL Slug <span class="text-rose-500">*</span>
                        </label>
                        <button
                            type="button"
                            id="btn-suggest-slug"
                            class="text-xxs font-bold text-indigo-500 hover:text-indigo-650 bg-none border-none cursor-pointer"
                        >
                            Auto Generate
                        </button>
                    </div>
                    <input
                        type="text"
                        name="slug"
                        id="slug"
                        required
                        value="<?= escape_html($old['slug'] ?? '') ?>"
                        placeholder="e.g. john-jane"
                        class="form-input text-xs w-full rounded-xl <?= isset($errors['slug']) ? 'is-invalid' : '' ?>"
                    >
                    <?php if (isset($errors['slug'])): ?>
                        <p class="mt-1 text-xxs text-rose-600 font-semibold" id="error-slug"><?= escape_html($errors['slug']) ?></p>
                    <?php endif; ?>
                    <p class="text-[10px] text-slate-400 mt-1">Invitation link: <code>/i/{slug}/{code}</code></p>
                </div>
            </div>

            <!-- Event Type & Plan Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6" x-data="{ planId: '<?= escape_html($old['commercial_plan_id'] ?? '') ?>' }">
                <!-- Event Type -->
                <div class="form-group space-y-1.5">
                    <label for="event_type_id" class="form-label text-xs font-bold text-slate-700">
                        Event Type <span class="text-rose-500">*</span>
                    </label>
                    <select
                        name="event_type_id"
                        id="event_type_id"
                        required
                        class="form-select text-xs w-full rounded-xl <?= isset($errors['event_type_id']) ? 'is-invalid' : '' ?>"
                    >
                        <option value="">Select Event Type...</option>
                        <?php foreach ($eventTypes as $id => $info): ?>
                            <option
                                value="<?= escape_html((string) $id) ?>"
                                <?= isset($old['event_type_id']) && (int) $old['event_type_id'] === $id ? 'selected' : '' ?>
                            >
                                <?= escape_html($info['name']) ?> &mdash; <?= escape_html($info['desc']) ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                    <?php if (isset($errors['event_type_id'])): ?>
                        <p class="mt-1 text-xxs text-rose-600 font-semibold" id="error-event_type_id"><?= escape_html($errors['event_type_id']) ?></p>
                    <?php endif; ?>
                </div>

                <!-- Commercial Plan -->
                <div class="form-group space-y-1.5">
                    <label for="commercial_plan_id" class="form-label text-xs font-bold text-slate-700">
                        Commercial Plan <span class="text-rose-500">*</span>
                    </label>
                    <select
                        name="commercial_plan_id"
                        id="commercial_plan_id"
                        required
                        x-model="planId"
                        class="form-select text-xs w-full rounded-xl <?= isset($errors['commercial_plan_id']) ? 'is-invalid' : '' ?>"
                    >
                        <option value="">Select Commercial Plan...</option>
                        <?php foreach ($commercialPlans as $id => $info): ?>
                            <option
                                value="<?= escape_html((string) $id) ?>"
                                <?= isset($old['commercial_plan_id']) && (int) $old['commercial_plan_id'] === $id ? 'selected' : '' ?>
                            >
                                <?= escape_html($info['name']) ?> &mdash; <?= escape_html($info['desc']) ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                    <?php if (isset($errors['commercial_plan_id'])): ?>
                        <p class="mt-1 text-xxs text-rose-600 font-semibold" id="error-commercial_plan_id"><?= escape_html($errors['commercial_plan_id']) ?></p>
                    <?php endif; ?>
                </div>

                <!-- Custom Guest Limit (Alpine.js dependent) -->
                <div class="form-group space-y-1.5 md:col-span-2" x-show="planId === '3'" style="display: none;" x-transition>
                    <label for="custom_guest_limit" class="form-label text-xs font-bold text-slate-700">
                        Custom Guest Limit <span class="text-rose-500">*</span>
                    </label>
                    <input
                        type="number"
                        name="custom_guest_limit"
                        id="custom_guest_limit"
                        value="<?= escape_html($old['custom_guest_limit'] ?? '1000') ?>"
                        placeholder="e.g. 2000"
                        class="form-input text-xs w-full rounded-xl <?= isset($errors['custom_guest_limit']) ? 'is-invalid' : '' ?>"
                    >
                    <?php if (isset($errors['custom_guest_limit'])): ?>
                        <p class="mt-1 text-xxs text-rose-600 font-semibold" id="error-custom_guest_limit"><?= escape_html($errors['custom_guest_limit']) ?></p>
                    <?php endif; ?>
                    <p class="text-[10px] text-slate-400 mt-1">Enter maximum guest accounts permitted. Starter = 150, Pro = 500, Custom = configurable.</p>
                </div>
            </div>

            <!-- Actions Footer -->
            <div class="flex items-center justify-end gap-3 pt-6 border-t border-slate-100">
                <a
                    href="<?= url('/app/admin/dashboard') ?>"
                    class="btn btn-secondary text-xs font-bold px-4 py-2 rounded-xl"
                >
                    Cancel
                </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 <i class="fa-solid fa-arrow-right text-[10px]"></i>
                </button>
            </div>

        </form>

    </div>

</div>

<!-- Client-side script to auto-generate slug (UX enhancement) -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const groomInput = document.getElementById('groom_name');
    const brideInput = document.getElementById('bride_name');
    const slugInput  = document.getElementById('slug');
    const suggestBtn = document.getElementById('btn-suggest-slug');

    function generateSlug() {
        const groom = groomInput.value.trim().toLowerCase();
        const bride = brideInput.value.trim().toLowerCase();
        if (groom || bride) {
            let parts = [];
            if (groom) parts.push(groom);
            if (bride) parts.push(bride);
            const combined = parts.join('-');
            slugInput.value = combined
                .replace(/[^a-z0-9]+/g, '-')
                .replace(/(^-|-$)+/g, '');
        }
    }

    if (suggestBtn) {
        suggestBtn.addEventListener('click', generateSlug);
    }
});
</script>
