@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
        @if ($produk_nama)
        <li class="breadcrumb-item"><a href="{{ isset($kategori_id) ? '/master/produk/'.$kategori_id : '#' }}">Produk ( )</a></li>
        @endif
        <li class="breadcrumb-item active" aria-current="page">Varian</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 Varian</h6>
                    </div>
                    <div class="col-12 col-md-9">
                        <div class="row">
                            <div class="col-12 @if(!$kategori_id) col-md-4 @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-4 mb-2">
                                <select name="kategori_filter" id="kategori_filter" class="form-control select2Custom">
                                    <option value="">Pilih Kategori</option>
                                                                    </select>
                            </div>
                            <div class="col-12 col-md-4 mb-2">
                                <select name="produk_filter" id="produk_filter" class="form-control select2Custom">
                                    <option value="">Pilih Produk</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 Varian</th>
                                <th>Nama Varian</th>
                                <th>Supplier / Kode Varian / Nama Varian</th>
                                <th>Kategori Harga</th>
                                <th>Satuan</th>
                                <th>Spesifikasi</th>
                                <th>File</th>
                                <th>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="tambahMasterVariant">Tambah Data</button>
                @endcan
                <button class="btn btn-primary btn-custom1" onclick="detailSpesifikasi('')">Tambah Spesifikasi</button>
                <a href="/master/produk/" class="btn btn-light btn-custom8">Kembali</a>
            </div>
            @endif
        </div>
    </div>
</div>

{{-- Modal --}}
<div id="modalMasterVarian" 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 Varian</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_varian" class="forms-sample">
                    <div class="row">
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Kode Varian</label>
                                {{-- <input type="hidden" class="form-control" name="tipe" autocomplete="off" placeholder="Tipe" value="varian">
                                <input type="hidden" class="form-control" name="mempunyai_varian" autocomplete="off" placeholder="Mempunyai Varian" value="0"> --}}
                                <input type="text" class="form-control" name="kode" autocomplete="off" placeholder="Kode Varian">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Nama Varian <small class="text-danger">(Maksimal 20 karakter)</small></label>
                                <input type="text" class="form-control required" name="nama" autocomplete="off" placeholder="Nama Varian">
                            </div>
                        </div>
                        <div class="col-6">
                            <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">
                            <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">Kategori Harga</label>
                                <select name="kategori_harga_id" id="kategori_harga_id" class="form-control">
                                    <option value="">Silahkan Pilih</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Supplier</label>
                                <select id="supplier_id" class="form-control select2CustomModalVarian 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="btnSimpanMasterVarian" 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 Varian</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>
                                <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;">
                            @canany(['master-data.create', 'master-data.edit'])
                            <button type="button" id="btnSimpanMasterSpesifikasiKategori" 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="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">
                <div class="alert alert-warning alert-dismissible fade show" style="display: none" id="alert-spesifikasi-tidak-valid" role="alert">
                    Varian ini belum memiliki semua Spesifikasi Produk
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                <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 Varian</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 Varian</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">
                            <div class="row">
                                <div class="col-6">
                                    <button class="btn btn-info btn-custom8 btn-sm" type="button" id="copyDataProduk"
                                    {{user_can_modify('master-data') ? '' : 'disabled'}}
                                    >Copy Data dari Produk</button>
                                </div>
                                <div class="col-6" 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>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div id="modalMasterDetailSpesifikasiCopy" 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="keteranganSpesifikasiCopy"></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_copy" class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <table class="table table-sm" id="tableDetailSpesifikasiCopy">
                                <thead>
                                    <tr>
                                        <th>Spesifikasi Produk [<span id="keteranganSpesifikasiProduk"></span>]</th>
                                        <th>Isian</th>
                                        <th class="kolomAksi">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr id="rowKosongDetailSpesifikasiCopy">
                                        <td colspan="3" class="text-center">Belum Terdapat Data</td>
                                    </tr>
                                </tbody>
                            </table>
                        </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 Varian (<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">
                <div class="alert alert-warning alert-dismissible fade show mt-3" style="display: none" id="alert-satuan-tidak-sama" role="alert">
                    Satuan Varian berbeda dengan Satuan Produk
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                <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-6">
                            <button class="btn btn-info btn-custom8 btn-sm" type="button" id="copyDataSatuanProduk" data-id_varian="0"
                            {{user_can_modify('master-data') ? '' : 'disabled'}}
                            >Copy Data dari Produk</button>
                        </div>
                        <div class="col-6" 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>
                    @canany(['master-data.create', 'master-data.edit'])
                    <div class="col-12">
                        <label>Upload File</label>
                        <input type="file" id="file" class="form-control mt-2">
                        <button type="button" id="btnKelolaFile" class="btn btn-success btn-custom1 btn-sm mt-2" style="width: 100% !important;">Upload File</button>
                    </div>
                    @endcanany
                </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/varian') }}";
    var jmlDataSpesifikasiKategori = 0;
    let url_list_kategori_harga = '/master/produk/kategori-harga/lists';

    let datatable = $('#datatable-serverside').DataTable({
        lengthMenu: lengthMenuDatatable(),
        processing: true,
        serverSide: true,
        ajax: URLs + '/get-data/{{ $produk_id ?? 0 }}',
        columns: [{
                data: 'DT_RowIndex',
                name: 'id',
                searchable: false
            },
            {
                data: 'kode',
                name: 'kode'
            },
            {
                data: 'nama',
                name: 'nama'
            },
            {
                data: 'supplier',
                name: 'supplier'
            },
            {
                data: 'kategori-harga',
                name: 'kategori-harga',
                searchable: false
            },
            {
                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: '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'
            },
        ],
    });

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

        let URL_filter = URLs + '/get-data/' + produk_filter + '?supplier_id=' + supplier_filter + '&kategori_id=' + kategori_filter;
        datatable.ajax.url(URL_filter).load();
    });

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

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

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

    function rDetailSpesifikasi(data) {
        swal.close();
        var cekHide = false;
        var boleh = "{{ user_can_modify('master-data') }}" === "1" ? "" : " d-none";
        $.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' + boleh + '" 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' + boleh + '" title="Hapus Data" onclick="hapusSpesifikasiKategori(\'' + v.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;
            }

            var 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) {
        var 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 + '\')"><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();
        }
    }

    $('#tambahMasterVariant').on('click', function(e) {
        stat = "add";
        var data = {
            act: "read",
            id: '0',
            _token: "{{ csrf_token() }}"
        };
        reads(URLs + "/read", data, rReadsTambah);
    });

    function rReadsTambah(data) {
        $('#kategori_harga_id').select2({
            dropdownParent: $('#modalMasterVarian .modal-content'),
            width: '100%',
            allowClear: true,
            placeholder: 'Pilih Kategori Harga',
            ajax: {
                url: url_list_kategori_harga + '?id_produk=' + "{{ $produk_id ?? '' }}",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        search: params.term
                    };
                },
                processResults: function(data) {
                    return {
                        results: $.map(data, function(item) {
                            return {
                                text: item.nama,
                                id: item.id
                            }
                        })
                    };
                },
                cache: true
            },
        });
        swal.close();
        if ("{{ auth()->user()->checkPermissionTo('deskripsi-owner.create') }}") {
            $('#kolom-deskripsi-owner').show();
        } else {
            $('#kolom-deskripsi-owner').hide();
        }
        $('#modalMasterVarian').modal('show');
        $('#supplier_id').val((data.supplier).split(',')).trigger('change');
        // $('#form_master_varian [name=kode_dari_supplier]').val(data.kode_dari_supplier);
        // $('#form_master_varian [name=nama_dari_supplier]').val(data.nama_dari_supplier);
        $('#form_master_varian [name=deskripsi]').html(data.deskripsi);
    }

    $('#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 Varian dari Supplier (' + supplierText + ')</label>' +
                '<input type="text" class="form-control kode_dari_supplier kode_dari_supplier' + supplierValue + '" data-id="' + supplierValue + '" autocomplete="off" placeholder="Kode Varian dari Supplier" value="' + kode + '">' +
                '</div>' +
                '</div>' +
                '<div class="col-6">' +
                '<div class="mb-3">' +
                '<label class="form-label">Nama Varian dari Supplier (' + supplierText + ')</label>' +
                '<input type="text" class="form-control nama_dari_supplier nama_dari_supplier' + supplierValue + '" data-id="' + supplierValue + '" autocomplete="off" placeholder="Nama Varian dari Supplier" value="' + nama + '">' +
                '</div>' +
                '</div>' +
                '</div>';

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

    $('#btnSimpanMasterVarian').on('click', function(e) {
        if (cekForm('form_master_varian') == true) {
            var cekNama = $('#form_master_varian [name="nama"]').val().length;
            if (parseInt(cekNama) <= 20) {
                // var data = $('#form_master_varian').serialize();
                // if("{{ $kategori_id ?? 0 }}" != 0){
                //     data += "&kategori_id={{ $kategori_id }}";
                // }

                // if("{{ $produk_id ?? 0 }}" != 0){
                //     data += "&parent_id={{ $produk_id ?? 0 }}";
                // }

                var dataKodeNama = [];
                $.each($('.kode_dari_supplier'), function(i, v) {
                    dataKodeNama.push($(this).data('id') + "#" + $(this).val() + "#" + $('.nama_dari_supplier' + $(this).data('id')).val());
                })

                // data += "&_token={{ csrf_token() }}";
                // data += "&supplier_id="+$('#supplier_id').val().join(',');
                // data += "&kode_nama_dari_supplier="+dataKodeNama.join('_');

                var data = new FormData();
                data.append("_token", "{{ csrf_token() }}");
                data.append("tipe", "varian");
                data.append("mempunyai_varian", "0");
                data.append("kategori_harga_id", $('#kategori_harga_id').val());
                data.append("supplier_id", $('#supplier_id').val().join(','));
                data.append("kode_nama_dari_supplier", dataKodeNama.join('_'));
                data.append("kode", $('#form_master_varian [name="kode"]').val());
                data.append("nama", $('#form_master_varian [name="nama"]').val());
                data.append("kode_barcode", $('#kode_barcode').val());
                if ($('#gunakan_nomor_urut').val()) {
                    data.append("gunakan_nomor_urut", $('#gunakan_nomor_urut').val());
                }
                data.append("deskripsi", $('#deskripsi').val());

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

                if ("{{ $produk_id ?? 0 }}" != 0) {
                    data.append("parent_id", "{{ $produk_id ?? 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 Varian 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) {
        $('#kategori_harga_id').select2({
            dropdownParent: $('#modalMasterVarian .modal-content'),
            width: '100%',
            allowClear: true,
            placeholder: 'Pilih Kategori Harga',
            ajax: {
                url: url_list_kategori_harga + '?id_produk=' + data.parent_id,
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        search: params.term
                    };
                },
                processResults: function(data) {
                    return {
                        results: $.map(data, function(item) {
                            return {
                                text: item.nama,
                                id: item.id
                            }
                        })
                    };
                },
                cache: true
            },
        });
        swal.close();
        if ("{{ auth()->user()->checkPermissionTo('deskripsi-owner.edit') }}") {
            $('#kolom-deskripsi-owner').show();
        } else {
            $('#kolom-deskripsi-owner').hide();
        }
        $('#modalMasterVarian').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 == 'kategori_harga_id') {
                if (vals == null || vals == '' || vals == '0' || vals == 0) {
                    $('#kategori_harga_id').val('').trigger('change');
                } else {
                    let selected = new Option(data.kategoriharga.nama, data.kategoriharga.id, true, true);
                    $('#kategori_harga_id').append(selected).trigger('change');
                }
            } else {
                $('#form_master_varian [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);
        })
    }

    var tipeGlobal = null;
    var kategoriIdGlobal = null;

    function lihatDetailSpesifikasi(id, kategori_id = 0, tipe = null, kode_varian = null, nama_varian = null) {
        kodeVarian = kode_varian;
        namaVarian = nama_varian;
        kategoriIdGlobal = kategori_id;
        tipeGlobal = tipe;

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

    var jmlDataDetailSpesifikasi = 0;

    function rReadDetailSpesifikasi(data) {
        if (!data.is_valid) {
            $('#alert-spesifikasi-tidak-valid').show();
        } else {
            $('#alert-spesifikasi-tidak-valid').hide();
        }
        swal.close();

        var keteranganSpesifikasi = "-";
        if (kodeVarian != null && kodeVarian != '' && namaVarian != null && namaVarian != null) {
            keteranganSpesifikasi = kodeVarian + " | " + namaVarian;
        }
        $('#keteranganSpesifikasi').html(keteranganSpesifikasi);

        var cekHide = false;
        var cekboleh = "{{ user_can_modify('master-data') }}" === "1" ? "" : " d-none";
        $.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' + cekboleh + '" 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' + cekboleh + '" 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">' +
                '<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();
        }
    }

    $('#modalMasterVarian').on('hidden.bs.modal', function(e) {
        $('#form_master_varian input').not('[type="hidden"]').val('');
        $('#form_master_varian textarea').val('');
        $('#form_master_varian select').val('').trigger('change');
        $('#kategori_harga_id').select2('destroy');

        $('#ketFile').html('');

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

    $('.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);
        }
    });

    var kodeVarian = null;
    var namaVarian = null;

    function lihatSatuan(id, kode_varian, nama_varian) {
        kodeVarian = kode_varian;
        namaVarian = nama_varian;
        stat = "update";
        IDs = id;
        var data = {
            id: id,
            _token: "{{ csrf_token() }}"
        };
        reads(URLs + "/read", data, rReadsSatuan);
    }

    function rReadsSatuan(data) {
        $('#copyDataSatuanProduk').attr('data-id_varian', data.id);
        if (!checkSatuan(data)) {
            $('#alert-satuan-tidak-sama').show();
        } else {
            $('#alert-satuan-tidak-sama').hide();
        }
        swal.close();
        $('#modalMasterSatuan').modal('show');

        $('#keteranganVarian').html(kodeVarian + " | " + namaVarian);
        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);

    }

    function checkSatuan(data) {
        varian = data;
        produk = data.parent;

        check_data = [
            'unit1', 'unit2', 'unit3', 'unit4', 'unit5', 'unit6',
            'ratio1', 'ratio2', 'ratio3', 'ratio4', 'ratio5', 'ratio6',
            'konversi_unit1_penjualan', 'konversi_unit2_penjualan', 'konversi_unit3_penjualan',
            'konversi_unit4_penjualan', 'konversi_unit5_penjualan', 'konversi_unit6_penjualan',
            'stok_minimum', 'satuan_stock',
        ];

        for (const key in check_data) {
            if (varian[check_data[key]] != produk[check_data[key]]) {
                return false;
            }
        }

        return true;
    }

    $('#copyDataSatuanProduk').click(function(e) {
        var data = {
            id: $(this).data('id_varian'),
            _token: "{{ csrf_token() }}"
        };

        sendJson(URLs + "/copy-satuan", data, function(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") {
                    window.location.reload();
                }
            });
        });
    });

    $('.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);
        }
    });

    $('#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;
    });

    var statusModal = false;
    $('#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();

        if (statusModal == false) {
            IDs = '';
            IDs2 = '';
            stat = '';
            kodeVarian = null;
            namaVarian = null;
            kategoriIdGlobal = null;
            tipeGlobal = 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 = '';
        kodeVarian = null;
        namaVarian = 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-varian", 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-varian", data, rSendsUbahStatus);
    //     }
    // });
    const setActive = (e, id) => {
        $.ajax({
            url: URLs + '/ubah-status-varian',
            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);

        jmlBerkasAll = data.length;
        if (data.length > 0) {
            $('#rowKosongKelolaFile').hide();
        }
        var boleh = "{{ user_can_modify('master-data') }}" === "1" ? "" : " d-none";
        $.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;
    });

    $('#copyDataProduk').on('click', function(e) {
        statusModal = true;
        $("#modalMasterDetailSpesifikasi").modal('hide');

        var data = {
            id: IDs,
            _token: "{{ csrf_token() }}"
        };
        reads(URLs + "/read-spesifikasi", data, rReadsSpesifikasi);
    });

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

        $('#keteranganSpesifikasiProduk').html(data.namaProduk);

        var keteranganSpesifikasi = "-";
        if (kodeVarian != null && kodeVarian != '' && namaVarian != null && namaVarian != null) {
            keteranganSpesifikasi = kodeVarian + " | " + namaVarian;
        }
        $('#keteranganSpesifikasiCopy').html(keteranganSpesifikasi);

        var cekHide = false;
        $.each(data.detailSpesifikasi, function(i, v) {
            cekHide = true;
            $('#tableDetailSpesifikasiCopy tbody').append(
                '<tr id="rowDetailSpesifikasiCopy' + v.id + '" class="rowDetailSpesifikasiCopy">' +
                '<td class="kolom1">' +
                v.nama +
                '</td>' +
                '<td class="kolom2">' +
                v.value +
                '</td>' +
                '<td class="kolom3">' +
                '<button type="button" class="btn btn-warning btn-sm text-white" title="Copy Data" onclick="copyData(\'' + v.id + '\')">Copy Data</button> ' +
                '</td>' +
                '</tr>'
            );
        });

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

        $("#modalMasterDetailSpesifikasiCopy").modal('show');
    }

    function copyDataSatuan(id_varian) {
        var data = {
            id: id_varian,
            _token: "{{ csrf_token() }}"
        };
        sendJson(URLs + "/copy-satuan", data, function() {
            window.location.reload();
        });
    }

    function copyData(id_spesifikasi) {
        var data = {
            id: id_spesifikasi,
            id_produk: IDs,
            _token: "{{ csrf_token() }}"
        };
        sendJson(URLs + "/copy-spesifikasi", data, rCopyData);
    }

    function rCopyData(data) {
        var titles = data.type == "success" ? "Sukses" : (data.type == "error" ? "Gagal" : "Info");
        swal({
            title: titles,
            text: data.response,
            type: data.type,
            confirmButtonText: "OK"
        });
    }

    $('#modalMasterDetailSpesifikasiCopy').on('hidden.bs.modal', function(e) {
        statusModal = false;
        $('#keteranganSpesifikasiProduk').html('-');
        $('#keteranganSpesifikasiCopy').html('-');
        $('.rowDetailSpesifikasiCopy').remove();
        $('.rowKosongDetailSpesifikasiCopy').show();

        lihatDetailSpesifikasi(IDs, kategoriIdGlobal, tipeGlobal, kodeVarian, namaVarian);
    });

    $('#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