@extends('layout.master')

@push('plugin-styles')
<link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/@mdi/css/materialdesignicons.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Master</a></li>
        @if ($kategori_nama)
        <li class="breadcrumb-item"><a href="/master/kategori">Kategori ( )</a></li>
        @endif
        <li class="breadcrumb-item active" aria-current="page">Produk</li>
    </ol>
</nav>

<div class="row">
    <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-header bg-white">
                <div class="row">
                    <div class="col-12">
                        <h6 class="card-title">Data Master Produk</h6>
                    </div>
                    <div class="col-12 col-md-9">
                        <div class="row">
                            <div class="col-12 @if(!$kategori_id) col-md-6 @endif mb-2">
                                <select name="supplier_filter" id="supplier_filter" class="form-control select2Custom">
                                    <option value="">Pilih Supplier</option>
                                                                    </select>
                            </div>

                            @if (!$kategori_id)
                            <div class="col-12 col-md-6 mb-2">
                                <select name="kategori_filter" id="kategori_filter" class="form-control select2Custom">
                                    <option value="">Pilih Kategori</option>
                                                                    </select>
                            </div>
                            @endif

                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="row">
                            <div class="col-6 pe-1">
                                <button type="button" class="btn btn-primary btn-custom2 w-100" id="btnFilter">Filter</button>
                            </div>
                            <div class="col-6 ps-1">
                                <button type="button" class="btn btn-light btn-custom8 w-100" onclick="filterReset()">Reset</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
                        <thead>
                            <tr>
                                <th class="kolomNomor">No.</th>
                                <th>Kode Produk</th>
                                <th>Nama Produk</th>
                                <th>Supplier / Kode Produk / Nama Produk</th>
                                <th>Satuan</th>
                                <th>Spesifikasi</th>
                                <th>Varian</th>
                                <th>Kategori Harga</th>
                                <th>File</th>
                                <th style="min-width: 100px !important;">Status</th>
                                <th class="kolomAksi">Aksi</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
            @if ($kategori_id)
            <div class="card-footer" style="text-align: right;">
                @can('master-data.create')
                <button class="btn btn-info btn-custom1" id="tambahMasterKategori">Tambah Data</button>
                <button class="btn btn-primary btn-custom1" onclick="detailSpesifikasi('')">Tambah Spesifikasi</button>
                @endcan
                <a href="/master/kategori" class="btn btn-light btn-custom8">Kembali</a>
            </div>
            @endif
        </div>
    </div>
</div>

{{-- Modal --}}
<div id="modalMasterProduk" class="modal fade bd-example-modal-lg" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Form Master Produk</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_master_produk" class="forms-sample">
                    <div class="row">
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Kode Produk</label>
                                <input type="text" class="form-control" name="kode" autocomplete="off" placeholder="Kode Produk">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Nama Produk <small class="text-danger">(Maksimal 20 karakter)</small></label>
                                <input type="text" class="form-control required" name="nama" autocomplete="off" placeholder="Nama Produk">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Memiliki Jenis Varian</label>
                                <select name="mempunyai_varian" id="mempunyai_varian" class="form-control required">
                                    <option value="">Silahkan Pilih</option>
                                    <option value="1">Ya</option>
                                    <option value="0">Tidak</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-6" id="komponenKode" style="display: none;">
                            <div class="mb-3">
                                <label class="form-label">Kode Barcode</label>
                                <input type="text" class="form-control" name="kode_barcode" id="kode_barcode" autocomplete="off" placeholder="Kode Barcode">
                            </div>
                        </div>
                        <div class="col-6" id="komponenTNU" style="display: none;">
                            <div class="mb-3">
                                <label class="form-label">Nomor Urut</label>
                                <select name="gunakan_nomor_urut" id="gunakan_nomor_urut" class="form-control">
                                    <option value="">Silahkan Pilih</option>
                                    <option value="1">Ya</option>
                                    <option value="0">Tidak</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Prefix Nomor Urut</label>
                                <input type="text" class="form-control" name="prefix_nomor_urut" id="prefix_nomor_urut" autocomplete="off" placeholder="Prefix Nomor Urut">
                            </div>
                        </div>
                        {{-- <div class="col-12" id="kategoriHarga1" style="display: none;">
                            <div class="mb-3">
                                <label class="form-label">Kategori Harga</label>
                                <select id="kategori_harga1" class="form-control select2CustomModalProduk">
                                    <option value="">Silahkan Pilih</option>
                                    @foreach ($kategoriHarga as $vKH)
                                        <option value="{{ $vKH->id }}">{{ $vKH->nama }}</option>
                        @endforeach
                        </select>
                    </div>
            </div>
            <div class="col-12" id="kategoriHarga2" style="display: none;">
                <div class="mb-3">
                    <label class="form-label">Kategori Harga</label>
                    <select id="kategori_harga2" class="form-control select2CustomModalProduk">
                        <option value="">Silahkan Pilih</option>
                        @foreach ($subKategoriHarga as $vSKH)
                        <option value="{{ $vSKH->id }}">{{ $vSKH->nama }}</option>
                        @endforeach
                    </select>
                </div>
            </div> --}}
            <div class="col-12">
                <div class="mb-3">
                    <label class="form-label">Supplier</label>
                    <select id="supplier_id" class="form-control select2CustomModalProduk required" multiple="true">
                                            </select>
                </div>
            </div>
            <div id="komponen_kode_nama_supplier" class="col-12"></div>
            <div class="col-12">
                <div class="mb-3">
                    <label class="form-label">Deskripsi</label>
                    <textarea name="deskripsi" id="deskripsi" class="form-control" cols="30" rows="10"></textarea>
                </div>
            </div>
            <div class="col-12" id="kolom-deskripsi-owner" style="display: none">
                <div class="mb-3">
                    <label class="form-label">Deskripsi Owner</label>
                    <textarea name="deskripsi_owner" id="deskripsi_owner" class="form-control" cols="30" rows="10"></textarea>
                </div>
            </div>
            <div class="col-12" style="text-align: right;">
                <button type="button" id="btnSimpanMasterProduk" class="btn btn-primary btn-custom1">Simpan</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
            </div>
        </div>
        </form>
    </div>
</div>
</div>
</div>

<div id="modalMasterSpesifikasiKategori" class="modal fade bd-example-modal-lg" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Data Spesifikasi Produk</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_master_spesifikasi_kategori" class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <table class="table table-sm" id="tableSpesifikasiKategori">
                                <thead>
                                    <tr>
                                        <th>Nama Spesifikasi</th>
                                        <th class="kolomAksi">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr id="rowKosongSpesifikasiKategori">
                                        <td colspan="2" class="text-center">Belum Terdapat Data</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <hr style="mb-3" />
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Nama Spesifikasi</label>
                                {{-- <input type="text" name="nama" id="nama" class="form-control required" placeholder="Nama"> --}}
                                <select class="form-control required select2Creatable" name="nama" id="nama">
                                    <option value="">Silahkan Pilih Atau Buat Baru</option>
                                    @foreach ($master_spesifikasi as $spesifiksai)
                                    <option value="{{ $spesifiksai->id }}">{{ $spesifiksai->nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="button" id="btnSimpanMasterSpesifikasiKategori" class="btn btn-primary btn-custom1">Simpan</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="modalMasterDetailSpesifikasi" class="modal fade bd-example-modal-lg" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Data Detail Spesifikasi (<span id="keteranganSpesifikasi"></span>)</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_master_detail_spesifikasi" class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <table class="table table-sm" id="tableDetailSpesifikasi">
                                <thead>
                                    <tr>
                                        <th>Spesifikasi Produk</th>
                                        <th>Isian</th>
                                        <th class="kolomAksi">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr id="rowKosongDetailSpesifikasi">
                                        <td colspan="3" class="text-center">Belum Terdapat Data</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <hr style="mb-3" />
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Spesifikasi Produk</label>
                                <select name="spesifikasi_kategori_id" id="spesifikasi_kategori_id" class="form-control required">
                                    <option value="">Silahkan Pilih</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Isian</label>
                                <input type="text" name="value" id="value" class="form-control required" placeholder="Isian">
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            @canany(['master-data.create', 'master-data.edit'])
                            <button type="button" id="btnSimpanMasterDetailSpesifikasi" class="btn btn-primary btn-custom1">Simpan</button>
                            @endcanany
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="modalMasterSatuan" class="modal fade bd-example-modal-lg" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Form Satuan Produk (<span id="keteranganVarian"></span>)</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body pt-0">
                <form id="form_master_satuan" class="forms-sample">
                    <div class="row">
                        <div class="col-8 pt-2">
                            <div class="row">
                                <div class="col-12">
                                    <h5>Satuan Pembelian</h5>
                                    <div class="mb-3 mt-2">
                                        <label class="form-label">Satuan Dasar</label>
                                        <input type="text" class="form-control inputAcuan" data-posisi="1" name="unit1" autocomplete="off" placeholder="Satuan Dasar">
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="mb-3">
                                        <label class="form-label">Satuan 2</label>
                                        <input type="text" class="form-control inputAcuan" data-posisi="2" name="unit2" autocomplete="off" placeholder="Satuan 2">
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="mb-3">
                                        <label class="form-label">Ratio 2</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control nominal" data-posisi="2" name="ratio2" autocomplete="off" placeholder="Ratio 2" onkeyup="dottocomma(this)">
                                            <span id="label2" class="input-group-text input-group-addon labelRatio" data-toggle>-</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="mb-3">
                                        <label class="form-label">Satuan 3</label>
                                        <input type="text" class="form-control inputAcuan" data-posisi="3" name="unit3" autocomplete="off" placeholder="Satuan 3">
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="mb-3">
                                        <label class="form-label">Ratio 3</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control nominal" data-posisi="3" name="ratio3" autocomplete="off" placeholder="Ratio 3" onkeyup="dottocomma(this)">
                                            <span id="label3" class="input-group-text input-group-addon labelRatio" data-toggle>-</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="mb-3">
                                        <label class="form-label">Satuan 4</label>
                                        <input type="text" class="form-control inputAcuan" data-posisi="4" name="unit4" autocomplete="off" placeholder="Satuan 4">
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="mb-3">
                                        <label class="form-label">Ratio 4</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control nominal" data-posisi="4" name="ratio4" autocomplete="off" placeholder="Ratio 4" onkeyup="dottocomma(this)">
                                            <span id="label4" class="input-group-text input-group-addon labelRatio" data-toggle>-</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="mb-3">
                                        <label class="form-label">Satuan 5</label>
                                        <input type="text" class="form-control inputAcuan" data-posisi="5" name="unit5" autocomplete="off" placeholder="Satuan 5">
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="mb-3">
                                        <label class="form-label">Ratio 5</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control nominal" data-posisi="5" name="ratio5" autocomplete="off" placeholder="Ratio 5" onkeyup="dottocomma(this)">
                                            <span id="label5" class="input-group-text input-group-addon labelRatio" data-toggle>-</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="mb-3">
                                        <label class="form-label">Satuan 6</label>
                                        <input type="text" class="form-control" data-posisi="6" name="unit6" autocomplete="off" placeholder="Satuan 6">
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="mb-3">
                                        <label class="form-label">Ratio 6</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control nominal" data-posisi="6" name="ratio6" autocomplete="off" placeholder="Ratio 6" onkeyup="dottocomma(this)">
                                            <span id="label6" class="input-group-text input-group-addon labelRatio" data-toggle>-</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-4 bg-light pt-2">
                            <div class="row">
                                <h5>Konversi Satuan Penjualan</h5>
                                <div class="mb-3 mt-2">
                                    <label class="form-label">Konversi 1</label>
                                    <select name="konversi_unit1_penjualan" id="konversi_unit1_penjualan" class="form-select">
                                        <option value="">Silahkan Pilih</option>
                                        <option value="1" class="satuanKonversi1" style="display: none;"></option>
                                        <option value="2" class="satuanKonversi2" style="display: none;"></option>
                                        <option value="3" class="satuanKonversi3" style="display: none;"></option>
                                        <option value="4" class="satuanKonversi4" style="display: none;"></option>
                                        <option value="5" class="satuanKonversi5" style="display: none;"></option>
                                        <option value="6" class="satuanKonversi6" style="display: none;"></option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Konversi 2</label>
                                    <select name="konversi_unit2_penjualan" id="konversi_unit2_penjualan" class="form-select">
                                        <option value="">Silahkan Pilih</option>
                                        <option value="1" class="satuanKonversi1" style="display: none;"></option>
                                        <option value="2" class="satuanKonversi2" style="display: none;"></option>
                                        <option value="3" class="satuanKonversi3" style="display: none;"></option>
                                        <option value="4" class="satuanKonversi4" style="display: none;"></option>
                                        <option value="5" class="satuanKonversi5" style="display: none;"></option>
                                        <option value="6" class="satuanKonversi6" style="display: none;"></option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Konversi 3</label>
                                    <select name="konversi_unit3_penjualan" id="konversi_unit3_penjualan" class="form-select">
                                        <option value="">Silahkan Pilih</option>
                                        <option value="1" class="satuanKonversi1" style="display: none;"></option>
                                        <option value="2" class="satuanKonversi2" style="display: none;"></option>
                                        <option value="3" class="satuanKonversi3" style="display: none;"></option>
                                        <option value="4" class="satuanKonversi4" style="display: none;"></option>
                                        <option value="5" class="satuanKonversi5" style="display: none;"></option>
                                        <option value="6" class="satuanKonversi6" style="display: none;"></option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Konversi 4</label>
                                    <select name="konversi_unit4_penjualan" id="konversi_unit4_penjualan" class="form-select">
                                        <option value="">Silahkan Pilih</option>
                                        <option value="1" class="satuanKonversi1" style="display: none;"></option>
                                        <option value="2" class="satuanKonversi2" style="display: none;"></option>
                                        <option value="3" class="satuanKonversi3" style="display: none;"></option>
                                        <option value="4" class="satuanKonversi4" style="display: none;"></option>
                                        <option value="5" class="satuanKonversi5" style="display: none;"></option>
                                        <option value="6" class="satuanKonversi6" style="display: none;"></option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Konversi 5</label>
                                    <select name="konversi_unit5_penjualan" id="konversi_unit5_penjualan" class="form-select">
                                        <option value="">Silahkan Pilih</option>
                                        <option value="1" class="satuanKonversi1" style="display: none;"></option>
                                        <option value="2" class="satuanKonversi2" style="display: none;"></option>
                                        <option value="3" class="satuanKonversi3" style="display: none;"></option>
                                        <option value="4" class="satuanKonversi4" style="display: none;"></option>
                                        <option value="5" class="satuanKonversi5" style="display: none;"></option>
                                        <option value="6" class="satuanKonversi6" style="display: none;"></option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Konversi 6</label>
                                    <select name="konversi_unit6_penjualan" id="konversi_unit6_penjualan" class="form-select">
                                        <option value="">Silahkan Pilih</option>
                                        <option value="1" class="satuanKonversi1" style="display: none;"></option>
                                        <option value="2" class="satuanKonversi2" style="display: none;"></option>
                                        <option value="3" class="satuanKonversi3" style="display: none;"></option>
                                        <option value="4" class="satuanKonversi4" style="display: none;"></option>
                                        <option value="5" class="satuanKonversi5" style="display: none;"></option>
                                        <option value="6" class="satuanKonversi6" style="display: none;"></option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Satuan Stok</label>
                                <div class="input-group">
                                    <select name="satuan_stock" id="satuan_stock" class="form-control required">
                                        <option value="">Silahkan Pilih</option>
                                        <option value="1" class="satuanStock1" style="display: none;"></option>
                                        <option value="2" class="satuanStock2" style="display: none;"></option>
                                        <option value="3" class="satuanStock3" style="display: none;"></option>
                                        <option value="4" class="satuanStock4" style="display: none;"></option>
                                        <option value="5" class="satuanStock5" style="display: none;"></option>
                                        <option value="6" class="satuanStock6" style="display: none;"></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Stok Minimum</label>
                                <div class="input-group">
                                    <input type="text" class="form-control nominal" name="stok_minimum" autocomplete="off" placeholder="Stok Minimum" onkeyup="dottocomma(this)">
                                    <span id="labelStokMinimum" class="input-group-text input-group-addon labelRatio" data-toggle>-</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            @canany(['master-data.create', 'master-data.edit'])
                            <button type="button" id="btnSimpanMasterSatuan" class="btn btn-primary btn-custom1">Simpan</button>
                            @endcanany
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="modalKelolaFile" class="modal fade bd-example-modal-xl" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Data File Upload (<span id="keteranganFileUpload"></span>)</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-12 pb-4">
                        <table class="table table-sm" id="tableKelolaFile" style="width: 100% !important;">
                            <thead>
                                <tr>
                                    <th>Nama File</th>
                                    <th style="width: 5%;">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr id="rowKosongKelolaFile">
                                    <td colspan="2" class="text-center">Belum Terdapat Data</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-12">
                        <label>Upload File</label>
                        <input type="file" id="file" class="form-control mt-2">
                        @canany(['master-data.create', 'master-data.edit'])
                        <button type="button" id="btnKelolaFile" class="btn btn-success btn-custom1 btn-sm mt-2" style="width: 100% !important;">Upload File</button>
                        @endcanany
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{-- Akhiran Modal --}}
@endsection

@push('plugin-scripts')
<script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
<script src="{{ asset('assets/js/data-table.js') }}"></script>
<script src="{{ asset('assets/js/sweet-alert.js') }}"></script>

<script>
    var URLs = "{{ url('master/produk') }}";
    var jmlDataSpesifikasiKategori = 0;

    let datatable = $('#datatable-serverside').DataTable({
        lengthMenu: lengthMenuDatatable(),
        processing: true,
        serverSide: true,
        ajax: URLs + '/get-data/{{ $kategori_id ?? 0 }}',
        columns: [{
                data: 'DT_RowIndex',
                name: 'id',
                searchable: false
            },
            {
                data: 'kode',
                name: 'kode'
            },
            {
                data: 'nama',
                name: 'nama'
            },
            {
                data: 'supplier',
                name: 'supplier'
            },
            {
                data: 'satuan_pembelian',
                name: 'satuan_pembelian',
                searchable: false,
                orderable: false,
                class: 'text-center'
            },
            {
                data: 'spesifikasi',
                name: 'spesifikasi',
                searchable: false,
                orderable: false,
                class: 'text-center'
            },
            {
                data: 'varian',
                name: 'varian',
                searchable: false,
                orderable: false,
                class: 'text-center'
            },
            {
                data: 'kategori-harga',
                name: 'kategori-harga',
                searchable: false,
                orderable: false,
                class: 'text-center'
            },
            {
                data: 'file',
                name: 'file',
                searchable: false,
                orderable: false,
                class: 'text-center'
            },
            {
                data: 'aktif',
                name: 'aktif',
                searchable: false,
                orderable: false,
                class: 'text-center'
            },
            {
                data: 'aksi',
                name: 'aksi',
                searchable: false,
                orderable: false,
                class: 'text-center'
            },
        ],
        "columnDefs": [{
            "targets": '_all',
            "defaultContent": "-"
        }],
    });

    $('#btnFilter').on('click', function(e) {
        var supplier_filter = $('#supplier_filter').val();
        let kategori_id = $('#kategori_filter').val();
        if (!kategori_id) {
            kategori_id = "{{ $kategori_id ?? 0 }}";
        }

        let URL_filter = URLs + `/get-data/${kategori_id}?supplier_id=${supplier_filter}`;
        datatable.ajax.url(URL_filter).load();
    });

    function filterReset() {
        $('#supplier_filter').val('').trigger('change');
        $('#kategori_filter').val('').trigger('change');
        datatable.ajax.url(URLs + '/get-data/{{ $kategori_id ?? 0 }}').load();
    }

    $('#modalMasterProduk').on('shown.bs.modal', function() {
        $('.select2CustomModalProduk').select2({
            dropdownParent: $('#modalMasterProduk .modal-content'),
            width: '100%'
        });
    });

    function detailSpesifikasi(id) {
        IDs = id;
        stat = 'add';
        var data = {
            'id': id,
            'flag': 'produk',
            '_token': "{{ csrf_token() }}"
        };
        sendJson(URLs + "/spesifikasi", data, rDetailSpesifikasi);
    }

    function rDetailSpesifikasi(data) {
        swal.close();
        var cekHide = false;
        $.each(data, function(i, v) {
            jmlDataSpesifikasiKategori = parseInt(jmlDataSpesifikasiKategori) + 1;
            cekHide = true;
            $('#tableSpesifikasiKategori tbody').append(
                '<tr id="rowSpesifikasiKategori' + v.id + '" class="rowSpesifikasiKategori id-master-spesifikasi-' + v.id_master_spesifikasi + '">' +
                '<td class="kolom1">' +
                v.spesifikasi.nama +
                '</td>' +
                '<td class="kolom2">' +
                '<button type="button" class="btn btn-warning btn-custom6 btn-sm" title="Edit Data" onclick="editSpesifikasiKategori(\'' + v.id + '\', \'' + v.id_master_spesifikasi + '\')"><span class="mdi mdi-grease-pencil"></span></button> ' +
                '<button type="button" class="btn btn-danger btn-custom5 btn-sm" title="Hapus Data" onclick="hapusSpesifikasiKategori(\'' + v.id + '\', ' + v.kategori?.produks[0]?.id + ')"><span class="mdi mdi-delete"></span></button>' +
                '</td>' +
                '</tr>'
            );
        });

        if (cekHide == true) {
            $('#rowKosongSpesifikasiKategori').hide();
        }

        $('#modalMasterSpesifikasiKategori').modal('show');
    }

    $('#btnSimpanMasterSpesifikasiKategori').on('click', function(e) {
        if (cekForm('form_master_spesifikasi_kategori') == true) {

            if ($('.id-master-spesifikasi-' + $('#nama').val()).length > 0) {
                swal("Peringatan", "Data sudah ada", "warning");
                return false;
            }

            let data = $('#form_master_spesifikasi_kategori').serialize();
            data += "&_token={{ csrf_token() }}";
            data += "&kategori_id=" + IDs;
            if (stat == "add") {
                sendJson(URLs + "/add-spesifikasi-kategori", data, rSendsSpesifikasiKategori, '');
            } else {
                data += "&id=" + IDs2;
                sendJson(URLs + "/update-spesifikasi-kategori", data, rSendsSpesifikasiKategori2, '');
            }
        }
    });

    function rSendsSpesifikasiKategori(data) {
        if (data.type == 'success') {
            jmlDataSpesifikasiKategori = parseInt(jmlDataSpesifikasiKategori) + 1;
            $('#rowKosongSpesifikasiKategori').hide();
            $('#tableSpesifikasiKategori tbody').append(
                '<tr id="rowSpesifikasiKategori' + data.id + '" class="rowSpesifikasiKategori  id-master-spesifikasi-' + data.id_master_spesifikasi + '">' +
                '<td class="kolom1">' +
                data.nama +
                '</td>' +
                '<td class="kolom2">' +
                '<button type="button" class="btn btn-warning btn-custom6 btn-sm" title="Edit Data" onclick="editSpesifikasiKategori(\'' + data.id + '\', \'' + data.id_master_spesifikasi + '\')"><span class="mdi mdi-grease-pencil"></span></button> ' +
                '<button type="button" class="btn btn-danger btn-custom5 btn-sm" title="Hapus Data" onclick="hapusSpesifikasiKategori(\'' + data.id + '\')"><span class="mdi mdi-delete"></span></button>' +
                '</td>' +
                '</tr>'
            );
        }

        // $('#form_master_spesifikasi_kategori input').val('');
        $('.select2Creatable').val('').trigger('change');
        IDs2 = '';
        stat = 'add';

    }

    function hapusSpesifikasiKategori(id, has_varian = null) {
        if (has_varian) {
            swal({
                title: "Konfirmasi",
                text: "Produk ini sudah memiliki varian jika tetap dihapus dapat menyebabkan ketidak konsistenan data",
                type: "warning",
                showCancelButton: true,
                cancelButtonText: "Batal",
                confirmButtonText: "Lanjutkan"
            }).then(function() {
                destroySpesifikasiKategori(id);
            }).catch(swal.noop);
        } else {
            destroySpesifikasiKategori(id);
        }
    }

    function destroySpesifikasiKategori(id) {
        let data = {
            id: id,
            _token: "{{ csrf_token() }}"
        };
        sendJson(URLs + "/delete-spesifikasi-kategori", data, rSendsSpesifikasiKategori3, '');
    }

    function editSpesifikasiKategori(id, id_master_spesifikasi) {
        stat = 'update';
        IDs2 = id;
        // $('#form_master_spesifikasi_kategori [name="nama"]').val(nama);
        $('.select2Creatable').val(id_master_spesifikasi).trigger('change');
    }

    function rSendsSpesifikasiKategori2(data) {
        if (data.type == 'success') {
            $('#rowKosongSpesifikasiKategori').hide();
            $('#rowSpesifikasiKategori' + IDs2).removeAttr('class').attr('class', 'rowSpesifikasiKategori id-master-spesifikasi-' + data.id_master_spesifikasi);
            $('#rowSpesifikasiKategori' + IDs2 + ' .kolom1').html(data.nama);
            $('#rowSpesifikasiKategori' + IDs2 + ' .kolom2').html('<button type="button" class="btn btn-warning btn-custom6 btn-sm" title="Edit Data" onclick="editSpesifikasiKategori(\'' + IDs2 + '\', \'' + data.id_master_spesifikasi + '\')"><span class="mdi mdi-grease-pencil"></span></button> <button type="button" class="btn btn-danger btn-custom5 btn-sm" title="Hapus Data" onclick="hapusSpesifikasiKategori(\'' + IDs2 + '\', ' + data.has_varian + ')"><span class="mdi mdi-delete"></span></button>');
        }

        // $('#form_master_spesifikasi_kategori input').val('');
        $('.select2Creatable').val('').trigger('change');
        IDs2 = '';
        stat = 'add';
    }

    function rSendsSpesifikasiKategori3(data) {
        jmlDataSpesifikasiKategori = parseInt(jmlDataSpesifikasiKategori) - 1;
        $('#rowSpesifikasiKategori' + data.id).remove();

        if (jmlDataSpesifikasiKategori <= 0) {
            $('#rowKosongSpesifikasiKategori').show();
        }
    }

    $('#tambahMasterKategori').on('click', function(e) {
        stat = "add";
        if ("{{ auth()->user()->checkPermissionTo('deskripsi-owner.create') }}") {
            $('#kolom-deskripsi-owner').show();
        } else {
            $('#kolom-deskripsi-owner').hide();
        }
        $('#modalMasterProduk').modal('show');
    });

    $('#supplier_id').on('change', function(e) {
        var supplierData = {};

        $('.kode_dari_supplier, .nama_dari_supplier').each(function(i, element) {
            var $element = $(element);
            var supplierValue = $element.data('id');
            var inputValue = $element.val();

            if (supplierValue && inputValue) {
                if (!supplierData[supplierValue]) {
                    supplierData[supplierValue] = {};
                }

                if ($element.hasClass('kode_dari_supplier')) {
                    supplierData[supplierValue].kode = inputValue;
                } else if ($element.hasClass('nama_dari_supplier')) {
                    supplierData[supplierValue].nama = inputValue;
                }
            }
        });

        $('#komponen_kode_nama_supplier').empty();

        $('#supplier_id option:selected').each(function(i, option) {
            var supplierText = $(option).text();
            var supplierValue = $(option).val();
            var kode = supplierData[supplierValue]?.kode || '';
            var nama = supplierData[supplierValue]?.nama || '';

            var html = '<div class="row">' +
                '<div class="col-6">' +
                '<div class="mb-3">' +
                '<label class="form-label">Kode Produk dari Supplier (' + supplierText + ')</label>' +
                '<input type="text" class="form-control kode_dari_supplier kode_dari_supplier' + supplierValue + '" data-id="' + supplierValue + '" autocomplete="off" placeholder="Kode Produk dari Supplier" value="' + kode + '">' +
                '</div>' +
                '</div>' +
                '<div class="col-6">' +
                '<div class="mb-3">' +
                '<label class="form-label">Nama Produk dari Supplier (' + supplierText + ')</label>' +
                '<input type="text" class="form-control nama_dari_supplier nama_dari_supplier' + supplierValue + '" data-id="' + supplierValue + '" autocomplete="off" placeholder="Nama Produk dari Supplier" value="' + nama + '">' +
                '</div>' +
                '</div>' +
                '</div>';

            $('#komponen_kode_nama_supplier').append(html);
        });
    });

    $('#btnSimpanMasterProduk').on('click', function(e) {
        if (cekForm('form_master_produk') == true) {
            var cekNama = $('#form_master_produk [name="nama"]').val().length;
            if (parseInt(cekNama) <= 20) {
                var dataKodeNama = [];
                $.each($('.kode_dari_supplier'), function(i, v) {
                    dataKodeNama.push($(this).data('id') + "#" + $(this).val() + "#" + $('.nama_dari_supplier' + $(this).data('id')).val());
                })

                // var data = $('#form_master_produk').serialize();
                // if("{{ $kategori_id ?? 0 }}" != 0){
                //     data += "&kategori_id={{ $kategori_id }}";
                // }
                // data += "&tipe=produk";
                // data += "&_token={{ csrf_token() }}";
                // data += "&supplier_id="+$('#supplier_id').val().join(',');
                // data += "&kode_nama_dari_supplier="+dataKodeNama.join('_');

                var isianVarian = $('#mempunyai_varian').val();
                /*if(isianVarian == 1 || isianVarian == '1'){
                    data += "&kategori_harga_id="+$('#kategori_harga1').val();
                }

                if(isianVarian == 0 || isianVarian == '0'){
                    data += "&kategori_harga_id="+$('#kategori_harga2').val();
                }*/

                var data = new FormData();
                data.append("_token", "{{ csrf_token() }}");
                data.append("tipe", "produk");
                data.append("supplier_id", $('#supplier_id').val().join(','));
                data.append("kode_nama_dari_supplier", dataKodeNama.join('_'));
                data.append("kode", $('#form_master_produk [name="kode"]').val());
                data.append("nama", $('#form_master_produk [name="nama"]').val());
                data.append("mempunyai_varian", isianVarian);
                data.append("prefix_nomor_urut", $('#prefix_nomor_urut').val());
                data.append("deskripsi", $('#deskripsi').val());

                if ("{{ $kategori_id ?? 0 }}" != 0) {
                    data.append("kategori_id", "{{ $kategori_id }}");
                }

                if (isianVarian == '0' || isianVarian == 0) {
                    data.append("kode_barcode", $('#kode_barcode').val());
                    data.append("gunakan_nomor_urut", $('#gunakan_nomor_urut').val());
                } else {
                    data.append("kode_barcode", null);
                    data.append("gunakan_nomor_urut", "0");
                }

                if ("{{ auth()->user()->checkPermissionTo('deskripsi-owner.edit') }}") {
                    data.append("deskripsi_owner", $('#deskripsi_owner').val());
                }

                if (stat == "add") {
                    uploads(URLs + "/add", data, rSends);
                } else {
                    data.append("id", IDs);
                    uploads(URLs + "/update", data, rSends);
                }
            } else {
                swal('Perhatian', 'Nama Produk Hanya Boleh Kurang Dari 20 Karakter', 'warning')
            }
        }
    });

    function readData(id) {
        stat = "update";
        IDs = id;
        var data = {
            act: "read",
            id: id,
            _token: "{{ csrf_token() }}"
        };
        reads(URLs + "/read", data, rReads);
    }

    function rReads(data) {
        swal.close();
        if ("{{ auth()->user()->checkPermissionTo('deskripsi-owner.edit') }}") {
            $('#kolom-deskripsi-owner').show();
        } else {
            $('#kolom-deskripsi-owner').hide();
        }
        $('#modalMasterProduk').modal("show");
        $.each(data, function(idx, vals) {
            if (idx == 'supplier') {
                var supplierIds = (data.supplier).split(',');
                $('#supplier_id').val(supplierIds).trigger('change');
                supplierIds.forEach(function(supplierId) {
                    if (data.relasi_produk_supplier && data.relasi_produk_supplier.length > 0) {
                        var relasi = data.relasi_produk_supplier.find(function(relasi) {
                            return relasi.supplier && relasi.supplier.id == supplierId;
                        });

                        if (relasi) {
                            var kodeSupplier = relasi.kode_dari_supplier;
                            var namaSupplier = relasi.nama_dari_supplier;
                            $('.kode_dari_supplier' + supplierId).val(kodeSupplier);
                            $('.nama_dari_supplier' + supplierId).val(namaSupplier);
                        }
                    }
                });
            } else if (idx == 'mempunyai_varian') {
                $('#form_master_produk [name=' + idx + ']').val(vals);

                if (vals == '0' || vals == 0) {
                    $('#komponenKode').show();
                    $('#komponenTNU').show();
                } else if (vals == '0' || vals == 0) {
                    $('#komponenKode').hide();
                    $('#komponenTNU').hide();
                }
            }
            /*else if(idx == 'kategori_harga_id'){
                if(vals == null || vals == '' || vals == 0 || vals == '0'){
                    $('#kategori_harga1').val('').trigger('change');
                    $('#kategori_harga2').val('').trigger('change');
                }else{
                    $('#kategori_harga1').val(vals).trigger('change');
                    $('#kategori_harga2').val(vals).trigger('change');
                }
            }*/
            else {
                $('#form_master_produk [name=' + idx + ']').val(vals);
            }
        });
    }

    function hapusData(id) {
        swal({
            title: "Konfirmasi",
            text: "Apakah anda ingin menghapus data ?",
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "Batal",
            confirmButtonText: "Lanjutkan"
        }).then(function() {
            var data = {
                act: "delete",
                id: id,
                _token: '{{ csrf_token() }}'
            };
            sendJson(URLs + "/delete", data, rSends);
        })
    }

    function lihatDetailSpesifikasi(id, kategori_id = 0, tipe = null, kode_produk = null, nama_produk = null) {
        kodeProduk = kode_produk;
        namaProduk = nama_produk;

        IDs = id;
        stat = 'add';
        var data = {
            id: id,
            _token: "{{ csrf_token() }}",
            kategori_id: kategori_id,
            tipe: tipe
        };
        reads(URLs + "/read-detail-spesifikasi", data, rReadDetailSpesifikasi);
    }

    var jmlDataDetailSpesifikasi = 0;

    function rReadDetailSpesifikasi(data) {
        swal.close();

        var keteranganSpesifikasi = "-";
        if (kodeProduk != null && kodeProduk != '' && namaProduk != null && namaProduk != null) {
            keteranganSpesifikasi = kodeProduk + " | " + namaProduk;
        }
        $('#keteranganSpesifikasi').html(keteranganSpesifikasi);
        var boleh = "{{ user_can_modify('master-data') }}" === "1" ? "" : " d-none";
        var cekHide = false;
        $.each(data.detail_spesifikasi, function(i, v) {
            jmlDataDetailSpesifikasi = parseInt(jmlDataDetailSpesifikasi) + 1;
            cekHide = true;
            $('#tableDetailSpesifikasi tbody').append(
                '<tr id="rowDetailSpesifikasi' + v.id + '" class="rowDetailSpesifikasi spesifikasi-kategori-id' + v.spesifikasi_kategori_id + '">' +
                '<td class="kolom1">' +
                v.nama +
                '</td>' +
                '<td class="kolom2">' +
                v.value +
                '</td>' +
                '<td class="kolom3">' +
                '<button type="button" class="btn btn-warning btn-custom6 btn-sm' + boleh + '" title="Edit Data" onclick="editDetailSpesifikasi(\'' + v.id + '\', \'' + v.spesifikasi_kategori_id + '\', \'' + v.value + '\')"><span class="mdi mdi-grease-pencil"></span></button> ' +
                '<button type="button" class="btn btn-danger btn-custom5 btn-sm' + boleh + '" title="Hapus Data" onclick="hapusDetailSpesifikasi(\'' + v.id + '\')"><span class="mdi mdi-delete"></span></button>' +
                '</td>' +
                '</tr>'
            );
        });

        $('#spesifikasi_kategori_id').html('<option value="">Silahkan Pilih</option>');
        $.each(data.master_spesifikasi, function(index, item) {
            let disabled = $('.spesifikasi-kategori-id' + item.id).length > 0 ? 'disabled' : '';
            $('#spesifikasi_kategori_id').append('<option id="option_spesifikasi_kategori_id-' + item.id + '" value="' + item.id + '" ' + disabled + '>' + item.spesifikasi.nama + '</option>');
        })

        if (cekHide == true) {
            $('#rowKosongDetailSpesifikasi').hide();
        }

        $('#modalMasterDetailSpesifikasi').modal('show');
    }

    $('#btnSimpanMasterDetailSpesifikasi').on('click', function(e) {
        if (cekForm('form_master_detail_spesifikasi') == true) {
            var data = $('#form_master_detail_spesifikasi').serialize();
            data += "&_token={{ csrf_token() }}";
            data += "&produk_id=" + IDs;
            if (stat == "add") {
                sendJson(URLs + "/add-detail-spesifikasi", data, rSendsDetailSpesifikasi, '');
            } else {
                data += "&id=" + IDs2;
                sendJson(URLs + "/update-detail-spesifikasi", data, rSendsDetailSpesifikasi2, '');
            }
        }
    });

    function editDetailSpesifikasi(id, spesifikasi_kategori_id, value) {
        stat = 'update';
        IDs2 = id;
        $('#option_spesifikasi_kategori_id-' + spesifikasi_kategori_id).prop('disabled', false);
        $('#form_master_detail_spesifikasi [name="spesifikasi_kategori_id"]').val(spesifikasi_kategori_id);
        $('#form_master_detail_spesifikasi [name="value"]').val(value);
    }

    function hapusDetailSpesifikasi(id) {
        var data = {
            id: id,
            _token: "{{ csrf_token() }}"
        };
        sendJson(URLs + "/delete-detail-spesifikasi", data, rSendsDetailSpesifikasi3, '');
    }

    function rSendsDetailSpesifikasi(data) {
        if (data.type == 'success') {
            jmlDataDetailSpesifikasi = parseInt(jmlDataDetailSpesifikasi) + 1;
            $('#rowKosongDetailSpesifikasi').hide();
            $('#tableDetailSpesifikasi tbody').append(
                '<tr id="rowDetailSpesifikasi' + data.id + '" class="rowDetailSpesifikasi spesifikasi-kategori-id' + data.spesifikasi_kategori_id + '">' +
                '<td class="kolom1">' +
                data.nama +
                '</td>' +
                '<td class="kolom2">' +
                data.value +
                '</td>' +
                '<td class="kolom3">' +
                '<button type="button" class="btn btn-warning btn-custom6 btn-sm" title="Edit Data" onclick="editDetailSpesifikasi(\'' + data.id + '\', \'' + data.spesifikasi_kategori_id + '\', \'' + data.value + '\')"><span class="mdi mdi-grease-pencil"></span></button> ' +
                '<button type="button" class="btn btn-danger btn-custom5 btn-sm" title="Hapus Data" onclick="hapusDetailSpesifikasi(\'' + data.id + '\')"><span class="mdi mdi-delete"></span></button>' +
                '</td>' +
                '</tr>'
            );
        }

        $('#form_master_detail_spesifikasi input').val('');
        $('#form_master_detail_spesifikasi select').val('');
        IDs2 = '';
        stat = 'add';
        $('#option_spesifikasi_kategori_id-' + data.spesifikasi_kategori_id).prop('disabled', true);
    }

    function rSendsDetailSpesifikasi2(data) {
        if (data.type == 'success') {
            $('#rowKosongDetailSpesifikasi').hide();
            $('#rowDetailSpesifikasi' + IDs2 + ' .kolom1').html(data.nama);
            $('#rowDetailSpesifikasi' + IDs2 + ' .kolom2').html(data.value);
            $('#rowDetailSpesifikasi' + IDs2 + ' .kolom3').html('<button type="button" class="btn btn-warning btn-custom6 btn-sm" title="Edit Data" onclick="editDetailSpesifikasi(\'' + IDs2 + '\', \'' + data.spesifikasi_kategori_id + '\', \'' + data.value + '\')"><span class="mdi mdi-grease-pencil"></span></button> <button type="button" class="btn btn-danger btn-custom5 btn-sm" title="Hapus Data" onclick="hapusDetailSpesifikasi(\'' + IDs2 + '\')"><span class="mdi mdi-delete"></span></button>');
        }

        $('#form_master_detail_spesifikasi input').val('');
        $('#form_master_detail_spesifikasi select').val('');
        IDs2 = '';
        stat = 'add';
        $('#option_spesifikasi_kategori_id-' + data.spesifikasi_kategori_id).prop('disabled', true);
    }

    function rSendsDetailSpesifikasi3(data) {
        jmlDataDetailSpesifikasi = parseInt(jmlDataDetailSpesifikasi) - 1;
        $('#rowDetailSpesifikasi' + data.id).remove();
        $('#option_spesifikasi_kategori_id-' + data.spesifikasi_kategori_id).prop('disabled', false);

        if (jmlDataDetailSpesifikasi <= 0) {
            $('#rowKosongDetailSpesifikasi').show();
        }
    }

    $('.inputAcuan').on('keyup', function(e) {
        var posisi_asli = parseInt($(this).data('posisi'));
        var posisi = parseInt($(this).data('posisi')) + 1;

        ketLabel = '-';
        if ($(this).val() != '' && $(this).val() != null) {
            ketLabel = $(this).val();
            $('.satuanStock' + posisi_asli).show();
            $('.satuanStock' + posisi_asli).html(ketLabel);
        } else {
            $('.satuanStock' + posisi_asli).hide();
            $('.satuanStock' + posisi_asli).html('');
        }

        $('#label' + posisi).html(ketLabel);

        var dataLabelStock = $('#labelStokMinimum').data('posisi');
        if (posisi_asli == dataLabelStock) {
            $('#labelStokMinimum').html(ketLabel);
        }

        // Untuk Cek Satuan Konversi
        var isianSatuan = $('[name="unit' + posisi_asli + '"]').val();
        var isianRatio = $('[name="ratio' + posisi + '"]').val();
        if (isianSatuan != null && isianSatuan != '' && isianRatio != null && isianRatio != '' && isianRatio != '0' && isianRatio != 0) {
            $('.satuanKonversi' + posisi).show();
            $('.satuanKonversi' + posisi).html(isianRatio + ' ' + isianSatuan);
        } else {
            $('.satuanKonversi' + posisi).hide();
            $('.satuanKonversi' + posisi).html('');
        }
        // Akhiran Untuk Cek Satuan Konversi
    });

    // $('.inputAcuanPenjualan').on('change', function(e){
    //     var posisi = parseInt($(this).data('posisi'));
    //     var isian = $(this).val();

    //     if(isian != null && isian != ''){
    //         $('.satuanCustom'+posisi).show();
    //         $('.satuanCustom'+posisi).html(isian);
    //     }else{
    //         $('.satuanCustom'+posisi).html('');
    //         $('.satuanCustom'+posisi).hide();
    //     }
    // });

    var kodeProduk = null;
    var namaProduk = null;

    function lihatSatuan(id, kode_produk, nama_produk) {
        kodeProduk = kode_produk;
        namaProduk = nama_produk;
        stat = "update";
        IDs = id;
        var data = {
            id: id,
            _token: "{{ csrf_token() }}"
        };
        reads(URLs + "/read", data, rReadsSatuan);
    }

    function rReadsSatuan(data) {
        swal.close();
        $('#modalMasterSatuan').modal('show');

        $('#keteranganVarian').html(kodeProduk + " | " + namaProduk);
        var arrayUnitAll = ['unit1', 'unit2', 'unit3', 'unit4', 'unit5', 'unit6'];
        var arrayUnit = ['unit1', 'unit2', 'unit3', 'unit4', 'unit5'];
        var arrayRatio = ['ratio1', 'ratio2', 'ratio3', 'ratio4', 'ratio5', 'ratio6'];
        $.each(data, function(idx, vals) {
            if (arrayUnitAll.includes(idx)) {
                $('#form_master_satuan [name=' + idx + ']').val(vals);

                if (arrayUnit.includes(idx)) {
                    var posisi_asli = parseInt($('#form_master_satuan [name=' + idx + ']').data('posisi'));
                    var posisi = parseInt($('#form_master_satuan [name=' + idx + ']').data('posisi')) + 1;

                    var ketLabel = '-';
                    if (vals != null && vals != '') {
                        ketLabel = vals;
                        $('.satuanStock' + posisi_asli).show();
                        $('.satuanStock' + posisi_asli).html(ketLabel);
                    } else {
                        $('.satuanStock' + posisi_asli).hide();
                        $('.satuanStock' + posisi_asli).html('');
                    }

                    $('#label' + posisi).html(ketLabel);
                }
            }

            if (arrayRatio.includes(idx)) {
                var ketRatio = null;

                var cekDesimal = vals - Math.floor(vals);
                if (cekDesimal > 0) {
                    ketRatio = parseFloat(vals).toFixed(2);
                    ketRatio = ketRatio.replace(/\./g, ',');
                } else {
                    ketRatio = vals.toString().split(".")[0];
                }

                $('#form_master_satuan [name=' + idx + ']').val(ketRatio);
            }

            if (idx == 'stok_minimum') {
                var ketStokMinimum = null;

                var cekDesimalStokMinimum = vals - Math.floor(vals);
                if (cekDesimalStokMinimum > 0) {
                    ketStokMinimum = parseFloat(vals).toFixed(2);
                    ketStokMinimum = ketStokMinimum.replace(/\./g, ',');
                } else {
                    ketStokMinimum = vals.toString().split(".")[0];
                }

                $('#form_master_satuan [name=' + idx + ']').val(ketStokMinimum);
            }

            if (idx == 'satuan_stock') {
                $('#form_master_satuan [name=' + idx + ']').val(vals);

                ketLabel = "-";
                if (vals != null && vals != '' && vals != 0 && vals != '0') {
                    ketLabel = $('#form_master_satuan [name=' + idx + '] option:selected').html();
                }
                $('#labelStokMinimum').html(ketLabel);
            }
        });

        if (data.unit2 != null && data.unit2 != '') {
            $('.satuanKonversi1').show();
            $('.satuanKonversi1').html('0 ' + data.unit2);

            $('.satuanKonversi2').show();
            $('.satuanKonversi2').html($('[name="ratio2"]').val() + ' ' + data.unit1);
        }

        if (data.unit2 != null && data.unit2 != '' && data.unit3 != null && data.unit3 != '') {
            $('.satuanKonversi3').show();
            $('.satuanKonversi3').html($('[name="ratio3"]').val() + ' ' + data.unit2);
        }

        if (data.unit3 != null && data.unit3 != '' && data.unit4 != null && data.unit4 != '') {
            $('.satuanKonversi4').show();
            $('.satuanKonversi4').html($('[name="ratio4"]').val() + ' ' + data.unit3);
        }

        if (data.unit4 != null && data.unit4 != '' && data.unit5 != null && data.unit5 != '') {
            $('.satuanKonversi5').show();
            $('.satuanKonversi5').html($('[name="ratio5"]').val() + ' ' + data.unit4);
        }

        if (data.unit5 != null && data.unit5 != '' && data.unit6 != null && data.unit6 != '') {
            $('.satuanKonversi6').show();
            $('.satuanKonversi6').html($('[name="ratio6"]').val() + ' ' + data.unit5);
        }

        $('[name="konversi_unit1_penjualan"]').val(data.konversi_unit1_penjualan);
        $('[name="konversi_unit2_penjualan"]').val(data.konversi_unit2_penjualan);
        $('[name="konversi_unit3_penjualan"]').val(data.konversi_unit3_penjualan);
        $('[name="konversi_unit4_penjualan"]').val(data.konversi_unit4_penjualan);
        $('[name="konversi_unit5_penjualan"]').val(data.konversi_unit5_penjualan);
        $('[name="konversi_unit6_penjualan"]').val(data.konversi_unit6_penjualan);

    }

    $('.nominal').on('keyup', function(e) {
        var isian = $(this).val();

        if (isian == null || isian == '') {
            $(this).val(0);
        }
    });

    $('#btnSimpanMasterSatuan').on('click', function(e) {
        if (cekForm('form_master_satuan') == true) {

            $.each($('.nominal'), function(i, v) {
                var isian = $(this).val().replace(/,/g, '.');
                $(this).val(isian);
            })

            var data = $('#form_master_satuan').serialize();
            data += "&_token={{ csrf_token() }}";
            data += "&id=" + IDs;
            sendJson(URLs + "/update", data, rSends);
        }
    });

    $('#modalMasterProduk').on('hidden.bs.modal', function(e) {
        $('#form_master_produk input, #form_master_produk select').val('');
        $('#form_master_produk textarea').html('');
        $('#supplier_id').val('').trigger('change');

        // $('#kategoriHarga1').hide();
        // $('#kategoriHarga2').hide();

        $('#komponenKode').hide();
        $('#komponenTNU').hide();

        IDs = '';
        stat = '';
    });

    $('#modalMasterSpesifikasiKategori').on('hidden.bs.modal', function(e) {
        // location.reload();
        // $('#form_master_spesifikasi_kategori input').val('');
        $('.select2Creatable').val('').trigger('change');
        $('#form_master_spesifikasi_kategori select').val('');
        $('#rowKosongSpesifikasiKategori').show();
        $('.rowSpesifikasiKategori').remove();
        IDs = '';
        IDs2 = '';
        stat = '';
        kodeProduk = null;
        namaProduk = null;
    });

    $('#modalMasterDetailSpesifikasi').on('hidden.bs.modal', function(e) {
        $('#keteranganSpesifikasi').html('-');
        $('#form_master_detail_spesifikasi input').val('');
        $('#form_master_detail_spesifikasi select').val('');
        $('#rowKosongDetailSpesifikasi').show();
        $('.rowDetailSpesifikasi').remove();
        IDs = '';
        IDs2 = '';
        stat = '';
        kodeProduk = null;
        namaProduk = null;
    });

    $('#modalMasterSatuan').on('hidden.bs.modal', function(e) {
        $('#keteranganVarian').html('-');
        $('#form_master_satuan input').val('');
        $('#form_master_satuan select').val('');
        $('#form_master_satuan .labelRatio').html('-');
        $('#labelStokMinimum').html('-');
        IDs = '';
        IDs2 = '';
        stat = '';
        kodeProduk = null;
        namaProduk = null;
    });

    function duplikatData(id, nama_barang) {
        swal({
            title: "Konfirmasi",
            text: "Apakah anda yakin ingin menduplikat data barang : " + nama_barang + " ?",
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "Batal",
            confirmButtonText: "Lanjutkan"
        }).then(function() {
            var data = {
                id: id,
                _token: '{{ csrf_token() }}'
            };
            sendJson(URLs + "/duplikat-produk", data, rSends);
        })
    }

    // $(document).on('change', '.statusAktif', function(e){
    //     var id = $(this).data('id');

    //     if($(this).val() == '' || $(this).val() == null){
    //         swal('Perhatian', 'Pastikan Anda Ya atau Tidak', 'warning').then(function(){
    //             location.reload();
    //         });
    //     }else{
    //         var data = {
    //             id: id,
    //             status_aktif: $(this).val(),
    //             _token: "{{ csrf_token() }}"
    //         };
    //         sendJson(URLs+"/ubah-status-produk", data, rSendsUbahStatus);
    //     }
    // });

    const setActive = (e, id) => {
        $.ajax({
            url: URLs + '/ubah-status-produk',
            type: 'POST',
            data: {
                id: id,
                _token: "{{ csrf_token() }}"
            },
            error: function(xhr) {
                swal({
                    title: 'Gagal',
                    text: xhr.responseJSON.response,
                    type: 'error',
                    confirmButtonText: 'OK'
                })
                $(e).prop('checked', !$(e).prop('checked'));
            }
        })
    }

    function rSendsUbahStatus(data) {
        var titles = data.type == "success" ? "Sukses" : (data.type == "error" ? "Gagal" : "Info");
        swal({
            title: titles,
            text: data.response,
            type: data.type,
            confirmButtonText: "OK"
        }).then(function() {
            if (data.type != "success") {
                datatable.ajax.reload();
            }
        });
    }

    var IDs2 = null;

    function hapusFile(id) {
        IDs2 = id;
        var data = {
            _token: "{{ csrf_token() }}",
            id: id
        };
        sendJson(URLs + '/remove-file', data, rHapusFile);
    }

    function rHapusFile(data) {
        var titles = data.type == "success" ? "Sukses" : (data.type == "error" ? "Gagal" : "Info");
        swal({
            title: titles,
            text: data.response,
            type: data.type,
            confirmButtonText: "OK"
        }).then(function() {
            if (data.type == "success") {
                $('.trFile' + IDs2).remove();
                jmlBerkasAll = parseInt(jmlBerkasAll) - 1;
                if (jmlBerkasAll <= 0) {
                    $('#rowKosongKelolaFile').show();
                }
                IDs2 = null;
            }
        });
    }

    function kelolaBerkas(id, kode_produk, nama_produk) {
        kodeProduk = kode_produk;
        namaProduk = nama_produk;

        IDs = id;
        var data = {
            _token: "{{ csrf_token() }}",
            id: id
        };
        sendJson(URLs + '/read-file', data, rKelolaBerkas);
    }

    function rKelolaBerkas(data) {
        $('#keteranganFileUpload').html(kodeProduk + " | " + namaProduk);
        var boleh = "{{ user_can_modify('master-data') }}" === "true" ? "" : " d-none";
        jmlBerkasAll = data.length;
        if (data.length > 0) {
            $('#rowKosongKelolaFile').hide();
        }

        $.each(data, function(i, v) {
            var url = "{{ asset('berkas_file_produk/') }}" + '/' + v.nama_file;
            var link = '<a href="' + url + '" target="_blank">' + v.nama_file + '</a>';

            var row = '<tr class="trFile trFile' + v.id + '"><td>' + link + '</td><td><button type="button" title="Hapus File" onclick="hapusFile(\'' + v.id + '\')" class="btn btn-danger btn-custom5 btn-sm' + boleh + '"><span class="mdi mdi-delete"></span></button></td></tr>';

            $('#tableKelolaFile tbody').append(row);
        });

        swal.close();
        $('#modalKelolaFile').modal('show');
    }

    $('#btnKelolaFile').on('click', function(e) {
        if ($('#file').val() != null && $('#file').val() != '') {
            var data = new FormData();
            data.append('_token', "{{ csrf_token() }}");
            data.append('id_produk', IDs);
            var file = $('#file')[0].files;
            data.append('file', file[0]);
            uploads(URLs + "/upload-file", data, rSendsUpload);

        } else {
            swal('Perhatian', 'Pastikan Sudah Memilih File yang Akan Diupload', 'warning');
        }
    });

    function rSendsUpload(data) {
        var titles = data.type == "success" ? "Sukses" : (data.type == "error" ? "Gagal" : "Info");
        swal({
            title: titles,
            text: data.response,
            type: data.type,
            confirmButtonText: "OK"
        }).then(function() {
            if (data.type == "success") {
                $('#file').val('');
                jmlBerkasAll = parseInt(jmlBerkasAll) + 1;
                if (jmlBerkasAll > 0) {
                    $('#rowKosongKelolaFile').hide();
                }

                var url = "{{ asset('berkas_file_produk/') }}" + '/' + data.nama_file;
                $('#tableKelolaFile tbody').append('<tr class="trFile trFile' + data.id + '">' +
                    '<td><a href="' + url + '" target="_blank">' + data.nama_file + '</a></td>' +
                    '<td><button type="button" title="Hapus File" onclick="hapusFile(\'' + data.id + '\')" class="btn btn-danger btn-custom5 btn-sm"><span class="mdi mdi-delete"></span></button></td>' +
                    '</tr>');
            }
        })
    }

    $('#modalKelolaFile').on('hidden.bs.modal', function(e) {
        $('#keteranganFileUpload').html('-');
        $('#rowKosongKelolaFile').show();
        $('.trFile').remove();
        $('#file').val('');
        IDs = null;
        jmlBerkasAll = 0;
    });

    $('#mempunyai_varian').on('change', function(e) {
        var isian = $(this).val();

        // Backup Kategori Harga
        /* if(isian == null || isian == ''){
            $('#kategoriHarga1').hide();
            $('#kategoriHarga2').hide();
        }

        if(isian == '1' || isian == 1){
            $('#kategoriHarga1').show();
            $('#kategoriHarga2').hide();
        }

        if(isian == '0' || isian == 0){
            $('#kategoriHarga1').hide();
            $('#kategoriHarga2').show();
        } */
        // Akhirab Backup Kategori Harga

        if (isian == null || isian == '') {
            $('#komponenKode').hide();
            $('#komponenTNU').hide();
        } else if (isian == '1' || isian == 1) {
            $('#komponenKode').hide();
            $('#komponenTNU').hide();
        } else if (isian == '0' || isian == 0) {
            $('#komponenKode').show();
            $('#komponenTNU').show();
        }
    });

    $('#satuan_stock').on('change', function(e) {
        var isian = $(this).val();

        $('#labelStokMinimum').removeAttr('data-posisi');
        if (isian == null || isian == '') {
            $('#labelStokMinimum').html('-');
            $('#labelStokMinimum').attr('data-posisi', '0');
        } else {
            var isianHTML = $('#satuan_stock option:selected').html();
            $('#labelStokMinimum').html(isianHTML);
            $('#labelStokMinimum').attr('data-posisi', isian);
        }
    });

    $('.nominal').on('change', function(e) {
        var posisi = $(this).data('posisi');
        var posisi_sebelum = parseInt(posisi) - 1;

        // Untuk Cek Satuan Konversi
        var isianSatuan = $('[name="unit' + posisi_sebelum + '"]').val();
        var isianRatio = $('[name="ratio' + posisi + '"]').val();
        if (isianSatuan != null && isianSatuan != '' && isianRatio != null && isianRatio != '' && isianRatio != '0' && isianRatio != 0) {
            $('.satuanKonversi' + posisi).show();
            $('.satuanKonversi' + posisi).html(isianRatio + ' ' + isianSatuan);
        } else {
            $('.satuanKonversi' + posisi).hide();
            $('.satuanKonversi' + posisi).html('');
        }
        // Akhiran Untuk Cek Satuan Konversi
    });

    $('.select2Creatable').select2({
        dropdownParent: $('#modalMasterSpesifikasiKategori .modal-content'),
        tags: true,
        width: '100%',
    });
</script>
@endpush