@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
<h1>Dashboard</h1>
@endsection

@section('content')
<div class="row">
    <!-- Total Users Card -->
    <div class="col-lg-4 col-6">
        <div class="small-box bg-danger">
            <div class="inner">
                <h3>75</h3>
                <p>Overdue Action</p>
            </div>
            <div class="icon">
                <i class="fas fa-clock"></i>
            </div>
            <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>

    <!-- New Orders Card -->
    <div class="col-lg-4 col-6">
        <div class="small-box bg-yellow">
            <div class="inner">
                <h3>4</h3>
                <p>Threat - Needs Attention</p>
            </div>
            <div class="icon">
                <i class="fas fa-exclamation-circle"></i>
            </div>
            <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>

    <!-- Traffic Card -->
    <div class="col-lg-4 col-6">
        <div class="small-box bg-blue">
            <div class="inner">
                <h3>24</h3>
                <p>Pending Approval</p>
            </div>
            <div class="icon">
                <i class="fas fa-check-circle"></i>
            </div>
            <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
</div>

<!-- Data Table Section -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex align-items-center">
                <h3 class="card-title"><b>My Threats</b></h3>
                <button class="btn bg-gradient-secondary ml-auto btn-sm" data-toggle="modal"
                    data-target="#modalCustomFilter"><i class="fas fa-filter"></i></button>
                <button class="btn bg-gradient-primary add-new-threat ml-2 btn-sm">Threat List</i></button>
            </div>
            <div class="card-body">
                <table class="table table-bordered table-striped" id="myThreats">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Threat ID</th>
                            <th>Threat</th>
                            <th>MTO Score</th>
                            <th>Owner</th>
                            <th>Workstream</th>
                            <th>Phase</th>
                            <th>Status</th>
                            <th>Due Date</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>I-2344762</td>
                            <td><a href='/threatdetails'>S2 Soot blower reliability</a></td>
                            <td>150,000</td>
                            <td>John Doe</td>
                            <td>MTO SMPO PT Jurong</td>
                            <td>L5</td>
                            <td>On Track</td>
                            <td><span class="badge bg-danger">27-09-2024</span></td>
                            <td><button
                                    class="btn btn-xs btn-default text-primary mx-1 shadow btn-default-threat-details"
                                    title="Edit">
                                    <i class="fa fa-sm fa-fw fa-pen"></i>
                                </button></td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>I-3309038</td>
                            <td><a href='/threatdetails'>Flare Hydraulic Adequacy Impact due to Fouling</a></td>
                            <td>150,000</td>
                            <td>Cheng-Huie Chia</td>
                            <td>MTO SMPO PT Jurong</td>
                            <td>L2</td>
                            <td>Needs Attention</td>
                            <td><span class="badge bg-orange">27-12-2024</span></td>
                            <td><button
                                    class="btn btn-xs btn-default text-primary mx-1 shadow btn-default-threat-details"
                                    title="Edit">
                                    <i class="fa fa-sm fa-fw fa-pen"></i>
                                </button></td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>I-0046005</td>
                            <td><a href='/threatdetails'>U10900 Benzene toxic gas emission</a></td>
                            <td>150,000</td>
                            <td>John Doe</td>
                            <td>MTO SMPO PT Jurong</td>
                            <td>L0</td>
                            <td>New Entry</td>
                            <td><span class="badge bg-success">06-01-2025</span></td>
                            <td><button
                                    class="btn btn-xs btn-default text-primary mx-1 shadow btn-default-threat-details"
                                    title="Edit">
                                    <i class="fa fa-sm fa-fw fa-pen"></i>
                                </button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex align-items-center">
                <h3 class="card-title"><b>My Actions</b></h3>
                <button class="btn bg-gradient-secondary ml-auto btn-sm" data-toggle="modal"
                    data-target="#modalCustomFilterMyAction"><i class="fas fa-filter"></i></button>
            </div>
            <div class="card-body">
                <table class="table table-bordered table-striped" id="myActions">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Action Name</th>
                            <th>Threat Name</th>
                            <th>Assigned By</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><a href='/threatdetails'>Test 88</a></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><button
                                    class="btn btn-xs btn-default text-primary mx-1 shadow redirect-to-actiondetails"
                                    title="Edit">
                                    <i class="fa fa-sm fa-fw fa-pen"></i>
                                </button></td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Likelihood matrix not correct</td>
                            <td><a href='/threatdetails'>S2 Soot Blower</a></td>
                            <td>Jason Ke</td>
                            <td>05-12-2024</td>
                            <td><span class="badge bg-success">31-12-2024</span></td>
                            <td>Completed</td>
                            <td><button
                                    class="btn btn-xs btn-default text-primary mx-1 shadow redirect-to-actiondetails"
                                    title="Edit">
                                    <i class="fa fa-sm fa-fw fa-pen"></i>
                                </button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Custom --}}
<x-adminlte-modal id="modalCustomFilter" 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-3">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputLevel1">Level 1</label>
                                <select id="inputLevel1" class="form-control">
                                    <option selected="">Select Site</option>
                                    <option>Jurong</option>
                                    <option>Bukom</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputLevel2">Level 2</label>
                                <select id="inputLevel2" class="form-control">
                                    <option selected="">Select Business Site</option>
                                    <option>Chemical</option>
                                    <option>Products</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputLevel3">Level 3</label>
                                <select id="inputLevel3" class="form-control">
                                    <option selected="">Select Unit</option>
                                    <option>SMPO Jurong</option>
                                    <option>EOG - Commercial</option>
                                    <option>EOG - Jurong</option>
                                    <option>HO - Commercial</option>
                                    <option>PODer - Commercial</option>
                                    <option>PODU - Jurong</option>
                                    <option>Site-Wide-Jurong</option>
                                    <option>SM - Commercial</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputLevel4">Level 4</label>
                                <select id="inputLevel4" class="form-control">
                                    <option selected="">Select Sub Unit</option>
                                    <option>SMPO Jurong - Area</option>
                                    <option>Marine Bukom - Area</option>
                                    <option>PU5 Bukom - Area</option>
                                    <option>Site-Wide Bukom - Area</option>
                                    <option>PU1 Bukom - Area</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            <div class="form-group">
                                @php
                                    $config = [
                                        "placeholder" => "Select Threat",
                                        "allowClear" => false,
                                    ];
                                @endphp
                                <!-- Select2 Input -->
                                <x-adminlte-select2 id="sel2ThreatSearch" name="sel2ThreatSearch"
                                    label="Search Threat" :config="$config">
                                    <option value="" selected>Search Threat</option>
                                    <option>Management of SMPO2</option>
                                    <option>LCY term contract</option>
                                    <option>Leverage contractual</option>
                                    <option>CI_Setsco NDT</option>
                                    <option>CI_CHEMICAL DECON</option>
                                </x-adminlte-select2>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group">
                                @php
                                    $config1 = [
                                        "placeholder" => "Select Workstream",
                                        "allowClear" => false,
                                    ];
                                @endphp
                                <!-- Select2 Input -->
                                <x-adminlte-select2 id="sel2WorkstreamSearch" name="sel2WorkstreamSearch[]"
                                    label="Workstream" :config="$config1" multiple>
                                    <option selected="">MTO SMPO PT Jurong</option>
                                    <option>MTO Marine Bukom</option>
                                    <option>MTO Site-Wide Bukom</option>
                                </x-adminlte-select2>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label for="inputHashtag">Hashtag</label>
                                <input type="text" id="inputHashtag" class="form-control" value="">
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group">
                                @php
                                    $config = [
                                        "placeholder" => "Select Overall Status",
                                        "allowClear" => false,
                                    ];
                                @endphp
                                <!-- Select2 Input -->
                                <x-adminlte-select2 id="sel2OverallStatusSearch" name="sel2OverallStatusSearch[]"
                                    label="Search Overall Status" :config="$config" multiple>
                                    <option selected="">New Entry</option>
                                    <option>Cancelled</option>
                                    <option>On hold</option>
                                    <option selected="">Completed</option>
                                    <option>Completed</option>
                                    <option>TA_Proj-On Track</option>
                                    <option>Needs attention</option>
                                    <option>Defer</option>
                                </x-adminlte-select2>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            <div class="form-group">
                                @php
                                    $config = [
                                        "placeholder" => "Select Phase",
                                        "allowClear" => false,
                                    ];
                                @endphp
                                <!-- Select2 Input -->
                                <x-adminlte-select2 id="sel2Phase" name="sel2Phase[]" label="Phase" :config="$config"
                                    multiple>
                                    <option selected="">L0 Idea</option>
                                    <option>L1 Identify</option>
                                    <option>L2 Validation</option>
                                    <option selected="">L3 Plan</option>
                                    <option>L4 Implement</option>
                                    <option>L5 Track</option>
                                    <option selected="">L5 Completed</option>
                                </x-adminlte-select2>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group">
                                @php
                                    $config1 = [
                                        "placeholder" => "Select Threat Created User",
                                        "allowClear" => false,
                                    ];
                                @endphp
                                <!-- Select2 Input -->
                                <x-adminlte-select2 id="sel2CreatedBy" name="sel2CreatedBy[]"
                                    label="Threat Created User" :config="$config1" multiple>
                                    <option selected="">Jason Ke</option>
                                    <option>Brayan</option>
                                    <option>Rahul</option>
                                    <option selected="">Kavitha Iyer</option>
                                </x-adminlte-select2>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group">
                                {{-- Label, and prepend icon --}}
                                <x-adminlte-input-switch name="iswText" label="Include Confidential Threat"
                                    data-on-text="YES" data-off-text="NO" data-on-color="primary" checked />
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group">
                                @php
                                    $config = [
                                        "placeholder" => "Select Other's Threats",
                                        "allowClear" => false,
                                    ];
                                @endphp
                                <!-- Select2 Input -->
                                <x-adminlte-select2 id="sel2OtherThreats" name="sel2OtherThreats[]"
                                    label="Other User's Threat" :config="$config" multiple>
                                    <option selected="">Robert</option>
                                    <option>Jonson</option>
                                    <option>Ronald To</option>
                                    <option selected="">Harry</option>
                                    <option>Brayan</option>
                                    <option>Peter Teo</option>
                                </x-adminlte-select2>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="inputSearchOtherThreat">Search Other Threat</label>
                                <input type="text" id="inputSearchOtherThreat" class="form-control" value="">
                            </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>
<x-adminlte-modal id="modalCustomFilterMyAction" title="My Action 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">
                            <select id="inputLevel1" class="form-control form-control-sm">
                                <option selected="">My Actions</option>
                                <option>My Overdue Actions</option>
                                <option>My Coming Overdue Actions</option>
                            </select>
                        </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>
{{-- Example button to open modal --}}
@endsection
@push('js')
    <!-- Include jQuery, AdminLTE JS, and DataTables JS -->
     <script src="{{ asset('assets/js/backend/threats/export_excel_data.js') }}"></script>
    <script>

        $(document).ready(function () {
            // Initialize DataTable on the #users_table
            $('#myActions').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, 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
            });
        });
        $(document).ready(function () {
            // Initialize DataTable on the #users_table
            $('#myThreats').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": [9], // 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
            });

            $(".btn-default-threat-details").click(function () {
                window.location.href = "/threatdetails";
            });
            $(".add-new-threat").click(function () {
                window.location.href = "/threats";
            });
            $(".redirect-to-actiondetails").click(function () {
                window.location.href = "/threatactions";
            });

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