


<main class="main">
    <nav aria-label="breadcrumb" class="breadcrumb-nav border-0 mb-0">
        <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 active" aria-current="page"><?= $this->Get_Lang->gl("login", $langId) ?></li>
            </ol>
        </div><!-- End .container -->
    </nav><!-- End .breadcrumb-nav -->

    <div class="login-page bg-image pt-8 pb-8 pt-md-12 pb-md-12 pt-lg-17 pb-lg-17" style="background-image: url('/public/front/assets/images/backgrounds/login-bg.jpg')">
        <div class="container">
            <div class="form-box">
                <div class="form-tab">
                    <ul class="nav nav-pills nav-fill" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="signin-tab" data-toggle="tab" href="#signin" role="tab" aria-controls="signin" aria-selected="true"><?= $this->Get_Lang->gl("sign_in", $langId) ?></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="register-tab" data-toggle="tab" href="#register" role="tab" aria-controls="register" aria-selected="false"><?= $this->Get_Lang->gl("Register", $langId) ?></a>
                        </li>
                    </ul>
                    <div class="tab-content" id="tab-content-5">
                        <div class="tab-pane fade show active" id="signin" role="tabpanel" aria-labelledby="signin-tab">
                            <form id="ajax-login" method="post" action="/site/ajax/login" accept-charset="UTF-8">

                                <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="form-group">
                                    <label for="email_login"><?= $this->Get_Lang->gl("username_or_email_address", $langId) ?></label>
                                    <input type="text" class="form-control" id="email_login" name="email_login" required>
                                </div><!-- End .form-group -->

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

                                <div class="form-footer">
                                    <button type="submit" class="btn btn-outline-primary-2 btn-sumbit">
                                        <span><?= $this->Get_Lang->gl("login", $langId) ?></span>
                                        <?php if ($langId == 1) { ?>
                                            <i class="icon-long-arrow-left"></i>
                                        <?php } else { ?>
                                            <i class="icon-long-arrow-right"></i>
                                        <?php } ?>
                                    </button>

                                    <!--                                    <div class="custom-control custom-checkbox">
                                                                            <input type="checkbox" class="custom-control-input" id="signin-remember">
                                                                            <label class="custom-control-label" for="signin-remember"><?= $this->Get_Lang->gl("remember_me", $langId) ?></label>
                                                                        </div>-->

                                    <a href="javascript:;" class="forgot-link"><?= $this->Get_Lang->gl("forgot_your_password", $langId) ?></a>
                                </div><!-- End .form-footer -->
                            </form>
                            <!--                            <div class="form-choice">
                                                            <p class="text-center"><?= $this->Get_Lang->gl("or_sign_in_with", $langId) ?></p>
                                                            <div class="row">
                                                                <div class="col-sm-6">
                                                                    <a href="#" class="btn btn-login btn-g">
                                                                        <i class="icon-google"></i>
                            <?= $this->Get_Lang->gl("login_with_google", $langId) ?>
                                                                    </a>
                                                                </div> End .col-6 
                                                                <div class="col-sm-6">
                                                                    <a href="#" class="btn btn-login btn-f">
                                                                        <i class="icon-facebook-f"></i>
                            <?= $this->Get_Lang->gl("login_with_facebook", $langId) ?>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>-->
                        </div><!-- .End .tab-pane -->


                        <div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">


                            <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="countryId" 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="registerName" name="registerName" required />
                                        </div>

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


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


                                        <div class="form-group">
                                            <label for="registerPhoneNumber"><?= $this->Get_Lang->gl("phoneNumber", $langId) ?></label>
                                            <input class="form-control" name="registerPhoneNumber" id="registerPhoneNumber" 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="registerPassword" name="registerPassword" required />
                                        </div> 

                                        <div class="form-group">
                                            <label for="registerPasswordConfirm"><?= $this->Get_Lang->gl("confirm_password", $langId) ?>*</label>
                                            <input type="password" class="form-control" id="registerPasswordConfirm" name="registerPasswordConfirm" 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 class="form-choice">
                                                            <p class="text-center"><?= $this->Get_Lang->gl("or_sign_in_with", $langId) ?></p>
                                                            <div class="row">
                                                                <div class="col-sm-6">
                                                                    <a href="#" class="btn btn-login btn-g">
                                                                        <i class="icon-google"></i>
                            <?= $this->Get_Lang->gl("login_with_google", $langId) ?>
                                                                    </a>
                                                                </div> End .col-6 
                                                                <div class="col-sm-6">
                                                                    <a href="#" class="btn btn-login  btn-f">
                                                                        <i class="icon-facebook-f"></i>
                            <?= $this->Get_Lang->gl("login_with_facebook", $langId) ?>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>-->
                        </div><!-- .End .tab-pane -->
                    </div><!-- End .tab-content -->
                </div><!-- End .form-tab -->
            </div><!-- End .form-box -->
        </div><!-- End .container -->
    </div><!-- End .login-page section-bg -->
</main><!-- End .main -->




<script>
    $(".menu li").removeClass("active");
    $(".menu li.login_link").addClass("active");



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


//    $("#registerCountry").countrySelect({
//        preferredCountries: ['qa']
//    });


//    $(document).ready(function () {
//        $(".intl-tel-input .country-list .country[data-country-code='qa']").addClass('active');
//        $(".intl-tel-input .selected-flag .iti-flag").removeClass('us');
//        $(".intl-tel-input .selected-flag .iti-flag").addClass('qa');
//
//        setTimeout(function () {
//            document.getElementById("registerPhoneNumber").placeholder = "+974";
//        }, 1000);
//
//    });


    $('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("registerPhoneNumber").placeholder = "+" + dial_code;
        document.getElementById("registerPhoneNumber").value = "+" + dial_code;
        //$("#registerCountry").val(dial_code);
        $('input#countryId').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: {
                registerName: {
                    required: true
                },
                registerLastName: {
                    required: true
                },
                registerEmailAddress: {
                    required: true,
                    email: true
                },
                registerPhoneNumber: {
                    required: true,
                    minlength: 10
//                    digits: true,
//                    number: true
                },
                registerPassword: {
                    required: true,
                    minlength: 5
                },
                registerPasswordConfirm: {
                    required: true,
                    minlength: 5,
                    equalTo: "#registerPassword"
                }
            },
            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>