@{
    Layout = "~/Views/Shared/_LoginLayout.cshtml";
}

<style>
    #login .inner_wrapper {
        width: 500px !important;
        max-width: 95vw !important;
    }

    .device-id-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2rem 1rem;
    }

    .device-id-card {
        background: #ffffff;
        border: 1px solid #e2e2e2;
        border-radius: 12px;
        padding: 2rem 2.5rem;
        width: 100%;
        max-width: 560px;
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    .device-id-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 1.75rem;
        padding-bottom: 1.25rem;
        border-bottom: 1px solid #e2e2e2;
    }

    .device-id-header img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }

    .device-id-header-text p {
        font-size: 11px;
        font-weight: 500;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        margin: 0 0 2px;
    }

    .device-id-header-text h2 {
        font-size: 17px;
        font-weight: 500;
        margin: 0;
        color: #1a1a1a;
    }

    .device-id-field {
        margin-bottom: 12px;
    }

    .device-id-field label {
        display: block;
        font-size: 13px;
        color: #666;
        margin-bottom: 6px;
    }

    .device-id-field input[type="text"],
    .device-id-field input[type="password"] {
        width: 100%;
        box-sizing: border-box;
        padding: 9px 12px;
        font-size: 14px;
        border: 1px solid #d0d0d0;
        border-radius: 8px;
        outline: none;
        color: #1a1a1a;
        transition: border-color 0.15s;
    }

    .device-id-field input[type="text"]:focus,
    .device-id-field input[type="password"]:focus {
        border-color: #4a90d9;
        box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15);
    }

    .device-id-submit {
        width: 100%;
        margin-top: 1.25rem;
        padding: 10px;
        font-size: 14px;
        font-weight: 500;
        color: #1a1a1a;
        background: #ffffff;
        border: 1px solid #d0d0d0;
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.15s;
    }

    .device-id-submit:hover {
        background: #f5f5f5;
    }

    .device-id-submit:active {
        background: #ebebeb;
    }

    .device-id-result {
        margin-top: 1.5rem;
        padding: 1rem;
        background: #f7f7f7;
        border: 1px solid #e2e2e2;
        border-radius: 8px;
    }

    .device-id-result p.result-label {
        font-size: 11px;
        font-weight: 500;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin: 0 0 6px;
    }

    .device-id-result p.result-url {
        font-size: 13px;
        color: #1a1a1a;
        margin: 0;
        word-break: break-all;
        line-height: 1.6;
    }

    .login-secure-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-top: 1.25rem;
        font-size: 11px;
        color: #aaa;
        letter-spacing: 0.04em;
    }

    .secure-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: #4CAF50;
        display: inline-block;
        flex-shrink: 0;
    }

    /* Tab Strip */
    .tab-strip {
        display: flex;
        gap: 4px;
        margin-bottom: 1.5rem;
        border-bottom: 1px solid #e2e2e2;
        padding-bottom: 0;
    }

    .tab-btn {
        padding: 7px 16px;
        font-size: 13px;
        font-weight: 500;
        color: #888;
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        cursor: pointer;
        margin-bottom: -1px;
        transition: color 0.15s, border-color 0.15s;
    }

    .tab-btn:hover {
        color: #1a1a1a;
    }

    .tab-btn.active {
        color: #1a1a1a;
        border-bottom: 2px solid #4a90d9;
    }

    /* Settings Tab */
    .settings-block {
        background: #f7f7f7;
        border: 1px solid #e2e2e2;
        border-radius: 8px;
        padding: 1rem 1.25rem;
        margin-bottom: 1rem;
    }

    .settings-section-label {
        font-size: 11px;
        font-weight: 500;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        margin: 0 0 0.75rem;
    }

    .settings-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 6px 0;
        border-bottom: 1px solid #ebebeb;
        gap: 12px;
    }

    .settings-row:last-child {
        border-bottom: none;
    }

    .settings-key {
        font-size: 13px;
        color: #666;
        flex-shrink: 0;
        max-width: 45%;
    }
    .settings-key i {
    font-size: 11px;
    color: #aaa;
    }

    .settings-val {
        font-size: 13px;
        color: #1a1a1a;
        text-align: right;
        word-break: break-all;
    }

    .settings-note {
        font-size: 12px;
        color: #888;
        line-height: 1.6;
        margin-top: 0.5rem;
    }
</style>

<div class="device-id-wrapper">
    <div class="device-id-card">

        <!-- Tab Strip -->
        <div class="tab-strip">
            <button class="tab-btn active" onclick="switchTab('generator', event)">URL Generator</button>
            <button class="tab-btn" onclick="switchTab('settings', event)">MFP Settings</button>
        </div>

        <!-- TAB 1: URL Generator -->
        <div id="tab-generator">

            <div class="device-id-header">
                <img src="data:image/jpeg;base64,[encoded data, 5308 characters]"
                     alt="URL Generator" />
                <div class="device-id-header-text">
                    <p>FaxCore Sharp OSA Connector</p>
                    <h2>Auto Login URL Generator</h2>
                </div>
            </div>

            @using (Html.BeginForm("EncryptText", "Home", FormMethod.Post))
            {
                <div class="device-id-field">
                    <label for="name">Username</label>
                    <input type="text" id="name" name="name" required placeholder="Enter FaxCore Username" autocomplete="off" />
                </div>

                <div class="device-id-field">
                    <label for="password">Password</label>
                    <input type="password" id="password" name="password" required placeholder="********" autocomplete="new-password" />
                </div>

                <input type="submit" class="device-id-submit" id="submitBtn" value="Create URL" />
            }

            @if (!string.IsNullOrEmpty(ViewBag.FullUrl))
            {
                <script>
                    document.addEventListener("DOMContentLoaded", function () {
                        var btn = document.getElementById("submitBtn");
                        var newBtn = document.createElement("button");
                        newBtn.type = "button";
                        newBtn.className = "device-id-submit";
                        newBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:6px;margin-bottom:2px;"><polyline points="15 18 9 12 15 6"></polyline></svg>Create another URL';
                        newBtn.addEventListener("click", function () {
                            window.location.href = window.location.pathname;
                        });
                        btn.parentNode.replaceChild(newBtn, btn);
    document.getElementById("name").closest(".device-id-field").style.display = "none";
    document.getElementById("password").closest(".device-id-field").style.display = "none";
                    });
                </script>

                <div class="device-id-result">
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
                        <p class="result-label" style="margin:0;">Login URL</p>
                        <button onclick="copyUrl()" id="copyBtn" title="Copy URL" style="background:none;border:none;cursor:pointer;padding:2px 4px;color:#888;display:flex;align-items:center;gap:5px;font-size:12px;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                            </svg>
                            <span id="copyLabel">Copy</span>
                        </button>
                    </div>
                    <p class="result-url">@ViewBag.FullUrl</p>
                </div>
<p style="
    font-size: 11px;
    color: #e07b00;
    margin: 10px 0 0;
    line-height: 1.5;
">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"
         fill="none" stroke="currentColor" stroke-width="2.5"
         stroke-linecap="round" stroke-linejoin="round"
         style="vertical-align:middle;margin-right:4px;margin-bottom:2px;">
        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
        <line x1="12" y1="9" x2="12" y2="13"></line>
        <line x1="12" y1="17" x2="12" y2="17"></line>
    </svg>
    Keep this URL private. Treat it like a password and share only with trusted devices.
</p>
            }

        </div>

        <!-- TAB 2: Settings -->
        <div id="tab-settings" style="display:none;">

            <div class="device-id-header">
                <img src="data:image/jpeg;base64,[encoded data, 5308 characters]"
                     alt="URL Generator" />
                <div class="device-id-header-text">
                    <p>FaxCore Sharp OSA Connector</p>
                    <h2>Sharp MFP Settings</h2>
                </div>
            </div>

            <div class="settings-block">
                <p class="settings-section-label">Standard Application Registration</p>

                <div class="settings-row">
                    <span class="settings-key">Application Name</span>
                    <span class="settings-val">FaxCore OSA Connector</span>
                </div>

                <div class="settings-row">
                    <span class="settings-key">Address for Application UI</span>
                    <span class="settings-val"></span>
                </div>

                <div class="settings-row">
                    <span class="settings-key"><i>Option 1</i></span>
                    <span class="settings-val">Auto Login URL created here</span>
                </div>

                <div class="settings-row">
                    <span class="settings-key"><i>Option 2</i></span>
                    <span class="settings-val">https://FaxCore_FQDN/SharpOSA/Login</span>
                </div>

                <div class="settings-row">
                    <span class="settings-key">Timeout</span>
                    <span class="settings-val">60 seconds</span>
                </div>

                <div class="settings-row">
                    <span class="settings-key">Browser</span>
                    <span class="settings-val">HTML Browser n2.0</span>
                </div>

                <div class="settings-row">
                    <span class="settings-key">Extended Platform</span>
                    <span class="settings-val">&#10004; Enabled</span>
                </div>
            </div>

            <p class="settings-note">Enter these values in your Sharp MFP under:<br /><strong>System Settings &rarr; Sharp OSA Settings &rarr; <br>Standard Application Settings</strong></p>

        </div>

        <!-- SECURITY BADGE (always visible) -->
        <div class="login-secure-badge">
            <span class="secure-dot"></span> Secured with TLS 1.2
        </div>

    </div>
</div>

<script>
    function switchTab(tab, event) {
        document.getElementById('tab-generator').style.display = tab === 'generator' ? 'block' : 'none';
        document.getElementById('tab-settings').style.display = tab === 'settings' ? 'block' : 'none';
        document.querySelectorAll('.tab-btn').forEach(function (btn) {
            btn.classList.remove('active');
        });
        event.target.classList.add('active');
    }

    function copyUrl() {
        var url = "@ViewBag.FullUrl";
        navigator.clipboard.writeText(url).then(function () {
            var label = document.getElementById("copyLabel");
            var btn = document.getElementById("copyBtn");
            label.textContent = "Copied!";
            btn.style.color = "#4a90d9";
            setTimeout(function () {
                label.textContent = "Copy";
                btn.style.color = "#888";
            }, 2000);
        });
    }
</script>
