@using Mainstreet.Epi.ViewModels.Interfaces
@using Mainstreet.Epi.Models.Pages
@using Mainstreet.Epi.ViewModels.Implementations
@*@{
    Layout = "~/Views/Shared/Layouts/_Root.cshtml";
}*@

@{
    Layout = "~/Views/Shared/Layouts/_Email.cshtml";
}

<script type="text/javascript">
    var xhttp = new XMLHttpRequest();
    var head = document.head || document.getElementsByTagName('head')[0];
    xhttp.open('GET', '/Static/stylesheets/main.css');
    xhttp.onreadystatechange = function () {
        if (xhttp.readyState === 4) {
            if (xhttp.status === 200) {
                var style = document.createElement('style');
                style.type = 'text/css';
                if (style.styleSheet) {
                    style.styleSheet.cssText = xhttp.responseText;
                } else {
                    style.appendChild(document.createTextNode(xhttp.responseText));
                }
                head.appendChild(style);
            } else {
                console.log("Error", xhttp.statusText);
            }
        }
    }
    xhttp.send();
</script>
@section head{
    <style>
        .page-container-gray {
        padding-bottom: 2.25rem;
        background-color: #F3F2EE; }

        .btn, .btn-secondary, .btn-alt, .cta-background-coral a, .btn-tertiary {
          display: inline-block;
          margin-bottom: .875rem;
          padding: 0.375rem .625rem;
          font-family: inherit;
          font-weight: 700;
          text-transform: uppercase;
          text-decoration: none;
          color: #ffffff;
          background: #9db4d9;
          border: 0;
          border-radius: 5px;
          -webkit-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
          -webkit-appearance: none;
          cursor: pointer;
        }
    </style>

    }


@model IConfirmationPageViewModel

<div class="page-container-gray">
    <!-- Secondary header and title -->
    <div class="secondary-header-no-image">
        <div>
            <h1>Registration Successful</h1>
        </div>
    </div>

    <!-- Confirmation page content -->
    <div class="confirmation-container">
        <div class="confirmation-message">
            <h4>A confirmation email has been sent to <span class="confirmation-message-email">@Model.ConfirmationViewModel.CurrentUser.MemberEmail</span></h4>
        </div>
        <div class="confirmation-content">
            <div class="confirmation-details">
                <div class="confirmation-details-header">
                    <div class="confirmation-details-header-content">
                        <h3>Your Order</h3>
                        <h4>#1408026</h4>
                    </div>
                    <button class="btn btn-capitalize btn-long">Print Receipt</button>
                </div>
                @foreach(var invoices in Model.ConfirmationViewModel.Invoices)
                {
                    <div class="confirmation-details-item">
                        <div class="confirmation-details-item-inner">
                            <div>
                                @if (invoices.DescriptionBlock != null)
                                {
                                    <h5>@invoices.DescriptionBlock.Title</h5>
                                }
                                @*<p class="font-gray">Course</p>*@
                            </div>
                            <p>@invoices.Invoice.TotalAmount.ToString("0.00")</p>
                        </div>
                    </div>
                }
                @foreach (var eve in Model.ConfirmationViewModel.Events)
                {
                    <div class="confirmation-details-item">
                        <div class="confirmation-details-item-inner">
                            <div>
                                <h5>@eve.Title</h5>
                                <p class="font-gray">@eve.Type</p>
                            </div>
                            <p>@eve.Total.ToString("0.00")</p>
                        </div>
                    </div>
                }
                @foreach (var donation in Model.ConfirmationViewModel.OptionalFeeBlocks)
            {
                    <div class="confirmation-details-item">
                        <div class="confirmation-details-item-inner">
                            <div>
                                <h5>@donation.Title</h5>
                            </div>
                            <p>$@donation.FeeAmount.ToString("0.00")</p>
                        </div>
                    </div>
                }
                <div class="confirmation-details-personal-info">
                    <div class="confirmation-details-personal-info-inner">
                        <div>
                            <h5>Member Name</h5>
                            <div class="font-gray">
                                <p>@Model.ConfirmationViewModel.CurrentUser.FullName</p>
                                <p>@Model.ConfirmationViewModel.CurrentUser.MemberNumber</p>
                            </div>
                        </div>
                        <div>
                            <h5>Billing Address</h5>
                            <div class="font-gray">
                                <p>@Model.ConfirmationViewModel.BillingAddress.BillingAddress1</p>
                                <p>@Model.ConfirmationViewModel.BillingAddress.BillingAddress2</p>
                                <p>@Model.ConfirmationViewModel.BillingAddress.BillingCity</p>
                                <p>@Model.ConfirmationViewModel.BillingAddress.BillingState</p>
                                <p>@Model.ConfirmationViewModel.BillingAddress.BillingZip</p>
                            </div>
                        </div>
                        <div>
                            <h5>Card Number</h5>
                            <p class="font-gray">@Model.ConfirmationViewModel.CreditCard</p>
                        </div>
                    </div>
                </div>
                <div class="confirmation-details-total">
                    <div class="confirmation-details-total-inner">
                        <h5>Total Paid</h5>
                        <p>$@Model.ConfirmationViewModel.TotalPaid.ToString("0.00")</p>
                    </div>
                </div>
            </div>
            <div class="confirmation-next-steps">
                @if (Model.ConfirmationViewModel.IsEventOrCourse)
                {
                    <h3 class="confirmation-next-steps-title">Next Steps</h3>
                    <ul>
                        <!-- Repeater -->
                        <li>
                            <a href="#" class="btn-secondary">
                                <span>Add to calendar</span>
                                <span>
                                    <svg class="svg-icon" aria-hidden="true" focusable="false">
                                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-calendar"></use>
                                    </svg>
                                    <span class="text">
                                        <span class="visually-hidden">Add to calendar</span>
                                    </span>
                                </span>
                            </a>
                        </li>
                        <!-- End repeater -->
                    </ul>
                }
            </div>
        </div>
    </div>

    <!-- "You May also Like" partial -->

    @Html.Partial("~/Views/Partial/EventsUpsell.cshtml", new EventUpsellPageViewModel(Model.ConfirmationViewModel.UpsellBlocks))

</div>