@extends('layouts.admin')

@section('page-title')
    Admin | Dashboard
@endsection

@section('page-content')

<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box">
            <div class="page-title-right">
                <form class="form-inline">
                    <div class="form-group">
                        <!-- <div class="input-group">
                            <input type="text" class="form-control form-control-light" id="dash-daterange">
                            <div class="input-group-append">
                                <span class="input-group-text bg-info border-info text-white">
                                    <i class="mdi mdi-calendar-range font-13"></i>
                                </span>
                            </div>
                        </div> -->
                    </div>
                    
                </form>
            </div>
            <h4 class="page-title">Dashboard</h4>
        </div>
    </div>
</div>
<!-- end page title -->

{{-- Alert --}}
@include('layouts.alert')

<div class="row">
    <div class="col-xl-12 col-lg-6">

        <div class="row">
            <div class="col-lg-6">
                <div class="card widget-flat">
                    <div class="card-body">
                        <div class="float-right">
                            <i class="mdi mdi-account-multiple widget-icon bg-success-lighten text-success"></i>
                        </div>
                        <h5 class="text-muted font-weight-normal mt-0" title="Number of Customers">Mershants</h5>
                    <h3 class="mt-3 mb-3">{{ $merchant }}</h3>
                        {{-- <p class="mb-0 text-muted">
                            <span class="text-success mr-2"><i class="mdi mdi-arrow-up-bold"></i> 5.27%</span>
                            <span class="text-nowrap">Since last month</span>
                        </p> --}}
                    </div> <!-- end card-body-->
                </div> <!-- end card-->
            </div> <!-- end col-->

            <div class="col-lg-6">
                <div class="card widget-flat">
                    <div class="card-body">
                        <div class="float-right">
                            <i class="mdi mdi-cart-plus widget-icon bg-danger-lighten text-danger"></i>
                        </div>
                        <h5 class="text-muted font-weight-normal mt-0" title="Number of Orders">Top Ups</h5>
                    <h3 class="mt-3 mb-3">{{ $topup_count ?? "N/A" }}</h3>
                        {{-- <p class="mb-0 text-muted">
                            <span class="text-danger mr-2"><i class="mdi mdi-arrow-down-bold"></i> 1.08%</span>
                            <span class="text-nowrap">Since last month</span>
                        </p> --}}
                    </div> <!-- end card-body-->
                </div> <!-- end card-->
            </div> <!-- end col-->
        </div> <!-- end row -->


    </div> <!-- end col -->

    <!-- <div class="col-xl-7  col-lg-6">
        <div class="card">
            <div class="card-body">
                <div class="dropdown float-right">
                <h6 id="transaction-data" class="d-none">{{ $transactions }}</h6>
                </div>
                <h4 class="header-title mb-3">Transactions</h4>
                <div id="high-performing-product" class="apex-charts" data-colors="#fa6767,#e3eaef"></div>
            </div> 
        </div>
    </div> -->
</div>
<!-- end row -->

<div class="row">
    <div class="col-md-7">
        <div class="card">
            <div class="card-body">
                
                <h4 class="header-title mt-2">Recent Organisation Top Ups</h4>
                <div class="table-responsive" data-simplebar style="max-height: 624px;">
                    <table class="table table-centered table-nowrap table-hover mb-0">
                        <tbody>

                            @forelse ($topups as $topup)
                            <tr>
                                <td>
                                <h5 class="font-14 my-1 font-weight-normal">Merchant : {{ $topup->orgInfo->name }}</h5>
                                    <span class="text-muted font-13">{{ Carbon\Carbon::parse($topup->created_at)->format('F dS Y') }}</span>
                                </td>
                                <td>
                                <h5 class="font-14 my-1 font-weight-normal">K {{ $topup->amount }}</h5>
                                    <span class="text-muted font-13">Amount</span>
                                </td>
                                <td>
                                <h5 class="font-14 my-1 font-weight-normal">{{ ucfirst($topup->payment_method) }}</h5>
                                    <span class="text-muted font-13">Payment Method</span>
                                </td>
                                <td>
                                <h5 class="font-14 my-1 font-weight-normal">{{ $topup->userInfo->name }}</h5>
                                    <span class="text-muted font-13">Admin</span>
                                </td>
                            </tr>
                            @empty

                            @endforelse


                        </tbody>
                    </table>
                </div> <!-- end table-responsive-->
            </div> <!-- end card-body-->
        </div> <!-- end card-->
    </div> <!-- end col-->

    <div class="col-md-5">
        <div class="card">
            <div class="card-body">
                <div class="dropdown float-right">

                </div>
                <h4 class="header-title mb-2">Recent Activity</h4>

                <div data-simplebar style="max-height: 624px;">
                    <div class="timeline-alt pb-0">
                        @forelse ($activities as $activity)
                        <div class="timeline-item">
                            <i class="mdi mdi-upload bg-info-lighten text-info timeline-icon"></i>
                            <div class="timeline-item-info">
                            <a href="#" class="text-info font-weight-bold mb-1 d-block">{{ $activity->admin->name }}</a>
                            <small>
                              <?php
                              $data_arr = json_decode($activity->description);
                              // dump(gettype($data_arr));
                              //. " ==> " . $data_arr->data 
                              echo (isset($data_arr->title)) ? $data_arr->title : "N/A";
                              ?>
                            </small>
                                <p class="mb-0 pb-2">
                                <small class="text-muted">{{ $activity->created_at->diffForHumans() }}</small>
                                </p>
                            </div>
                        </div>
                        @empty

                        @endforelse

                    </div>
                    <!-- end timeline -->
                </div> <!-- end slimscroll -->
            </div>
            <!-- end card-body -->
        </div>
        <!-- end card-->
    </div>
    <!-- end col -->

</div>
<!-- end row -->
@endsection

@section('page-js')

<!-- third party js -->
<script src="{{ url('public/assets/js/vendor/apexcharts.min.js')}}"></script>
<script src="{{ url('public/assets/js/vendor/jquery-jvectormap-1.2.2.min.js')}}"></script>
<script src="{{ url('public/assets/js/vendor/jquery-jvectormap-world-mill-en.js')}}"></script>
<!-- third party js ends -->

<!-- demo app -->
<script src="{{ url('public/assets/js/pages/demo.dashboard.js')}}"></script>
<!-- end demo js-->

@endsection