@extends('layouts.app', ['title' => 'FINANCE DISMANTLERS'])

@section('content')
<div class="user-index">
    <div class="m-portlet m-portlet--mobile">
        <div class="m-portlet__head">
            <div class="m-portlet__head-caption">
                <div class="m-portlet__head-title">
                    <h3 class="m-portlet__head-text">
                        List
                    </h3>
                </div>
            </div>
        </div>
        <div class="m-portlet__body">
            <div class="m-form m-form--label-align-right m--margin-bottom-30">
                <div class="row align-items-center">
                    <div class="col-sm-2">
                        <div class="m-widget16">
                            <div class="m-widget16__body">
                                <!--begin::widget item-->
                                <div class="m-widget16__item">
                                    <span class="m-widget16__date">
                                        Members
                                    </span>
                                    <span class="m-widget16__price m--align-right m--font-brand">
                                        {{ $member_count }}
                                    </span>
                                </div>
                                <!--end::widget item-->

                                <!--begin::widget item-->
                                <div class="m-widget16__item">
                                    <span class="m-widget16__date">
                                        Associates
                                    </span>
                                    <span class="m-widget16__price m--align-right m--font-brand">
                                        {{ $associate_count }}
                                    </span>
                                </div>
                                <!--end::widget item-->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row align-items-center m--margin-top-20">
                    <div class="col-sm-6 text-left">
                        <div class="m-input-icon m-input-icon--left">
                            <input type="text" class="form-control m-input" placeholder="Search..." id="generalSearch">
                            <span class="m-input-icon__icon m-input-icon__icon--left">
                                <span><i class="la la-search"></i></span>
                            </span>
                        </div>
                    </div>
                    <div class="button-group col-sm-6 text-right">
                        <a href="javascript:void(0)" class="btn btn-success buttons-print">Email All</a>
                        <a href="javascript:void(0)" class="btn btn-success buttons-print">Message All</a>
                    </div>
                </div>
            </div>
            <div class="m_datatable" id="datatable-user-finance" style="">
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-script')
<script type="text/javascript">
    jQuery(document).ready(function() {
        options = {};
        /* Table Columns */
        options.columns = [
            {
                'field' : 'table_serial_number',
                'title' : '#',
                'width' : 40,
                'sortable' : false,
            },
            {
                'field' : 'created_at',
                'title' : '{{ User::getAttributeLabel("created_at") }}',
                'sortable': true,
                'template' : function(t){
                    return t.created_at_date;
                }
            },
            {
                'field' : 'company_name',
                'title' : '{{ UserProfile::getAttributeLabel("company_name") }}',
                'sortable' : true,
            },
            {
                'field' : 'name',
                'title' : '{{ UserProfile::getAttributeLabel("name") }}',
                'sortable' : true,
            },
            {
                'field' : 'email',
                'title' : 'Username',
                'sortable' : true,
            },
            {
                'field' : 'chapter',
                'title' : 'Chapters',
                'sortable' : false,
                'template': function(t) {
                    return t.chapter_name;
                } 
            },
            {
                'field' : 'privilege',
                'title' : '{{ User::getAttributeLabel("privilege") }}',
                'sortable' : true,
                'template' : function(t){
                    return t.privilege_text;
                },
                'width': 50,
            },
            {
                'field' : 'promo',
                'title' : 'Trial Days',
                'sortable' : true,
                'template' : function(t){
                    return t.trial;
                },
            },
            {
                'field' : 'fee',
                'title' : 'Membership Fee',
                'sortable' : true,
                'template' : function(t){
                    if(t.fee != ''){
                        return '$'+t.fee;
                    } else {
                        return '0';
                    }
                },
            },
            {
                'field' : 'actions',
                'title' : 'Actions',
                'sortable' : false,
            },
        ];
        options.detail = {
            title: 'Load Details',
            content: function (t) {
                var data = t.data;
                var html = '';
                if(data.paymentHistory != undefined && data.paymentHistory != '') {
                    html += '<table class="table table-bordered">';
                    html += '<tr><th>#</th><th>Amount</th><th>Payment Type</th><th>Start Date</th><th>End Date</th></tr>';
                    var i =1;
                    $(data.paymentHistory).each(function(k, v){
                        console.log(v);
                        html += '<tr><td>'+i+'</td><td>$'+v.amount+'</td><td>'+v.payment_type+'</td><td>'+timestampToDate(v.start_date)+'</td><td>'+timestampToDate(v.end_date)+'</td></tr>';
                        i += 1;
                    });
                    html += '</table>';
                } else {
                    html = 'No Payment History found';
                }
                $("<div/>").attr("id", "child_data_ajax_" + data.id).appendTo(t.detailCell);
                $("#child_data_ajax_" + data.id).html(html);
            }
        };
        /* Table Initialization */
        initializeDataTable("{{ url('/user/ajaxFinance') }}", options);
    });
</script>
@stop