@extends('adminlte::page')

@section('title', 'Likelihood of Asset Consequence')

@section('content_header')
<div class="row mb-2">
    <div class="col-sm-6">
        <h1>Likelihood of Asset Consequences 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">Likelihood of Asset Consequences List</li>
        </ol>
    </div>
</div>
@endsection

@section('content')
<div class="card">
    <div class="card-header d-flex align-items-center">
        <h3 class="card-title">Here, you can easily manage likelihood of asset consequence by creating, viewing, and
            updating
            them.
        </h3>

        <x-adminlte-button class="btn bg-gradient-primary ml-auto" data-toggle="modal" data-target="#modalCustom"
            id="addUserBtn" label="Add New Likelihood" />

    </div>
    <div class="card-body">
        <table id="likelihood_category_table" class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Likelihood Name</th>
                    <th>Created By</th>
                    <th>Created At</th>
                    <th>Last Modified By</th>
                    <th>Last Modified At</th>
                </tr>
            </thead>
            <tbody>
                <!-- Static Data (Can be dynamically replaced with Blade variables if needed) -->
                <tr>
                    <td>1</td>
                    <td><a href="#" data-toggle="modal" data-target="#modalCustom">ReactA - Never heard of in the
                            industry</a></td>
                    <td>Robert</td>
                    <td>28-12-2023 05:00 PM</td>
                    <td>Jason</td>
                    <td>05-11-2024 09:48 AM</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td><a href="#" data-toggle="modal" data-target="#modalCustom">ReactB - Heard of in the industry</a>
                    </td>
                    <td>Robert</td>
                    <td>28-12-2023 05:00 PM</td>
                    <td>Jason</td>
                    <td>05-11-2024 09:48 AM</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td><a href="#" data-toggle="modal" data-target="#modalCustom">ReactC - Has happened in the
                            organisation or more than once per year in the industry</a></td>
                    <td>Robert</td>
                    <td>28-12-2023 05:00 PM</td>
                    <td>Jason</td>
                    <td>05-11-2024 09:48 AM</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td><a href="#" data-toggle="modal" data-target="#modalCustom">ReactD - Has happened at the location
                            or more than once per year within organisation</a></td>
                    <td>Robert</td>
                    <td>28-12-2023 05:00 PM</td>
                    <td>Jason</td>
                    <td>05-11-2024 09:48 AM</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td><a href="#" data-toggle="modal" data-target="#modalCustom">ReactE - Has happened more than once
                            per year at the location</a></td>
                    <td>Robert</td>
                    <td>28-12-2023 05:00 PM</td>
                    <td>Jason</td>
                    <td>05-11-2024 09:48 AM</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
@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
            $('#likelihood_category_table').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true,
                "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

{{-- Custom --}}
<x-adminlte-modal id="modalCustom" title="Likelihood of Asset Consequence" size="lg" 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-12">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputFullName">Likelihood Name</label>
                                <input type="text" id="inputFullName" class="form-control"
                                    value="ReactC - Has happened in the organisation or more than once per year in the industry">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputCreatedBy">Created By</label>
                                <select id="inputCreatedBy" class="form-control custom-select" disabled>
                                    <option>Select User</option>
                                    <option selected="">Robert</option>
                                    <option>Alexander Morgan</option>
                                    <option>Jason</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Created At</label>
                                <input type="text" id="inputCreatedDate" class="form-control"
                                    value="28-12-2023 05:00 PM" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputCreatedBy">Last Modified By</label>
                                <select id="inputCreatedBy" class="form-control custom-select" disabled>
                                    <option>Select User</option>
                                    <option>Robert</option>
                                    <option>Alexander Morgan</option>
                                    <option selected>Jason</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Last Modified At</label>
                                <input type="text" id="inputCreatedDate" class="form-control"
                                    value="05-11-2024 09:48 AM" disabled>
                            </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 src="{{ asset('vendor/adminlte/dist/js/adminlte.min.js') }}"></script>
    <script>
        $(".modal-btn-save-changes").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