@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>
        <li class="breadcrumb-item active" aria-current="page">Kategori</li>
    </ol>
</nav>

<div class="row">
    <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <h6 class="card-title">Data Master Kategori</h6>
                <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
                    <thead>
                        <tr>
                            <th class="kolomNomor">No.</th>
                            <th>Nama Kategori</th>
                            <th>Spesifikasi</th>
                            <th>Barang</th>
                            <th class="kolomAksi">Aksi</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="card-footer" style="text-align: right;">
                @can('master-data.create')
                <button class="btn btn-info btn-custom1" id="tambahMasterKategori">Tambah Data</button>
                @endcan
            </div>
        </div>
    </div>
</div>

{{-- Modal --}}
<div id="modalMasterKategori" 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 Kategori</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_kategori" class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Nama Kategori</label>
                                <input type="text" class="form-control required" name="nama" autocomplete="off" placeholder="Nama Kategori">
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="button" id="btnSimpanMasterKategori" 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 Kategori (<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_spesifikasi_kategori" class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <table class="table" 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;">
                            @can('master-data.create')
                            <button type="button" id="btnSimpanMasterSpesifikasiKategori" class="btn btn-primary btn-custom1">Simpan</button>
                            @endcan
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                        </div>
                    </div>
                </form>
            </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/kategori') }}";
    var jmlDataSpesifikasiKategori = 0;

    let datatable = $('#datatable-serverside').DataTable({
        lengthMenu: lengthMenuDatatable(),
        processing: true,
        serverSide: true,
        ajax: URLs + '/get-data',
        columns: [{
                data: 'DT_RowIndex',
                name: 'id',
                searchable: boolPhpToJs("{{ isColumnSearchable(\App\Http\Controllers\MasterKategoriController::columnSearchable(), 'nama') }}"),
                orderable: boolPhpToJs("{{ isColumnOrderable(\App\Http\Controllers\MasterKategoriController::columnOrderable(), 'nama') }}"),
            },
            {
                data: 'nama',
                name: 'nama',
                searchable: boolPhpToJs("{{ isColumnSearchable(\App\Http\Controllers\MasterKategoriController::columnSearchable(), 'nama') }}"),
                orderable: boolPhpToJs("{{ isColumnOrderable(\App\Http\Controllers\MasterKategoriController::columnOrderable(), 'nama') }}"),
            },
            {
                data: 'detail_spesifikasi',
                name: 'detail_spesifikasi',
                searchable: boolPhpToJs("{{ isColumnSearchable(\App\Http\Controllers\MasterKategoriController::columnSearchable(), 'detail_spesifikasi') }}"),
                orderable: boolPhpToJs("{{ isColumnOrderable(\App\Http\Controllers\MasterKategoriController::columnOrderable(), 'detail_spesifikasi') }}"),
                class: 'text-center'
            },
            {
                data: 'lihat_produk',
                name: 'lihat_produk',
                searchable: boolPhpToJs("{{ isColumnSearchable(\App\Http\Controllers\MasterKategoriController::columnSearchable(), 'lihat_produk') }}"),
                orderable: boolPhpToJs("{{ isColumnOrderable(\App\Http\Controllers\MasterKategoriController::columnOrderable(), 'lihat_produk') }}"),
                class: 'text-center'
            },
            {
                data: 'aksi',
                name: 'aksi',
                searchable: boolPhpToJs("{{ isColumnSearchable(\App\Http\Controllers\MasterKategoriController::columnSearchable(), 'aksi') }}"),
                orderable: boolPhpToJs("{{ isColumnOrderable(\App\Http\Controllers\MasterKategoriController::columnOrderable(), 'aksi') }}"),
                class: 'text-center'
            },
        ],
    });

    $(`
        <div class="form-text text-wrap" style="width: 220px">
            Column: ` +
        `{!! columnSearchableToString(\App\Http\Controllers\MasterKategoriController::columnSearchable()) !!}` +
        `
        </div>
    `).insertAfter(".dataTables_filter [type='search']");


    var namaKategori = null;

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

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

        $('#keteranganSpesifikasi').html(namaKategori);
        var boleh = "{{ user_can_modify('master-data') }}" === "1" ? "" : " d-none";
        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' + 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 + '\', ' + 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_produk = null) {
        if (has_produk) {
            swal({
                title: "Konfirmasi",
                text: "Kategori ini sudah memiliki produk jika tetap dihapus dapat menyebabkan ketidak konsistenan data",
                type: "warning",
                showCancelButton: true,
                cancelButtonText: "Batal",
                confirmButtonText: "Lanjutkan"
            }).then(function() {
                let data = {
                    id: id,
                    _token: "{{ csrf_token() }}"
                };
                sendJson(URLs + "/delete-spesifikasi-kategori", data, rSendsSpesifikasiKategori3, '');
            })
        } else {
            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') {
            $('.select2Creatable').val('').trigger('change');
            $('#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_produk + ')"><span class="mdi mdi-delete"></span></button>');
        }

        // $('#form_master_spesifikasi_kategori input').val('');
        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";
        $('#modalMasterKategori').modal('show');
    });

    $('#btnSimpanMasterKategori').on('click', function(e) {
        if (cekForm('form_master_kategori') == true) {
            var data = $('#form_master_kategori').serialize();
            data += "&_token={{ csrf_token() }}";
            if (stat == "add") {
                sendJson(URLs + "/add", data, rSends);
            } else {
                data += "&id=" + IDs;
                sendJson(URLs + "/update", data, rSends);
            }
        }
    });

    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();
        $('#modalMasterKategori').modal("show");
        $.each(data, function(idx, vals) {
            $('#form_master_kategori [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);
        })
    }

    $('#modalMasterKategori').on('hidden.bs.modal', function(e) {
        $('#form_master_kategori input').val('');
        IDs = '';
        stat = '';
    });

    $('#modalMasterSpesifikasiKategori').on('hidden.bs.modal', function(e) {
        $('#keteranganSpesifikasi').html('-');
        // $('#form_master_spesifikasi_kategori input').val('');
        $('.select2Creatable').val('').trigger('change');
        $('#rowKosongSpesifikasiKategori').show();
        $('.rowSpesifikasiKategori').remove();
        IDs = '';
        IDs2 = '';
        stat = '';
        namaKategori = null;
    });

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