@extends('layouts.base_view')

@section('content')

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="callout callout-success">
            <h4>
                <p id="textWelcome"></p>
            </h4>
        </div>
        <div class="row"> 
            <!-- <div class="col-md-12">
                <div class="row">
                    <div class="col-lg-3 col-6"> 
                        <div class="small-box bg-info">
                            <div class="inner">
                                <h3>150</h3>

                                <p>New Orders</p>
                            </div>
                            <div class="icon">
                                <i class="fas fa-shopping-cart"></i>
                            </div>
                            <a href="#" class="small-box-footer">
                                More info <i class="fas fa-arrow-circle-right"></i>
                            </a>
                        </div>
                    </div> 
                    <div class="col-lg-3 col-6"> 
                        <div class="small-box bg-success">
                            <div class="inner">
                                <h3>53<sup style="font-size: 20px">%</sup></h3>

                                <p>Bounce Rate</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-stats-bars"></i>
                            </div>
                            <a href="#" class="small-box-footer">
                                More info <i class="fas fa-arrow-circle-right"></i>
                            </a>
                        </div>
                    </div> 
                    <div class="col-lg-3 col-6"> 
                        <div class="small-box bg-warning">
                            <div class="inner">
                                <h3>44</h3>

                                <p>User Registrations</p>
                            </div>
                            <div class="icon">
                                <i class="fas fa-user-plus"></i>
                            </div>
                            <a href="#" class="small-box-footer">
                                More info <i class="fas fa-arrow-circle-right"></i>
                            </a>
                        </div>
                    </div> 
                    <div class="col-lg-3 col-6"> 
                        <div class="small-box bg-danger">
                            <div class="inner">
                                <h3>65</h3>

                                <p>Unique Visitors</p>
                            </div>
                            <div class="icon">
                                <i class="fas fa-chart-pie"></i>
                            </div>
                            <a href="#" class="small-box-footer">
                                More info <i class="fas fa-arrow-circle-right"></i>
                            </a>
                        </div>
                    </div> 
                </div>
            </div>  -->
        </div>
        <!-- /.row -->
    </div><!-- /.container-fluid -->
</section>
<!-- /.content -->

<script>
    var i = 0;
    var txt = 'Welcome {{$logged_name}}                    ';
    var speed = 150;
    typeWriter();

    function typeWriter() {
        if (i < txt.length) {
            document.getElementById("textWelcome").innerHTML += txt.charAt(i);
            i++;
            setTimeout(typeWriter, speed);
        } else {
            i = 0;
            document.getElementById("textWelcome").innerHTML = '';
            document.getElementById("textWelcome").innerHTML += txt.charAt(i);
            i++;
            setTimeout(typeWriter, speed);
        }
    }
</script>

@endsection