@php
// Page content
use Illuminate\Support\Facades\DB;

$config = DB::table('config')->get();
$supportPage = DB::table('pages')->where('page_name', 'footer')->orWhere('page_name', 'contact')->get();

// Default
$navbar = true;
$footer = true;
$registered = request('status') == 'success' ? true : false;
$status = request('status') == 'success' ? 'active' : '';

if (isset($config[38]) && $config[38]->config_value == "no") { 
    $navbar = false;
    $footer = false;
}
@endphp

@extends('layouts.web', ['nav' => $navbar, 'banner' => false, 'footer' => $footer, 'cookie' => false, 'setting' => true,
'title' => true, 'title' => 'Sign Up','background' => '#ffffff'])
@section('custom-script')

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="{{ asset('css/multi-step.css') }}" rel="stylesheet" />
@endsection
@section('content')
<div class="page page-center preloader-wrapper" id="auth-loader">
    <div class="container container-slim py-4">
        <div>
            <div class="mb-3">
                <img src="/images/web/elements/64c22648b903c.png" class="img-fluid" alt="Bizlite" style="max-width: 50px;">
            </div>
            <div class="h3 mb-3">Loading</div> 
            <div class="progress" style="height: 8px;">
                <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%"></div>
            </div>
        </div>
    </div>
</div>
{{-- Register page --}}
<h2 class="mb-3 font-heading font-bold text-6xl sm:text-7xl text-center">{{ __('Sign Up') }}</h2>
<input type="hidden" value="null" id="user_id"> 
<input type="hidden" value="{{request('token')}}" id="token"> 
<div class="container" style="background:#ffffff !important">
	<div class="row">
		<section>
            <div class="wizard">
                <div class="wizard-inner" style="pointer-events: none;">
                    <div class="connecting-line"></div>
                    <ul class="nav nav-tabs" role="tablist">

                        <li role="presentation" data-index="1" id="tab-1"  class="tabs {{!$registered ? 'active' : ''}}">
                            <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
                                <span class="round-tab {{$registered ? 'registered' : ''}}">
                                    <i class="glyphicon glyphicon-info-sign"></i>
                                </span>
                            </a>
                        </li>

                        <li role="presentation" data-index="2" id="tab-2" class="tabs">
                            <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Choose Card">
                                <span class="round-tab {{$registered ? 'registered' : ''}}">
                                    <i class="glyphicon glyphicon-list-alt"></i>
                                </span>
                            </a>
                        </li>
                        <li role="presentation" data-index="3" id="tab-3" class="disabled tabs">
                            <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Fill Card Details">
                                <span class="round-tab {{$registered ? 'registered' : ''}}">
                                    <i class="glyphicon glyphicon-ok"></i>
                                </span>
                            </a>
                        </li>
                    </ul>
                </div> 
                <div class="tab-content">
                    <!-- Personal Info -->
                    @if(!$registered)
                        <div class="tab-pane tab-panels active" role="tabpanel" id="step1">
                            @include('auth.partials.personal-info')
                        </div>
                        <!-- Card Type -->
                        <div class="tab-pane tab-panels" role="tabpanel" id="step2">
                            @include('auth.partials.card_types')
                        </div>
                        <!-- Card details -->
                        <div class="tab-pane tab-panels" role="tabpanel" id="step3">
                            
                        </div>
                    @endif
                    <div class="clearfix"></div>
                </div>
            </div>
        </section>
    </div>
</div>
@include('sweet::alert')
@if (Session::has('toast_error'))
    <div id="error-container">
        {!! Session::pull('toast_error') !!}
    </div>
    @if(config('sweetalert.animation.enable'))
        <link rel="stylesheet" href="{{ config('sweetalert.animatecss') }}">
    @endif
    @if (config('sweetalert.alwaysLoadJS') === false && config('sweetalert.neverLoadJS') === false)
        <script src="{{ $cdn ?? asset('vendor/sweetalert/sweetalert.all.js')  }}"></script>
    @endif
    <script>
        Swal.fire($("#error-container").html());
    </script>
@endif
<!-- upgrade5326 -->
{{-- Custom JS --}}
@section('custom-js')
<script type="text/javascript" src="{{ asset('js/multi-step.js') }}"></script>
<script>
    function showPassword() {
        "use strict";
        var password = document.getElementById("password");
        var confirmPassword = document.getElementById("password_confirmation");
        if (password.type === "password") {
            password.type = "text";
            confirmPassword.type = "text";
        } else {
            password.type = "password";
            confirmPassword.type = "password";
        }
    }
    function load(){
        $("#auth-loader").removeClass("dis-none");
        $("#auth-loader").addClass("dis-block");
    }
    function unload(){
        $("#auth-loader").removeClass("dis-block");
        $("#auth-loader").addClass("dis-none");
    }
    $(document).ready(function() {
        unload();
        $('#register-form').submit(function(event) {
            event.preventDefault(); // Prevent default form submission
            load();
            var formData = $(this).serialize(); // Serialize form data
            $.ajax({
                url: '{{ route("register.user") }}', // URL to submit the form data
                type: 'POST',
                data: formData,
                success: function(response) {
                    unload();
                   if(response.status == 200){
                    $("#user_id").val(response.user_id);
                    $("#tab-2").click();
                   }else{
                    notify('Warning!',response.message,'error');
                   }
                },
                error: function(xhr, status, error) {
                    unload();
                    var response = JSON.parse(xhr.responseText);
                    notify('Warning!', response.error, 'warning');
                }
            });
        });
    });
    
    function notify(title,message,type){
        swal({
            title: title,
            icon: type,
            content: {
                element: 'div',
                    attributes: {
                        innerHTML: message
                    }
            },
            html: true,
            timer: 2000,
            buttons: false,
        });
    }
    $(document).on('click','.tabs',function(){
        $(".tabs").removeClass('active');
        $(this).addClass('active');
        let tab = $(this).find('a').attr('href');
        $(".tab-panels").removeClass('active');
        $(tab).addClass('active');
    });
    $(document).on('click','.register_card_type',function(){
        let card_type = $(this).val();
        load();
        $.ajax({
                url: '{{ route("get.card") }}', // URL to submit the form data
                type: 'POST',
                data: {
                    user_id : $("#user_id").val(),
                    card_type : card_type,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                  $("#step3").html(response);
                  $("#tab-3").click();
                  setTimeout(() => {
                    unload();
                  }, 2000);
                },
                error: function(xhr, status, error) {
                    unload();
                    var response = JSON.parse(xhr.responseText);
                    notify('Warning!', response.error, 'warning');
                }
            });
    });
    function checkLink(){
    "use strict";
    var plink = $('#plink').val();
    
    if(plink.length > 2){
        $.ajax({
        url: "{{ route('check.link') }}",
        method: 'POST',
        data:{_token: "{{ csrf_token() }}", link: plink},
        }).done(function(res) {
            if(res.status == 'success') {
                $('#status').html("<span class='badge mt-2 bg-green'>{{ __('Available') }}</span>");
            }else{
                $('#status').html("<span class='badge mt-2 bg-red'>{{ __('Not available') }}</span>");
            }
        });
    }else{
        $('#status').html("");
    }
}


function chooseTheme(selectedTheme, thumbnail) {
    $("input[name='theme_id']").val(selectedTheme.value);
    $("img.theme-image").attr("src", thumbnail);

    $("#themeModal").css('display','none');
}
$(document).on('click','.btn-close',function(){
    $("#themeModal").css('display','none');
});
/* Encode string to link */
function convertToLink( str ) {
    "use strict";
    //replace all special characters | symbols with a space
    str = str.replace(/[`~!@#$%^&*()_\-+=\[\]{};:'"\\|\/,.<>?\s]/g, ' ')
             .toLowerCase();
      
    // trim spaces at start and end of string
    str = str.replace(/^\s+|\s+$/gm,'');
      
    // replace space with dash/hyphen
    str = str.replace(/\s+/g, '-');   
    document.getElementById("plink").value = str;
    //return str;
  }
  $(document).on('click','.btn-choose-theme',function(){
    $("#themeModal").css('display','block');
    $("#themeModal").removeClass('fade');
    $("input.theme_id").each(function(){
        $(this).prop('checked',false);
    });
    let checked = $("input[name='theme_id']").val();
    $("input.theme_id").each(function() {
        if ($(this).val() === checked) {
            $(this).prop('checked', true);
        }
    });
  });
  $(document).on('click','.btn-click',function(){
    $(".theme_id").prop('checked', false);
    $("#themeModal").css('display','none');
    $("#themeModal").addClass('fade');
  });
  $('html, body').animate({ scrollTop: 0 }, 10);
</script>
@if($registered)
    <script>
        $(document).ready(function(){
            $.ajax({
                url: '{{ route("logMeIn") }}', // URL to submit the form data
                type: 'POST',
                data: {
                    user_id : $("#token").val(),
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                },
                error: function(xhr, status, error) {
                }
            });
        });
    </script>
@endif
@endsection
@endsection