@extends('layouts.app')
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Maklumat Pelaggan</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class='row form-group'>
            <div class='col-md-6'>
                <div class='form-group row col-md-12'>
                    <div class='col-md-5'>
                        Nama
                    </div>
                    <div class='col-md-7'>
                        <input type="text" readonly name='' id='' value="{{ $customer_info['nama'] }}" class='form-control'>
                    </div>
                </div>
                <div class='form-group row col-md-12'>
                    <div class='col-md-5'>
                        No KP
                    </div>
                    <div class='col-md-7'>
                        <input type="text" readonly name='' id='' value="{{ $customer_info['kpbaru'] }}" class='form-control'>
                    </div>
                </div>
                <div class='form-group row col-md-12'>
                    <div class='col-md-5'>
                        No Pelanggan
                    </div>
                    <div class='col-md-7'>
                        <input type="text" readonly name='' id='' value="{{ $customer_info['nopelanggan'] }}" class='form-control'>
                    </div>
                </div>
                <div class='form-group row col-md-12'>
                    <div class='col-md-5'>
                        No Telefon 1
                    </div>
                    <div class='col-md-7'>
                        <input type="text" readonly name='' id='' value="{{ $customer_info['telefon'] }}" class='form-control'>
                    </div>
                </div>
                <div class='form-group row col-md-12'>
                    <div class='col-md-5'>
                        No Telefon 2
                    </div>
                    <div class='col-md-7'>
                        <input type="text" readonly name='' id='' value="{{ $customer_info['telefon2'] }}" class='form-control'>
                    </div>
                </div>
            </div>
            <div class='col-md-6'>
                <div class='form-group row col-md-12'>
                    <div class='col-md-4'>
                        Alamat
                    </div>
                    <div class='col-md-8'>
                        <textarea style="resize:none" name="alamat" id="alamat" cols="30" rows="3" readonly class='form-control'>{{ $customer_info['alamat1'] }}</textarea>
                    </div>
                </div>
                <div class='form-group row col-md-12'>
                    <div class='col-md-4'>
                        Poskod
                    </div>
                    <div class='col-md-8'>
                        <input type="text" readonly name='' id='' value="{{ $customer_info['poskod'] }}" class='form-control'>
                    </div>
                </div>
                <div class='form-group row col-md-12'>
                    <div class='col-md-4'>
                        Daerah
                    </div>
                    <div class='col-md-8'>
                        <input type="text" readonly name='' id='' value="{{ $customer_info['koddaerah'] }}" class='form-control'>
                    </div>
                </div>
                <div class='form-group row col-md-12'>
                    <div class='col-md-4'>
                        Negeri
                    </div>
                    <div class='col-md-8'>
                        <input type="text" readonly name='' id='' value="{{ $customer_info['kodnegeri'] }}" class='form-control'>
                    </div>
                </div>
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
@section('content')
<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-md-12">
                <div class="col-md-6">
                    <div class="form-group row">
                        <div class="col-md-4">
                            Nama
                        </div>
                        <div class="col-md-8">
                            <input type="text" class="form-control" name="name" id="name" readonly value="{{ $customer_info['nama'] }}">
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group row">
                        <div class="col-md-4">
                            No Kad Pengenalan
                        </div>
                        <div class="col-md-8">
                            <input type="text" class="form-control" name="noic" id="noic" readonly value="{{ $customer_info['kpbaru'] }}">
                        </div>
                    </div>
                </div>
                
                <div class="col-md-12 mt-md-3 justify-content-between form-group row">
                    <div class="btn-group btn-group-toggle col-md-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-md-3'>
                        <button class='btn btn-primary' data-toggle="modal" data-target="#exampleModal">Maklumat Pelanggan</button>
                    </div>
                    <div class="col-md-3 text-right">
                        <a class="button btn btn-primary" style="margin-right:-50px" 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 api_url = "<?php echo $api_url ?>";

    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){
                var keuntungan_semasa = (gadai_detail['kadarupah']/100)*gadai_detail['bakipjm']*gadai_detail['jbg'];
                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(keuntungan_semasa),
                    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: api_url + "/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: api_url + "/api/customers/"+noic+"/gadai/belum_tebus",
                success: function(data){
                    gadaiTable(data);
                }
            });
        }
        if($("input[name='options']:checked").val() == 'sudah_tebus'){
            $.ajax({
                method:"GET",
                url: api_url + "/api/customers/"+noic+"/gadai/sudah_tebus",
                success: function(data){
                    gadaiTable(data);
                }
            });
        }
        if($("input[name='options']:checked").val() == 'lelong'){
            $.ajax({
                method:"GET",
                url: api_url + "/api/customers/"+noic+"/gadai/lelong",
                success: function(data){
                    gadaiTable(data);
                }
            });
        }
    }
</script>
@endsection