@extends('adminlte::page')

@section('title', 'Short Term Board')

@section('content_header')
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1>Short Term Threat 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">Short Term Threat 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 short term threats by creating, viewing, and updating them.
            </h3>
            <button class="btn bg-gradient-secondary ml-auto btn-sm" data-toggle="modal"
                data-target="#modalShortTermFilter"><i class="fas fa-filter"></i></button>
            <a class="btn bg-gradient-primary add-new-threat ml-2 btn-sm" id="addWorkstreamBtn"
                href="/shorttermthreatdetails">
                Add New Short Term Threat
            </a>

        </div>
        <div class="card-body">
            <table class="table table-bordered table-striped" id="myshortTermThreats">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Threat Title</th>
                        <th>Description</th>
                        <th>Priority</th>
                        <th>Threat Owner</th>
                        <th>Threat Status</th>
                        <th>Unit</th>
                        <th>Overdue Days</th>
                        <th>Threat Due date</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td><a href='/shorttermthreatdetailsviewmode' onclick="openSmallWindow(event, this.href)">E960
                                replacement (Like for like)</a></td>
                        <td class="text-truncate" style="max-width:300px;">E960 replacement (Like for like) - This is a
                            placeholder description to meet the 150 character
                            requirement. Additional dummy text here.</td>
                        <td>Immediate Action</td>
                        <td>Bryan</td>
                        <td>In Progress</td>
                        <td>POLYOLS1-AJI</td>
                        <td>2</td>
                        <td><span class="badge bg-danger">28-07-2025</span></td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td><a href='/shorttermthreatdetails' onclick="openSmallWindow(event, this.href)">Change of C2 pay
                                meter from Turbine to Coriolis Meter</a></td>
                        <td class="text-truncate" style="max-width: 300px;">E960 replacement (Like for like) - This is a
                            placeholder description to meet the 150 character
                            requirement. Additional dummy text here.</td>
                        <td>High</td>
                        <td>Jason Ke</td>
                        <td>Closed-Resolved</td>
                        <td>Bukom Cogen (E)</td>
                        <td>0</td>
                        <td><span class="badge bg-success">05-09-2025</span></td>
                    </tr>

                </tbody>
            </table>
        </div>
    </div>

    <div class="card">
        <div class="card-header d-flex align-items-center">
            <h3 class="card-title"><b>My Short Term Threat Actions</b></h3>
            <a class="btn bg-gradient-primary add-new-threat ml-auto btn-sm" id="addWorkstreamBtn" href="/threatactions"
                target="_blank">
                Add New Short Term Action
            </a>
        </div>
        <div class="card-body">
            <table class="table table-bordered table-striped" id="myShortTermThreatActions">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Action Name</th>
                        <th>Assigned To</th>
                        <th>Start Date</th>
                        <th>Due Date</th>
                        <th>Status</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>To Do Complete Phase L2</td>
                        <td>Kavitha Iyer</td>
                        <td>05-12-2024</td>
                        <td><span class="badge bg-orange">31-12-2024</span>
                        </td>
                        <td>Open</td>
                        <td><a href="/threatactions"
                                class="btn btn-xs btn-default text-primary mx-1 shadow redirect-to-actiondetails"
                                title="Edit">
                                <i class="fa fa-fw fa-pen"></i>
                            </a></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Likelihood matrix not correct</td>
                        <td>Jason Ke</td>
                        <td>05-12-2024</td>
                        <td><span class="badge bg-danger">31-12-2024</span>
                        </td>
                        <td>Cancelled</td>
                        <td><a href="/threatactions"
                                class="btn btn-xs btn-default text-primary mx-1 shadow redirect-to-actiondetails"
                                title="Edit">
                                <i class="fa fa-fw fa-pen"></i>
                            </a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <x-adminlte-modal id="modalShortTermFilter" title="Advance Filter" size="xl" theme="primary" icon="fas fa-filter"
        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-6">
                                <div class="form-group">
                                    @php
                                        $config1 = [
                                            "placeholder" => "Select Threat Status",
                                            "allowClear" => false,
                                        ];
                                    @endphp
                                    <!-- Select2 Input -->
                                    <x-adminlte-select2 id="sel2ThreatStatus" name="sel2ThreatStatus[]"
                                        label="Threat Status" :config="$config1" multiple>
                                        <option selected="">In Progress</option>
                                        <option selected>Closed-Resolved</option>
                                        <option selected>Closed-Move to Threats</option>
                                        <option selected>Cancelled</option>
                                    </x-adminlte-select2>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    @php
                                        $config1 = [
                                            "placeholder" => "Select Production Unit",
                                            "allowClear" => false,
                                        ];
                                    @endphp
                                    <!-- Select2 Input -->
                                    <x-adminlte-select2 id="sel2ProductionUnit" name="sel2ProductionUnit[]"
                                        label="Production Unit" :config="$config1" multiple>
                                        <option selected="">Site-wide</option>
                                        <option selected>Marine</option>
                                        <option selected>PU2</option>
                                        <option selected>PU3</option>
                                        <option selected>PU1</option>
                                    </x-adminlte-select2>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    @php
                                        $config1 = [
                                            "placeholder" => "Select Workstream",
                                            "allowClear" => false,
                                        ];
                                    @endphp
                                    <!-- Select2 Input -->
                                    <x-adminlte-select2 id="sel2Workstream" name="sel2Workstream[]" label="Workstream"
                                        :config="$config1" multiple>
                                        <option selected="">MTO SMPO PT Jurong</option>
                                        <option selected>MTO Marine Bukom</option>
                                        <option selected>MTO Site-Wide Bukom</option>
                                    </x-adminlte-select2>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    @php
                                        $config = [
                                            "placeholder" => "Select Priority",
                                            "allowClear" => false,
                                        ];
                                    @endphp
                                    <!-- Select2 Input -->
                                    <x-adminlte-select2 id="sel2PrioritySearch" name="sel2PrioritySearch[]"
                                        label="Search Priority" :config="$config" multiple>
                                        <option selected="">Immediate Action</option>
                                        <option selected>High</option>
                                        <option selected>Medium</option>
                                        <option selected>Low</option>
                                    </x-adminlte-select2>
                                </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="secondary" label="Clear Selection" class="modal-btn-save" />
            <x-adminlte-button theme="success" label="Apply Filter" class="modal-btn-save-changes" data-dismiss="modal" />
        </x-slot>
    </x-adminlte-modal>
@endsection

@push('js')
    <!-- Include jQuery, AdminLTE JS, and DataTables JS -->
    <script src="{{ asset('vendor/adminlte/dist/js/adminlte.min.js') }}"></script>
    <script>
        $(document).ready(function () {
            // Initialize DataTable on the #users_table
            $('#myshortTermThreats').DataTable({
                "paging": true,
                "lengthChange": true, // ✅ Allows user to change page length
                "lengthMenu": [[10, 20, 50], [10, 20, 50]],
                "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
                }],
                "dom": '<"d-flex justify-content-between align-items-center mb-2"l<"d-flex"fB>>rtip',
                "buttons": [{
                    extend: 'excel',
                    text: '<i class="fas fa-lg fa-file-excel"></i>', // Customize button text
                    className: 'bg-success text-white ml-2' // Add a custom class
                }],
                "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.
            // });
        });

        $(document).ready(function () {
            // Initialize DataTable on the #users_table
            $('#myShortTermThreatActions').DataTable({
                "paging": true,
                "lengthChange": true, // ✅ Allows user to change page length
                "lengthMenu": [[10, 20, 50], [10, 20, 50]],
                "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
                }],
                "dom": '<"d-flex justify-content-between align-items-center mb-2"l<"d-flex"fr>>tip',
                "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