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

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
        <div class="card-header">
          <h4>Data Pelanggan</h4>
        </div>
      <div class="card-body">
        <div class="row">
            <div class="col-12 table-responsive">
                <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
                    <thead>
                        <tr>
                            <th class="kolomNomor">No.</th>
                            <th>Kode</th>
                            <th>Nama</th>
                            <th>Limit Hutang</th>
                            <th>Tempo</th>
                            <th>Bank</th>
                            <th>Detail Kontak</th>
                            <th>Aktif</th>
                            <th class="kolomAksi">Aksi</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
      </div>
      <div class="card-footer" style="text-align: right;">
        @can('kasir.create')
            <button class="btn btn-info btn-custom1" id="tambahMasterKontak">Tambah Data</button>
        @endcan
      </div>
    </div>
  </div>
</div>

{{-- Modal --}}
<div id="modalMasterKontak" 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 Kontak</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_kontak" class="forms-sample">
                    <div class="row">
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Kode</label>
                                <input type="text" name="kode" id="kode" class="form-control" placeholder="Kode">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Nama</label>
                                <input type="text" name="nama" id="nama" class="form-control required" placeholder="Nama">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Status NPWP</label>
                                <select name="status_npwp" id="status_npwp" class="form-control">
                                    <option value="">Silahkan Pilih</option>
                                    <option value="pkp">PKP</option>
                                    <option value="non_pkp">Non PKP</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">NPWP</label>
                                <input type="text" name="npwp" id="npwp" class="form-control" placeholder="NPWP">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Limit Hutang</label>
                                <input type="text" name="limit_hutang" id="limit_hutang" class="form-control" placeholder="Limit Hutang" value="0">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Tempo <small class="text-secondary">(satuan dalam hari)</small></label>
                                <input type="text" name="tempo" id="tempo" class="form-control" placeholder="Tempo" value="0">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Alamat</label>
                                <textarea name="alamat" id="alamat" class="form-control" cols="30" rows="8" placeholder="Alamat"></textarea>
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="button" id="btnSimpanMasterKontak" 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="modalMasterDetailKontak" 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 Kontak</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_kontak" class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <table class="table table-sm" id="tableDetailKontak">
                                <thead>
                                    <tr>
                                        <th>Tipe</th>
                                        <th>Isian dari Tipe</th>
                                        <th class="kolomAksi">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr id="rowKosongDetailKontak">
                                        <td colspan="3" class="text-center">Belum Terdapat Data</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        @canany(['kasir.create', 'kasir.edit'])
                            <hr style="mb-3" />
                            <div class="col-6">
                                <div class="mb-3">
                                    <label class="form-label">Tipe</label>
                                    <select name="tipe_detail_kontak" id="tipe_detail_kontak" class="form-control required">
                                        <option value="">Silahkan Pilih</option>
                                        <option value="email">Email</option>
                                        <option value="telepon">Telepon</option>
                                        <option value="fax">Fax</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="mb-3">
                                    <label class="form-label">Isian dari Tipe</label>
                                    <input type="text" name="isian_tipe" id="isian_tipe" class="form-control required" placeholder="Isian dari Tipe">
                                </div>
                            </div>
                            <div class="col-12" style="text-align: right;">
                                <button type="button" id="btnSimpanMasterDetailKontak" class="btn btn-primary btn-custom1">Simpan</button>
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                            </div>
                        @endcanany
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div id="modalMasterDetailBank" 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 Bank</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_bank" class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <table class="table table-sm" id="tableDetailBank">
                                <thead>
                                    <tr>
                                        <th>Bank</th>
                                        <th>Nama Rekening</th>
                                        <th>Nomor Rekening</th>
                                        <th class="kolomAksi">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr id="rowKosongDetailBank">
                                        <td colspan="4" class="text-center">Belum Terdapat Data</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        @canany(['kasir.create', 'kasir.edit'])
                            <hr style="mb-3" />
                            <div class="col-12">
                                <div class="mb-3">
                                    <label class="form-label">Bank</label>
                                    <select name="id_master_bank" id="id_master_bank" class="form-control required">
                                        <option value="">Silahkan Pilih</option>
                                                                            </select>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="mb-3">
                                    <label class="form-label">Nama Rekening</label>
                                    <input type="text" name="nama_rekening" id="nama_rekening" class="form-control required" placeholder="Nama Rekening">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="mb-3">
                                    <label class="form-label">Nomor Rekening</label>
                                    <input type="text" name="nomor_bank" id="nomor_bank" class="form-control required" placeholder="Nomor Rekening">
                                </div>
                            </div>
                            <div class="col-12" style="text-align: right;">
                                <button type="button" id="btnSimpanMasterDetailBank" class="btn btn-primary btn-custom1">Simpan</button>
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                            </div>
                        @endcanany
                    </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>
    IDs2 = '';
    jmlDataDetailKontak = 0;
    jmlDataDetailBank = 0;
    var URLs = "{{ url('penjualan/data-pelanggan') }}";

    let datatable = $('#datatable-serverside').DataTable({
      lengthMenu: lengthMenuDatatable(),
      processing: true,
      serverSide: true,
      ajax: URLs+'/get-data-pelanggan',
      columns: [
        {data: 'DT_RowIndex', name: 'id'},
        {data: 'kode', name: 'kode'},
        {data: 'nama', name: 'nama'},
        {data: 'limit_hutang', name: 'limit_hutang'},
        {data: 'tempo', name: 'tempo'},
        {data: 'lihat_bank', name: 'lihat_bank', searchable: false, orderable: false, class: 'text-center'},
        {data: 'lihat_detail_kontak', name: 'lihat_detail_kontak', searchable: false, orderable: false, class: 'text-center'},
        {data: 'status_aktif', name: 'status_aktif', searchable: false, orderable: false, class: 'text-center'},
        {data: 'aksi', name: 'aksi', searchable: false, orderable: false, class: 'text-center'},
      ],
    });

    $('#limit_hutang').on('keyup', function(e){
        $(this).mask('0.000.000.000.000.000.000.000.000.000', {reverse: true});
    });

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

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

    function lihatBank(id) {
        IDs = id;
        stat = 'add';
        var data = {
            id: id,
            _token: "{{ csrf_token() }}"
        };
        reads(URLs+"/read-bank", data, rReadBank);
    }

    function rReadBank(data) {
        swal.close();
        var cekHide = false;
        $.each(data, function(i, v){
            jmlDataDetailBank = parseInt(jmlDataDetailBank)+1;
            cekHide = true;
            $('#tableDetailBank tbody').append(
                '<tr id="rowDetailBank'+v.id+'" class="rowDetailBank">'+
                '<td class="kolom1">'+
                v.nama_bank+
                '</td>'+
                '<td class="kolom2">'+
                v.nama_rekening+
                '</td>'+
                '<td class="kolom3">'+
                v.nomor_bank+
                '</td>'+
                '<td class="kolom4">'+
                '<button type="button" class="btn btn-warning btn-custom6 btn-sm" title="Edit Data" onclick="editDetailBank(\''+v.id+'\', \''+v.id_master_bank+'\', \''+v.nama_rekening+'\', \''+v.nomor_bank+'\')"><span class="mdi mdi-grease-pencil"></span></button> '+
                '<button type="button" class="btn btn-danger btn-custom5 btn-sm" title="Hapus Data" onclick="hapusDetailBank(\''+v.id+'\')"><span class="mdi mdi-delete"></span></button>'+
                '</td>'+
                '</tr>'
            );
        });

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

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

    function lihatDetailKontak(id) {
        IDs = id;
        stat = 'add';
        var data = {
            id: id,
            _token: "{{ csrf_token() }}"
        };
        reads(URLs+"/read-kontak", data, rReadKontak);
    }

    function rReadKontak(data) {
        swal.close();
        var cekHide = false;
        $.each(data, function(i, v){
            jmlDataDetailKontak = parseInt(jmlDataDetailKontak)+1;
            cekHide = true;
            $('#tableDetailKontak tbody').append(
                '<tr id="rowDetailKontak'+v.id+'" class="rowDetailKontak">'+
                '<td class="kolom1">'+
                (v.tipe == 'email' ? 'Email' : (v.tipe == 'telepon' ? 'Telepon' : (v.tipe == 'fax' ? 'Fax' : '-')))+
                '</td>'+
                '<td class="kolom2">'+
                v.value+
                '</td>'+
                '<td class="kolom3">'+
                '<button type="button" class="btn btn-warning btn-custom6 btn-sm" title="Edit Data" onclick="editDetailKontak(\''+v.id+'\', \''+v.tipe+'\', \''+v.value+'\')"><span class="mdi mdi-grease-pencil"></span></button> '+
                '<button type="button" class="btn btn-danger btn-custom5 btn-sm" title="Hapus Data" onclick="hapusDetailKontak(\''+v.id+'\')"><span class="mdi mdi-delete"></span></button>'+
                '</td>'+
                '</tr>'
            );
        });

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

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

    $('#btnSimpanMasterDetailKontak').on('click', function(e){
        if (cekForm('form_master_detail_kontak') == true) {
            var data = $('#form_master_detail_kontak').serialize();
            data += "&_token={{ csrf_token() }}";
            data += "&id_master_kontak="+IDs;
            if (stat == "add") {
                sendJson(URLs+"/add-detail-kontak", data, rSendsDetailKontak, '');
            }else{
                data += "&id="+IDs2;
                sendJson(URLs+"/update-detail-kontak", data, rSendsDetailKontak2, '');
            }
        }
    });

    $('#btnSimpanMasterDetailBank').on('click', function(e){
        if (cekForm('form_master_detail_bank') == true) {
            var data = $('#form_master_detail_bank').serialize();
            data += "&_token={{ csrf_token() }}";
            data += "&id_master_kontak="+IDs;
            if (stat == "add") {
                sendJson(URLs+"/add-detail-bank", data, rSendsDetailBank, '');
            }else{
                data += "&id="+IDs2;
                sendJson(URLs+"/update-detail-bank", data, rSendsDetailBank2, '');
            }
        }
    });

    function rSendsDetailBank(data){
        if(data.type == 'success'){
            jmlDataDetailBank = parseInt(jmlDataDetailBank)+1;
            $('#rowKosongDetailBank').hide();
            $('#tableDetailBank tbody').append(
                '<tr id="rowDetailBank'+data.id+'" class="rowDetailBank">'+
                '<td class="kolom1">'+
                data.nama_bank+
                '</td>'+
                '<td class="kolom2">'+
                data.nama_rekening+
                '</td>'+
                '<td class="kolom3">'+
                data.nomor_bank+
                '</td>'+
                '<td class="kolom4">'+
                '<button type="button" class="btn btn-warning btn-custom6 btn-sm" title="Edit Data" onclick="editDetailBank(\''+data.id+'\', \''+data.id_master_bank+'\', \''+data.nama_rekening+'\', \''+data.nomor_bank+'\')"><span class="mdi mdi-grease-pencil"></span></button> '+
                '<button type="button" class="btn btn-danger btn-custom5 btn-sm" title="Hapus Data" onclick="hapusDetailBank(\''+data.id+'\')"><span class="mdi mdi-delete"></span></button>'+
                '</td>'+
                '</tr>'
            );
        }

        $('#form_master_detail_bank input').val('');
        $('#form_master_detail_bank select').val('');
        IDs2 = '';
        stat = 'add';

    }

    function rSendsDetailBank2(data){
        if(data.type == 'success'){
            $('#rowKosongDetailBank').hide();
            $('#rowDetailBank'+IDs2+' .kolom1').html(data.nama_bank);
            $('#rowDetailBank'+IDs2+' .kolom2').html(data.nama_rekening);
            $('#rowDetailBank'+IDs2+' .kolom3').html(data.nomor_bank);
            $('#rowDetailBank'+IDs2+' .kolom4').html('<button type="button" class="btn btn-warning btn-custom6 btn-sm" title="Edit Data" onclick="editDetailBank(\''+IDs2+'\', \''+IDs+'\', \''+data.nama_rekening+'\', \''+data.nomor_bank+'\')"><span class="mdi mdi-grease-pencil"></span></button> <button type="button" class="btn btn-danger btn-custom5 btn-sm" title="Hapus Data" onclick="hapusDetailBank(\''+IDs2+'\')"><span class="mdi mdi-delete"></span></button>');
        }

        $('#form_master_detail_bank input').val('');
        $('#form_master_detail_bank select').val('');
        IDs2 = '';
        stat = 'add';

    }

    function rSendsDetailBank3(data) {
        jmlDataDetailBank = parseInt(jmlDataDetailBank)-1;
        $('#rowDetailBank'+data.id).remove();

        if(jmlDataDetailBank <= 0){
            $('#rowKosongDetailBank').show();
        }
    }

    function rSendsDetailKontak(data){
        if(data.type == 'success'){
            jmlDataDetailKontak = parseInt(jmlDataDetailKontak)+1;
            $('#rowKosongDetailKontak').hide();
            $('#tableDetailKontak tbody').append(
                '<tr id="rowDetailKontak'+data.id+'" class="rowDetailKontak">'+
                '<td class="kolom1">'+
                (data.tipe == 'email' ? 'Email' : (data.tipe == 'telepon' ? 'Telepon' : (data.tipe == 'fax' ? 'Fax' : '-')))+
                '</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="editDetailKontak(\''+data.id+'\', \''+data.tipe+'\', \''+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="hapusDetailKontak(\''+data.id+'\')"><span class="mdi mdi-delete"></span></button>'+
                '</td>'+
                '</tr>'
            );
        }

        $('#form_master_detail_kontak input').val('');
        $('#form_master_detail_kontak select').val('');
        IDs2 = '';
        stat = 'add';

    }

    function rSendsDetailKontak2(data){
        if(data.type == 'success'){
            $('#rowKosongDetailKontak').hide();
            $('#rowDetailKontak'+IDs2+' .kolom1').html((data.tipe == 'email' ? 'Email' : (data.tipe == 'telepon' ? 'Telepon' : (data.tipe == 'fax' ? 'Fax' : '-'))));
            $('#rowDetailKontak'+IDs2+' .kolom2').html(data.value);
            $('#rowDetailKontak'+IDs2+' .kolom3').html('<button type="button" class="btn btn-warning btn-custom6 btn-sm" title="Edit Data" onclick="editDetailKontak(\''+IDs2+'\', \''+data.tipe+'\', \''+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="hapusDetailKontak(\''+IDs2+'\')"><span class="mdi mdi-delete"></span></button>');
        }

        $('#form_master_detail_kontak input').val('');
        $('#form_master_detail_kontak select').val('');
        IDs2 = '';
        stat = 'add';

    }

    function rSendsDetailKontak3(data) {
        jmlDataDetailKontak = parseInt(jmlDataDetailKontak)-1;
        $('#rowDetailKontak'+data.id).remove();

        if(jmlDataDetailKontak <= 0){
            $('#rowKosongDetailKontak').show();
        }
    }

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

    function rReads(data) {
        swal.close();
        $('#modalMasterKontak').modal("show");
        $.each(data, function (idx, vals) {
            if(idx == 'alamat'){
                $('[name='+idx+']').html(vals);
            }else if(idx == 'limit_hutang'){
                var cekDesimal = vals - Math.floor(vals);
                if (cekDesimal > 0) {
                    ketJumlah = parseFloat(vals).toFixed(2);
                    ketJumlah = ketJumlah.replace(/\./g, ',');
                } else {
                    ketJumlah = vals.toString().split(".")[0];
                }

                $('[name='+idx+']').val(ketJumlah);
                $('#'+idx).mask('0.000.000.000.000.000.000.000.000.000', {reverse: true});
            }else if(idx == 'tipe'){
                $('[name='+idx+']').val(vals);
            }else{
                $('[name='+idx+']').val(vals);
            }
        })
    }

    function editDetailBank(id, id_master_bank, nama_rekening, nomor_bank) {
        stat = 'update';
        IDs2 = id;
        $('#form_master_detail_bank [name="id_master_bank"]').val(id_master_bank);
        $('#form_master_detail_bank [name="nama_rekening"]').val(nama_rekening);
        $('#form_master_detail_bank [name="nomor_bank"]').val(nomor_bank);
    }

    function editDetailKontak(id, tipe, value) {
        stat = 'update';
        IDs2 = id;
        $('#form_master_detail_kontak [name="tipe_detail_kontak"]').val(tipe);
        $('#form_master_detail_kontak [name="isian_tipe"]').val(value);
    }

    function hapusDetailBank(id) {
        var data = {
            id: id,
            _token: "{{ csrf_token() }}"
        };
        sendJson(URLs+"/delete-detail-bank", data, rSendsDetailBank3, '');
    }

    function hapusDetailKontak(id) {
        var data = {
            id: id,
            _token: "{{ csrf_token() }}"
        };
        sendJson(URLs+"/delete-detail-kontak", data, rSendsDetailKontak3, '');
    }

    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-pelanggan", data, rSends);
        })
    }

    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") {
                location.reload();
            }
        });
    }

    $(document).on('change', '.ubahStatus', function(e){
        let status = $(this).is(':checked') ? 'active' : 'inactive';

        const data = {
            id: $(this).data('id'),
            status: status,
            _token: "{{ csrf_token() }}"
        };
        sendJson(URLs+"/ubah-status", data, rSendsUbahStatus, '');
    });

    $('#modalMasterKontak').on('hidden.bs.modal', function(e){
        $('#form_master_kontak input').val('');
        $('#form_master_kontak textarea').html('');
        $('#form_master_kontak select').val('');

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

    $('#modalMasterDetailKontak').on('hidden.bs.modal', function(e){
        $('#form_master_detail_kontak input').val('');
        $('#form_master_detail_kontak select').val('');
        $('#rowKosongDetailKontak').show();
        $('.rowDetailKontak').remove();
        IDs = '';
        IDs2 = '';
        stat = '';
    });

    $('#modalMasterDetailBank').on('hidden.bs.modal', function(e){
        $('#form_master_detail_bank input').val('');
        $('#form_master_detail_bank select').val('');
        $('#rowKosongDetailBank').show();
        $('.rowDetailBank').remove();
        IDs = '';
        IDs2 = '';
        stat = '';
    });
  </script>
@endpush