@model ParcelWeb.Core.ViewModels.PaymentVM

@{
    ViewBag.Title = "Book Shipment";
    string accountCode = ViewBag.AccountCode;
}
<link rel="stylesheet" href="https://checkout.stripe.com/v3/checkout/button.css" />
<style>
    .custom-control-indicator + .custom-control-description {
        margin-left: 0rem;
    }
</style>
<div class="content-header row">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="javascript:void(0)">Home</a>
            </li>

            <li class="breadcrumb-item">
                <a href="javascript:void(0)">Book Shipment</a>

            </li>
            <li class="breadcrumb-item active">
                Payment
            </li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="col-md-12">

        <div class="card">
            <div class="card-header">
                <h4 class="card-title" id="basic-layout-form"><span class="text-info">Payment Due:</span>   @Model.Shipment.Total.ToString("0.00") @Model.Shipment.Currency.Code</h4>
                <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
                <div class="heading-elements">
                    <ul class="list-inline mb-0">
                        <li><a data-action="collapse"><i class="icon-minus4"></i></a></li>
                        <li><a data-action="reload"><i class="icon-reload"></i></a></li>
                        <li><a data-action="expand"><i class="icon-expand2"></i></a></li>

                    </ul>
                </div>
            </div>
            <div class="card-body collapse in">
                <div class="card-block">
                    <div class="row">
                        <div class="col-md-10">
                            <div class="card">
                                <div class="card-header header-default">
                                    <h5 class="card-title"><span class="text-info">@Model.Shipment.ItemDescription</span> to <span class="text-info">@Model.Shipment.ReceiverName</span> using <span class="text-info">@Model.Shipment.DeliveryService.Name</span></h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6" style="border-right:1px solid #F0F0F0">
                                            <div class="card-block">
                                                <h5 class="p-0 text-bold-600">Drop off point: <span class="text-info">@Model.Shipment.SenderName</span></h5>
                                                <p class="pb-0 mb-0">@Model.Shipment.SenderAddress.StreetAddress</p>
                                                <p class="p-0">@Model.Shipment.SenderAddress.CityId, @Model.Shipment.SenderAddress.Country.Name</p>

                                            </div>
                                        </div>
                                        <div class="col-md-6" style="border-left:1px solid #F0F0F0">
                                            <div class="card-block">
                                                <h5 class="p-0 text-bold-600">Delivery Details: <span class="text-info">@Model.Shipment.ReceiverName</span></h5>
                                                <p class="pb-0 mb-0">@Model.Shipment.ReceiverAddress.StreetAddress</p>
                                                <p class="p-0">@Model.Shipment.ReceiverAddress.CityId, @Model.Shipment.ReceiverAddress.Country.Name</p>
                                                <h5 class="p-0 text-bold-600">Delivery due by: </h5>
                                                <p class="pb-0 mb-0">@Model.Shipment.DeliveryDate.ToString()</p>

                                            </div>

                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-md-10">
                            <div class="card">
                                <div class="card-header header-info">
                                    <h5 class="card-title "><span class="">Payment Method</span></h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="card-block">
                                                @if (Model.AppSettings.IsStripeEnabled)
                                                {
                                                    <label class="display-inline-block custom-control custom-radio">
                                                        <input type="radio" name="inlineRadio1" class="custom-control-input" value="1">
                                                        <span class="custom-control-indicator"></span>

                                                        <span class="custom-control-description">
                                                            <img src="~/Images/Default/icons8-stripe-64.png" style="max-width:40px;margin-top:-10px" />
                                                        </span>
                                                    </label>
                                                }


                                                @if (Model.AppSettings.IsPayPalEnabled)
                                                {
                                                    <label class="display-inline-block custom-control custom-radio">
                                                        <input type="radio" name="inlineRadio1" class="custom-control-input" value="2">
                                                        <span class="custom-control-indicator"></span>
                                                        <span class="custom-control-description">
                                                            <img src="~/Images/Default/paypal.png" style="margin-top:-10px" />
                                                        </span>
                                                    </label>
                                                }

                                                <label class="display-inline-block custom-control custom-radio">
                                                    <input type="radio" name="inlineRadio1" class="custom-control-input" value="3">
                                                    <span class="custom-control-indicator"></span>
                                                    <span class="custom-control-description">
                                                        <img src="~/Images/Default/icons8-debit-card-64.png" style="max-width:40px;margin-top:-10px" />
                                                        <span style="color:GrayText"><b>Bank Transfer</b> </span>
                                                    </span>
                                                </label>
                                            </div>

                                        </div>
                                    </div>

                                    <!---Content-->
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="card-block">
                                                <div id="stripebox" class="hidden">
                                                    <input type="hidden" name="shipmentId" value="@Model.Shipment.ShipmentId" />
                                                    <button id="checkout-button" class="stripe-button-el">
                                                        <span style="display: block; min-height: 30px;">Stripe check out</span>
                                                    </button>
                                                </div>

                                                <div id="paypalbox" class="hidden">
                                                    <form action="/Order/Charge" method="POST">
                                                        @Html.AntiForgeryToken()
                                                        <a href="" title="Check out with PayPal"><img src="https://www.paypalobjects.com/digitalassets/c/website/marketing/apac/C2/logos-buttons/34_Yellow_CheckOut_Pill_Button.png" alt="Check out with PayPal" /></a>

                                                        <input type="hidden" name="trackingId" value="@Model.Shipment.TrackingId" />
                                                        <input type="hidden" name="amount" value="@Model.Shipment.Total" />
                                                        <input type="hidden" name="currency" value="@Model.Shipment.Currency.Code" />
                                                    </form>
                                                </div>
                                                <div id="bankbox" class="hidden">
                                                    <p class="card-text">
                                                        Please note down our bank details and make a transection <br />
                                                        Once we receive the payment we will process your request.
                                                    </p>

                                                    <p class="card-text">
                                                        <b>@Model.AppSettings.BankName</b>  <br />
                                                        <b>Account Name:</b>   @Model.AppSettings.AccountName <br />
                                                        <b>Sort Code:</b>  @Model.AppSettings.SortCode<br />
                                                        <b>Account Number:</b>  @Model.AppSettings.AccountNumber

                                                    </p>

                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>





@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script src="https://js.stripe.com/v3"></script>

    <script>

        var stripe = Stripe('@Model.AppSettings.stripePublishableKey.Trim()');

        var checkoutButton = document.getElementById('checkout-button');
        var shipmentId = $('input[name="shipmentId"]').val();
        checkoutButton.addEventListener('click', function () {
            // Create a new Checkout Session using the server-side endpoint you
            // created in step 3.
            fetch('/Order/CreateCheckoutSession', {
                method: 'POST'
            })
            .then(function (response) {
                return response.json();
            })
            .then(function (session) {
                return stripe.redirectToCheckout({ sessionId: session.id });
            })
            .then(function (result) {
                // If `redirectToCheckout` fails due to a browser or network
                // error, you should display the localized error message to your
                // customer using `error.message`.
                if (result.error) {
                    alert(result.error.message);
                }
            })
            .catch(function (error) {
                console.error('Error:', error);
            });
        });

        $(document).ready(function () {

            $("input[name='inlineRadio1']").click(function () {
                var Value = $(this).val();
                debugger;
                if (Value == "1") {
                    $('#bankbox').addClass('hidden');
                    $('#paypalbox').addClass('hidden');
                    $('#stripebox').removeClass('hidden');

                }
                else if (Value == "2") {
                    $('#bankbox').addClass('hidden');
                    $('#stripebox').addClass('hidden');
                    $('#paypalbox').removeClass('hidden');
                }
                else if (Value == "3") {
                    $('#bankbox').removeClass('hidden');
                    $('#stripebox').addClass('hidden');
                    $('#paypalbox').addClass('hidden');
                }

            });

        });


    </script>
}