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

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    {{-- alert --}}
                    @include('components.alert')

                    <div class="card-body">
                        <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                        <hr class="horizontal dark mt-0">
                        <div class="table-responsive">
                            <form id="my-form">
                                @csrf

                                {{-- <div class="form-group">
                                    <label class="font-weight-bold">Departement</label>
                                    <select class="form-select @error('dept') is-invalid @enderror" name="dept" id="dept" aria-label="Default select example">
                                        <option value="">Pilih Departement</option>
                                        @foreach ($dept as $dept)
                                            <option value="{{ $dept->value }}">{{ $dept->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('dept')
                                        <div class="alert alert-danger mt-2">{{ $message }}</div>
                                    @enderror
                                </div> --}}

                                <form id="searchForm">
                                    @csrf
                                    <div class="form-group">
                                        <label class="font-weight-bold">Kategori</label>
                                        <select class="form-select @error('category') is-invalid @enderror" name="category"
                                            id="category" aria-label="Default select example">
                                            <option value="">Pilih Kategori</option>
                                            <option value="CPU">CPU</option>
                                            <option value="LCD">Monitor</option>
                                            <option value="PRN">Printer</option>
                                            <option value="SCN">Scanner</option>
                                            <option value="SWT">Switch</option>
                                            <option value="Others">Others</option>
                                        </select>
                                        @error('category')
                                            <div class="alert alert-danger mt-2">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    {{-- sub kategori --}}
                                    <div class="form-group" id="sub-cpu" style="display: none;">
                                        <label class="font-weight-bold">Sub Kategori</label>
                                        <select class="form-select @error('subcategory') is-invalid @enderror"
                                            name="subcategory" id="subcategory" aria-label="Select Sub Category">
                                            <option value="">Pilih Sub Kategori</option>
                                            <!-- Options for CPU Sub Categories -->
                                            @foreach ($subcpu as $sub)
                                                <option value="{{ $sub->value }}">{{ $sub->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('subcategory')
                                            <div class="alert alert-danger mt-2">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    {{-- sub kategori --}}
                                    <div class="form-group" id="sub-others" style="display: none;">
                                        <label class="font-weight-bold">Sub Kategori</label>
                                        <select class="form-select @error('subcategory') is-invalid @enderror"
                                            name="subcategory" id="subothers" aria-label="Select Sub Category">
                                            <option value="">Pilih Sub Kategori</option>
                                            <!-- Options for CPU Sub Categories -->
                                            @foreach ($subothers as $sub)
                                                <option value="{{ $sub->value }}">{{ $sub->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('subcategory')
                                            <div class="alert alert-danger mt-2">{{ $message }}</div>
                                        @enderror
                                    </div>

                                </form>


                                <div class="col-md-3">
                                    <button type="button" class="btn btn-primary btn-search" onclick="searchItems()"
                                        style="margin-right: 10px;">
                                        <i class="fas fa-search me-1"></i>Search Code
                                    </button>
                                </div>

                        </div>

                    </div>

                    {{-- modal menampilkan master data --}}
                    <div class="modal fade" id="codeModal" tabindex="-1" aria-labelledby="codeModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="codeModalLabel">Master Data </h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="table-responsive">
                                        <table id="myTableMaster" class="table table-bordered table-striped"
                                            style="width:100%">
                                            <thead style="background-color: #daecff;">
                                                <tr>
                                                    <th scope="col">Action</th>
                                                    <th scope="col">Kode</th>
                                                    <th scope="col">Departement</th>
                                                    <th scope="col">User/Location</th>

                                                </tr>
                                            </thead>
                                            <tbody id="modal-body-content">

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <p></p>
            <div class="col-md-12">
                <div class="card">
                    {{-- alert --}}
                    @include('components.alert')

                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="table-barang" class="table table-bordered table-striped">
                                <thead>
                                    <tr id="first-row" style="text-align: center">
                                        <th>Action</th>
                                        <th>Kategori</th>
                                        <th>Code</th>
                                        <th>Not Maintainance by IT</th>
                                        <th>Keterangan</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>

                    </div>


                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            var category = document.getElementById('category');
            var codeInput = document.getElementById('code');
            $('select[name=""]')

            function resetCode() {
                codeInput.value = '';
            }

            category.addEventListener('change', resetCode);



        });

        var listCode = []; // Untuk menyimpan data hasil pencarian
        var tableData = []; // Array untuk menyimpan data dari tabel

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

            if (category == "") {
                Swal.fire({
                    title: 'Kategori Belum Dipilih!',
                    text: 'Harap memilih kategori terlebih dahulu.',
                    icon: 'warning',
                    confirmButtonText: 'OK'
                });
            } else {
                $.ajax({
                    url: '{{ URL::to('/') }}/search-code',
                    type: 'GET',
                    data: {
                        category: category
                    },
                    success: function(response) {
                        console.log(response);

                        listCode = [];

                        for (var index in response) {
                            var kolom3 = (category == 'CPU' || category == 'LCD') ? response[index].user_name :
                                response[index].location_name;

                            var obj = {};
                            var statCode = false;
                            for (var idx in tableData) {
                                if (response[index].code == tableData[idx].code) {
                                    statCode = true;
                                }
                            }

                            if (statCode == false) {
                                obj['ACTION'] =
                                    `<span class="btn badge bg-success select-btn" onclick="selectItem(this, '` +
                                    response[index].code + `' , '` + response[index].maintenance + `', '` +
                                    category + `')">
                                                    <i class="fa fa-check-circle-o me-1"></i>
                                                    Select
                                                </span>`;
                            } else {
                                obj['ACTION'] =
                                    `<span class="btn badge bg-secondary select-btn" disabled>
                                                    Selected
                                                </span>`;
                            }
                            obj['CODE'] = response[index].code;
                            obj['DEPT'] = response[index].dept_name;
                            obj['KOL3'] = kolom3;
                            listCode.push(obj);
                        }

                        $('#myTableMaster').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,
                            responsive: true,
                            "data": listCode,
                            "columns": [{
                                data: 'ACTION'
                            }, {
                                data: 'CODE'
                            }, {
                                data: 'DEPT'
                            }, {
                                data: 'KOL3'
                            }]
                        });

                        $('#codeModal').modal('show');
                    },
                    error: function(xhr) {
                        console.error('AJAX request error:', xhr.responseText);

                        Swal.fire({
                            title: 'Warning!',
                            text: 'Data tidak ditemukan.',
                            icon: 'warning',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }
        }

        // Fungsi untuk menangani penambahan item ke tabel `#table-barang`
        function selectItem(button, code, maintenance, category) {
            var inputKeterangan =
                `<input type="text" class="form-control" placeholder="Masukkan keterangan" oninput="updateTableData()">`;

            var maintenanceInput = '';

            // Gunakan if-else untuk menentukan input berdasarkan nilai maintenance
            if (maintenance == 0) {
                maintenanceInput = `<div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="maintenances_display" id="maintenances_display" value="0" disabled>
                                        <input type="hidden" name="maintenances" value="0">
                                    </div>`;
            } else {
                maintenanceInput = `<div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="maintenances_display" id="maintenances_display" value="1" checked disabled>
                                        <input type="hidden" name="maintenances" value="1">
                                    </div>`;
            }


            var row =
                `<tr> 
                            <td style="text-align: center;"><span class="btn badge bg-danger select-btn" onclick="deleteItem('` +
                code + `')">
                                                    X
                                                </span></td>
                            <td>${category}</td>
                            <td>${code}</td>
                            <td style="text-align: center;">${maintenanceInput}</td>
                            <td>${inputKeterangan}</td>
                        </tr>`;

            $('#table-barang tbody').append(row);

            // Tandai tombol "Select" yang diklik sebagai "Selected"
            $(button).removeClass('bg-success').addClass('bg-secondary').text('Selected').prop('disabled', true);
            $(button).removeAttr('onclick');

            // Update data tabel dalam array setelah menambahkan baris baru
            updateTableData();
        }

        function deleteItem(code) {
            $('#table-barang tbody tr').each(function() {
                var kode = $(this).find('td:eq(2)').text();
                if (kode == code) {
                    this.remove();
                }
            });

            updateTableData();
        }

        // Fungsi untuk mengupdate array dengan data dari tabel
        function updateTableData() {
            tableData = []; // Kosongkan array sebelum mengisinya kembali

            $('#table-barang tbody tr').each(function() {
                var category = $(this).find('td:eq(1)').text();
                var code = $(this).find('td:eq(2)').text();
                var maintenance = $(this).find('td:eq(3) .form-check-input').is(':checked') ? '1' : '0';
                var keterangan = $(this).find('td:eq(4) input').val(); // Baca nilai dari input

                var rowData = {
                    category: category,
                    code: code,
                    maintenance: maintenance,
                    keterangan: keterangan
                };

                tableData.push(rowData);
            });

            console.log(tableData); // Periksa data yang tersimpan dalam array
        }



        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $("#my-form").submit(function(e) {
            e.preventDefault();

            updateTableData();

            $.ajax({

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