@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</button>
                        {{-- check authorize add --}}
                        @if ($authorize->add == '1')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0 input" id="prefen-save"><i class="fas fa-floppy-disk me-1">
                                </i><span class="font-weight-bold">Simpan</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">Add Preventive</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="{{ $code_cpu }}" 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>
                                                <input type="hidden" id="user" name="user"
                                                    value="{{ $cpu->user }}" class="form-control">
                                                <div class="flex flex-col mb-2 input-group">
                                                    <input id="dusername" name="dusername" class="form-control"
                                                        value="{{ $cpu->user_name }}" required>
                                                    <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="#modalUser">
                                                        <i class="fas fa-search"></i>
                                                    </span>

                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- Modal User --}}
                                <div class="modal fade bd-example-modal-lg" id="modalUser" 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 user
                                                </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="tableUser" class="table table-bordered table-striped">
                                                        <thead style="background-color: #daecff;">
                                                            <tr>
                                                                <th>Action</th>
                                                                <th>Id</th>
                                                                <th>User</th>
                                                                <th>Departemen</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="kategori-list">
                                                            @foreach ($users as $user)
                                                                <!-- Baris customer dengan data kategori -->
                                                                <tr>
                                                                    <td>
                                                                        <!-- Tombol untuk memilih customer -->
                                                                        <span class="btn badge bg-primary"
                                                                            onclick="select_user('{{ $user->nik }}', '{{ $user->nama }}' , '{{ $user->id_departemen }}', '{{ $user->namedept }}')">
                                                                            <i class="bi bi-check-circle me-1"></i>
                                                                            Select
                                                                        </span>
                                                                    </td>
                                                                    <td>{{ $user->nik }}</td>
                                                                    <td>{{ $user->nama }}</td>
                                                                    <td>{{ $user->namedept }}</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="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="{{ date('Y-m-d') }}" max="2026-10-03">
                                            </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="reqby" class="form-label me-2" style="min-width: 150px;">
                                                    Reqby
                                                </label>

                                                @if ($user_login->lastname == 'DL')
                                                    {{-- DL: otomatis dirinya sendiri dan tidak bisa diganti --}}
                                                    <input type="text" class="form-control"
                                                        value="{{ $user_login->firstname }}" readonly>

                                                    {{-- Value yang dikirim ke backend tetap username --}}
                                                    <input type="hidden" id="reqby" name="reqby"
                                                        value="{{ $username }}">
                                                @else
                                                    {{-- IN: boleh memilih Reqby --}}
                                                    <select class="form-select" id="reqby" name="reqby">

                                                        <option value="">Pilih Reqby</option>

                                                        @foreach ($reqby as $req)
                                                            <option value="{{ $req->username }}">
                                                                {{ $req->firstname }}
                                                            </option>
                                                        @endforeach

                                                    </select>
                                                @endif

                                            </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">
                                                        @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 }}">
                                                                        <label class="form-check-label"
                                                                            for="hardware_{{ $hardware->id }}">
                                                                            {{ $hardware->action }}
                                                                        </label>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p></p>
                            <hr>
                            <p></p>
                            <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 }}">
                                                                        <label class="form-check-label"
                                                                            for="software_{{ $software->id }}">
                                                                            {{ $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">Detail</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></th>
                                        <th>Item</th>
                                        <th>Tipe</th>
                                        <th>Code</th>
                                        <th>Merk</th>

                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="table-data">

                                    <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>
                            <button type="button" class="btn btn-primary" id="additem">
                                Add Item <i class="bi bi-file-earmark-plus"></i>
                            </button>
                            <input type="hidden" id="id_item" value="0" />

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

    <!-- Modal untuk menampilkan detail Material -->
    <div class="modal fade" id="modalCode" tabindex="-1" aria-labelledby="modalCode" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalCode">List Asset</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="obatDetail">
                    <div class="table-responsive">

                        <table id="tableCode" class="table table-bordered table-striped" style="width:100%">
                            <thead style="background-color: #daecff;">
                                <tr>
                                    <th scope="col">Action</th>
                                    <th scope="col">Code</th>
                                    <th scope="col">User/Location</th>
                                    <th scope="col">Merk</th>
                                    <th scope="col">Maintenance</th>

                                </tr>
                            </thead>
                            <tbody id="codeTableBody">

                            </tbody>

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

    <script>
        const kategori = @json($kategori);
        const monitorList = @json($monitorList);
        const printerList = @json($printerList);
        const scannerList = @json($scannerList);

        // console.log('printer', printerList);

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

        function select_user(nik, nama) {
            // Set the selected code to the material input
            document.getElementById('user').value = nik;
            document.getElementById('dusername').value = nama;
            // Mengisi nilai ke elemen input


            // Close the modal after selection
            const modal = bootstrap.Modal.getInstance(document.getElementById('modalUser'));
            $('#modalUser').modal('hide');
        }
        var id_item = 0;
        var jumlah_item = 0;

        $("#additem").click(function() {
            jumlah_item++;
            id_item = id_item + 10;

            // Tambahkan baris baru
            var newRow = $(`
            <tr class="tdeliv-row">
                <td scope="row"><button class="btn btn-danger btn-sm hapus" type="button">X</button></td>
                <td scope="row"><input type="hidden" name="prefen-item-number[]" id="prefen-item-number" value="` +
                id_item + `" />` + id_item + `</td>
                <td scope="row">
                   <select name="prefen-tipe[]" class="form-select" onchange="change_tipe(this)" id="prefen-tipe" style="width: 150px;">
                    <option value="" selected>Pilih Tipe</option> 
                    ` + kategori.map(kategori =>
                    `<option value="${kategori.value}">${kategori.name}</option>`).join('') + `
                    </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" readonly>
                        <span class="input-group-text bg-primary btn-search text-light" onclick="getCode(this)" style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor: pointer;">
                            <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;" required readonly></td>
                
                <td scope="row">
                    <select class="form-control prefen-action" name="prefen-action[]" multiple style="width: 700px;" required>
                    </select>
                </td>
            </tr>
            `);

            // Tambahkan baris baru ke dalam tabel
            $('#table-data').append(newRow);

            // Fungsi klik untuk tombol hapus
            newRow.find('.hapus').on('click', function() {
                $(this).closest('tr').remove();
                jumlah_item--;
            });
        });

        function change_tipe(obj) {
            var row = $(obj).closest('tr');
            var tipe = row.find('select[id="prefen-tipe"]').val(); // Cari berdasarkan 'name'
            var actionSelect = row.find('.prefen-action');
            var cariKode = row.find('input[id="prefen-code"]').val(); // Cari kode
            // hapus code dari array tempDetail
            var delCode = tempDetail.filter(obj => obj.code !== cariKode);
            tempDetail = delCode;

            // Reset code dan merk jika tipe berubah
            row.find('.prefen-code').val('');
            row.find('.prefen-merk').val('');
            row.find('.prefen-action').val('');

            console.log('tipe', tipe);

            // Kosongkan select sebelum menambahkan opsi baru
            actionSelect.empty().append('<option value="">Pilih Action</option>');

            let dataList = [];

            if (tipe === "mont") {
                dataList = monitorList;
            } else if (tipe === "prin") {
                dataList = printerList;
            } else if (tipe === "scan") {
                dataList = scannerList;
            }

            // Debugging: Cek apakah dataList memiliki data


            if (dataList.length > 0) {
                dataList.forEach(item => {
                    actionSelect.append(`<option value="${item.id}">${item.action}</option>`);
                });
            }

            // Jika menggunakan Select2, inisialisasi ulang
            if ($.fn.select2) {
                actionSelect.select2();
            }
        }


        var tempCode = '';

        function getCode(obj) {
            var row = $(obj).closest('tr');
            var tipe = row.find('select[id="prefen-tipe"]').val(); // Cari berdasarkan 'name'
            var kode = row.find('input[id="prefen-code"]').val();
            if (kode != '') {
                tempCode = kode;
            }

            $('.waiting').removeClass('waiting');
            $('.waiting-code').removeClass('waiting-code');
            $('.waiting-merk').removeClass('waiting-merk');
            $(obj).parents('.input-group').find('input[id="prefen-code"]').addClass('waiting');
            $(obj).parents('tr').find('input[id="prefen-merk"]').addClass('waiting-merk');

            $.ajax({
                url: "{{ URL::to('/') }}/preven/code",
                type: "POST",
                dataType: "JSON",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    tipe: tipe
                },
                success: function(data) {
                    // masukkan kedalam modal list material
                    loadCode(data);
                    $('#modalCode').modal('show');
                },
                error: function(xhr, status, error) {
                    // Menangani kesalahan
                    console.error("Error occurred:", error);
                }
            });

        }

        function loadCode(list) {
            var listCode = [];
            var i = 0;
            list.forEach($c => {
                var object = {};
                let actionHTML;

                var findCode = tempDetail.find(item => item.code == $c['code']);

                if (findCode) {
                    actionHTML = `
                    <span class="btn badge bg-secondary" disabled>
                        Selected
                    </span>`;
                } else {
                    actionHTML = `
                    <span class="btn badge bg-primary"
                        onclick="select_code('` + $c['code'] + `', '` + $c['merk_name'] + `', '` + $c['type'] + `')">
                        <i class="fa fa-check-circle-o me-1"></i>
                        Select
                    </span>`;
                }

                object['ACTION'] = actionHTML;

                object['CODE'] = $c['code'];
                object['USER'] = $c['user_name'];
                object['MERK'] = $c['merk_name'] + ' - ' + $c['type'];
                object['MAINTENANCE'] = $c['maintenance_name'];


                listCode.push(object);

                if (i == (list.length - 1)) {
                    refreshTableCode(listCode);
                }
                i = i + 1;
            });
        }

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

                "data": list,
                "columns": [{
                    data: 'ACTION'
                }, {
                    data: 'CODE'
                }, {
                    data: 'USER'
                }, {
                    data: 'MERK'
                }, {
                    data: 'MAINTENANCE'
                }],

            });
        }

        // variabel untuk menampung code yang telah dipilih
        var tempDetail = [];

        function select_code(code, merk, type) {
            $('.waiting').val(code);
            $('.waiting-merk').val(merk + '-' + type);

            // hapus code dari array tempDetail
            var delCode = tempDetail.filter(obj => obj.code !== tempCode);
            tempDetail = delCode;
            // push code ke array tempDetail
            tempDetail.push({
                code: code
            });


            $('.btn-close').click();
        }

        $('#prefen-save').click(function() {
            // Ambil data header
            var code = $('input[name="code"]').val();
            var user = $('input[name="user"]').val();
            var date = $('input[name="date"]').val();
            var reqby = $('[name="reqby"]').val();


            var hardware = [];
            $('input[name="hardware"]:checked').each(function() {
                hardware.push($(this).val());
            });

            if ($('#hardware').is(':checked')) {
                var otherValue = $('#hardware_other_input').val().trim();
                if (otherValue !== "") {
                    hardware.push(otherValue);
                }
            }

            var software = [];
            $('input[name="software"]:checked').each(function() {
                software.push($(this).val());
            });

            if ($('#software').is(':checked')) {
                var otherValue = $('#software_other_input').val().trim();
                if (otherValue !== "") {
                    software.push(otherValue);
                }
            }

            //  **VALIDASI: Minimal 1 hardware atau software harus dipilih**
            if (hardware.length === 0 && software.length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan!',
                    text: 'Harap lengkapi data sebelum menyimpan!',
                });
                return; // Hentikan eksekusi jika tidak memenuhi syarat
            }


            var prefenItem = document.getElementsByName('prefen-item-number[]');
            var prefenTipe = document.getElementsByName('prefen-tipe[]');
            var prefenCode = document.getElementsByName('prefen-code[]');
            var prefenMerk = document.getElementsByName('prefen-merk[]');
            var prefenAction = document.getElementsByName('prefen-action[]');

            var listDetail = [];
            let select = document.getElementsByName("prefen-action[]");

            for (var i = 0; i < jumlah_item; i++) {
                let selectedValues = Array.from(select[i].selectedOptions).map(option => option.value);

                if (selectedValues.length === 0) {
                    isValid = false;

                    Swal.fire({
                        icon: 'warning',
                        title: 'Peringatan',
                        text: 'Harap lengkapi action pada detail!',
                    });

                    return; // keluar dari loop saat ketemu yang belum diisi
                }


                var object = {};
                object['item'] = prefenItem[i].value;
                object['tipe'] = prefenTipe[i].value;
                object['codeD'] = prefenCode[i].value;
                object['merk'] = prefenMerk[i].value;
                object['action'] = selectedValues;
                listDetail.push(object);
            }

            var frm = {
                'code': code,
                'user': user,
                'date': date,
                'reqby': reqby,
                'hardware': hardware,
                'software': software,
                'detail': listDetail
            }

            console.log('frm', frm);


            $.ajax({
                url: "{{ URL::to('/') }}/preven/store",
                type: "POST",
                dataType: "JSON",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                data: {
                    frm: frm,
                },
                success: function(data) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: 'Data berhasil disimpan.',
                        confirmButtonText: 'OK',
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.href = "{{ URL::to('/') }}/preven";
                        }
                    });
                },
                error: function(xhr, status, error) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal!',
                        text: 'Terjadi kesalahan saat menyimpan data!',
                    });
                },
            });



        });
    </script>
@endsection