@extends('layouts.app')

@section('title', 'New Template - ' . config('app.name'))

@section('header-left')
    <h1 class="text-lg font-semibold text-gray-900">New task template</h1>
@endsection

@section('content')
    <div class="max-w-2xl">
        <form method="post" action="{{ route('settings.templates.store') }}" class="space-y-6 rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
            @csrf
            <div>
                <label for="name" class="block text-sm font-medium text-gray-700">Template name</label>
                <input id="name" type="text" name="name" value="{{ old('name') }}" required maxlength="255" class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="e.g. Sprint Planning" />
                @error('name')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
            <div>
                <label for="description" class="block text-sm font-medium text-gray-700">Template description (optional)</label>
                <input id="description" type="text" name="description" value="{{ old('description') }}" maxlength="500" class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="When to use this template" />
            </div>

            <div class="border-t border-gray-200 pt-6">
                <h2 class="text-base font-semibold text-gray-900">Base task</h2>
                <div class="mt-4 space-y-4">
                    <div>
                        <label for="title" class="block text-sm font-medium text-gray-700">Task title</label>
                        <input id="title" type="text" name="title" value="{{ old('title') }}" required maxlength="500" class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                        @error('title')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="description_task" class="block text-sm font-medium text-gray-700">Task description (optional)</label>
                        <textarea id="description_task" name="description_task" rows="3" maxlength="10000" class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('description_task') }}</textarea>
                    </div>
                    <div>
                        <label for="priority" class="block text-sm font-medium text-gray-700">Priority</label>
                        <select id="priority" name="priority" class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach (['low' => 'Low', 'medium' => 'Medium', 'high' => 'High', 'urgent' => 'Urgent'] as $v => $l)
                                <option value="{{ $v }}" {{ old('priority', 'medium') === $v ? 'selected' : '' }}>{{ $l }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label for="tags" class="block text-sm font-medium text-gray-700">Tags (comma-separated)</label>
                        <input id="tags" type="text" name="tags" value="{{ old('tags') }}" maxlength="500" class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="sprint, planning" />
                    </div>
                </div>
            </div>

            <div class="border-t border-gray-200 pt-6" x-data="templateSubtasks({{ Js::from(old('subtasks', [['title' => '', 'priority' => 'medium', 'relative_due_days' => 1]])) }})">
                <div class="flex items-center justify-between">
                    <h2 class="text-base font-semibold text-gray-900">Subtasks</h2>
                    <button type="button" @click="addRow()" class="text-sm font-medium text-indigo-600 hover:text-indigo-900">+ Add subtask</button>
                </div>
                <p class="mt-1 text-xs text-gray-500">Due date when applying = start date + relative days.</p>
                <div class="mt-4 space-y-4">
                    <template x-for="(sub, index) in subtasks" :key="index">
                        <div class="flex flex-wrap items-end gap-3 rounded border border-gray-200 bg-gray-50 p-3">
                            <div class="min-w-0 flex-1">
                                <label :for="'subtask_title_'+index" class="block text-xs font-medium text-gray-600">Title</label>
                                <input type="text" :id="'subtask_title_'+index" :name="'subtasks['+index+'][title]'" x-model="sub.title" maxlength="500" required class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="Subtask title" />
                            </div>
                            <div class="w-28">
                                <label :for="'subtask_priority_'+index" class="block text-xs font-medium text-gray-600">Priority</label>
                                <select :id="'subtask_priority_'+index" :name="'subtasks['+index+'][priority]'" x-model="sub.priority" class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                    <option value="low">Low</option>
                                    <option value="medium">Medium</option>
                                    <option value="high">High</option>
                                    <option value="urgent">Urgent</option>
                                </select>
                            </div>
                            <div class="w-24">
                                <label :for="'subtask_days_'+index" class="block text-xs font-medium text-gray-600">Days</label>
                                <input type="number" :id="'subtask_days_'+index" :name="'subtasks['+index+'][relative_due_days]'" x-model.number="sub.relative_due_days" min="0" class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                            </div>
                            <button type="button" @click="removeRow(index)" class="rounded p-2 text-gray-400 hover:bg-gray-200 hover:text-gray-700" title="Remove subtask" aria-label="Remove">
                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                        </div>
                    </template>
                </div>
                @error('subtasks.*.title')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div class="flex items-center justify-between border-t border-gray-200 pt-6">
                <label class="flex items-center gap-2">
                    <input type="hidden" name="is_shared" value="0" />
                    <input type="checkbox" name="is_shared" value="1" {{ old('is_shared') ? 'checked' : '' }} class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                    <span class="text-sm text-gray-700">Share with workspace</span>
                </label>
                <div class="flex gap-2">
                    <a href="{{ route('settings.templates.index') }}" class="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</a>
                    <button type="submit" class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">Create template</button>
                </div>
            </div>
        </form>
    </div>

    @push('scripts')
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('templateSubtasks', (initial) => ({
                subtasks: Array.isArray(initial) && initial.length ? initial.map(s => ({
                    title: s.title ?? '',
                    priority: s.priority ?? 'medium',
                    relative_due_days: typeof s.relative_due_days !== 'undefined' ? Number(s.relative_due_days) : 1
                })) : [{ title: '', priority: 'medium', relative_due_days: 1 }],
                addRow() {
                    const last = this.subtasks[this.subtasks.length - 1];
                    const nextDay = last ? (last.relative_due_days + 1) : 1;
                    this.subtasks.push({ title: '', priority: 'medium', relative_due_days: nextDay });
                },
                removeRow(i) {
                    if (this.subtasks.length <= 1) return;
                    this.subtasks.splice(i, 1);
                }
            }));
        });
    </script>
    @endpush
@endsection