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

@section('content')
<div class="user-index">
    <div class="m-portlet m-portlet--mobile">
        <div class="m-portlet__body">
            <div class="m_datatable" id="datatable-payment-history" style="">
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-script')
<script type="text/javascript">
    jQuery(document).ready(function() {
        options = {};
        options.height = window.innerHeight - $('#datatable-payment-history').offset().top - $('.m-footer').outerHeight(true) - 60;
      
        /* Table Columns */
        options.columns = [
            {
                            'field' : 'table_serial_number',
                            'title' : '#',
                            'width' : 30,
                            'sortable' : false,
                        },
                        {
                            'field' : 'payment_id',
                            'title' : 'Payment ID',
                            'sortable' : false
                        },
                        {
                            'field' : 'payment_done_at',
                            'title' : 'Payment Date',
                            'sortable': true,
                                'template' : function(t){
                                return t.paid_at;
                            }
                        },
                        {
                            'field' : 'amount',
                            'title' : 'Payble Amount',
                            'sortable': false,
                                'template' : function(t){
                                return '$' + t.paid_amount;
                            }
                        },
                        {
                            'field' : 'actions',
                            'title' : 'Actions',
                            'sortable' : false
                        },
        ];
        options.detail = {
            title: 'Load Details',
            content: function (t) {
                var data = t.data;
                var html = '';
                //html += '<div class="row"><div class="col-sm-12" style="text-align:center"><h5>Payment History</h5></div></div>';
                $(data.payment_history).each(function(k, v){
                    html += '<div class="row">';
                    html += '<div class="col-sm-12"><b>Product: </b>'+v.title+' <b> &nbsp;&nbsp;Product Price: </b>$'+v.price+'<b>&nbsp;&nbsp;Paid Amount: </b>$'+v.amount+' ( '+v.description+' )';
                    html += '<b>&nbsp;&nbsp;&nbsp;&nbsp;Start Date: </b>'+v.start_date+' <b>&nbsp;&nbsp;End Date: </b>'+v.end_date+' </div>';
                    html += '</div><hr/>';
                })
              
                $("<div/>").attr("id", "child_data_ajax_" + data.id).appendTo(t.detailCell);
                $("#child_data_ajax_" + data.id).html(html);
            }
        };
        /* Table Initialization */
        initializeDataTable("{{ url('/setting/ajaxPaymentHistory') }}", options);
    });
</script>
@stop