@using MrCMS.Web.Apps.Ecommerce.Models
@model PaypointPaymentDetailsModel  
@{
    var startMonths = ViewData["start-months"] as IEnumerable<SelectListItem>;
    var startYears = ViewData["start-years"] as IEnumerable<SelectListItem>;
    var expiryMonths = ViewData["expiry-months"] as IEnumerable<SelectListItem>;
    var expiryYears = ViewData["expiry-years"] as IEnumerable<SelectListItem>;
    var cardTypes = ViewData["card-types"] as IEnumerable<SelectListItem>;
    var failureDetails = TempData["error-details"] as FailureDetails;
}
@if (failureDetails != null)
{
    <div class="alert alert-danger">
        <ul>
            @if (failureDetails.Details != null)
            {
                foreach (var error in failureDetails.Details)
                {
                <li>
                    @error
                </li>
                }
            }
            else
            {
                <li>
                    @failureDetails.Message
                </li>
            }
        </ul>
    </div>
}
@using (Html.BeginForm("Form", "Paypoint", FormMethod.Post, new { @class = "form-horizontal" }))
{
    <div id="select-method">
        <h3>Card Details</h3>
         <div class="row">
             <div class="col-lg-12 col-md-6 col-sm-8">
                 <label for="CardType">Card Type <span class="red">*</span> :</label>
                 <div class="padding-bottom-10">
                     @Html.DropDownListFor(model => model.CardType, cardTypes, new { @class = "form-control" })
                     @Html.ValidationMessageFor(model => model.CardType)
                 </div>

                 <div class="margin-bottom-10">
                     <label for="CardNumber">Card Number <span class="red">*</span> :</label>
                     @Html.TextBoxFor(model => model.CardNumber, new { @class = "form-control" })
                     @Html.ValidationMessageFor(model => model.CardNumber)
                 </div>

                 <div class="margin-bottom-10">
                     <label for="NameOnCard">Name On Card <span class="red">*</span> :</label>
                     @Html.TextBoxFor(model => model.NameOnCard, new { @class = "form-control" })
                     @Html.ValidationMessageFor(model => model.NameOnCard)
                 </div>

                 <div class="margin-bottom-10">
                     <div class="row">
                         <div class="col-sm-8">
                             <label for="CardVerificationCode">Card Verification <span class="red">*</span> :</label>
                             @Html.TextBoxFor(model => model.CardVerificationCode, new { @class = "form-control" })
                             @Html.ValidationMessageFor(model => model.CardVerificationCode)
                         </div>
                         <div class="col-sm-4">
                             <label>&nbsp;</label>
                             <div class="line-height-30">
                                 <img src="/Apps/Ecommerce/Content/Images/crv.gif" alt="CVC" />
                             </div>
                         </div>
                     </div>
                 </div>

                 <div class="margin-bottom-10">
                     <div class="row">
                         <div class="col-sm-6">
                             <label>
                                 Valid From :
                             </label>
                             @Html.DropDownListFor(model => model.StartMonth, startMonths, new { @class = "form-control" })
                         </div>
                         <div class="col-sm-6">
                             <label>&nbsp;</label>
                             <div class="line-height-30">
                                 @Html.DropDownListFor(model => model.StartYear, startYears, new { @class = "form-control" })
                             </div>
                         </div>
                     </div>
                 </div>

                 <div class="margin-bottom-10">
                     <div class="row">
                         <div class="col-sm-6">
                             <label>
                                 Expires On <span class="red">*</span> :
                             </label>
                             @Html.DropDownListFor(model => model.EndMonth, expiryMonths, new { @class = "form-control" })
                             @Html.ValidationMessageFor(model => model.EndMonth)
                         </div>
                         <div class="col-sm-6">
                             <label>&nbsp;</label>
                             <div class="line-height-30">
                                 @Html.DropDownListFor(model => model.EndYear, expiryYears, new { @class = "form-control" })
                                 @Html.ValidationMessageFor(model => model.EndYear)
                             </div>
                         </div>
                     </div>
                 </div>

                 <div class="margin-bottom-10">
                     <div class="row">
                         <div class="col-sm-6">
                             <label>
                                 Issue Number :
                             </label>
                             @Html.TextBoxFor(model => model.CardIssueNumber, new { @class = "form-control" })
                         </div>
                         <div class="col-sm-6">
                             <label>&nbsp;</label>
                             <div class="line-height-30">
                                 <span>(Maestro/Solo only)</span>
                             </div>
                         </div>
                     </div>
                 </div>

                 <div class="margin-bottom-10">
                     <button class="btn btn-primary btn-lg" id="continue" name="continue">Take Payment</button>
                 </div>
             </div>
        </div>
        
        <div class="alert alert-info">
            <strong>Information:</strong> You may be taken to your card issuer’s website for card validation. You will be returned back to this site once the process is complete.
        </div>
    </div>
}
<style>
    .input-validation-error {
        border: 1px solid red!important;
    }

    .field-validation-error span {
        color: red;
    }
</style>
