@extends('layouts.main')

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

@section('content')

<div class="card martop-1">
    <div class="card-header">
        <h3 class="card-title">Paket Subscription</h3>
        <div class="card-tools user_data_tools" id="user_data_tools">
            <button class="btn btn-sm btn-success btn-new-data">
                <i class="fa fa-plus"></i> New Paket Subscription
            </button>
        </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>

<div class="create_fields display-none">
    @csrf
    <div class="form-group">
        <label>Name</label>
        <input class="form-control" name="name" placeholder="Paket Name" required autofocus>
    </div>
    
    <div class="form-group">
        <label>Type Paket</label>
        <select class="form-control" name="type_paket" required autofocus>
            <option>General</option>
            <option>Special</option>
        </select>
    </div>
    
    <div class="form-group">
        <label>Price</label>
        <input class="form-control" name="price_paket" type="number" step="1" placeholder="Price Paket" required autofocus>
    </div>
    
    <div class="form-group">
        <label>Limit Product</label>
        <input class="form-control" name="limit_product" type="number" step="1" placeholder="Limit Product" required autofocus>
    </div>
    
    <div class="form-group">
        <label>Limit Category</label>
        <input class="form-control" name="limit_category" type="number" step="1" placeholder="Limit Category" required autofocus>
    </div>
    
    <div class="form-group">
        <label>Limit Storage</label>
        <input class="form-control" name="limit_storage" type="number" step="1" placeholder="Limit Storage" required autofocus>
    </div>
    
    <div class="form-group">
        <label>Setting Logo</label>
        <select class="form-control" name="setting_logo" required autofocus>
            <option>NO</option>
            <option>YES</option>
        </select>
    </div>
    
    <div class="form-group">
        <label>Setting Bank Account</label>
        <select class="form-control" name="setting_bank_account" required autofocus>
            <option>NO</option>
            <option>YES</option>
        </select>
    </div>
    
    <div class="form-group">
        <label>Upload Image</label>
        <select class="form-control" name="setting_image" required autofocus>
            <option>NO</option>
            <option>YES</option>
        </select>
    </div>
    
    <div class="form-group">
        <label>Setting Payment Gateway</label>
        <select class="form-control" name="setting_payment_gateway" required autofocus>
            <option>NO</option>
            <option>YES</option>
        </select>
    </div>
    
    <div class="form-group">
        <label>Long Expire</label>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <input class="form-control" name="long_expire" type="number" step="1" placeholder="Long Expire" required autofocus>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <select class="form-control" name="status_paket" required autofocus>
                        <option>DAY</option>
                        <option>MONTH</option>
                        <option>YEAR</option>
                    </select>
                </div>
            </div>
        </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=limit_product]").val(data.limit_product);
                        form.find("input[name=limit_category]").val(data.limit_category);
                        form.find("input[name=limit_storage]").val(data.limit_storage);
                        form.find("input[name=long_expire]").val(data.long_expire);
                        form.find("select[name=status_paket]").val(data.status_paket);
                        form.find("select[name=type_paket]").val(data.type_paket);
                        form.find("select[name=setting_logo]").val(data.setting_logo);
                        form.find("select[name=setting_bank_account]").val(data.setting_bank_account);
                        form.find("select[name=setting_image]").val(data.setting_image);
                        form.find("select[name=setting_payment_gateway]").val(data.setting_payment_gateway);
                    
                    }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-new-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(),
                limit_product: ini.find("input[name=limit_product]").val(),
                limit_category: ini.find("input[name=limit_category]").val(),
                limit_storage: ini.find("input[name=limit_storage]").val(),
                long_expire: ini.find("input[name=long_expire]").val(),
                status_paket: ini.find("select[name=status_paket]").val(),
                type_paket: ini.find("select[name=type_paket]").val(),
                setting_logo: ini.find("select[name=setting_logo]").val(),
                setting_bank_account: ini.find("select[name=setting_bank_account]").val(),
                setting_image: ini.find("select[name=setting_image]").val(),
                setting_payment_gateway: ini.find("select[name=setting_payment_gateway]").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)
        });
        
        $(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(),
                limit_product: ini.find("input[name=limit_product]").val(),
                limit_category: ini.find("input[name=limit_category]").val(),
                limit_storage: ini.find("input[name=limit_storage]").val(),
                long_expire: ini.find("input[name=long_expire]").val(),
                status_paket: ini.find("select[name=status_paket]").val(),
                type_paket: ini.find("select[name=type_paket]").val(),
                setting_logo: ini.find("select[name=setting_logo]").val(),
                setting_bank_account: ini.find("select[name=setting_bank_account]").val(),
                setting_image: ini.find("select[name=setting_image]").val(),
                setting_payment_gateway: ini.find("select[name=setting_payment_gateway]").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)
        });
        
        $(document).on('click', '.btn-is-active', function(e){
            e.preventDefault();
            var ini = $(this),
                id = ini.data('id');
            if($.isNumeric(id)) {
                var e_modal_wait = $("#modalWait");
                showLoading(e_modal_wait);
                $.ajax({
                    url: '/paket_subscription/is_active',
                    type: "get",
                    data: {
                            id: id
                          }
                })
                .done(function (result) {
                    hideLoading(e_modal_wait);
                    if(result.status){
                        var message = result.message;
                        successAlert(message);
                        loadThis(params);
                    }else{
                        var message = result.message || 'Not found!';
                        failedAlert(message);
                    }
                })
                .fail(ajax_fail);
            }
        })
        
    });
    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 = "/getPaketSubscription";
        th = '<th width="5%">ID</th>' +
             '<th class="text-dark cursor-default">Name</th>'+
             '<th>Price</th>'+
             '<th>Long Expire</th>'+
             '<th>Type Paket</th>'+
             '<th>Setting Logo</th>'+
             '<th>Setting Bank Account</th>'+
             '<th>Limit Product</th>'+
             '<th>Limit Category</th>'+
             '<th>Limit Storage</th>'+
             '<th>Upload Image</th>'+
             '<th>Payment Gateway</th>'+
             '<th width="5%">Is Active</th>';
        columns = [
                    {"data": "id", className: "paket_id"},
                    {"data": "name", className: "paket_name text-link"},
                    {"data": "price_paket"},
                    {"data": "long_expire"},
                    {"data": "type_paket"},
                    {"data": "setting_logo"},
                    {"data": "setting_bank_account"},
                    {"data": "limit_product"},
                    {"data": "limit_category"},
                    {"data": "limit_storage"},
                    {"data": "setting_image"},
                    {"data": "setting_payment_gateway"},
                    {"data": "is_active", className: 'text-center'}
                  ];
    
        col_def = [
                {
                    "targets" : 3,
                    "data": "limit_product",
                    "render" : function (data, type, row) {
                        return row.long_expire + ' ' + row.status_paket;
                    }
                },
                {
                    "targets" : 7,
                    "data": "limit_product",
                    "render" : function (data, type, row) {
                        if(row.limit_product != null) {
                            return row.limit_product;
                        } else {
                            return 'Unlimited';
                        }
                        
                    }
                },
                {
                    "targets" : 8,
                    "data": "limit_category",
                    "render" : function (data, type, row) {
                        if(row.limit_category != null) {
                            return row.limit_category;
                        } else {
                            return 'Unlimited';
                        }
                        
                    }
                },
                {
                    "targets" : 9,
                    "data": "limit_storage",
                    "render" : function (data, type, row) {
                        if(row.limit_storage != null) {
                            return row.limit_storage + 'MB';
                        } else {
                            return 'Unlimited';
                        }
                        
                    }
                },
                {
                    "targets" : 12,
                    "data": "is_active",
                    "render" : function (data, type, row) {
                        text = 'DEACTIVATE';
                        color = 'btn-danger';
                        if(row.is_active === "DISABLE"){
                            text = 'ACTIVATE';
                            color = 'btn-success';
                        }
                        return '<button class="btn btn-sm '+color+' btn-is-active" data-id="'+row.id+'">'+text+'</button>';
                    }
                }
            ];   
    
        currency = {
                    "url" : url,
                    "param" : param,
                    "th" : th,
                    "col_def" : col_def,
                    "columns" : columns,
                   }
        return currency;
    }
</script>
@endsection