@page "/"
@using System.ComponentModel.DataAnnotations
@using kmCommonLibsCore;

<PageTitle>Welcome</PageTitle>

@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" OnChange="@OnAudienceChoiceStepChange" 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 Summer Growth Program</h1>
                                <div class="px-sm-5 mb-2">
                                  <p>It's time for our Summer Growth Program!<br />If you're looking to kick off your summer season with a wildly successful campgaign, then you've come to the right place!</p>
                                  <p>
                                    Using this wizard, choose your target audience, decide what media you'd like to mail, 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/7ccdfcc7-f91b-497e-8c19-ebb3a4021ea3.png" class="img-fluid" />
                                </div>
                                <div class="px-sm-5 mb-2 text-start">
                                  Your audience choices are:
                                  <ul>
                                    <li>A list of your <strong class="text-primary">Very Best Customers</strong> (always a heavy-hitting campaign!)</li>
                                      <li>A list composed of <strong class="text-primary">Great Prospects</strong> near your shop, as well as a mix of formerly-Great Customers that you 
                                        <strong class="text-primary">haven't seen during the past 8 months</strong>.</li>
                                  </ul>
                                </div>
                                <div class="px-sm-5 text-start">
                                    <strong>Please Select:</strong>
                                  <TelerikRadioGroup Data="@audiences"
                                                     @bind-Value="@audienceType"
                                                     ValueField="@nameof(AudienceType.AudienceDescription)"
                                                     TextField="@nameof(AudienceType.AudienceDescription)">
                                  </TelerikRadioGroup>
                                </div>
                              </div>
                            </div>
                          </div>
                        </Template>
                      </FormItem>
                    </FormItems>
                    <FormButtons>
                    @* Need this here to avoid addition of random submit button *@
                    </FormButtons>
                  </TelerikForm>
                </Content>
              </WizardStep>
            @*                                   *@
            @* Step 1 - plastic card vs postcard *@
            @*                                   *@
              <WizardStep Label="Card Type" Icon="@SvgIcon.EnvelopeBox" OnChange="@OnCardChoiceStepChange" Valid="@IsCardChoiceValid">
                <Content>
                  <TelerikForm Model="@cardType" @ref="@cardTypeForm">
                    <FormItems>
                      <FormItem>
                        <Template>
                          <div class="container">
                            <div class="row">
                              <div class="col-12">
                                <h1 style="text-align:center">Step 1 - Choose a Card Type</h1>
                              </div>
                              <div class="col-12 text-center mb-3">
                                <TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
                                  <ButtonGroupToggleButton @bind-Selected="@isPlasticCard">Plastic Card</ButtonGroupToggleButton>
                                  <ButtonGroupToggleButton @bind-Selected="@isPostcard">Postcard</ButtonGroupToggleButton>
                                </TelerikButtonGroup>
                              </div>
                            @* Preview information about the selected card type*@
                            @if (isPlasticCard)
                            {
                                  <div class="col-sm-4 mb-3 text-start">
                                    <h4>Very Popular Plastic Card Mailer!</h4>
                                    <ul>
                                      <li>As thick as a typical credit card!</li>
                                      <li>Large size piece (8&frac14; x 4 inches)</li>
                                      <li>Coupons pop out, 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.02 each</strong></li>
                                    </ul>
                                  </div>
                                  <div class="col-sm-8 text-center mb-3">
                                    <img class="img-fluid" src="/img/1181c4aa-4f3f-4eb4-8d5d-7eff0131d5f2.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">79&#162; each</strong></li>
                                    </ul>
                                  </div>
                                  <div class="col-sm-8 text-center mb-3">
                                    <img class="img-fluid" src="/img/ad5a2b69-a493-429b-9edd-8320ec1e9c33.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" Icon="@SvgIcon.MapMarkerTarget" OnChange="@OnDesignStepChange" Valid="@IsDesignChoiceValid">
                <Content>
                  <TelerikForm Model="@custOptions"
                               @ref="@customizationForm">
                    <FormValidation>
                      <DataAnnotationsValidator></DataAnnotationsValidator>
                    </FormValidation>
                    <FormItems>
                      <FormItem>
                        <Template>
                          <h1 style="text-align:center">Choose a Design</h1>

                        @* Button logic *@
                          <div style="text-align:center">
                            <TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
                            @if (isPlasticCard)
                            {
                                  <ButtonGroupToggleButton @bind-Selected="@designOne">Plastic Card 1</ButtonGroupToggleButton>
                                  <ButtonGroupToggleButton @bind-Selected="@designTwo">Plastic Card 2</ButtonGroupToggleButton>
                                  <ButtonGroupToggleButton @bind-Selected="@designThree">Plastic Card 3</ButtonGroupToggleButton>
                            }
                            else
                            {
                                  <ButtonGroupToggleButton @bind-Selected="@designOne">Postcard 1</ButtonGroupToggleButton>
                                  <ButtonGroupToggleButton @bind-Selected="@designTwo">Postcard 2</ButtonGroupToggleButton>
                                  <ButtonGroupToggleButton @bind-Selected="@designThree">Postcard 3</ButtonGroupToggleButton>
                            }
                            </TelerikButtonGroup>
                            <br /><br />
                          @* Card preview logic *@
                          @if (designOne)
                          {
                            @if (isPostcard)
                            {
                                    <img src="/img/Postcard1_Front.png" class="img-fluid" />
                                    <img src="/img/Postcard1_Back.png" class="img-fluid" />
                            }
                            else
                            {
                                    <img src="/img/Plastic1_Front.png" class="img-fluid" />
                                    <img src="/img/Plastic1_Back.png" class="img-fluid" />

                            }
                          }
                          else if (designTwo)
                          {
                            @if (isPostcard)
                            {
                                    <img src="/img/Postcard2_Front.png" class="img-fluid"/>
                                    <img src="/img/Postcard2_Back.png" class="img-fluid"/>
                            }
                            else
                            {
                                    <img src="/img/Plastic2_Front.png" class="img-fluid"/>
                                    <img src="/img/Plastic2_Back.png" class="img-fluid"/>
                            }
                          }
                          else if (designThree)
                          {
                            @if (isPostcard)
                            {
                                    <img src="/img/Postcard3_Front.png" class="img-fluid"/>
                                    <img src="/img/Postcard3_Back.png" class="img-fluid"/>
                            }
                            else
                            {
                                    <img src="/img/Plastic3_Front.png" class="img-fluid"/>
                                    <img src="/img/Plastic3_Back.png" class="img-fluid"/>
                            }
                          }
                          </div>
                        </Template>
                      </FormItem>
                    </FormItems>
                    <FormButtons>

                    </FormButtons>
                  </TelerikForm>
                </Content>
              </WizardStep>
            @*                                                        *@
            @* Step 3 - For postcards, choose a verse and a signature *@
            @*                                                        *@            
                            <WizardStep Label="Customization" OnChange="@OnMessagingStepChange" Valid="@isMessagingValid">
                <Content>
                  <TelerikForm Model="@messagingOptions"
                               @ref="@messagingForm">
                    <FormItems>
                      <FormItem>
                        <Template>
                        @if (isPlasticCard)
                        {
                              <h1>No customization needed. Please proceed to logo selection.</h1>
                        }
                        else
                        {
                              <h1>Select a Verse</h1>
                          @if (!isPlasticCard)
                          {
                                  <TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single" Class="vertical-buttons block-buttons">
                                    <ButtonGroupToggleButton @bind-Selected="@verseOne">Option 1</ButtonGroupToggleButton>
                                    <ButtonGroupToggleButton @bind-Selected="@verseTwo">Option 2</ButtonGroupToggleButton>
                                    <ButtonGroupToggleButton @bind-Selected="@verseThree">Option 3</ButtonGroupToggleButton>
                                  </TelerikButtonGroup>
                                  <br />
                                  <br />

                            @if (verseOne)
                            {
                                      <a>Thank you for making our success possible. We appreciate loyal customers like you and look forward to continuing to be your complete auto repair, service and tire center</a>
                            }
                            else if (verseTwo)
                            {
                                      <a>We appreciate the trust you have shown in us and look forward to working with you in the future.</a>
                            }
                            else if (verseThree)
                            {
                                      <a>We want you to know that we truly appreciate your business and will make every effort possible to continue to provide you with excellent car care.</a>
                            }
                                  <br />
                                  <br />
                                  <hr />



                                  <h1>Select a Signature</h1>
                                  <TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
                                    <ButtonGroupToggleButton @bind-Selected="@sigOne">From Your Friends</ButtonGroupToggleButton>
                                    <ButtonGroupToggleButton @bind-Selected="@sigTwo">Name, Title, Phone Number</ButtonGroupToggleButton>
                                    <ButtonGroupToggleButton @bind-Selected="@sigThree">Custom</ButtonGroupToggleButton>
                                  </TelerikButtonGroup>
                                  <br />
                                  <br />
                            @if (sigOne)
                            {
                                      <a>From your friends at <strong>{Location Name} {Location Phone Number}</strong></a>
                            }
                            else if (sigTwo)
                            {
                                      <FormItem LabelText="Custom Signature">
                                        <Template>
                                          <label style="text-align:center; display:block" for="CustomName" class="k-label k-form-label">Name:        <TelerikTextBox Id="CustomName" @bind-Value="@customName" MaxLength="30" Width="250px"></TelerikTextBox></label>
                                          <label style="text-align:center; display:block" for="CustomTitle" class="k-label k-form-label">Title:   <TelerikTextBox Id="CustomTitle" @bind-Value="@customTitle" MaxLength="30" Width="250px"></TelerikTextBox></label>
                                          <label style="text-align:center; display:block" for="CustomPhone" class="k-label k-form-label">Phone:   <TelerikTextBox Id="CustomPhone" @bind-Value="@customPhone" MaxLength="12" Width="200px"></TelerikTextBox></label>
                                        </Template>
                                      </FormItem>
                            }
                            else if (sigThree)
                            {
                                      <FormItem LabelText="Custom Signature">
                                        <Template>
                                          <label for="CustomSignature" style="text-align: 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>
                                        </Template>
                                      </FormItem>
                            }
                          }
                        }
                        </Template>
                      </FormItem>
                    </FormItems>
                    <FormButtons>

                    </FormButtons>
                  </TelerikForm>
                </Content>
              </WizardStep>
            @*                         *@
            @* Step 4 - Logo Selection *@
            @*                         *@
              <WizardStep Label="Logos" OnChange="@OnLogoStepChange" Valid="@isLogoValid">
                <Content>
                  <TelerikForm Model="@logoOptions"
                               @ref="@logoForm">
                    <FormItems>
                      <FormItem>
                        <Template>
                          <TelerikCheckBox Id="goodyearBox" @bind-Value="@goodyear" />
                          <label for="goodyearBox">Goodyear Logo</label>
                          <TelerikCheckBox Id="michelinBox" @bind-Value="@michelin" />
                          <label for="michelinBox">Michelin Logo</label>
                          <TelerikCheckBox Id="customBox" @bind-Value="@custom" />
                          <label for="customBox">Custom Logo</label>
                          <br /><br /><br />
                        @if (goodyear)
                        {
                              <img src="img/goodyear.png" />
                        }
                        @if (michelin)
                        {
                              <img src="img/michelin.png" />
                        }
                        </Template>
                      </FormItem>
                    </FormItems>
                    <FormButtons>
                    </FormButtons>
                  </TelerikForm>
                </Content>
              </WizardStep>



            @*                                            *@
            @* Step 5 - Offer selection for Plastic cards *@
            @*                                            *@
              <WizardStep Label="Offers" OnChange="@OnOfferStepChange" Valid="@isOfferSelectionValid">
                <Content>
                  <TelerikForm Model="@offerOptions"
                               @ref="@offerForm">
                    <FormItems>
                      <FormItem>
                        <Template>
                        @if (isPlasticCard)
                        {
                              <h1>Please select two (2) full size offers:</h1>
                              <TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Multiple">
                                <ButtonGroupToggleButton @bind-Selected="@bigOffers[0]"><img src="img/A1.png" /></ButtonGroupToggleButton>
                                <ButtonGroupToggleButton @bind-Selected="@bigOffers[1]"><img src="img/A2.png" /></ButtonGroupToggleButton>
                                <ButtonGroupToggleButton @bind-Selected="@bigOffers[2]"><img src="img/A3.png" /></ButtonGroupToggleButton>
                                <ButtonGroupToggleButton @bind-Selected="@bigOffers[3]"><img src="img/A4.png" /></ButtonGroupToggleButton>
                                <ButtonGroupToggleButton @bind-Selected="@bigOffers[4]"><img src="img/A5.png" /></ButtonGroupToggleButton>
                                <ButtonGroupToggleButton @bind-Selected="@bigOffers[5]"><img src="img/A6.png" /></ButtonGroupToggleButton>
                              </TelerikButtonGroup>

                              <br />
                              <br />
                              <hr />
                              <h1>And four (4) half-sized offers:</h1>
                              <TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Multiple">
                                <ButtonGroupToggleButton @bind-Selected="@smallOffers[0]"><img src="img/B1.png" /></ButtonGroupToggleButton>
                                <ButtonGroupToggleButton @bind-Selected="@smallOffers[1]"><img src="img/B2.png" /></ButtonGroupToggleButton>
                                <ButtonGroupToggleButton @bind-Selected="@smallOffers[2]"><img src="img/B3.png" /></ButtonGroupToggleButton>
                                <ButtonGroupToggleButton @bind-Selected="@smallOffers[3]"><img src="img/B4.png" /></ButtonGroupToggleButton>
                                <ButtonGroupToggleButton @bind-Selected="@smallOffers[4]"><img src="img/B5.png" /></ButtonGroupToggleButton>
                                <ButtonGroupToggleButton @bind-Selected="@smallOffers[5]"><img src="img/B6.png" /></ButtonGroupToggleButton>
                              </TelerikButtonGroup>
                              <br />
                              <TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Multiple">
                                <ButtonGroupToggleButton @bind-Selected="@smallOffers[6]"><img src="img/B7.png" /></ButtonGroupToggleButton>
                                <ButtonGroupToggleButton @bind-Selected="@smallOffers[7]"><img src="img/B8.png" /></ButtonGroupToggleButton>
                                <ButtonGroupToggleButton @bind-Selected="@smallOffers[8]"><img src="img/B9.png" /></ButtonGroupToggleButton>
                                <ButtonGroupToggleButton @bind-Selected="@smallOffers[9]"><img src="img/B10.png" /></ButtonGroupToggleButton>
                                <ButtonGroupToggleButton @bind-Selected="@smallOffers[10]"><img src="img/B11.png" /></ButtonGroupToggleButton>
                                <ButtonGroupToggleButton @bind-Selected="@smallOffers[11]"><img src="img/B12.png" /></ButtonGroupToggleButton>
                              </TelerikButtonGroup>
                        }
                        else
                        {
                              <h1>No offers needed. Please proceed to location information.</h1>
                        }
                        </Template>
                      </FormItem>
                    </FormItems>

                    <FormButtons>

                    </FormButtons>
                  </TelerikForm>
                </Content>
              </WizardStep>



            @*                                          *@
            @* Step 6 - Location information *@
            @*                                          *@
              <WizardStep Label="Location Info" OnChange="@OnLocationStepChange" Valid="@isLocationInfoValid">
                <Content>
                  <TelerikForm Model="@locationInfo"
                               @ref="@locationForm" Columns="2" ColumnSpacing="25px">
                    <FormButtons></FormButtons>
                  </TelerikForm>
                </Content>
              </WizardStep>



            @*                         *@
            @* Step 7 - Payment        *@
            @*                         *@
              <WizardStep Label="Payment Info">
                <Content>
                  <TelerikForm Model="@paymentInfo"
                               @ref="@paymentForm">
                    <FormItems>
                      <FormItem>
                        <Template>
                          <TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single" Class="vertical-buttons block-buttons">
                            <ButtonGroupToggleButton @bind-Selected="@ccOnFile">Credit Card On File</ButtonGroupToggleButton>
                            <ButtonGroupToggleButton @bind-Selected="@callWithInfo">Call With Payment Info</ButtonGroupToggleButton>
                            <ButtonGroupToggleButton @bind-Selected="@check">Check (due by 6/13/25)</ButtonGroupToggleButton>
                          </TelerikButtonGroup>
                        </Template>
                      </FormItem>
                      <br /><br />
                      <FormItem LabelText="Additional Info">
                        <Template>
                          <label for="RequestedQuantity" style="text-align: center">Requested Quantity</label>
                          <TelerikTextBox Id="RequestedQuantity" @bind-Value="@requestedQuantity" MaxLength="6" Width="150px"></TelerikTextBox>
                          <label for="AdditionalComments" style="text-align: center">Additional Comments</label>
                          <TelerikTextBox Id="AdditionalComments" @bind-Value="@additionalComments" MaxLength="120" Width="450px"></TelerikTextBox>
                        </Template>
                      </FormItem>
                    </FormItems>
                    <FormButtons>

                    </FormButtons>
                  </TelerikForm>
                </Content>
              </WizardStep>
            </WizardSteps>
          </TelerikWizard>
        </div>
      </div>
    </div>
}