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

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

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

<div class="demo-card">
    <div class="demo-card-header">Error Display and Recovery</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Handle upload errors gracefully with user-friendly error messages and recovery options.
            Errors can be retried, skipped, or the entire queue can be cancelled.
        </p>

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

        <div id="errorPanel" class="mt-3" style="display:none;">
            <div class="alert alert-danger d-flex justify-content-between align-items-center">
                <div>
                    <strong id="errorTitle">Error</strong>
                    <div id="errorDetail" class="small"></div>
                </div>
                <div class="d-flex gap-1">
                    <button type="button" class="btn btn-outline-danger btn-sm" onclick="retryFailed()">Retry</button>
                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="dismissError()">Dismiss</button>
                </div>
            </div>
        </div>
        <div id="successPanel" class="mt-3" style="display:none;">
            <div class="alert alert-success small" id="successMsg"></div>
        </div>

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

// JavaScript error handling
var uploader = AjaxUploader.getInstance('Uploader1');
uploader.on('taskError', function(task, error) {
    showError(task.fileName, error);
    // Options: retry, skip, or cancel
});
uploader.on('error', function(error) {
    showError('Upload', error);
});

function retryFailed() {
    uploader.retryAll();
}</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    var errorPanel = document.getElementById('errorPanel');
    var errorTitle = document.getElementById('errorTitle');
    var errorDetail = document.getElementById('errorDetail');
    var successPanel = document.getElementById('successPanel');
    var successMsg = document.getElementById('successMsg');
    var lastFailedTask = null;

    var uploader = AjaxUploader.getInstance('Uploader1');
    if (uploader) {
        uploader.on('taskError', function(task, error) {
            lastFailedTask = task;
            errorTitle.textContent = 'Error: ' + task.fileName;
            errorDetail.textContent = error || 'Upload failed after retries.';
            errorPanel.style.display = 'block';
            successPanel.style.display = 'none';
        });
        uploader.on('error', function(error) {
            errorTitle.textContent = 'Upload Error';
            errorDetail.textContent = error;
            errorPanel.style.display = 'block';
        });
        uploader.on('taskComplete', function(task) {
            successMsg.textContent = task.fileName + ' uploaded successfully.';
            successPanel.style.display = 'block';
            errorPanel.style.display = 'none';
        });
        uploader.on('taskProgress', function(task) {
            errorPanel.style.display = 'none';
        });
    }

    function retryFailed() {
        if (lastFailedTask && uploader) {
            uploader.retryTask(lastFailedTask.id);
        }
        errorPanel.style.display = 'none';
    }

    function dismissError() {
        errorPanel.style.display = 'none';
    }
</script>
</asp:Content>
