@extends('admin.layout')

@section('content')

<style>

    .table tbody tr td:last-child {

        text-align: center !important;

    }

</style>



<div class="page-header">

    <h4 class="page-title mb-0">Projects</h4>

</div>



<div class="row mt-2 d-flex justify-content-center">

    <div class="col-lg-12">

        <div class="table-responsive mt-3">

            <table id="datatable" class="datatables display table table-striped" style="min-width: 845px">

                <thead>

                    <tr>
                      
                                <th>#</th>
                                <th>Name</th>
                                <th>Status</th>
                                <th>Action</th>

                    </tr>

                </thead>

                <tbody>

                    @foreach($projects as $key => $project)
                                <tr>
                                    <td>{{ $key + 1 }}</td>
                                    <td>
                                        <div class="clearfix">
                                            <h6 class="mb-1">{{ $project->project_type }}</h6>
                                            <span>{{ $project->project_id }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-info">New</span>
                                    </td>
                                    <td>
                                        <a href="{{ route('view_task', ['project_id' => $project->id]) }}" class="btn btn-sm btn-primary">View</a>
                                    </td>
                                </tr>
                            @endforeach


                </tbody>

            </table>

        </div>

    </div>

</div>



{{-- jQuery and DataTables --}}

<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