@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</button>
                        {{-- check authorize add --}}
                        @if ($authorize->add == '1')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0" onclick="$('#my-form').submit()" id="btn-simpan"><i
                                    class="fas fa-floppy-disk me-1"> </i><span class="font-weight-bold">Simpan</button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    {{-- alert --}}
                    @include('components.alert')
                    <div class="card-body p-3">
                        <div class="row gx-4">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                    <h6 class="mb-0"> {{ $code_cpu }} | {{ $cpu->user_name }} </h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- insert maintenance --}}
            <div class="col-md-6">
                <br>
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row gx-4">
                            <div class="card-body">
                                <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                                <hr class="horizontal dark mt-0">
                                <div class="table-responsive">

                                    <form id="my-form">
                                        @csrf

                                        <div class="form-group">
                                            <label class="font-weight-bold">Label Code</label>
                                            <select class="form-select @error('code_cpu') is-invalid @enderror"
                                                name="code_cpu" value="{{ old('code_cpu') }}" placeholder="Input Code CPU"
                                                aria-label="Default select example">
                                                <option value="{{ $code_cpu }}">{{ $code_cpu }} |
                                                    {{ $cpu->user_name }}</option>
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label class="font-weight-bold">ID Prefentive</label>
                                            <div class="input-group mb-3">
                                                <input type="text" class="form-control" id="idpref" name="idpref"
                                                    value="" placeholder="Input ID Prefentive">
                                                <span class="input-group-text bg-primary text-light"
                                                    style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor: pointer;"
                                                    data-bs-toggle="modal" data-bs-target="#modalPref"><i
                                                        class="fa fa-magnifying-glass"></i></span>
                                            </div>

                                            <!-- error message untuk RAM Used -->
                                            @error('idpref')
                                                <div class="alert alert-danger mt-2">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>

                                        {{-- Modal Prefentive --}}
                                        <div class="modal fade bd-example-modal-lg" id="modalPref" tabindex="-1"
                                            aria-labelledby="exampleModalLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-lg">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="exampleModalLabel">List Prefentive
                                                        </h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div id="tableModalWrapper" class="table-responsive">
                                                            <h5 class="font-weight-bolder"></h5>
                                                            <table id="tableKategori"
                                                                class="table table-bordered table-striped">
                                                                <thead style="background-color: #daecff;">
                                                                    <tr>
                                                                        <th>Action</th>
                                                                        <th>Id</th>
                                                                        <th>Code</th>
                                                                        <th>User</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody id="pref-list">
                                                                    @foreach ($pref as $p)
                                                                        <!-- Baris customer dengan data kategori -->
                                                                        <tr>
                                                                            <td>
                                                                                <!-- Tombol untuk memilih customer -->
                                                                                <span class="btn badge bg-primary"
                                                                                    onclick="select_pref('{{ $p->id }}')">
                                                                                    <i class="bi bi-check-circle me-1"></i>
                                                                                    Select
                                                                                </span>
                                                                            </td>
                                                                            <td>{{ $p->id }}</td>
                                                                            <td>{{ $p->cpu_code }}</td>
                                                                            <td>{{ $p->user_name }}</td>
                                                                        </tr>
                                                                    @endforeach
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Close</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="font-weight-bold">Date</label>
                                            <input type="date" max="2026-10-03" id="date"
                                                class="form-control @error('date')
is-invalid
@enderror"
                                                value="{{ old('date') }}" name="date">

                                            <!-- error message untuk Date -->
                                            @error('date')
                                                <div class="alert alert-danger mt-2">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label class="font-weight-bold">CPU Usage</label>
                                            <div class="input-group mb-3">
                                                <input type="float" step="0.01" class="form-control" id="cpu_usage"
                                                    name="cpu_usage" value="{{ old('cpu_usage') }}"
                                                    placeholder="Input CPU Usage">
                                                <span class="input-group-text" id="basic-addon2">%</span>
                                            </div>

                                            <!-- error message untuk RAM Used -->
                                            @error('cpu_usage')
                                                <div class="alert alert-danger mt-2">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label class="font-weight-bold">RAM Used</label>
                                            <div class="input-group mb-3">
                                                <input type="float" step="0.00" max="{{ intval($sumResult) }}"
                                                    class="form-control" id="ram_used" name="ram_used"
                                                    value="{{ old('ram_used') }}" placeholder="Input RAM Used">
                                                <span class="input-group-text" id="basic-addon2">GB</span>
                                            </div>
                                            <!-- error message untuk RAM Used -->
                                            @error('ram_used')
                                                <div class="alert alert-danger mt-2">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label class="font-weight-bold">RAM Free</label>
                                            <div class="input-group mb-3">
                                                <input type="float" class="form-control" id="ram_free"
                                                    name="ram_free" value="{{ $sumResult - old('ram_used'), 2 }}"
                                                    placeholder="Input RAM Free" readonly>
                                                <span class="input-group-text" id="basic-addon2">GB</span>
                                            </div>

                                            <!-- error message untuk RAM Free -->
                                            @error('ram_free')
                                                <div class="alert alert-danger mt-2">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label class="font-weight-bold">Operating System</label>

                                            <select class="form-select @error('os') is-invalid @enderror" name="os"
                                                value="{{ old('os') }}" placeholder="Input Operating System">
                                                <option>Select Operating System</option>
                                                @foreach ($oprsystems as $oprsystem)
                                                    <option value="{{ $oprsystem->value }}">
                                                        {{ $oprsystem->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <!-- error message untuk Operating System  -->
                                            @error('os')
                                                <div class="alert alert-danger mt-2">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>

                                        <br>

                                        {{-- AUTO INPUT DARI MODAL ADD BUTTON - AUTO INPUT DARI MODAL ADD BUTTON - AUTO INPUT DARI MODAL ADD BUTTON --}}

                                        @forelse($harddisks as $hdd)
                                            <table class="table table-bordered table-striped">
                                                <thead>
                                                    <tr>
                                                        <th style="text-align: center;">Harddisk ({{ $hdd->merk }} |
                                                            {{ $hdd->size }} GB)
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        @if ($message = Session::get('success'))
                                                            <div class="alert alert-info">
                                                                <p>{{ $message }}</p>
                                                            </div>
                                                        @endif

                                                        @if ($message = Session::get('error'))
                                                            <div class="alert alert-danger">
                                                                <p>{{ $message }}</p>
                                                            </div>
                                                        @endif
                                                        <td>
                                                            <div class="text-right">
                                                                <a onclick="hitungTotalDiskUsed({{ $hdd->id }}, {{ $hdd->size }})"
                                                                    data-hdd-id="{{ $hdd->id }}"
                                                                    id="addDet-{{ $hdd->id }}">
                                                                    <img src="{{ asset('/storage' . '/' . 'add.png') }}"
                                                                        style="width: 32px;">
                                                                </a>
                                                            </div>
                                                            <br>
                                                            <div id="inputanAddButton-{{ $hdd->id }}">
                                                                <div id="dataDetail-{{ $hdd->id }}">
                                                                </div>
                                                            </div>

                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>

                                            <p> </p>
                                        @empty
                                        @endforelse
                                    </form>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- View Data --}}
            <div class="col-md-6">
                <br>
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row gx-4">
                            <div class="card-body">
                                <p class="text-uppercase text-sm">Data Memory</p>
                                <hr class="horizontal dark mt-0">
                                <div class="table-responsive">
                                    @forelse($memories as $memory)
                                        <div class="card shadow-sm mb-2">
                                            <div class="card-body">
                                                <table class="table table-bordered">
                                                    <div class="container text-center">
                                                        <tr>
                                                            <th colspan="2" style="text-align: center;">
                                                                {{ $no++ }} </th>
                                                        </tr>
                                                        <tr>
                                                            <th>Date </th>
                                                            <th><br />
<b>Warning</b>:  Undefined variable $memory in <b>/opt/lampp/htdocs/tsiasset/resources/views/pages/maintc/add.blade.php</b> on line <b>304</b><br />
<br />
<b>Warning</b>:  Attempt to read property "date" on null in <b>/opt/lampp/htdocs/tsiasset/resources/views/pages/maintc/add.blade.php</b> on line <b>304</b><br />
01 January 1970 </th>
                                                        </tr>
                                                        <tr>
                                                            <th> Merk </th>
                                                            <th> {{ $memory->merk }} </th>
                                                        </tr>
                                                        <tr>
                                                            <th> Type</th>
                                                            <th> {{ $memory->type }} </th>
                                                        </tr>
                                                        <tr>
                                                            <th> SN </th>
                                                            <th> {{ $memory->sn }} </th>
                                                        </tr>
                                                        <tr>
                                                            <th> Size (GB)</th>
                                                            <th> {{ $memory->size }} </th>
                                                        </tr>
                                                    </div>
                                                </table>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="alert alert-danger">
                                            Empty!
                                        </div>
                                    @endforelse
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <br>
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row gx-4">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <p class="text-uppercase text-sm">Data Harddisk</p>
                                    <hr class="horizontal dark mt-0">
                                    @forelse($harddisks as $hdd)
                                        <div class="card shadow-sm mb-2">
                                            <div class="card-body">
                                                <table class="table table-bordered">
                                                    <tr>
                                                        <th colspan="2" class="text-center font-weight-bold">
                                                            {{ $noh++ }}</th>
                                                    </tr>
                                                    <tr>
                                                        <th>Date</th>
                                                        <td>{{ date('d F Y', strtotime($hdd->date)) }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Merk</th>
                                                        <td>{{ $hdd->merk }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Type</th>
                                                        <td>{{ $hdd->type }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Socket</th>
                                                        <td>{{ $hdd->socket }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Size (GB)</th>
                                                        <td>{{ $hdd->size }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Operating System</th>
                                                        <td name="hdd-os">{{ $hdd->os }}</td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="alert alert-danger">
                                            Empty!
                                        </div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row gx-4">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <p class="text-uppercase text-sm">Data Document</p>
                                    <hr class="horizontal dark mt-0">
                                    @forelse($docs as $doc)
                                        <div class="card shadow-sm mb-2">
                                            <div class="card-body">
                                                <table class="table table-bordered">
                                                    <tr>
                                                        <th style="text-align: center;">{{ $doc->note }}</th>
                                                        {{-- <th><a href="{{ url('/storage/app/public/documents' , $doc->file) }}"  style="text-decoration: none; font-size: 15px;" target="_blank"> {{ $doc->file }} </th> --}}
                                                    </tr>

                                                    <tr>
                                                        <td rowspan="11" style="text-align: center;">

                                                            <img onclick="showModal('{{ $doc->image }}','{{ $doc->id }}')"
                                                                src="{{ asset('/storage' . '/' . $doc->image) }}"
                                                                class="rounded" style="width: 200px;">
                                                            <p></p>
                                                            <h6>*Click image to enlarge </h6>
                                                        </td>

                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="alert alert-danger">
                                            Empty!
                                        </div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="modal-image">
    </div>

    {{-- DETAIL MAINTENANCE - DETAIL MAINTENANCE - DETAIL MAINTENANCE - DETAIL MAINTENANCE - DETAIL MAINTENANCE - DETAIL MAINTENANCE - DETAIL MAINTENANCE - DETAIL MAINTENANCE --}}

    <!-- Modal -->
    <div class="modal fade" id="detailmaintenance" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="detailmaintenanceLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="detailmaintenanceLabel">Detail Maintenance</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th style="text-align: center;">Detail Maintenance</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    @if ($errors->any())
                                        <div class="alert alert-danger">
                                            <strong>Whoops!</strong> There were some problems with your input.<br><br>
                                            <ul>
                                                @foreach ($errors->all() as $error)
                                                    <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif

                                    <form id="maintenance-form" onsubmit="saveData(event)" method="POST"
                                        enctype="multipart/form-data">
                                        @csrf
                                        <div class="form-group">
                                            <label class="font-weight-bold">Label Code</label>
                                            <select class="form-select @error('code_cpu') is-invalid @enderror"
                                                name="code_cpu" value="{{ old('code_cpu') }}" placeholder="Input CPU ID"
                                                aria-label="Default select example">
                                                <option value="{{ $cpu->code }}">{{ $cpu->code }}</option>
                                            </select>
                                            <!-- error message untuk USER CPU-->
                                            @error('code_cpu')
                                                <div class="alert alert-danger mt-2">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                        <div class="form-group">
                                            <label class="font-weight-bold">Date</label>
                                            <input type="date" id="modalDate" class="form-control" name="date">


                                            <!-- error message untuk Date -->
                                            @error('date')
                                                <div class="alert alert-danger mt-2">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                        <div class="form-group">
                                            <label class="font-weight-bold">Harddisk</label>
                                            <select class="form-select @error('hdd') is-invalid @enderror" id="hdd"
                                                name="hdd" value="{{ old('hdd') }}" placeholder="Input CPU ID"
                                                aria-label="Default select example"
                                                data-harddisk-sizes="{{ json_encode($harddisks->pluck('size', 'id')->toArray()) }}"
                                                readonly>
                                                @forelse($harddisks as $hdd)
                                                    <option value="{{ $hdd->id }}">{{ $hdd->merk }} |
                                                        {{ $hdd->size }} GB
                                                    </option>
                                                @empty
                                                    <option> - </option>
                                                @endforelse
                                            </select>
                                            <!-- error message untuk USER CPU-->
                                            @error('hdd')
                                                <div class="alert alert-danger mt-2">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                        <label class="font-weight-bold">Disk Name</label>
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <input type="text" oninput="this.value = this.value.toUpperCase()"
                                                        class="form-control @error('name_disk') is-invalid @enderror"
                                                        value="{{ old('name_disk') }}" name="name_disk"
                                                        onchange="cekDisk(event)">
                                                    <!-- error message untuk Date -->
                                                    @error('name_disk')
                                                        <div class="alert alert-danger mt-2">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="form-check">
                                                    <input class="checkbox form-check-input" type="checkbox"
                                                        id="cekSys" name="cekSys" value="1"> System
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="font-weight-bold">Disk Used</label>
                                            <div class="input-group mb-3">
                                                <input type="float" class="form-control" id="disk_used"
                                                    name="disk_used" value="{{ old('disk_used') }}"
                                                    placeholder="Input DISK Used">
                                                <span class="input-group-text" id="basic-addon2">GB</span>
                                            </div>
                                            <!-- error message untuk disk Used -->
                                            @error('disk_used')
                                                <div class="alert alert-danger mt-2">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label class="font-weight-bold">Disk Free</label>
                                            <div class="input-group mb-3">
                                                <input type="float" class="form-control" id="disk_free"
                                                    name="disk_free" value="{{ old('disk_free') }}"
                                                    placeholder="Input disk Free">
                                                <span class="input-group-text" id="basic-addon2">GB</span>
                                            </div>
                                            <!-- error message for disk Free -->
                                            @error('disk_free')
                                                <div class="alert alert-danger mt-2">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                        <input type="hidden" id="hdd-id" name="hdd-id">
                                        <input type="hidden" id="hdd_size" name="hdd_size">
                                        <p></p>
                                        <button type="submit" class="btn btn-primary"
                                            data-bs-dismiss="modal">Save</button>
                                        {{-- <button type="submit" class="btn btn-secondary" data-bs-dismiss="modal">SAVE</button> --}}
                                        <button type="reset" class="btn btn-md btn-warning">RESET</button>
                                    </form>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>



    {{-- check flag js on dmenu --}}
    <script>
        // Update RAM Free dynamically when RAM Used changes
        $(document).ready(function() {
            $('#ram_used').on('input', function() {
                var ramUsed = $(this).val();
                var ramFree = {{ $sumResult }} - ramUsed;
                $('#ram_free').val(ramFree);
            });

            $('#tableKategori').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                "ordering": false,
                responsive: true,
            });
        });

        document.addEventListener("DOMContentLoaded", function() {
            var storedId = localStorage.getItem('selected_id');

            if (storedId) {
                console.log("ID yang tersimpan:", storedId);
                document.getElementById("idpref").value = storedId; // Masukkan ke input (jika ada)
            }
        });

        function select_pref(id) {
            document.getElementById('idpref').value = id;
            $('#modalPref').modal('hide');
        }

        $('#hdd').on('change', function() {
            var hddId = $(this).find('option:selected').data('hdd-id');
            // Use the hddId value to auto-input the HDD ID in the modal
        });

        function cekDisk(event) {
            const inputText = event.target.value;
            if (inputText !== 'C') {
                $('#cekSys').prop('checked', false);
                $('#cekSys').removeAttr('disabled', false);
            } else if (inputText == 'C') {
                $('#cekSys').prop('checked', true);
                $('#cekSys').attr('disabled', true);
            }
        }
        // Fungsi untuk mengisi nilai tanggal otomatis
        function autoFillDate(date) {
            // Set the date value to the input field in the modal
            document.getElementById("modalDate").value = date;
        }

        $('#detailmaintenance').on('show.bs.modal', function(e) {
            // Mendapatkan nilai tanggal dari input di awal
            var initialDate = $('#date').val();
            // Memanggil fungsi untuk mengisi nilai tanggal di modal
            autoFillDate(initialDate);
        });


        // Mendapatkan ukuran HDD yang dipilih dari data yang disimpan di atribut data-harddisk-sizes
        var harddiskSizes = JSON.parse(document.getElementById('hdd').getAttribute('data-harddisk-sizes'));

        // Mendapatkan elemen input untuk Disk Used dan Disk Free
        var diskUsedInput = document.getElementById('disk_used');
        var diskFreeInput = document.getElementById('disk_free');

        // Mendengarkan perubahan pada pilihan HDD
        document.getElementById('hdd').addEventListener('change', function() {
            var selectedHDDId = this.value;
            var selectedHDDSize = harddiskSizes[selectedHDDId];

            // Memperbarui atribut maksimum untuk input Disk Used sesuai dengan ukuran HDD yang dipilih
            diskUsedInput.max = selectedHDDSize;

            // Memperbarui atribut maksimum untuk input Disk Free sesuai dengan sisa ruang di HDD
            diskFreeInput.max = selectedHDDSize - diskUsedInput.value;



            // Jika penggunaan total disk (disk used + disk free) melebihi ukuran HDD yang dipilih, reset nilainya
            if (parseFloat(diskUsedInput.value) + parseFloat(diskFreeInput.value) > parseFloat(selectedHDDSize)) {
                diskFreeInput.value = '';
            }
        });

        // Mendengarkan perubahan pada input Disk Used
        diskUsedInput.addEventListener('input', function() {
            var selectedHDDId = document.getElementById('hdd').value;
            var selectedHDDSize = harddiskSizes[selectedHDDId];

            // Memperbarui atribut maksimum untuk input Disk Free sesuai dengan sisa ruang di HDD setelah memperhitungkan Disk Used
            diskFreeInput.max = selectedHDDSize - this.value;

            // Jika penggunaan total disk (disk used + disk free) melebihi ukuran HDD yang dipilih, reset nilainya
            if (parseFloat(this.value) + parseFloat(diskFreeInput.value) > parseFloat(selectedHDDSize)) {
                diskFreeInput.value = '';
            }

            if (parseFloat(this.value) > parseFloat(selectedHDDSize)) {
                diskUsedInput.value = '';
            }
        });

        // Mendengarkan perubahan pada input Disk Free
        diskFreeInput.addEventListener('input', function() {
            var selectedHDDId = document.getElementById('hdd').value;
            var selectedHDDSize = harddiskSizes[selectedHDDId];

            // Jika penggunaan total disk (disk used + disk free) melebihi ukuran HDD yang dipilih, reset nilainya
            if (parseFloat(diskUsedInput.value) + parseFloat(this.value) > parseFloat(selectedHDDSize)) {
                this.value = '';
            }
        });




        // Array untuk menyimpan data detail maintenance
        var dataArray = [];

        // Objek untuk menyimpan data berdasarkan hdd_id
        // var hddData = {};
        var hddData = [];

        var id = 1;


        // Function untuk menangani pengiriman formulir dan menampilkan data dari array
        function saveData(event) {
            // Mencegah pengiriman formulir ke server
            event.preventDefault();

            // Mendapatkan nilai dari input fields
            var cpuId = document.querySelector('[name="code_cpu"]').value;
            var idpref = document.querySelector('[name="idpref"]').value;
            var date = document.querySelector('[name="date"]').value;
            var hdd = document.querySelector('[name="hdd"]').value;
            var hddSize = document.querySelector('[name="hdd_size"]').value;
            var nameDisk = document.querySelector('[name="name_disk"]').value;
            var diskUsed = document.querySelector('[name="disk_used"]').value;
            var diskFree = document.querySelector('[name="disk_free"]').value;
            var cekSys = document.getElementById('cekSys');
            var cekSysval = cekSys.checked ? cekSys.value : '0';


            // Memeriksa apakah semua input terisi
            if (cpuId == '' || date == '' || hdd == '' || hddSize == '' || nameDisk == '' || diskUsed == '' || diskFree ==
                '') {


                Swal.fire({
                    icon: 'error', // Jenis ikon peringatan (warning)
                    title: 'Oops..',
                    text: 'Please fill in all fields before saving.',
                    confirmButtonText: 'OK' // Tekst tombol konfirmasi
                }).then(() => {

                    $('#detailmaintenance').modal('show'); // Memunculkan kembali modal jika ada input yang kosong
                });
                return; // Hentikan fungsi jika ada input yang kosong
            }

            // Membuat objek untuk menyimpan data
            var data = {
                id: id++,
                hdd: hdd,
                cpuId: cpuId,
                idpref: idpref,
                date: date,
                nameDisk: nameDisk,
                diskUsed: diskUsed,
                diskFree: diskFree,
                cekSys: cekSysval
            };
            //swall.fire
            if (nameDisk == 'A' || nameDisk == 'B') {
                Swal.fire({
                    icon: 'warning', // Jenis ikon peringatan (warning)
                    title: 'Disk name not found',
                    text: 'Please input a correct disk name!',
                    confirmButtonText: 'OK' // Tekst tombol konfirmasi
                });
            } else {
                var cekNama = true;
                for (var i = 0; i < hddData.length; i++) {
                    var nama_disk = hddData[i].nameDisk;
                    if (nameDisk == nama_disk) {
                        cekNama = false;
                    }
                }
                if (cekNama == false) {
                    Swal.fire({
                        icon: 'warning', // Jenis ikon peringatan (warning)
                        title: 'Disk Name is already exist!',
                        text: 'Please input a correct disk name!',
                        confirmButtonText: 'OK' // Tekst tombol konfirmasi
                    });
                } else {
                    var dataArr = hddData.filter(obj => obj.hdd === hdd); //wes bener step e
                    if (dataArr.length <= 0) {
                        console.log("dataArr else", dataArr);
                        hddData.push(data);
                        console.log('hdd data', hddData);
                        // Mengosongkan form setelah data ditambahkan ke array
                        document.getElementById("maintenance-form").reset();

                        // Menampilkan pesan sukses atau melakukan operasi lainnya
                        // alert("Data Detail Maintenance added succesfully!");
                        Swal.fire({
                            icon: 'success', // Jenis ikon peringatan (warning)
                            title: 'Success!',
                            text: 'Data Detail Maintenance added succesfully!',
                            confirmButtonText: 'OK' // Tekst tombol konfirmasi
                        });

                        // Menampilkan data dari array setelah berhasil disimpan sementara
                        populateFormData(hdd, hddSize);
                        $('input[name="jumlahArray"]').val(hddData.length); //jumlahArray untuk looping controller
                    } else {
                        var totalDisk = 0;
                        var cekdisk = true;

                        for (var i = 0; i < dataArr.length; i++) {
                            totalDisk += parseFloat(dataArr[i].diskUsed) + parseFloat(dataArr[i].diskFree);
                        }

                        totalDisk += parseFloat(diskUsed) + parseFloat(diskFree);
                        console.log("total disk", totalDisk);
                        if (totalDisk > parseFloat(hddSize)) {
                            cekdisk = false;
                        }

                        if (cekdisk == false) {
                            Swal.fire({
                                icon: 'warning', // Jenis ikon peringatan (warning)
                                title: 'Disk capacity is overload!',
                                text: 'Please input a correct size disk!',
                                confirmButtonText: 'OK' // Tekst tombol konfirmasi
                            });
                        } else {
                            hddData.push(data);
                            // Mengosongkan form setelah data ditambahkan ke array
                            document.getElementById("maintenance-form").reset();

                            // Menampilkan pesan sukses atau melakukan operasi lainnya
                            // alert("Data Detail Maintenance added succesfully!");
                            Swal.fire({
                                icon: 'success', // Jenis ikon peringatan (warning)
                                title: 'Success!',
                                text: 'Data Detail Maintenance added succesfully!',
                                confirmButtonText: 'OK' // Tekst tombol konfirmasi
                            });

                            // Menampilkan data dari array setelah berhasil disimpan sementara
                            populateFormData(hdd, hddSize);
                            $('input[name="jumlahArray"]').val(hddData
                                .length); //jumlahArray iki engko sing digawe looping nang controller 
                        }
                    }
                }
            }



        }

        function confirmDelete(id) {

            Swal.fire({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    // Jika pengguna menekan OK, panggil fungsi untuk menghapus data
                    deleteDataById(id);
                    Swal.fire(
                        "Deleted!",
                        "Data Storage has been deleted.",
                        "success"
                    );
                }
            });
        }



        function deleteDataById(id) {
            ///untuk mengambil hddId berdasarkan id
            var filterHdd = hddData.filter(obj => obj.id == id);
            var hdd_id = filterHdd[0].hdd;
            // filter hddData berdasarkan hdd_id
            var data = hddData.filter(obj => obj.hdd == hdd_id);

            //hapus semua tampilan dataDetail sesuai hdd_id
            for (var i = 0; i < data.length; i++) {
                $('#dataDetail-' + hdd_id).remove();
            }

            //menghapus data di dalam array
            hddData = hddData.filter(obj => obj.id !== id);
            //buat variable baru untuk panjang looping sesuai hdd_id
            var lengthArr = hddData.filter(obj => obj.hdd == hdd_id);

            for (var i = 0; i < lengthArr.length; i++) {
                var centang = '';
                if (lengthArr[i]['cekSys'] == '1') {
                    centang = 'checked';
                }
                $('#inputanAddButton-' + hdd_id).append(`
                <div id='dataDetail-` + hdd_id + `'>
                    <div class="row">
                        <label class="font-weight-bold">Disk Name</label>
                        <div class="col-6">
                            <div class="form-group">
                                <input type="text" class="form-control" name="name-disk-` + hdd_id + `-` + i + `" readonly>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-check">
                                <input class="checkbox form-check-input" type="checkbox"
                                    name="disk-system-` + hdd_id + `-` + i + `" ` + centang + ` disabled> System
                            </div>
                        </div>
                    </div>
                                            
                    <div class="form-group">
                        <label class="font-weight-bold">Disk Used</label>
                        <div class="input-group mb-3">
                            <input type="number" class="form-control" name="disk-used-` + hdd_id + `-` + i + `" readonly>
                            <span class="input-group-text" id="basic-addon2">GB</span>
                        </div>
                    </div>
                                            
                    <div class="form-group">
                        <label class="font-weight-bold">Disk Free</label>
                        <div class="input-group mb-3">
                            <input type="number" class="form-control" name="disk-free-` + hdd_id + `-` + i + `" readonly>
                            <span class="input-group-text" id="basic-addon2">GB</span>
                        </div>
                    </div>
                        <button type="button" class="btn btn-sm btn-outline-success" data-bs-toggle="modal" data-bs-target="#Editdetailmaintenance"> EDIT </button>
                        <button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteDataById(` +
                    lengthArr[i].id + `)">DEL</button>

                </div>
                `);

            }

            for (var i = 0; i < lengthArr.length; i++) {
                var nameDiskInputs = $('input[name="name-disk-' + hdd_id + '-' + i + '"]');
                var diskUsedInputs = $('input[name="disk-used-' + hdd_id + '-' + i + '"]');
                var diskFreeInputs = $('input[name="disk-free-' + hdd_id + '-' + i + '"]');
                var diskSysInputs = $('input[name="disk-system-' + hdd_id + '-' + i + '"]');

                nameDiskInputs.val(lengthArr[i].nameDisk);
                diskUsedInputs.val(lengthArr[i].diskUsed);
                diskFreeInputs.val(lengthArr[i].diskFree);
                diskSysInputs.val(lengthArr[i].cekSys);
            }
        }



        // Function untuk menampilkan data yang sudah tersimpan dalam array berdasarkan hdd_id
        function populateFormData(hddId, hddSize) {

            // Mendapatkan data berdasarkan hdd_id
            // var data = hddData[hddId] || [];
            var data = hddData.filter(obj => obj.hdd === hddId);


            for (var i = 0; i < data.length; i++) {
                $('#dataDetail-' + hddId).remove();
            }
            // Loop melalui semua data untuk hdd_id ini
            for (var i = 0; i < data.length; i++) {
                var centang = '';
                if (data[i]['cekSys'] == '1') {
                    centang = 'checked';
                }
                $('#inputanAddButton-' + hddId).append(`
                <div id='dataDetail-` + hddId + `'>
                    <div class="row">
                        <label class="font-weight-bold">Disk Name</label>
                        <div class="col-6">
                            <div class="form-group">
                                <input type="text" class="form-control" name="name-disk-` + hddId + `-` + i + `" readonly>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-check">
                                <input class="checkbox form-check-input" type="checkbox"
                                    name="disk-system-` + hddId + `-` + i + `" ` + centang + ` disabled> System
                            </div>
                        </div>
                    </div>
                                            
                    <div class="form-group">
                        <label class="font-weight-bold">Disk Used</label>
                        <div class="input-group mb-3">
                            <input type="number" class="form-control" name="disk-used-` + hddId + `-` + i + `" readonly>
                            <span class="input-group-text" id="basic-addon2">GB</span>
                        </div>
                    </div>
                                            
                    <div class="form-group">
                        <label class="font-weight-bold">Disk Free</label>
                        <div class="input-group mb-3">
                            <input type="number" class="form-control" name="disk-free-` + hddId + `-` + i + `" readonly>
                            <span class="input-group-text" id="basic-addon2">GB</span>
                        </div>
                    </div>
                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="editDataById(` + hddId +
                    `, ` + i + ` , ` + hddSize + `)" id="btn-edit-` + i + `-` + hddId + `"> EDIT </button>
                        <button type="button" class="btn btn-sm btn-outline-success" onclick="saveDataById(` + data[i]
                    .id + `,` + hddId + `, ` + i + `, ` + hddSize + `)" id="btn-save-` + i + `-` + hddId + `" hidden> SAVE </button>
                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="cancelDataById(` + hddId +
                    `, ` + i + ` , ` + hddSize + `)" id="btn-cancel-` + i + `-` + hddId + `" hidden> Cancel </button>
                        <button type="button" class="btn btn-sm btn-outline-danger" onclick="confirmDelete(` + data[i]
                    .id + `)" id="btn-delete-` + i + `-` + hddId + `">DEL</button>

                </div>
                `);
            }


            for (var i = 0; i < data.length; i++) {
                var nameDiskInputs = $('input[name="name-disk-' + hddId + '-' + i + '"]');
                var diskUsedInputs = $('input[name="disk-used-' + hddId + '-' + i + '"]');
                var diskFreeInputs = $('input[name="disk-free-' + hddId + '-' + i + '"]');
                var diskSysInputs = $('input[name="disk-system-' + hddId + '-' + i + '"]');

                nameDiskInputs.val(data[i].nameDisk);
                diskUsedInputs.val(data[i].diskUsed);
                diskFreeInputs.val(data[i].diskFree);
                diskSysInputs.val(data[i].cekSys);
            }


        }

        function editDataById(hddId, i) {
            $('#addDet-' + hddId).attr('hidden', true);
            $('#btn-edit-' + i + '-' + hddId).attr('hidden', true);
            $('#btn-save-' + i + '-' + hddId).removeAttr('hidden');
            $('#btn-delete-' + i + '-' + hddId).attr('hidden', true);
            $('#btn-cancel-' + i + '-' + hddId).removeAttr('hidden');
            $('input[name=name-disk-' + hddId + '-' + i + ']').removeAttr('readonly');
            $('input[name=disk-used-' + hddId + '-' + i + ']').removeAttr('readonly');
            $('input[name=disk-free-' + hddId + '-' + i + ']').removeAttr('readonly');
            $('input[name=disk-system-' + hddId + '-' + i + ']').removeAttr('disabled');
        }

        function cancelDataById(hddId, i) {
            $('#addDet-' + hddId).removeAttr('hidden');
            $('#btn-edit-' + i + '-' + hddId).removeAttr('hidden');
            $('#btn-save-' + i + '-' + hddId).attr('hidden', true);
            $('#btn-cancel-' + i + '-' + hddId).attr('hidden', true);
            $('#btn-delete-' + i + '-' + hddId).removeAttr('hidden');

            $('input[name=name-disk-' + hddId + '-' + i + ']').attr('readonly', true);
            $('input[name=disk-used-' + hddId + '-' + i + ']').attr('readonly', true);
            $('input[name=disk-free-' + hddId + '-' + i + ']').attr('readonly', true);
            $('input[name=disk-system-' + hddId + '-' + i + ']').attr('disabled', true);

        }


        function saveDataById(id, hddId, idx, hddSize) {

            console.log("hdddata awal", hddData);
            //mengambil value dari inputan
            var nameDiskInputs = $('input[name="name-disk-' + hddId + '-' + idx + '"]');
            var diskUsedInputs = $('input[name="disk-used-' + hddId + '-' + idx + '"]');
            var diskFreeInputs = $('input[name="disk-free-' + hddId + '-' + idx + '"]');
            var cekSystemInputs = $('input[name="disk-system-' + hddId + '-' + idx + '"]:checked');
            // var cekSystemInputs = document.getElementByName('disk-system-' + hddId + '-' + idx + '');

            //mencari index berdasarkan nama disk dan hdd Id
            var objFind = hddData.findIndex(obj => obj.id == id);
            console.log(objFind);

            var hddFind = hddData.filter(item => item.id == id);
            console.log('hddFind', hddFind);

            // mengecek nama disk pada array
            var cekNama = true;
            for (var i = 0; i < hddData.length; i++) {
                if (hddData[i].nameDisk == nameDiskInputs.val() && hddData[i].id == id) { //jika nama disk sudah ada
                    cekNama = false;
                    break;
                }

            }

            //mengecek jika tidak ganti nama disk
            if (cekNama == false) {

                var totalDisk = 0;
                var cekdisk = true;


                for (var i = 0; i < hddData.length; i++) {
                    if (hddData[i].id == id) {
                        if (i == objFind) {
                            continue;
                        } else {
                            totalDisk += parseFloat(hddData[i].diskUsed) + parseFloat(hddData[i].diskFree);
                        }
                    }
                }

                // for (let i = 0; i < hddFind.length; i++) {
                //     if (i == objFind) {
                //         continue;
                //     } else {
                //         totalDisk += parseFloat(hddFind[i].diskUsed) + parseFloat(hddFind[i].diskFree);
                //     }
                // }

                totalDisk += parseFloat(diskUsedInputs.val()) + parseFloat(diskFreeInputs.val());
                console.log("total disk", totalDisk);
                if (totalDisk > parseFloat(hddSize)) {
                    cekdisk = false;
                }

                if (cekdisk == false) {
                    Swal.fire({
                        icon: 'warning', // Jenis ikon peringatan (warning)
                        title: 'Disk capacity is overload!',
                        text: 'Please input a correct size disk!',
                        confirmButtonText: 'OK' // Tekst tombol konfirmasi
                    });
                } else {
                    $('#addDet-' + hddId).removeAttr('hidden');
                    $('#btn-edit-' + idx + '-' + hddId).removeAttr('hidden');
                    $('#btn-save-' + idx + '-' + hddId).attr('hidden', true);
                    $('input[name=name-disk-' + hddId + '-' + idx + ']').attr('readonly', true);
                    $('input[name=disk-used-' + hddId + '-' + idx + ']').attr('readonly', true);
                    $('input[name=disk-free-' + hddId + '-' + idx + ']').attr('readonly', true);
                    $('input[name=disk-system-' + hddId + '-' + idx + ']').attr('disabled', true);

                    //lakukan pengecekan system, jika centang maka nilai 1 jika tidak maka nilai 0
                    var systemVal = '';
                    if (cekSystemInputs.val()) {
                        systemVal = '1';
                    } else {
                        systemVal = '0';
                    }
                    hddData[objFind].nameDisk = nameDiskInputs.val();
                    hddData[objFind].diskUsed = parseFloat(diskUsedInputs.val());
                    hddData[objFind].diskFree = parseFloat(diskFreeInputs.val());
                    hddData[objFind].cekSys = systemVal;


                    console.log('edit', hddData);
                    Swal.fire({
                        icon: 'success', // Jenis ikon peringatan (warning)
                        title: 'Success!',
                        text: 'Edit data successfully!',
                        confirmButtonText: 'OK' // Tekst tombol konfirmasi
                    });

                }
            } else {
                alert('Disk Name is already used');
            }

        }

        // Fungsi untuk menghitung total disk used dari dataArray
        function hitungTotalDiskUsed(hddId, hddSize) {
            var data = hddData.filter(obj => obj.hdd === hddId.toString());
            var totalDisk = 0;
            //inisialisasi hdd size di modal detail
            var modal = $('#detailmaintenance');
            modal.find('#hdd_size').val(hddSize);

            if (data.length <= 0) {
                //jalankan fungsi add detail
                var modal = $('#detailmaintenance');
                modal.find('#hdd').val(hddId);
                modal.modal('show');
            } else {
                var totaldisk = true;

                for (var i = 0; i < data.length; i++) {
                    totalDisk += parseFloat(data[i].diskUsed) + parseFloat(data[i].diskFree);
                }

                if (totalDisk == hddSize) {
                    totaldisk = false;
                }
                if (totaldisk == false) {
                    Swal.fire({
                        icon: 'warning', // Jenis ikon peringatan (warning)
                        title: 'Can not add a new disk!',
                        text: 'This disk is full!',
                        confirmButtonText: 'OK' // Tekst tombol konfirmasi
                    });
                } else {
                    var modal = $('#detailmaintenance');
                    modal.find('#hdd').val(hddId);
                    modal.modal('show');
                }
                // console.log("total Disk", totalDisk);
                // return totalDiskUsed;
            }
        }


        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $("#my-form").submit(function(e) {
            e.preventDefault();
            var cpuId = document.querySelector('[name="code_cpu"]').value;
            var idpref = document.querySelector('[name="idpref"]').value;
            var date = document.querySelector('[name="date"]').value;
            var cpuUsage = document.querySelector('[name="cpu_usage"]').value;
            var ramUsed = document.querySelector('[name="ram_used"]').value;
            var ramFree = document.querySelector('[name="ram_free"]').value;
            var os = document.querySelector('[name="os"]').value;


            var mainten = {
                cpuId: cpuId,
                idpref: idpref,
                date: date,
                cpuUsage: cpuUsage,
                ramUsed: ramUsed,
                ramFree: ramFree,
                os: os,

                detail: hddData
            };
            // Bersihkan pesan kesalahan sebelum mengirim permintaan
            $('.error-message').remove();

            // Disabled button simpan
            $('#btn-simpan').attr('disabled', true); //wes bisa dicoba

            // Validasi apakah ada data yang kosong
            var isEmpty = Object.values(mainten).some(value => value === '');
            if (isEmpty) {
                // Jika ada data yang kosong, tampilkan pesan kesalahan
                $('#my-form').prepend(
                    '<div class="alert alert-danger error-message mt-2">Please fill in all fields.</div>');
                return; // Hentikan eksekusi kode lebih lanjut
            }

            $.ajax({
                url: '{{ URL::to('/') }}/maintenance/' + cpuId,
                type: "post",
                data: mainten,
                success: function(response) {
                    // Tampilkan alert sukses
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: 'Data has been saved successfully.',
                        confirmButtonText: 'OK'
                    }).then((result) => {
                        // Redirect ke halaman lain setelah menutup alert
                        if (result.isConfirmed) {
                            window.location.href = response.redirect;
                        }
                    });
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                    //Tampilkan pesan kesalahan jika terjadi kesalahan dalam permintaan AJAX
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'Make sure to complete all the fields correctly!'
                    });
                }
            });

        });


        function showModal(image, id) {
            $('.modal-image').append(`
                <div class="modal fade" id="modalDialogScrollableImage` + id + `" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
                        <div class="modal-dialog modal-dialog-centered modal-md">
                            <div class="modal-content" style="width: 100%;">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="imageModalLabel">Preview Image</h5>
                                    <button type="button" class="btn-close"
                                                                    data-bs-dismiss="modal" aria-label="Close">
                                                                    <span aria-hidden="true">&times;</span>
                                                                </button>
                                </div>
                                <div class="modal-body">
                                    <img src="{{ asset('/storage' . '/`+ image +` ') }}"  alt="image" class="w-100 border-radius-lg shadow-sm">
                                </div>
                            </div>
                        </div>
                    </div>

                `);
            $('#modalDialogScrollableImage' + id).modal('show');
        }
    </script>
@endsection