@extends('adminlte::page')

@section('title', 'Workstreams')

@section('content_header')
<div class="row mb-2">
    <div class="col-sm-6">
        <h1>Workstreams List</h1>
    </div>
    <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Dashboard</a></li>
            <li class="breadcrumb-item active">Workstreams List</li>
        </ol>
    </div>
</div>
@endsection

@section('content')
<!-- User Table -->
<div class="card">
    <div class="card-header d-flex align-items-center">
        <h3 class="card-title">Here, you can easily manage workstream by creating, viewing, and updating them.
        </h3>

        <button class="btn bg-gradient-primary ml-auto" id="addWorkstreamBtn">Add New Workstream</button>

    </div>
    <div class="card-body">
        <table id="workstream_table" class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Workstream Name</th>
                    <th>Workstream Lead (1st Approver)</th>
                    <th>Workstream Sponser (2nd Approver)</th>
                    <th>Finance Sponsor</th>
                    <th>Created By</th>
                    <th>Created At</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <!-- Static Data (Can be dynamically replaced with Blade variables if needed) -->
                <tr>
                    <td>1</td>
                    <td><a href="/workstreamdetails">MTO SMPO PT Jurong</a></td>
                    <td>Jason Ke</td>
                    <td>Kavitha Iyer</td>
                    <td>Li-Feng Zhuang</td>
                    <td>Rahul Swami</td>
                    <td>14-06-2024 11:15 AM</td>
                    <td><button class="btn btn-xs btn-default text-primary mx-1 shadow" id="editWorkstream"
                            title="Edit">
                            <i class="fa fa-sm fa-fw fa-pen"></i>
                        </button></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td><a href="/workstreamdetails">MTO Marine Bukom</a></td>
                    <td>Yuhai Liang</td>
                    <td>Yuhai Liang</td>
                    <td>Jacky Chua</td>
                    <td>Kiat-Siong Tok</td>
                    <td>28-03-2024 05:02 PM</td>
                    <td><button class="btn btn-xs btn-default text-primary mx-1 shadow" id="editWorkstream"
                            title="Edit">
                            <i class="fa fa-sm fa-fw fa-pen"></i>
                        </button></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td><a href="/workstreamdetails">MTO Site-Wide Bukom</a></td>
                    <td>Yuhai Liang</td>
                    <td>Yuhai Liang</td>
                    <td>YONG HUAN SEAH</td>
                    <td>Kiat-Siong Tok</td>
                    <td>09-07-2024 10:54 AM</td>
                    <td><button class="btn btn-xs btn-default text-primary mx-1 shadow" id="editWorkstream"
                            title="Edit">
                            <i class="fa fa-sm fa-fw fa-pen"></i>
                        </button></td>
                </tr>
                <!-- Add more static rows as needed -->
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('js')
    <!-- Include jQuery, AdminLTE JS, and DataTables JS -->
    <script>
        $(document).ready(function () {
            // Initialize DataTable on the #users_table
            $('#workstream_table').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true,
                "columnDefs": [
                    {
                        "targets": [7], // Replace 0, 1 with the indexes of the columns you want to disable sorting for
                        "orderable": false
                    }
                ],
                "colReorder": true // Enables column reordering
            });

            // Temporary disabled datatable search, sorting and download excel button
            $('.dataTables_filter input').unbind().keyup(function (e) {
                // do nothing.   
            });
            $('.sorting_asc, .sorting_desc, .sorting').unbind().keyup(function (e) {
                // do nothing.
            });
            $('.buttons-excel').unbind().keyup(function (e) {
                // do nothing.
            });

            $("#addWorkstreamBtn, #editWorkstream").click(function () {
                window.location.href = "/workstreamdetails";
            });
        });
    </script>
@endpush