@extends('developer.layout')

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

<h2>Project</h2>

    <!-- 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>Deadline</th>
            <th>Total Task</th>
            <th>Pending</th>
            <th>Complete</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody class="text-nowrap">
@foreach($projects as $index => $project)

            
           <tr>
    <td>{{ $index + 1 }}</td>
    <td>{{ $project->project_type ?? 'N/A' }}</td>
    <td>{{ $project->deadline ?? '-' }}</td>
    
    <td>{{ $project->tasks->count() }}</td>
    <td>{{ $project->tasks->where('status', '!=', 'Completed')->count() }}</td>
    <td>{{ $project->tasks->where('status', 'Completed')->count() }}</td>

    <td>
        <a href="{{ route('developer.my_task', $project->id) }}" class="btn btn-sm btn-info">View</a>
    </td>
</tr>

        @endforeach
    </tbody>
</table>

                </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