@extends('layouts.app')
@section('content')
    <!-- Small boxes (Stat box) -->
    <div class="row">
        <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-info">
                <div class="inner">
                    <h3>{{$total}}</h3>

                    <p>Total Posts</p>
                </div>
                <div class="icon">
                    <i class="ion ion-bag"></i>
                </div>
                <a href="{{route('postIndex')}}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-success">
                <div class="inner">
                    <h3>$ {{$user->balance}}</h3>

                    <p>Account Balance</p>
                </div>
                <div class="icon">
                    <i class="ion ion-stats-bars"></i>
                </div>
                <a href="{{route('depositCreate')}}" class="small-box-footer">Deposit Now <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-warning">
                <div class="inner">
                    <h3>$ 0.00</h3>

                    <p>Affiliate Earn (Coming Soon)</p>
                </div>
                <div class="icon">
                    <i class="ion ion-person-add"></i>
                </div>
                <a href="javascript:void(0)" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-danger">
                <div class="inner">
                    <h3>{{$visitor}}</h3>

                    <p>Total Posts Visitors</p>
                </div>
                <div class="icon">
                    <i class="ion ion-pie-graph"></i>
                </div>
                <a href="javascript:void(0)" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <!-- ./col -->
    </div>
    <!-- /.row -->
    <!-- Main row -->
    <div class="row">
        <!-- Left col -->
        <section class="col-lg-7">
            <!-- Map card -->
            <div class="card">
                <div class="card-header border-transparent">
                    <h3 class="card-title">Latest Ads Post</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body p-0">
                    @if($posts->count() >0)
                        <div class="table-responsive">
                            <table class="table m-0">
                            <thead>
                            <tr>
                                <th class="text-center">ID</th>
                                <th class="text-center">Title</th>
                                <th class="text-center">Status</th>
                                <th class="text-center">Popularity</th>
                            </tr>
                            </thead>
                            <tbody>
                            @php $id=0;@endphp
                            @foreach($posts as $post)
                                @php $id++;@endphp
                            <tr>
                                <td class="text-center"><a href="{{route('viewPost',$post->slug)}}">{{$id}}</a></td>
                                <td>{{str_limit($post->title,30)}}</td>
                                <td>
                                    @if($post->status == 1)
                                        <span class="badge badge-success text-center">Published</span>
                                    @else
                                        <span class="badge badge-danger text-center">Un-Published</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="sparkbar text-center" data-color="#00a65a" data-height="20">{{$post->counter}}</div>
                                </td>
                            </tr>
                            @endforeach
                            </tbody>
                        </table>
                        </div>
                        <!-- /.table-responsive -->
                    @else
                        <br><br><br><br>
                        <h5 class="text-center card-title">You didn't Created Ads Post Yet</h5>
                        <br><br><br><br>
                    @endif
                </div>
                <!-- /.card-body -->
                <div class="card-footer clearfix">
                    <a href="{{route('postCreate')}}" class="btn btn-sm btn-info float-left">Create New Ads</a>
                    <a href="{{route('postIndex')}}" class="btn btn-sm btn-secondary float-right">View All Ads</a>
                </div>
                <!-- /.card-footer -->
            </div>
            <!-- /.card -->
        </section>

        <!-- /.Left col -->
        <!-- right col (We are only adding the ID to make the widgets sortable)-->
        <section class="col-lg-5">
            <!-- Calendar -->
            <div class="card bg-success-gradient">
                <div class="card-header no-border">
                    <h3 class="card-title">
                        <i class="fa fa-calendar"></i>
                        Calendar
                    </h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body p-0">
                    <!--The calendar -->
                    <div id="calendar" style="width: 100%"></div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </section>
        <!-- right col -->
    </div>
    <!-- /.row (main row) -->

@endsection