<!--
 ~ Copyright 2022 youngmonkeys.org
 ~ 
 ~ Licensed under the ezyplatform, Version 1.0.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~ 
 ~     https://youngmonkeys.org/licenses/ezyplatform-1.0.0.txt
 ~ 
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
-->

<!DOCTYPE html>
<html
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{ezyadmin}">

<body>
<div layout:fragment="content" class="row">
    <div class="col-md-2 col-4"><label>[[#{type}]]:</label></div>
    <div class="col-md-10 col-8" id="moduleType"></div>
    <div class="col-md-2 col-4"><label>[[#{version}]]:</label></div>
    <div class="col-md-10 col-8">
        <div class="d-flex align-items-start">
            <span id="moduleVersion">1.0.0</span>
            <button class="btn btn-link pt-0 d-none" id="updateProjectButton">
                [[#{update_to}]] <span id="updateProjectVersion">1.0.0</span>
                <i class="fas fa-external-link-square-alt"></i>
            </button>
        </div>
    </div>
    <div class="col-md-2 col-4"><label>[[#{package_name}]]:</label></div>
    <div class="col-md-10 col-8" id="modulePackageName">[[#{nothing}]]</div>
    <div class="col-md-2 col-4"><label>[[#{dependencies}]]:</label></div>
    <div class="col-md-10 col-8" id="moduleDependencies">[[#{nothing}]]</div>
    <div class="col-md-2 col-4"><label>[[#{updated_by}]]:</label></div>
    <div class="col-md-10 col-8" id="updatedBy">[[#{unknown}]]</div>
    <div class="col-md-2 col-4"><label>[[#{last_updated}]]:</label></div>
    <div class="col-md-10 col-8" id="lastUpdated">2021-01-01 10:00:00</div>
    <div class="col-md-12 pt-3 pb-3">
        <button id="activateButton" class="btn btn-outline-primary pt-1 pb-1 d-none">
            [[#{activate}]]
        </button>
        <button id="deactivateButton" class="btn btn-outline-danger pt-1 pb-1 d-none">
            [[#{deactivate}]]
        </button>
        <button id="deleteButton" class="btn btn-outline-danger pt-1 pb-1 d-none">
            [[#{delete}]]
        </button>
        <button type="button" class="btn btn-outline-info pt-1 pb-1"
                onclick="ezyadmin.onUpdateManuallyButtonClick();">
            [[#{update_manually}]]
        </button>
    </div>
    <div class="col-12">
        <hr class="mt-3 mb-3"/>
    </div>
    <div class="col-12">
        <h3>[[#{description}]]</h3>
        <div id="moduleDescription">[[#{there_is_no_description}]]</div>
    </div>
    <div class="col-12">
        <hr class="mt-3 mb-3"/>
    </div>
    <div class="col-12">
        <span class="d-flex align-items-center">
            <h3>[[#{settings}]]</h3>
            <a id="sqlScripts" href="#" class="btn btn-outline-primary pt-1 pb-1 ml-2 mb-3 d-none" target="_blank">
                [[#{sql_scripts}]] <i class="fas fa-external-link-alt"></i>
            </a>
        </span>
    	<div id="moduleSettings">[[#{there_is_no_settings}]]</div>
    </div>
    <div class="col-12">
        <hr class="mt-3 mb-3"/>
    </div>
    <div class="col-12 mb-3">
        <span class="d-flex align-items-center">
            <h3>[[#{project_details}]]</h3>
            <a id="projectMoreDetails" href="#" class="btn btn-outline-primary pt-1 pb-1 ml-2 mb-3 d-none" target="_blank">
                [[#{view_more}]] <i class="fas fa-external-link-alt"></i>
            </a>
        </span>
        <div class="row">
            <div class="col-md-2 col-4">
                <label>[[#{author}]]:</label>
            </div>
            <div class="col-md-10 col-8" id="projectAuthor">[[#{unknown}]]</div>
            <div class="col-md-2 col-4">
                <label>[[#{category}]]:</label>
            </div>
            <div class="col-md-10 col-8" id="projectCategory">[[#{unknown}]]</div>
            <div class="col-md-2 col-4">
                <label>[[#{tagline}]]:</label>
            </div>
            <div class="col-md-10 col-8" id="projectTagline">[[#{there_is_no_tagline}]]</div>
            <div class="col-md-2 col-4">
                <label>[[#{includes}]]:</label>
            </div>
            <div class="col-md-10 col-8" id="includeModuleTypes">Nothing</div>
            <div class="col-md-2 col-4">
                <label>[[#{description}]]:</label>
            </div>
            <div class="col-md-10 col-8" id="projectDescription">[[#{there_is_no_description}]]</div>
        </div>
    </div>
</div>
<th:block layout:fragment="modals">
<th:block th:replace="~{modules/modals :: content}" />
<th:block th:replace="~{modules/modals :: upload-project}" />
<th:block th:replace="~{modules/modals :: update-to-latest-ezyplatform}" />
</th:block>
<script layout:fragment="scripts" th:inline="javascript">
/*<![CDATA[*/
ezyadmin.currentModuleType = /*[[${moduleType}]]*/ '';
ezyadmin.currentModuleName = /*[[${moduleName}]]*/ '';
ezyadmin.currentModuleProjectName = /*[[${moduleProjectName}]]*/ '';
ezyadmin.currentModuleNewApplyItemVersion = /*[[${newApplyItemVersion}]]*/ '';
/*]]>*/

ezyadmin.canNotDeleteProjectNames = [
    'welcome',
    'socket-monitor'
];

ezyadmin.canNotDeactivateProjectNames = [
    'socket-monitor'
];

// =========== onclick ==========
$('#activateButton').click(e => {
    ezyadmin.showActivateModuleModal(
        ezyadmin.currentModuleType,
        ezyadmin.currentModuleName,
        ezyadmin.currentSelectedModule.projectName,
        ezyadmin.currentSelectedModule.version
    )
});

$('#deactivateButton').click(e => {
    ezyadmin.showDeactivateModuleModal(
        ezyadmin.currentModuleType,
        ezyadmin.currentModuleName,
        ezyadmin.currentSelectedModule.projectName,
        ezyadmin.currentSelectedModule.version
    )
});

$('#deleteButton').click(e => {
    ezyadmin.showDeleteModuleModal(
        ezyadmin.currentModuleType,
        ezyadmin.currentModuleName,
        ezyadmin.currentSelectedModule.projectName,
        ezyadmin.currentSelectedModule.version
    )
});

$('#updateProjectButton').click(e => {
    ezyadmin.installProject(
        ezyadmin.currentModuleName,
        ezyadmin.marketProjectVersion
    );
});

// =========== module details =========
ezyadmin.fetchModuleDetails = function() {
	$.ajax({
        url: '/api/v1/modules/' + ezyadmin.currentModuleType + '/' + ezyadmin.currentModuleName,
        type: 'GET',
        dataType: 'json',
    })
    .done(function(module) {
		ezyadmin.currentSelectedModule = module;
        ezyadmin.renderModuleDetails(module);
        ezyadmin.fetchProjectDetails();
        ezyadmin.hideLoadingScreen();
    })
    .fail(function(data) {
        ezyadmin.processGetApiErrors(data);
    });
}

// ===================== project ===========
ezyadmin.fetchProjectDetails = function() {
     $.ajax({
        url: '/api/v1/released-projects/' + ezyadmin.currentModuleName,
        type: 'GET',
        dataType: 'json',
    })
    .done(function(data) {
        if (data.latestVersion) {
            ezyadmin.marketProjectVersion = data.latestVersion.name;
        }
        ezyadmin.renderProjectDetails(data);
    })
    .fail(function(e) {
    	ezyadmin.fetchProjectModuleTypes();
    });
}

ezyadmin.fetchProjectModuleTypes = function() {
    $.ajax({
        url: '/api/v1/projects/' + ezyadmin.currentModuleName + '/module-types',
        type: 'GET',
        dataType: 'json',
    })
    .done(function(moduleTypes) {
		 $('#includeModuleTypes').text(ezyadmin.getModuleTypeNames(moduleTypes));
    })
    .fail(function(e) {
    	ezyadmin.processGetApiErrors(e);
    });
}

ezyadmin.renderModuleDetails = function(module) {
    $('#moduleType').text(ezyadmin.getModuleTypeName(module.typeName));
    $('#moduleVersion').text(module.version);
    $('#modulePackageName').text(module.packageName);
    if (module.updatedBy) {
        $('#updatedBy').html(
            '<a href="/admins/' + module.updatedBy.username + '">' +
                (module.updatedBy.displayName || module.updatedBy.username) +
            '</a>'
        );
    }
    $('#lastUpdated').text(ezyadmin.formatTimeStamp(module.lastUpdated));
    if (module.active) {
        if (ezyadmin.canNotDeactivateProjectNames.indexOf(module.name) < 0) {
            $('#deactivateButton').removeClass('d-none');
        }
    } else {
        $('#activateButton').removeClass('d-none');
        if (ezyadmin.canNotDeleteProjectNames.indexOf(module.name) < 0) {
            $('#deleteButton').removeClass('d-none');
        }
    }
    if (module.description) {
        $('#moduleDescription').html(module.description);
    }
    if (module.containsSqlScripts) {
        $('#sqlScripts')
            .removeClass('d-none')
            .attr('href', '/api/v1/projects/' + module.name + '/sql');
    }
    if (module.settings) {
        $('#moduleSettings').html(module.settings);
    } else {
        var settingsHtml = ezyadmin.buildSettingsFromMenu(module.menu);
        if (settingsHtml) {
            $('#moduleSettings').html(settingsHtml);
        }
    }
    $('#moduleDependencies').text(
        ezyadmin.joinToString(
            module.dependencies,
            ', ',
            it => it.projectName + ':' + it.projectVersion
        )
    );

    // ======== project =================
    if (module.authorName) {
        if (module.authorUrl === '' || module.authorUrl == '/not-found') {
            $('#projectAuthor').text(module.authorName);
        } else {
            $('#projectAuthor').html('<a href="' + module.authorUrl + '" target="_blank">' + module.authorName + '</a>');
        }
    }
}

ezyadmin.buildSettingsFromMenu = function(menu) {
    if (!menu || (!menu.url && !menu.menuItems)) {
        return '';
    }
    var html = '<ul>';
    if (menu.url) {
        html += '<li><a href="' + menu.url + '">' + ezyadmin.toDisplayString(menu.name) + '</a></li>'
    }
    if (menu.menuItems) {
        menu.menuItems.forEach(menuItem => {
            html += '<li><a href="' + menuItem.url + '">' + ezyadmin.toDisplayString(menuItem.name) + '</a></li>'
        });
    }
    html += '</ul>'
    return html;
}

ezyadmin.renderProjectDetails = function(project) {
    $('#projectMoreDetails')
        .removeClass('d-none')
        .attr('href', ezyadmin.ezyplatformUrl + '/market/items/' + project.name);
    $('#projectAuthor').html(
        '<a href="' + ezyadmin.ezyplatformUrl + '/authors/' + project.author.uuid + '" target="_blank">' +
            project.author.name +
        '</a>'
    );
    $('#projectCategory').text(project.category.displayName);
    $('#projectTagline').text(project.shortDescription);
    $('#includeModuleTypes').text(ezyadmin.getModuleTypeNames(project.includeModuleTypes));
    $('#projectDescription').html(ezyadmin.removeHtmlTagAndSub(project.description, 300));
    if (project.latestVersion
        && ezyadmin.compareVersions(project.latestVersion.name, ezyadmin.currentSelectedModule.version)
        && ezyadmin.compareVersions(project.latestVersion.name, ezyadmin.currentModuleNewApplyItemVersion)
    ) {
        $('#updateProjectVersion').text(project.latestVersion.name);
        $('#updateProjectButton').removeClass('d-none');
    }
}

ezyadmin.fetchModuleDetails();
</script>
<th:block layout:fragment="post-scripts">
<script th:replace="~{modules/scripts :: scripts}" />
<script th:replace="~{modules/modals :: scripts}" />
<script th:replace="~{modules/modals :: upload-project-scripts}" />
<script th:replace="~{ezyplatform/scripts :: scripts}" />
</th:block>
</body>

</html>
