@{
    ViewData["Title"] = "My Accounts";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@model EForT.Models.AccountsModel

<div class="app-content container center-layout mt-2">
    <div class="content-wrapper">
        @{
            if (ViewBag.flash_message != null)
            {
                <div class="alert alert-primary" role="alert">
                    @ViewBag.flash_message
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            }
        }
        <div class="content-body">
            <div class="row">
                <div class="col-sm-12">
                    <div class="container">
                        <!-- Nav tabs -->
                        <div>
                            <ul class="nav nav-tabs nav-justified account-pills" id="accountTabs">
                                <li class="nav-item">
                                    <a class="nav-link active border-top border-right border-left" href="#efortaccount" data-toggle="tab"><p class="font-medium-2">EForT Account</p></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link border-top border-right border-left" href="#bankaccount" data-toggle="tab"><p class="font-medium-2">Bank Account</p></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link border-top border-right border-left" href="#creditcards" data-toggle="tab"><p class="font-medium-2">Credit Cards</p></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link border-top border-right border-left" href="#subscriptions" data-toggle="tab"><p class="font-medium-2">Subscriptions</p></a>
                                </li>
                            </ul>
                        </div>
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div class="tab-pane active" id="efortaccount">
                                <div class="card">
                                    <div class="card-header border-0-bottom">
                                        <div class="font-medium-3 bottom-border">
                                            <!-- EForT Account tab name -->
                                            <p>Your EForT Account</p>
                                        </div>
                                    </div>
                                    <div class="card-body pt-0">
                                        <!-- EForT Account content goes here -->
                                        <div class="col-sm-6">
                                            @{
                                                if (Model.PrimaryAccount == null)
                                                {
                                                    <p>You have no primary account associated with your account at this time.</p>
                                                }
                                                else
                                                {
                                                    <h4 class="card-title">
                                                        <span class="font-small-3">Available Balance: <span class="badge badge-success">@String.Format("${0:0.00}", @Model.PrimaryAccount.Balance)</span></span>
                                                    </h4>
                                                    //<div class="font-medium-3">Available Balance: @String.Format("${0:0.00}", @Model.PrimaryAccount.Balance)</div>
                                                }
                                            }
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="bankaccount">
                                <div class="card">
                                    <div class="card-header border-0-bottom">
                                        <div class="font-medium-3 bottom-border">
                                            <!-- Bank Account tab name -->
                                            <p>Your Bank Account</p>
                                        </div>
                                    </div>
                                    <div class="card-body pt-0">
                                        <!-- Bank Account content goes here -->
                                        <h4 class="card-title">
                                            <span class="font-small-3">Available Balance: <span class="badge badge-success">@String.Format("${0:0.00}", @Model.PrimaryAccount.Balance)</span></span>
                                            @{
                                                if (Model.BankAccounts.Count() == 0)
                                                {
                                                    <button id="link-button" class="btn btn-sm btn-icon btn-primary float-right">Add Your Bank Account</button>
                                                }
                                            }
                                        </h4>
                                        <partial name="ListOfBankAccounts" model="Model" />
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="creditcards">
                                <div class="card">
                                    <div class="card-header border-0-bottom">
                                        <div class="font-medium-3 bottom-border">
                                            <!-- Credit card tab name -->
                                            <p>Your Credit Cards</p>
                                        </div>
                                    </div>
                                    <div class="card-body pt-0">
                                        <!-- Credit card content goes here -->
                                        <h4 class="card-title">
                                            <button class="btn btn-sm btn-primary js-add-credit-card float-right" id="add-card">
                                                Add A Credit Card
                                            </button>
                                            <br />
                                        </h4>
                                        <partial name="ListOfCards" model="Model" />
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="subscriptions">
                                <div class="card">
                                    <div class="card-header border-0-bottom">
                                        <div class="font-medium-3 bottom-border">
                                            <!-- Subscriptions tab name -->
                                            <p>Your Subscriptions</p>
                                        </div>
                                    </div>
                                    <div class="card-body pt-0">
                                        <partial name="ListOfSubscriptions" model="Model" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
                        <script>
                            {
                                if (@Model.BankAccounts.Count() == 0) {
                                    window.onload = function() {
                                        // Trigger the standard Institution Select view
                                        document.getElementById('link-button').onclick = function() {
                                            linkHandler.open();
                                        };
                                    };
                                }
                            }


                            var linkHandler = Plaid.create({
                                selectAccount: true,
                                env: @{
                                    if (Model.StripeServiceInfo.ProductionMode == false) {
                                            @:"sandbox"
                                        }
                                    else
                                    {
                                            @:"production"
                                        }
                                        },
                                clientName: 'EFORT Client',
                                key: '@Model.StripeServiceInfo.PlaidPublicKey',
                                product: ['auth'],
                                onLoad: function() {
                                    // The Link module finished loading.
                                },
                                onSuccess: function (public_token, metadata)
                                {
                                    $.ajax(
                                    {
                                        'url': "@Url.Action("SavePlaidTokenAPI", "Accounts")",
                                        'method': "POST",
                                        'data': { public_token: public_token, plaid_account_id: metadata.account_id }
                                    }).done(function (data)
                                    {
                                        data = JSON.parse(data);
                                        if (typeof (data.status) !== 'undefined' && data.status == 'OK')
                                        {
                                            alert(data.message);
                                            window.location.reload();
                                        }
                                        else
                                        {
                                            alert(data.message);
                                        }
                                    }).fail(function (data)
                                    {
                                            alert('There was an error processing this request. Please contact the system administrator. Error code: 7V01');
                                        });
                                    },
                                onExit: function(err, metadata) {
                                    // The user exited the Link flow.
                                    if (err != null) {
                                        // The user encountered a Plaid API error prior to exiting.
                                    }
                                    // metadata contains information about the institution
                                    // that the user selected and the most recent API request IDs.
                                    // Storing this information can be helpful for support.
                                },
                            });

                                window.addEventListener('load', function ()
                                {

                                    $('.js-edit-nickname').on('click', function ()
                                    {
                                        $('.js-edit-nickname-modal').modal('toggle');
                                        $('.js-edit-nickname-action-url').val( $(this).data('url') );
                                    });

                                    $('.js-edit-nickname-submit').on('click', function ()
                                    {
                                    $.ajax(
                                    {
                                        "url": $('.js-edit-nickname-action-url').val(),
                                        "method": "POST",
                                        "data": { nickname: $('.js-edit-nickname-input').val() }
                                    }).done(function (data) {
                                        data = JSON.parse(data);
                                        if (typeof (data.status) !== 'undefined' && data.status == 'OK') {
                                            alert(data.message);
                                            window.location.reload();
                                        }
                                        else {
                                            alert(data.message);
                                        }
                                    });
                                    });
                                $('.js-delete-account').on('click', function () {
                                    $.ajax(
                                    {
                                        "url": $(this).data('url'),
                                            "method": "DELETE"
                                    }).done(function (data)
                                    {
                                        data = JSON.parse(data);
                                        if (typeof (data.status) !== 'undefined' && data.status == 'OK')
                                        {
                                            alert(data.message);
                                            window.location.reload();
                                        }
                                        else {
                                            alert(data.message);
                                        }
                                    });
                                });



                                //Add balance
                                $('.js-add-balance').on('click', function ()
                                {
                                    $('.js-add-balance-modal').modal('toggle');
                                    $('.js-add-balance-action-url').val( $(this).data('url') );
                                });

                                $('.js-add-balance-submit').on('click', function ()
                                {
                                    $.ajax(
                                    {
                                        "url": $('.js-add-balance-action-url').val(),
                                        "method": "POST",
                                        "data": { balance: $('.js-add-balance-input').val() }
                                    }).done(function (data) {
                                        data = JSON.parse(data);
                                        if (typeof (data.status) !== 'undefined' && data.status == 'OK') {
                                            alert(data.message);
                                            window.location.reload();
                                        }
                                        else {
                                            alert(data.message);
                                        }
                                    });
                                });

                                //Withdraw balance
                                $('.js-withdraw-balance').on('click', function () {
                                    $('.js-withdraw-balance-modal').modal('toggle');
                                    $('.js-withdraw-balance-action-url').val($(this).data('url'));
                                });

                                $('.js-withdraw-balance-submit').on('click', function () {
                                    $.ajax(
                                    {
                                        "url": $('.js-withdraw-balance-action-url').val(),
                                        "method": "POST",
                                        "data": { balance: $('.js-withdraw-balance-input').val() }
                                    }).done(function (data) {
                                        data = JSON.parse(data);
                                        if (typeof (data.status) !== 'undefined' && data.status == 'OK') {
                                            alert(data.message);
                                            window.location.reload();
                                        }
                                        else {
                                            alert(data.message);
                                        }
                                    });
                                    });

                                });
                        </script>
                        <!-- Start Stripe Credit Card Integration -->
                        <script src="https://js.stripe.com/v3/"></script>
                        <script>
                                        var stripe = Stripe('@Model.StripeServiceInfo.StripePublishableKey');
                                        var elements = stripe.elements();

                                        // Custom styling can be passed to options when creating an Element.
                                        /*var style = {
                                          base: {
                                            // Add your base input styles here. For example:
                                            fontSize: '16px',
                                            color: "#32325d",
                                          }
                                        };*/

                                        window.addEventListener('load', function () {
                                            // Create an instance of the card Element.
                                            var card = elements.create('card');

                                            // Add an instance of the card Element into the `card-element` <div>.
                                            card.mount('#card-element');

                                            card.addEventListener('change', function (event) {
                                                var displayError = document.getElementById('card-errors');
                                                if (event.error) {
                                                    displayError.textContent = event.error.message;
                                                } else {
                                                    displayError.textContent = '';
                                                }
                                            });


                                             //Handle modal
                                             $('#add-card').on('click', function () {
                                                 $('.js-add-credit-card-modal').modal('toggle');
                                             });


                                             //CreditCard Nickname
                                             $('.js-edit-card-nickname').on('click', function () {
                                                 $('.js-edit-card-nickname-modal').modal('toggle');
                                                 $('.js-edit-card-nickname-action-url').val($(this).data('url'));
                                             });

                                             $('.js-edit-card-nickname-submit').on('click', function () {
                                                 $.ajax(
                                                     {
                                                         "url": $('.js-edit-card-nickname-action-url').val(),
                                                         "method": "POST",
                                                         "data": { nickname: $('.js-edit-card-nickname-input').val() }
                                                     }).done(function (data) {
                                                         data = JSON.parse(data);
                                                         if (typeof (data.status) !== 'undefined' && data.status == 'OK') {
                                                             alert(data.message);
                                                             window.location.reload();
                                                         }
                                                         else {
                                                             alert(data.message);
                                                         }
                                                     });
                                             });


                                            /**
                                             * This function handles the action of clicking on the Add Card button
                                             */
                                            $('.js-add-credit-card-submit').on('click', function ()
                                            {
                                                stripe.createToken(card).then(function (result)
                                                {
                                                    if (result.error)
                                                    {
                                                        // Inform the customer that there was an error.
                                                        var errorElement = document.getElementById('card-errors');
                                                        errorElement.textContent = result.error.message;
                                                    }
                                                    else
                                                    {
                                                        // Send the token to the server.
                                                        stripeTokenHandler(result.token);
                                                    }
                                                });
                                            });

                                            /**
                                             * Deletes a card
                                             */
                                            $('.js-delete-card').on('click', function ()
                                            {
                                                $.ajax(
                                                {
                                                    "url": $(this).data('url'),
                                                    "method": "POST"
                                                }).done(function (data) {
                                                    data = JSON.parse(data);
                                                    if (typeof (data.status) !== 'undefined' && data.status == 'OK') {
                                                        alert(data.message);
                                                        window.location.reload();
                                                    }
                                                    else {
                                                        alert(data.message);
                                                    }
                                                    });
                                            });

                                            // Make card default payment option
                                            $('.js-make-default-credit-card').on('click', function () {
                                                $('.js-make-default-credit-card-modal').modal('toggle');
                                                $('.js-make-default-credit-card-submit').data('url', $(this).data('url'));
                                            });

                                            $('.js-make-default-credit-card-submit').on('click', function ()
                                            {
                                                $.ajax({
                                                    url: $(this).data('url'),
                                                    method: 'POST'
                                                }).done(function (data)
                                                {
                                                    data = JSON.parse(data);
                                                    if (typeof (data.status) !== 'undefined' && data.status == 'OK') {
                                                        alert(data.message);
                                                        window.location.reload();
                                                    }
                                                    else {
                                                        alert(data.message);
                                                    }
                                                });
                                            });


                                            // Remove card as default payment options
                                            $('.js-remove-default-credit-card').on('click', function () {
                                                $('.js-remove-default-credit-card-modal').modal('toggle');
                                                $('.js-remove-default-credit-card-submit').data('url', $(this).data('url'));
                                            });

                                            $('.js-remove-default-credit-card-submit').on('click', function ()
                                            {
                                                $.ajax({
                                                    url: $(this).data('url'),
                                                    method: 'POST'
                                                }).done(function (data)
                                                {
                                                    data = JSON.parse(data);
                                                    if (typeof (data.status) !== 'undefined' && data.status == 'OK') {
                                                        alert(data.message);
                                                        window.location.reload();
                                                    }
                                                    else {
                                                        alert(data.message);
                                                    }
                                                });
                                            });


                                            /**
                                             * Handle subscribing to Stripe
                                             */
                                            $('.js-subscribe-button').on('click', function () {
                                                $('.js-start-subscription-modal').modal('toggle');
                                                $('.js-start-subscription-submit').data('url', $(this).data('url'));
                                            });

                                            $('.js-start-subscription-submit').on('click', function ()
                                            {
                                                $.ajax({
                                                    url: $(this).data('url'),
                                                    method: 'POST'
                                                }).done(function (data)
                                                {
                                                    data = JSON.parse(data);
                                                    if (typeof (data.status) !== 'undefined' && data.status == 'OK') {
                                                        alert(data.message);
                                                        window.location.reload();
                                                    }
                                                    else {
                                                        alert(data.message);
                                                    }
                                                });
                                            });

                                            $('.js-cancel-subscription').on('click', function () {
                                                $.ajax({
                                                    url: $(this).data('url'),
                                                    method: 'POST'
                                                }).done(function (data) {
                                                    data = JSON.parse(data);
                                                    if (typeof (data.status) !== 'undefined' && data.status == 'OK') {
                                                        alert(data.message);
                                                        window.location.reload();
                                                    }
                                                    else {
                                                        alert(data.message);
                                                    }
                                                });
                                            });
                                        });

                                        /**
                                         * This function saves the Stripe Card token on the DB after doing
                                         * some processing that's necessary on the controller
                                         */
                                        function stripeTokenHandler(token)
                                        {
                                            $.ajax({
                                                url: '@Url.Action("SaveStripeTokenAPI", "Accounts")',
                                                method: 'POST',
                                                data: { 'token_id': token.id }
                                            }).done(function (data)
                                            {
                                                data = JSON.parse(data);
                                                alert(data.message);
                                                window.location.reload();
                                            }).fail(function (data)
                                            {
                                                data = JSON.parse(data);
                                                alert(data.message);
                                            });
                                        }
                        </script>
                        <!-- End Stripe Credit Card Integration -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Add Balance Modal Starts -->
<div class="modal js-add-balance-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Balance</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>How much balance do you want to add?</p>
                <input type="text" class="js-add-balance-input" value="" placeholder="0.00">
                <input type="hidden" class="js-add-balance-action-url" value="">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary js-add-balance-submit">Add Balance</button>
            </div>
        </div>
    </div>
</div>
<!-- Add Balance Modal Ends -->
<!-- Withdraw Balance Modal Starts -->
<div class="modal js-withdraw-balance-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Withdraw Balance</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>How much money would you like to withdraw from your EForT account?</p>
                <input type="text" class="js-withdraw-balance-input" value="" placeholder="0.00">
                <input type="hidden" class="js-withdraw-balance-action-url" value="">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary js-withdraw-balance-submit">Withdraw Balance</button>
            </div>
        </div>
    </div>
</div>
<!-- Withdraw Balance Modal Ends -->
<!-- Edit Nickname Modal Starts -->
<div class="modal js-edit-nickname-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Nickname</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>What would you like to name this bank account?</p>
                <input type="text" class="js-edit-nickname-input" value="" placeholder="Add nickname here">
                <input type="hidden" class="js-edit-nickname-action-url" value="">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary js-edit-nickname-submit">Edit nickname</button>
            </div>
        </div>
    </div>
</div>
<!-- Add Nickname Modal Ends -->
<!--Credit Card nickname modal start-->
<div class="modal js-edit-card-nickname-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Nickname</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>What would you like to name this credit card?</p>
                <input type="text" class="js-edit-card-nickname-input" value="" placeholder="Add nickname here">
                <input type="hidden" class="js-edit-card-nickname-action-url" value="">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary js-edit-card-nickname-submit">Edit nickname</button>
            </div>
        </div>
    </div>
</div>
<!--Credit Card nickname modal end-->
<!-- Add Credit Card Modal Starts -->
<div class="modal js-add-credit-card-modal" id="addCardModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Credit/Debit Card</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <label for="card-element">
                    Enter your credit or debit card:
                </label>
                <div id="card-element">
                    <!-- A Stripe Element will be inserted here. -->
                </div>
                <!-- Used to display form errors. -->
                <div id="card-errors" role="alert"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary js-add-credit-card-submit">Add Card</button>
            </div>
        </div>
    </div>
</div>
<!-- Add Credit Card Ends -->
<!-- Start Subscription Starts -->
<div class="modal js-start-subscription-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Start Subscription</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Amount: $@Model.SubscriptionAmount/month<br>
                Benefits:<br>
                <ul>
                    <li>Automatic trading by top performing algorithms</li>
                    <li>Fully managed account</li>
                    <li>Make money while you sleep</li>
                    <li>Trade in all major currencies</li>
                    <li>Benefit from better interest rates in other currencies</li>
                </ul>
                <p>
                    <small>
                        By clicking the "Confirm Subscription" button you agree to be charged the amount shown above in the frequency described above. Your subscription can be cancelled at any time, but doing so will limit your account's benefits.
                        You will be charged to your default card ending in
                        @{
                            try
                            {
                                <b>@Model.DefaultCard.LastFourDigits.</b>;
                            }
                            catch (NullReferenceException)
                            {
                                <b>####</b>
                            }
                        }
                    </small>
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary js-start-subscription-submit" data-url="">Confirm Subscription</button>
            </div>
        </div>
    </div>
</div>
<!-- Make default credit card modal starts -->
<div class="modal js-make-default-credit-card-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm default credit card</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>By clicking the "make default credit card" button, you are agreeing that any subscription you may subscribe to with EForT will be charged to this credit card.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary js-make-default-credit-card-submit" data-url="">Make default credit card</button>
            </div>
        </div>
    </div>
</div>

<!-- Remove default credit card modal starts -->
<div class="modal js-remove-default-credit-card-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm default credit card</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>
                    By clicking the "remove default credit card" button, you are removing the default status of this credit card. Any subscriptions created
                    with this credit card will still be active, but to create a new subscription, you will need to pick another default card.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary js-remove-default-credit-card-submit" data-url="">Remove default credit card</button>
            </div>
        </div>
    </div>
</div>
<!--Script for loading active tab on refresh-->
<script src="~/js/jquery-3.3.1.js"></script>
@if (ViewBag.Section != null)
{
    <script>
        $(document).ready(() => {
            location.href = '#@ViewBag.Section'
        });
    </script>
}
<script>
    $(document).ready(() => {
        let url = location.href.replace(/\/$/, "");

        if (location.hash) {
            const hash = url.split("#");
            $('#accountTabs a[href="#' + hash[1] + '"]').tab("show");
            url = location.href.replace(/\/#/, "#");
            history.replaceState(null, null, url);
            setTimeout(() => {
                $(window).scrollTop(0);
            }, 400);
        }

        $('a[data-toggle="tab"]').on("click", function () {
            let newUrl;
            const hash = $(this).attr("href");
            if (hash == "#efortaccount") {
                newUrl = url.split("#")[0];
            } else {
                newUrl = url.split("#")[0] + hash;
            }
            newUrl += "/";
            history.replaceState(null, null, newUrl);
        });
    });
</script>