@extends('developer.layout')

@section('content')

<style>
    .table tbody tr td:last-child {
        text-align: center !important;
    }
</style>
<div class="container-fluid">

                <h4>Completed Tasks</h4>

    <!-- Start - Task Table -->
    <div class="col-xl-12 mt-4">
        
            <div class="card-header border-0">
            </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>Start Date</th>
                                <th>End Date</th>
                                <th>Completed Date</th>
                                <th>Time</th>
                                
                            </tr>
                        </thead>
                        <tbody class="text-nowrap">
                            @foreach($tasks as $index => $task)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $task->project->project_type ?? 'N/A' }}</td>
                                    <td>{{ $task->title }}</td>
                                        <td>{{ \Carbon\Carbon::parse($task->start_date)->format('Y-m-d') }}</td>
                                        <td>{{ \Carbon\Carbon::parse($task->end_date)->format('Y-m-d') }}</td>
                                        <td>{{ \Carbon\Carbon::parse($task->completed_date)->format('Y-m-d') }}</td>
                                     <td>{{$task->total_time}}</td>
                                   
                                </tr>
                            @endforeach
                        </tbody>

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

</div>

<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