@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Tarefas'])

    <style>
        .card-body {
            font-size: 14px;
        }

        .avatar, .ni {
            font-size: 30px;
        }

        .project-card {
            margin-bottom: 2rem; /* Espaço maior entre projetos */
        }

        .board-card {
            margin-bottom: 1rem;
        }

        .font-small {
            font-size: 12px;
        }

        .font-smaller {
            font-size: 10px;
        }
    </style>

    <div class="container-fluid py-4">
        @foreach ($completedTasksByProject as $projectName => $completedTasksByBoard)
            <div class="row project-card">
                <div class="col-12">
                    <div class="card mb-4">
                        <div class="card-header" s>
                            <h2>{{ $projectName }}</h2>
                        </div>
                    </div>
                </div>
            </div>
            @php
                $numBoards = count($completedTasksByBoard);
                if ($numBoards == 3) {
                    $colClass = 'col-lg-4';
                    $fontClass = '';
                } elseif ($numBoards == 4) {
                    $colClass = 'col-lg-3';
                    $fontClass = 'font-small';
                } elseif ($numBoards == 5) {
                    $colClass = 'col-lg-2 col-md-3';
                    $fontClass = 'font-smaller';
                } else {
                    $colClass = 'col-lg-' . intval(12 / $numBoards);
                    $fontClass = '';
                }
            @endphp
            <div class="row">
                @foreach ($completedTasksByBoard as $boardName => $tasks)
                    <div class="{{ $colClass }} board-card">
                        <div class="card {{ $fontClass }}">
                            <div class="card-header" style="padding-bottom: 0px">
                                <h3>{{ $boardName }}</h3>
                            </div>
                            <div class="card-body" style="padding-top: 0px">
                                @foreach ($tasks as $task)
                                    <div class="mb-3" style="padding: 10px">
                                        <h4>{{ $task->name }}</h4> <!-- Inclui o nome da task -->
                                        <div class="d-flex align-items-center mb-2">
                                            <div>
                                                @if ($task->created_by && $task->created_by->photo && $task->created_by->photo->image_128x128)
                                                    <img src="{{ $task->created_by->photo->image_128x128 }}" alt="Creator's photo" class="avatar rounded-circle me-2" width="50" height="50">
                                                @else
                                                    <i class="ni ni-circle-08 avatar rounded-circle me-2 text-primary" style="font-size: 50px;"></i>
                                                @endif
                                            </div>
                                            <div class="ms-2">
                                                <p class="text-xs font-weight-bold mb-0">Criado por:</p>
                                                <h6 class="text-sm mb-0">{{ $task->created_by ? $task->created_by->name : 'N/A' }}</h6>
                                            </div>
                                            <div class="ms-4">
                                                <p class="text-xs font-weight-bold mb-0">Criado em:</p>
                                                <h6 class="text-sm mb-0">{{ \App\Helpers\DateTimeHelper::formatDate($task->created_at) }}</h6>
                                            </div>
                                        </div>
                                        @if ($task->completed)
                                        <div class="d-flex align-items-center mb-2">
                                            <div>
                                                @if ($task->assignee && $task->assignee->photo && $task->assignee->photo->image_128x128)
                                                    <img src="{{ $task->assignee->photo->image_128x128 }}" alt="Assignee's photo" class="avatar rounded-circle me-2" width="50" height="50">
                                                @else
                                                    <i class="ni ni-circle-08 avatar rounded-circle me-2 text-primary" style="font-size: 50px;"></i>
                                                @endif
                                            </div>
                                            <div class="ms-2">
                                                <p class="text-xs font-weight-bold mb-0">Concluído por:</p>
                                                <h6 class="text-sm mb-0">{{ $task->assignee ? $task->assignee->name : 'N/A' }}</h6>
                                            </div>
                                            <div class="ms-4">
                                                <p class="text-xs font-weight-bold mb-0">Concluído em:</p>
                                                <h6 class="text-sm mb-0">{{ $task->completed_at ? \App\Helpers\DateTimeHelper::formatDate($task->completed_at) : 'N/A' }}</h6>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <i class="ni ni-watch-time me-2"></i>
                                            <div>
                                                Conclusão em {{ \App\Helpers\DateTimeHelper::getTimeUntilCompletion($task->created_at, $task->completed_at) }}
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                    <hr> <!-- Adiciona uma linha separadora entre as tasks -->
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endforeach
        @include('layouts.footers.auth.footer')
    </div>
@endsection