<?php $this->layout('layouts/main', ['title' => $template ? 'Edit Template' : 'Create Template']) ?>

<div class="container mx-auto px-4 py-8">
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-800"><?= $template ? 'Edit Template' : 'Create Template' ?></h1>
    </div>

    <form action="<?= APP_URL ?>/reports/templates/<?= $template ? $template['id'] . '/edit' : 'create' ?>" method="POST" class="bg-white shadow rounded-lg p-6">
        <input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?>">
        
        <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2">Template Name</label>
            <input type="text" name="name" value="<?= htmlspecialchars($template['name'] ?? '') ?>" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
        </div>

        <div class="mb-6">
            <label class="block text-gray-700 text-sm font-bold mb-2">Description</label>
            <textarea name="description" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" rows="3"><?= htmlspecialchars($template['description'] ?? '') ?></textarea>
        </div>

        <!-- Sections Builder -->
        <div class="mb-8">
            <h2 class="text-xl font-semibold mb-4 border-b pb-2">Sections</h2>
            <div id="sections-container">
                <?php foreach ($sections as $index => $sec): ?>
                <div class="flex items-center gap-4 mb-3 bg-gray-50 p-3 rounded border drag-handle">
                    <span class="cursor-move text-gray-400">â˜°</span>
                    <input type="hidden" name="sections[<?= $index ?>][id]" value="<?= htmlspecialchars($sec['id'] ?? '') ?>">
                    <input type="text" name="sections[<?= $index ?>][title]" value="<?= htmlspecialchars($sec['title']) ?>" placeholder="Section Title" class="flex-1 border rounded py-1 px-2" required>
                    <select name="sections[<?= $index ?>][type]" class="border rounded py-1 px-2">
                        <option value="text" <?= $sec['type'] == 'text' ? 'selected' : '' ?>>Text</option>
                        <option value="photo" <?= $sec['type'] == 'photo' ? 'selected' : '' ?>>Photo</option>
                        <option value="file" <?= $sec['type'] == 'file' ? 'selected' : '' ?>>File</option>
                    </select>
                    <label class="flex items-center gap-1">
                        <input type="checkbox" name="sections[<?= $index ?>][is_required]" value="1" <?= $sec['is_required'] ? 'checked' : '' ?>> Req
                    </label>
                    <button type="button" class="text-red-500 font-bold" onclick="this.parentElement.remove()">X</button>
                </div>
                <?php endforeach; ?>
            </div>
            <button type="button" onclick="addSection()" class="mt-2 text-blue-600 border border-blue-600 px-3 py-1 rounded text-sm hover:bg-blue-50">+ Add Section</button>
        </div>

        <!-- Workload Builder -->
        <div class="mb-8">
            <h2 class="text-xl font-semibold mb-4 border-b pb-2">Workload Items</h2>
            <div id="workload-container" class="space-y-3">
                <?php foreach ($workloadItems as $index => $item): ?>
                <div class="flex items-center gap-4 bg-gray-50 p-3 rounded border">
                    <input type="hidden" name="workload_items[<?= $index ?>][id]" value="<?= htmlspecialchars($item['id'] ?? '') ?>">
                    <input type="text" name="workload_items[<?= $index ?>][activity_name]" value="<?= htmlspecialchars($item['activity_name']) ?>" placeholder="Activity Name" class="flex-1 border rounded py-1 px-2" required>
                    <input type="text" name="workload_items[<?= $index ?>][unit]" value="<?= htmlspecialchars($item['unit']) ?>" placeholder="Unit (e.g., m2)" class="w-24 border rounded py-1 px-2" required>
                    <input type="text" name="workload_items[<?= $index ?>][project_scope]" value="<?= htmlspecialchars($item['project_scope'] ?? '') ?>" placeholder="Project Scope" class="flex-1 border rounded py-1 px-2">
                    <input type="text" name="workload_items[<?= $index ?>][description]" value="<?= htmlspecialchars($item['description'] ?? '') ?>" placeholder="Description" class="flex-1 border rounded py-1 px-2">
                    <button type="button" class="text-red-500 font-bold" onclick="this.parentElement.remove()">X</button>
                </div>
                <?php endforeach; ?>
            </div>
            <button type="button" onclick="addWorkload()" class="mt-2 text-blue-600 border border-blue-600 px-3 py-1 rounded text-sm hover:bg-blue-50">+ Add Workload Item</button>
        </div>

        <div class="flex justify-end">
            <button type="submit" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded shadow">Save Template</button>
        </div>
    </form>
</div>

<script>
let secIdx = <?= count($sections) ?>;
function addSection() {
    const html = `
    <div class="flex items-center gap-4 mb-3 bg-gray-50 p-3 rounded border drag-handle">
        <span class="cursor-move text-gray-400">â˜°</span>
        <input type="text" name="sections[${secIdx}][title]" placeholder="Section Title" class="flex-1 border rounded py-1 px-2" required>
        <select name="sections[${secIdx}][type]" class="border rounded py-1 px-2">
            <option value="text">Text</option>
            <option value="photo">Photo</option>
            <option value="file">File</option>
        </select>
        <label class="flex items-center gap-1">
            <input type="checkbox" name="sections[${secIdx}][is_required]" value="1"> Req
        </label>
        <button type="button" class="text-red-500 font-bold" onclick="this.parentElement.remove()">X</button>
    </div>`;
    document.getElementById('sections-container').insertAdjacentHTML('beforeend', html);
    secIdx++;
}

let wlIdx = <?= count($workloadItems) ?>;
function addWorkload() {
    const html = `
    <div class="flex items-center gap-4 bg-gray-50 p-3 rounded border">
        <input type="text" name="workload_items[${wlIdx}][activity_name]" placeholder="Activity Name" class="flex-1 border rounded py-1 px-2" required>
        <input type="text" name="workload_items[${wlIdx}][unit]" placeholder="Unit" class="w-24 border rounded py-1 px-2" required>
        <input type="text" name="workload_items[${wlIdx}][project_scope]" placeholder="Project Scope" class="flex-1 border rounded py-1 px-2">
        <input type="text" name="workload_items[${wlIdx}][description]" placeholder="Description" class="flex-1 border rounded py-1 px-2">
        <button type="button" class="text-red-500 font-bold" onclick="this.parentElement.remove()">X</button>
    </div>`;
    document.getElementById('workload-container').insertAdjacentHTML('beforeend', html);
    wlIdx++;
}
</script>

