@extends('adminlte::page')

@section('title', 'Threats')

@section('content_header')
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1>Threats 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">Threats 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 threat by creating, viewing, and updating them.
            </h3>

            <button class="btn bg-gradient-primary ml-auto" id="addWorkstreamBtn" data-toggle="modal"
                data-target="#modalCustom">Add New Threat</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-4245292</td>
                        <td><a href='/threatdetails'>S2 Soot Blower</a></td>
                        <td>150,000</td>
                        <td>John Doe</td>
                        <td>MTO SMPO PT Jurong</td>
                        <td>L5</td>
                        <td><span class="badge bg-danger">27-09-2024</span></td>
                        <td>Threat</td>
                        <td><button class="btn btn-xs btn-default text-primary mx-1 shadow btn-default-edit" title="Edit">
                                <i class="fa fa-sm fa-fw fa-pen"></i>
                            </button></td>
                    </tr>

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


    {{-- Custom --}}
    <x-adminlte-modal id="modalCustom" title="New Threat" size="xl" theme="primary" icon="fas fa-edit" 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">
                                <!-- text input -->
                                <div class="form-group">
                                    <div class="row pl-2">
                                        <label for="inputFullName">Record Type</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="radio1">
                                        <label class="form-check-label" for="radio1">Opportunity</label>
                                    </div>
                                    <div class="form-check form-check-inline pl-5">
                                        <input class="form-check-input" type="radio" name="radio2" checked="">
                                        <label class="form-check-label" for="radio2">Threat</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="inputFullName">Threat Name</label>
                                    <input type="text" id="inputFullName" class="form-control" value="S2 Soot Blower">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    @php
                                        $config = [
                                            'placeholder' => 'Select Workstream',
                                            'allowClear' => false,
                                        ];
                                    @endphp
                                    <!-- Select2 Input -->
                                    <x-adminlte-select2 id="sel2workstream" name="sel2workstream" label="Workstream"
                                        :config="$config">
                                        <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-6">
                                <div class="form-group">
                                    <label for="inputOverallStatus">Overall Status</label>
                                    <select id="inputOverallStatus" class="form-control custom-select">
                                        <option>Select Overall Status</option>
                                        <option selected="">New Entry</option>
                                        <option>Cancelled</option>
                                        <option>On hold</option>
                                        <option>Completed</option>
                                        <option>On track</option>
                                        <option>Needs attention</option>
                                        <option>TA_Proj-On Track</option>
                                        <option>Defer</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="inputCategory">Infrastructure Category</label>
                                    <select id="inputCategory" class="form-control custom-select">
                                        <option>Select Infrastructure Category</option>
                                        <option selected="">Electrical</option>
                                        <option>Environmental / Ecosystems</option>
                                        <option>Fire/Security/Safety Systems</option>
                                        <option>Flare Systems</option>
                                        <option>Off-Plot Piping</option>
                                        <option>Pressure Equipment (Static / Piping)</option>
                                        <option>Instrumentation & Controls</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="inputPhase">Initial Phase</label>
                                    <select id="inputPhase" class="form-control custom-select">
                                        <option>Select Initial Phase</option>
                                        <option selected="">L0 Idea</option>
                                        <option>L1 Identify</option>
                                        <option>L2 Validate</option>
                                        <option>L3 Plan</option>
                                        <option>L4 Implement</option>
                                        <option>L5 Track</option>
                                        <option>L5 Completed</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    @php
                                        $config = [
                                            'placeholder' => 'Select Unit',
                                            'allowClear' => false,
                                        ];
                                    @endphp
                                    <!-- Select2 Input -->
                                    <x-adminlte-select2 id="sel2unit" name="sel2unit" label="Unit" :config="$config">
                                        <option selected>EOD1/3-SJI</option>
                                        <option>EOG-2-SJI</option>
                                        <option>HPEO - EOG2 (LEO)</option>
                                        <option>MPG-SJI</option>
                                        <option>PO1-SJI</option>
                                        <option>PO2-SJI</option>
                                        <option>POLYOLS1-SJI</option>
                                        <option>POLYOLS2-SJI</option>
                                        <option>Side-Wide-SJI</option>
                                        <option>Sterling</option>
                                    </x-adminlte-select2>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <div class="row pl-2">
                                        <label for="inputFullName">Mark as Confidential</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="checkbox2">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="description">Description</label>
                                    <textarea name="description" class="form-control" rows="8" placeholder="Enter ...">
1. What is the problem?
    a. Expected: What was expected to happen prior to the event?
    b. Actual: What actual happened.
    c. Impact: Consequence as a result of the event (pontential and actual)?
2. What do we think caused the problem?
3. What evidance do we have about the causes?
4. What solution(s) do we have in mind?
5. How will the solution(s) eliminate the causes of the problem?
                                </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="primary" label="Next" class="modal-btn-save-changes" />
        </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
            $('#myThreats').DataTable({
                "paging": true,
                "lengthChange": false,
                "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": 'Bfrtip', // Enables the buttons
                "buttons": [{
                    extend: 'excel',
                    text: '<i class="fas fa-lg fa-file-excel"></i>', // Customize button text
                    className: 'bg-success text-white' // 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.
            });

            $(".modal-btn-save-changes, .btn-default-edit").click(function() {
                window.location.href = "/threatdetails";
            });
        });
    </script>
@endpush