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

<PageTitle>Welcome</PageTitle>

@if (ShowWizard)
{
  <TelerikWizard @bind-Value="@Value" OnFinish="@OnFinishHandler" Width="1440px" Height="900px" Class="sbWizard">
    <WizardSteps>
      @*                                   *@
      @* Step 1 - plastic card vs postcard *@
      @*                                   *@
      <WizardStep Label="Card Type" Icon="@SvgIcon.EnvelopeBox" OnChange="@OnCardChoiceStepChange" Valid="@IsCardChoiceValid">
        <Content>
          <TelerikForm Model="@cardType" @ref="@cardTypeForm">
            <FormItems>
              <h1 style="text-align:center">Choose a Card Type</h1>
              @* Logic behind the buttons *@
              <div style="text-align:center">
                <TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
                  <ButtonGroupToggleButton @bind-Selected="@isPlasticCard">Plastic Card</ButtonGroupToggleButton>
                  <ButtonGroupToggleButton @bind-Selected="@isPostcard">Postcard</ButtonGroupToggleButton>
                </TelerikButtonGroup>
              </div>
              <br />

              @* Preview information about the selected card type*@

              @if (isPlasticCard)
              {
                <h3>Focused on Expanding Your Customer Base ($1.02/card)</h3>
              }
              else
              {
                <h3>Focused on Thanking and Rewarding Your Best Customers ($0.79/card)</h3>
              }

              @if (isPlasticCard)
              {
                <img src="img/Plastic1_Back.png" />
              }
              else
              {
                <img src="img/Postcard1_Front.png" />
              }
            </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>
              <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" />
                    <img src="img/Postcard1_Back.png" />
                  }
                  else
                  {
                    <img src="img/Plastic1_Front.png" />
                    <img src="img/Plastic1_Back.png" />

                  }
                }
                else if (designTwo)
                {
                  @if (isPostcard)
                  {
                    <img src="img/Postcard2_Front.png" />
                    <img src="img/Postcard2_Back.png" />
                  }
                  else
                  {
                    <img src="img/Plastic2_Front.png" />
                    <img src="img/Plastic2_Back.png" />
                  }
                }
                else if (designThree)
                {
                  @if (isPostcard)
                  {
                    <img src="img/Postcard3_Front.png" />
                    <img src="img/Postcard3_Back.png" />
                  }
                  else
                  {
                    <img src="img/Plastic3_Front.png" />
                    <img src="img/Plastic3_Back.png" />
                  }
                }
              </div>
            </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>
              @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>
                  }
                }
              }
            </FormItems>
            <FormButtons>

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



      @*                         *@
      @* Step 4 - Logo Selection *@
      @*                         *@
      <WizardStep Label="Logos" OnChange="@OnLogoStepChange" Valid="@isLogoValid">
        <Content>
          <TelerikForm Model="@logoOptions"
                       @ref="@logoForm">
            <FormItems>
              <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" />
              }
            </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>
              @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>
              }
            </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>
              <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 5/31/25)</ButtonGroupToggleButton>
              </TelerikButtonGroup>
              <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>
}