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

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

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

<div class="demo-card">
    <div class="demo-card-header">Parallel Upload Slots</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Upload multiple files simultaneously with configurable concurrency. Three parallel upload
            slots allow faster overall completion while limiting server load.
        </p>

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

        <div class="mb-3 mt-3">
            <label class="form-label fw-bold">Upload Slots</label>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-outline-primary btn-sm" onclick="setConcurrency(1)">1</button>
                <button type="button" class="btn btn-outline-primary btn-sm" onclick="setConcurrency(2)">2</button>
                <button type="button" class="btn btn-outline-primary btn-sm active" onclick="setConcurrency(3)">3</button>
                <button type="button" class="btn btn-outline-primary btn-sm" onclick="setConcurrency(5)">5</button>
            </div>
        </div>

        <div id="slots" class="mt-3 d-flex gap-2 flex-wrap"></div>
        <div id="completed" class="mt-2 text-muted small"></div>

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

// JavaScript API approach
AjaxUploader.create('#uploader', {
    uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
    multiple: true,
    maxFiles: 10,
    concurrency: 3, // 3 parallel upload slots
    autoUpload: true,
    onQueueRender: function(queue) {
        // Show active uploads in parallel slots
    }
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    var slots = document.getElementById('slots');
    var completed = document.getElementById('completed');
    var doneCount = 0;

    var uploader = AjaxUploader.getInstance('Uploader1');
    if (uploader) {
        uploader.on('queueRender', function(queue) {
            slots.innerHTML = '';
            queue.forEach(function(item) {
                var card = document.createElement('div');
                card.className = 'border rounded p-2 text-center';
                card.style.cssText = 'min-width:140px;';
                var color = item.status === 'uploading' ? '#0d6efd' :
                            item.status === 'complete' ? '#198754' : '#6c757d';
                card.innerHTML = '<div class="small text-truncate" style="max-width:130px;">' +
                    item.fileName + '</div>' +
                    '<div class="progress mt-1" style="height:6px;">' +
                    '<div class="progress-bar" style="width:' + (item.percent || 0) +
                    '%;background:' + color + ';"></div></div>' +
                    '<div class="small mt-1" style="color:' + color + ';">' +
                    (item.status === 'uploading' ? Math.round(item.percent) + '%' : item.status) + '</div>';
                slots.appendChild(card);
            });
        });
        uploader.on('taskComplete', function() {
            doneCount++;
            completed.textContent = doneCount + ' file(s) completed.';
        });
    }

    function setConcurrency(n) {
        if (uploader) {
            uploader.setOptions({ concurrency: n });
        }
        document.querySelectorAll('.btn-group .btn').forEach(function(b) { b.classList.remove('active'); });
        event.target.classList.add('active');
    }
</script>
</asp:Content>
