@extends('layouts.app')

@section('content')
<?php 
    $customer_info = Session::get('customer_info');
?>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <a href="{{ url('/pelanggan') }}"><i class="fas fa-arrow-left"></i> Kembali</a>
            <h3 class="text-center text-uppercase">maklumat pelanggan</h3>
            
            <div class="form-group row col-12">
                <div class="col-6">
                    <div class="form-group row">
                        <div class="col-4">
                            No Kad Pengenalan
                        </div>
                        <div class="col-8">
                            <input type="text" class="form-control" name="noic" id="noic" readonly value="{{ $customer_info['kpbaru'] }}">
                        </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="no_pelanggan" readonly id="no_pelanggan" value="{{ $customer_info['nopelanggan'] }}">
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-group row">
                        <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">
                            Alamat
                        </div>
                        <div class="col-8">
                            <textarea style="resize:none" class="form-control" name="alamat" id="alamat" cols="30" rows="2" readonly>{{ $customer_info['alamat1'].','.$customer_info['alamat2'].','.$customer_info['alamat3'].','.$customer_info['alamat4'] }}</textarea>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-group row">
                        <div class="col-4">
                            No Telefon
                        </div>
                        <div class="col-8">
                            <input type="text" class="form-control" readonly name="no_phone" id="no_phone" value="{{ $customer_info['telefon'] }}">
                        </div>
                    </div>
                </div>
                <div class="col-12 mt-3 form-group row">
                    <div class="btn-group btn-group-toggle col-6" data-toggle="buttons">
                        <label class="btn btn-primary">
                            <input type="radio" name="options" id="option1" value="belum_tebus" autocomplete="off" checked> BELUM TEBUS
                        </label>
                        <label class="btn btn-primary">
                            <input type="radio" name="options" id="option2" value="sudah_tebus" autocomplete="off"> SUDAH TEBUS
                        </label>
                        <label class="btn btn-primary">
                            <input type="radio" name="options" id="option3" value="lelong" autocomplete="off"> LELONG
                        </label>
                    </div>
                    <div class="col-6 text-right">
                        <a class="button btn btn-primary" href="{{ route('gadaian',['noic'=>$customer_info['kpbaru'] ]) }}">DAFTAR GADAI</a>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <table id="myTable">
                        <thead>
                            <tr>
                                <th>Bil</th>
                                <th>No Rujukan</th>
                                <th>Tarikh Gadai</th>
                                <th>Pembiayaan</th>
                                <th>Nilai Marhun</th>
                                <th>Tempoh</th>
                                <th>Keuntungan</th>
                                <th>Tarikh Matang</th>
                                <th>Margin</th>
                                <th>Kos Keuntungan</th>
                                <th>Hapus Gadai</th>
                                <!-- <th>Tebus/Upah</th> -->
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var tablegadai = $('#myTable').DataTable({
        "scrollX": true
    });

    const formatter = new Intl.NumberFormat('en-US', {
        minimumFractionDigits: 2
    })
    function gadaiTable(data){
        var counter = 1;
        tablegadai.clear().draw();
        $.each(data,function(index,gadai){
            $.each(gadai, function(index,gadai_detail){
                tablegadai.row.add([
                    counter,
                    gadai_detail['norujukan'],
                    gadai_detail['t_gadai'],
                    'RM '+formatter.format(gadai_detail['pinjaman']),
                    'RM '+ formatter.format(gadai_detail['nilaimarhun']),
                    gadai_detail['jbg'],
                    'RM '+ formatter.format((gadai_detail['kadarupah']/100)*gadai_detail['pinjaman']*gadai_detail['tempoh']),
                    gadai_detail['t_matang'],
                    (((Number(gadai_detail['pinjaman'])/Number(gadai_detail['nilaimarhun']))*100).toFixed(2)).toLocaleString("en-GB") + '%',
                    'RM ' + formatter.format((Number(gadai_detail['kadarupah'])*Number(gadai_detail['pinjaman'])).toFixed(2)),
                    ''
                ]).draw();

                counter = counter + 1;
            });
        });
    }
    $(document).ready( function () {
        var noic = $("#noic").val();
        $.ajax({
            method:"GET",
            url:"http://localhost:8000/api/customers/"+noic+"/gadai/belum_tebus",
            success: function(data){
                gadaiTable(data);
            }
        });
        $("input[name='options']").click(function(){
            gadaiOptionButton(noic)
        });
    } );

    function gadaiOptionButton(noic){
        tablegadai.clear().draw();
        if($("input[name='options']:checked").val() == 'belum_tebus'){
            // console.log(noic);
            $.ajax({
                method:"GET",
                url:"http://localhost:8000/api/customers/"+noic+"/gadai/belum_tebus",
                success: function(data){
                    gadaiTable(data);
                }
            });
        }
        if($("input[name='options']:checked").val() == 'sudah_tebus'){
            $.ajax({
                method:"GET",
                url:"http://localhost:8000/api/customers/"+noic+"/gadai/sudah_tebus",
                success: function(data){
                    gadaiTable(data);
                }
            });
        }
        if($("input[name='options']:checked").val() == 'lelong'){
            $.ajax({
                method:"GET",
                url:"http://localhost:8000/api/customers/"+noic+"/gadai/lelong",
                success: function(data){
                    gadaiTable(data);
                }
            });
        }
    }
</script>
@endsection