<%@ Page Title="Percentage Text" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Percentage Text - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Percentage Text</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<div class="demo-card">
    <div class="demo-card-header">Percentage Text Overlay</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Display a percentage label on top of the progress bar to give users
            a clear numeric indication of upload completion.
        </p>

        <style>
            #pctBar {
                width: 100%; height: 28px;
                background: #e5e7eb; border-radius: 0.5rem;
                position: relative; overflow: hidden;
                margin-top: 1rem; display: none;
            }
            #pctFill {
                height: 100%; width: 0%;
                background: #3b82f6; border-radius: 0.5rem;
                transition: width 0.2s ease;
            }
            #pctLabel {
                position: absolute; top: 0; left: 0; right: 0;
                text-align: center; line-height: 28px;
                font-size: 0.8rem; font-weight: 600; color: #1e293b;
            }
        </style>

        <div id="pctUploader"></div>
        <div id="pctBar">
            <div id="pctFill"></div>
            <span id="pctLabel">0%</span>
        </div>

        <div class="code-panel">
            <pre><code>&lt;div id="uploader"&gt;&lt;/div&gt;
&lt;div id="pctBar"&gt;
  &lt;div id="pctFill"&gt;&lt;/div&gt;
  &lt;span id="pctLabel"&gt;0%&lt;/span&gt;
&lt;/div&gt;

AjaxUploader.create(el, {
  uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
  onTaskProgress: function(task, pct) {
    fill.style.width = pct + '%';
    label.textContent = Math.round(pct) + '%';
  }
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    (function () {
        var bar = document.getElementById('pctBar');
        var fill = document.getElementById('pctFill');
        var label = document.getElementById('pctLabel');
        AjaxUploader.create(document.getElementById('pctUploader'), {
            uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
            multiple: true,
            autoUpload: true,
            onTaskStart: function () { bar.style.display = 'block'; },
            onTaskProgress: function (task, pct) {
                fill.style.width = pct + '%';
                label.textContent = Math.round(pct) + '%';
            },
            onTaskComplete: function () {
                fill.style.width = '100%';
                label.textContent = '100%';
            }
        });
    })();
</script>
</asp:Content>
