

<style>
    .intl-tel-input .country-list{
        left: 0px;
        right: auto;
    }
    .intl-tel-input .selected-flag .iti-flag{
        left: 6px;
        right: auto;
    }
    .intl-tel-input.allow-dropdown input{
        text-align: left;
        direction: ltr;
    }
</style>



<main class="main">
    <div class="page-header text-center" style="background-image: url('/public/front/assets/images/page-header-bg.jpg')">
        <div class="container">
            <h1 class="page-title"><?= $this->Get_Lang->gl("my_account", $langId) ?><span><?= $this->Get_Lang->gl("shop", $langId) ?></span></h1>
        </div><!-- End .container -->
    </div><!-- End .page-header -->
    <nav aria-label="breadcrumb" class="breadcrumb-nav mb-3">
        <div class="container">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/"><?= $this->Get_Lang->gl("home_page", $langId) ?></a></li>
                <li class="breadcrumb-item"><a href="#"><?= $this->Get_Lang->gl("shop", $langId) ?></a></li>
                <li class="breadcrumb-item active" aria-current="page"><?= $this->Get_Lang->gl("my_account", $langId) ?></li>
            </ol>
        </div><!-- End .container -->
    </nav><!-- End .breadcrumb-nav -->

    <div class="page-content">
        <div class="dashboard">
            <div class="container">
                <div class="row">
                    <aside class="col-md-4 col-lg-3">
                        <ul class="nav nav-dashboard flex-column mb-3 mb-md-0" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="tab-dashboard-link" data-toggle="tab" href="#tab-dashboard" role="tab" aria-controls="tab-dashboard" aria-selected="true"><?= $this->Get_Lang->gl("Dashboard", $langId) ?></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="tab-orders-link" data-toggle="tab" href="#tab-orders" role="tab" aria-controls="tab-orders" aria-selected="false"><?= $this->Get_Lang->gl("orders", $langId) ?></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="tab-downloads-link" data-toggle="tab" href="#tab-downloads" role="tab" aria-controls="tab-downloads" aria-selected="false"><?= $this->Get_Lang->gl("Downloads", $langId) ?></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="tab-address-link" data-toggle="tab" href="#tab-address" role="tab" aria-controls="tab-address" aria-selected="false"><?= $this->Get_Lang->gl("Adresses", $langId) ?></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="tab-account-link" data-toggle="tab" href="#tab-account" role="tab" aria-controls="tab-account" aria-selected="false"><?= $this->Get_Lang->gl("Account_Details", $langId) ?></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#"><?= $this->Get_Lang->gl("logout", $langId) ?></a>
                            </li>
                        </ul>
                    </aside><!-- End .col-lg-3 -->

                    <div class="col-md-8 col-lg-9">
                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="tab-dashboard" role="tabpanel" aria-labelledby="tab-dashboard-link">
                                <p><?= $this->Get_Lang->gl("Hello", $langId) ?> <span class="font-weight-normal text-dark"><?= $this->Get_Lang->gl("User", $langId) ?></span> (<?= $this->Get_Lang->gl("not", $langId) ?> <span class="font-weight-normal text-dark"><?= $this->Get_Lang->gl("User", $langId) ?></span>? <a href="#"><?= $this->Get_Lang->gl("logout", $langId) ?></a>) 
                                    <br>
                                    From your account dashboard you can view your <a href="#tab-orders" class="tab-trigger-link link-underline">recent orders</a>, manage your <a href="#tab-address" class="tab-trigger-link">shipping and billing addresses</a>, and <a href="#tab-account" class="tab-trigger-link">edit your password and account details</a>.</p>
                            </div><!-- .End .tab-pane -->

                            <div class="tab-pane fade" id="tab-orders" role="tabpanel" aria-labelledby="tab-orders-link">
                                <p>No order has been made yet.</p>
                                <a href="category.html" class="btn btn-outline-primary-2"><span>GO SHOP</span><i class="icon-long-arrow-right"></i></a>
                            </div><!-- .End .tab-pane -->

                            <div class="tab-pane fade" id="tab-downloads" role="tabpanel" aria-labelledby="tab-downloads-link">
                                <p>No downloads available yet.</p>
                                <a href="category.html" class="btn btn-outline-primary-2"><span>GO SHOP</span><i class="icon-long-arrow-right"></i></a>
                            </div><!-- .End .tab-pane -->

                            <div class="tab-pane fade" id="tab-address" role="tabpanel" aria-labelledby="tab-address-link">
                                <p>The following addresses will be used on the checkout page by default.</p>

                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="card card-dashboard">
                                            <div class="card-body">
                                                <h3 class="card-title">Billing Address</h3><!-- End .card-title -->

                                                <p>User Name<br>
                                                    User Company<br>
                                                    John str<br>
                                                    New York, NY 10001<br>
                                                    1-234-987-6543<br>
                                                    yourmail@mail.com<br>
                                                    <a href="#">Edit <i class="icon-edit"></i></a></p>
                                            </div><!-- End .card-body -->
                                        </div><!-- End .card-dashboard -->
                                    </div><!-- End .col-lg-6 -->

                                    <div class="col-lg-6">
                                        <div class="card card-dashboard">
                                            <div class="card-body">
                                                <h3 class="card-title">Shipping Address</h3><!-- End .card-title -->

                                                <p>You have not set up this type of address yet.<br>
                                                    <a href="#">Edit <i class="icon-edit"></i></a></p>
                                            </div><!-- End .card-body -->
                                        </div><!-- End .card-dashboard -->
                                    </div><!-- End .col-lg-6 -->
                                </div><!-- End .row -->
                            </div><!-- .End .tab-pane -->

                            <div class="tab-pane fade" id="tab-account" role="tabpanel" aria-labelledby="tab-account-link">
                                <form id="ajax-register" class="default-form contact-form"  method="post" action="/site/ajax/register" accept-charset="UTF-8">
                                    <div class="modal-body">

                                        <input id="countryId3" name="countryId" type="hidden" value="qa"/>

                                        <div class="col-md-12 col-xs-12 pull-left">
                                            <div class="sendingSuccess alert alert-success alert-dismissible" role="alert" style="display: none;">
                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                                                <?= $this->Get_Lang->gl("alertSuccessfully", $langId) ?>
                                            </div>
                                            <div class="sendingError alert alert-danger alert-dismissible" role="alert" style="display: none;">
                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                                                <?= $this->Get_Lang->gl("alertError", $langId) ?>
                                            </div> 
                                        </div>

                                        <div class="col-md-12 col-sm-12 ">
                                            <div class="form-group">
                                                <label for="registerName"><?= $this->Get_Lang->gl("name", $langId) ?>*</label>
                                                <input type="text" class="form-control" id="registerName3" name="registerName3" required />
                                            </div>

                                            <div class="form-group">
                                                <label for="registerLastName"><?= $this->Get_Lang->gl("last_name", $langId) ?>*</label>
                                                <input type="text" class="form-control" id="registerLastName3" name="registerLastName3" required />
                                            </div>


                                            <div class="form-group">
                                                <label for="registerEmailAddress"><?= $this->Get_Lang->gl("email_address", $langId) ?>*</label>
                                                <input type="email" class="form-control" id="registerEmailAddress3" name="registerEmailAddress3" required />
                                            </div>


                                            <div class="form-group">
                                                <label for="registerPhoneNumber"><?= $this->Get_Lang->gl("phoneNumber", $langId) ?></label>
                                                <input class="form-control" name="registerPhoneNumber3" id="registerPhoneNumber3" type="tel" placeholder="" value="+974" required/>
    <!--                                            <input class="form-control" name="registerCountry" id="registerCountry" type="hidden" />-->

                                            </div>


                                            <!--                                        <div class="form-group">
                                                                                        <label for="registerCountry"><?= $this->Get_Lang->gl("country", $langId) ?>*</label>
                                                                                        <input class="form-control" name="registerCountry" id="registerCountry" type="text" placeholder="" required/>
                                                                                    </div>-->


                                            <div class="form-group">
                                                <label for="registerPassword"><?= $this->Get_Lang->gl("password", $langId) ?>*</label>
                                                <input type="password" class="form-control" id="registerPassword3" name="registerPassword3" required />
                                            </div> 

                                            <div class="form-group">
                                                <label for="registerPasswordConfirm"><?= $this->Get_Lang->gl("confirm_password", $langId) ?>*</label>
                                                <input type="password" class="form-control" id="registerPasswordConfirm3" name="registerPasswordConfirm3" required />
                                            </div> 
                                        </div> 


                                    </div>
                                    <div class="modal-footer">
                                        <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
                                        <button type="submit" class="btn btn-primary btn-sumbit"><?= $this->Get_Lang->gl("register", $langId) ?></button>
                                    </div>

                                </form><!--./ register-form -->
                            </div><!-- .End .tab-pane -->
                        </div>
                    </div><!-- End .col-lg-9 -->
                </div><!-- End .row -->
            </div><!-- End .container -->
        </div><!-- End .dashboard -->
    </div><!-- End .page-content -->
</main><!-- End .main -->








<script>

    $("#registerPhoneNumber3").intlTelInput({
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/8.4.6/js/utils.js",
        preferredCountries: ['qa']
    });


    $('body').on('click', '.intl-tel-input .country-list .country', function () {
        var countryId = $(this).attr('data-country-code');
        var dial_code = $(this).attr('data-dial-code');
        //document.getElementById("registerPhoneNumber3").placeholder = "+" + dial_code;
        document.getElementById("registerPhoneNumber3").value = "+" + dial_code;
        //$("#registerCountry").val(dial_code);
        $('input#countryId3').val(countryId);
//        alert(dial_code);
    });






    $("#ajax-register").each(function () {
        $(this).validate({
            highlight: function (element) {
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },
            unhighlight: function (element) {
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
            },
            ignore: [],
            rules: {
                registerName3: {
                    required: true
                },
                registerLastName3: {
                    required: true
                },
                registerEmailAddress3: {
                    required: true,
                    email: true
                },
                registerPhoneNumber3: {
                    required: true,
                    minlength: 10
//                    digits: true,
//                    number: true
                },
                registerPassword3: {
                    required: true,
                    minlength: 5
                },
                registerPasswordConfirm3: {
                    required: true,
                    minlength: 5,
                    equalTo: "#registerPassword3"
                }
            },
            errorPlacement: function (error, element) {
                error.insertAfter(element);
            }
        });
    });

    $("#ajax-register").ajaxForm({
        beforeSubmit: function (arr, $form, options) {
            $activeForm = $form;
            if (!$form.valid())
                return false;
        },
        complete: function (xhr) {
            var response = xhr.responseText;
            if (response == 1) {

                $('#name').val('');
                $('#emailAddress').val('');
                $('#phoneNumber').val('');
                $("#ajax-register .btn-sumbit").prop('disabled', true);
                setTimeout(function () {
                    $("#ajax-register .btn-sumbit").prop('disabled', false);
                }, 3000);

                $("#ajax-register .sendingSuccess").show();
                setTimeout(function () {
                    $("#ajax-register .sendingSuccess").hide();
                }, 2000);
                location.reload();
            } else {
                $("#ajax-register .sendingError").empty();
                $("#ajax-register .sendingError").text(response);
                $("#ajax-register .sendingError").show();
                setTimeout(function () {
                    $("#ajax-register .sendingError").hide();
                }, 2000);
            }
        }
    });




</script>