@extends('layouts.company_main')

@section('title','Users')

@section('content')

<div id="indexWrapper">
    <div class="card martop-1">
        <div class="card-header">
            <h3 class="card-title">Expired Users</h3>
            <div class="card-tools user_data_tools" id="user_data_tools">
                <button class="btn btn-sm btn-success btn-insert-payment-reference">
                    <i class="fa fa-check"></i> Insert Payment Reference
                </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>

<div class="display-none" id="detailWrapper">
    <form method="POST" action="#update" class="form-update-data">
    @csrf
    <div class="card martop-1">
        <div class="card-header">
            <h3 class="card-title">User</h3>
        </div>
        <div class="card-body">
            <div class="form-group display-none err_msg_div">
                <p class="alert err_msg_p">
                    <a class="close" aria-hidden="true" data-dismiss="alert">x</a>
                </p>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <label>User Photo</label>
                    <img class="user_photo" width="100%">
                </div>
                <div class="col-md-9">
                    <div class="form-group">
                        <label>User Name</label>
                        <input class="form-control form-control-sm" name="user_name" placeholder="User Name" readonly>
                        <input name="id_user" hidden>
                    </div>
                    <div class="form-group">
                        <label>User Email</label>
                        <input type="email" class="form-control form-control-sm" name="user_email" placeholder="User Email" readonly>
                    </div>
                    <div class="form-group">
                        <label>User IC Number</label>
                        <input type="number" class="form-control form-control-sm" name="user_ic_number" placeholder="User IC Number" readonly>
                    </div>
                    <div class="form-group">
                        <label>User Telp</label>
                        <input type="number" class="form-control form-control-sm" name="user_telp" placeholder="User Telp" readonly>
                    </div>
                    <div class="form-group">
                        <label>User Address</label>
                        <textarea class="form-control form-control-sm" name="user_address" placeholder="User Address" readonly></textarea>
                    </div>
                    <div class="form-group">
                        <label>Subscription</label>
                        <input class="form-control form-control-sm" name="paket_subscription" placeholder="Paket Subscription" readonly>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <br>
        <div class="fixed-bottom-input-footer" style="z-index:1">
            <!--<button type="submit" class="btn btn-sm btn-success">Save</button>-->
            <button type="button" class="btn btn-sm btn-default" onclick="setViewTo('INDEX')">Back</button>
        </div>
    </div>
    </form>
</div>

<div class="modal fade" id="modal_confirm_payment" role="dialog" aria-labelledby="detail" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form method="POST" action="#req_pay_confirm" class="form-req-pay-confirm">
        @csrf
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Request Payment Confirmation</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group" id="req_pay_merchant_wrapper">
                                <b>User</b>
                                <select class="form-control form-control-sm searchUnpaidUser req_pay_user" id="req_pay_user" name="req_pay_user" style="width: 100%; height: calc(2.19rem + 2px) !important;" required autofocus></select>
                            </div>
                            <div class="form-group">
                                <b>Payment Reference Code</b> 
                                <a href="#" class="pull-right btn-help-ref">
                                    <i class="fa fa-question-circle"></i>
                                </a>
                                <input class="form-control ref_code" name="ref_code" placeholder="Payment Reference Code" required autofocus>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-default btn-md" style="font-weight:bold; font-size:15px" data-dismiss="modal">Close</a>
                    <button class="btn btn-info btn-md text-light btn-req-confirm" style="font-weight:bold; font-size:15px">Submit</button>
                </div>
            </div>
        </div>
        </form>
    </div>
</div>

<div class="modal fade" id="modal_renew_subs" role="dialog" aria-labelledby="detail" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form method="POST" action="#change_paket" class="form-change-paket">
        @csrf
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Renew Subscription</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <b>User</b>
                                <input class="form-control" name="user_name" readonly>
                                <input name="id_user" hidden>
                            </div>
                            <div class="form-group">
                                <b>Paket Subscription</b>
                                <select class="form-control form-control-sm searchPaket id_paket_subscription" id="id_paket_subscription" name="id_paket_subscription" style="width: 100%; height: calc(2.19rem + 2px) !important;" required autofocus></select>
                            </div>
                            
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-default btn-md" style="font-weight:bold; font-size:15px" data-dismiss="modal">Close</a>
                    <button class="btn btn-info btn-md text-light " style="font-weight:bold; font-size:15px">Continue</button>
                </div>
            </div>
        </div>
        </form>
    </div>
</div>


<script>
    var params = {
        user_status: "EXPIRED",
    }
    
    
    function setViewTo(wrp){
        var index = $('#indexWrapper'),
            detail = $('#detailWrapper');
        
        if(wrp === "DETAIL"){
            hide_element(index);
            show_element(detail);
        }else{
            show_element(index);
            hide_element(detail);
            loadThis(params);
        }
    }
    
    $(document).ready(function () {
        loadThis(params);
        
        $(document).on('click', '.user_name', function(e){
            e.preventDefault();
            
            var ini = $(this);
                tr = ini.parents('tr')
                id = tr.find('.id_user').html();
            
            if($.isNumeric(id)) {
                var e_modal_wait = $("#modalWait");
                showLoading(e_modal_wait);
                setViewTo("DETAIL");
                $.ajax({
                    url: '/company/getUsers',
                    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');
                            id_user = form.find("input[name=id_user]").val(data.id_user);
                            user_name = form.find("input[name=user_name]").val(data.user_name);
                            user_email = form.find("input[name=user_email]").val(data.user_email);
                            user_ic_number = form.find("input[name=user_ic_number]").val(data.user_ic_number);
                            user_telp = form.find("input[name=user_telp]").val(data.user_telp);
                            user_address = form.find("textarea[name=user_address]").val(data.user_address);
                            paket_subscription = form.find("input[name=paket_subscription]").val(data.paket_subscription);
                            user_photo = form.find(".user_photo").attr('src', '/upload_image/user/'+data.user_photo);
                    }else{
                        var message = result.message || 'Not found!';
                        failedAlert(message);
                    }
                })
                .fail(ajax_fail);
            }
        });
        
        $(document).on('click', '.btn-insert-payment-reference', function(e){
            modal_conf = $('#modal_confirm_payment');
            modal_conf.modal('show');
        });
        
        $(document).on('click', '.btn-help-ref', function(e){
            e.preventDefault();
            modal_conf = $('#modal_confirm_payment');
            modal_conf.modal('hide');
           
            $m = $('#refCodeHelp');
            $m.modal('show');
        });
        
                $(document).on('submit', '.form-req-pay-confirm', function(e){
            e.preventDefault();
            var ini = $(this),
                url = '/company/req_pay_confirm',
                input_token = ini.find('input[name=_token]'),
                e_modal = $("#modal_confirm_payment"),
                e_modal_wait = $("#modalWait"),
                id_user = ini.find('.req_pay_user').val(),
                ref_code = ini.find('.ref_code').val();
            
            e_modal.modal('hide');
            showLoading(e_modal_wait);
            var data = {
                is_ajax: true,
                _token: input_token.val(),
                id_user: id_user,
                ref_code: ref_code,
            };
            $.ajax({
                url: url,
                type: "post",
                data: data
            }).done(function (result) {
                hideLoading(e_modal_wait);
                if(result.status){
                    var message = result.message || 'Success';
                    successAlert(message);
                    loadThis(params);
                }else{
                    var message = result.message || 'Api connection problem';
                    failedAlert(message);
                }
            })
            .fail(ajax_fail);
        });

        
        $(document).on('click', '.btn-renew-subs', function(e){
            e.preventDefault();
            var ini = $(this),
                href = ini.data('url'),
                id_user = ini.data('id_user'),
                user_name = ini.data('user_name'),
                id_paket_subscription = ini.data('id_paket_subscription'),
                paket_subscription = ini.data('paket_subscription'),
                form = $('.form-change-paket');
            
            form.find('input[name=id_user]').val(id_user);
            form.find('input[name=user_name]').val(user_name);
            
            id_paket = form.find("select[name=id_paket_subscription]");
            var $newOption = $("<option selected='selected'></option>").val(id_paket_subscription).text(paket_subscription);
            id_paket.append($newOption).trigger('change');
            
            $('#modal_renew_subs').modal('show');
        });
        
        $(document).on('submit', '.form-change-paket', function(e){
            e.preventDefault();
            var ini = $(this),
                url = '/company/change_paket',
                input_token = ini.find('input[name=_token]'),
                e_modal = $("#modal_renew_subs"),
                e_modal_wait = $("#modalWait"),
                user_name = ini.find('input[name=user_name]').val(),
                id_user = ini.find('input[name=id_user]').val(),
                id_paket_subscription = ini.find('.id_paket_subscription').val();
            
            e_modal.modal('hide');
            showLoading(e_modal_wait);
            var data = {
                is_ajax: true,
                _token: input_token.val(),
                id_user: id_user,
                user_name: user_name,
                id_paket_subscription: id_paket_subscription,
            };
            $.ajax({
                url: url,
                type: "post",
                data: data
            }).done(function (result) {
                hideLoading(e_modal_wait);
                var message = result.message || 'Api connection problem';
                if(result.status){
                    var data = result.data;
                    loadThis(params);
                    successAlert(message);
                }else{
                    failedAlert(message);
                }
            })
            .fail(ajax_fail);
        });
        
        $(document).on('submit', '.form-bill-plz-pay', function(e){
            e.preventDefault();
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            var ini = $(this),  input_token = ini.find('input[name=_token]'),   url = ini.attr('action');
            
            var post_data = {
                is_ajax: true,
                _token: input_token.val(),
            };
            
            $.ajax({
                url: url,
                type: "post",
                data: post_data
            })
            .done(function (result) {
                hideLoading(e_modal_wait);
                input_token.val(result.newtoken);
                if (result.status) {
                    var message = result.message || 'Success';
                    infoAlert(message);
                    window.open(result.payment_url, result.payment_url);
                    loadThis(params);
                    
                } else {
                    var message = result.message || 'Api connection problem';
                    failedAlert(message);
                    loadThis(params);
                }
                input_token.val(result.newtoken);
            })
            .fail(ajax_fail);
            
        });
    });
    
    function loadThis(data){
        var datas = loadAsData(data);
        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 = param;
        url = "/company/getUsers";
        th = '<th width="5%">NO</th>' +
             '<th width="5%">ID</th>' +
             '<th width="5%">Photo</th>' +
             '<th class="text-dark cursor-default">User Name</th>' +
             '<th>Code</th>' +
             '<th class="now_wrap">Expired At</th>' +
             '<th>Subscription</th>' +
             '<th class="now_wrap">Subscription Duration</th>';
        columns = [
                    {"data": "no"},
                    {"data": "id_user", className: "id_user"},
                    {"data": "user_photo"},
                    {"data": "user_name", className: "user_name text-link"},
                    {"data": "user_code"},
                    {"data": "user_expired"},
                    {"data": "paket_subscription"},
                    {"data": "paket_subscription_duration"},
                  ];
        
        col_def = [
                    {
                        "targets" : 2,
                        "data": "user_photo",
                        "render" : function ( url, type, full) {
                           return '<img height="60rem" src="/upload_image/user/'+url+'" />';
                        }
                    },
            ];   
    
        if(param.user_status === "EXPIRED"){
            th += '<th>Action</th>';
            columns.push({"data": "id_user"});
            col_def.push(
                    {
                        "targets" : 8,
                        "data": "id_user",
                        "render" : function (data, type, row) {
                            btn = '<a href="#" data-url="'+row.paket.link_payment+'" data-id_user="'+row.id_user+'" data-user_name="'+row.user_name+'" data-paket_subscription="'+row.paket_subscription+'" data-id_paket_subscription="'+row.id_paket_subscription+'" class="btn-renew-subs btn btn-sm btn-info">' +
                                        'CHANGE PLAN' +
                                    '</a>';
                            
                            create_bill_url = '/create_bill?id_user=' + row.id_user;
                            form = '<form method="POST" action="'+create_bill_url+'" class="form-bill-plz-pay">@csrf<button type="submit" class="btn btn-sm btn-success">RENEW</button></form>';
                            btn = '<div class="btn-group">'+ btn + form +'</div>';
                            return  btn;
                        }
                    }
                );
            
        }
        currency = {
                    "url" : url,
                    "param" : param,
                    "th" : th,
                    "col_def" : col_def,
                    "columns" : columns,
                   }
        return currency;
    }
    $(".searchPaket").select2({
        placeholder: "Please Select",
        ajax: {
            url: "/getPaketSubscription",
            dataType: "json",
            delay: 250,
            processResults: function (data) {
                data = data.data;
                return {
                    results: $.map(data, function (item) {
                            item_text =  item.name;
                            return {
                                text: item_text,
                                id: item.id
                            };
                    })
                };
            },
            cache: false
        }
    });
    $(".searchUnpaidUser").select2({
        placeholder: "Please Select",
        ajax: {
            url: "/company/getUsers?user_status=EXPIRED",
            dataType: "json",
            delay: 250,
            processResults: function (data) {
                data = data.data;
                return {
                    results: $.map(data, function (item) {
                            item_text =  item.user_name;
                            return {
                                text: item_text,
                                id: item.id_user
                            };
                    })
                };
            },
            cache: false
        }
    });
</script>
@endsection