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

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

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

<div class="demo-card">
    <div class="demo-card-header">Sequential File Upload Queue</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Files are uploaded one at a time in the order they were added. Each file waits for the
            previous upload to complete before starting. This is ideal when server resources are limited.
        </p>

        <au:AjaxFileUpload ID="Uploader1" runat="server"
            AllowMultiple="true"
            ConcurrentUploads="1"
            AutoUpload="true"
            ShowProgress="true" />

        <div id="queueList" class="mt-3"></div>
        <div id="status" class="mt-2 text-muted small"></div>

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

// JavaScript API approach
AjaxUploader.create('#uploader', {
    uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
    multiple: true,
    concurrency: 1, // one file at a time
    autoUpload: true,
    onQueueRender: function(queue) {
        // Render queue items showing order and status
        queue.forEach(function(item, i) {
            // item.fileName, item.status, item.percent
        });
    }
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

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

    var uploader = AjaxUploader.getInstance('Uploader1');
    if (uploader) {
        uploader.on('queueRender', function(queue) {
            queueList.innerHTML = '';
            queue.forEach(function(item, i) {
                var div = document.createElement('div');
                div.className = 'p-2 mb-1 border rounded d-flex justify-content-between align-items-center';
                var badge = item.status === 'complete' ? 'bg-success' :
                            item.status === 'uploading' ? 'bg-primary' : 'bg-secondary';
                div.innerHTML = '<span>' + (i + 1) + '. ' + item.fileName +
                    ' <small class="text-muted">(' + AjaxUploader.formatSize(item.total) + ')</small></span>' +
                    '<span class="badge ' + badge + '">' +
                    (item.status === 'uploading' ? Math.round(item.percent) + '%' : item.status) + '</span>';
                queueList.appendChild(div);
            });
            status.textContent = queue.length + ' file(s) in queue';
        });
        uploader.on('complete', function() {
            status.textContent = 'All uploads complete.';
        });
    }
</script>
</asp:Content>
