@extends('adminlte::page')

@section('title', 'My Approvals')

@section('content_header')
<div class="row mb-2">
    <div class="col-sm-6">
        <h1>Approval Requests</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">Approval Request List</li>
        </ol>
    </div>
</div>
@endsection

@section('content')
<!-- User Table -->
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Here, you can easily manage approval requests by reassigning, viewing, and updating them.
        </h3>
    </div>
    <div class="card-body">
        <table id="workstream_table" class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Related To</th>
                    <th>Type</th>
                    <th>Most Recent Approver</th>
                    <th>Submitter Comment</th>
                    <th>Date Submitted</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <!-- Static Data (Can be dynamically replaced with Blade variables if needed) -->
                <tr>
                    <td>1</td>
                    <td><a href="/myapprovaldetails">S2 Soot Blower</a></td>
                    <td>Threat</td>
                    <td>Phoi Chin Goh</td>
                    <td>Task completed. Ready ...<br/><a href="" data-toggle="modal" data-target="#modalSeeMore">see more</a></td>
                    <td>14-06-2024 11:15 AM</td>
                    <td><button class="btn btn-xs btn-default text-success approve-btn mx-1 shadow approve-btn" id="approverequest"
                            title="Approve" data-toggle="modal" data-target="#modalApprove">
                            <i class="fa fa-sm fa-fw fa-check"></i>
                        </button>
                        <button class="btn btn-xs btn-default text-danger mx-1 reject-btn shadow reject-btn" id="rejectrequest" title="Reject"
                            data-toggle="modal" data-target="#modalReject">
                            <i class="fa fa-sm fa-fw fa-times"></i>
                        </button>
                        <button class="btn btn-xs btn-default text-primary reassign-btn mx-1 shadow reassign-btn" id="reassignrequest"
                            title="Reassign" data-toggle="modal" data-target="#modalReassign">
                            <i class="fa fa-sm fa-fw fa-user-plus"></i>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td><a href="/myapprovaldetails">Flare Hydraulic Adequacy Impact due to
                            Fouling</a></td>
                    <td>Threat</td>
                    <td>Jason Ke</td>
                    <td>Task completed. Ready ...<br/><a href="" data-toggle="modal" data-target="#modalSeeMore">see more</a></td>
                    <td>28-03-2024 05:02 PM</td>
                    <td><button class="btn btn-xs btn-default text-success mx-1 shadow" id="approverequest"
                            title="Approve" data-toggle="modal" data-target="#modalApprove">
                            <i class="fa fa-sm fa-fw fa-check"></i>
                        </button>
                        <button class="btn btn-xs btn-default text-danger mx-1 shadow" id="rejectrequest" title="Reject"
                            data-toggle="modal" data-target="#modalReject">
                            <i class="fa fa-sm fa-fw fa-times"></i>
                        </button>
                        <button class="btn btn-xs btn-default text-primary mx-1 shadow" id="reassignrequest"
                            title="Reassign" data-toggle="modal" data-target="#modalReassign">
                            <i class="fa fa-sm fa-fw fa-user-plus"></i>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td><a href="/myapprovaldetails">Demo Threat</a></td>
                    <td>Threat</td>
                    <td>Peter Teo</td>
                    <td>Task completed. Ready ...<br/><a href="" data-toggle="modal" data-target="#modalSeeMore">see more</a></td>
                    <td>09-07-2024 10:54 AM</td>
                    <td><button class="btn btn-xs btn-default text-success mx-1 shadow" id="approverequest"
                            title="Approve" data-toggle="modal" data-target="#modalApprove">
                            <i class="fa fa-sm fa-fw fa-check"></i>
                        </button>
                        <button class="btn btn-xs btn-default text-danger mx-1 shadow" id="rejectrequest" title="Reject"
                            data-toggle="modal" data-target="#modalReject">
                            <i class="fa fa-sm fa-fw fa-times"></i>
                        </button>
                        <button class="btn btn-xs btn-default text-primary mx-1 shadow" id="reassignrequest"
                            title="Reassign" data-toggle="modal" data-target="#modalReassign">
                            <i class="fa fa-sm fa-fw fa-user-plus"></i>
                        </button>
                    </td>
                </tr>
                <!-- Add more static rows as needed -->
            </tbody>
        </table>
    </div>
</div>

{{-- Custom --}}
<x-adminlte-modal id="modalApprove" title="Approve Threat" size="m" theme="primary" icon="fas fa-check" v-centered
    static-backdrop scrollable>
    <div class="row">
        <div class="col-md-12">
            <div class="card card-primary">
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputFullName">Comments</label>
                                <textarea name="description" class="form-control" rows="5"
                                    placeholder="Enter Comments ..."></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
    </div>
    <x-slot name="footerSlot">
        <x-adminlte-button theme="default" label="Close" class="mr-auto model-btn-close" data-dismiss="modal" />
        <x-adminlte-button theme="success" label="Approve" class="modal-btn-save-changes" data-dismiss="modal" />
    </x-slot>
</x-adminlte-modal>
<x-adminlte-modal id="modalReject" title="Reject Threat" size="m" theme="primary" icon="fas fa-times" v-centered
    static-backdrop scrollable>
    <div class="row">
        <div class="col-md-12">
            <div class="card card-primary">
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputFullName">Comments</label>
                                <textarea name="description" class="form-control" rows="5"
                                    placeholder="Enter Comments ..."></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
    </div>
    <x-slot name="footerSlot">
        <x-adminlte-button theme="default" label="Close" class="mr-auto model-btn-close" data-dismiss="modal" />
        <x-adminlte-button theme="danger" label="Reject" class="modal-btn-save-changes" data-dismiss="modal" />
    </x-slot>
</x-adminlte-modal>
<x-adminlte-modal id="modalReassign" title="Reassign Approval Request" size="m" theme="primary" icon="fas fa-user-plus"
    v-centered static-backdrop scrollable>
    <div class="row">
        <div class="col-md-12">
            <div class="card card-primary">
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                @php
                                    $config = [
                                        "placeholder" => "Reassign User",
                                        "allowClear" => false,
                                    ];
                                @endphp
                                <!-- Select2 Input -->
                                <x-adminlte-select2 id="sel2AssignToUser" name="sel2AssignToUser"
                                    label="Reassign To User" :config="$config">
                                    <option>Jason Ke</option>
                                    <option>Brayan</option>
                                    <option>Rahul</option>
                                    <option>Kavitha Iyer</option>
                                </x-adminlte-select2>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputFullName">Comments</label>
                                <textarea name="description" class="form-control" rows="5"
                                    placeholder="Enter Comments ..."></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
    </div>
    <x-slot name="footerSlot">
        <x-adminlte-button theme="default" label="Close" class="mr-auto model-btn-close" data-dismiss="modal" />
        <x-adminlte-button theme="success" label="Reassign" class="modal-btn-save-changes" data-dismiss="modal" />
    </x-slot>
</x-adminlte-modal>
<x-adminlte-modal id="modalSeeMore" title="Submitter Comment" size="m" theme="primary" icon="fas fa-pencil-alt" v-centered
    static-backdrop scrollable>
    <div class="row">
        <div class="col-md-12">
            <div class="card card-primary">
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <!-- text input -->
                            <div class="form-group">
                                <textarea name="description" class="form-control" rows="5"
                                    placeholder="Task completed. Ready to move to next level."></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
    </div>
    <x-slot name="footerSlot">
        <x-adminlte-button theme="default" label="Close" class="model-btn-close" data-dismiss="modal" />
    </x-slot>
</x-adminlte-modal>
{{-- Example button to open modal --}}
@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": [6], // 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.
            });
        });
    </script>
@endpush