@extends('layouts.app')

@section('content')

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h1 class="page-title" style="margin-bottom: 32px; margin-left: 33px;">Dashboard</h1>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Tasks Table -->
        <div class="col-12">
            <div class="card" style="width: 96%;right: -31px;">
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col-sm-4">
                            <div class="d-flex align-items-center">
                                <label class="me-2" for="show-entries">Show</label>
                                <select id="show-entries" class="form-select form-select-sm ms-1 me-3" style="width: auto;">
                                    <option value="10">10</option>
                                    <option value="25">25</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                                <label for="show-entries">entries</label>
                            </div>
                        </div>
                        <div class="col-sm-8">
                            <div class="text-sm-end">
                                <button type="button" class="btn btn-secondary mb-2" id="exportButton" data-bs-toggle="dropdown">Export <i class="mdi mdi-chevron-down"></i></button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#" onclick="exportTable('csv')">CSV</a></li>
                                    <li><a class="dropdown-item" href="#" onclick="exportTable('pdf')">PDF</a></li>
                                    <li><a class="dropdown-item" href="#" onclick="exportTable('print')">Print</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-centered w-100 dt-responsive nowrap" id="tasksTable">
                            <thead>
                                <tr>
                                    <th class="all">ID</th>
                                    <th class="all">Task Name</th>
                                    <th>Description</th>
                                    <th>Assigned To</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if ($tasks->count() > 0)
                                    @foreach ($tasks as $task)
                                        <tr>
                                            <td>{{ $task->id }}</td>
                                            <td>{{ $task->name }}</td>
                                            <td>{{ $task->description }}</td>
                                            <td>{{ $task->assigned_to }}</td>
                                            <td>{{ $task->status }}</td>
                                            <td>
                                                <a href="#" class="btn btn-primary btn-sm edit-task" data-id="{{ $task->id }}" data-name="{{ $task->name }}" data-desc="{{ $task->description }}" data-assigned="{{ $task->assigned_to }}" data-status="{{ $task->status }}" data-bs-toggle="modal" data-bs-target="#editTaskModal"><i class="mdi mdi-pencil"></i></a>
                                                <a href="#" class="btn btn-danger btn-sm delete-task" data-id="{{ $task->id }}"><i class="mdi mdi-delete"></i></a>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr><td colspan="6">No tasks found</td></tr>
                                @endif
                            </tbody>
                        </table>
                    </div>

                    <div class="d-flex justify-content-between">
                        <div>
                            Showing 1 to 10 of {{ $tasks->total() }} entries
                        </div>
                        <div>
                            <!-- Pagination links (optional) -->
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        $('#tasksTable').DataTable({
            "paging": true, // Enables pagination
            "lengthChange": false, // Disables changing number of entries per page
            "searching": true, // Enables search functionality
            "ordering": true, // Enables column sorting
            "info": true, // Shows the information (entries)
            "autoWidth": false
        });
    });
</script>
@endsection