@extends('layouts.main')

@section('title','History Subscription')

@section('content')

<div class="card martop-1">
    <div class="card-header">
        <div class="row">
            <div class="col-md-4">
                <h3 class="card-title">History Subscription</h3>
            </div>
            <!--<div class="col-md-2">-->
            <!--    <select class="form-control">-->
            <!--        <option>select Company</option>-->
            <!--    </select>-->
            <!--</div>-->
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive dataTableRow" id="dataTableRow">
            <label class="el-waiting-message">Loading your data. It may take some time..</label>
        </div>
    </div>
</div>

<script>
    var params = {}
    
    $(document).ready(function () {
        loadThis(params);
        
        $(document).on('click', '.paket_name', function(e){
            e.preventDefault();
            
            var ini = $(this);
                tr = ini.parents('tr')
                id = tr.find('.paket_id').html();
            
            if($.isNumeric(id)) {
                var form = '<form action="update_paket_subscription/'+id+'" class="form-update-data">';
                var create = $('.create_fields');
                var fields = create.html();
                var btn_submit = '<button type="submit" class="btn btn-success btn-md text-light">Submit</button>';
                modalCreateMd(form, fields, btn_submit);
                
                var e_modal_wait = $("#modalWait");
                showLoading(e_modal_wait);
                $.ajax({
                    url: '/getPaketSubscription',
                    type: "get",
                    data: {
                            id: id
                          }
                })
                .done(function (result) {
                    hideLoading(e_modal_wait);
                    if(result.data[0]){
                        var data = result.data[0],
                            form = $('.form-update-data');
                            
                        form.find("input[name=name]").val(data.name);
                        form.find("input[name=price_paket]").val(data.price_paket);
                        form.find("input[name=long_expire]").val(data.long_expire);
                        form.find("select[name=status_paket]").val(data.status_paket);
                    
                    }else{
                        var message = result.message || 'Not found!';
                        failedAlert(message);
                    }
                })
                .fail(ajax_fail);
            }
        });
        
        $(document).on('click', '.btn-new-data', function(e){
            e.preventDefault();
            var form = '<form action="/new_paket_subscription" class="form-new-data">';
            var create = $('.create_fields');
            var fields = create.html();
            var btn_submit = '<button type="submit" class="btn btn-success btn-md text-light">Submit</button>';
            modalCreateMd(form, fields, btn_submit)
        });
        
        // $(document).on('submit', '.form-update-data', function(e){
        //     e.preventDefault();
        //     $('#modal_create_md').modal('hide');
        //     var e_modal_wait = $("#modalWait");
        //     showLoading(e_modal_wait);
            
        //     var ini = $(this),  input_token = ini.find('input[name=_token]'),   url = ini.attr('action');
            
        //     var data = {
        //         is_ajax: true,
        //         _token: input_token.val(),
        //         name: ini.find("input[name=name]").val(),
        //         price_paket: ini.find("input[name=price_paket]").val(),
        //         long_expire: ini.find("input[name=long_expire]").val(),
        //         status_paket: ini.find("select[name=status_paket]").val(),
        //     };
            
        //     function postData(data) {
        //         $.ajax({
        //             url: url,
        //             type: "post",
        //             data: data
        //         })
        //         .done(function (result) {
        //             hideLoading(e_modal_wait);
        //             input_token.val(result.newtoken);
        //             if (result.status) {
        //                 var message = result.message || 'Success';
        //                 successAlert(message);
        //                 loadThis();
        //             } else {
        //                 var message = result.message || 'Api connection problem';
        //                 failedAlert(message);
        //             }
        //             input_token.val(result.newtoken);
        //         })
        //         .fail(ajax_fail);
        //     }
        //     postData(data)
        // });
        
    });
    function loadThis(params){
        var datas = loadAsData(params);
        url = datas.url;
        param = datas.param;
        th = datas.th;
        col_def = datas.col_def;
        columns = currency.columns;
        
        loadTable(url, param, th, col_def, columns);
    }
        
    function loadAsData(param){
        // param = {};
        url = "/get_history_subscription";
        th = '<th width="5%">NO</th>' +
             '<th width="5%">ID</th>' +
             '<th class="now_wrap">Collection ID</th>' +
             '<th class="now_wrap">ID Bill</th>' +
             '<th class="text-dark cursor-default">Company</th>'+
             '<th>User</th>'+
             '<th>Email</th>'+
             '<th>mobile</th>'+
             '<th>Amount</th>'+
             '<th>State</th>'+
             '<th>Paid At</th>'+
             '<th class="now_wrap">Paid Amount</th>';
             
        columns = [
                    {"data": "id"},
                    {"data": "id"},
                    {"data": "collection_id"},
                    {"data": "id_bill"},
                    {"data": "company.company_name", className:'now_wrap'},
                    {"data": "company_user.user_name"},
                    {"data": "email"},
                    {"data": "mobile"},
                    {"data": "amount"},
                    {"data": "state"},
                    {"data": "paid_at", className:'now_wrap'},
                    {"data": "paid_amount"},
                  ];
    
        col_def = [
                {
                    "targets" : 0,
                    "data": "id_bill",
                    "render" : function (data, type, row) {
                        return row.no;
                    }
                },
                {
                    "targets" : 3,
                    "data": "id_bill",
                    "render" : function (data, type, row) {
                        payment_link = 'https://www.billplz-sandbox.com/bills/' + row.id_bill;
                        return '<a href="'+payment_link+'" onclick="window.open(this.href, this.href); return false;">'+row.id_bill+'</a>';
                    }
                },
            ];   
    
        currency = {
                    "url" : url,
                    "param" : param,
                    "th" : th,
                    "col_def" : col_def,
                    "columns" : columns,
                   }
        return currency;
    }
</script>
@endsection