@extends(@Auth::user()->role=='admin' ? 'layouts.gentella':'layouts.'.env('LAYOUT'))
@section('content')
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title">{{ $user->name }} Payments</div>
        </div>
        <div class="panel-body">
                        <p class="period">Payment Period</p>
                    </div>
    </div>
    <div id="payment_modal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a class="btn btn-danger pull-right" class="close" data-dismiss="modal">&times;</a>
                    <h4 class="modal-title"><label>Pay {{ $user->name  }}</label></h4>
                </div>
                <div class="modal-body">
                    <form id="payment_form" class="form-horizontal" method="post" action="{{ URL::to("user/payout") }}">
                        {{ csrf_field() }}
                        <input type="hidden" id="pay_user_id" name="user_id">
                        <input type="hidden" id="pay_payment_for" name="payment_for">
                        <div class="form-group">
                            <label class="control-label col-md-3">Amount(USD)</label>
                            <div class="col-md-6">
                                <input class="form-control" type="text" id="pay_amount" name="amount">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">Method</label>
                            <div class="col-md-6">
                               <select onchange="changeMode()" class="form-control" name="via">
                                   <option value="paypal">Paypal</option>
                                   <option value="manual">Manual</option>
                               </select>
                            </div>
                        </div>
                        <div style="display: none;" id="manual_group" class="form-group">
                            <label class="control-label col-md-3">Reference</label>
                            <div class="col-md-6">
                               <input type="text" name="reference" class="form-control">
                            </div>
                        </div>
                        <div style="" id="" class="form-group">
                            <label class="control-label col-md-3">&nbsp;</label>
                            <div class="col-md-6">
                               <input type="submit" class="btn btn-success" value="Pay Now">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        function submitPayment(id){
           var data = $("#"+id).serializeObject();
            console.log(data.user_id);
            $("#pay_user_id").val(data.user_id);
            $("#pay_amount").val(data.amount);
            $("#pay_payment_for").val(data.payment_for);
            $("#payment_modal").modal('show');
            return false;
        }

        function changeMode(){
            var selected = $("select[name='via']").val();
            if(selected=='manual'){
                $("#manual_group").slideDown();
            }else{
             $("#manual_group").slideUp();
            }
        }


        (function($){
            $.fn.serializeObject = function(){

                var self = this,
                        json = {},
                        push_counters = {},
                        patterns = {
                            "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
                            "key":      /[a-zA-Z0-9_]+|(?=\[\])/g,
                            "push":     /^$/,
                            "fixed":    /^\d+$/,
                            "named":    /^[a-zA-Z0-9_]+$/
                        };


                this.build = function(base, key, value){
                    base[key] = value;
                    return base;
                };

                this.push_counter = function(key){
                    if(push_counters[key] === undefined){
                        push_counters[key] = 0;
                    }
                    return push_counters[key]++;
                };

                $.each($(this).serializeArray(), function(){

                    // skip invalid keys
                    if(!patterns.validate.test(this.name)){
                        return;
                    }

                    var k,
                            keys = this.name.match(patterns.key),
                            merge = this.value,
                            reverse_key = this.name;

                    while((k = keys.pop()) !== undefined){

                        // adjust reverse_key
                        reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');

                        // push
                        if(k.match(patterns.push)){
                            merge = self.build([], self.push_counter(reverse_key), merge);
                        }

                        // fixed
                        else if(k.match(patterns.fixed)){
                            merge = self.build([], k, merge);
                        }

                        // named
                        else if(k.match(patterns.named)){
                            merge = self.build({}, k, merge);
                        }
                    }

                    json = $.extend(true, json, merge);
                });

                return json;
            };
        })(jQuery);
    </script>

@endsection