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

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