@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 edi --}}
                        @if ($authorize->edit == '1')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0" onclick="$('#my-form').submit()"><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">
                    <div class="card-body p-3">
                        <div class="row gx-4">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                    <h6 class="mb-0"> {{ $maintenance->code_cpu }} | {{ $maintenance->user_name }} </h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- FORM INPUT 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">View {{ $title_menu }}</p>
                                <hr class="horizontal dark mt-0">
                                <div class="table-responsive">
                                    <form id="my-form">
                                        @csrf


                                        <div class="form-group">
                                            <select class="form-select @error('code_cpu') is-invalid @enderror"
                                                value="{{ old('cpu_id', $maintenance->code_cpu) }}"
                                                placeholder="Input Code CPU" aria-label="Default select example" disabled>
                                                <option selected> {{ $maintenance->code_cpu }} |
                                                    {{ $maintenance->user_name }} </option>
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label class="font-weight-bold">ID Maintenance</label>

                                            <input type="text" id="idtrans" class="form-control"
                                                value="{{ old('idtrans', $maintenance->idtrans) }}" name="idtrans" readonly>

                                        </div>

                                        <div class="form-group">
                                            <label class="font-weight-bold">ID Prefentive</label>
                                            <div class="input-group mb-3">
                                                <input type="hidden" id="oldidpref" name="oldidpref"
                                                    value="{{ $maintenance->idpref }}">
                                                <input type="text" class="form-control" id="idpref" name="idpref"
                                                    value="{{ old('idpref', $maintenance->idpref) }}"
                                                    placeholder="Input ID Prefentive" readonly>
                                                <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>
                                            {{-- 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>


                                        <div class="form-group">
                                            <label class="font-weight-bold">Date</label>
                                            <input type="date" max="2026-10-03" id="date"
                                                class="form-control" value="{{ old('date', $maintenance->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="{{ $maintenance->cpu_usage }}"
                                                    placeholder="Input CPU Usage">
                                                <span class="input-group-text" id="basic-addon2">%</span>
                                            </div>

                                            <!-- error message untuk CPU Usage -->
                                            @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" class="form-control" id="ram_used"
                                                    name="ram_used" value="{{ $maintenance->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="{{ $maintenance->ram_free }}"
                                                    placeholder="Input RAM Free">
                                                <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 selected>{{ $maintenance->os }}</option>
                                                @foreach ($oprsystems as $oprsystem)
                                                    <option value="{{ $oprsystem->name }}">
                                                        {{ $oprsystem->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <!-- error message untuk Operating System  -->
                                            @error('os')
                                                <div class="alert alert-danger mt-2">
                                                    {{ $message }}
                                                </div>
                                            @enderror

                                        </div>

                                        @forelse($harddisks as $hdd)
                                            <table class="table table-bordered table-striped">
                                                <thead>
                                                    <tr>
                                                        <th style="text-align: center;" colspan="2">Harddisk
                                                            ({{ $hdd->merk }} | {{ $hdd->size }} GB)
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <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>


                                                            @forelse($detmaintain as $det)
                                                                @if (
                                                                    $det->idtrans == $maintenance->idtrans &&
                                                                        $det->date == $maintenance->date &&
                                                                        $det->hdd == $hdd->id &&
                                                                        $det->code_cpu == $maintenance->code_cpu)
                                                                    @php
                                                                        $total++;
                                                                    @endphp
                                                                    <input type="hidden"
                                                                        name="detailId-{{ $det->hdd }}-{{ $idx }}"
                                                                        value="{{ $det->id }}">

                                                                    @csrf
                                                                    {{-- @method('PUT') --}}

                                                                    <div id="inputanAddButton-{{ $hdd->id }}">

                                                                        <div id="dataDetail-{{ $hdd->id }}">
                                                                            <input type="hidden"
                                                                                name="ketDetail-{{ $hdd->id }}-{{ $idx }}"
                                                                                value="update">
                                                                            <input type="hidden" name="cpuId"
                                                                                id="cpuId"
                                                                                value="{{ $det->code_cpu }}">


                                                                            <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"
                                                                                            id="diskName"
                                                                                            name="diskName-{{ $hdd->id }}-{{ $idx }}"
                                                                                            value="{{ $det->name_disk }}"
                                                                                            readonly>
                                                                                    </div>
                                                                                </div>
                                                                                @if ($det->flag_disk == 1)
                                                                                    <div class="col-6">
                                                                                        <div class="form-check">
                                                                                            <input
                                                                                                class="checkbox form-check-input"
                                                                                                type="checkbox"
                                                                                                id="disk-system"
                                                                                                name="disk-system-{{ $hdd->id }}-{{ $idx }}"
                                                                                                checked disabled> System
                                                                                        </div>
                                                                                    </div>
                                                                                @else
                                                                                    <div class="col-6">
                                                                                        <div class="form-check">
                                                                                            <input
                                                                                                class="checkbox form-check-input"
                                                                                                type="checkbox"
                                                                                                id="disk-system"
                                                                                                name="disk-system-{{ $hdd->id }}-{{ $idx }}"
                                                                                                disabled>
                                                                                            System
                                                                                        </div>
                                                                                    </div>
                                                                                @endif
                                                                            </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="diskUsed"
                                                                                        name="diskUsed-{{ $hdd->id }}-{{ $idx }}"
                                                                                        value="{{ $det->disk_used }}"
                                                                                        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="float"
                                                                                        class="form-control"
                                                                                        id="diskFree"
                                                                                        name="diskFree-{{ $hdd->id }}-{{ $idx }}"
                                                                                        value="{{ $det->disk_free }}"
                                                                                        readonly>
                                                                                    {{-- <span class="input-group-text" id="basic-addon2">GB</span> --}}
                                                                                </div>
                                                                            </div>


                                                                            <button type="button"
                                                                                class="btn btn-sm btn-outline-success"
                                                                                button
                                                                                onclick="editDataById('{{ $hdd->id }}',{{ $idx }})"
                                                                                id="btn-edit-{{ $idx }}-{{ $hdd->id }}">
                                                                                Edit </button>
                                                                            <button type="button"
                                                                                class="btn btn-sm btn-outline-success"
                                                                                button
                                                                                onclick="saveDataById('{{ $hdd->id }}','{{ $hdd->size }}',{{ $idx }})"
                                                                                id="btn-save-{{ $idx }}-{{ $hdd->id }}"
                                                                                hidden> Save </button>
                                                                            <button type="button"
                                                                                class="btn btn-sm btn-outline-danger"
                                                                                button
                                                                                onclick="cancelDataById('{{ $hdd->id }}',{{ $idx }})"
                                                                                id="btn-cancel-{{ $idx }}-{{ $hdd->id }}"
                                                                                hidden>
                                                                                Cancel </button>
                                                                            <button type="button"
                                                                                class="btn btn-sm btn-outline-danger"
                                                                                button
                                                                                onclick="confirmDelete({{ $idx }},'{{ $hdd->size }}')"
                                                                                id="btn-delete-{{ $idx }}-{{ $hdd->id }}">DEL</button>

                                                                        </div>

                                                                    </div>

                                                                    <br>

                                                                    <input type="hidden" id="hdd-id-{{ $idx }}"
                                                                        name="hdd-id-{{ $idx }}"
                                                                        value="{{ $hdd->id }}">
                                                                    <input type="hidden"
                                                                        id="hdd_size-{{ $idx }}"
                                                                        name="hdd_size-{{ $idx }}"
                                                                        value="{{ $hdd->size }}">
                                                                    @php
                                                                        $idx++;
                                                                    @endphp
                                                                @endif
                                                            @empty
                                                                <div class="alert alert-danger">
                                                                    Empty!
                                                                </div>
                                                            @endforelse
                                                            <input type="hidden" name="jumlahDetail-{{ $hdd->id }}"
                                                                id="jumlahDetail-{{ $hdd->id }}">

                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <br>
                                        @empty
                                        @endforelse

                                        <input type="hidden" name="jumlahArray" value="{{ $total }}">

                                        <br>
                                    </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/msjasset/resources/views/pages/maintc/edit.blade.php</b> on line <b>435</b><br />
<br />
<b>Warning</b>:  Attempt to read property "date" on null in <b>/opt/lampp/htdocs/msjasset/resources/views/pages/maintc/edit.blade.php</b> on line <b>435</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>{{ $hdd->os }}</td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="alert alert-danger">
                                            Empty!
                                        </div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </div>



            </div>

            {{-- IMAGE --}}
            <div class="col-md-12">
                <br>
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row gx-4">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                    <h6 class="mb-0" style="text-align: center"> IMAGE </h6>
                                    <hr class="horizontal dark mt-0">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <p class="text-uppercase text-sm">Image Maintenance</p>
                                <hr class="horizontal dark mt-0">
                                @forelse($imagemain as $imagemain)
                                    @if ($imagemain->date == $maintenance->date && $imagemain->maintenance_id == $maintenance->idtrans)
                                        <div class="card shadow-sm mb-2">
                                            <div class="card-body">
                                                <table class="table table-bordered">
                                                    <tr>
                                                        <th style="text-align: center;">{{ $imagemain->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="showModalMaintenance('{{ $imagemain->file }}','{{ $imagemain->id }}')"
                                                                src="{{ asset('/storage/maintenances/' . $imagemain->file) }}"
                                                                class="rounded" style="width: 200px;">
                                                            {{-- <img data-bs-toggle="modal" data-bs-target="#exampleModal" src="{{ asset('/storage/app/public/documents/'.$doc->file) }}" class="rounded" style="width: 300px;"> --}}
                                                            <p></p>
                                                            <h6>*Click image to enlarge </h6>
                                                            <h6 style="text-align: center;">UPDATED AT: <br />
<b>Warning</b>:  Undefined variable $imagemain in <b>/opt/lampp/htdocs/msjasset/resources/views/pages/maintc/edit.blade.php</b> on line <b>566</b><br />
<br />
<b>Warning</b>:  Attempt to read property "updated_at" on null in <b>/opt/lampp/htdocs/msjasset/resources/views/pages/maintc/edit.blade.php</b> on line <b>566</b><br />
01 January 1970                                                            </h6>
                                                            <h6 style="text-align: right;">
                                                                <form onsubmit="return confirm('Are You Sure ?');"
                                                                    action="{{ route('maintenancesimage.destroy', $imagemain->id) }}"
                                                                    method="POST">
                                                                    <a href="{{ url('mtcimg/edit' . '/' . encrypt($imagemain->id)) }}"
                                                                        class="btn btn-sm btn-outline-primary">EDIT</a>
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <button type="submit"
                                                                        class="btn btn-sm btn-danger">DEL</button>
                                                            </h6>
                                                            </form>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    @endif
                                @empty
                                    <div class="alert alert-danger">
                                        Empty!
                                    </div>
                                @endforelse

                                <button type="submit"
                                    onclick="add('{{ $maintenance->idtrans }}', '{{ $maintenance->date }}')"
                                    class="btn btn-sm btn-primary mb-o"><i class="fa fa-file-arrow-up"></i>
                                    Unggah</button>

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

                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <p class="text-uppercase text-sm">Image 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>


            <hr class="horizontal dark">
        </div>
    </div>

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

    <div class="modal-image-maintenance">
    </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
                                        <input type="hidden" name="cpuId" id="cpuId"
                                            value="{{ $maintenance->code_cpu }}">
                                        <input type="hidden" name="date" id="date"
                                            value="{{ $maintenance->date }}">


                                        <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('diskName') is-invalid @enderror"
                                                        value="{{ old('diskName') }}" name="diskName"
                                                        onchange="cekDisk(event)">
                                                    <!-- error message untuk Date -->
                                                    @error('diskName')
                                                        <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="diskUsed"
                                                    name="diskUsed" 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="diskFree"
                                                    name="diskFree" 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-secondary"
                                            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>

    <!-- Modal UPLOAD IMAGE-->
    <div class="modal fade" id="modalImage" tabindex="-1" aria-labelledby="image" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {{-- <form action="" method="GET" id="myForm"> --}}
                    <form action="{{ url('/maintenance-image', $maintenance->idtrans) }}" method="POST"
                        enctype="multipart/form-data" id="myForm">
                        @csrf
                        <input type="hidden" id="maintenance_id" name="maintenance_id" value="">
                        <input type="hidden" id="date" name="date" value="">

                        <div class="mb-3">
                            <label class="form-label">File (Max. 6Mb):</label>
                            <input type="file" name="file" multiple
                                class="form-control @error('file') is-invalid @enderror">

                            @error('file')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label class="font-weight-bold">Note</label>
                            <input type="text" class="form-control @error('note') is-invalid @enderror" name="note"
                                value="{{ old('note') }}" placeholder="Input Note">

                            <!-- error message untuk NOte -->
                            @error('note')
                                <div class="alert alert-danger mt-2">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <p>
                        <div class="col-auto">
                            <button type="submit" id="submitBtn" class="btn btn-primary mb-3">UPLOAD</button>
                        </div>
                    </form>
                </div>

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



    <script>
        function add(mainIdtrans, mainDate) {
            // var form = document.getElementById("myForm");
            // form.action = "{{ route('maintenancesimage.store') }}";

            document.getElementById('maintenance_id').value = mainIdtrans;
            document.getElementById('date').value = mainDate;

            $('#modalImage').modal('show');

            $('input[name="maintenance_id"]').val(mainIdtrans);
            $('input[name="date"]').val(mainDate);
            $('#modalImage').modal('show');


        }

        function showModal(file, id) {
            $('.modal-image').append(`
            <div class="modal fade" id="modalDialogScrollableImage` + id + `" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" >
                    <div class="modal-dialog modal-dialog-centered modal-xl">
                        <div class="modal-content" style="width: 100%;">
                            <div class="modal-header">
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <img src="{{ asset('/storage/mst_document/` + file + `') }}" class="rounded" style="width:100%;">
                            </div>
                        </div>
                    </div>
                </div>
    
            `);
            $('#modalDialogScrollableImage' + id).modal('show');
        }

        function showModalMaintenance(file, id) {
            $('.modal-image-maintenance').append(`
            <div class="modal fade" id="modalDialogScrollableImage` + id + `" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" >
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content" style="width: 100%;">
                            <div class="modal-header">
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <img src="{{ asset('/storage/maintenances/` + file + `') }}" class="rounded" style="width:100%;">
                            </div>
                        </div>
                    </div>
                </div>
    
            `);
            $('#modalDialogScrollableImage' + id).modal('show');
        }

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

        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);
            }
        }

        // menampilkan data detail maintenance
        var hddData = [];
        var id = 0;
        $(document).ready(function() {
            // $('#ram_used').on('input', function() {
            //     var ramUsed = $(this).val();
            //     var ramFree = ramUsed;
            //     $('#ram_free').val(ramFree);
            // });
            $('#ram_used').on('input', function() {
                var ramUsed = $(this).val();
                var ramFree = {{ $sumResult }} - ramUsed;
                $('#ram_free').val(ramFree);
            });

            var jmlArray = $('input[name="jumlahArray"]').val();

            var date = $('input[name="date"]').val();
            var cpuId = $('input[name="cpuId"]').val();

            for (var i = 0; i < jmlArray; i++) {

                var hddId = $('input[name="hdd-id-' + i + '"]').val();
                var hdd = document.querySelector('[name="hdd"]').value;
                var hddSize = document.querySelector('[name="hdd_size"]').value;
                var detId = $('input[name="detailId-' + hddId + '-' + i + '"]').val();
                var ketDetail = $('input[name="ketDetail-' + hddId + '-' + i + '"]').val();
                var diskName = $('input[name="diskName-' + hddId + '-' + i + '"]').val();
                var diskUsed = $('input[name="diskUsed-' + hddId + '-' + i + '"]').val();
                var diskFree = $('input[name="diskFree-' + hddId + '-' + i + '"]').val();
                var cekSys = $('input[name="disk-system-' + hddId + '-' + i + '"]:checked');
                // var cekSys = document.getElementById('cekSys');
                // var cekSysval = cekSys.checked ? '1' : '0';
                var cekSysval = '';
                if (cekSys.val()) {
                    cekSysval = '1';
                } else {
                    cekSysval = '0';
                }

                var data = {
                    id: id++,
                    detId: detId,
                    ketDetail: ketDetail,
                    hdd: hddId,
                    cpuId: cpuId,
                    date: date,
                    diskName: diskName,
                    diskUsed: diskUsed,
                    diskFree: diskFree,
                    cekSys: cekSysval
                };

                hddData.push(data);

                // populateFormData(hdd, hddSize);
            }

            //menghitung jumlah detail dari setiap hdd id
            // var j = 0;
            // var jumlahDetail = 0;
            // for(var i = 0; i < hddData.length; i++){
            //     if(hddData[j].hdd == hddData[i].hdd){
            //         jumlahDetail++;
            //     }else{
            //         j++;
            //     }
            //     $('input[name="jumlahDetail-' + hddData[j].hdd + '"]').val(jumlahDetail);
            //     jumlahDetail = 0;
            // }

            console.log('load', hddData);
        });

        function confirmDelete(idx, hddSize) {
            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(idx, hddSize);
                    Swal.fire(
                        "Deleted!",
                        "Data Storage has been deleted.",
                        "success"
                    );
                }
            });
        }


        function deleteDataById(idx, hddSize) {
            ///untuk mengambil hddId berdasarkan id
            var indexArr = hddData.findIndex(obj => obj.id == idx);
            hddData[indexArr].ketDetail = "delete";

            console.log("hddData delete", hddData);

            var filterHdd = hddData.filter(obj => obj.id == idx);
            var hdd_id = filterHdd[0].hdd;
            // filter hddData berdasarkan hdd_id
            var data = hddData.filter(obj => obj.hdd == hdd_id);
            console.log("data del", data);
            //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 !== idx);
            //buat variable baru untuk panjang looping sesuai hdd_id
            // var lengthArr = hddData.filter(obj => obj.hdd == hdd_id);

            for (var i = 0; i < data.length; i++) {
                if (data[i].ketDetail != "delete") {
                    var centang = '';
                    if (data[i]['cekSys'] == '1') {
                        centang = 'checked';
                    }
                    $('#inputanAddButton-' + hdd_id).append(`
                    <div id='dataDetail-` + hdd_id + `'>
                        <input type="hidden" name="ketDetail-` + hdd_id + `-` + data[i].id + `" value="` + data[i]
                        .ketDetail + `">
                        <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="diskName-` + hdd_id + `-` + data[
                            i].id + `" readonly>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-check">
                                    <input class="checkbox form-check-input" type="checkbox"
                                        name="disk-system-` + hdd_id + `-` + data[i].id + `" ` + 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="diskUsed-` + hdd_id + `-` + data[i]
                        .id + `" 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="diskFree-` + hdd_id + `-` + data[i]
                        .id + `" readonly>
                                <span class="input-group-text" id="basic-addon2">GB</span>
                            </div>
                        </div>
                            <button type="button" class="btn btn-sm btn-outline-success" onclick="editDataById('` +
                        hdd_id + `',` + data[i].id + `)" id="btn-edit-` + data[i].id + `-` + hdd_id + `"> EDIT </button>
                            <button type="button" class="btn btn-sm btn-outline-success" onclick="saveDataById('` +
                        hdd_id + `','` + hddSize + `',` + data[i].id + `)" id="btn-save-` + data[i].id + `-` + hdd_id + `" hidden> SAVE </button>
                        <button type="button" class="btn btn-sm btn-outline-danger" onclick="cancelDataById('` +
                        hdd_id + `',` + data[i].id + `)" id="btn-cancel-` + data[i].id + `-` + hdd_id + `" hidden> Cancel </button>
                            <button type="button" class="btn btn-sm btn-outline-danger" onclick="confirmDelete(` +
                        data[i].id + `,'` + hddSize + `')">DEL</button>
        
                    </div>
                    `);
                }

            }

            for (var i = 0; i < data.length; i++) {
                var diskNameInputs = $('input[name="diskName-' + hdd_id + '-' + data[i].id + '"]');
                var diskUsedInputs = $('input[name="diskUsed-' + hdd_id + '-' + data[i].id + '"]');
                var diskFreeInputs = $('input[name="diskFree-' + hdd_id + '-' + data[i].id + '"]');
                var diskSysInputs = $('input[name="disk-system-' + hdd_id + '-' + data[i].id + '"]');

                diskSysInputs.val(data[i].cekSys);
                diskNameInputs.val(data[i].diskName);
                diskUsedInputs.val(data[i].diskUsed);
                diskFreeInputs.val(data[i].diskFree);
            }
            // if(lengthArr.length >= 1){
            // }
        }


        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="diskName-' + hddId + '-' + i + '"]').removeAttr('readonly');
            $('input[name="diskUsed-' + hddId + '-' + i + '"]').removeAttr('readonly');
            $('input[name="diskFree-' + 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="diskName-' + hddId + '-' + i + '"]').attr('readonly', true);
            $('input[name="diskUsed-' + hddId + '-' + i + '"]').attr('readonly', true);
            $('input[name="diskFree-' + hddId + '-' + i + '"]').attr('readonly', true);
            $('input[name=disk-system-' + hddId + '-' + i + ']').attr('disabled', true);

        }


        function saveDataById(hddId, hddSize, idx) {

            console.log("hddData awal", hddData);
            //mengambil value dari inputan
            var diskName = $('input[name="diskName-' + hddId + '-' + idx + '"]');
            var diskUsed = $('input[name="diskUsed-' + hddId + '-' + idx + '"]');
            var diskFree = $('input[name="diskFree-' + hddId + '-' + idx + '"]');
            var cekSystemInputs = $('input[name="disk-system-' + hddId + '-' + idx + '"]:checked');

            //mencari index berdasarkan nama disk dan hdd Id
            var cekNama = true;

            var objFind = hddData.findIndex(obj => obj.id == idx);
            if (objFind == -1) {
                // mengecek nama disk pada array
                for (var i = 0; i < hddData.length; i++) {
                    if (diskName.val() == hddData[i].diskName) {
                        cekNama = false;
                        break;
                    }
                }
            }

            var dataArr = hddData.filter(obj => obj.hdd === hddId);
            var jmlDiskArr = dataArr.filter(obj => obj.id !== idx);
            //mengecek jika tidak ganti nama disk
            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 totalDisk = 0;
                var cekdisk = true;


                for (var i = 0; i < dataArr.length; i++) {
                    if (i == objFind) {
                        continue;
                    } else {
                        if (jmlDiskArr.length > 0 && dataArr[i].ketDetail != "delete") {
                            totalDisk += parseFloat(dataArr[i].diskUsed) + parseFloat(dataArr[i].diskFree);
                        }
                    }
                }

                totalDisk = totalDisk + (parseFloat(diskUsed.val()) + parseFloat(diskFree.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=diskName-' + hddId + '-' + idx + ']').attr('readonly', true);
                    $('input[name=diskUsed-' + hddId + '-' + idx + ']').attr('readonly', true);
                    $('input[name=diskFree-' + 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].diskName = diskName.val();
                    hddData[objFind].diskUsed = diskUsed.val();
                    hddData[objFind].diskFree = diskFree.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
                    });

                }
            }

        }


        //function add data det new
        function saveData(event) {
            // Mencegah pengiriman formulir ke server
            event.preventDefault();

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


            // Membuat objek untuk menyimpan data
            var data = {
                id: id++,
                hdd: hdd,
                detId: 'undefined',
                ketDetail: 'insert',
                cpuId: cpuId,
                date: date,
                diskName: diskName,
                diskUsed: diskUsed,
                diskFree: diskFree,
                cekSys: cekSysval
            };
            console.log('data', data);

            // Menambahkan objek ke dalam array untuk hdd_id ini
            // hddData[hdd].push(data);
            //swall.fire
            if (diskName == 'A' || diskName == '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++) {
                    if (diskName == hddData[i].diskName && hddData[i].ketDetail != "delete") {
                        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);

                    if (dataArr.length <= 0) {
                        console.log("dataArr", dataArr);
                        hddData.push(data);
                        // Mengosongkan form setelah data ditambahkan ke array
                        document.getElementById("maintenance-form").reset();

                        // Menampilkan pesan sukses atau melakukan operasi lainnya
                        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);
                    } else {
                        var totalDisk = 0;
                        var cekdisk = true;

                        for (var i = 0; i < dataArr.length; i++) {
                            if (dataArr[i].ketDetail == "delete") {
                                continue;
                            } else {
                                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 data dari array setelah berhasil disimpan sementara
                            populateFormData(hdd, hddSize);
                            $('input[name="jumlahArray"]').val(hddData.length);

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

                        }
                    }
                }
            }

        }

        // 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++) {
                if (data[i].ketDetail != "delete") {
                    var centang = '';
                    if (data[i]['cekSys'] == '1') {
                        centang = 'checked';
                    }
                    $('#inputanAddButton-' + hddId).append(`
                    <div id='dataDetail-` + hddId + `'>
                        <input type="hidden" name="ketDetail-` + hddId + `-` + data[i].id + `" value="` + data[i]
                        .ketDetail + `">
                        <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="diskName-` + hddId + `-` + data[i]
                        .id + `" readonly>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-check">
                                    <input class="checkbox form-check-input" type="checkbox"
                                        name="disk-system-` + hddId + `-` + data[i].id + `" ` + 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="diskUsed-` + hddId + `-` + data[i].id + `" 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="diskFree-` + hddId + `-` + data[i].id + `" readonly>
                                <span class="input-group-text" id="basic-addon2">GB</span>
                            </div>
                        </div>
                            <button type="button" class="btn btn-sm btn-outline-success" onclick="editDataById('` +
                        hddId + `',` + data[i].id + `)" id="btn-edit-` + data[i].id + `-` + hddId + `"> EDIT </button>
                            <button type="button" class="btn btn-sm btn-outline-success" onclick="saveDataById('` +
                        hddId + `','` + hddSize + `',` + data[i].id + `)" id="btn-save-` + data[i].id + `-` + 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 + `,'` + hddSize + `')" id="btn-delete-` + data[i].id + `-` + hddId + `" hidden>DEL</button>
        
                    </div>
                    `);
                }
            }


            for (var i = 0; i < data.length; i++) {
                var diskNameInputs = $('input[name="diskName-' + hddId + '-' + data[i].id + '"]');
                var diskUsedInputs = $('input[name="diskUsed-' + hddId + '-' + data[i].id + '"]');
                var diskFreeInputs = $('input[name="diskFree-' + hddId + '-' + data[i].id + '"]');
                var diskSysInputs = $('input[name="disk-system-' + hddId + '-' + data[i].id + '"]');

                diskNameInputs.val(data[i].diskName);
                diskUsedInputs.val(data[i].diskUsed);
                diskFreeInputs.val(data[i].diskFree);
                diskSysInputs.val(data[i].cekSys);

            }


        }

        // 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 {

                // Mendapatkan data berdasarkan hdd_id
                // var data = hddData[hddId] || [];
                // console.log("isi data", data);
                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="cpuId"]').value;
            var date = document.querySelector('[name="date"]').value;
            var oldidpref = document.querySelector('[name="oldidpref"]').value;
            var idpref = document.querySelector('[name="idpref"]').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 maintenId = {{ $maintenance->id }};

            var mainten = {
                maintenId: maintenId,
                cpuId: cpuId,
                date: date,
                oldidpref: oldidpref,
                idpref: idpref,
                cpuUsage: cpuUsage,
                ramUsed: ramUsed,
                ramFree: ramFree,
                os: os,
                _token: '{{ csrf_token() }}',
                _method: 'PUT',

                detail: hddData
            };

            console.log(mainten);
            $.ajax({
                url: '{{ URL::to('/') }}/maintc/' + cpuId,
                type: "POST",
                data: mainten,
                success: function(response) {
                    // window.location.href = "{{ route('MaintenanceIndex') }}";
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: 'Data has been updated successfully.',
                        confirmButtonText: 'OK'
                    }).then((result) => {
                        // Redirect ke halaman lain setelah menutup alert
                        if (result.isConfirmed) {
                            window.location.href = "{{ URL::to('/') }}/maintc";
                        }
                    });

                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                }
            });



        });
    </script>

@endsection