@extends('layouts.app', ['title' => term('nav_tasks','Tareas')])

@section('header_actions')
<button class="btn btn-primary" type="button" data-modal-open="modal-add-task"><i class="fa-solid fa-plus"></i>Nueva tarea</button>
@endsection

@section('content')
@php
    $pending = $tasks->whereNull('completed_at');
    $done = $tasks->whereNotNull('completed_at');
@endphp
<div class="grid g4" style="margin-bottom:16px">
    <div class="metric"><i class="fa-solid fa-list-check"></i><div class="metric-val">{{ $pending->count() }}</div><div class="metric-label">Pendientes</div></div>
    <div class="metric"><i class="fa-solid fa-fire"></i><div class="metric-val text-danger">{{ $pending->where('priority','Alta')->count() }}</div><div class="metric-label">Alta prioridad</div></div>
    <div class="metric"><i class="fa-solid fa-circle-check"></i><div class="metric-val text-success">{{ $done->count() }}</div><div class="metric-label">Completadas</div></div>
    <div class="metric"><i class="fa-solid fa-user-tie"></i><div class="metric-val">{{ $advisors->count() }}</div><div class="metric-label">Asesores</div></div>
</div>

<div class="grid g3">
@foreach(['Alta' => 'red', 'Media' => 'amber', 'Baja' => 'blue'] as $priority => $color)
    <div class="card">
        <div class="card-head"><div class="card-title">{{ $priority }} <span class="badge {{ $color }}">{{ $pending->where('priority', $priority)->count() }}</span></div></div>
        <div class="card-body stack">
        @forelse($pending->where('priority', $priority) as $task)
            <div class="deal">
                <div class="row between">
                    <strong>{{ $task->title }}</strong>
                    <span class="badge {{ $color }}">{{ $task->priority }}</span>
                </div>
                <div class="sub">{{ $task->advisor?->name ?? 'Sin asignar' }} · {{ optional($task->due_at)->format('d/m/Y H:i') }}</div>
                @if($task->notes)<div class="sub" style="margin-top:6px">{{ \Illuminate\Support\Str::limit($task->notes,80) }}</div>@endif
                <div class="row between" style="margin-top:10px;align-items:center;gap:6px">
                    <form method="post" action="{{ route('tasks.toggle', $task) }}" style="flex:1">@csrf @method('PATCH')<button class="btn btn-success btn-sm" type="submit" style="width:100%"><i class="fa-solid fa-check"></i>Completar</button></form>
                    <div class="kebab">
                        <button class="kebab-trigger" type="button" data-kebab data-tip="Más"><i class="fa-solid fa-ellipsis-vertical"></i></button>
                        <div class="kebab-menu">
                            <button type="button" data-modal-open="modal-edit-task-{{ $task->id }}"><i class="fa-solid fa-pen"></i> Editar tarea</button>
                            <hr>
                            <form method="post" action="{{ route('tasks.destroy', $task) }}" onsubmit="return confirm('¿Eliminar tarea?')">@csrf @method('DELETE')<button type="submit" class="danger"><i class="fa-solid fa-trash"></i> Eliminar</button></form>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="sub" style="text-align:center;padding:20px">Sin tareas.</div>
        @endforelse
        </div>
    </div>
@endforeach
</div>

<div class="card" style="margin-top:16px">
    <div class="card-head"><div><div class="card-title">Completadas</div><div class="sub">{{ $done->count() }} tareas finalizadas</div></div></div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>Tarea</th><th>Asesor</th><th>Completada</th><th></th></tr></thead>
            <tbody>
            @forelse($done as $task)
                <tr>
                    <td>{{ $task->title }}</td>
                    <td>{{ $task->advisor?->name ?? 'Sin asignar' }}</td>
                    <td>{{ optional($task->completed_at)->format('d/m/Y H:i') }}</td>
                    <td><form method="post" action="{{ route('tasks.toggle', $task) }}">@csrf @method('PATCH')<button class="btn btn-sm" type="submit">Reabrir</button></form></td>
                </tr>
            @empty
                <tr><td colspan="4" style="text-align:center;color:var(--muted);padding:18px">No hay tareas completadas aun.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection

@section('modals')
<div class="modal-backdrop" id="modal-add-task">
    <div class="modal">
        <div class="modal-head"><h3><i class="fa-solid fa-list-check text-gold"></i> Nueva tarea</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('tasks.store') }}">
            @csrf
            <div class="modal-body">
                <div class="form-grid two">
                    <label>Titulo *<input name="title" required></label>
                    <label>Prioridad *<select name="priority"><option>Alta</option><option selected>Media</option><option>Baja</option></select></label>
                    <label>Vencimiento<input name="due_at" type="datetime-local"></label>
                    <label>Asignado a<select name="assigned_to"><option value="">Sin asignar</option>@foreach($advisors as $advisor)<option value="{{ $advisor->id }}">{{ $advisor->name }}</option>@endforeach</select></label>
                    <label>Relacionado con *<select name="related_type"><option>General</option><option>Cliente</option><option>Propiedad</option><option>Proyecto</option><option>Contrato</option><option>Comision</option></select></label>
                    <label>ID relacionado<input name="related_id" type="number" min="1"></label>
                    <label style="grid-column:1/-1">Notas<textarea name="notes" rows="3"></textarea></label>
                </div>
            </div>
            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i>Crear tarea</button>
            </div>
        </form>
    </div>
</div>

@foreach($tasks as $task)
<div class="modal-backdrop" id="modal-edit-task-{{ $task->id }}">
    <div class="modal">
        <div class="modal-head"><h3><i class="fa-solid fa-pen text-gold"></i> Editar tarea</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('tasks.update', $task) }}">
            @csrf @method('PUT')
            <div class="modal-body">
                <div class="form-grid two">
                    <label>Titulo *<input name="title" value="{{ $task->title }}" required></label>
                    <label>Prioridad *<select name="priority">@foreach(['Alta','Media','Baja'] as $p)<option @selected($task->priority === $p)>{{ $p }}</option>@endforeach</select></label>
                    <label>Vencimiento<input name="due_at" type="datetime-local" value="{{ optional($task->due_at)->format('Y-m-d\TH:i') }}"></label>
                    <label>Asignado a<select name="assigned_to"><option value="">Sin asignar</option>@foreach($advisors as $advisor)<option value="{{ $advisor->id }}" @selected($task->assigned_to === $advisor->id)>{{ $advisor->name }}</option>@endforeach</select></label>
                    <label>Relacionado con *<select name="related_type">@foreach(['General','Cliente','Propiedad','Proyecto','Contrato','Comision'] as $t)<option @selected($task->related_type === $t)>{{ $t }}</option>@endforeach</select></label>
                    <label>ID relacionado<input name="related_id" type="number" min="1" value="{{ $task->related_id }}"></label>
                    <label style="grid-column:1/-1">Notas<textarea name="notes" rows="3">{{ $task->notes }}</textarea></label>
                </div>
            </div>
            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i>Guardar</button>
            </div>
        </form>
    </div>
</div>
@endforeach
@endsection