<?php
/**
 * Couple Portal — Add to Wedding Schedule (RC-018 / UX005)
 * Location: app/views/timeline/create_task.php
 *
 * Simple calendar-event style form. Max 7 visible fields.
 */
?>

<div class="space-y-8" x-data="{ reminderEnabled: <?= !empty($old['reminder_enabled']) ? 'true' : 'false' ?> }">

    <!-- ── Page Header ──────────────────────────────────────────────────── -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <div class="page-breadcrumb">
                <a href="<?= url('/app/couple/timeline') ?>">Wedding Schedule</a>
                <span class="sep">/</span>
                <span>Add to Schedule</span>
            </div>
            <h1 class="page-h1">
                <span class="page-header-icon">
                    <i class="fa-solid fa-calendar-plus"></i>
                </span>
                Add to Schedule
            </h1>
            <p class="text-sm text-slate-500 mt-1.5 ml-0.5">Add an event, meeting, payment, or reminder to your wedding schedule.</p>
        </div>
        <div>
            <a href="<?= url('/app/couple/timeline') ?>" class="cp-btn-back">
                <i class="fa-solid fa-arrow-left"></i> Back
            </a>
        </div>
    </div>

    <!-- ── Form Card ────────────────────────────────────────────────────── -->
    <div class="bg-white rounded-2xl border border-slate-100 shadow-sm max-w-2xl">
        <form method="POST" action="<?= url('/app/couple/timeline/tasks/create') ?>" class="p-6 space-y-5">
            <input type="hidden" name="_csrf" value="<?= escape_html($_SESSION['csrf_token'] ?? '') ?>">

            <!-- ── Core Fields ─────────────────────────────────────────── -->

            <!-- Title -->
            <div class="space-y-1.5">
                <label for="title" class="text-sm font-bold text-slate-700 block">
                    What is it? <span class="text-rose-500">*</span>
                </label>
                <input type="text"
                       id="title"
                       name="title"
                       value="<?= escape_html($old['title'] ?? '') ?>"
                       placeholder="e.g. Food Tasting, Venue Payment, Dress Fitting…"
                       class="form-input text-sm w-full"
                       required>
                <?php if (isset($errors['title'])): ?>
                    <p class="text-xs text-rose-600 font-semibold"><?= escape_html($errors['title']) ?></p>
                <?php endif; ?>
            </div>

            <!-- Date + Category (row) -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                <!-- Date -->
                <div class="space-y-1.5">
                    <label for="due_date" class="text-sm font-bold text-slate-700 block">When?</label>
                    <input type="date"
                           id="due_date"
                           name="due_date"
                           value="<?= escape_html($old['due_date'] ?? '') ?>"
                           class="form-input text-sm w-full">
                </div>

                <!-- Category (Type) -->
                <div class="space-y-1.5">
                    <label for="category" class="text-sm font-bold text-slate-700 block">
                        Type <span class="text-rose-500">*</span>
                    </label>
                    <select id="category" name="category" class="form-select text-sm w-full" required>
                        <option value="">-- Select type --</option>
                        <?php foreach ($categories as $cat): ?>
                            <option value="<?= $cat ?>" <?= (isset($old['category']) && $old['category'] === $cat) ? 'selected' : '' ?>>
                                <?= escape_html($cat) ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                    <?php if (isset($errors['category'])): ?>
                        <p class="text-xs text-rose-600 font-semibold"><?= escape_html($errors['category']) ?></p>
                    <?php endif; ?>
                </div>

            </div>

            <!-- Phase (required by backend — hidden from user with sensible default) -->
            <?php if (!empty($phases)): ?>
                <!-- Show phase selector only if multiple phases exist and first one isn't a catch-all -->
                <?php if (count($phases) > 1): ?>
                <div class="space-y-1.5">
                    <label for="phase_id" class="text-sm font-bold text-slate-700 block">Planning Period</label>
                    <select id="phase_id" name="phase_id" class="form-select text-sm w-full" required>
                        <option value="">-- Select period --</option>
                        <?php foreach ($phases as $ph): ?>
                            <option value="<?= $ph['id'] ?>" <?= (isset($old['phase_id']) && (int)$old['phase_id'] === (int)$ph['id']) ? 'selected' : '' ?>>
                                <?= escape_html($ph['name']) ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                    <?php if (isset($errors['phase_id'])): ?>
                        <p class="text-xs text-rose-600 font-semibold"><?= escape_html($errors['phase_id']) ?></p>
                    <?php endif; ?>
                </div>
                <?php else: ?>
                    <!-- Only one phase — pass it silently -->
                    <input type="hidden" name="phase_id" value="<?= (int)$phases[0]['id'] ?>">
                <?php endif; ?>
            <?php endif; ?>

            <!-- Priority + Status (row) -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                <!-- Priority -->
                <div class="space-y-1.5">
                    <label for="priority" class="text-sm font-bold text-slate-700 block">Importance</label>
                    <select id="priority" name="priority" class="form-select text-sm w-full">
                        <option value="Low"      <?= (!isset($old['priority']) || $old['priority'] === 'Low')    ? '' : '' ?> <?= (isset($old['priority']) && $old['priority'] === 'Low')    ? 'selected' : '' ?>>Low</option>
                        <option value="Normal"   <?= (!isset($old['priority']) || $old['priority'] === 'Normal') ? 'selected' : '' ?>>Normal</option>
                        <option value="High"     <?= (isset($old['priority']) && $old['priority'] === 'High')    ? 'selected' : '' ?>>High</option>
                        <option value="Critical" <?= (isset($old['priority']) && $old['priority'] === 'Critical') ? 'selected' : '' ?>>Urgent</option>
                    </select>
                </div>

                <!-- Status -->
                <div class="space-y-1.5">
                    <label for="status" class="text-sm font-bold text-slate-700 block">Status</label>
                    <select id="status" name="status" class="form-select text-sm w-full">
                        <option value="Not Started" <?= (!isset($old['status']) || $old['status'] === 'Not Started') ? 'selected' : '' ?>>Not Started</option>
                        <option value="In Progress" <?= (isset($old['status']) && $old['status'] === 'In Progress') ? 'selected' : '' ?>>In Progress</option>
                        <option value="Waiting"     <?= (isset($old['status']) && $old['status'] === 'Waiting')     ? 'selected' : '' ?>>Waiting</option>
                        <option value="Completed"   <?= (isset($old['status']) && $old['status'] === 'Completed')   ? 'selected' : '' ?>>Completed</option>
                        <option value="Cancelled"   <?= (isset($old['status']) && $old['status'] === 'Cancelled')   ? 'selected' : '' ?>>Cancelled</option>
                    </select>
                </div>

            </div>

            <!-- Notes (single, merged text area) -->
            <div class="space-y-1.5">
                <label for="description" class="text-sm font-bold text-slate-700 block">Notes <span class="text-slate-400 text-xs font-normal ml-1">Optional</span></label>
                <textarea id="description"
                          name="description"
                          placeholder="Any details, reminders, or instructions…"
                          class="form-textarea text-sm w-full"
                          rows="3"><?= escape_html($old['description'] ?? '') ?></textarea>
            </div>

            <!-- Hidden fields for removed inputs (maintain backend compatibility) -->
            <input type="hidden" name="owner" value="<?= escape_html($old['owner'] ?? '') ?>">
            <input type="hidden" name="estimated_duration" value="">
            <input type="hidden" name="notes" value="<?= escape_html($old['notes'] ?? '') ?>">

            <!-- ── Reminder Section ────────────────────────────────────── -->
            <div class="border-t border-slate-100 pt-4 space-y-3">
                <label class="flex items-center gap-2.5 cursor-pointer group">
                    <input type="checkbox"
                           name="reminder_enabled"
                           value="1"
                           x-model="reminderEnabled"
                           class="w-4 h-4 rounded text-indigo-600 border-slate-300 focus:ring-indigo-500 flex-shrink-0">
                    <span class="text-sm font-semibold text-slate-700 group-hover:text-slate-900 transition-colors">
                        Remind me about this
                    </span>
                </label>

                <div x-show="reminderEnabled" x-transition class="grid grid-cols-1 sm:grid-cols-2 gap-4" style="display: none;">
                    <div class="space-y-1.5">
                        <label for="reminder_date" class="text-sm font-bold text-slate-700 block">Remind me on <span class="text-rose-500">*</span></label>
                        <input type="date"
                               id="reminder_date"
                               name="reminder_date"
                               value="<?= escape_html($old['reminder_date'] ?? '') ?>"
                               class="form-input text-sm w-full"
                               :required="reminderEnabled">
                    </div>
                    <div class="space-y-1.5 sm:col-span-1">
                        <label for="reminder_notes" class="text-sm font-bold text-slate-700 block">Reminder note <span class="text-slate-400 text-xs font-normal ml-1">Optional</span></label>
                        <input type="text"
                               id="reminder_notes"
                               name="reminder_notes"
                               value="<?= escape_html($old['reminder_notes'] ?? '') ?>"
                               placeholder="e.g. Call venue to confirm"
                               class="form-input text-sm w-full">
                    </div>
                </div>
            </div>

            <!-- ── Submit ──────────────────────────────────────────────── -->
            <div class="flex items-center justify-between pt-2 border-t border-slate-100">
                <a href="<?= url('/app/couple/timeline') ?>" class="link-elegant text-xs font-medium">
                    ← Cancel and go back
                </a>
                <button type="submit" class="btn btn-primary btn-md">
                    Add to Schedule
                </button>
            </div>

        </form>
    </div>

</div>
