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

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

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

<div class="demo-card">
    <div class="demo-card-header">Custom Progress via onTaskProgress</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Build a fully custom progress display using the onTaskProgress callback. This example
            shows a circular progress indicator, speed gauge, and detailed statistics.
        </p>

        <au:AjaxFileUpload ID="Uploader1" runat="server" />

        <div class="mt-3 d-flex align-items-center gap-4">
            <div class="text-center">
                <svg id="circleProgress" width="100" height="100" viewBox="0 0 100 100">
                    <circle cx="50" cy="50" r="42" fill="none" stroke="#e9ecef" stroke-width="8"/>
                    <circle id="progressCircle" cx="50" cy="50" r="42" fill="none" stroke="#0d6efd"
                            stroke-width="8" stroke-dasharray="264" stroke-dashoffset="264"
                            transform="rotate(-90 50 50)" stroke-linecap="round"/>
                    <text id="percentText" x="50" y="54" text-anchor="middle" font-size="18" fill="#333">0%</text>
                </svg>
            </div>
            <div class="flex-grow-1">
                <div class="mb-1"><small class="text-muted">File:</small> <span id="fileName">--</span></div>
                <div class="mb-1"><small class="text-muted">Speed:</small> <span id="speed">--</span></div>
                <div class="mb-1"><small class="text-muted">Uploaded:</small> <span id="uploaded">--</span></div>
                <div><small class="text-muted">ETA:</small> <span id="eta">--</span></div>
            </div>
        </div>

        <div class="code-panel">
            <pre><code>var uploader = AjaxUploader.getInstance('Uploader1');
uploader.on('taskProgress', function(task) {
    var pct = task.percent;
    var offset = 264 - (264 * pct / 100);
    circle.setAttribute('stroke-dashoffset', offset);
    percentText.textContent = Math.round(pct) + '%';
    speed.textContent = AjaxUploader.formatSize(task.speed) + '/s';
    uploaded.textContent = AjaxUploader.formatSize(task.loaded) +
        ' / ' + AjaxUploader.formatSize(task.total);
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    var circle = document.getElementById('progressCircle');
    var percentText = document.getElementById('percentText');
    var fileName = document.getElementById('fileName');
    var speed = document.getElementById('speed');
    var uploaded = document.getElementById('uploaded');
    var eta = document.getElementById('eta');

    var uploader = AjaxUploader.getInstance('Uploader1');
    if (uploader) {
        uploader.on('taskStart', function(task) {
            fileName.textContent = task.fileName;
            circle.setAttribute('stroke', '#0d6efd');
        });
        uploader.on('taskProgress', function(task) {
            var pct = task.percent;
            var offset = 264 - (264 * pct / 100);
            circle.setAttribute('stroke-dashoffset', offset);
            percentText.textContent = Math.round(pct) + '%';
            speed.textContent = AjaxUploader.formatSize(task.speed) + '/s';
            uploaded.textContent = AjaxUploader.formatSize(task.loaded) + ' / ' + AjaxUploader.formatSize(task.total);
            if (task.speed > 0) {
                eta.textContent = AjaxUploader.formatTime((task.total - task.loaded) / task.speed);
            }
        });
        uploader.on('taskComplete', function(task) {
            circle.setAttribute('stroke-dashoffset', '0');
            circle.setAttribute('stroke', '#198754');
            percentText.textContent = '100%';
            speed.textContent = 'Done';
            eta.textContent = '--';
        });
    }
</script>
</asp:Content>
