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

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

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

<div class="demo-card">
    <div class="demo-card-header">Redirect After All Uploads Complete</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Perform an action after all files have been uploaded. Common use cases include redirecting
            to a success page, showing a confirmation dialog, or triggering server-side processing.
        </p>

        <div class="mb-3">
            <label class="form-label fw-bold">Action after completion</label>
            <select id="actionType" class="form-select" style="width:auto;">
                <option value="message">Show Success Message</option>
                <option value="redirect">Redirect to Thank You Page</option>
                <option value="callback">Call Server API</option>
            </select>
        </div>

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

        <div class="progress mt-3" style="height:6px;">
            <div id="progressBar" class="progress-bar" style="width:0%;"></div>
        </div>
        <div id="result" class="mt-3" style="display:none;"></div>

        <div class="code-panel">
            <pre><code>var uploader = AjaxUploader.getInstance('Uploader1');
uploader.on('complete', function() {
    // Option 1: Show message
    showSuccessMessage();

    // Option 2: Redirect
    // window.location.href = '/thank-you?files=' + count;

    // Option 3: API call
    // fetch('/api/process', { method: 'POST' });
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    var bar = document.getElementById('progressBar');
    var result = document.getElementById('result');
    var actionType = document.getElementById('actionType');
    var uploadedFiles = [];

    var uploader = AjaxUploader.getInstance('Uploader1');
    if (uploader) {
        uploader.on('taskProgress', function(task) {
            bar.style.width = Math.round(task.percent) + '%';
        });
        uploader.on('taskComplete', function(task) {
            uploadedFiles.push(task.fileName);
        });
        uploader.on('complete', function() {
            bar.style.width = '100%';
            var action = actionType.value;
            result.style.display = 'block';

            if (action === 'message') {
                result.className = 'mt-3 alert alert-success';
                result.innerHTML = '<strong>Upload Complete!</strong> ' +
                    uploadedFiles.length + ' file(s) uploaded successfully: ' +
                    uploadedFiles.join(', ');
            } else if (action === 'redirect') {
                result.className = 'mt-3 alert alert-info';
                result.innerHTML = '<strong>Redirect:</strong> Would navigate to ' +
                    '<code>/thank-you?files=' + uploadedFiles.length + '</code>';
            } else if (action === 'callback') {
                result.className = 'mt-3 alert alert-warning';
                result.innerHTML = '<strong>API Call:</strong> Would POST to ' +
                    '<code>/api/process</code> with ' + uploadedFiles.length + ' file references.';
            }
            uploadedFiles = [];
        });
    }
</script>
</asp:Content>
