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

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

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

<div class="demo-card">
    <div class="demo-card-header">Full Event Log with Timestamps</div>
    <div class="demo-card-body">
        <p class="demo-description">
            A comprehensive event log that captures every upload event with precise timestamps,
            event type badges, and detailed data. Useful for debugging and understanding the upload lifecycle.
        </p>

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

        <div class="mt-3 d-flex justify-content-between align-items-center">
            <div>
                <span class="badge bg-info me-1">SELECT</span>
                <span class="badge bg-primary me-1">START</span>
                <span class="badge bg-secondary me-1">PROGRESS</span>
                <span class="badge bg-success me-1">COMPLETE</span>
                <span class="badge bg-danger me-1">ERROR</span>
                <span class="badge bg-warning text-dark me-1">QUEUE</span>
            </div>
            <div>
                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="clearLog()">Clear</button>
                <button type="button" class="btn btn-outline-primary btn-sm" onclick="exportLog()">Export</button>
            </div>
        </div>
        <div id="eventLog" class="mt-2 p-2 border rounded font-monospace"
             style="max-height:280px;overflow-y:auto;font-size:.78rem;background:#f8f9fa;"></div>
        <div id="counter" class="mt-1 text-muted small">0 events logged</div>

        <div class="code-panel">
            <pre><code>// Attach all event handlers to build a full log
var events = [];
var uploader = AjaxUploader.getInstance('Uploader1');
uploader.on('select',       function(f) { addEvent('SELECT', f.length + ' files'); });
uploader.on('taskStart',    function(t) { addEvent('START', t.fileName); });
uploader.on('taskProgress', function(t) { addEvent('PROGRESS', t.percent + '%'); });
uploader.on('taskComplete', function(t) { addEvent('COMPLETE', t.fileName); });
uploader.on('taskError',    function(t,e) { addEvent('ERROR', e); });
uploader.on('queueRender',  function(q) { addEvent('QUEUE', q.length + ' items'); });</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    var eventLog = document.getElementById('eventLog');
    var counter = document.getElementById('counter');
    var events = [];

    var badgeColors = {
        SELECT: 'bg-info', START: 'bg-primary', PROGRESS: 'bg-secondary',
        COMPLETE: 'bg-success', ERROR: 'bg-danger', QUEUE: 'bg-warning text-dark',
        DONE: 'bg-success'
    };

    function addEvent(type, detail) {
        var now = new Date();
        var ts = now.toLocaleTimeString() + '.' + String(now.getMilliseconds()).padStart(3, '0');
        events.push({ time: ts, type: type, detail: detail });
        var div = document.createElement('div');
        div.innerHTML = '<span class="text-muted">' + ts + '</span> ' +
            '<span class="badge ' + (badgeColors[type] || 'bg-secondary') + '" style="width:70px;display:inline-block;">' +
            type + '</span> ' + (detail || '');
        eventLog.appendChild(div);
        eventLog.scrollTop = eventLog.scrollHeight;
        counter.textContent = events.length + ' events logged';
    }

    function clearLog() {
        eventLog.innerHTML = '';
        events = [];
        counter.textContent = '0 events logged';
    }

    function exportLog() {
        var text = events.map(function(e) { return e.time + '\t' + e.type + '\t' + e.detail; }).join('\n');
        var blob = new Blob([text], { type: 'text/plain' });
        var a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = 'upload-events.txt';
        a.click();
    }

    var uploader = AjaxUploader.getInstance('Uploader1');
    if (uploader) {
        uploader.on('select', function(files) { addEvent('SELECT', files.length + ' file(s) selected'); });
        uploader.on('taskStart', function(task) { addEvent('START', task.fileName + ' (' + AjaxUploader.formatSize(task.total) + ')'); });
        uploader.on('taskProgress', function(task) { addEvent('PROGRESS', task.fileName + ' ' + Math.round(task.percent) + '%'); });
        uploader.on('taskComplete', function(task) { addEvent('COMPLETE', task.fileName); });
        uploader.on('taskError', function(task, err) { addEvent('ERROR', task.fileName + ': ' + err); });
        uploader.on('queueRender', function(queue) { addEvent('QUEUE', queue.length + ' item(s)'); });
        uploader.on('complete', function() { addEvent('DONE', 'All uploads finished'); });
    }
</script>
</asp:Content>
