@extends('main')
@section('title', '首頁')
@section('main_content')
            <!-- Recent Sales Start -->
            <div class="container-fluid pt-4 px-4">
                <div class="col-sm-12 col-xl-6">
                    <div class="bg-light rounded h-100 p-4">
                        <h6 class="mb-4">查詢</h6>
                        <form>
                            <div class="row mb-3">
                                <label for="search_date" class="col-sm-2 col-form-label">姓名</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="search_name" value="{{$search_name}}">
                                </div>
                                <label for="search_date" class="col-sm-2 col-form-label">業務</label>
                                <div class="col-sm-10">
                                    <select class="form-select form-select-sm mb-3" aria-label=".form-select-sm example" name="search_business" id="search_business">
                                        <option value="0"
                                            @if ($search_business==0)
                                                selected
                                            @endif >全部</option>
                                        @foreach ($agentlines as $agentline )
                                            <option value="{{ $agentline->id}}"
                                            @if ($search_business==$agentline->id)
                                                selected
                                            @endif >{{ $agentline->agent}}-{{ $agentline->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <label for="search_date" class="col-sm-2 col-form-label">日期</label>
                                <div class="col-sm-10">
                                    <input class="form-check-input" type="checkbox" role="switch"
                                    id="flexSwitchCheckDefault">
                                    <label class="form-check-label" for="flexSwitchCheckDefault">依日期查詢</label>
                                    <input type="date" class="form-control" id="search_date" value="{{$search_date}}" onfocus="this.showPicker()">
                                </div>
                            </div>
                            <button type="button" class="btn btn-primary" onclick="filterColumn()">查詢</button>
                        </form>
                    </div>
                </div>
            </div>

            <div class="container-fluid pt-4 px-4">
                <div class="bg-light text-center rounded p-4">
                    <div class="d-flex align-items-center justify-content-between mb-4">
                        <h6 class="mb-0">當日報表</h6>
                        {{-- <a href="/customer/addloan">創建貸款</a> --}}
                    </div>
                    <div class="table-responsive" style="background-color: #FFF">
                        <table id="tablelist2" class="display" style="width:100%">
                            <thead>
                                <tr>
                                    <th>日期</th>
                                    <th>繳款ID</th>
                                    <th>業務</th>
                                    <th>顧客</th>
                                    <th>貸款起始日</th>
                                    <th>貸款結束日</th>
                                    <th>出金</th>
                                    <th>票面</th>
                                    <th>每日應收</th>
                                    <th>應收(當日+未收金額)</th>
                                    <th>收款方式</th>
                                    <th>當日實收金額</th>
                                    <th>已收金額</th>
                                    <th>未收金額</th>
                                    <th>貸款餘額</th>
                                    <th>未收率</th>
                                    <th>備註</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th>Totals</th>
                                    <th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
            <!-- Recent Sales End -->
@endsection
@section('footer_js')
<script>
    $(document).ready(function(){
        new DataTable('#tablelist2', {
            'dom': 'lrtip',
            ajax: {
                url: '/installment2/list',
                type: 'GET',
            },
            columns: [
                /* { data: null, orderable: false, searchable: false, render: DataTable.render.select()}, */
                { data: 'paydate' },
                { data: 'RowIdcode' },
                { data: 'agentline' },
                {
                    render: function (data, type, row) {
                        return '<a href="/customer/edit/'+ row['mem_uid'] +'" target="_blank">'+row['codeid']+'</a><br />'+row['name'] // 這邊是加連結
                    }
                },
                { data: 'loan_start_date' },
                { data: 'loan_end_date' },
                /* { data: 'name', name: 'name',
                    fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                        if(oData.name) {
                            $(nTd).html("<a href='/customer/edit/"+oData.mem_uid+"'>"+oData.name+"</a>");
                        }
                    }
                }, */
                { data: 'loan_out_amount' },
                { data: 'loan_amount' },
                { data: 'payable' },
                { data: 'payable_ok' },
                {
                    render: function (data, type, row) {
                        var a = '';
                        if (row['paystatus']!="0") {
                            if (row['paystatus']=="1") {
                                a = a + '三方';
                            }else {
                                a = a + '現金';
                            }
                        }else {
                            a = a + '-';
                        }
                        return a // 這邊是加連結
                    }
                },
                { data: 'payamount' },
                { data: 'payamount2' },/*已收金額*/
                { data: 'payamount_payoutamount' }, /*未收款*/
                { data: 'payed_amount' }, /*貸款餘額*/
                { data: 'payamount_payoutamount_per' }, /*未收率*/
                { data: 'remark' },
            ],
            footerCallback: function (row, data, start, end, display) {
                var api = this.api(), data;
                var intVal = function (i) {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '') * 1 :
                        typeof i === 'number' ? i : 0;

                };
                for (var vv=6;vv<=14;vv++) {
                    if (vv==10) {
                        continue;
                    }
                    //当前页统计
                    total = api.column(vv).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0);
                    //全部统计
                    pageTotal = api.column(vv, { page: 'current' }).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0);
                    $(api.column(vv).footer()).html(pageTotal);
                }
            },
            order: [[1, 'asc']],
            processing: true,
            serverSide: true,
        });
        filterColumn();
        /* $('#example tbody').on('click', '.name', function () {
        var row = $(this).closest('tr');

        var data = table.row( row ).data().name;
        console.log(data);
        });


        $('#example tbody').on('click', '.position', function () {
        var row = $(this).closest('tr');

        var data = table.row( row ).data().position;
        console.log(data);
        });*/
    });

    function filterColumn () {
        var str = '';
         var selectid = 0;
         if ($('#flexSwitchCheckDefault').is(":checked")) {
            selectid = 1;
         }
         var data={};
         data["search_name"] = $('#search_name').val();
         data["search_business"] = $('#search_business').find('option:selected').val();
         data["selectdate"] = selectid;
         data["search_date"] = $('#search_date').val();
         var str =JSON.stringify(data);
         //alert(selectid);return;
         //str = $('#search_name').val()+"|"+$('#search_date').val()+'|'+selectid;
         $('#tablelist2').DataTable().search(str).draw();
    }

    function do_addloan(id) {

    }

    function do_delete(id) {
        $.confirm({
            title: '注意!',
            content: '確定要刪除嗎!',
            buttons: {
                confirm: {
                    text: '確定',
                    action: function () {
                        $.ajax({
                            url: '/customer/delete/'+id,
                            type: 'DELETE',
                            data: {
                                '_token': "{{ csrf_token() }}",
                            },
                            success: function(result) {
                                if (result.code=="Ok"){
                                    $.confirm({
                                        title: '成功!',
                                        content: '刪除成功!',
                                        buttons: {
                                            confirm: {
                                                text: '確定',
                                                action: function () {
                                                    location.href = '/customer';
                                                }
                                            }
                                        }
                                    });
                                }else{
                                    $.alert({
                                        title: '注意!',
                                        content: result.message,
                                    });
                                }
                            }
                        });
                    }
                },
                cancel: {
                    text: '取消',
                    action: function() {
                        //$.alert('Canceled!');
                    }
                },
            }
        });
    }
</script>
@endsection