@extends('front.layouts.login_layout')
@section('meta_title'){{ $index_meta->{'title_' . App::getLocale()} }}@stop
@section('meta_description'){{ $index_meta->{'description_' . App::getLocale()} }}@stop
@section('meta_keywords')
    {{ $index_meta->{'kewords_' . App::getLocale()} }}
@stop
@section('meta')
    <!-- Schema.org markup for Google+ -->
    <meta itemprop="name" content="{{ $index_meta->{'title_' . App::getLocale()} }}">
    <meta itemprop="description" content="{{ $index_meta->{'description_' . App::getLocale()} }}">
    <!-- Twitter Card data -->
    <meta name="twitter:card" content="site">
    <meta name="twitter:site" content="@publisher_handle">
    <meta name="twitter:title" content="{{ $index_meta->{'title_' . App::getLocale()} }}">
    <meta name="twitter:description" content="{{ $index_meta->{'description_' . App::getLocale()} }}">
    <!-- Twitter Card data -->
    <meta name="twitter:creator" content="@author_handle">
    <meta name="twitter:image" content="{{ url($index_meta->{'image_' . App::getLocale()}) }}">
    <!-- Open Graph data -->
    <meta property="og:title" content="{{ $index_meta->{'title_' . App::getLocale()} }}" />
    <meta property="og:description" content="{{ $index_meta->{'description_' . App::getLocale()} }}" />
    <!-- Schema.org markup for Google+ -->
    <meta itemprop="image" content="{{ url($index_meta->{'image_' . App::getLocale()}) }}">
    <!-- Open Graph data -->
    <meta property="og:type" content="og:site">
    <meta property="og:url" content="{{ route('home') }}">
    <meta property="og:image" content="{{ url($index_meta->{'image_' . App::getLocale()}) }}">
    <!-- Schema.org markup for Google+ -->
    <meta itemprop="name" content="{{ $index_meta->{'title_' . App::getLocale()} }}">
    <meta itemprop="description" content="{{ $index_meta->{'description_' . App::getLocale()} }}">
@endsection
@section('content')
    <section class="container-fluid auth-2-page-container">
        <div class="row">
            <div class="signup-container col-lg-4 col-md-6 col-sm-12" id="signupForm">
                <div class="row logo-row">
                    <a href="{{ route('home') }}">
                        <img class="logo img-rounded" src="{{ url('front_layout/assets/imgs/logo.png') }}"
                            alt="60s Website Logo">
                    </a>
                </div>
                <div class="row shape-row">
                    <div id="progress"></div>
                    <span class="time" id="timer">00:00:00</span>
                </div>

                <div class="form-container">
                    <form class="signup-form" id="register-tenant">
                        <div class="form-head">
                            <h2 class="signup-text mt-3 mb-3"> {{ translate('Signup') }}</h2>
                        </div>
                        <div class="login-part mt-3 mb-3">
                            <span class="no-account fs-6"> {{ translate('Already have an account ?') }}</span>
                            <a href="{{ route('loginShop') }}" class="login-up-link fs-6 fw-normal" id="openLogin">
                                {{ translate('Login Now') }}</a>
                        </div>
                        <div class="form-group mb-3">
                            <label for="shopName" class="visually-hidden"> {{ translate('Shop Name') }}</label>
                            <input type="text" class="form-control" id="shopName" placeholder="Shop Name">
                            <div class="icon">
                                <img src="{{ url('front_layout/assets/imgs/shop-icon.png') }}" alt="">
                            </div>
                        </div>
                        <div class="form-group  mb-3">
                            <label for="phoneNumber" class="visually-hidden"> {{ translate('Phone Number') }}</label>
                            <input type="number" class="form-control" id="phoneNumber" placeholder="Phone Number">
                            <div class="icon">
                                <img src="{{ url('front_layout/assets/imgs/phone-icon.png') }}" alt="">
                            </div>
                        </div>
                        <div class="form-group  mb-3">
                            <label for="Email" class="visually-hidden"> {{ translate('Email') }}</label>
                            <input type="email" class="form-control" id="Email" placeholder="Email">
                            <div class="icon">
                                <img src="{{ url('front_layout/assets/imgs/phone-icon.png') }}" alt="">
                            </div>
                        </div>
                        <div class="input-group mb-3 domain-wrapper">
                            <span class="input-group-text" id="basic-addon3">https://</span>
                            <input type="text" class="form-control" placeholder="Your Domain Name" id="basic-url"
                                aria-describedby="basic-addon3">
                            <span class="text">.60Scs.com </span>
                        </div>
                        <p id="dublicate-error" style="display: none; text-align:center; color:red; width:100%"></p>
                        <div class="form-group  mb-3">
                            <label for="signupPassword" class="visually-hidden"> {{ translate('Password') }}</label>
                            <input type="password" class="form-control" id="signupPassword" placeholder="Password">
                            <div class="icon">
                                <img src="{{ url('front_layout/assets/imgs/password-icon.png') }}" alt="">
                            </div>
                        </div>
                        <div class="form-bottom mb-3">
                            <span> {{ translate('By creating new account you agree to') }}</span>
                            <a href="{{ route('Page.show_page', 'terms-and-conditions') }}" class="link">
                                {{ translate('Terms and Conditions') }}</a>
                            <span>also</span>
                            <a href="{{ route('Page.show_page', '60-sec-policy') }}" class="link">
                                {{ translate('Privacy Policy') }}</a>
                            <span>to</span>
                            <a href="{{ route('home') }}" class="link"> {{ translate('60Scs') }}</a>
                        </div>
                        <p id="global-error" style="display: none; text-align:center; color:red; width:100%"></p>

                        <div class="sign-up-large-btn-wrapper">
                            <button class="btn-primary btn mt-3 mb-3 text-white"
                                id="signup-btn">{{ translate('Signup') }}</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="image-container col-lg-8 col-md-6 col-sm-12">
                <img class="logo" src="{{ url('front_layout/assets/imgs/logo-light-large.png') }}" alt="">
            </div>
        </div>
    </section>
@endsection
@section('modal')
    <div class="modal" id="loading-modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row signup-loading-wrapper mt-2">
                        <div id="loading-progress"></div>
                        <lottie-player src="{{ url('front_layout/assets/imgs/loading.json') }}" background="transparent"
                            speed="1" style="width: 500px; height: 500px;" loop autoplay></lottie-player>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script type="text/javascript">
        $(document).ready(function() {
            if (document.getElementById('loading-modal')) {
                $("#loading-modal").on("hidden.bs.modal", function() {
                    console.log(loadingProgress)
                    loadingProgress.destroy();
                });
            }
            $('#signup-btn').click(function() {
                var loadingModal = new bootstrap.Modal(document.getElementById('loading-modal'), {
                    keyboard: false,
                    backdrop: 'static'
                });
                loadingModal.show();
                const name = $('#shopName').val();
                const phone = $('#phoneNumber').val();
                const url = $('#basic-url').val();
                const password = $('#signupPassword').val();
                const email = $('#Email').val();
                $.ajax({
                    type: "POST",
                    url: '{{ route('registerShop') }}',
                    data: {
                        _token: '{{ csrf_token() }}',
                        fields: {
                            name: name,
                            phone: phone,
                            url: url,
                            password: password,
                            email: email,
                        }
                    },
                    success: function(data) {
                        data = $.parseJSON(data);
                        loadingModal.hide();
                        $('.modal-backdrop').remove();
                        if (data.success == true) {
                            var url = 'http://' + data.tenant.domain + '/public/?email=' +
                                encodeURIComponent(
                                    email) + '&password=' + encodeURIComponent(password);
                            window.location.href = url;
                            // alert('Thanks ' + data.tenant.name);
                        } else {
                            if (data.message_type == 'dublicate') {
                                //show dublicate message
                                $("#dublicate-error").css("display", "inline-block");
                                $("#dublicate-error").text(data.message);
                            } else {
                                //show general message
                                $("#global-error").css("display", "inline-block");
                                $("#global-error").text(data.message);
                            }
                            // alert(data.message);
                        }
                    }
                });

            })
        });
    </script>
@endsection