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

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

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

<div class="demo-card">
    <div class="demo-card-header">All Client-Side Events</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Monitor every client-side event fired by AjaxUploader in a live event panel.
            Select a file to see events as they occur in real time.
        </p>

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

        <div class="mt-3 d-flex justify-content-between align-items-center">
            <h6 class="mb-0">Live Event Log</h6>
            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="clearLog()">Clear</button>
        </div>
        <div id="eventLog" class="mt-2 p-2 bg-dark text-light border rounded font-monospace"
             style="max-height:250px;overflow-y:auto;font-size:.8rem;">
            <div class="text-muted">Waiting for events...</div>
        </div>

        <div class="code-panel">
            <pre><code>var uploader = AjaxUploader.getInstance('Uploader1');
uploader.on('select',       function(files)      { log('onSelect', files.length + ' files'); });
uploader.on('taskStart',    function(task)        { log('onTaskStart', task.fileName); });
uploader.on('taskProgress', function(task)        { log('onTaskProgress', task.percent + '%'); });
uploader.on('taskComplete', function(task)        { log('onTaskComplete', task.fileName); });
uploader.on('taskError',    function(task, err)   { log('onTaskError', err); });
uploader.on('progress',     function(info)        { log('onProgress', info.percent + '%'); });
uploader.on('complete',     function()            { log('onComplete'); });
uploader.on('error',        function(err)         { log('onError', err); });
uploader.on('queueRender',  function(queue)       { log('onQueueRender', queue.length + ' items'); });</code></pre>
        </div>
    </div>
</div>

</asp:Content>

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

    function log(eventName, detail) {
        if (eventCount === 0) eventLog.innerHTML = '';
        eventCount++;
        var div = document.createElement('div');
        var color = eventName.includes('Error') ? '#dc3545' :
                    eventName.includes('Complete') ? '#198754' :
                    eventName.includes('Progress') ? '#6c757d' : '#0dcaf0';
        div.innerHTML = '<span class="text-muted">' + new Date().toLocaleTimeString() + '</span> ' +
            '<span style="color:' + color + ';">' + eventName + '</span>' +
            (detail ? ' <span class="text-light">' + detail + '</span>' : '');
        eventLog.appendChild(div);
        eventLog.scrollTop = eventLog.scrollHeight;
    }

    function clearLog() {
        eventLog.innerHTML = '<div class="text-muted">Log cleared.</div>';
        eventCount = 0;
    }

    var uploader = AjaxUploader.getInstance('Uploader1');
    if (uploader) {
        uploader.on('select', function(files) { log('onSelect', files.length + ' file(s) selected'); });
        uploader.on('taskStart', function(task) { log('onTaskStart', task.fileName); });
        uploader.on('taskProgress', function(task) { log('onTaskProgress', task.fileName + ' ' + Math.round(task.percent) + '%'); });
        uploader.on('taskComplete', function(task) { log('onTaskComplete', task.fileName); });
        uploader.on('taskError', function(task, err) { log('onTaskError', task.fileName + ': ' + err); });
        uploader.on('progress', function(info) { log('onProgress', 'Overall ' + Math.round(info.percent) + '%'); });
        uploader.on('complete', function() { log('onComplete', 'All uploads finished'); });
        uploader.on('error', function(err) { log('onError', err); });
        uploader.on('queueRender', function(queue) { log('onQueueRender', queue.length + ' items'); });
    }
</script>
</asp:Content>
