@extends('adminlte::page')

@section('title', 'Infrastructure Category')

@section('content_header')
<div class="row mb-2">
    <div class="col-sm-6">
        <h1>Infrastructure Categories 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">Infrastructure Categories 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 infrastructure Categories 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 Category" />

    </div>
    <div class="card-body">
        <table id="infrastructure_category_table" class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Category 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">Electrical</a></td>
                    <td>Jonson</td>
                    <td>28-12-2023 05:00 PM</td>
                    <td>Rahul Swami</td>
                    <td>05-11-2024 09:48 AM</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td><a href="#" data-toggle="modal" data-target="#modalCustom">Environmental / Ecosystems</a></td>
                    <td>Jonson</td>
                    <td>28-12-2023 05:00 PM</td>
                    <td>Rahul Swami</td>
                    <td>05-11-2024 09:48 AM</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td><a href="#" data-toggle="modal" data-target="#modalCustom">Fire/Security/Safety Systems</a></td>
                    <td>Jonson</td>
                    <td>28-12-2023 05:00 PM</td>
                    <td>Rahul Swami</td>
                    <td>05-11-2024 09:48 AM</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td><a href="#" data-toggle="modal" data-target="#modalCustom">Flare Systems</a></td>
                    <td>Jonson</td>
                    <td>28-12-2023 05:00 PM</td>
                    <td>Rahul Swami</td>
                    <td>05-11-2024 09:48 AM</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td><a href="#" data-toggle="modal" data-target="#modalCustom">Off-Plot Piping</a></td>
                    <td>Jonson</td>
                    <td>28-12-2023 05:00 PM</td>
                    <td>Rahul Swami</td>
                    <td>05-11-2024 09:48 AM</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td><a href="#" data-toggle="modal" data-target="#modalCustom">Pressure Equipment (Static /
                            Piping)</a></td>
                    <td>Jonson</td>
                    <td>28-12-2023 05:00 PM</td>
                    <td>Rahul Swami</td>
                    <td>05-11-2024 09:48 AM</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td><a href="#" data-toggle="modal" data-target="#modalCustom">Instrumentation & Controls</a></td>
                    <td>Jonson</td>
                    <td>28-12-2023 05:00 PM</td>
                    <td>Rahul Swami</td>
                    <td>05-11-2024 09:48 AM</td>
                </tr>
                <!-- Add more static rows as needed -->
            </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
            $('#infrastructure_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="Infrastructure Category" 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">Infrastructure Category</label>
                                <input type="text" id="inputFullName" class="form-control"
                                    value="Pressure Equipment (Static / Piping)">
                            </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="">Jonson</option>
                                    <option>Alexander Morgan</option>
                                    <option>Rahul Swami</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>Jonson</option>
                                    <option>Alexander Morgan</option>
                                    <option selected>Rahul Swami</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