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

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

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

<div class="demo-card">
    <div class="demo-card-header">Pause and Resume Uploads</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Pause an active upload and resume it later. The upload continues from where it left off,
            making it ideal for large files on unreliable connections.
        </p>

        <au:AjaxFileUpload ID="Uploader1" runat="server"
            EnableChunkedUpload="true"
            ChunkSize="1048576"
            AllowMultiple="true"
            AutoUpload="true" />

        <div class="mt-3">
            <button type="button" class="btn btn-warning btn-sm" id="btnPause" disabled>Pause All</button>
            <button type="button" class="btn btn-success btn-sm" id="btnResume" disabled>Resume All</button>
        </div>
        <div class="progress mt-3" style="height:20px;">
            <div id="progressBar" class="progress-bar" role="progressbar" style="width:0%">0%</div>
        </div>
        <div id="status" class="mt-2 text-muted small"></div>

        <div class="code-panel">
            <pre><code>&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
    EnableChunkedUpload="true"
    ChunkSize="1048576"
    AllowMultiple="true"
    AutoUpload="true" /&gt;

// JavaScript API
var uploader = AjaxUploader.getInstance('Uploader1');

// Pause: uploader.pauseAll();
// Resume: uploader.resumeAll();</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    var bar = document.getElementById('progressBar');
    var status = document.getElementById('status');
    var btnPause = document.getElementById('btnPause');
    var btnResume = document.getElementById('btnResume');

    var uploader = AjaxUploader.getInstance('Uploader1');
    if (uploader) {
        uploader.on('taskStart', function() {
            btnPause.disabled = false;
        });
        uploader.on('taskProgress', function(task) {
            var pct = Math.round(task.percent);
            bar.style.width = pct + '%';
            bar.textContent = pct + '%';
            status.textContent = task.fileName + ': ' + AjaxUploader.formatSize(task.loaded) +
                ' / ' + AjaxUploader.formatSize(task.total);
        });
        uploader.on('taskComplete', function(task) {
            bar.style.width = '100%';
            bar.textContent = 'Complete';
            bar.classList.add('bg-success');
            status.textContent = task.fileName + ' uploaded successfully.';
            btnPause.disabled = true;
            btnResume.disabled = true;
        });
    }

    btnPause.addEventListener('click', function() {
        if (uploader) uploader.pauseAll();
        bar.classList.add('bg-warning');
        status.textContent = 'Upload paused.';
        btnPause.disabled = true;
        btnResume.disabled = false;
    });

    btnResume.addEventListener('click', function() {
        if (uploader) uploader.resumeAll();
        bar.classList.remove('bg-warning');
        status.textContent = 'Resuming...';
        btnPause.disabled = false;
        btnResume.disabled = true;
    });
</script>
</asp:Content>
