{% extends "admin/partial/layout_logged_in.html.twig" %}

{% block title %}{{ ta('received_payments', 'Received Payments') }}{% endblock %}
{% block selected_page %}users{% endblock %}
{% block selected_sub_page %}payment_manage{% endblock %}

{% block body %}
<script>
    oTable = null;
    gPaymentId = null;
    $(document).ready(function(){
        // datatable
        oTable = $('#paymentsTable').dataTable($.extend(dataTableOpts, {
            "sAjaxSource": 'ajax/payment_manage',
            "aaSorting": [[ 1, "desc" ]],
            "aoColumns" : [   
                { bSortable: false, sWidth: '3%', sName: 'file_icon', sClass: "center adminResponsiveHide" },
                { sName: 'payment_date', sWidth: '15%' , sClass: "center" },
                { sName: 'user_name', sWidth: '18%' , sClass: "center adminResponsiveHide" },
                { sName: 'description' , sClass: "center adminResponsiveHide" },
                { sName: 'amount', sWidth: '12%', sClass: "center" },
                { bSortable: false, sWidth: '10%', sClass: "center adminResponsiveHide" }
            ],
            "fnServerData": function ( sSource, aoData, fnCallback ) {
                aoData.push( { "name": "filterText", "value": $('#filterText').val() } );
                $.ajax({
                    "dataType": 'json',
                    "type": "GET",
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback
                });
            },
            'oLanguage': $.extend(dataTableOpts.oLanguage, {
                'sEmptyTable': {{ ta('there_are_no_payments_in_the_current_filters', 'There are no payments in the current filters.')|json_encode()|raw }}
            })
        }));
        
        // update custom filter
        $('.dataTables_filter').html($('#customFilter').html());

        // dialog box
        $( "#addPaymentForm" ).modal({
            show: false
        });
        
        // dialog box
        $( "#paymentDetailForm" ).modal({
            show: false
        });
        
        {% if hasLog == true %}
            addPaymentForm();
        {% endif %}
    });
    
    function viewPaymentDetail(paymentId)
    {
        gPaymentId = paymentId;
        loadPaymentDetail();
        $('#paymentDetailForm').modal('show');
    }

    function reloadTable()
    {
        oTable.fnDraw(false);
    }
    
    function loadPaymentDetail()
    {
        $('#paymentDetailInnerWrapper').html({{ ta('loading_please_wait', 'Loading, please wait...')|json_encode()|raw }});
        $.ajax({
            type: "POST",
            url: "ajax/payment_manage_detail",
            data: { paymentId: gPaymentId },
            dataType: 'json',
            success: function(json) {
                if(json.error == true)
                {
                    $('#paymentDetailInnerWrapper').html(json.msg);
                }
                else
                {
                    $('#paymentDetailInnerWrapper').html(json.html);
                }
                
            },
            error: function (XMLHttpRequest) {
                $('#paymentDetailInnerWrapper').html(XMLHttpRequest.responseText);
            }
        });
    }
    
    function addPaymentForm()
    {
        loadAddPaymentForm();
        $('#addPaymentForm').modal('show');
    }
    
    function loadAddPaymentForm()
    {
        $('#paymentForm').html({{ ta('loading_please_wait', 'Loading, please wait...')|json_encode()|raw }});
        $.ajax({
            type: "POST",
            url: "ajax/payment_manage_add_form",
            data: { },
            dataType: 'json',
            success: function(json) {
                if(json.error == true)
                {
                    $('#paymentForm').html(json.msg);
                }
                else
                {
                    $('#paymentForm').html(json.html);
                    setupPopupFormElements();
                }
                
            },
            error: function (XMLHttpRequest) {
                $('#paymentForm').html(XMLHttpRequest.responseText);
            }
        });
    }
    
    function setupPopupFormElements()
    {
        $('#editFileFormInner #payment_date').daterangepicker({
            singleDatePicker: true,
            calender_style: "picker_1",
            timePicker: true,
            autoUpdateInput: false,
            locale: {
                format: 'DD/MM/YYYY HH:mm:00'
            }
        }, function(chosen_date) {
            $('#editFileFormInner #payment_date').val(chosen_date.format('DD/MM/YYYY HH:mm:00'));
        });
    }
    
    function processAddPayment()
    {
        // get data
        user_id = $('#user_id').val();
        payment_date = $('#payment_date').val();
        payment_amount = $('#payment_amount').val();
        description = $('#description').val();
        payment_method = $('#payment_method').val();
        notes = $('#notes').val();
        
        $.ajax({
            type: "POST",
            url: "ajax/payment_manage_add_process",
            data: { user_id: user_id, payment_date: payment_date, payment_amount: payment_amount, description: description, payment_method: payment_method, notes: notes },
            dataType: 'json',
            success: function(json) {
                if(json.error == true)
                {
                    showError(json.msg, 'popupMessageContainer');
                }
                else
                {
                    showSuccess(json.msg);
                    reloadTable();
                    $("#addPaymentForm").modal('hide');
                }
                
            },
            error: function (XMLHttpRequest) {
                showError(XMLHttpRequest.responseText, 'popupMessageContainer');
            }
        });
    }
</script>

<!-- page content -->
<div class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>{{ block('title') }}</h3>
            </div>
        </div>
        <div class="clearfix"></div>

        {{ msg_page_notifications|raw }}
        
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>{{ ta('list_of_payments', 'List Of Payments') }}</h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <p>
                            {{ ta('note_payments_will_only_show_above_after_the_charge_is_successful', 'Note: Payments will only show above after the charge is successful and the payment gateway calls back to the site. Any users which have been manually upgraded, without logging a payment, will not be shown below.') }}
                        </p>
                        <table id="paymentsTable" class="table table-striped table-only-border dtLoading bulk_action">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th class="align-left">{{ ta("payment_date", "Payment Date") }}</th>
                                    <th class="align-left">{{ ta("username", "Username") }}</th>
                                    <th class="align-left">{{ ta("description", "Description") }}</th>
                                    <th class="align-left">{{ ta("amount", "Amount") }}</th>
                                    <th class="align-left">{{ ta("action", "Action") }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="20">{{ ta('admin_loading_data', 'Loading data...') }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="x_panel">
                    <div class="btn-group">
                        <div class="dropup">
                            <a href="#" class="btn btn-default dropdown-toggle" type="button"  onClick="addPaymentForm(); return false;">
                                {{ ta('manually_log_payment', 'Manually Log Payment') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="customFilter" id="customFilter" style="display: none;">
    <label>
        Filter Results:
        <input name="filterText" id="filterText" type="text" onKeyUp="reloadTable(); return false;" style="width: 160px;"/>
    </label>
</div>

<div id="addPaymentForm" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button></div>
            <div class="modal-body" id="paymentForm"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onClick="processAddPayment();">Add Payment Entry</button>
            </div>
        </div>
    </div>
</div>

<div id="paymentDetailForm" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button></div>
            <div class="modal-body" id="paymentDetailInnerWrapper"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}