<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php
$hints = [
    'base_url' => sprintf(
        '<div><p>%s</p><p>%s</p></div>',
        'Enter the base URL that brings shoppers to your store (Ex. http://example.com/).',
        'Leave empty for automatic detection (not recommended for production environment).'
    ),
    'encrypt_key' => sprintf(
        '<p>%s</p>',
        'Key to encrypt sensitive data such as passwords and personally identifiable customer information in the Magento database. The encryption key is stored in [your Magento install dir]/app/etc/env.php'
    ),
    'admin' => sprintf(
        '<p>%s</p>',
        'A unique URL helps keep your store and customers safer. Use only letters, numbers, and underscore characters.'
    )
];
?>

<div class="page-web-configuration">

<div class="nav-bar-outer-actions">
    <div class="outer-actions-inner-wrap">
        <div class="btn-wrap btn-wrap-triangle-right btn-wrap-next">
            <button type="button" class="btn btn-prime" ng-click="validateUrl()" dis>Next</button>
        </div>
        <div class="btn-wrap btn-wrap-triangle-left btn-wrap-prev">
            <button type="button" class="btn" ng-click="previousState()">Back</button>
        </div>
    </div>
</div>

<h2 class="page-sub-title">{{$state.current.header}}</h2>

<div
    class="message message-error"
    ng-show="validateUrl.failed !== undefined"
>
    <span class="message-text">{{validateUrl.failed}}</span>
</div>

<form
    name="webconfig"
    role="form"
    novalidate
    >

<fieldset class="form-fieldset">

    <div
        class="row form-row"
        ng-class="{'has-error': webconfig.base_url.$invalid && webconfig.submitted}"
        >
        <div class="col-m-3">
            <label class="form-label" for="baseUrl">
                Your Store Address
            </label>
        </div>
        <div class="col-m-4">
            <input
                id="baseUrl"
                class="form-el-input"
                type="url"
                name="base_url"
                ng-model="config.address.base_url"
                ng-class="{'invalid': webconfig.base_url.$invalid && webconfig.submitted}"
                ng-init="config.address.auto_base_url = '<?= $this->autoBaseUrl ?>'; fillBaseURL();"
                ng-blur="addSlash()"
                ng-change="populateHttps()"
                ng-pattern="/^(https?:\/\/).*$/"
                tooltip-placement="right"
                tooltip-html-unsafe="<?= $hints['base_url'] ?>"
                tooltip-trigger="focus"
                tooltip-append-to-body="true"
                >
            <div class="error-container">
                <span ng-show="!webconfig.base_url.valid
                                || webconfig.base_url.$error.required
                                || webconfig.base_url.$error.url"
                >
                    Please enter a valid base URL path. (ex: http://www.example.com/)
                </span>
            </div>
        </div>
    </div>

    <div
        class="row form-row"
        ng-class="{'has-error': webconfig.admin.$invalid && webconfig.submitted}"
        >
        <div class="col-m-3">
            <label class="form-label required" for="admin">
                Magento Admin Address
            </label>
        </div>
        <div class="col-m-4">
            <div class="form-el-insider-wrap">
                <div class="form-el-insider">
                    {{config.address.actual_base_url}}
                </div>
                <div class="form-el-insider-input">
                    <input
                        id="admin"
                        class="form-el-input"
                        type="text"
                        name="admin"
                        ng-pattern="/^[a-zA-Z0-9_]+$/"
                        ng-model="config.address.admin"
                        ng-class="{'invalid' : webconfig.admin.$invalid && webconfig.submitted }"
                        ng-init="config.address.admin = '<?= $this->autoAdminPath ?>';"
                        required
                        tooltip-placement="right"
                        tooltip-html-unsafe="<?= $hints['admin'] ?>"
                        tooltip-trigger="focus"
                        tooltip-append-to-body="true"
                        >
                    <div class="error-container">
                        <span ng-show="webconfig.admin.$error">
                            Please enter a valid admin URL path. Use only letters, numbers, and underscore characters.
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</fieldset>

<fieldset class="form-fieldset">

    <legend
        class="form-legend-expand"
        ng-click="updateOnExpand(config.advanced)"
        ng-class="{'expanded' : config.advanced.expanded}"
        >
        Advanced Options
    </legend>

    <div ng-show="config.advanced.expanded">

        <div class="row form-row">
            <div class="col-m-3">
                <label class="form-label">
                    HTTPS Options
                </label>
            </div>
            <div class="col-m-4">
                <div class="form-row">
                    <input
                        id="httpsFront"
                        class="form-el-checkbox"
                        type="checkbox"
                        ng-model="config.https.front"
                        ng-checked="config.https.front"
                        >
                    <label class="form-label" for="httpsFront">
                        Use HTTPS for Magento Storefront
                    </label>
                </div>
                <div class="form-row">
                    <input
                        id="httpsAdmin"
                        class="form-el-checkbox"
                        type="checkbox"
                        ng-model="config.https.admin"
                        ng-checked="config.https.admin"
                        >
                    <label class="form-label" for="httpsAdmin">
                        Use HTTPS for Magento Admin
                    </label>
                </div>
            </div>
        </div>

        <div class="row form-row" ng-show="showHttpsField()">
            <div class="col-m-3">
                <label
                    ng-show="config.https.front || config.https.admin"
                    class="form-label"
                    for="https"
                    >
                    Your HTTPS Store address:
                </label>
            </div>
            <div class="col-m-4">
                <input
                    id="https"
                    class="form-el-input"
                    type="url"
                    name="https"
                    ng-model="config.https.text"
                    ng-class="{'invalid': webconfig.https.$invalid && webconfig.submitted}"
                    ng-if="config.https.front || config.https.admin"
                    ng-focus=""
                    ng-pattern="/^(https?:\/\/).*$/"
                    required
                    >
                <div class="error-container">
                    <span ng-show="!webconfig.https.$error.valid
                                    || webconfig.https.$error.required
                                    || webconfig.https.$error.url"
                    >
                        Please enter a valid HTTPS base URL path. (ex: https://www.example.com/)
                    </span>
                </div>
            </div>
        </div>

        <div class="row form-row">
            <div class="col-m-3">
                <label class="form-label">
                    Apache Rewrites
                </label>
            </div>
            <div class="col-m-4">
                <input
                    id="apacheRewrites"
                    class="form-el-checkbox"
                    type="checkbox"
                    ng-model="config.rewrites.allowed"
                    >
                <label class="form-label" for="apacheRewrites">
                    Use Apache Web Server Rewrites
                </label>
            </div>
        </div>

        <div class="row form-row">
            <div class="col-m-3">
                <label class="form-label required">
                    Encryption Key
                </label>
            </div>
            <div class="col-m-4">

                <div class="form-row">
                    <input
                        id="encryptionKey"
                        class="form-el-radio"
                        type="radio"
                        ng-model="config.encrypt.type"
                        value="magento"
                        >
                    <label class="form-label" for="encryptionKey">
                        I want to use a Magento generated key
                    </label>
                </div>

                <div class="form-row">
                    <input
                        id="encryptionType"
                        class="form-el-radio"
                        type="radio"
                        ng-model="config.encrypt.type"
                        value="user"
                        >
                    <label class="form-label" for="encryptionType">
                        I want to use my own encryption key
                    </label>
                </div>

                <div
                    class="form-row"
                    ng-class="{'has-error': webconfig.key.$invalid && webconfig.submitted}"
                    ng-if="showEncryptKey()"
                    >
                    <input
                        class="form-el-input"
                        type="text"
                        name="key"
                        ng-model="config.encrypt.key"
                        ng-class="{'invalid': webconfig.key.$invalid && webconfig.submitted}"
                        tooltip-placement="right"
                        tooltip-html-unsafe="<?= $hints['encrypt_key'] ?>"
                        tooltip-trigger="focus"
                        tooltip-append-to-body="true"
                        ng-minlength="32"
                        ng-maxlength="32"
                        ng-pattern="/^\S+$/"
                        required
                        >
                    <div class="error-container">
                        <span ng-show="webconfig.key.$error.required">
                            You must enter an encryption key.
                        </span>
                        <span ng-show="webconfig.key.$error.minlength
                                        || webconfig.key.$error.maxlength
                                        || webconfig.key.$error.pattern"
                        >
                            Encryption key must be 32 character string without any white space.
                        </span>
                    </div>
                </div>

            </div>
        </div>

        <div class="row form-row">
            <div class="col-m-3">
                <label class="form-label required">
                    Session Save
                </label>
            </div>
            <div class="col-m-4">
                <select
                    name="session"
                    class="form-el-select"
                    ng-model="config.sessionSave.type"
                    ng-class="{'invalid': webconfig.session.$invalid && webconfig.submitted}"
                    tooltip-placement="right"
                    tooltip-html-unsafe="The location of session. You can change this later in Magento Admin."
                    tooltip-trigger="focus"
                    tooltip-append-to-body="true"
                    >
                    <?php foreach ($this->sessionSave as $value):?>
                        <?= "<option value=\"" . $value . "\">" . ucfirst($value) . "</option>" ?>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>
    </div>

</fieldset>

</form>

</div>
