<%@ Page Title="Multi-Step Form with Upload" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Multi-Step Form with Upload - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Multi-Step Form with Upload</asp:Content>

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

<style>
    .steps-bar { display: flex; gap: 0; margin-bottom: 16px; }
    .step-item {
        flex: 1; padding: 8px; text-align: center; font-size: 0.82rem;
        background: #f1f5f9; border: 1px solid #e2e8f0; color: #64748b;
    }
    .step-item.active { background: #2563eb; color: #fff; border-color: #2563eb; }
    .step-item.completed { background: #dcfce7; color: #166534; }
    .step-panel { display: none; }
    .step-panel.active { display: block; }
</style>

<div class="demo-card">
    <div class="demo-card-header">Multi-Step Form with Upload</div>
    <div class="demo-card-body">
        <p class="demo-description">
            A three-step registration form where step 2 requires document upload.
            Navigation between steps is controlled, and the form collects data across all steps.
            Uses Web Forms controls for form fields.
        </p>

        <div class="steps-bar">
            <div class="step-item active" id="si1">1. Personal Info</div>
            <div class="step-item" id="si2">2. Documents</div>
            <div class="step-item" id="si3">3. Review</div>
        </div>

        <div class="step-panel active" id="sp1" style="max-width:420px;">
            <div class="mb-3">
                <label class="form-label">Name</label>
                <asp:TextBox ID="txtName" runat="server" CssClass="form-control" placeholder="Full Name" ClientIDMode="Static" />
            </div>
            <div class="mb-3">
                <label class="form-label">Email</label>
                <asp:TextBox ID="txtEmail" runat="server" CssClass="form-control" TextMode="Email" placeholder="you@example.com" ClientIDMode="Static" />
            </div>
            <button type="button" class="btn btn-primary" onclick="msGoStep(2)">Next</button>
        </div>
        <div class="step-panel" id="sp2" style="max-width:420px;">
            <p>Please upload your ID document:</p>
            <au:AjaxFileUpload ID="Uploader1" runat="server"
                AutoUpload="true"
                ShowProgress="true"
                OnClientUploadComplete="onDocUploaded" />
            <div id="msUploadStatus" class="small text-muted mt-2"></div>
            <div class="mt-3">
                <button type="button" class="btn btn-secondary me-2" onclick="msGoStep(1)">Back</button>
                <button type="button" class="btn btn-primary" id="msNext2" disabled onclick="msGoStep(3)">Next</button>
            </div>
        </div>
        <div class="step-panel" id="sp3" style="max-width:420px;">
            <div class="alert alert-success">All steps complete. Ready to submit!</div>
            <button type="button" class="btn btn-secondary me-2" onclick="msGoStep(2)">Back</button>
            <asp:Button ID="BtnSubmit" runat="server" Text="Submit" CssClass="btn btn-primary"
                OnClientClick="alert('Submitted!'); return false;" />
        </div>

        <div class="code-panel">
            <pre><code>&lt;!-- Step 1: Web Forms controls --&gt;
&lt;asp:TextBox ID="txtName" runat="server" CssClass="form-control" /&gt;
&lt;asp:TextBox ID="txtEmail" runat="server" TextMode="Email" /&gt;

&lt;!-- Step 2: AjaxFileUpload --&gt;
&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
    AutoUpload="true"
    ShowProgress="true"
    OnClientUploadComplete="onDocUploaded" /&gt;

&lt;script&gt;
function onDocUploaded(file) {
    document.getElementById('msNext2').disabled = false;
}
&lt;/script&gt;

&lt;!-- Step 3: Submit --&gt;
&lt;asp:Button ID="BtnSubmit" runat="server" Text="Submit" /&gt;</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    function msGoStep(n) {
        for (var i = 1; i <= 3; i++) {
            document.getElementById('sp' + i).classList.toggle('active', i === n);
            var si = document.getElementById('si' + i);
            si.classList.remove('active', 'completed');
            if (i < n) si.classList.add('completed');
            if (i === n) si.classList.add('active');
        }
    }
    function onDocUploaded(file) {
        document.getElementById('msUploadStatus').textContent = 'Uploaded: ' + file.name;
        document.getElementById('msNext2').disabled = false;
    }
</script>
</asp:Content>
