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

{% block title %}{{ ta('manage_payment_gateways', 'Manage Payment Gateways') }}{% endblock %}
{% block selected_page %}payment{% endblock %}
{% block selected_sub_page %}gateway_manage{% endblock %}

{% block head_css %}
    <link href="{{ PLUGIN_WEB_ROOT }}/payment/assets/css/styles.css" rel="stylesheet"/>
{% endblock %}

{% block head_js %}
    <script>
        oTable = null;
        gRequestId = null;
        gEditGatewayId = null;
        $(document).ready(function () {
            // datatable
            oTable = $('#fileTable').dataTable($.extend(dataTableOpts, {
                "sAjaxSource": 'ajax/gateway_manage',
                "bJQueryUI": true,
                "aaSorting": [[1, "asc"]],
                "aoColumns": [
                    {bSortable: false, sWidth: '3%', sName: 'file_icon', sClass: "center adminResponsiveHide"},
                    {sName: 'gateway', sWidth: '15%', sClass: "adminResponsiveHide"},
                    {sName: 'date_created', sWidth: '15%', sClass: "center"},
                    {sName: 'status', sWidth: '20%', sClass: "center"},
                    {bSortable: false, sWidth: '15%', sClass: "center"}
                ],
                "fnServerData": function (sSource, aoData, fnCallback) {
                    aoData.push({"name": "filterByUser", "value": $('#filterByUser').val()});
                    $.ajax({
                        "dataType": 'json',
                        "type": "GET",
                        "url": "ajax/gateway_manage",
                        "data": aoData,
                        "success": fnCallback
                    });
                }
            }));

            // update custom filter
            $('.dataTables_filter').html($('#customFilter').html());
        });

        function reloadTable()
        {
            oTable.fnDraw();
        }

        function addGatewayForm()
        {
            gEditGatewayId = null;
            loadAddGatewayForm();
            $('#addGatewayFormWrapper').modal("show");
        }

        function editGatewayForm(gatewayId)
        {
            gEditGatewayId = gatewayId;
            loadAddGatewayForm();
            $('#addGatewayFormWrapper').modal("show");
        }

        function loadAddGatewayForm()
        {
            $('#addGatewayForm').html({{ ta('loading_please_wait', 'Loading, please wait...')|json_encode()|raw }});
            $('#editGatewayForm').html('');
            $.ajax({
                type: "POST",
                url: "ajax/gateway_add_form",
                data: {gEditGatewayId: gEditGatewayId},
                dataType: 'json',
                success: function (json) {
                    if (json.error == true)
                    {
                        $('#addGatewayForm').html(json.msg);
                    } else
                    {
                        $('#addGatewayForm').html(json.html);
                        loadGatewayForm();
                    }

                },
                error: function () {
                    showError({{ ta('failed_loading_form_please_try_again', 'Failed loading form, please try again.')|json_encode()|raw }});
                }
            });
        }

        function loadGatewayForm() {
            $('.gateway-config-wrapper').html({{ ta('loading_please_wait', 'Loading, please wait...')|json_encode()|raw }});
            var selectedGateway = $('#gateway_id').val();
            $.ajax({
                type: "POST",
                url: "ajax/gateway_add_form_config",
                data: {selectedGateway: selectedGateway, gEditGatewayId: gEditGatewayId},
                dataType: 'json',
                success: function (json) {
                    if (json.error == true)
                    {
                        $('.gateway-config-wrapper').html(json.msg);
                    } else
                    {
                        $('.gateway-config-wrapper').html(json.html);
                    }

                },
                error: function () {
                    showError({{ ta('failed_loading_form_please_try_again', 'Failed loading form, please try again.')|json_encode()|raw }});
                }
            });
        }

        function processEnableGateway() {
            $.ajax({
                url: "ajax/gateway_add_process",
                type: 'POST',
                dataType: 'json',
                data: $('#enableGatewayForm').serialize(),
                success: function (json) {
                    if (json.error == true) {
                        showError(json.msg);
                    } else {
                        showSuccess(json.msg);
                        $('#addGatewayFormWrapper').modal("hide");
                        reloadTable();
                    }
                },
                error: function () {
                    showError({{ ta('failed_submitting_form_please_try_again', 'Failed submitting form, please try again.')|json_encode()|raw }});
                }
            });

        }
    </script>
{% endblock %}

{% block body %}
    <div class="right_col">
        <div>
            <div class="page-title">
                <div class="title_left">
                    <h3>{{ ta('manage_payment_gateways', 'Manage Payment Gateways') }}</h3>
                </div>
            </div>
            <div class="clearfix"></div>

            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    {{ msg_page_notifications|raw }}
                    <form method="POST" action="gateway_manage" name="pluginForm" id="pluginForm" autocomplete="off" class="form-horizontal form-label-left">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>{{ ta('enabled_payment_gateways', 'Enabled Payment Gateways') }}</h2>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <p>{{ ta('use_the_table_below_to_manage_all_your_enabled_payment_gateways_to_add_a_new_gateway_click_the_enable_payment_gateway_button', 'Use the table below to manage all your enabled payment gateways. To add a new gateway, click the \'Enable Payment Gateway\' button below the table.') }}</p>
                                <div class="responsiveTable">
                                    <table id='fileTable' class="table table-striped table-only-border dtLoading bulk_action">
                                        <thead>
                                            <tr>
                                                <th></th>
                                                <th class="align-left">{{ ta('gateway_header', 'Gateway') }}</th>
                                                <th class="align-left">{{ ta('date_created', 'Date Created') }}</th>
                                                <th class="align-left">{{ ta('status', 'Status') }}</th>
                                                <th class="align-left">{{ ta('actions', 'Actions') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="x_panel">
                            <div class="btn-group pull-right">
                                <a href="#" type="button" class="btn btn-primary" onclick="addGatewayForm();
                                        return false;">{{ ta('enable_payment_gateway', 'Enable Payment Gateway') }}</a>
                            </div>
                        </div>

                        <div class="x_panel">
                            <div class="x_title">
                                <h2>{{ ta('available_payment_gateways', 'Available Payment Gateways') }}</h2>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <p>{{ ta('below_is_the_full_list_of_available_gateways_before_enabling_these_on_your_site_ensure_you_ve_checked_that_the_gateway_permits', 'Below is the full list of available gateways. Before enabling these on your site, ensure you\'ve checked that the gateway permits file hosting sites and you meet the minimum merchant requirements.') }}</p>
                                <div class="available_payment_gateways">
                                    {% for availableGateway in availableGateways %}
                                        <a href="{{ availableGateway['url'] }}" target="_blank" rel="nofollow" class="gateway"><img src="{{ PLUGIN_WEB_ROOT }}/payment/assets/img/gateways/{{ availableGateway['class_name'] }}/logo.jpg" alt="{{ availableGateway['gateway_group'] }}"/></a>
                                        {% endfor %}
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="customFilter" id="customFilter" style="display: none;"></div>

    <div id="addGatewayFormWrapper" 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="addGatewayForm"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{ ta('close', 'Close') }}</button>
                    <button type="button" class="btn btn-primary" onClick="processEnableGateway();
                            return false;">{{ ta('save_gateway', 'Save Gateway') }}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}