{% extends "shared/base_dashboard.html" %}
{% block title %}Concluir Tarefa - Chaplin{% endblock %}

{% block content %}
<div class="p-8 max-w-2xl mx-auto">
    <div class="mb-8">
        <a href="{% url 'tasks:detail' task.pk %}" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 font-medium mb-4 inline-block">&larr; Voltar para Detalhes</a>
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Concluir Tarefa</h1>
        <p class="text-gray-600 dark:text-gray-300 mt-2">Adicione informações e evidências (foto) para fechar a tarefa: <strong class="dark:text-white">{{ task.title }}</strong></p>
    </div>

    

    <div class="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-100 dark:border-gray-700 p-6">
        <form method="POST" enctype="multipart/form-data" class="space-y-6">
            {% csrf_token %}

            <div>
                <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Relato / Descrição do Serviço Realizado <span class="text-red-500">*</span></label>
                <textarea 
                    name="description" 
                    id="description" 
                    rows="4" 
                    required
                    class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent" 
                    placeholder="Descreva o que foi feito para resolver o problema..."></textarea>
            </div>
            



            <div>
                <label for="photo" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Adicionar Foto (Evidência)</label>
                <input 
                    type="file" 
                    name="photo" 
                    id="photo" 
                    accept="image/*"
                    class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent bg-gray-50">
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">Uma foto ajuda a certificar que o serviço foi concluído adequadamente.</p>
            </div>

            <div class="pt-4 border-t border-gray-100 dark:border-gray-700 flex gap-4">
                <a href="{% url 'tasks:detail' task.pk %}" class="w-full text-center bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 font-semibold py-3 px-4 rounded-lg transition duration-200">
                    Cancelar
                </a>
                <button type="submit" class="w-full bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition shadow-md flex justify-center items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                    Concluir Tarefa
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}