@extends('layouts.app')

@section('title', 'Listado de Tareas')

@section('content')
<style>
    .header-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
    }
    .tasks-grid {
        display: grid;
        gap: 20px;
    }
    .task-card {
        background: white;
        border: 2px solid #e0e0e0;
        border-radius: 10px;
        padding: 20px;
        transition: all 0.3s;
        position: relative;
    }
    .task-card:hover {
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        transform: translateY(-2px);
    }
    .task-card.completed {
        background: #f8f9fa;
        border-color: #28a745;
    }
    .task-header {
        display: flex;
        justify-content: space-between;
        align-items: start;
        margin-bottom: 15px;
    }
    .task-title {
        font-size: 1.3em;
        font-weight: 600;
        color: #333;
        flex: 1;
    }
    .task-card.completed .task-title {
        text-decoration: line-through;
        color: #6c757d;
    }
    .task-description {
        color: #666;
        margin-bottom: 15px;
        line-height: 1.6;
    }
    .task-meta {
        font-size: 0.85em;
        color: #999;
        margin-bottom: 15px;
    }
    .task-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    .task-actions .btn {
        padding: 8px 16px;
        font-size: 14px;
    }
    .status-badge {
        display: inline-block;
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 0.85em;
        font-weight: 600;
        margin-left: 10px;
    }
    .status-badge.pending {
        background: #fff3cd;
        color: #856404;
    }
    .status-badge.completed {
        background: #d4edda;
        color: #155724;
    }
    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #999;
    }
    .empty-state-icon {
        font-size: 80px;
        margin-bottom: 20px;
    }
</style>

<div class="header-actions">
    <h2>Mis Tareas</h2>
    <a href="{{ route('tasks.create') }}" class="btn btn-primary">
        ➕ Nueva Tarea
    </a>
</div>

@if($tasks->isEmpty())
    <div class="empty-state">
        <div class="empty-state-icon">📭</div>
        <h3>No hay tareas</h3>
        <p>¡Comienza creando tu primera tarea!</p>
    </div>
@else
    <div class="tasks-grid">
        @foreach($tasks as $task)
            <div class="task-card {{ $task->completada ? 'completed' : '' }}">
                <div class="task-header">
                    <div class="task-title">
                        {{ $task->titulo }}
                        <span class="status-badge {{ $task->completada ? 'completed' : 'pending' }}">
                            {{ $task->completada ? '✓ Completada' : '⏳ Pendiente' }}
                        </span>
                    </div>
                </div>

                @if($task->descripcion)
                    <div class="task-description">
                        {{ $task->descripcion }}
                    </div>
                @endif

                <div class="task-meta">
                    📅 Creada: {{ $task->created_at->format('d/m/Y H:i') }}
                </div>

                <div class="task-actions">
                    {{-- Botón para marcar como completada/pendiente --}}
                    <form action="{{ route('tasks.toggle', $task->id) }}" method="POST" style="display: inline;">
                        @csrf
                        @method('PATCH')
                        <button type="submit" class="btn {{ $task->completada ? 'btn-warning' : 'btn-success' }}">
                            {{ $task->completada ? '↩️ Marcar pendiente' : '✓ Completar' }}
                        </button>
                    </form>

                    {{-- Botón de editar --}}
                    <a href="{{ route('tasks.edit', $task->id) }}" class="btn btn-secondary">
                        ✏️ Editar
                    </a>

                    {{-- Botón de eliminar --}}
                    <form action="{{ route('tasks.destroy', $task->id) }}" method="POST" style="display: inline;"
                          onsubmit="return confirm('¿Estás seguro de eliminar esta tarea?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">
                            🗑️ Eliminar
                        </button>
                    </form>
                </div>
            </div>
        @endforeach
    </div>
@endif
@endsection