@rendermode InteractiveServer
@inject PersistentComponentState ApplicationState
@inject ClassObj.IPAddressService IpAddressService
@page "/"

<PageTitle>Welcome</PageTitle>

@if (ProgramClosed)
{
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mt-5">
                <h1>Thank you for your interest!</h1>
                <p>Unfortunately, the enrollment period for our Winter Campaign has drawn to a close.</p>
                <p>Stay tuned for more great campaigns in the future!</p>
                <p><i class="fa-solid fa-heart"></i></p>
            </div>
            <div class="col-12 text-center">
                <img class="img-fluid" src="/img/34d1685e-d655-421b-aef8-e077140534f9.png" alt="Thank You!" />
            </div>
        </div>
    </div>
}
else if (ShowWizard)
{
    <div class="container">
        <div class="row">
            <div class="col-12">
                <TelerikWizard @bind-Value="@Value" OnFinish="OnFinishHandler" Width="100%" Height="95vh" Class="sbWizard" StepperPosition=WizardStepperPosition.Top>
                    <WizardSteps>
                        <WizardStep Label="Introduction" Icon="@SvgIcon.Globe" Valid="@IsAudienceChoiceValid">
                            <Content>
                                <TelerikForm Model="@cardType" @ref="@IntroForm">
                                    <FormItems>
                                        <FormItem>
                                            <Template>
                                                <div class="container">
                                                    <div class="row">
                                                        <div class="col-12 px-sm-5 mb-2">
                                                            <h1>KeyMotive's Winter Best Customer Program</h1>
                                                            <div class="px-sm-5 mb-2">
                                                                <p>It's time for our Winter Best Customer Program!<br />If you're looking to finish off the year with a bang, then this is the campaign for you!</p>
                                                                <p>
                                                                    Using this wizard, decide what media you'd like to mail, personalize your selection, and choose from a few suggested designs (or request a custom design from our
                                                                    creative team), and that's it!
                                                                </p>
                                                                <p>Let us handle the rest!</p>
                                                            </div>
                                                            <div>
                                                                <img src="/img/HomeCollage.png" class="img-fluid" />
                                                            </div>
                                                            <br />
                                                            <div class="px-sm-5 mb-2">
                                                                Our campaign focuses on rewarding your <strong class="text-primary">Very Best Customers</strong> for their loyalty and reminding them of what makes your shop great.
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </Template>
                                        </FormItem>
                                    </FormItems>
                                    <FormButtons>
                                        @* Need this here to avoid addition of random submit button *@
                                    </FormButtons>
                                </TelerikForm>
                            </Content>
                        </WizardStep>
                        @*                                                                        *@
                        @* Step 1 - greeting card vs postcard *@
                        @*                                                                        *@
                        <WizardStep Label="Card Type" OnChange="@OnCardChoiceStepChange">
                            <Content>
                                <TelerikForm Model="@cardType" @ref="@cardTypeForm">
                                    <FormItems>
                                        <FormItem>
                                            <Template>
                                                <div class="container">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <h1 class="text-center">Step 1 - Choose a Card Type</h1>
                                                        </div>
                                                        <div class="col-12 text-center mb-3">
                                                            <TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
                                                                <ButtonGroupToggleButton @bind-Selected="@isGreetingCard">Greeting Card</ButtonGroupToggleButton>
                                                                <ButtonGroupToggleButton @bind-Selected="@isPostcard">Postcard</ButtonGroupToggleButton>
                                                            </TelerikButtonGroup>
                                                        </div>
                                                        @* Preview information about the selected card type*@
                                                        @if (isGreetingCard)
                                                        {
                                                            <div class="col-sm-4 mb-3 text-start">
                                                                <h4>Eye-catching Personalized Greeting Card!</h4>
                                                                <ul>
                                                                    <li>Unique and bold presentation!</li>
                                                                    <li>Large trifold piece</li>
                                                                    <li>Coupons are easy to remove, offering great convenience for your customers!</li>
                                                                    <li>Leave it to us - we select, print, sort and mail for just <strong class="text-primary text-nowrap">$1.14 each</strong></li>
                                                                </ul>
                                                            </div>
                                                            <div class="col-sm-8 text-center mb-3">
                                                                <img class="img-fluid" src="/img/GreetingCards.png" />
                                                            </div>
                                                        }
                                                        else
                                                        {
                                                            <div class="col-sm-4 mb-3 text-start">
                                                                <h4>Premium Postcard Really Stands Out in the Mailbox</h4>
                                                                <ul>
                                                                    <li>Premium paper, Jumbo-Sized (8&frac12; x 6 inches)</li>
                                                                    <li>UV gloss-coated</li>
                                                                    <li>Choose from our selection, or ask for a custom design!</li>
                                                                    <li>Full service - select, print, sort, mail for just <strong class="text-primary text-nowrap">92&#162; each</strong></li>
                                                                </ul>
                                                            </div>
                                                            <div class="col-sm-8 text-center mb-3">
                                                                <img class="img-fluid" src="/img/Postcards.png" />
                                                            </div>
                                                        }
                                                    </div>
                                                </div>
                                            </Template>
                                        </FormItem>
                                    </FormItems>
                                    <FormButtons>
                                        @* Need this here to avoid addition of random submit button *@
                                    </FormButtons>
                                </TelerikForm>
                            </Content>
                        </WizardStep>
                        @*                                                                *@
                        @* Step 2 - selecting card design *@
                        @*                                                                *@
                        <WizardStep Label="Card Design" OnChange="@OnDesignStepChange">
                            <Content>
                                <TelerikForm Model="@custOptions" @ref="@customizationForm">
                                    <FormValidation>
                                        <DataAnnotationsValidator></DataAnnotationsValidator>
                                    </FormValidation>
                                    <FormItems>
                                        <FormItem>
                                            <Template>
                                                <div class="container">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <h1 class="text-center">Choose a Design</h1>
                                                        </div>
                                                        <div class="col-12 text-center mb-3">
                                                            @* Button logic *@
                                                            <div class="text-center">
                                                                <TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
                                                                    @if (isGreetingCard)
                                                                    {
                                                                        <ButtonGroupToggleButton @bind-Selected="@designOne">Greeting Card 1</ButtonGroupToggleButton>
                                                                        <ButtonGroupToggleButton @bind-Selected="@designTwo">Greeting Card 2</ButtonGroupToggleButton>
                                                                        <ButtonGroupToggleButton @bind-Selected="@designThree">Greeting Card 3</ButtonGroupToggleButton>
                                                                        <ButtonGroupToggleButton @bind-Selected="@designFour">Greeting Card 4</ButtonGroupToggleButton>
                                                                        <ButtonGroupToggleButton @bind-Selected="@designCustom">Custom</ButtonGroupToggleButton>
                                                                    }
                                                                    else
                                                                    {
                                                                        <ButtonGroupToggleButton @bind-Selected="@designOne">Postcard 1</ButtonGroupToggleButton>
                                                                        <ButtonGroupToggleButton @bind-Selected="@designTwo">Postcard 2</ButtonGroupToggleButton>
                                                                        <ButtonGroupToggleButton @bind-Selected="@designThree">Postcard 3</ButtonGroupToggleButton>
                                                                        <ButtonGroupToggleButton @bind-Selected="@designFour">Postcard 4</ButtonGroupToggleButton>
                                                                        <ButtonGroupToggleButton @bind-Selected="@designCustom">Custom</ButtonGroupToggleButton>
                                                                    }
                                                                </TelerikButtonGroup>
                                                                <br /><br />
                                                                @* Card preview logic *@
                                                                @if (designOne)
                                                                {
                                                                    @if (isPostcard)
                                                                    {
                                                                        <img style="width:40%;height:40%" src="/img/Postcard1.jpg" class="img-fluid" alt="Automotive" />
                                                                    }
                                                                    else
                                                                    {
                                                                        <img style="width:40%;height:40%" src="/img/Greeting1.png" class="img-fluid" alt="Autmotive" />
                                                                    }
                                                                }
                                                                else if (designTwo)
                                                                {
                                                                    @if (isPostcard)
                                                                    {
                                                                        <img style="width:40%;height:40%" src="/img/Postcard2.jpg" class="img-fluid" alt="Winter" />
                                                                    }
                                                                    else
                                                                    {
                                                                        <img style="width:40%;height:40%" src="/img/Greeting2.png" class="img-fluid" alt="Winter" />
                                                                    }
                                                                }
                                                                else if (designThree)
                                                                {
                                                                    @if (isPostcard)
                                                                    {
                                                                        <img style="width:40%;height:40%" src="/img/Postcard3.jpg" class="img-fluid" alt="Puppy" />
                                                                    }
                                                                    else
                                                                    {
                                                                        <img style="width:40%;height:40%" src="/img/Greeting3.png" class="img-fluid" alt="Puppy" />
                                                                    }
                                                                }
                                                                else if (designFour)
                                                                {
                                                                    @if (isPostcard)
                                                                    {
                                                                        <img style="width:40%;height:40%" src="/img/Postcard4.jpg" class="img-fluid" alt="Beach" />
                                                                    }
                                                                    else
                                                                    {
                                                                        <img style="width:40%;height:40%" src="/img/Greeting4.png" class="img-fluid" alt="Beach" />
                                                                    }
                                                                }
                                                                else if (designCustom)
                                                                {
                                                                    <h4>We will reach out to discuss your custom design!</h4>
                                                                }
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </Template>
                                        </FormItem>
                                    </FormItems>
                                    <FormButtons />
                                </TelerikForm>
                            </Content>
                        </WizardStep>
                        @*                                                    *@
                        @* Step 3 - Greeting, verse, signature                *@
                        @*                                                    *@                        
                        <WizardStep Label="Customization" OnChange="@OnMessagingStepChange">
                            <Content>
                                <TelerikForm Model="@messagingOptions" @ref="@messagingForm">
                                    <FormItems>
                                        <FormItem>
                                            <Template>
                                                <div class="container">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <h4 class="mb-3">Please Select a Greeting</h4>
                                                            <TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single" Class="vertical-buttons block-buttons mb-5">
                                                                <ButtonGroupToggleButton @bind-Selected="@greetingOne">Happy Holidays</ButtonGroupToggleButton>
                                                                <ButtonGroupToggleButton @bind-Selected="@greetingTwo">Merry Christmas</ButtonGroupToggleButton>
                                                                <ButtonGroupToggleButton @bind-Selected="@greetingThree">Season's Greetings</ButtonGroupToggleButton>
                                                            </TelerikButtonGroup>
                                                            @if (greetingOne)
                                                            {
                                                                <div class="p-5">
                                                                    <img style="width:25%;height:25%" src="/img/greetings/HappyHolidays.png" class="img-fluid" />
                                                                </div>
                                                            }
                                                            else if (greetingTwo)
                                                            {
                                                                <div class="p-5">
                                                                    <img style="width:20%;height:20%" src="/img/greetings/MerryChristmas.png" class="img-fluid" />
                                                                </div>
                                                            }
                                                            else if (greetingThree)
                                                            {
                                                                <div class="p-5">
                                                                    <img style="width:20%;height:20%" src="/img/greetings/SeasonsGreetings.png" class="img-fluid" />
                                                                </div>
                                                            }
                                                        </div>
                                                            <div class="col-12">
                                                                <hr />
                                                                <h4 class="mb-3">Please Select a Verse</h4>
                                                                <TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single" Class="vertical-buttons block-buttons mb-5">
                                                                    <ButtonGroupToggleButton @bind-Selected="@verseOne">Option 1</ButtonGroupToggleButton>
                                                                    <ButtonGroupToggleButton @bind-Selected="@verseTwo">Option 2</ButtonGroupToggleButton>
                                                                    <ButtonGroupToggleButton @bind-Selected="@verseThree">Option 3</ButtonGroupToggleButton>
                                                                </TelerikButtonGroup>
                                                                @if (verseOne)
                                                                {
                                                                    <p class="fst-italic">We are grateful that you've chosen to do business with us.</p>
                                                                    <p class="fst-italic">Thank You!</p>
                                                                    <p class="fst-italic">Wishing you all the best this holiday season and in the New Year.</p>
                                                                }
                                                                else if (verseTwo)
                                                                {
                                                                    <p class="fst-italic">Thank you for putting your trust in us. We wish you a happy and safe holiday season.</p>
                                                                    <p class="fst-italic">May 2026 bring joy and peace!</p>
                                                                }
                                                                else if (verseThree)
                                                                {
                                                                    <p class="fst-italic">Thank you for trusting your vehicle to us. We appreciate your business.</p>
                                                                    <p class="fst-italic">Merry Christmas and Happy New Year!</p>
                                                                }
                                                            </div>
                                                            <div class="col-12">
                                                                <hr class="m-5" />
                                                                <h4 class="mb-3">Please Select a Signature</h4>
                                                                <TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single" Class="mb-5">
                                                                    <ButtonGroupToggleButton @bind-Selected="@sigOne">From Your Friends</ButtonGroupToggleButton>
                                                                    <ButtonGroupToggleButton @bind-Selected="@sigTwo">Name, Title, Phone Number</ButtonGroupToggleButton>
                                                                    <ButtonGroupToggleButton @bind-Selected="@sigThree">Custom</ButtonGroupToggleButton>
                                                                </TelerikButtonGroup>
                                                                @if (sigOne)
                                                                {
                                                                    <p>From your friends at <strong>TopSpeed Tire</strong><br /><i>(your location name)</i></p>
                                                                    <p><strong>(888) 555-3712</strong><br /><i>(your location phone number)</i></p>
                                                                }
                                                                else if (sigTwo)
                                                                {
                                                                    <label style="display:block" for="CustomName" class="k-label k-form-label text-center">Name:</label>
                                                                    <TelerikTextBox Class="mb-3" Id="CustomName" @bind-Value="@customName" MaxLength="50" Width="25rem"></TelerikTextBox>
                                                                    <label style="display:block" for="CustomTitle" class="k-label k-form-label text-center">Title:</label>
                                                                    <TelerikTextBox Class="mb-3" Id="CustomTitle" @bind-Value="@customTitle" MaxLength="50" Width="25rem"></TelerikTextBox>
                                                                    <label style="display:block" for="CustomPhone" class="k-label k-form-label text-center">Phone:</label>
                                                                    <TelerikTextBox Class="mb-3" Id="CustomPhone" @bind-Value="@customPhone" MaxLength="15" Width="20rem"></TelerikTextBox>
                                                                }
                                                                else if (sigThree)
                                                                {
                                                                    <br />
                                                                    <label style="display:block" for="CustomSignature" class="text-center">Custom Message (max 30 character/line up to 4 lines)</label>

                                                                    <br />
                                                                    <TelerikTextArea Id="CustomSignature" @bind-Value="@customSignature" Rows="4" Cols="35" MaxLength="120"></TelerikTextArea>
                                                                }
                                                            </div>                                                        
                                                        
                                                    </div>
                                                </div>
                                            </Template>
                                        </FormItem>
                                    </FormItems>
                                    <FormButtons />
                                </TelerikForm>
                            </Content>
                        </WizardStep>
                        @*                                                 *@
                        @* Step 4 - Logo Selection *@
                        @*                                                 *@
                        <WizardStep Label="Logos" OnChange="@OnLogoStepChange">
                            <Content>
                                <TelerikForm Model="@logoOptions" @ref="@logoForm">
                                    <FormItems>
                                        <FormItem>
                                            <Template>
                                                <div class="container">
                                                    <div class="col-12 text-center mb-3">
                                                        <h4 class="mb-3">Would you like to include your logo on the card?</h4>
                                                        <TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single" Class="vertical-buttons block-buttons mb-5">
                                                            <ButtonGroupToggleButton @bind-Selected="@logoOnCard">Yes</ButtonGroupToggleButton>
                                                            <ButtonGroupToggleButton>No</ButtonGroupToggleButton>
                                                        </TelerikButtonGroup>
                                                        @if (isGreetingCard)
                                                        {
                                                            <hr class="m-5" />
                                                            <h4 class="mb-3">Would you like to include your logo on the envelope?</h4>
                                                            <TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single" Class="vertical-buttons block-buttons mb-5">
                                                                <ButtonGroupToggleButton @bind-Selected="@logoOnEnvelope">Yes</ButtonGroupToggleButton>
                                                                <ButtonGroupToggleButton>No</ButtonGroupToggleButton>
                                                            </TelerikButtonGroup>
                                                        }
                                                    </div>
                                                </div>
                                            </Template>
                                        </FormItem>
                                    </FormItems>
                                    <FormButtons>
                                    </FormButtons>
                                </TelerikForm>
                            </Content>
                        </WizardStep>                       
                        @*                                                                                    *@
                        @* Step 5 - Location information *@
                        @*                                                                                    *@
                        <WizardStep Label="Location Info" OnChange="@OnLocationStepChange" Valid="@isLocationInfoValid">
                            <Content>
                                <div class="container">
                                    <div class="row">
                                        <div class="col-12">
                                            <TelerikForm Model="@locationInfo" @ref="@locationForm" Columns="2" ColumnSpacing="25px">
                                                <FormButtons />
                                            </TelerikForm>
                                        </div>
                                    </div>
                                </div>
                            </Content>
                        </WizardStep>
                        @*                                                 *@
                        @* Step 6 - Payment                                *@
                        @*                                                 *@
                        <WizardStep Label="Payment Info">
                            <Content>
                                <TelerikForm Model="@paymentInfo" @ref="@paymentForm">
                                    <FormItems>
                                        <FormItem>
                                            <Template>
                                                <div class="container">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single" Class="vertical-buttons block-buttons mb-5">
                                                                <ButtonGroupToggleButton @bind-Selected="@ccOnFile">Credit Card On File</ButtonGroupToggleButton>
                                                                <ButtonGroupToggleButton @bind-Selected="@callWithInfo">Call With Payment Info</ButtonGroupToggleButton>
                                                                <ButtonGroupToggleButton @bind-Selected="@check">Check</ButtonGroupToggleButton>
                                                            </TelerikButtonGroup>
                                                        </div>
                                                        <div class="col-12 mb-5">
                                                            @if (ccOnFile)
                                                            {
                                                                <h4>Use our preferred payment method already on file.</h4>
                                                            }
                                                            else if (callWithInfo)
                                                            {
                                                                <h4>Please call me.</h4>
                                                                <p>I'll specify method of payment when reviewing the order.</p>
                                                            }
                                                            else if (check)
                                                            {
                                                                <h4>I'll be sending in a check</h4>
                                                                <p>I'll be sending in a check by the invoice's due date (10/24/2025).</p>
                                                            }
                                                        </div>
                                                        <hr />
                                                        <div class="col-12">
                                                            <label style="display:block" for="RequestedQuantity" class="text-center mb-3">Requested Quantity</label>
                                                            <TelerikTextBox class="mb-3" Id="RequestedQuantity" @bind-Value="@requestedQuantity" MaxLength="6" Width="15rem"></TelerikTextBox>
                                                            <label style="display:block" for="AdditionalComments" class="text-center mb-3">Additional Notes</label>
                                                            <TelerikTextArea class="mb-3" Id="CustomSignature" @bind-Value="@additionalComments" Rows="8" Cols="100" MaxLength="2500"></TelerikTextArea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </Template>
                                        </FormItem>
                                    </FormItems>
                                    <FormButtons />
                                </TelerikForm>
                            </Content>
                        </WizardStep>
                    </WizardSteps>
                </TelerikWizard>
            </div>
        </div>
    </div>
}
else
{
    <div class="container">
        <div class="row">
            <div class="col-12 m-5">
                Thank you, our customer care team will be in touch with you soon!
            </div>
            <div class="col-12">
                <RandomImage />
            </div>
        </div>
    </div>

}

@* @if (appState != null)
{
    <pre style="font-size:.8em">
        SessionId: @appState.SessionId
        DateCreated: @appState.DateCreated
        DateExpires: @appState.DateExpires
        IPAddress: @appState.myIpAddress
        IPAddress2: @(IpAddressService.RemoteIpAddress.ToString())
    </pre>
}
 *@