@extends('adminlte::page')

@section('title', 'Workstream Details')

@section('content_header')
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1>Workstream 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="/workstreams">Workstreams</a></li>
                <li class="breadcrumb-item active">Workstream Details</li>
            </ol>
        </div>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card card-primary card-outline">
                <div class="card-header">
                    <h3 class="card-title">Assest Hierarchy</h3>
                    <div class="card-tools pt-2">
                        <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-3">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputLevel1">Level 1 (Site)</label>
                                <select id="inputLevel1" class="form-control">
                                    <option>Select Site</option>
                                    <option selected="">Jurong</option>
                                    <option>Bukom</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputLevel2">Level 2 (Business Site)</label>
                                <select id="inputLevel2" class="form-control">
                                    <option>Select Business Site</option>
                                    <option selected="">Chemical</option>
                                    <option>Products</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputLevel3">Level 3 (Unit)</label>
                                <select id="inputLevel3" class="form-control">
                                    <option>Select Unit</option>
                                    <option selected="">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 (Sub Unit)</label>
                                <select id="inputLevel4" class="form-control">
                                    <option>Select Sub Unit</option>
                                    <option selected="">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>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card card-primary card-tabs card-outline">
                <div class="card-header p-0 pt-1">
                    <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="custom-tabs-one-details-tab" data-toggle="pill"
                                href="#custom-tabs-one-details" role="tab" aria-controls="custom-tabs-one-details"
                                aria-selected="true">Details</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="custom-tabs-one-related-tab" data-toggle="pill"
                                href="#custom-tabs-one-related" role="tab" aria-controls="custom-tabs-one-related"
                                aria-selected="false">Related</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="custom-tabs-one-approvers-tab" data-toggle="pill"
                                href="#custom-tabs-one-approvers" role="tab" aria-controls="custom-tabs-one-approvers"
                                aria-selected="false">Pre-Defined Approvers</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="custom-tabs-one-tabContent">
                        <div class="tab-pane fade active show" id="custom-tabs-one-details" role="tabpanel"
                            aria-labelledby="custom-tabs-one-details-tab">
                            <div class="card card-secondary">
                                <div class="card-header p-2">
                                    <h3 class="card-title ml-2">Information</h3>
                                    <div class="card-tools pt-2">
                                        <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="inputFullName">Workstream Name</label>
                                                <input type="text" id="inputFullName" class="form-control"
                                                    value="MTO SMPO PT Jurong">
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                @php
                                                    $config = [
                                                        "placeholder" => "Select Workstream Sponser (2nd Approver)",
                                                        "allowClear" => false,
                                                    ];
                                                @endphp
                                                <!-- Select2 Input -->
                                                <x-adminlte-select2 id="sel2Sponsor" name="sel2Sponsor"
                                                    label="Workstream Sponser (2nd Approver)" :config="$config">
                                                    <option selected>Kavitha Iyer</option>
                                                    <option>Yuhai Liang</option>
                                                    <option>Jacky Chua</option>
                                                    <option>YONG HUAN SEAH</option>
                                                    <option>Kiat-Siong Tok</option>
                                                    <option>Li-Feng Zhuang</option>
                                                </x-adminlte-select2>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                @php
                                                    $config = [
                                                        "placeholder" => "Select Workstream Lead (1st Approver)",
                                                        "allowClear" => false,
                                                    ];
                                                @endphp
                                                <!-- Select2 Input -->
                                                <x-adminlte-select2 id="sel2Lead" name="sel2Lead"
                                                    label="Workstream Lead (1st Approver)" :config="$config">
                                                    <option selected>Jason Ke</option>
                                                    <option>Yuhai Liang</option>
                                                    <option>Jacky Chua</option>
                                                    <option>YONG HUAN SEAH</option>
                                                    <option>Kiat-Siong Tok</option>
                                                    <option>Li-Feng Zhuang</option>
                                                </x-adminlte-select2>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                @php
                                                    $config = [
                                                        "placeholder" => "Select Finance Sponsor",
                                                        "allowClear" => false,
                                                    ];
                                                @endphp
                                                <!-- Select2 Input -->
                                                <x-adminlte-select2 id="sel2FSponsor" name="sel2FSponsor"
                                                    label="Finance Sponsor" :config="$config">
                                                    <option>Kavitha Iyer</option>
                                                    <option>Yuhai Liang</option>
                                                    <option>Jacky Chua</option>
                                                    <option>YONG HUAN SEAH</option>
                                                    <option>Kiat-Siong Tok</option>
                                                    <option selected>Li-Feng Zhuang</option>
                                                </x-adminlte-select2>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                @php
                                                    $config = [
                                                        "placeholder" => "Select Owner",
                                                        "allowClear" => false,
                                                    ];
                                                @endphp
                                                <!-- Select2 Input -->
                                                <x-adminlte-select2 id="sel2FinanceSponsor" name="sel2FinanceSponsor"
                                                    label="Owner" :config="$config">
                                                    <option>Kavitha Iyer</option>
                                                    <option>Yuhai Liang</option>
                                                    <option>Jacky Chua</option>
                                                    <option>YONG HUAN SEAH</option>
                                                    <option>Kiat-Siong Tok</option>
                                                    <option selected>Ung Ruey Chyi</option>
                                                </x-adminlte-select2>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.card-body -->
                            </div>
                            <div class="card card-secondary">
                                <div class="card-header p-2">
                                    <h3 class="card-title ml-2">System Information</h3>
                                    <div class="card-tools pt-2">
                                        <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="inputLastModifiedBy">Last Modified By</label>
                                                <p>Robert Joson</p>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label>Created By</label>
                                                <p>Rahul Swami</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <!-- text input -->
                                            <div class="form-group">
                                                <label for="inputLastModifiedAt">Last Modified At</label>
                                                <p>18-12-2024 10:00 PM</p>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label>Created At</label>
                                                <p>11-12-2024 05:15 PM</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.card-body -->
                            </div>
                            <!-- /.card -->
                        </div>
                        <div class="tab-pane fade" id="custom-tabs-one-related" role="tabpanel"
                            aria-labelledby="custom-tabs-one-related-tab">
                            <div class="card card-secondary">
                                <div class="card-header p-2">
                                    <h3 class="card-title ml-2">Threats</h3>
                                    <div class="card-tools pt-2">
                                        <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">
                                    <table id="workstream_table" class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>Threat Name</th>
                                                <th>Phase</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <!-- Static Data (Can be dynamically replaced with Blade variables if needed) -->
                                            <tr>
                                                <td><a href="/threatdetails">KM101 (TA2011)</a></td>
                                                <td>L5 Completed</a></td>
                                            </tr>
                                            <tr>
                                                <td><a href="/threatdetails">waster water processing capability</a></td>
                                                <td>L1 Idendify</a></td>
                                            </tr>
                                            <tr>
                                                <td><a href="/threatdetails">hydrogen availability</a></td>
                                                <td>L5 Completed</a></td>
                                            </tr>
                                            <tr>
                                                <td colspan="2" class="text-center"><a href="/threats">View All</a></td>
                                            </tr>
                                            <!-- Add more static rows as needed -->
                                        </tbody>
                                    </table>
                                </div>
                                <!-- /.card-body -->
                            </div>
                            <div class="card card-secondary">
                                <div class="card-header p-2">
                                    <h3 class="card-title ml-2">Workstream History</h3>
                                    <div class="card-tools pt-2">
                                        <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">
                                    <table id="workstream_histroy_table" class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>Date Time</th>
                                                <th>Field</th>
                                                <th>User</th>
                                                <th>Original Value</th>
                                                <th>New Value</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <!-- Static Data (Can be dynamically replaced with Blade variables if needed) -->
                                            <tr>
                                                <td>01-04-2024 08:08 AM</td>
                                                <td>Owner</td>
                                                <td>Ung Ruey Chyi</td>
                                                <td>Ung Ruey Chyi</td>
                                                <td>Jason Ke</td>
                                            </tr>
                                            <tr>
                                                <td>22-06-2023 09:32 AM</td>
                                                <td>Level 5</td>
                                                <td>Kock Su</td>
                                                <td></td>
                                                <td>SMPO Jurong - Area</td>
                                            </tr>
                                            <tr>
                                                <td>30-06-2023 08:06 PM</td>
                                                <td>Finance Sponser</td>
                                                <td>Pavan Gada</td>
                                                <td>Ung Ruey Chyi</td>
                                                <td>Li-Feng Zhunag</td>
                                            </tr>
                                            <tr>
                                                <td>14-06-2023 03:39 PM</td>
                                                <td>Workstream Sponser (2nd Approver)</td>
                                                <td>Ung Ruey Chyi</td>
                                                <td>Jay Rajangam</td>
                                                <td>Kavitha Iyer</td>
                                            </tr>
                                            <tr>
                                                <td colspan="5" class="text-center"><a href="/threats">View All</a></td>
                                            </tr>
                                            <!-- Add more static rows as needed -->
                                        </tbody>
                                    </table>
                                </div>
                                <!-- /.card-body -->
                            </div>
                        </div>
                        <div class="tab-pane fade" id="custom-tabs-one-approvers" role="tabpanel"
                            aria-labelledby="custom-tabs-one-approvers-tab">
                            <div class="card card-secondary">
                                <div class="card-header p-2">
                                    <h3 class="card-title ml-2">Threshold Tier 1 Approvers</h3>
                                    <div class="card-tools pt-2">
                                        <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">
                                    <table id="workstream_table" class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>Workstream Lead (1st Approver)</th>
                                                <th>Workstream Lead (2nd Approver)</th>
                                                <th>Technical Approver Level 2</th>
                                                <th>Technical Approver Level 1</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <!-- Static Data (Can be dynamically replaced with Blade variables if needed) -->
                                            <tr>
                                                <td><a href="#" data-toggle="modal" data-target="#modalCustom">L1</a></td>
                                                <td>Jason Ke</td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td><a href="#" data-toggle="modal" data-target="#modalCustom">L2</a></td>
                                                <td></td>
                                                <td>Kavitha Iyer</td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td><a href="#" data-toggle="modal" data-target="#modalCustom">L3RR</a></td>
                                                <td>Jason Ke</td>
                                                <td>Kavitha Iyer</td>
                                                <td>Li-Feng Zhuang</td>
                                                <td>Rahul S</td>
                                            </tr>
                                            <tr>
                                                <td><a href="#" data-toggle="modal" data-target="#modalCustom">L5</a></td>
                                                <td></td>
                                                <td>Kavitha Iyer</td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <!-- Add more static rows as needed -->
                                        </tbody>
                                    </table>
                                </div>
                                <!-- /.card-body -->
                            </div>
                            <div class="card card-secondary">
                                <div class="card-header p-2">
                                    <h3 class="card-title ml-2">Threshold Tier 2 Approvers</h3>
                                    <div class="card-tools pt-2">
                                        <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">
                                    <table id="workstream_table" class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>Workstream Lead (1st Approver)</th>
                                                <th>Workstream Lead (2nd Approver)</th>
                                                <th>Technical Approver Level 2</th>
                                                <th>Technical Approver Level 1</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <!-- Static Data (Can be dynamically replaced with Blade variables if needed) -->
                                            <tr>
                                                <td><a href="#" data-toggle="modal" data-target="#modalCustom">L1</a></td>
                                                <td>Jason Ke</td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td><a href="#" data-toggle="modal" data-target="#modalCustom">L2</a></td>
                                                <td></td>
                                                <td>Kavitha Iyer</td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td><a href="#" data-toggle="modal" data-target="#modalCustom">L3RR</a></td>
                                                <td>Jason Ke</td>
                                                <td>Kavitha Iyer</td>
                                                <td>Li-Feng Zhuang</td>
                                                <td>Rahul S</td>
                                            </tr>
                                            <tr>
                                                <td><a href="#" data-toggle="modal" data-target="#modalCustom">L5</a></td>
                                                <td></td>
                                                <td>Kavitha Iyer</td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <!-- Add more static rows as needed -->
                                        </tbody>
                                    </table>
                                </div>
                                <!-- /.card-body -->
                            </div>
                            <div class="card card-secondary">
                                <div class="card-header p-2">
                                    <h3 class="card-title ml-2">Threshold Tier 3 Approvers</h3>
                                    <div class="card-tools pt-2">
                                        <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">
                                    <table id="workstream_table" class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>Workstream Lead (1st Approver)</th>
                                                <th>Workstream Lead (2nd Approver)</th>
                                                <th>Technical Approver Level 2</th>
                                                <th>Technical Approver Level 1</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <!-- Static Data (Can be dynamically replaced with Blade variables if needed) -->
                                            <tr>
                                                <td><a href="#" data-toggle="modal" data-target="#modalCustom">L1</a></td>
                                                <td>Jason Ke</td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td><a href="#" data-toggle="modal" data-target="#modalCustom">L2</a></td>
                                                <td></td>
                                                <td>Kavitha Iyer</td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td><a href="#" data-toggle="modal" data-target="#modalCustom">L3RR</a></td>
                                                <td>Jason Ke</td>
                                                <td>Kavitha Iyer</td>
                                                <td>Li-Feng Zhuang</td>
                                                <td>Rahul S</td>
                                            </tr>
                                            <tr>
                                                <td><a href="#" data-toggle="modal" data-target="#modalCustom">L5</a></td>
                                                <td></td>
                                                <td>Kavitha Iyer</td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <!-- Add more static rows as needed -->
                                        </tbody>
                                    </table>
                                </div>
                                <!-- /.card-body -->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <a href="{{ route('workstreams.index') }}" class="btn btn-default">Cancel</a>
            <input type="submit" value="Save Changes" class="btn btn-success float-right">
        </div>
    </div>
@endsection

{{-- Custom --}}
<x-adminlte-modal id="modalCustom" title="Pre Defined Approvers (Tier 1)" 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-4">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputUOM">Phase</label>
                                <p>L2</p>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputMargin">Workstream</label>
                                <p>MTO SMPO PT Jurong</p>
                            </div>
                        </div>
                        <div class="col-sm-4">
                        </div>
                    </div>
                    <div class="card card-secondary">
                        <div class="card-header p-2">
                            <h3 class="card-title mt-1 ml-2">Workstream Lead (1st Approver)</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        @php
                                            $config = [
                                                "placeholder" => "Select Workstream Lead (1st Approver)",
                                                "allowClear" => false,
                                            ];
                                        @endphp
                                        <!-- Select2 Input -->
                                        <x-adminlte-select2 id="sel2WorkstreamLead" name="sel2WorkstreamLead"
                                            label="Workstream Lead (1st Approver)" :config="$config">
                                            <option>Kavitha Iyer</option>
                                            <option>Yuhai Liang</option>
                                            <option>Jacky Chua</option>
                                            <option>YONG HUAN SEAH</option>
                                            <option>Kiat-Siong Tok</option>
                                            <option selected>Jason Ke</option>
                                        </x-adminlte-select2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card card-secondary">
                        <div class="card-header p-2">
                            <h3 class="card-title mt-1 ml-2">Workstream Lead (2nd Approver)</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        @php
                                            $config = [
                                                "placeholder" => "Select Workstream Sponser (2nd Approver)",
                                                "allowClear" => false,
                                            ];
                                        @endphp
                                        <!-- Select2 Input -->
                                        <x-adminlte-select2 id="sel2WorkstreamSponsor" name="sel2WorkstreamSponsor"
                                            label="Workstream Sponser (2nd Approver)" :config="$config">
                                            <option>Kavitha Iyer</option>
                                            <option>Yuhai Liang</option>
                                            <option>Jacky Chua</option>
                                            <option>YONG HUAN SEAH</option>
                                            <option>Kiat-Siong Tok</option>
                                            <option selected>Jason Ke</option>
                                        </x-adminlte-select2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card card-secondary">
                        <div class="card-header p-2">
                            <h3 class="card-title mt-1 ml-2">Technical Approver Level 2</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        @php
                                            $config = [
                                                "placeholder" => "Select Technical Approver Level 2",
                                                "allowClear" => false,
                                            ];
                                        @endphp
                                        <!-- Select2 Input -->
                                        <x-adminlte-select2 id="sel2TechnicalApproverLvl2"
                                            name="sel2TechnicalApproverLvl2" label="Technical Approver Level 2"
                                            :config="$config">
                                            <option selected>Kavitha Iyer</option>
                                            <option>Yuhai Liang</option>
                                            <option>Jacky Chua</option>
                                            <option>YONG HUAN SEAH</option>
                                            <option>Kiat-Siong Tok</option>
                                            <option>Jason Ke</option>
                                        </x-adminlte-select2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>div>
                    <div class="card card-secondary">
                        <div class="card-header p-2">
                            <h3 class="card-title mt-1 ml-2">Technical Approver Level 1</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        @php
                                            $config = [
                                                "placeholder" => "Select Technical Approver Level 1",
                                                "allowClear" => false,
                                            ];
                                        @endphp
                                        <!-- Select2 Input -->
                                        <x-adminlte-select2 id="sel2TechnicalApproverLvl1"
                                            name="sel2TechnicalApproverLvl1" label="Technical Approver Level 1"
                                            :config="$config">
                                            <option selected>Kavitha Iyer</option>
                                            <option>Yuhai Liang</option>
                                            <option>Jacky Chua</option>
                                            <option>YONG HUAN SEAH</option>
                                            <option>Kiat-Siong Tok</option>
                                            <option>Jason Ke</option>
                                        </x-adminlte-select2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card card-secondary">
                        <div class="card-header p-2">
                            <h3 class="card-title mt-1 ml-2">System Information</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    <!-- text input -->
                                    <div class="form-group">
                                        <label for="inputLastModifiedBy">Last Modified By</label>
                                        <p>Robert Joson</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Created By</label>
                                        <p>Rahul Swami</p>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <!-- text input -->
                                    <div class="form-group">
                                        <label for="inputLastModifiedAt">Last Modified At</label>
                                        <p>18-12-2024 10:00 PM</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Created At</label>
                                        <p>11-12-2024 05:15 PM</p>
                                    </div>
                                </div>
                            </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="Save Changes" class="modal-btn-save-changes" />
    </x-slot>
</x-adminlte-modal>
{{-- Example button to open modal --}}

@push('js')
    <!-- Include jQuery, AdminLTE JS, and DataTables JS -->
    <script>
        $(".modal-btn-save-changes, .btn-success").click(function (e) {
            e.preventDefault();
            Swal.fire({
                title: "Are you sure?",
                text: "These changes will update all the threats (Excluding completed threats).",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#28a745",
                cancelButtonColor: "#6c757d",
                confirmButtonText: "Yes, save it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    const Toast = Swal.mixin({
                        toast: true,
                        position: "top",
                        showConfirmButton: false,
                        timer: 4000,
                        timerProgressBar: true,
                        didOpen: (toast) => {
                            toast.onmouseenter = Swal.stopTimer;
                            toast.onmouseleave = Swal.resumeTimer;
                        }
                    });
                    Toast.fire({
                        icon: "success",
                        title: "Changes saved successfully."
                    });
                    $(".model-btn-close").trigger('click');
                }
            });
        });
    </script>
@endpush