@extends('adminlte::page')

@section('title', 'Short Term Threat Details')

@section('content_header')
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1>Short Term Threat Details</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"><a href="/shorttermthreat">Short Term Threat List</a></li>
                <li class="breadcrumb-item active">Short Term Threat Details</li>
            </ol>
        </div>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card card-secondary">
                <div class="card-header">
                    <h3 class="card-title">General Information</h3>

                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-6">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputShortThreatName">Threat Title</label>
                                <input type="text" id="inputShortThreatName" class="form-control"
                                    value="E960 replacement (Like for like)">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputPriority">Priority</label>
                                <select id="inputPriority" class="form-control custom-select">
                                    <option>Select Priority</option>
                                    <option>Immediate Action</option>
                                    <option selected>High</option>
                                    <option>Medium</option>
                                    <option>Low</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                {{-- With multiple slots, and plugin config parameters --}}
                                @php
                                    $config = [
                                        'placeholder' => 'Select Workstream',
                                        'allowClear' => false,
                                    ];
                                @endphp
                                <!-- Select2 Input -->
                                <x-adminlte-select2 id="sel2Workstream" name="sel2Workstream[]" label="Workstream"
                                    :config="$config">
                                    <option>PMTO SMPO PT Jurong</option>
                                    <option selected>MTO Site-Wide Bukom</option>
                                </x-adminlte-select2>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputThreatStatus">Short Term Threat Status</label>
                                <select id="inputThreatStatus" class="form-control custom-select">
                                    <option>Select Threat Status</option>
                                    <option>In Progress</option>
                                    <option selected>On-hold</option>
                                    <option>Delayed</option>
                                    <option>Needs Attention</option>
                                    <option>Needs Attention</option>
                                    <option>Closed-Move to Threats</option>
                                    <option>Closed-Resolved</option>
                                    <option>Cancelled</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-6">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputSite">Site</label>
                                <select id="inputSite" class="form-control custom-select">
                                    <option>Select Site</option>
                                    <option selected="">Jurong</option>
                                    <option>Bukom</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputProductionUnit">Production Unit</label>
                                <select id="inputProductionUnit" class="form-control custom-select">
                                    <option>Select Production Unit</option>
                                    <option selected="">Energy Efficiency</option>
                                    <option>Sitewide-RE</option>
                                    <option>Site-Wide</option>
                                    <option>PU1</option>
                                    <option>PU2</option>
                                    <option>PU3</option>
                                    <option>PU4</option>
                                    <option>PU5</option>
                                    <option>Marine</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputUnit">Unit</label>
                                <select id="inputUnit" class="form-control custom-select">
                                    <option>Select Unit</option>
                                    <option selected="">AUX1-AJI</option>
                                    <option>SM1-AJI</option>
                                    <option>Infrastructure2-AJI</option>
                                    <option>HPEO - EOG2 (LEO)</option>
                                    <option>EOD1/3-AJI</option>
                                    <option>Storage Tanks-AJI</option>
                                    <option>Bukom ADIP Treater ( PU2 )</option>
                                    <option>Bukom ADIP (PU1)</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                {{-- With multiple slots, and plugin config parameters --}}
                                @php
                                    $config = [
                                        'placeholder' => 'Select Threat Owner',
                                        'allowClear' => false,
                                    ];
                                @endphp
                                <!-- Select2 Input -->
                                <x-adminlte-select2 id="sel2ThreatOwner" name="sel2ThreatOwner[]" label="Threat Owner"
                                    :config="$config">
                                    <option>Bryan</option>
                                    <option selected>Jason Ke</option>
                                    <option selected>Robert</option>
                                    <option selected>Kavitha</option>
                                </x-adminlte-select2>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="InputHashtag">Hashtag #</label>
                                <input type="text" id="InputHashtag" class="form-control" value="#ShortTermThreat">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <!-- text input -->
                            <div class="form-group">
                                {{-- With Label --}}
                                @php
                                    $config = ['format' => 'DD-MM-YYYY'];
                                @endphp
                                <x-adminlte-input-date name="ShortTermThreatDueDate" :config="$config"
                                    placeholder="Choose a date..." label="Short Term Threat Due date"
                                    label-class="text-default" value="07-06-2023">
                                </x-adminlte-input-date>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label for="inputDescription">Description</label>
                                <textarea name="inputDescription" class="form-control" rows="4" placeholder="Enter Text ..."></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-3">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputDateReported">Date Reported</label>
                                <input type="text" id="inputDateReported" class="form-control" value="12-07-2025"
                                    disabled>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputCreatedBy">Created by</label>
                                <input type="text" id="inputCreatedBy" class="form-control" value="John Doe"
                                    disabled>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputThreatID">Short Term Threat ID</label>
                                <input type="text" id="inputThreatID" class="form-control" value="ST-000000001"
                                    disabled>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputOverdueDays">Overdue Days</label>
                                <input type="text" id="inputOverdueDays" class="form-control" value="5"
                                    disabled>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
            <div class="col-12 d-flex justify-content-between align-items-center">
                <a href="/shorttermthreat" class="btn btn-secondary">Cancel</a>

                <div class="d-flex">
                    <button class="btn btn-primary mr-2" data-toggle="modal" data-target="#modalShortTermFilter">Copy to
                        Long Term Threat</button>
                    <input type="submit" value="Save Changes" class="btn btn-success">
                </div>
            </div>
            <div class="card card-secondary mt-3">
                <div class="card-header">
                    <h3 class="card-title">Short Term Threat Actions</h3>

                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="col-12 mb-3 px-0">
                        <div class="d-flex">
                            <a href="/threatactions" target="_blank" type="button"
                                class="btn btn-primary btn-sm ml-auto">New Action</a>
                        </div>
                    </div>
                    <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>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>
                        </tbody>
                    </table>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
    </div>


    <x-adminlte-modal id="modalShortTermFilter" title="Long Term Threat Owner" size="s" theme="primary"
        icon="fas fa-user" 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
                                        $config1 = [
                                            'placeholder' => 'Select Long Term Threat Owner',
                                            'allowClear' => false,
                                        ];
                                    @endphp
                                    <!-- Select2 Input -->
                                    <x-adminlte-select2 id="sel2LongTermThreatOwner" name="sel2LongTermThreatOwner[]"
                                        label="Select Long Term Threat Owner" :config="$config1">
                                        <option>Jason Ke</option>
                                        <option>Robert</option>
                                        <option>Kavitha</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="primary" label="Move To Long Term Threat" 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
            $('#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