@extends('layout.admin')

@section('content')
    <div class="row bg-title" style="background-color: white;">
        <!-- .page title -->
        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
            <h4 class="page-title">Lihat Kartu Pinjaman</h4> 
        </div>
        <!-- /.page title -->

        <!-- .breadcrumb -->
        <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
            <ol class="breadcrumb">
                <li><a href="javascript:void(0)">Pinjaman</a></li>
                <li class="active">Lihat Kartu Pinjaman</li>
            </ol>
        </div>
        <!-- /.breadcrumb -->
    </div>

    <!-- .row -->
    <div class="row">
        <div class="col-lg-12 col-sm-12 col-xs-12">
            <div class="white-box">
                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active">
                        <!-- .row -->
                        <div class="row">
                            <div class="col-sm-12">
                                {!! Form::open(['id'=>'form-penerimaan-angsuran', 'method'=>'POST', 'url'=>'#', 'class'=>'form-horizontal']) !!}
                                    <div class="col-lg-9">
                                        <div class="form-group">
                                            {!! Form::label('no_pinjaman', 'No. Pinjaman', ['class' => 'col-lg-2 col-sm-2 control-label']) !!}
                                            <div class="col-lg-10">
                                                 <div class="input-group">
                                                    {!! Form::text('no_pinjaman', null, ['class'=>'form-control', 'placeholder'=>'Inputkan No. Pinjaman',  'readonly'=>true]) !!}
                                                    <span class="input-group-btn">
                                                        <a id="buttonPinjaman" class="btn waves-effect waves-light btn-info" onclick="loadDataPinjaman()" alt="default" data-toggle="modal" data-target=".bs-example-modal-lg" class="model_img img-responsive">Cari</a>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <legend><b>Data Peminjam</b></legend>
                                        <div class="form-group">
                                            {!! Form::label('no_anggota', 'No. Anggota', ['class' => 'col-lg-2 col-sm-2 control-label']) !!}
                                            <div class="col-lg-10">
                                                {!! Form::text('no_anggota', null, ['class'=>'form-control', 'placeholder'=>'Inputkan No. Anggota',  'readonly'=>true]) !!}
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            {!! Form::label('nama', 'Nama', ['class' => 'col-lg-2 col-sm-2 control-label']) !!}
                                            <div class="col-lg-4">
                                                {!! Form::text('nama', null, ['class'=>'form-control', 'placeholder'=>'Inputkan Nama', 'readonly'=>true]) !!}
                                            </div>
                                            {!! Form::label('no_identitas', 'No. Identitas', ['class' => 'col-lg-2 col-sm-2 control-label']) !!}
                                            <div class="col-lg-4">
                                                {!! Form::text('no_identitas', null, ['class'=>'form-control', 'placeholder'=>'Inputkan No. Identitas', 'readonly'=>true]) !!}
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            {!! Form::label('alamat', 'Alamat', ['class' => 'col-lg-2 col-sm-2 control-label']) !!}
                                            <div class="col-lg-10">
                                                {!! Form::text('alamat', null, ['class'=>'form-control', 'placeholder'=>'Inputkan Alamat', 'readonly'=>true]) !!}
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            {!! Form::label('grup', 'Grup / Wilayah', ['class' => 'col-lg-2 col-sm-2 control-label']) !!}
                                            <div class="col-lg-10">
                                                {!! Form::text('grup', null, ['class'=>'form-control', 'placeholder'=>'Inputkan Grup / Wilayah', 'readonly'=>true]) !!}
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            {!! Form::label('status_anggota_id', 'Status Anggota', ['class' => 'col-lg-2 col-sm-2 control-label']) !!}
                                            <div class="col-lg-10">
                                                {!! Form::text('status_anggota_nama', null, ['class'=>'form-control', 'placeholder'=>'Inputkan Status Anggota', 'readonly'=>true, 'id'=>'status_anggota_nama']) !!}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-3">
                                        <div id="areaFoto">
                                            <div class="col-lg-12">
                                                {!! Form::label('foto', 'Foto Anggota', ['class' => 'control-label']) !!}
                                                {!! Form::file('foto', ['class'=>'dropify', 'accept'=>'.jpg', 'data-max-width'=>'300',
                                                        'data-default-file'=>null, 'data-show-remove'=>'false', 'disabled'=>true ]) !!}
                                            </div>
                                        </div>
                                        <div class="col-lg-12"><p></p></div>
                                        <div class="col-lg-12"><p></p></div>
                                        <div class="col-lg-12"><p></p></div>
                                        <div class="col-lg-12"><p></p></div>
                                    </div>

                                    <div class="col-lg-12">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <legend><b>Detail Pinjaman</b></legend>
                                            </div>
                                            
                                            <div class="form-group">
                                                <div class="col-lg-4">
                                                    {!! Form::label('daftar_pinjaman_id', 'Jenis Pinjaman', ['class' => 'control-label']) !!}
                                                    {!! Form::select('daftar_pinjaman_id', $var['jenis_pinjaman'],
                                                        null, ['class'=>'form-control', 'placeholder'=>'Pilih Jenis Pinjaman', 'disabled'=>true]) !!}
                                                </div>
                                                <div class="col-lg-4">
                                                    {!! Form::label('angsuran_ke_tempo', 'Angsuran ke / Tempo', ['class' => 'control-label']) !!}
                                                    <div class="input-group">
                                                        {!! Form::text('angsuran_ke', null, ['class'=>'form-control', 'placeholder'=>'Inputkan Angsuran Ke', 'id'=>'angsuran_ke', 'readonly'=>true]) !!}
                                                        <span class="input-group-addon bg-info b-0 text-white">/</span>
                                                        {!! Form::text('tempo_angsuran', null, ['class'=>'form-control', 'placeholder'=>'Inputkan Tempo Angsuran', 'id'=>'tempo_angsuran', 'readonly'=>true]) !!}
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                    {!! Form::label('status_pinjaman', 'Status Pinjaman', ['class' => 'control-label']) !!}
                                                    {!! Form::text('status_pinjaman', null, ['class'=>'form-control', 'placeholder'=>'Inputkan Status Pinjaman', 'readonly'=>true]) !!}
                                                </div>
                                            </div>
                                            
                                            <div class="form-group">
                                                <div class="col-lg-4">
                                                    {!! Form::label('plafond', 'Plafond', ['class' => 'control-label']) !!}
                                                    {!! Form::text('plafond', null, ['class'=>'form-control', 'placeholder'=>'Inputkan Plafond', 'readonly'=>true]) !!}
                                                </div>
                                                <div class="col-lg-2">
                                                    {!! Form::label('jasapct', 'Jasa', ['class' => 'control-label']) !!}
                                                    <div class="input-group">
                                                        {!! Form::text('jasapct', null, ['class'=>'form-control', 'placeholder'=>'Inputkan Jasa', 'readonly'=>true]) !!}
                                                        <span class="input-group-addon" id="basic-addon2">%</span>
                                                    </div>
                                                </div>
                                                <div class="col-lg-2">
                                                    {!! Form::label('jasa', 'Jasa', ['class' => 'control-label']) !!}
                                                    {!! Form::text('jasa', null, ['class'=>'form-control', 'placeholder'=>'Inputkan Jasa', 'readonly'=>true]) !!}
                                                </div>
                                                <div class="col-lg-4">
                                                    {!! Form::label('plafond_jasa', 'Plafond + Jasa', ['class' => 'control-label']) !!}
                                                    {!! Form::text('plafond_jasa', null, ['class'=>'form-control', 'placeholder'=>'Inputkan Plafond + Jasa',
                                                        'readonly'=>true]) !!}
                                                </div>
                                            </div>

                                            <div class="col-lg-12">
                                                <legend><b>Detail Angsuran</b></legend>
                                            </div>
                                            <div class="col-lg-12" style="margin-bottom:50px;">
                                                <div id="areaDetailAngsuran">
                                                    <h3 class="text-center"><b>Tidak ada data</b></h3>
                                                </div>
                                            </div>
                                            
                                            <div class="form-group mt-5">
                                                <div class="col-lg-4">
                                                    <legend><b>Total Angsuran Dibayarkan</b></legend>
                                                    {!! Form::label('sudah_angsur_pokok', 'Angsuran Pokok', ['class' => 'control-label']) !!}
                                                    {!! Form::text('sudah_angsur_pokok', null, ['class'=>'form-control', 'placeholder'=>'Inputkan Angsuran Pokok', 'readonly'=>true]) !!}
                                                </div>
                                                <div class="col-lg-4">
                                                    <legend><b>Selisih Angsuran Dibayarkan</b></legend>
                                                    {!! Form::label('selisih_angsuran_pokok', 'Angsuran Pokok', ['class' => 'control-label']) !!}
                                                    {!! Form::text('selisih_angsuran_pokok', null, ['class'=>'form-control', 'placeholder'=>'Inputkan Angsuran Pokok', 'readonly'=>true]) !!}
                                                </div>
                                                <div class="col-lg-4">
                                                    <legend><b>Sisa Angsur</b></legend>
                                                    {!! Form::label('sisa_pokok', 'Angsuran Pokok', ['class' => 'control-label']) !!}
                                                    {!! Form::text('sisa_pokok', null, ['class'=>'form-control', 'placeholder'=>'Inputkan Angsuran Pokok', 'readonly'=>true]) !!}
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-lg-4">
                                                    {!! Form::label('sudah_angsur_jasa', 'Angsuran Jasa', ['class' => 'control-label']) !!}
                                                    {!! Form::text('sudah_angsur_jasa', null, ['class'=>'form-control', 'placeholder'=>'Inputkan Angsuran Jasa', 'readonly'=>true]) !!}
                                                </div>
                                                <div class="col-lg-4">
                                                    {!! Form::label('selisih_angsuran_jasa', 'Angsuran Jasa', ['class' => 'control-label']) !!}
                                                    {!! Form::text('selisih_angsuran_jasa', null, ['class'=>'form-control', 'placeholder'=>'Inputkan Angsuran Jasa', 'readonly'=>true]) !!}
                                                </div>
                                                <div class="col-lg-4">
                                                    {!! Form::label('sisa_jasa', 'Angsuran Jasa', ['class' => 'control-label']) !!}
                                                    {!! Form::text('sisa_jasa', null, ['class'=>'form-control', 'placeholder'=>'Inputkan Angsuran Jasa', 'readonly'=>true]) !!}
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-lg-4">
                                                    {!! Form::label('sudah_angsur_denda', 'Denda', ['class' => 'control-label']) !!}
                                                    {!! Form::text('sudah_angsur_denda', null, ['class'=>'form-control', 'placeholder'=>'Inputkan Denda', 'readonly'=>true]) !!}
                                                </div>
                                                <div class="col-lg-4">
                                                    {!! Form::label('selisih_angsuran_denda', 'Denda', ['class' => 'control-label']) !!}
                                                    {!! Form::text('selisih_angsuran_denda', null, ['class'=>'form-control', 'placeholder'=>'Inputkan Denda', 'readonly'=>true]) !!}
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-lg-4">
                                                    {!! Form::label('sudah_angsur_total', 'Total', ['class' => 'control-label']) !!}
                                                    {!! Form::text('sudah_angsur_total', null, ['class'=>'form-control', 'placeholder'=>'Inputkan Total', 'readonly'=>true]) !!}
                                                </div>
                                                <div class="col-lg-4">
                                                    {!! Form::label('selisih_angsuran_total', 'Total', ['class' => 'control-label']) !!}
                                                    {!! Form::text('selisih_angsuran_total', null, ['class'=>'form-control', 'placeholder'=>'Inputkan Denda', 'readonly'=>true]) !!}
                                                </div>
                                                <div class="col-lg-4">
                                                    {!! Form::label('sisa_pokok_jasa', 'Total', ['class' => 'control-label']) !!}
                                                    {!! Form::text('sisa_pokok_jasa', null, ['class'=>'form-control', 'placeholder'=>'Inputkan Total', 'readonly'=>true]) !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {!! Form::close() !!}  
                            </div>
                        </div>
                        <!-- /.row -->
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- .row -->

    <!-- sample modal content -->
    <div class="">
        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myLargeModalLabel">Daftar Pinjaman</h4> </div>
                    <div class="modal-body">
                        <form method="GET" action="" id="formCariPinjaman">
                            <div class="input-group m-bot15">
                                <input name="cari" id="cariPinjaman" type="text" class="form-control" placeholder="Inputkan Pencarian">
                                <span class="input-group-btn">
                                    <button class="btn btn-info" type="submit">Cari</button>
                                </span>
                            </div>
                        </form>
                        <br />
                        <br />
                        <div id="areaModalPinjaman"></div>
                    </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
    </div>
    <!-- /.modal -->
@endsection

@section('javascript')
    <script type="text/javascript">
        function loadDataPinjaman(){
            $("#areaModalPinjaman").load('{!! url('/pinjaman/lihat-kartu-pinjaman/list-pinjaman') !!}');
        }

        function getDetailAngsuran(id) {
            var data = {
                id: id
            };

            $.ajax({
                method: 'post',
                url : '{{ url('/pinjaman/lihat-kartu-pinjaman/detail-angsuran') }}',
                data: data
            }).success(function (data) {
                //console.log(data);
                $('#areaDetailAngsuran').html(data.view);
            });
        }

        $(document).ready(function() { 

            var htmlEdit = '';

            $(".select2").select2();

            //-----------MODAL PINJAMAN------------------------
            $(document).on('click', '#paginationPinjaman .pagination a', function (e) {
                e.preventDefault();
                //console.log($(this).attr('href').split('page='));
                var page = $(this).attr('href').split('page=')[1];
                var cari = $('#cariPinjaman').val();

                $.ajax({
                    url : '{{ url('/pinjaman/lihat-kartu-pinjaman/list-pinjaman?page=') }}'+page+'&cari='+cari,
                }).success(function (data) {
                    //console.log(data);
                    $('#areaModalPinjaman').html(data);
                });
            });

            $(document).on('submit', '#formCariPinjaman', function (e) {
                e.preventDefault();
                var cari = $('#cariPinjaman').val();

                $.ajax({
                    url : '{{ url('/pinjaman/lihat-kartu-pinjaman/list-pinjaman?') }}'+'cari='+cari
                }).success(function (data) {
                    //console.log(data);
                    $('#areaModalPinjaman').html(data);
                });
            });

            $(document).on('click', '#buttonPilihPinjaman', function (e) {
                e.preventDefault();
                var id = $(this).attr('data-value');

                getDetailAngsuran(id);

                $.ajax({
                    method : 'post',
                    url : '{{ url('/pinjaman/lihat-kartu-pinjaman/list-pinjaman?') }}',
                    data : 'id='+id,
                }).success(function (data) {
                    var htmlSwk = '';
                    var htmlJasa = '';
                    var htmlStatus = '';

                    // console.log(data);
                    $("#cariPinjaman").val("");
                    $("#no_pinjaman").val(data.no_pinjaman);
                    $("#pinjaman_id").val(data.id);
                    $("#anggota_id").val(data.anggota.id);
                    $("#no_anggota").val(data.anggota.no_anggota);
                    $("#nama").val(data.anggota.nama);
                    $("#no_identitas").val(data.anggota.no_identitas);
                    $("#alamat").val(data.anggota.alamat);
                    $("#grup").val(data.anggota.grup?.nama);
                    $("#status_anggota_nama").val(data.anggota.status_anggota.nama);
                    $("#areaFoto").load('{!! url('/pinjaman/penerimaan-angsuran/area-foto?foto=') !!}'+data.anggota.foto);

                    $("#daftar_pinjaman_id").val(data.daftar_pinjaman_id);
                    $("#angsuran_ke").val(data.sudah_angsur_kali);
                    $("#tempo_angsuran").val(data.tempo_angsuran);
                    $("#status_pinjaman").val(data.list_status_pinjaman.nama);
                    $("#plafond").val(data.plafond);
                    $("#jasapct").val(data.jasapct);
                    $("#jasa").val(data.total_jasa);
                    $("#plafond_jasa").val(data.plafond_jasa);

                    $("#sudah_angsur_pokok").val(data.sudah_angsur_pokok);
                    $("#sudah_angsur_jasa").val(data.sudah_angsur_jasa);
                    $("#sudah_angsur_denda").val(data.sudah_angsur_denda);
                    $("#sudah_angsur_total").val(data.sudah_angsur_total);

                    $("#selisih_angsuran_pokok").val(data.selisih_angsuran_pokok);
                    $("#selisih_angsuran_jasa").val(data.selisih_angsuran_jasa);
                    $("#selisih_angsuran_denda").val(data.selisih_angsuran_denda);
                    $("#selisih_angsuran_total").val(data.selisih_angsuran_total);

                    $("#sisa_pokok").val(data.sisa_pokok);
                    $("#sisa_jasa").val(data.sisa_jasa);
                    $("#sisa_pokok_jasa").val(data.sisa_pokok_jasa);
                });
            });

            // Basic Upload
            $('#foto').dropify({
                messages: {
                    'default': 'Drag dan drop foto kesini',
                    'replace': 'Drag dan drop atau klik untuk mengganti',
                    'remove':  'Hapus',
                    'error':   'Ooops, format salah'
                },
                error: {
                    'maxWidth': 'Ukuran gambar maksimal 300 x 300 piksel.',
                }
            });
        });
          
    </script>
@endsection