@extends('admin.layout')



@section('content')



<style>

    .table tbody tr td:last-child {

        text-align: center !important;

    }



    /* Unique button styles */

    .btn-view {

        background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);

        color: #fff !important;

        border: none;

    }

    .btn-assign {

        background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);

        color: #fff !important;

        border: none;

    }

    .btn-change {

        background: linear-gradient(90deg, #ff9966 0%, #ff5e62 100%);

        color: #fff !important;

        border: none;

    }

    .btn-viewall {

        background: linear-gradient(90deg, #a18cd1 0%, #fbc2eb 100%);

        color: #fff !important;

        border: none;

    }

    .btn-delete {

        background: linear-gradient(90deg, #f85032 0%, #e73827 100%);

        color: #fff !important;

        border: none;

    }



    /* Hover effect for all */

    .btn-view:hover,

    .btn-assign:hover,

    .btn-change:hover,

    .btn-viewall:hover,

    .btn-delete:hover {

        opacity: 0.9;

        transform: scale(1.05);

        transition: 0.3s ease;

    }

</style>



<div class="container-fluid">

    <!-- Start - Task Table -->

    <div class="col-xl-12 mt-4">

        <div class="card-header border-0">

            <h4 class="card-title">Tasks</h4>

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

                            <th>Title</th>

                            <th>Action</th>

                        </tr>

                    </thead>

                    <tbody class="text-nowrap">

                        @foreach($tasks as $index => $task)

                            <tr>

                                <td>{{ $index + 1 }}</td>

                                <td>{{ $task->created_at->format('Y-m-d') }}</td>

                                <td>{{ $task->title }}</td>

                                <td>

                                    <a href="{{ route('admin.view_projecttask', $task->id) }}" class="btn btn-sm btn-view">View</a>

                                    <a href="{{ route('admin.create_task', $task->id) }}" class="btn btn-sm btn-assign">Assign</a>

                                    <a href="{{route('admin.change_task',$task->id)}}" class="btn btn-sm btn-change">Change</a>

                                    <a href="{{ route('admin.task_details', ['projecttask_id' => $task->id]) }}" class="btn btn-sm btn-viewall">View All</a>

                                    <form action="" method="POST" style="display:inline;">

                                        <button type="submit" class="btn btn-sm btn-delete" onclick="return confirm('Are you sure?')">Delete</button>

                                    </form>

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