@extends('adminlte::page')

@section('title', 'Unit')

@section('content_header')
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1>Units 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">Units 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 unit 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 Unit" />

        </div>
        <div class="card-body">
            <table id="Unit_category_table" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Unit Name</th>
                        <th>Rated Capacity</th>
                        <th>UOM</th>
                        <th>Margin</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">EOD1/3-SJI</a></td>
                        <td>120</td>
                        <td>tons/day</td>
                        <td>114</td>
                        <td>Rahul Swami</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">EOG-2-SJI</a></td>
                        <td>2,160</td>
                        <td>tons/day</td>
                        <td>-239</td>
                        <td>Rahul Swami</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">HPEO - EOG2 (LEO)</a></td>
                        <td>336</td>
                        <td>tons/day</td>
                        <td>149.2</td>
                        <td>Rahul Swami</td>
                        <td>28-12-2023 05:00 PM</td>
                        <td>Rint Mina</td>
                        <td>05-11-2024 09:48 AM</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td><a href="#" data-toggle="modal" data-target="#modalCustom">MPG-SJI</a></td>
                        <td>218</td>
                        <td>tons/day</td>
                        <td>465</td>
                        <td>Robert</td>
                        <td>28-12-2023 05:00 PM</td>
                        <td>Rint Mina</td>
                        <td>05-11-2024 09:48 AM</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td><a href="#" data-toggle="modal" data-target="#modalCustom">PO1-SJI</a></td>
                        <td>518</td>
                        <td>tons/day</td>
                        <td>225</td>
                        <td>Robert</td>
                        <td>28-12-2023 05:00 PM</td>
                        <td>Rint Mina</td>
                        <td>05-11-2024 09:48 AM</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td><a href="#" data-toggle="modal" data-target="#modalCustom">PO2-SJI</a></td>
                        <td>870</td>
                        <td>tons/day</td>
                        <td>114</td>
                        <td>Robert</td>
                        <td>28-12-2023 05:00 PM</td>
                        <td>Rint Mina</td>
                        <td>05-11-2024 09:48 AM</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td><a href="#" data-toggle="modal" data-target="#modalCustom">POLYOLS1-SJI</a></td>
                        <td>193</td>
                        <td>tons/day</td>
                        <td>6</td>
                        <td>Robert</td>
                        <td>28-12-2023 05:00 PM</td>
                        <td>Rint Mina</td>
                        <td>05-11-2024 09:48 AM</td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td><a href="#" data-toggle="modal" data-target="#modalCustom">POLYOLS2-SJI</a></td>
                        <td>943</td>
                        <td>tons/day</td>
                        <td>61</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>9</td>
                        <td><a href="#" data-toggle="modal" data-target="#modalCustom">Side-Wide-SJI</a></td>
                        <td>1</td>
                        <td>0</td>
                        <td>1,000,000</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>10</td>
                        <td><a href="#" data-toggle="modal" data-target="#modalCustom">Sterling</a></td>
                        <td>82</td>
                        <td>tons/day</td>
                        <td>55</td>
                        <td>Rahul Swami</td>
                        <td>28-12-2023 05:00 PM</td>
                        <td>Jason</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
            $('#Unit_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="Unit" 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-6">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputFullName">Unit Name</label>
                                <input type="text" id="inputFullName" class="form-control" value="HPEO - EOG2 (LEO)">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputRetedCapacity">Rated Capacity</label>
                                <input type="text" id="inputRetedCapacity" class="form-control" value="336">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputUOM">UOM</label>
                                <input type="text" id="inputUOM" class="form-control" value="tons/day">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <!-- text input -->
                            <div class="form-group">
                                <label for="inputMargin">Margin</label>
                                <input type="text" id="inputMargin" class="form-control" value="149.2">
                            </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="">Rahul Swami</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>Rahul Swami</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