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

{% block title %}{{ ta('account_packages', 'Account Packages') }}{% endblock %}
{% block selected_page %}account_level{% endblock %}
{% block selected_sub_page %}account_level{% endblock %}

{% block body %}
<script>
    oTable = null;
    gFileServerId = null;
    gEditUserLevelId = null;
    gTestFileServerId = null;
    gDeleteFileServerId = null;
    $(document).ready(function () {
        // datatable
        oTable = $('#packagesTable').dataTable($.extend(dataTableOpts, {
            "sAjaxSource": 'ajax/account_package_manage',
            "aaSorting": [[1, "asc"]],
            "aoColumns": [
                {bSortable: false, sWidth: '3%', sName: 'file_icon', sClass: "center adminResponsiveHide"},
                {bSortable: false},
                {bSortable: false, sWidth: '13%', sClass: "center adminResponsiveHide"},
                {bSortable: false, sWidth: '13%', sClass: "center adminResponsiveHide"},
                {bSortable: false, sWidth: '13%', sClass: "center adminResponsiveHide"},
                {bSortable: false, sWidth: '13%', sClass: "center adminResponsiveHide"},
                {bSortable: false, sWidth: '12%', sClass: "center adminResponsiveHide"},
                {bSortable: false, sWidth: '20%', sClass: "center"}
            ],
            "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_packages_in_the_current_filters', 'There are no packages in the current filters.')|json_encode()|raw }}
            })
        }));

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

    function editPackageForm(userLevelId)
    {
        gEditUserLevelId = userLevelId;
        showBasicModal({{ ta('loading_dots', 'Loading...')|json_encode()|raw }}, {{ ta('edit_package', 'Edit Package')|json_encode()|raw }}, '<button type="button" class="btn btn-primary" onClick="processAddUserPackage(); return false;">{{ ta('update_package', 'Update Package') }}</button>');
        loadEditUserPackageForm();
    }
    
    function loadEditUserPackageForm()
    {
        $.ajax({
            type: "POST",
            url: "ajax/account_package_manage_add_form",
            data: {gEditUserLevelId: gEditUserLevelId},
            dataType: 'json',
            success: function (json) {
                if (json.error == true)
                {
                    setBasicModalContent(json.msg);
                } else
                {
                    setBasicModalContent(json.html);
                }

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                setBasicModalContent(XMLHttpRequest.responseText);
            }
        });
    }

    function addPackageForm()
    {
        gEditUserLevelId = null;
        showBasicModal({{ ta('loading_dots', 'Loading...')|json_encode()|raw }}, {{ ta('add_package', 'Add Package')|json_encode()|raw }}, '<button type="button" class="btn btn-primary" onClick="processAddUserPackage(); return false;">{{ ta('add_package', 'Add Package') }}</button>');
        loadAddPackageForm();
    }
    
    function loadAddPackageForm()
    {
        $.ajax({
            type: "POST",
            url: "ajax/account_package_manage_add_form",
            data: {},
            dataType: 'json',
            success: function (json) {
                if (json.error == true)
                {
                    setBasicModalContent(json.msg);
                } else
                {
                    setBasicModalContent(json.html);
                }

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                setBasicModalContent(XMLHttpRequest.responseText);
            }
        });
    }

    function processAddUserPackage()
    {
        // get data
        if (gEditUserLevelId !== null)
        {
            formData = $('#editUserPackageForm').serialize();
        }
        else
        {
            formData = $('#addUserPackageForm').serialize();
        }
        formData += "&existing_user_level_id=" + encodeURIComponent(gEditUserLevelId);

        $.ajax({
            type: "POST",
            url: "ajax/account_package_manage_add_process",
            data: formData,
            dataType: 'json',
            success: function (json) {
                if (json.error == true)
                {
                    showError(json.msg, 'popupMessageContainer');
                } else
                {
                    showSuccess(json.msg);
                    reloadTable();
                    hideModal();
                }

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                showError(XMLHttpRequest.responseText, 'popupMessageContainer');
            }
        });

    }
    
    function toggleElements(ele)
    {
        var eleId = $(ele).prop('id');
        if($(ele).val() == 1) {
            $('.'+eleId+' input').prop("disabled", false);
        }
        else {
            $('.'+eleId+' input').prop("disabled", true);
        }
    }
    
    function reloadTable()
    {
        oTable.fnDraw(false);
    }
</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('existing_packages', 'Existing Packages') }}</h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <table id="packagesTable" class="table table-striped table-only-border dtLoading bulk_action">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th class="align-left">{{ ta("package_label", "Package Label") }}</th>
                                    <th class="align-left">{{ ta("users", "Users") }}</th>
                                    <th class="align-left">{{ ta("allow_upload", "Allow Upload") }}</th>
                                    <th class="align-left">{{ ta("max_upload_size", "Max Upload Size") }}</th>
                                    <th class="align-left">{{ ta("storage", "Storage") }}</th>
                                    <th class="align-left">{{ currentProductType == 'cloudable'?ta("inactive_files_days", "Inactive Files Days"):ta("on_upgrade_page", "Upgrade Page") }}</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 class="clearfix"></div>
                        <br/><p>{{ ta('only_packages_which_have_a_package_type_of_paid_have_the_option_to_set_pricing', 'Note: Only packages which have a "Package Type" of "Paid" have the option to set pricing.') }}</p>
                    </div>
                </div>
                
                <div class="x_panel">
                    <div class="btn-group">
                        <a href="#" type="button" class="btn btn-primary" onClick="addPackageForm(); return false;">{{ ta('new_account_package', 'New Account Package') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="customFilter" id="customFilter" style="display: none;">
    <label>
        {{ ta('admin_filter', 'Filter') }}:
        <input name="filterText" id="filterText" type="text" value="" onKeyUp="reloadTable(); return false;" style="width: 180px;" class="form-control input-sm"/>
    </label>
</div>
{% endblock %}