<?= $this->extend('layouts/mobile') ?>

<?= $this->section('header') ?>
<?= view('layouts/_inner_header', ['title' => $title ?? 'Manage Categories']) ?>
<?= $this->endSection() ?>

<?= $this->section('content') ?>
<?php
$categories = $categories ?? [];
$errors     = $errors ?? [];
$name       = $name ?? '';
$editingId  = (int) ($editingId ?? 0);
$openSheet  = $editingId > 0 || $errors !== [];
?>
<p class="page-lead">Add and manage categories along with the system added ones to manage tasks as per your own use case.</p>

<?php if ($categories === []): ?>
    <p class="muted">You have not added any categories yet.</p>
<?php else: ?>
    <ul class="category-list">
        <?php foreach ($categories as $category): ?>
            <?php
            $id        = (int) $category['id'];
            $taskCount = (int) ($category['task_count'] ?? 0);
            $others    = array_values(array_filter(
                $categories,
                static fn (array $row): bool => (int) $row['id'] !== $id,
            ));
            ?>
            <li class="category-row">
                <span class="category-name"><?= esc($category['name']) ?></span>
                <span class="category-actions">
                    <button type="button" class="icon-btn" data-edit-category data-id="<?= $id ?>" data-name="<?= esc($category['name'], 'attr') ?>" aria-label="Edit <?= esc($category['name']) ?>">
                        <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M4 20h4l10-10-4-4L4 16v4zM14 6l4 4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </button>
                    <button type="button" class="icon-btn" data-delete-category data-id="<?= $id ?>" data-name="<?= esc($category['name'], 'attr') ?>" data-task-count="<?= $taskCount ?>" data-has-others="<?= $others === [] ? '0' : '1' ?>" aria-label="Delete <?= esc($category['name']) ?>">
                        <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M5 7h14M9 7V5h6v2M8 7l1 12h6l1-12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </button>
                </span>

                <?php if ($taskCount === 0): ?>
                    <form method="post" action="<?= site_url('categories/' . $id . '/delete') ?>" class="sr-form">
                        <?= csrf_field() ?>
                    </form>
                <?php else: ?>
                    <form method="post" action="<?= site_url('categories/' . $id . '/move-and-delete') ?>" class="sr-form" id="move-form-<?= $id ?>">
                        <?= csrf_field() ?>
                        <label class="field-label" for="target-<?= $id ?>">Move tasks to</label>
                        <select class="field-input" id="target-<?= $id ?>" name="target_category_id" <?= $others === [] ? 'disabled' : '' ?>>
                            <option value="">- Select -</option>
                            <?php foreach ($others as $other): ?>
                                <option value="<?= (int) $other['id'] ?>"><?= esc($other['name']) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </form>
                    <form method="post" action="<?= site_url('categories/' . $id . '/delete-with-tasks') ?>" class="sr-form" id="purge-form-<?= $id ?>">
                        <?= csrf_field() ?>
                    </form>
                <?php endif; ?>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

<button class="btn-primary" type="button" id="add-category-btn" data-create-url="<?= site_url('categories') ?>">Add New Category</button>

<div class="sheet-backdrop" id="category-sheet-backdrop" <?= $openSheet ? '' : 'hidden' ?>></div>
<div class="sheet" id="category-sheet" <?= $openSheet ? '' : 'hidden' ?> role="dialog" aria-labelledby="category-sheet-title">
    <h2 id="category-sheet-title" class="sheet-title"><?= $editingId > 0 ? 'Edit Category' : 'Add New Category' ?></h2>
    <form class="auth-form" method="post" id="category-form" action="<?= $editingId > 0 ? site_url('categories/' . $editingId) : site_url('categories') ?>" data-create-url="<?= site_url('categories') ?>" data-update-template="<?= site_url('categories/__ID__') ?>">
        <?= csrf_field() ?>
        <label class="field-label" for="category_name">Category Title <span class="req">*</span></label>
        <input class="field-input<?= isset($errors['name']) ? ' is-invalid' : '' ?>" type="text" id="category_name" name="name" maxlength="100" required value="<?= esc($name) ?>">
        <?php if (isset($errors['name'])): ?>
            <p class="field-error" role="alert"><?= esc($errors['name']) ?></p>
        <?php endif; ?>
        <button class="btn-primary" type="submit">Save</button>
        <button class="text-link-btn" type="button" id="category-sheet-cancel">Cancel</button>
    </form>
</div>

<div class="sheet-backdrop" id="delete-sheet-backdrop" hidden></div>
<div class="sheet" id="delete-sheet" hidden role="alertdialog" aria-labelledby="delete-sheet-title">
    <h2 id="delete-sheet-title" class="sheet-title">Alert</h2>
    <p class="page-lead" id="delete-empty-copy">Delete this category?</p>
    <div id="delete-tasks-copy" hidden>
        <p class="page-lead" id="delete-tasks-count">There are tasks associated with this category.</p>
        <label class="choice-row">
            <input type="radio" name="delete_mode" value="move" id="delete-mode-move">
            <span>Move tasks in another category</span>
        </label>
        <select class="field-input" id="delete-target" disabled></select>
        <p class="muted" id="delete-move-hint" hidden>Create another category before you can move these tasks.</p>
        <label class="choice-row">
            <input type="radio" name="delete_mode" value="purge" id="delete-mode-purge">
            <span>Delete all associated tasks</span>
        </label>
        <p class="muted">This permanently removes those tasks, including any recurrence data.</p>
    </div>
    <button class="btn-primary" type="button" id="delete-confirm">Yes</button>
    <button class="text-link-btn" type="button" id="delete-cancel">Go Back</button>
</div>
<?= $this->endSection() ?>
