@extends('admin.layout')

@section('content')

<style>
    .table tbody tr td:last-child {
        text-align: center !important;
    }
</style>

<h3>Task Details</h3>

<!-- Start - Task Table -->
<div class="col-xl-12 mt-4">

    <div class="card-header border-0 d-flex justify-content-between align-items-center">
        <h4 class="card-title mb-0">Tasks</h4>
        <a href="{{ route('completedtask_details') }}" class="btn btn-primary btn-sm">
            Completed Task
        </a>
    </div>

    <div class="card-body table-card-body px-0 pt-0 pb-1">
        <div class="table-responsive check-wrapper">
            <table id="datatable" class="datatables display table table-striped" style="min-width: 845px">
                <thead class="table-primary text-nowrap">
                    <tr>
                        <th>#</th>
                        <th>Project</th>
                        <th>Task</th>
                        <th>Assigned User</th>
                        <th>Assigned Date</th>
                        <th>Deadline</th>
                        <th>Status</th>
                        <th>Start Date</th>
                        <th>Completed Date</th>
                        <th>Time</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($tasks as $key => $task)
                        <tr>
                            <td>{{ $key + 1 }}</td>
                            <td>{{ $task->project->project_type }}</td>
                            <td>
                                <div class="clearfix">
                                    <h6 class="mb-1">{{ $task->title }}</h6>
                                    <span>{{ $task->task_id }}</span>
                                </div>
                            </td>
                            <td>{{ $task->assignedUser ? $task->assignedUser->name : 'Unassigned' }}</td>
                            <td>{{ $task->created_at ? \Carbon\Carbon::parse($task->created_at)->format('d-m-Y') : '-' }}</td>
                            <td>{{ $task->dead_line ? \Carbon\Carbon::parse($task->dead_line)->format('d-m-Y') : '-' }}</td>
                            <td>
                                @php
                                    $status = $task->status ? strtolower(trim($task->status)) : null;
                                @endphp
                                @if(is_null($status))
                                    <span class="badge bg-info">New</span>
                                @elseif($status === 'completed')
                                    <span class="badge bg-success">Completed</span>
                                @elseif($status === 'hold')
                                    <span class="badge bg-warning text-dark">Hold</span>
                                @else
                                    <span class="badge bg-secondary">{{ ucfirst($status) }}</span>
                                @endif
                            </td>
                            <td>{{ $task->start_date ? \Carbon\Carbon::parse($task->start_date)->format('d-m-Y') : '-' }}</td>
                            <td>{{ $task->end_date ? \Carbon\Carbon::parse($task->end_date)->format('d-m-Y') : '-' }}</td>
                            <td>{{ $task->total_time }}</td>
                            <td>
                                <a href="{{ route('admin.task_edit', $task->id) }}" class="btn btn-sm btn-primary">View</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="11" class="text-center">No tasks found for this project.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>
<!-- End - Task Table -->

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#datatable').DataTable({
            language: {
                paginate: {
                    previous: '<i class="fa-solid fa-angle-left"></i>',
                    next: '<i class="fa-solid fa-angle-right"></i>'
                }
            }
        });
    });
</script>

@endsection