{{-- resources/views/todo/create.blade.php --}}
@extends('layouts.app')

@section('title', 'Create Todo')

@section('content')
<section class="content-header">
    <div class="tw-flex tw-justify-between tw-items-center tw-mb-4">
        <h1 class="tw-text-2xl md:tw-text-3xl tw-font-bold tw-text-gray-800">
            Create New Todo
        </h1>
        <a href="{{ route('todotest.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Back to List
        </a>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Todo Details</h3>
            </div>
            <form action="{{ route('todotest.store') }}" method="POST" id="todoForm">
                @csrf
                <div class="card-body">
                    <div class="form-group">
                        <label for="text">Todo Text <span class="text-danger">*</span></label>
                        <input type="text" 
                               class="form-control @error('text') is-invalid @enderror" 
                               id="text" 
                               name="text" 
                               placeholder="Enter todo description"
                               value="{{ old('text') }}"
                               required>
                        @error('text')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>
                    
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" 
                                   class="custom-control-input" 
                                   id="completed" 
                                   name="completed" 
                                   value="1"
                                   {{ old('completed') ? 'checked' : '' }}>
                            <label class="custom-control-label" for="completed">
                                Mark as completed
                            </label>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>Preview</label>
                        <div class="alert alert-info" id="preview">
                            Your todo will appear here...
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Create Todo
                    </button>
                    <button type="reset" class="btn btn-secondary">
                        <i class="fas fa-undo"></i> Reset
                    </button>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection

@section('javascripts')
<script>
$(document).ready(function() {
    // Live preview
    $('#text').on('keyup', function() {
        const text = $(this).val();
        if (text.trim() === '') {
            $('#preview').html('Your todo will appear here...');
        } else {
            $('#preview').html(`
                <strong>Todo:</strong> ${text}
                <br>
                <small class="text-muted">Status: ${$('#completed').is(':checked') ? 'Completed' : 'Pending'}</small>
            `);
        }
    });
    
    // Update preview when checkbox changes
    $('#completed').change(function() {
        $('#text').trigger('keyup');
    });
    
    // Form validation
    $('#todoForm').on('submit', function(e) {
        const text = $('#text').val().trim();
        if (text === '') {
            e.preventDefault();
            showNotification('Please enter a todo description', 'error');
            $('#text').focus();
            return false;
        }
        
        if (text.length > 255) {
            e.preventDefault();
            showNotification('Todo text cannot exceed 255 characters', 'error');
            return false;
        }
    });
    
    function showNotification(message, type) {
        const alertClass = type === 'error' ? 'danger' : 'info';
        const icon = type === 'error' ? 'exclamation-circle' : 'info-circle';
        
        const notification = $(`
            <div class="alert alert-${alertClass} alert-dismissible fade show" 
                 style="position: fixed; top: 20px; right: 20px; z-index: 9999; min-width: 300px;">
                <i class="fas fa-${icon} mr-2"></i>
                ${message}
                <button type="button" class="close" data-dismiss="alert">
                    <span>&times;</span>
                </button>
            </div>
        `);
        
        $('body').append(notification);
        
        setTimeout(() => {
            notification.fadeOut(300, function() {
                $(this).remove();
            });
        }, 3000);
    }
});
</script>
@endsection