@extends('layouts.app')

@section('content')
<div class="mb-8 max-w-2xl mx-auto">
    <div class="flex items-center mb-6">
        <a href="{{ route('templates.index') }}" class="mr-4 text-gray-500 hover:text-indigo-600">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
        </a>
        <h1 class="text-3xl font-extrabold text-gray-900 tracking-tight">Create Task Template</h1>
    </div>

    <div class="bg-white shadow-sm border border-gray-200 rounded-xl overflow-hidden">
        <form action="{{ route('templates.store') }}" method="POST" class="p-8">
            @csrf
            
            <div class="mb-6">
                <label for="title" class="block text-sm font-bold text-gray-700 mb-2">Task Name <span class="text-red-500">*</span></label>
                <input type="text" name="title" id="title" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-3 border" placeholder="e.g. Morning Jog, Code Review">
                @error('title')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
            </div>

            <div class="mb-6">
                <label for="description" class="block text-sm font-bold text-gray-700 mb-2">Description</label>
                <textarea name="description" id="description" rows="3" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-3 border" placeholder="Optional details..."></textarea>
                @error('description')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
            </div>

            <div class="mb-8">
                <label class="block text-sm font-bold text-gray-700 mb-3">Repeat On Days <span class="text-red-500">*</span></label>
                <div class="flex justify-between md:gap-4 flex-wrap">
                    @php $days = [1=>'Mon', 2=>'Tue', 3=>'Wed', 4=>'Thu', 5=>'Fri', 6=>'Sat', 7=>'Sun']; @endphp
                    @foreach($days as $num => $name)
                    <div class="flex flex-col items-center">
                        <label for="day_{{ $num }}" class="mb-2 text-xs font-semibold text-gray-600 uppercase">{{ $name }}</label>
                        <input type="checkbox" name="days[]" value="{{ $num }}" id="day_{{ $num }}" class="w-5 h-5 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
                    </div>
                    @endforeach
                </div>
                @error('days')<p class="mt-2 text-sm text-red-600">{{ $message }}</p>@enderror
            </div>

            <div class="flex justify-end pt-4 border-t border-gray-100">
                <button type="submit" class="px-6 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 font-bold shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    Save Routine
                </button>
            </div>
        </form>
    </div>
</div>
@endsection