@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 edit --}}
                            <button class="btn btn-warning mb-0"
                                onclick="window.location='{{ url($url_menu . '/edit' . '/' . encrypt($maintenance->idtrans)) }}'"><i
                                    class="fas fa-edit me-1"> </i><span class="font-weight-bold">Edit</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>

            <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">
                                    <div class="form-group">
                                        <select class="form-select @error('code_cpu') is-invalid @enderror" value=""
                                            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="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>
                                    </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="{{ $maintenance->date }}" name="date" readonly>
                                    </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" readonly>
                                            <span class="input-group-text" id="basic-addon2">%</span>
                                        </div>
                                    </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" readonly>
                                            <span class="input-group-text" id="basic-addon2">GB</span>
                                        </div>
                                    </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" readonly>
                                            <span class="input-group-text" id="basic-addon2">GB</span>
                                        </div>
                                    </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" disabled>
                                            <option>{{ $maintenance->os }}</option>
                                        </select>

                                    </div>

                                    @forelse($harddisks as $hdd)
                                        {{-- <div class="card-body">
                                            <h3>Harddisk</h3>
                                            <h4> ({{ $hdd->merk }} | {{ $hdd->size }} GB) </h4>
                                        </div> --}}
                                        <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>
                                            </tbody>
                                        </table>
                                        @forelse($detmaintain as $det)
                                            @if (
                                                $det->idtrans == $maintenance->idtrans &&
                                                    $det->date == $maintenance->date &&
                                                    $det->hdd == $hdd->id &&
                                                    $det->code_cpu == $maintenance->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"
                                                                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"
                                                                    checked disabled> System
                                                            </div>
                                                        </div>
                                                    @else
                                                        <div class="col-6">
                                                            <div class="form-check">
                                                                <input class="checkbox form-check-input" type="checkbox"
                                                                    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="number" class="form-control"
                                                            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="number" class="form-control"
                                                            value="{{ $det->disk_free }}" readonly>
                                                        <span class="input-group-text" id="basic-addon2">GB</span>
                                                    </div>
                                                </div>
                                                <hr class="horizontal dark mt-2" style="height: 5px">
                                            @endif


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



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

            <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/show.blade.php</b> on line <b>230</b><br />
<br />
<b>Warning</b>:  Attempt to read property "date" on null in <b>/opt/lampp/htdocs/msjasset/resources/views/pages/maintc/show.blade.php</b> on line <b>230</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>



            <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->maintenance_id == $maintenance->idtrans && $imagemain->date == $maintenance->date)
                                        <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/show.blade.php</b> on line <b>362</b><br />
<br />
<b>Warning</b>:  Attempt to read property "updated_at" on null in <b>/opt/lampp/htdocs/msjasset/resources/views/pages/maintc/show.blade.php</b> on line <b>362</b><br />
01 January 1970                                                            </h6>

                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    @endif
                                @empty
                                    <div class="alert alert-danger">
                                        Empty!
                                    </div>
                                @endforelse
                            </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 class="modal-image">
            </div>

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

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

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

        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-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"></button>
                           </div>
                           <div class="modal-body">
                               <img src="{{ asset('/storage/maintenances/` + file + `') }}" alt="image" class="w-100 border-radius-lg shadow-sm">
                           </div>
                       </div>
                   </div>
               </div>

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

@endsection