@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>
                        @if ($authorize->edit == '1')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0" id="{{ $dmenu }}-save"><i
                                    class="fas fa-floppy-disk me-1"> </i><span class="font-weight-bold">Simpan</button>
                        @endif
                        {{-- check authorize edi --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- form filter --}}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                {{-- form header --}}
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Header</p>
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            <div class="col-md-6">
                                <form role="form" method="POST" id="form-filter" enctype="multipart/form-data"
                                    action="{{ URL::to($url_menu) }}">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-12">

                                            <div class="d-flex align-items-center">
                                                <label for="kode-kategori" class="form-label me-2"
                                                    style="min-width: 150px;">Kode Kategori Seragam <code>*</code></label>
                                                <small class="form-text text-muted"></small>
                                                {{-- nantinya digunakan untuk menyimpan id di edit --}}
                                                <input type="text" class="form-control upper" id="kode-kategori"
                                                    name="kode_kategori" placeholder="-" maxlength="8"
                                                    value="{{ $list->kode_kategori }}" readonly>
                                                <input type="text" class="form-control" id="encrypted-kode-kategori"
                                                    name="encrypted_kode_kategori" placeholder="-" hidden
                                                    value="{{ $list->encrypted_kode }}">
                                            </div>
                                            <p></p>
                                            <div class="d-flex align-items-center">
                                                <label for="nama-kategori" class="form-label me-2"
                                                    style="min-width: 150px;">Nama Kategori <code>*</code></label>
                                                <small class="form-text text-muted"></small>
                                                {{-- nantinya digunakan untuk menyimpan id di edit --}}
                                                <input type="text" class="form-control upper" id="nama-kategori"
                                                    name="nama_kategori" value="{{ $list->nama_kategori }}">
                                            </div>
                                            <p></p>
                                            <div class="d-flex align-items-center mb-3">
                                                <label for="bagian" class="form-label me-2" style="min-width: 150px;">
                                                    Bagian <code> *</code>
                                                </label>
                                                <small class="form-text text-muted"></small>

                                                <select name="bagian[]" id="bagian" class="form-select" multiple>
                                                    <option value="ALL"
                                                        {{ in_array('ALL', $bagian_selected ?? []) ? 'selected' : '' }}>
                                                        ALL
                                                    </option>
                                                    @foreach ($bagian as $bgn)
                                                        <option value="{{ $bgn->id }}"
                                                            {{ in_array($bgn->id, $bagian_selected ?? []) ? 'selected' : '' }}>
                                                            {{ $bgn->nama }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>

                                        </div>
                                    </div>
                                </form>
                            </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 mb-3">
                                                <label for="lokasi" class="form-label me-2"
                                                    style="min-width: 150px;">Lokasi <code> *</code></label>
                                                <small class="form-text text-muted"></small>
                                                <select name="lokasi" id="lokasi" class="form-select">
                                                    <option value=""></option>
                                                    @foreach ($lokasi as $lks)
                                                        <option value="{{ $lks->value }}"
                                                            {{ $list->lokasi == $lks->value ? 'selected' : '' }}>
                                                            {{ $lks->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="d-flex align-items-center mb-3">
                                                <label for="jabatan" class="form-label me-2"
                                                    style="min-width: 150px;">Jabatan <code> *</code></label>
                                                <small class="form-text text-muted"></small>
                                                <select name="jabatan[]" id="jabatan" class="form-select" multiple>
                                                    <option value="ALL"
                                                        {{ in_array('ALL', $jabatan_selected ?? []) ? 'selected' : '' }}>
                                                        ALL
                                                    </option>
                                                    @foreach ($jabatan as $bgn)
                                                        <option value="{{ $bgn->id }}"
                                                            {{ in_array($bgn->id, $jabatan_selected ?? []) ? 'selected' : '' }}>
                                                            {{ $bgn->nama }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <p></p>
                                            <div class="d-flex align-items-center mb-3">
                                                <label for="jenis-kelamin" class="form-label me-2"
                                                    style="min-width: 150px;">
                                                    Jenis Kelamin <code>*</code>
                                                </label>
                                                <small class="form-text text-muted"></small>

                                                <div class="form-check me-3">
                                                    <input class="form-check-input" type="radio" name="jenis_kelamin"
                                                        id="jenis-kelamin-pria" value="L"
                                                        {{ ($list->jenis_kelamin ?? '') == 'L' ? 'checked' : '' }}
                                                        disabled>
                                                    <label class="form-check-label" for="jenis-kelamin-pria">
                                                        Laki-laki
                                                    </label>
                                                </div>

                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="jenis_kelamin"
                                                        id="jenis-kelamin-wanita" value="P"
                                                        {{ ($list->jenis_kelamin ?? '') == 'P' ? 'checked' : '' }}
                                                        disabled>
                                                    <label class="form-check-label" for="jenis-kelamin-wanita">
                                                        Perempuan
                                                    </label>
                                                </div>
                                            </div>

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

    {{-- Form 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">

                        <div class="table-responsive">

                            <table class="table table-hover" id="detail-tbl">
                                <thead style="background-color: #bcf4f5; text-align: left;">
                                    <tr>
                                        <th scope="col" width="10%" class="text-start">Act</th>
                                        <th>Item Number</th>
                                        <th scope="col" width="45%" class="text-start">Jenis Seragam</th>
                                        <th scope="col" width="45%" class="text-start">Tipe Seragam</th>
                                        <th scope="col" width="30%" class="text-end">QTY</th>
                                    </tr>
                                </thead>
                                <tbody id="detail-tbl-data">
                                    @php
                                        $no = 0;
                                    @endphp
                                    @foreach ($list_d as $dt)
                                        <tr class="{{ $dt->isactive == 0 ? 'deleted-row' : '' }}">
                                            <td scope="row">
                                                <span class="badge text-danger btn delete-item-number-seragam"
                                                    onclick="deleteItem('{{ $dt->id_item }}', '{{ $dt->jenis_seragam_id }}', '{{ $dt->nama_tipe_seragam }}',this)">X</span>
                                                <input type="hidden" name="detail_status_item[]" value="update" />
                                                <input type="hidden" name="detail_isactive[]"
                                                    value="{{ $dt->isactive }}"
                                                    id="detail-isactive-{{ $dt->id_item }}" />
                                                <input type="hidden" name="item_number_seragam[]"
                                                    value="{{ $dt->id_item }}" id="item-number-seragam" />
                                            </td>
                                            <td>{{ $dt->id_item }}</td>
                                            <td>
                                                <div class="input-group">
                                                    <input type="text" class="form-control"
                                                        name="detail_jenis_seragam[]" placeholder="Jenis Seragam"
                                                        aria-describedby="detail-jenis-seragam" readonly
                                                        id="detail-jenis-seragam" value="{{ $dt->jenis_seragam_id }}"
                                                        hidden>

                                                    <input type="text" class="form-control p-1"
                                                        name="detail_nama_jenis_seragam[]" placeholder="Jenis Seragam"
                                                        aria-describedby="detail-nama-jenis-seragam" readonly
                                                        id="detail-nama-jenis-seragam"
                                                        value="{{ $dt->nama_jenis_seragam }}">
                                                </div>
                                            </td>
                                            <td scope="row" class="text-center">
                                                <div class="input-group">
                                                    <input type="text" class="form-control"
                                                        name="detail_tipe_seragam[]" placeholder="Tipe Seragam"
                                                        aria-describedby="detail-tipe-seragam" readonly
                                                        id="detail-tipe-seragam" value="{{ $dt->nama_tipe_seragam }}">
                                                    <input type="text" class="form-control" name="id_uniform_type[]"
                                                        placeholder="Id Uniform Type" aria-describedby="id-uniform-type"
                                                        readonly id="id-uniform-type" value="{{ $dt->id_uniformtype }}"
                                                        hidden>
                                                </div>
                                            </td>
                                            <td scope="row">
                                                <input type="number" class="form-control" name="detail_qty_seragam[]"
                                                    placeholder="Quantity" value="{{ $dt->jumlah }}" min="0"
                                                    id="detail-qty-seragam-{{ $dt->id_item }}" required>
                                            </td>
                                            @php
                                                $no += 1;
                                            @endphp
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <button type="button" class="btn btn-primary" id="btn-add-item">
                                Add Item <i class="bi bi-file-earmark-plus"></i>
                            </button>
                            <input type="text" class="form-control" name="jumlah_item" placeholder="value"
                                style="background-color: #e6e6e6;" readonly id="jumlah-item" value="{{ $no++ }}"
                                hidden>
                            <input type="text" hidden name="temp_item_number" value="{{ $dt->id_item }}">
                            {{-- untuk menyimpan value item number --}}

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- End Form Detail --}}
    {{-- modal jenis_seragam --}}
    <div class="modal fade" id="modalJenisSeragam" tabindex="-1" aria-labelledby="modalJenisSeragam"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">List Jenis Seragam</h5>
                    <button type="button" class="btn-close text-muted" data-bs-dismiss="modal"
                        aria-label="Close">X</button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table id="tableJenisSeragam" class="table table-bordered table-striped" style="width:100%">
                            <thead style="background-color: #bcf4f5;">
                                <tr>
                                    <th scope="col">Action</th>
                                    <th scope="col">Jenis Seragam</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- end modal jenis seragam --}}


    {{-- modal tipe_seragam --}}
    <div class="modal fade" id="modalTipeSeragam" tabindex="-1" aria-labelledby="modalJenisSeragam"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">List Tipe Seragam</h5>
                    <button type="button" class="btn-close text-muted" data-bs-dismiss="modal"
                        aria-label="Close">X</button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table id="tableTipeSeragam" class="table table-bordered table-striped" style="width:100%">
                            <thead style="background-color: #bcf4f5;">
                                <tr>
                                    <th scope="col">Action</th>
                                    <th scope="col">Jenis Seragam</th>
                                    <th scope="col">Tipe Seragam</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- end modal jenis seragam --}}
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <script>
        let jumlah_item = $('input[name="jumlah_item"]').val();

        let listJenisSeragam = [];
        let listTipeSeragam = [];
        let jenisSeragam = [];
        let tipeSeragam = [];
        // let tempIsactive = $(`input[name="detail_isactive[]"]`).val();
        // let jumlah_item = Number($('input[name="jumlah_item[]"]').val());
        $(document).ready(function() {
            let item_number_seragam = Number($('input[name="item_number_seragam[]"]').last().val());
            $('#bagian').select2({
                placeholder: "Bagian",
                allowClear: true,
                width: '100%'
            });
            $('#jabatan').select2({
                placeholder: "Jabatan",
                allowClear: true,
                width: '100%'
            });
            // let detail_item_number = $('input[name="item_number_seragam[]"]');
            // let jenis_seragam = $('input[name="detail_jenis_seragam[]"]');
            // let detail_isactive = $('input[name="detail_isactive[]"]');
            // let detail_qty = $('input[name="detail_qty_seragam[]"]');
            // // get material yang sudah terdaftar
            // for (var i = 0; i < parseInt(jumlah_item); i++) {
            //     var itemNumSeragam = detail_item_number[i].value;
            //     // untuk mendeteksi material apa saja yg telah dipilih
            //     // jenisSeragam.push(jenis_seragam[i].value);
            //     if (detail_isactive[i].value != '0') {
            //         jenisSeragam.push(jenis_seragam[i].value);

            //     } else {
            //         detail_qty[i].setAttribute('readonly', true);
            //     }
            // }

            $("#btn-add-item").click(function() {
                item_number_seragam += 10;
                // $('input[name="detail-item-number"]').val(item_number_seragam);
                // jumlah item akan bertambah ketikan button addItem ditekan
                jumlah_item++;

                // Tambahkan baris baru
                var newRow = $(`
                    <tr class="detail-row">
                        <td scope="row">
                            <span class="badge text-danger btn delete-item-number-seragam">X</span>
                            <input type="hidden" name="detail_status_item[]" value="insert"/>
                        </td>
                        <td scope="row">
                            <input type="hidden" name="item_number_seragam[]" value="${item_number_seragam}" /> ${item_number_seragam}
                        </td>

                         <td>
                            <div class="input-group">
                                <input type="text" class="form-control" name="detail_jenis_seragam[]" placeholder="Jenis Seragam" aria-describedby="detail-jenis-seragam" readonly id="detail-jenis-seragam">
                                 <input type="text" class="form-control" name="id_jenis_seragam[]" placeholder="ID Jenis Seragam" aria-describedby="id-jenis-seragam" readonly id="id-jenis-seragam" hidden>
                                <button type="button" class="btn btn-primary btn-search" name="btn_detail_jenis_seragam[]" data-type="jenis">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </td>
                        <td scope="row" class="text-center">
                            <div class="input-group">
                                <input type="text" class="form-control" name="detail_tipe_seragam[]" placeholder="Tipe Seragam" aria-describedby="detail-tipe-seragam" readonly id="detail-tipe-seragam">
                                <input type="text" class="form-control" name="id_uniform_type[]" placeholder="ID Uniform Type" aria-describedby="id-uniform-type" readonly id="id-uniform-type" hidden>
                                <button type="button" class="btn btn-primary btn-search" name="btn_detail_tipe_seragam[]" data-type="tipe">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </td>
                        <td scope="row">
                            <input type="number" class="form-control" name="detail_qty_seragam[]" placeholder="Quantity" value="" min="0" id="detail-qty-seragam-${item_number_seragam}" required>
                        </td>
                    </tr>
                    `);
                // // Tambahkan baris baru ke dalam tabel
                $('#detail-tbl-data').append(newRow);

                // Fungsi klik untuk tombol hapus
                newRow.find('.delete-item-number-seragam').on('click', function() {
                    $(this).closest('tr').remove();
                    var deletedCode = $(this).closest('tr').find(
                        'input[name="detail_jenis_seragam[]"]').val();
                    jenisSeragam = jenisSeragam.filter(mat => mat !== deletedCode);
                    jumlah_item--;
                });

                // // Fungsi klik untuk membuka modal material
                newRow.find('.btn-search').on('click', function() {
                    const index = $(this).closest('tr').index();
                    const type = $(this).data('type');
                    var obj = $(this); // Ambil elemen yang diklik
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });

                    if (type == 'jenis') {
                        $('.jenis-srgm').removeClass('jenis-srgm');
                        $('.id-jenis-seragam').removeClass('id-jenis-seragam');
                        $(obj).parents('.input-group').find(
                                'input[name="detail_jenis_seragam[]"]')
                            .addClass('jenis-srgm');
                        $(obj).parents('.input-group').find('input[name="id_jenis_seragam[]"]')
                            .addClass('id-jenis-seragam');
                        $.ajax({
                            url: '{{ URL::to('/') }}/mstkat/getJenisSeragam',
                            method: "POST",
                            success: function(response) {
                                //console.log('Response Jenis Seragam:', response);
                                if (response.status == 'success') {
                                    $('#modalJenisSeragam').modal('show');
                                    loadDataJenisSeragam(response.data,
                                        item_number_seragam);
                                } else {
                                    Swal.fire({
                                        title: 'Oops!',
                                        text: 'Get Data Failed',
                                        icon: 'warning',
                                        confirmButtonText: 'OK'
                                    });
                                }
                            },
                        });

                        $('#modalJenisSeragam').data('trigger-source', index);
                    } else if (type == 'tipe') {
                        let jenis_seragam = $('.id-jenis-seragam').val();
                        let jenis_kelamin = $('input[name="jenis_kelamin"]').val();
                        $('.tipe-srgm').removeClass('tipe-srgm');
                        $('.id-uniform-type').removeClass('id-uniform-type');
                        $(obj).parents('.input-group').find(
                                'input[name="detail_tipe_seragam[]"]')
                            .addClass('tipe-srgm');
                        $(obj).parents('.input-group').find('input[name="id_uniform_type[]"]')
                            .addClass('id-uniform-type');
                        $.ajax({
                            url: '{{ URL::to('/') }}/mstkat/getTipeSeragam',
                            method: "POST",
                            data: {
                                jenis_seragam: jenis_seragam,
                                jenis_kelamin: jenis_kelamin
                            },
                            success: function(response) {
                                //console.log('Response Tipe Seragam:', response);
                                if (response.status == 'success') {
                                    $('#modalTipeSeragam').modal('show');
                                    loadDataTipeSeragam(response.data, item_number_seragam);
                                } else {
                                    Swal.fire({
                                        title: 'Oops!',
                                        text: 'Get Data Failed',
                                        icon: 'warning',
                                        confirmButtonText: 'OK'
                                    });
                                }
                            },
                        });

                        $('#modalTipeSeragam').data('trigger-source', index);
                    }

                    // end cek sloc dan get material
                });
            });
        });

        function deleteItem(item, jenis_seragam, tipe_seragam, obj) {
            let inputIsactive = $(`#detail-isactive-${item}`);
            let currentIsactive = parseInt(inputIsactive.val());

            let newValue = currentIsactive == 0 ? 1 : 0;
            // Menampilkan dialog SweetAlert untuk konfirmasi
            Swal.fire({
                title: "Apakah anda yakin?",
                text: `Detail: "${jenis_seragam} - ${tipe_seragam}" akan di${newValue == 1 ? 'Aktifkan' : 'NonAktifkan'}`,
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: newValue == 1 ? "Ya, Aktifkan" : "Ya, NonAktifkan"
            }).then((result) => {
                if (result.isConfirmed) {
                    inputIsactive.val(newValue);
                    // Toggle status isactive (0 -> 1 atau 1 -> 0)
                    // if (tempIsactive == 0) {
                    //     tempIsactive = 1; // Mengubah status menjadi aktif
                    // } else {
                    //     tempIsactive = 0; // Mengubah status menjadi non-aktif
                    // }
                    // Temukan baris terkait berdasarkan tombol yang ditekan
                    let row = $(obj).closest('tr');

                    // Tandai input terkait dengan status 'delete' atau 'activate' untuk manipulasi tampilan
                    row.find('input[name="detail_status_item[]"]').val(newValue == 0 ? 'nonActive' :
                        'active'); // Mengubah status berdasarkan tempIsactive
                    // Menambahkan atau menghapus kelas readonly pada input berdasarkan nilai tempIsactive
                    //console.log(row.find('input[name="detail_qty_seragam[]"]'));
                    row.hide();
                    // Manipulasi tampilan berdasarkan status
                    if (newValue == 0) {
                        // Menambahkan kelas 'deleted-row' (misalnya memberikan warna merah) jika non-aktif
                        row.addClass('deleted-row');
                        $(`#detail-qty-seragam-${item}`).attr('readonly', true)
                        // var deletedCode = row.closest('tr').find(
                        //     'input[name="detail_jenis_seragam[]"]').val();
                        // jenisSeragam = jenisSeragam.filter(mat => mat !== deletedCode);
                    } else {
                        // Menghapus kelas 'deleted-row' dan mengembalikan item menjadi aktif
                        row.removeClass('deleted-row');
                        $(`#detail-qty-seragam-${item}`).removeAttr('readonly')
                    }

                    // Menampilkan pesan sukses dengan SweetAlert
                    Swal.fire(
                        "Berhasil",
                        `Detail "${jenis_seragam} - ${tipe_seragam}" berhasil di${newValue == 0 ? 'NonAktifkan' : 'Aktifkan'}.`,
                        "success"
                    );

                }
            });
        }

        $('#{{ $dmenu }}-save').click(function(e) {
            e.preventDefault();
            // spinner dan disable button
            $(this).append(
                ' <span class="spinner-border spinner-border-sm icon-load" role="status" aria-hidden="true"></span>'
            );
            $(this).attr('disabled', '');

            // header [tapi yang bisa diedit cuma lokasi]
            let kode_kategori = $('input[name="kode_kategori"]').val();
            let nama_kategori = $('input[name="nama_kategori"]').val();
            let encrypted_kode_kategori = $('input[name="encrypted_kode_kategori"]').val();
            let bagian = $('select[name="bagian[]"]').val() || [];
            let bagianStr = bagian.join(',');
            let lokasi = $('select[name="lokasi"]').val();
            let jabatan = $('select[name="jabatan[]"]').val() || [];
            let jabatanStr = jabatan.join(',');
            let jenis_kelamin = $('input[name="jenis_kelamin"]:checked').val();
            if (nama_kategori == '' || bagian == [] || lokasi == '' || jabatan == [] || jenis_kelamin == '') {
                Swal.fire({
                    title: 'Warning!',
                    text: 'Semua Field Header Harus Diisi!',
                    icon: 'warning',
                    confirmButtonColor: '#3085d6'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $('.icon-load').remove();
                        $(this).removeAttr('disabled');
                    }
                });
            } else {
                let kategori_d = [];
                let detail_item_number_seragam = $('input[name="item_number_seragam[]"]');
                let detail_jenis_seragam = $('input[name="detail_jenis_seragam[]"]');
                let detail_tipe_seragam = $('input[name="detail_tipe_seragam[]"]');
                let detail_qty_seragam = $('input[name="detail_qty_seragam[]"]');
                let detail_status_data_detail = $('input[name="detail_status_item[]"]');
                var id_uniform_type = $('[name="id_uniform_type[]"]');

                for (var i = 0; i < jumlah_item; i++) {
                    if (detail_qty_seragam[i].value == '' || detail_jenis_seragam[i].value == '' ||
                        detail_tipe_seragam[i].value == '') {
                        console.log('Di Blok IF');
                        Swal.fire({
                            title: 'Warning!',
                            text: 'Semua Field Detail Wajib Diisi!',
                            icon: 'warning',
                            confirmButtonColor: '#3085d6'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                $('.icon-load').remove();
                                $(this).removeAttr('disabled');
                            }
                        });
                    } else {
                        var obj = {};
                        obj['detail_kode_kategori'] = kode_kategori;
                        obj['id_item'] = detail_item_number_seragam[i].value;
                        obj['jenis_seragam'] = detail_jenis_seragam[i].value;
                        obj['tipe_seragam'] = detail_tipe_seragam[i].value;
                        obj['id_uniform_type'] = id_uniform_type[i].value;
                        obj['jumlah'] = detail_qty_seragam[i].value;
                        obj['status_detail_seragam'] = detail_status_data_detail[i].value
                        kategori_d.push(obj);
                    }

                    console.log("Kategori D ", kategori_d);
                }


                var req = {
                    'kode_kategori': kode_kategori,
                    'nama_kategori': nama_kategori,
                    'encrypted_kode': encrypted_kode_kategori,
                    'bagian': bagianStr,
                    'lokasi' : lokasi,
                    'jabatan': jabatanStr,
                    'jenis_kelamin' : jenis_kelamin,
                    'kategori_d': kategori_d
                }

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

                $.ajax({
                    url: '{{ URL::to('/') }}/mstkat/update',
                    data: {
                        _method: 'PUT', // Simulasikan PUT
                        req: req
                    },
                    method: "POST", // WAJIB POST kalau pakai _method
                    success: function(response) {
                        if (response.status == 'success') {
                            $('.icon-load').remove();
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil',
                                text: response.message,
                                confirmButtonText: 'OK',
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    window.location.href = "{{ URL::to('/') }}/mstkat";
                                    setTimeout(() => {
                                        window.location.reload();
                                    }, 1000);
                                }
                            });
                        } else if (response.status == 'duplicate') {
                            Swal.fire({
                                icon: 'warning',
                                title: 'Warning!',
                                text: response.message,
                                confirmButtonText: 'OK',
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    $('.icon-load').remove();
                                    $('#{{ $dmenu }}-save').prop('disabled', false);
                                }
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal',
                                text: 'Gagal Menyimpan Data',
                                confirmButtonText: 'OK',
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    $('.icon-load').remove();
                                    $('#{{ $dmenu }}-save').prop('disabled', false);
                                }
                            });
                        }
                    }
                })
            }
        })

        function loadDataJenisSeragam(data, item) {
            console.log("Data Jenis Seragam: ", data);
            listJenisSeragam = [];

            if (!data || data.length === 0) {
                console.log("No data received");
                refreshTableJenisSeragam([], item);
                return;
            }

            data.forEach(($dt, i) => {
                var obj = {};
                if (jenisSeragam.includes($dt.kode_jenis_seragam)) {
                    obj['action'] = `
                            <span class="btn badge bg-secondary disabled">
                                <i class="bi-check-circle me-1"></i> Selected
                            </span>
                            `;
                } else {
                    obj['action'] = `
                            <span class="btn badge bg-primary"
                                onclick="selectJenisSeragam('${$dt.id}', '${item}', '${$dt.kode_jenis_seragam}')">
                                <i class="bi-check-circle me-1"></i>Select
                            </span>
                            `;
                }

                obj['value'] = $dt.nama_jenis_seragam;

                listJenisSeragam.push(obj);

                // Gunakan $index untuk mengecek elemen terakhir
                if (i === data.length - 1) {
                    refreshTableJenisSeragam(listJenisSeragam, item);
                }
            });
        }

        function refreshTableJenisSeragam(list, item) {
            $('#tableJenisSeragam').DataTable({
                "autoWidth": false,
                "destroy": true,
                "lengthChange": false,
                "searching": true,
                "paging": true,
                "info": false,
                "ordering": true,
                "dom": 'frtip',
                buttons: [
                    'excel', 'print'
                ],
                fixedColumns: {
                    left: 2
                },
                "data": list,
                "columns": [{
                        data: 'action',
                    },
                    {
                        data: 'value',
                    },
                ],
            });
        }

        function selectJenisSeragam(value, item, nama) {
            jenisSeragam = jenisSeragam.filter(nama => nama !== $('.jenis-srgm').val());
            $('.jenis-srgm').val(nama);
            $('.id-jenis-seragam').val(value);
            jenisSeragam.push({
                name: nama,
                id: value
            });

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

        function loadDataTipeSeragam(data, item) {
            console.log("Data Tipe Seragam: ", data);
            listTipeSeragam = [];

            if (!data || data.length === 0) {
                console.log("No tipe data received");
                refreshTableTipeSeragam([], item);
                return;
            }

            data.forEach(($dt, i) => {
                var obj = {};
                if (tipeSeragam.includes($dt.id)) {
                    obj['action'] = `
                            <span class="btn badge bg-secondary disabled">
                                <i class="bi-check-circle me-1"></i> Selected
                            </span>
                            `;
                } else {
                    obj['action'] = `
                            <span class="btn badge bg-primary"
                                onclick="selectTipeSeragam('${$dt.id}', '${item}', '${$dt.nama_tipe_seragam}')">
                                <i class="bi-check-circle me-1"></i>Select
                            </span>
                            `;
                }
                obj['jenis_seragam'] = $dt.nama_jenis_seragam;
                obj['tipe_seragam'] = $dt.nama_tipe_seragam;

                listTipeSeragam.push(obj);

                // Gunakan $index untuk mengecek elemen terakhir
                if (i === data.length - 1) {
                    refreshTableTipeSeragam(listTipeSeragam, item);
                }
            });
        }

        function refreshTableTipeSeragam(list, item) {
            console.log("Refresh : ", list);
            $('#tableTipeSeragam').DataTable({
                "autoWidth": false,
                "destroy": true,
                "lengthChange": false,
                "searching": true,
                "paging": true,
                "info": false,
                "ordering": true,
                "dom": 'frtip',
                buttons: [
                    'excel', 'print'
                ],
                fixedColumns: {
                    left: 2
                },
                "data": list,
                "columns": [{
                        data: 'action',
                    },
                    {
                        data: 'jenis_seragam',
                    },
                    {
                        data: 'tipe_seragam',
                    },
                ],
            });
        }

        function selectTipeSeragam(value, item, tipe_seragam) {
            tipeSeragam = tipeSeragam.filter(tipe_seragam => tipe_seragam !== $('.tipe-srgm').val());
            $('.tipe-srgm').val(tipe_seragam);
            $('.id-uniform-type').val(value);
            tipeSeragam.push({
                name: tipe_seragam,
                id: value
            });

            $('.btn-close').click();
        }
    </script>
    <style>
        .input-group .form-control {
            height: calc(2.25rem + 2px);
        }

        .input-group .btn {
            height: calc(2.25rem + 2px);
        }

        .form-group {
            margin-bottom: 1rem;
        }

        .row {
            margin-bottom: 0rem;
        }

        .form-group {
            margin-bottom: -1rem;
        }
    </style>
@endpush