@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12 col-lg-12">
            <h3 class="text-center text-uppercase">gadaian</h3>
            <div class="form-group row col-12">
                <div class="col-6">
                    <div class="form-group row">
                        <input type="hidden" name="kodcaw" id="kodcaw" value="{{$cawangan_info['kodcaw']}}">
                        <input type="hidden" name="nokp" id="nokp" value="{{ $customer_info['kpbaru'] }}">
                        <input type="hidden" name="jantina" id="jantina" value="{{ $customer_info['jantina'] }}">
                        <div class="col-4">
                            Nama
                        </div>
                        <div class="col-8">
                            <input type="text" class="form-control" name="name" id="name" readonly value="{{ $customer_info['nama'] }}">
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-group row">
                        <div class="col-4">
                            No Pelanggan
                        </div>
                        <div class="col-8">
                        <input type="text" class="form-control" name="nopelanggan" readonly id="nopelanggan" value="{{ $customer_info['nopelanggan'] }}">
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-group row">
                        <div class="col-4">
                            No Rujukan
                        </div>
                        <div class="col-8">
                            <input type="text" class="form-control" name="norujukan" id="norujukan" readonly value="{{ $norujukan }}">
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-group row">
                        <div class="col-4">
                            Jumlah Pinjaman Semasa
                        </div>
                        <div class="col-8">
                            <input type="text" class="form-control" name="pinjaman_semasa" id="pinjaman_semasa" readonly value="">
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-group row">
                        <div class="col-4">
                            Limit Pinjaman Semasa
                        </div>
                        <div class="col-8">
                            <input type="text" class="form-control" name="limit_pinjaman" id="limit_pinjaman" readonly value="{{ $limit_pinjaman_semasa }}">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 text-right mb-2">
                <button type="button" style="margin:auto" class="btn btn-primary" data-toggle="modal" data-target="#daftar_marhun">
                            DAFTAR MARHUN
                </button>
            </div>
            <div class="card">
                <div class="card-body">
                    <table class="table" id="myTable">
                        <thead>
                            <tr>
                                <th>Bil</th>
                                <th>Marhun</th>
                                <th>Nilai Marhun</th>
                                <th>Karat</th>
                                <th>Berat</th>
                                <th>Nota</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <form action="">
                        <div class="col-12 form-group row">
                            <div class="col-4">
                                <div class="form-group row">
                                    <div class="col-5">
                                        Pinjaman Max
                                    </div>
                                    <div class="col-7 input-group">
                                        <input type="text" class="form-control" readonly name="pinjaman_max_teller" id="pinjaman_max_teller">
                                        <div class="input-group-append">
                                            <span class="input-group-text span-pinjaman-max"></span>
                                        </div>
                                    </div>
                                </diV>
                            </div>
                            <div class="col-3">
                                <div class="form-group row">
                                    <div class="col-6">
                                        Upah Sebulan
                                    </div>
                                    <div class="col-6">
                                        <input type="text" class="form-control" readonly name="upah_sebulan" id="upah_sebulan">
                                    </div>
                                </diV>
                            </div>
                            <div class="col-5">
                                <div class="form-group row">
                                </diV>
                            </div>
                            <div class="col-4">
                                <div class="form-group row">
                                    <div class="col-5">
                                        Pinjaman
                                    </div>
                                    <div class="col-7 input-group">
                                        <input type="text" class="form-control" name="pinjaman" id="pinjaman">
                                        <div class="input-group-append">
                                            <span class="input-group-text span-pinjaman">0 %</span>
                                        </div>
                                    </div>
                                </diV>
                            </div>
                            <div class="col-3">
                                <div class="form-group row">
                                    <div class="col-6">
                                        Upah 6 Bulan
                                    </div>
                                    <div class="col-6">
                                        <input type="text" class="form-control" readonly name="upah_6bln" id="upah_6bln">
                                    </div>
                                </diV>
                            </div>
                            <div class="col-5">
                                <div class="form-group row">
                                    <div class="col-6">
                                        Pinjaman Max Pelulus
                                    </div>
                                    <div class="col-6 input-group">
                                        <input type="text" class="form-control" readonly name="pinjaman_max_pelulus" id="pinjaman_max_pelulus">
                                        <div class="input-group-append">
                                            <span class="input-group-text span-pinjaman-max-pelulus"></span>
                                        </div>
                                    </div>
                                </diV>
                            </div>
                            <div class="col-12">
                                <input type="button" class="float-right btn btn-danger mr-2" value="BATAL">
                                <input type="button" name="terima_gadai" id="terima_gadai" class="float-right btn btn-primary mr-2" value="TERIMA">
                                <input type="button" class="float-right btn btn-primary mr-2" value="TAMBAH GADAI">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- modal daftar marhun-->
            <div class="modal fade" id="daftar_marhun" tabindex="-1" data-backdrop="static"  aria-labelledby="ModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="ModalLabel">Daftar Marhun</h5>
                        </div>
                        <div class="modal-body">
                            <form action="" id="maklumat_marhun" method="post">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group row">
                                            <input type="hidden" name="kodcaw" id="kodcaw" value="">
                                            <div class="col-md-4">No Rujukan</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="norujukan_marhun" id="norujukan_marhun" value="{{ $norujukan }}"></div>
                                            <div class="col-md-4">Marhun</div>
                                            <div class="col-md-8">
                                                <select class="form-control" name="marhun" id="marhun">
                                                    <option disabled selected value> -- Pilih Jenis Marhun -- </option>
                                                </select>
                                            </div>
                                            <div class="col-md-12">
                                            <div class="form-group">
                                                <label>Nota</label>
                                                <select name="nota" id="nota" class="select2 form-control" multiple="multiple" data-placeholder="Nota Tambahan" style="width: 100%;">
                                                    <option>Rosak</option>
                                                    <option>Putus</option>
                                                    <option>Patah</option>
                                                    <option>Permata</option>
                                                    <option>Sebelah</option>
                                                </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4">Karat</div>
                                            <div class="col-md-8">
                                                <select class="form-control" name="karat" id="karat">
                                                    <option disabled selected value> -- Pilih Karat -- </option>
                                                </select>
                                            </div>
                                            <div class="col-md-4">Berat</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="berat_emas" id="berat_emas"></div>
                                            <div class="col-md-4">Harga</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="harga" id="harga" readonly></div>
                                            <div class="col-md-4">Nilai Marhun</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="nilai_marhun" id="nilai_marhun" readonly></div>
                                            <div class="col-md-4">Bilangan Marhun</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="bilangan_marhun" id="bilangan_marhun" readonly></div>
                                            <div class="col-md-4">Jumlah Nilai Marhun</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="jumlah_nilai_marhun" id="jumlah_nilai_marhun" readonly></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <img style="width:200px" src="{{ asset('img/logo_arrahn_baru.png') }}" alt="">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group row" style="margin-right:auto;margin-left:auto">
                                                <button class="btn btn-primary mr-2">KAMERA</button>
                                                <button class="btn btn-primary">MUAT NAIK</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        </div>
                        <div class="modal-footer">
                            <div class="form-group row">
                                <input class="btn btn-primary mr-2" type="button" name="tambah_marhun" id="tambah_marhun" value="Tambah">
                                <input class="btn btn-primary mr-2" type="button" name="terima_marhun" id="terima_marhun" value="Terima">
                                <button type="button" class="btn btn-danger" name="batal_marhun" id="batal_marhun">Batal</button>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function disableF5(e) { if ((e.which || e.keyCode) == 116) e.preventDefault(); };
    $(document).ready( function () {
        $(document).on("keydown", disableF5);
        var norujukan = $('#norujukan').val();
        getMarhun(norujukan);

        $.ajax({
            method:'GET',
            url:'http://localhost:8000/api/jemas',
            success:function(data){
                $.each(data,function(index,jemas){
                    $("#marhun").append(new Option(jemas['descpt'], jemas['marhun']));
                })
            }
        });

        $.ajax({
            method:'GET',
            url:'http://localhost:8000/api/harga_emas',
            success:function(data){
                $.each(data,function(index,harga_emas){
                    var text = harga_emas['karat']+' - '+harga_emas['keterangan'];
                    $("#karat").append(new Option(text, harga_emas['karat']));
                })
            }
        });
    });

    function getMarhun(norujukan){
        $.ajax({
            method:'GET',
            url:'http://localhost:8000/api/marhun/'+norujukan,
            success:function(data){
                marhuntable(data);
            }
        });
    }

    $('#karat').change(function(){
        var karat = this.value;
        karat = karat.replace(/\./g,'-');
        var berat = $('#berat_emas').val();
        getHargaEmas(karat,berat)
    });

    $('#berat_emas').change(function(){
        var berat = this.value;
        var karat = $('#karat').val();
        karat = karat.replace(/\./g,'-');
        getHargaEmas(karat,berat)
    })

    $('#batal_marhun').click(function(){
        
        $('#nota').val('').trigger("change");
        $('#marhun').val(0);
        $('#karat').val(0);
        $('#berat_emas').val("");
        $('#harga').val("");
        $('#nilai_marhun').val("");
        $('#daftar_marhun').modal('hide');
    })

    function getHargaEmas(karat,berat){
        $.ajax({
            method:'GET',
            url:'http://localhost:8000/api/harga_emas/'+karat,
            success:function(data){
                
                var nilai_marhun = data['harga2'] * berat;
                $('#harga').val(formatter.format(data['harga2']));
                $('#nilai_marhun').val(formatter.format(nilai_marhun));
            }
        })
    }

    var tablemarhun = $('#myTable').DataTable({
        "ordering": false
    });

    $(".select2").select2({
        dropdownParent: $('#daftar_marhun'),
        tags: true,
        tokenSeparators: [',', ' '],
        allowClear: true,
        closeOnSelect: false
    });

    var total_nilai_marhun = 0;
    var total_berat = 0;
    var kadarupah = 0;
    var marhun_details = '';
    var jumlah_marhun = 0;
    var jumlah_nilai_marhun = 0;
    function marhuntable(data){
        var counter = 1;
        total_nilai_marhun = 0;
        total_berat = 0;
        tablemarhun.clear().draw();
        $.each(data,function(index,marhun){
            $.each(marhun,function(index,marhun_detail){
                total_nilai_marhun = total_nilai_marhun + Number(marhun_detail['n_marhun']);
                total_berat = total_berat + Number(marhun_detail['berat']);
                marhun_details = marhun_details + marhun_detail['bil'] + " " + marhun_detail['marhun'] +",";
                tablemarhun.row.add([
                    counter,
                    marhun_detail['marhun'],
                    'RM ' + formatter.format(marhun_detail['n_marhun']),
                    marhun_detail['karat'],
                    formatter.format(marhun_detail['berat']),
                    marhun_detail['nota']
                ]).draw();
                counter = counter + 1;
            });
        });
        var pinjaman_pelulus = 0;
        var pinjaman_teller = 0;
        $.ajax({
            method:'GET',
            url:'http://localhost:8000/api/maxpinjaman',
            success:function(data){
                $.each(data,function(index,pinjaman){
                    if(pinjaman['user_type'] == 'teller'){
                        pinjaman_teller = Number(pinjaman['max']);
                    }
                    if(pinjaman['user_type'] == 'ppc'){
                        pinjaman_pelulus = Number(pinjaman['max']);
                    }
                });
                $('.span-pinjaman-max-pelulus').text(pinjaman_pelulus + ' %');
                $('.span-pinjaman-max').text(pinjaman_teller + ' %');
            }
        });
        var max_teller = total_nilai_marhun * (pinjaman_teller/100);
        var max_pelulus = total_nilai_marhun * (pinjaman_pelulus/100);

        $('#pinjaman_max_teller').val(max_teller.toFixed(2));
        $('#pinjaman_max_pelulus').val(max_pelulus.toFixed(2));
    }

    $('#pinjaman').change(function(){
        var pinjaman = Number(this.value);

        if(pinjaman > 0 && pinjaman < 401){
            kadarupah = 1.25/100;
        }else if(pinjaman >= 401 && pinjaman < 2001){
            kadarupah = 1.5/100;
        }else if(pinjaman >= 2001 ){
            kadarupah = 1.7/100;
        }

        var upah_sebulan = pinjaman * kadarupah;
        var upah_6bln = upah_sebulan * 6;

        percent_pinjaman = (Number(pinjaman)/Number(total_nilai_marhun))*100;

        $('.span-pinjaman').text(percent_pinjaman.toFixed(2) + ' %');
        $('#upah_sebulan').val(formatter.format(upah_sebulan.toFixed(2)));
        $('#upah_6bln').val(formatter.format(upah_6bln.toFixed(2)));
    });

    const formatter = new Intl.NumberFormat('en-US', {
        minimumFractionDigits: 2
    });

    $('#terima_marhun').click(function(){
        var kodcaw = $('#kodcaw').val();
        var norujukan = $('#norujukan').val();
        var marhun = $('#marhun').val();
        var karat = $('#karat').val();
        var berat_emas = $('#berat_emas').val();
        var harga = $('#harga').val();
        var nilaimarhun = $('#nilai_marhun').val();
        var nota_array = $('#nota').val();

        if(marhun == null && karat == null && berat_emas == null){
            $('#daftar_marhun').modal('hide');
        }
        else{
            $.ajax({
            method:'POST',
            url:'http://localhost:8000/api/marhun/'+kodcaw,
            dataType:'json',
            data:{
                'norujukan': norujukan,
                'marhun' : marhun,
                'nota':nota,
                'karat' : karat,
                'berat_emas' :berat_emas,
                'harga' : harga,
                'nilai_marhun' : nilai_marhun
            },
            success:function(data){
                alert('Tambah Marhun Berjaya');
                $('#nota').val('').trigger("change");
                $('#marhun').val(0);
                $('#karat').val(0);
                $('#berat_emas').val("");
                $('#harga').val("");
                $('#nilai_marhun').val("");
                
                jumlah_marhun += 1;
                jumlah_nilai_marhun += Number(nilai_marhun);
                $('#bilangan_marhun').val(jumlah_marhun);
                $('#jumlah_nilai_marhun').val(jumlah_nilai_marhun);
                getMarhun(norujukan);
                $('#daftar_marhun').modal('hide');
            },
            error: function(xhRequest, ErrorText, thrownError){
                alert('Tambah Marhun Tidak Berjaya');
                console.log(xhRequest);
            }
        });
        }
    });

    $('#tambah_marhun').click(function(){
        var kodcaw = $('#kodcaw').val();
        var norujukan = $('#norujukan').val();
        var marhun = $('#marhun').val();
        var karat = $('#karat').val();
        var berat_emas = $('#berat_emas').val();
        var harga = $('#harga').val();
        var nilaimarhun = $('#nilai_marhun').val();
        var nilai_marhun = Number(nilaimarhun.replace(/[^0-9.-]+/g,""));
        var nota_array = $('#nota').val();
        var nota = nota_array.toString();

        $.ajax({
            method:'POST',
            url:'http://localhost:8000/api/marhun/'+kodcaw,
            dataType:'json',
            data:{
                'norujukan': norujukan,
                'marhun' : marhun,
                'nota':nota,
                'karat' : karat,
                'berat_emas' :berat_emas,
                'harga' : harga,
                'nilai_marhun' : nilai_marhun
            },
            success:function(data){
                alert('Tambah Marhun Berjaya');
                $('#nota').val('').trigger("change");
                $('#marhun').val(0);
                $('#karat').val(0);
                $('#berat_emas').val("");
                $('#harga').val("");
                $('#nilai_marhun').val("");
                
                jumlah_marhun += 1;
                jumlah_nilai_marhun += Number(nilai_marhun);
                $('#bilangan_marhun').val(jumlah_marhun);
                $('#jumlah_nilai_marhun').val(formatter.format(jumlah_nilai_marhun));
                getMarhun(norujukan);
            },
            error: function(xhRequest, ErrorText, thrownError){
                alert('Tambah Marhun Tidak Berjaya');
                console.log(xhRequest);
            }
        });
    })

    $('#terima_gadai').click(function(){
        var kodcaw = $('#kodcaw').val();
        var nokp = $('#nokp').val();
        var jantina = $('#jantina').val();
        var bangsa = $('#bangsa').val();
        var nopelanggan = $('#nopelanggan').val();
        var norujukan = $('#norujukan').val();
        var pinjaman = Number($('#pinjaman').val());

        var percentpinj = Number(pinjaman)/Number(total_nilai_marhun);
        // console.log(kodcaw,nokp,jantina,bangsa,nopelanggan,norujukan,pinjaman,percentpinj);
        $.ajax({
            method:'PUT',
            url: 'http://localhost:8000/api/gadai/norujukan/'+kodcaw+'/'+norujukan,
            dataType:'json',
            data:{
                'kodcaw': kodcaw,
                'nilaimarhun' : total_nilai_marhun.toFixed(2),
                'berat' : total_berat,
                'pinjaman' : pinjaman.toFixed(2),
                'kadarupah' : kadarupah,
                'marhun' : marhun_details,
                'jantina' : jantina,
                'bangsa' : bangsa,
                'percentpinj' : percentpinj.toFixed(2)
            },
            success:function(data){
                alert('Gadai Berjaya');
            },
            error: function(xhRequest, ErrorText, thrownError){
                alert('Gadai Tidak Berjaya');
                console.log(xhRequest);
            }
        });
    })
</script>
@endsection