@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"><a href="/master/produk/">Produk</a></li>
        <li class="breadcrumb-item active" aria-current="page">Kategori Harga</li>
    </ol>
</nav>

<div class="row">
    <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <div class="table-responsive" style="overflow-x: auto;">
                    <h6 class="card-title">Data Master Kategori Harga [Produk:  | ]</h6>
                    <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
                        <thead>
                            <tr>
                                <th class="kolomNomor">No.</th>
                                <th>Nama Kategori Harga</th>
                                @foreach ($arrUnit as $vUnit)
                                <th>Harga ({{ $vUnit }})</th>
                                @endforeach
                                <th>Keterangan</th>
                                <th class="kolomAksi">Aksi</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <div class="card-footer" style="text-align: right;">
                <a href="/master/produk/kategori-harga/kondisi-spesial/" class="btn btn-info btn-custom1">Biaya Tambahan</a>
                @can('master-data.create')                
                <button class="btn btn-info btn-custom1" id="tambahMasterKategoriHarga">Tambah Data</button>
                @endcan
                <a href="/master/produk/" class="btn btn-light btn-custom8">Kembali</a>
            </div>
        </div>
    </div>
</div>

{{-- Modal --}}
<div id="modalMasterKategoriHarga" 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 Harga</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_harga" class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Nama Kategori Harga<span class="text-danger">*</span></label>
                                <input type="text" class="form-control required" name="nama" autocomplete="off" placeholder="Nama Kategori Harga">
                            </div>
                        </div>
                        <div class="col-6" id="konten1" style="display: none;">
                            <div class="mb-3">
                                <label class="form-label">Harga (<span id="unit1"></span>)</label>
                                <input type="text" class="form-control" onchange="formatInputUang(this)" name="harga1" autocomplete="off" value="0">
                            </div>
                        </div>
                        <div class="col-6" id="konten2" style="display: none;">
                            <div class="mb-3">
                                <label class="form-label">Harga (<span id="unit2"></span>)</label>
                                <input type="text" class="form-control" onchange="formatInputUang(this)" name="harga2" autocomplete="off" value="0">
                            </div>
                        </div>
                        <div class="col-6" id="konten3" style="display: none;">
                            <div class="mb-3">
                                <label class="form-label">Harga (<span id="unit3"></span>)</label>
                                <input type="text" class="form-control" onchange="formatInputUang(this)" name="harga3" autocomplete="off" value="0">
                            </div>
                        </div>
                        <div class="col-6" id="konten4" style="display: none;">
                            <div class="mb-3">
                                <label class="form-label">Harga (<span id="unit4"></span>)</label>
                                <input type="text" class="form-control" onchange="formatInputUang(this)" name="harga4" autocomplete="off" value="0">
                            </div>
                        </div>
                        <div class="col-6" id="konten5" style="display: none;">
                            <div class="mb-3">
                                <label class="form-label">Harga (<span id="unit5"></span>)</label>
                                <input type="text" class="form-control" onchange="formatInputUang(this)" name="harga5" autocomplete="off" value="0">
                            </div>
                        </div>
                        <div class="col-6" id="konten6" style="display: none;">
                            <div class="mb-3">
                                <label class="form-label">Harga (<span id="unit6"></span>)</label>
                                <input type="text" class="form-control" onchange="formatInputUang(this)" name="harga6" autocomplete="off" value="0">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Keterangan</label>
                                <textarea name="keterangan" id="keterangan" cols="30" rows="10" class="form-control" placeholder="Keterangan"></textarea>
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            @canany(['master-data.edit', 'master-data.create'])
                            <button type="button" id="btnSimpanMasterKategoriHarga" 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>
{{-- Akhiran Modal --}}
@endsection

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

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

<script>
    var URLs = "{{ url('master/produk/kategori-harga') }}";
    var id_produk = "{{ $dataProduk->id }}";
    var unit1 = "{{ strtolower($dataProduk->unit1) }}";
    var arrUnit = null;
    var jmlArrUnit = arrUnit.length;

    var columnTable = [];
    columnTable.push({
        data: 'DT_RowIndex',
        name: 'id'
    });
    columnTable.push({
        data: 'nama',
        name: 'nama'
    });

    for (var a = 1; a <= jmlArrUnit; a++) {
        var namaHarga = 'harga' + a;
        columnTable.push({
            data: namaHarga,
            name: namaHarga
        });
    }

    columnTable.push({
        data: 'keterangan',
        name: 'keterangan'
    });
    columnTable.push({
        data: 'aksi',
        name: 'aksi',
        searchable: false,
        orderable: false,
        class: 'text-center'
    });
    let datatable = $('#datatable-serverside').DataTable({
        lengthMenu: lengthMenuDatatable(),
        processing: true,
        serverSide: true,
        ajax: URLs + '/get-data/' + id_produk,
        columns: columnTable
    });

    $(document).ready(function() {
        var iterasi = 1;
        $.each(arrUnit, function(i, v) {
            $('#konten' + iterasi).show();
            $('#unit' + iterasi).html(v);
            $('[name="' + iterasi + '"]').show();
            $('[name="' + iterasi + '"]').attr('placeholder', v);
            iterasi = iterasi + 1;
        });
    });

    $('#tambahMasterKategoriHarga').on('click', function(e) {
        stat = "add";
        $('#modalMasterKategoriHarga').modal('show');
    });

    $('#btnSimpanMasterKategoriHarga').on('click', function(e) {
        if (cekForm('form_master_kategori_harga') == true) {
            var data = $('#form_master_kategori_harga').serialize();
            data += "&id_produk={{ $dataProduk->id }}";
            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();
        $('#modalMasterKategoriHarga').modal("show");
        $.each(data, function(idx, vals) {
            if (idx == 'harga1' || idx == 'harga2' || idx == 'harga3' || idx == 'harga4' || idx == 'harga5' || idx == 'harga6') {
                $('#form_master_kategori_harga [name=' + idx + ']').val(formatNumber(parseFloat(!isNumeric(vals) ? 0 : vals), 0, 2));
            } else {
                $('#form_master_kategori_harga [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);
        })
    }

    $('#modalMasterKategoriHarga').on('hidden.bs.modal', function(e) {
        $('#form_master_kategori_harga input').val('');
        $('#form_master_kategori_harga textarea').html('');
        $('[name="harga1"]').val('0');
        $('[name="harga2"]').val('0');
        $('[name="harga3"]').val('0');
        $('[name="harga4"]').val('0');
        $('[name="harga5"]').val('0');
        $('[name="harga6"]').val('0');
        IDs = '';
        stat = '';
    });
</script>
@endpush