@extends('ferramentas.ferramentas')
@section('content')

<div class="bg-gray-50 min-h-screen p-6">
  <div class="max-w-8xl mx-auto bg-gray-100 p-6 rounded-2xl w-full h-[80vh] overflow-y-auto shadow-lg">
    <h1 class="text-4xl font-extrabold text-gray-800 mb-6">Lista de Tarefas</h1>

    <div class="flex flex-col sm:flex-row gap-6">
      <!-- Lista de tarefas -->
      <div class="flex-1 bg-white rounded-2xl shadow-md p-6">
        <div class="flex gap-2 mb-4">
          <input
            id="newTaskTitle"
            type="text"
            placeholder="Nova tarefa..."
            class="flex-1 border border-gray-300 rounded-2xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-orange-400 transition shadow-sm"
          />
          <button
            type="button"
            id="btnOpenModal"
            class="flex items-center gap-2 bg-orange-500 text-white px-5 py-3 rounded-2xl hover:bg-orange-600 transition shadow-md"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Adicionar
          </button>
        </div>

        <ul id="todolist" class="flex flex-col gap-3">
          <!-- Tarefas adicionadas dinamicamente -->
        </ul>
      </div>

      <!-- Painel extra -->
      <div class="flex-1 bg-white rounded-2xl shadow-md p-6 flex flex-col gap-4">
        <h2 class="text-2xl font-semibold text-gray-700 mb-2">Filtros & Estatísticas</h2>
        <div class="flex flex-col gap-3">
          <button class="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-xl hover:bg-gray-200 transition">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h3m10 0h3a1 1 0 011 1v16a1 1 0 01-1 1h-3M7 4v16m10-16v16"/>
            </svg>
            Filtrar por prioridade
          </button>
          <button class="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-xl hover:bg-gray-200 transition">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            Tarefas concluídas
          </button>
          <button class="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-xl hover:bg-gray-200 transition">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3M3 11h18M5 11v8a2 2 0 002 2h10a2 2 0 002-2v-8"/>
            </svg>
            Tarefas atrasadas
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div id="taskModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
  <div class="bg-white rounded-3xl shadow-2xl max-w-2xl w-full p-6 relative animate-fadeIn">
    <!-- Header -->
    <div class="flex justify-between items-center mb-5">
      <h3 class="text-3xl font-bold text-gray-800 flex items-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-orange-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
        </svg>
        Nova Tarefa
      </h3>
      <button id="closeModal" class="text-gray-500 hover:text-gray-700 text-3xl">&times;</button>
    </div>

    <!-- Formulário -->
    <form id="taskForm" class="flex flex-col gap-4">
      <input type="text" id="taskTitle" placeholder="Título" class="border rounded-2xl px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none transition shadow-sm">
      <textarea id="taskDescription" placeholder="Descrição" class="border rounded-2xl px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none resize-none shadow-sm transition"></textarea>

      <div class="grid grid-cols-2 gap-4">
        <select id="taskPriority" class="border rounded-2xl px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none shadow-sm transition">
          <option value="">Prioridade</option>
          <option value="Baixa">Baixa</option>
          <option value="Média">Média</option>
          <option value="Alta">Alta</option>
        </select>

      </div>

      <input type="text" id="taskCollaborators" placeholder="Colaboradores (ex: Alice, Bob)" class="border rounded-2xl px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none shadow-sm transition">

      <div class="flex items-center gap-2">
        <input type="checkbox" id="taskDone" class="accent-orange-500">
        <label for="taskDone" class="text-gray-700 font-medium">Concluída</label>
      </div>

      <input type="text" id="taskTags" placeholder="Tags (ex: Frontend, Urgente)" class="border rounded-2xl px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none shadow-sm transition">

      <div class="flex justify-end gap-3 mt-4">
        <button type="button" id="btnCancel" class="px-5 py-2 rounded-2xl bg-gray-200 hover:bg-gray-300 transition shadow-sm">Cancelar</button>
        <button type="submit" class="px-5 py-2 rounded-2xl bg-orange-500 text-white hover:bg-orange-600 transition shadow-md flex items-center gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
          </svg>
          Salvar
        </button>
      </div>
    </form>
  </div>
</div>

@vite(['resources/js/ferramentas/todolist.js'])
@endsection