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

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

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

<style>
    .wizard-steps { display: flex; gap: 0; margin-bottom: 16px; }
    .wizard-step {
        flex: 1; text-align: center; padding: 10px; background: #f1f5f9;
        border: 1px solid #e2e8f0; font-size: 0.85rem; color: #64748b;
    }
    .wizard-step.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
    .wizard-step.done { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
    .wizard-pane { display: none; }
    .wizard-pane.active { display: block; }
</style>

<div class="demo-card">
    <div class="demo-card-header">Wizard / Stepper Upload</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Integrate a file upload into step 2 of a multi-step wizard. Users must upload
            a file before advancing to the final step.
        </p>

        <div class="wizard-steps">
            <div class="wizard-step active" id="ws1">1. Info</div>
            <div class="wizard-step" id="ws2">2. Upload</div>
            <div class="wizard-step" id="ws3">3. Confirm</div>
        </div>

        <div class="wizard-pane active" id="wp1">
            <p>Enter your name:</p>
            <input type="text" class="form-control mb-3" placeholder="Full Name" id="wizName">
            <button type="button" class="btn btn-primary" onclick="goStep(2)">Next</button>
        </div>
        <div class="wizard-pane" id="wp2">
            <p>Upload your document:</p>
            <div id="wizUploader"></div>
            <div id="wizFile" class="mt-2 small text-muted"></div>
            <button type="button" class="btn btn-secondary me-2" onclick="goStep(1)">Back</button>
            <button type="button" class="btn btn-primary" id="wizNext2" disabled onclick="goStep(3)">Next</button>
        </div>
        <div class="wizard-pane" id="wp3">
            <p class="text-success fw-bold">All done! Your submission is ready.</p>
            <button type="button" class="btn btn-secondary" onclick="goStep(2)">Back</button>
        </div>

        <div class="code-panel">
            <pre><code>// Step 2: upload required before proceeding
AjaxUploader.create(el, {
    uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
    autoUpload: true,
    onComplete: function (file) {
        document.getElementById('nextBtn').disabled = false;
    }
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    function goStep(n) {
        document.querySelectorAll('.wizard-pane').forEach(function (p) { p.classList.remove('active'); });
        document.querySelectorAll('.wizard-step').forEach(function (s, i) {
            s.classList.remove('active', 'done');
            if (i < n - 1) s.classList.add('done');
            if (i === n - 1) s.classList.add('active');
        });
        document.getElementById('wp' + n).classList.add('active');
    }
    AjaxUploader.create(document.getElementById('wizUploader'), {
        uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
        multiple: false,
        autoUpload: true,
        onComplete: function (file) {
            document.getElementById('wizFile').textContent = 'Uploaded: ' + file.name;
            document.getElementById('wizNext2').disabled = false;
        }
    });
</script>
</asp:Content>
