@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 edit --}}
                        @if ($prefH->status == 'E')
                            <button class="btn btn-warning mb-0" onclick="editFRM('{{ encrypt($prefH->id) }}')"><i
                                    class="fas fa-pen-to-square">
                                </i><span class="font-weight-bold"> Edit</button>
                        @elseif ($prefH->status == 'P')
                            <button class="btn btn-warning mb-0" onclick="editFRM('{{ encrypt($prefH->id) }}')"><i
                                    class="fas fa-pen-to-square">
                                </i><span class="font-weight-bold"> Edit</button>
                            <button class="btn btn-info mb-0" onclick="printFRM('{{ $prefH->id }}')"><i
                                    class="fa fa-print"></i> Print Form
                            </button>
                        @elseif ($prefH->status == 'F')
                            <button class="btn btn-warning mb-0"
                                onclick="unfinishFRM('{{ $prefH->id }}', '{{ encrypt($prefH->id) }}')"><i
                                    class="fas fa-undo-alt"></i></i> unFinish
                            </button>
                            <button class="btn btn-primary mb-0" onclick="printFRM('{{ $prefH->id }}')"><i
                                    class="fa fa-print"></i> Print Form
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>


    {{-- form filter --}}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">
                            SHOW - ID Preventive <strong>{{ $prefH->id }}</strong>
                        </p>

                        <hr class="horizontal dark mt-0">
                        {{-- <div class="row">
                            <div class="col-md-4">

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="d-flex align-items-center">
                                            <label for="inputdate" class="form-label me-2" style="min-width: 150px;">ID
                                                Prefentive</label>
                                            <small class="form-text text-muted"></small>
                                            <input type="text" class="form-control" id="code" name="code"
                                                value="{{ $prefH->id }}" disabled>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <p></p>
                        <hr class="horizontal dark mt-0"> --}}

                        <div class="row">
                            <div class="col-md-6">

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="d-flex align-items-center">
                                            <label for="inputdate" class="form-label me-2"
                                                style="min-width: 150px;">Code</label>
                                            <small class="form-text text-muted"></small>
                                            <input type="text" class="form-control" id="code" name="code"
                                                value="{{ $prefH->cpu_code }}" disabled>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="col-md-6">
                                <div class="row border-end" style="height: 60%;">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="d-flex align-items-center">
                                                <label for="inputCust" class="form-label me-2"
                                                    style="min-width: 150px;">User</label>

                                                <div class="flex flex-col mb-2 input-group">
                                                    <input id="dusername" name="dusername" class="form-control"
                                                        value="{{ $prefH->user_name }}" readonly>
                                                    <span class="input-group-text bg-primary text-light">
                                                        <i class="fas fa-search"></i>
                                                    </span>

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

                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">Date</label>
                                                <small class="form-text text-muted"></small>
                                                <input type="date" class="form-control" id="date" name="date"
                                                    value="{{ $prefH->date }}" readonly>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="col-md-6">
                                <div class="row border-end" style="height: 60%;">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="d-flex align-items-center">
                                                <label for="inputCust" class="form-label me-2"
                                                    style="min-width: 150px;">Reqby</label>

                                                <div class="flex flex-col mb-2 input-group">
                                                    <input id="dusername" name="dusername" class="form-control"
                                                        value="{{ $prefH->reqby_name }}" readonly>


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

                        </div>
                    </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 class="text-uppercase text-sm-center">CPU</p>
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            <!-- Hardware Section -->
                            <div class="col-md-12">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="container">
                                            <div class="row">
                                                <!-- Label "Hardware" di kiri -->
                                                <div class="col-md-3 d-flex align-items-center">
                                                    <p class="text-uppercase fw-bold mb-0">Hardware</p>
                                                </div>
                                                <!-- Checkbox di kanan -->
                                                <div class="col-md-9">
                                                    <hr class="horizontal dark mt-0">
                                                    <div class="row">
                                                        @php
                                                            // Ubah string hardware yang tersimpan menjadi array
                                                            $selectedHardware = explode(',', $prefH->hardware);
                                                            $selectedSoftware = explode(',', $prefH->software);

                                                        @endphp
                                                        @foreach ($hardwareList->chunk(ceil($hardwareList->count() / 2)) as $hardwareChunk)
                                                            <div class="col-md-6">
                                                                @foreach ($hardwareChunk as $hardware)
                                                                    <div class="form-check text-start">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            id="hardware_{{ $hardware->id }}"
                                                                            name="hardware[]" value="{{ $hardware->id }}"
                                                                            {{ in_array($hardware->id, $selectedHardware) ? 'checked disabled' : 'disabled' }}>
                                                                        <!-- Cek apakah ID ada dalam data tersimpan -->
                                                                        <label class="form-check-label"
                                                                            for="hardware_{{ $hardware->id }}"
                                                                            style="font-color: black; opacity: 1;">
                                                                            {{ $hardware->action }}
                                                                        </label>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Software Section -->
                            <p></p>
                            <hr>
                            <p></p>
                            <!-- Software Section -->
                            <div class="col-md-12">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="container">
                                            <div class="row">
                                                <!-- Label "Software" di kiri -->
                                                <div class="col-md-3 d-flex align-items-center">
                                                    <p class="text-uppercase fw-bold mb-0">Software</p>
                                                </div>
                                                <!-- Checkbox di kanan -->
                                                <div class="col-md-9">
                                                    <hr class="horizontal dark mt-0">
                                                    <div class="row">
                                                        @foreach ($softwareList->chunk(ceil($softwareList->count() / 2)) as $softwareChunk)
                                                            <div class="col-md-6">
                                                                @foreach ($softwareChunk as $software)
                                                                    <div class="form-check text-start">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            id="software_{{ $software->id }}"
                                                                            name="software[]" value="{{ $software->id }}"
                                                                            {{ in_array($software->id, $selectedSoftware) ? 'checked disabled' : 'disabled' }}>
                                                                        <label class="form-check-label"
                                                                            for="software_{{ $software->id }}"
                                                                            style="font-color: black; opacity: 1;">
                                                                            {{ $software->action }}
                                                                        </label>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- List Detail --}}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Peripheral</p>
                        <hr class="horizontal dark mt-0">

                        <!-- Table  ADD PR-->
                        <div class="table-responsive">
                            <table class="table table-hover table-bordered" id="tpureq_pr">
                                <thead style="background-color: #daecff; text-align: left;">
                                    <tr>

                                        <th>Item</th>
                                        <th>Tipe</th>
                                        <th>Code</th>
                                        <th>Merk</th>

                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="table-data">
                                    @foreach ($prefD as $d)
                                        <tr>
                                            <td style="text-align: center">{{ $d->item }}</td>
                                            <td scope="row">
                                                <select name="prefen-tipe[]" class="form-select" id="prefen-tipe"
                                                    style="width: 150px;" disabled>
                                                    <option selected>{{ $d->tipe_name }}</option>
                                                </select>
                                            </td>
                                            <td scope="row">
                                                <div class="input-group mb-3" style="width: 250px;">
                                                    <input type="text" name="prefen-code[]" id="prefen-code"
                                                        placeholder="Code" class="form-control prefen-code btn-search"
                                                        value="{{ $d->code }}" readonly>
                                                    <span class="input-group-text bg-primary btn-search text-light">
                                                        <i class="fas fa-search"></i>
                                                    </span>
                                                </div>
                                            </td>
                                            <td scope="row">
                                                <input type="text" class="form-control prefen-merk"
                                                    name="prefen-merk[]" id="prefen-merk" placeholder="Deskripsi"
                                                    style="width: 200px;" value="{{ $d->merk }}" readonly>
                                            </td>

                                            <td scope="row">
                                                <select class="form-control prefen-action" name="prefen-action[]" multiple
                                                    style="width: 700px;" required disabled>
                                                    @php
                                                        $selectedActionIds = !empty($d->action)
                                                            ? explode(',', $d->action)
                                                            : [];
                                                        $filteredActions = $selectedActions->whereIn(
                                                            'id',
                                                            $selectedActionIds,
                                                        );
                                                    @endphp
                                                    @foreach ($filteredActions as $action)
                                                        <option value="{{ $action->id }}" selected>
                                                            {{ $action->action }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>

                                        </tr>
                                    @endforeach

                                    <tr hidden>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td style="text-align:right"></td>
                                        <td style="text-align:center"></td>

                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('.prefen-action').select2();
        });

        function editFRM(id) {
            var id = id;

            if (id) {
                window.location.href = "{{ url($url_menu . '/edit' . '/') }}/" + (id);
            } else {
                Swal.fire({
                    title: 'Oops!',
                    text: 'Pilih ID terlebih dahulu!',
                    icon: 'warning',
                    confirmButtonText: 'OK'
                });
            }
        }

        function unfinishFRM(id, idencrypt) {
            var id = id;
            var idencrypt = idencrypt;

            Swal.fire({
                title: `Data ${id} akan di unFinish`, // Perbaikan pada format string
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, unFinish'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Ajax untuk memproses data ke database
                    $.ajax({
                        url: '{{ URL::to('/') }}/preven/unfinish/' + id,
                        type: "POST",
                        dataType: "JSON",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            // Redirect ke halaman tpuror setelah sukses
                            Swal.fire({
                                title: 'Berhasil!',
                                text: `Data ${id} berhasil di unFinish!`,
                                icon: 'success',
                                confirmButtonColor: '#3085d6'
                            }).then(() => {
                                window.location.href =
                                    "{{ url($url_menu . '/edit' . '/') }}/" + (idencrypt);
                            });
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            Swal.fire({
                                title: 'Oops!',
                                text: `Data ${id} tidak dapat di unFinish!`,
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        }

                    });
                }
            });
        }

        function printFRM(id) {
            var labelId = id;
            if (labelId) {
                $.ajax({
                    url: "{{ url('print-form') }}?ids=" + labelId,
                    type: "GET",
                    dataType: "json",
                    success: function(response) {
                        console.log('response', response);
                        print_frm_multiple(response.header, response.details, response
                            .hard, response.soft);

                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        Swal.fire({
                            title: 'Sorry!',
                            text: 'Error fetching data!',
                            icon: 'error',
                            confirmButtonColor: '#3085d6'
                        });
                    }
                });
            }
        }
        // Fungsi untuk mengonversi gambar menjadi Base64
        async function imageToDataURL(imageUrl) {
            return new Promise((resolve, reject) => {
                let img = new Image();
                img.crossOrigin = 'Anonymous';
                img.onload = function() {
                    let canvas = document.createElement("canvas");
                    let ctx = canvas.getContext("2d");
                    canvas.width = img.width;
                    canvas.height = img.height;
                    ctx.drawImage(img, 0, 0);
                    resolve(canvas.toDataURL("image/png", 0.9)); // Menghasilkan Base64
                };
                img.onerror = reject;
                img.src = imageUrl;
            });
        }

        async function print_frm_multiple(headers, detailsList, hardList, softList) {

            var contentData = [];
            // Konversi logo ke Base64
            const logoBase64 = await imageToDataURL("{{ asset('storage/logotbk.jpg') }}");

            try {
                headers.forEach((item, index) => {
                    var code_cpu = item.cpu_code;
                    var date = item.date;
                    var user = item.user_name;
                    var itcreate = item.namecreate;
                    var headId = item.id;

                    const tgl = new Date(date);

                    const options = {
                        weekday: 'long', // Menampilkan hari dalam minggu
                        day: '2-digit', // Menampilkan hari dengan dua digit
                        month: 'long', // Menampilkan nama bulan secara lengkap
                        year: 'numeric', // Menampilkan tahun secara lengkap
                    };

                    const formattedDate = tgl.toLocaleDateString('id-ID', options);

                    // var hardwareList = hardList.filter(check => check.isChecked == true);
                    // var softwareList = softList.filter(check => check.isChecked == true);

                    const selectedHardwareIds = (item.hardware || '')
                        .split(',')
                        .map(id => parseInt(id.trim()))
                        .filter(id => !isNaN(id));

                    const selectedSoftwareIds = (item.software || '')
                        .split(',')
                        .map(id => parseInt(id.trim()))
                        .filter(id => !isNaN(id));

                    const filteredHardware = hardList.filter(h => selectedHardwareIds.includes(h.id));
                    const filteredSoftware = softList.filter(s => selectedSoftwareIds.includes(s.id));




                    var printHard = [];
                    var printSoft = [];

                    // Looping untuk mengisi hasil
                    for (let i = 0; i < filteredHardware.length; i += 2) {
                        let temp = [];

                        // Menambahkan 'hardware' pada array pertama
                        if (i === 0) {
                            temp.push({
                                text: 'Hardware',
                                style: 'boldText',
                                rowSpan: Math.ceil(filteredHardware.length / 2)
                            }); // Menambahkan rowspan
                        } else {
                            temp.push({});
                        }

                        // Menambahkan elemen gambar dan data ke dalam temp
                        if (i < filteredHardware.length) {
                            temp.push({
                                image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAF+2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTktMTItMzBUMDE6Mzc6MjArMDE6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTEyLTMwVDAxOjM4OjI4KzAxOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTEyLTMwVDAxOjM4OjI4KzAxOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMSIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9IkRvdCBHYWluIDIwJSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowNzVjYjZmMy1jNGIxLTRiZjctYWMyOS03YzUxMWY5MWJjYzQiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo5ZTM1YTc3ZC0zNDM0LTI5NGQtYmEwOC1iY2I5MjYyMjBiOGIiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowYzc2MDY3Ny0xNDcwLTRlZDUtOGU4ZS1kNTdjODJlZDk1Y2UiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjBjNzYwNjc3LTE0NzAtNGVkNS04ZThlLWQ1N2M4MmVkOTVjZSIgc3RFdnQ6d2hlbj0iMjAxOS0xMi0zMFQwMTozNzoyMCswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjA3NWNiNmYzLWM0YjEtNGJmNy1hYzI5LTdjNTExZjkxYmNjNCIgc3RFdnQ6d2hlbj0iMjAxOS0xMi0zMFQwMTozODoyOCswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+jHsR7AAAAUNJREFUOMvN1T9Lw0AYx/EviLVFxFH8M3USgyAFoUsQ0UV8F6Ui4qCTbuJg34HgptBdUATrUoxiqYMgiOBoIcW9BVED+jgkntGm9i6CmN+Sg/vAcc89dwBd5Clzj6uZGg7LJAC62UFipEgKcmroaeZj/gpcIAhl5rE1M0cJQbiCOsIrs5h8WZ4R6j72yBrhcRo+dhE8bCOcoYng/hFOMxAXb/DAHTNxcCGo7JE5LqhjsW2KP6nDcGecCv1vRdC2eJQDLllooach2hbvIghvLJJgM0QHdeq8F0x/5ETRM4b0DonF7be+Pf+y4A4bZnETok4E/XG3xxR3WhasUWeLCg2OGYnXGP1MkPwnLRmJf3UN+RfgtBGe5MnHVQShxBQZzdgcIgjXsKSu/KZmXgKxBkmKsZ6bffoAelilQs3goauyTi+8A8mhgeQlxdNWAAAAAElFTkSuQmCC',
                                width: 10,
                                height: 10
                            });
                            temp.push({
                                text: filteredHardware[i].action
                            });
                        }

                        // Menambahkan elemen gambar kosong di tengahnya
                        temp.push({
                            image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAF+2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTktMTItMzBUMDE6Mzc6MjArMDE6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTEyLTMwVDAxOjM4OjI4KzAxOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTEyLTMwVDAxOjM4OjI4KzAxOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMSIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9IkRvdCBHYWluIDIwJSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowNzVjYjZmMy1jNGIxLTRiZjctYWMyOS03YzUxMWY5MWJjYzQiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo5ZTM1YTc3ZC0zNDM0LTI5NGQtYmEwOC1iY2I5MjYyMjBiOGIiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowYzc2MDY3Ny0xNDcwLTRlZDUtOGU4ZS1kNTdjODJlZDk1Y2UiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjBjNzYwNjc3LTE0NzAtNGVkNS04ZThlLWQ1N2M4MmVkOTVjZSIgc3RFdnQ6d2hlbj0iMjAxOS0xMi0zMFQwMTozNzoyMCswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjA3NWNiNmYzLWM0YjEtNGJmNy1hYzI5LTdjNTExZjkxYmNjNCIgc3RFdnQ6d2hlbj0iMjAxOS0xMi0zMFQwMTozODoyOCswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+jHsR7AAAAUNJREFUOMvN1T9Lw0AYx/EviLVFxFH8M3USgyAFoUsQ0UV8F6Ui4qCTbuJg34HgptBdUATrUoxiqYMgiOBoIcW9BVED+jgkntGm9i6CmN+Sg/vAcc89dwBd5Clzj6uZGg7LJAC62UFipEgKcmroaeZj/gpcIAhl5rE1M0cJQbiCOsIrs5h8WZ4R6j72yBrhcRo+dhE8bCOcoYng/hFOMxAXb/DAHTNxcCGo7JE5LqhjsW2KP6nDcGecCv1vRdC2eJQDLllooach2hbvIghvLJJgM0QHdeq8F0x/5ETRM4b0DonF7be+Pf+y4A4bZnETok4E/XG3xxR3WhasUWeLCg2OGYnXGP1MkPwnLRmJf3UN+RfgtBGe5MnHVQShxBQZzdgcIgjXsKSu/KZmXgKxBkmKsZ6bffoAelilQs3goauyTi+8A8mhgeQlxdNWAAAAAElFTkSuQmCC',
                            width: 10,
                            height: 10
                        });

                        if (i + 1 < filteredHardware.length) {
                            temp.push({
                                text: filteredHardware[i + 1].action
                            });
                        }

                        // Menambahkan objek kosong hanya jika diperlukan
                        while (temp.length < 5) {
                            temp.push({});
                        }

                        // Menyimpan temp ke dalam result
                        printHard.push(temp);
                    }


                    // Looping untuk mengisi hasil
                    for (let i = 0; i < filteredSoftware.length; i += 2) {
                        let temp = [];

                        // Menambahkan 'software' pada array pertama
                        if (i === 0) {
                            temp.push({
                                text: 'Software',
                                style: 'boldText',
                                rowSpan: Math.ceil(filteredSoftware.length / 2)
                            }); // Menambahkan rowspan
                        } else {
                            temp.push({});
                        }

                        // Menambahkan elemen gambar dan data ke dalam temp
                        if (i < filteredSoftware.length) {
                            temp.push({
                                image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAF+2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTktMTItMzBUMDE6Mzc6MjArMDE6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTEyLTMwVDAxOjM4OjI4KzAxOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTEyLTMwVDAxOjM4OjI4KzAxOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMSIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9IkRvdCBHYWluIDIwJSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowNzVjYjZmMy1jNGIxLTRiZjctYWMyOS03YzUxMWY5MWJjYzQiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo5ZTM1YTc3ZC0zNDM0LTI5NGQtYmEwOC1iY2I5MjYyMjBiOGIiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowYzc2MDY3Ny0xNDcwLTRlZDUtOGU4ZS1kNTdjODJlZDk1Y2UiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjBjNzYwNjc3LTE0NzAtNGVkNS04ZThlLWQ1N2M4MmVkOTVjZSIgc3RFdnQ6d2hlbj0iMjAxOS0xMi0zMFQwMTozNzoyMCswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjA3NWNiNmYzLWM0YjEtNGJmNy1hYzI5LTdjNTExZjkxYmNjNCIgc3RFdnQ6d2hlbj0iMjAxOS0xMi0zMFQwMTozODoyOCswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+jHsR7AAAAUNJREFUOMvN1T9Lw0AYx/EviLVFxFH8M3USgyAFoUsQ0UV8F6Ui4qCTbuJg34HgptBdUATrUoxiqYMgiOBoIcW9BVED+jgkntGm9i6CmN+Sg/vAcc89dwBd5Clzj6uZGg7LJAC62UFipEgKcmroaeZj/gpcIAhl5rE1M0cJQbiCOsIrs5h8WZ4R6j72yBrhcRo+dhE8bCOcoYng/hFOMxAXb/DAHTNxcCGo7JE5LqhjsW2KP6nDcGecCv1vRdC2eJQDLllooach2hbvIghvLJJgM0QHdeq8F0x/5ETRM4b0DonF7be+Pf+y4A4bZnETok4E/XG3xxR3WhasUWeLCg2OGYnXGP1MkPwnLRmJf3UN+RfgtBGe5MnHVQShxBQZzdgcIgjXsKSu/KZmXgKxBkmKsZ6bffoAelilQs3goauyTi+8A8mhgeQlxdNWAAAAAElFTkSuQmCC',
                                width: 10,
                                height: 10
                            });
                            temp.push({
                                text: filteredSoftware[i].action
                            });
                        }

                        // Menambahkan elemen gambar kosong di tengahnya
                        temp.push({
                            image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAF+2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTktMTItMzBUMDE6Mzc6MjArMDE6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTEyLTMwVDAxOjM4OjI4KzAxOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTEyLTMwVDAxOjM4OjI4KzAxOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMSIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9IkRvdCBHYWluIDIwJSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowNzVjYjZmMy1jNGIxLTRiZjctYWMyOS03YzUxMWY5MWJjYzQiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo5ZTM1YTc3ZC0zNDM0LTI5NGQtYmEwOC1iY2I5MjYyMjBiOGIiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowYzc2MDY3Ny0xNDcwLTRlZDUtOGU4ZS1kNTdjODJlZDk1Y2UiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjBjNzYwNjc3LTE0NzAtNGVkNS04ZThlLWQ1N2M4MmVkOTVjZSIgc3RFdnQ6d2hlbj0iMjAxOS0xMi0zMFQwMTozNzoyMCswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjA3NWNiNmYzLWM0YjEtNGJmNy1hYzI5LTdjNTExZjkxYmNjNCIgc3RFdnQ6d2hlbj0iMjAxOS0xMi0zMFQwMTozODoyOCswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+jHsR7AAAAUNJREFUOMvN1T9Lw0AYx/EviLVFxFH8M3USgyAFoUsQ0UV8F6Ui4qCTbuJg34HgptBdUATrUoxiqYMgiOBoIcW9BVED+jgkntGm9i6CmN+Sg/vAcc89dwBd5Clzj6uZGg7LJAC62UFipEgKcmroaeZj/gpcIAhl5rE1M0cJQbiCOsIrs5h8WZ4R6j72yBrhcRo+dhE8bCOcoYng/hFOMxAXb/DAHTNxcCGo7JE5LqhjsW2KP6nDcGecCv1vRdC2eJQDLllooach2hbvIghvLJJgM0QHdeq8F0x/5ETRM4b0DonF7be+Pf+y4A4bZnETok4E/XG3xxR3WhasUWeLCg2OGYnXGP1MkPwnLRmJf3UN+RfgtBGe5MnHVQShxBQZzdgcIgjXsKSu/KZmXgKxBkmKsZ6bffoAelilQs3goauyTi+8A8mhgeQlxdNWAAAAAElFTkSuQmCC',
                            width: 10,
                            height: 10
                        });

                        if (i + 1 < filteredSoftware.length) {
                            temp.push({
                                text: filteredSoftware[i + 1].action
                            });
                        }

                        // Menambahkan objek kosong hanya jika diperlukan
                        while (temp.length < 5) {
                            temp.push({});
                        }

                        // Menyimpan temp ke dalam result
                        printSoft.push(temp);
                    }

                    var listMonitor = [];
                    var listPrinter = [];
                    var listScanner = [];

                    var noMont = 1;
                    var noPrin = 1;
                    var noScan = 1;

                    // buat header monitor
                    listMonitor.push([{
                            text: 'Monitor',
                            style: 'subheader',
                            alignment: 'center',
                            colSpan: 3,
                            border: [false, false, false, true]
                        }, {}, {}],
                        [{
                            text: 'No'
                        }, {
                            text: 'Code'
                        }, {
                            text: 'Action'
                        }]);

                    // buat header printer
                    listPrinter.push([{
                            text: 'Printer',
                            style: 'subheader',
                            alignment: 'center',
                            colSpan: 3,
                            border: [false, false, false, true]
                        }, {}, {}],
                        [{
                            text: 'No'
                        }, {
                            text: 'Code'
                        }, {
                            text: 'Action'
                        }]);

                    // buat header scanner
                    listScanner.push([{
                            text: 'Scanner',
                            style: 'subheader',
                            alignment: 'center',
                            colSpan: 3,
                            border: [false, false, false, true]
                        }, {}, {}],
                        [{
                            text: 'No'
                        }, {
                            text: 'Code'
                        }, {
                            text: 'Action'
                        }]);

                    var details = detailsList.filter(obj => obj.idpref === headId);
                    for (var i = 0; i < details.length; i++) {
                        // jika tipe monitor masukkan ke listMonitor
                        if (details[i].tipe === 'mont') {
                            listMonitor.push([{
                                text: noMont
                            }, {
                                text: details[i].code
                            }, {
                                text: details[i].action_names
                            }]);

                            noMont++;
                        } else if (details[i].tipe === 'prin') {
                            listPrinter.push([{
                                text: noPrin
                            }, {
                                text: details[i].code
                            }, {
                                text: details[i].action_names
                            }]);

                            noPrin++;
                        } else if (details[i].tipe === 'scan') {
                            listScanner.push([{
                                text: noScan
                            }, {
                                text: details[i].code
                            }, {
                                text: details[i].action_names
                            }]);

                            noScan++;
                        }
                    }

                    if (listMonitor.length == 2) {
                        listMonitor.push([{
                            text: '-',
                            alignment: "center",
                            colSpan: 3,
                        }, {}, {}]);
                    }
                    if (listPrinter.length == 2) {
                        listPrinter.push([{
                            text: '-',
                            alignment: "center",
                            colSpan: 3,
                        }, {}, {}]);
                    }
                    if (listScanner.length == 2) {
                        listScanner.push([{
                            text: '-',
                            alignment: "center",
                            colSpan: 3,
                        }, {}, {}]);
                    }

                    if (index == 0) {
                        // tanpa pageBreak
                        contentData.push({
                            style: 'tableExample',
                            table: {
                                widths: ['*'],
                                body: [
                                    [{
                                        image: logoBase64,
                                        width: 210,
                                        height: 90,
                                        alignment: 'center'
                                    }],
                                    [{
                                        text: 'FORM REGULAR MAINTENANCE KOMPUTER',
                                        style: 'header',
                                        alignment: 'center'
                                    }],
                                    [{
                                        table: {
                                            widths: ['20%', '*', '*'],
                                            body: [
                                                [{
                                                    text: 'Computer Code',
                                                    alignment: 'left'
                                                }, {
                                                    text: ': ' + code_cpu,
                                                    alignment: 'left'
                                                }, {
                                                    text: 'Date: ' + formattedDate,
                                                    alignment: 'right'
                                                }],
                                                [{
                                                    text: 'User',
                                                    alignment: 'left'
                                                }, {
                                                    text: ': ' + user,
                                                    colSpan: 2,
                                                    alignment: 'left'
                                                }, {}]
                                            ]
                                        },
                                        margin: [0, 5, 0, 5],
                                        layout: 'noBorders'
                                    }],
                                    [{
                                        text: 'CPU',
                                        style: 'subheader',
                                        alignment: 'center'
                                    }],
                                    [{
                                        table: {
                                            widths: ['*', 'auto', '*', 'auto', '*'],
                                            body: printHard
                                        }
                                    }],
                                    [{
                                        table: {
                                            margin: [0, 20, 0, 0],
                                            widths: ['*', 'auto', '*', 'auto', '*'],
                                            body: printSoft
                                        }
                                    }],
                                    [{
                                        text: 'PERIPHERAL',
                                        style: 'subheader',
                                        alignment: 'center'
                                    }],
                                    [{
                                        table: {
                                            widths: ['auto', '*', '*'],
                                            body: listMonitor
                                        }

                                    }],
                                    [{
                                        table: {
                                            widths: ['auto', '*', '*'],
                                            body: listPrinter
                                        }

                                    }],
                                    [{
                                        table: {
                                            widths: ['auto', '*', '*'],
                                            body: listScanner
                                        }

                                    }],
                                ]
                            }
                        }, {
                            table: {
                                widths: ['50%', '50%'],
                                body: [
                                    [{
                                        text: 'Dilakukan Oleh:',
                                        alignment: 'center'
                                    }, {
                                        text: 'Diketahui Oleh:',
                                        alignment: 'center'
                                    }],
                                    [{
                                        margin: [0, 50, 0, 0],
                                        text: itcreate,
                                        alignment: 'center'
                                    }, {
                                        margin: [0, 50, 0, 0],
                                        text: user,
                                        alignment: 'center'
                                    }]
                                ]
                            },
                            margin: [0, 20, 0, 10]
                        });
                    } else {
                        // tambahkan pageBreak
                        contentData.push({
                            pageBreak: 'before',
                            style: 'tableExample',
                            table: {
                                widths: ['*'],
                                body: [
                                    [{
                                        image: logoBase64,
                                        width: 210,
                                        height: 90,
                                        alignment: 'center'
                                    }],
                                    [{
                                        text: 'FORM REGULAR MAINTENANCE KOMPUTER',
                                        style: 'header',
                                        alignment: 'center'
                                    }],
                                    [{
                                        table: {
                                            widths: ['20%', '*', '*'],
                                            body: [
                                                [{
                                                    text: 'Computer Code',
                                                    alignment: 'left'
                                                }, {
                                                    text: ': ' + code_cpu,
                                                    alignment: 'left'
                                                }, {
                                                    text: 'Date: ' + formattedDate,
                                                    alignment: 'right'
                                                }],
                                                [{
                                                    text: 'User',
                                                    alignment: 'left'
                                                }, {
                                                    text: ': ' + user,
                                                    colSpan: 2,
                                                    alignment: 'left'
                                                }, {}]
                                            ]
                                        },
                                        margin: [0, 5, 0, 5],
                                        layout: 'noBorders'
                                    }],
                                    [{
                                        text: 'CPU',
                                        style: 'subheader',
                                        alignment: 'center'
                                    }],
                                    [{
                                        table: {
                                            widths: ['*', 'auto', '*', 'auto', '*'],
                                            body: printHard
                                        }
                                    }],
                                    [{
                                        table: {
                                            margin: [0, 20, 0, 0],
                                            widths: ['*', 'auto', '*', 'auto', '*'],
                                            body: printSoft
                                        }
                                    }],
                                    [{
                                        text: 'PERIPHERAL',
                                        style: 'subheader',
                                        alignment: 'center'
                                    }],
                                    [{
                                        table: {
                                            widths: ['auto', '*', '*'],
                                            body: listMonitor
                                        }

                                    }],
                                    [{
                                        table: {
                                            widths: ['auto', '*', '*'],
                                            body: listPrinter
                                        }

                                    }],
                                    [{
                                        table: {
                                            widths: ['auto', '*', '*'],
                                            body: listScanner
                                        }

                                    }],
                                ]
                            }
                        }, {
                            table: {
                                widths: ['50%', '50%'],
                                body: [
                                    [{
                                        text: 'Dilakukan Oleh:',
                                        alignment: 'center'
                                    }, {
                                        text: 'Diketahui Oleh:',
                                        alignment: 'center'
                                    }],
                                    [{
                                        margin: [0, 50, 0, 0],
                                        text: itcreate,
                                        alignment: 'center'
                                    }, {
                                        margin: [0, 50, 0, 0],
                                        text: user,
                                        alignment: 'center'
                                    }]
                                ]
                            },
                            margin: [0, 20, 0, 10]
                        });
                    }
                });


                var docDefinition = {
                    content: contentData,
                    styles: {
                        header: {
                            fontSize: 14,
                            bold: true
                        },
                        subheader: {
                            fontSize: 12,
                            bold: true
                        },
                        boldText: {
                            fontSize: 12,
                            bold: true,
                            alignment: 'center'
                        }
                    }
                };

                // Generate PDF
                pdfMake.createPdf(docDefinition).open();
            } catch (error) {
                console.error("Error generating PDF:", error);
            }
        }
    </script>
@endsection