@extends('layouts.master')
@section('content')

{{-- statistics --}}
<h5 class="mb-2 pt-3">TPHA-summary</h5>
<hr>
<div class="row">

    <div class="col-md-3 col-sm-6 col-12">
        <div class="info-box">
            <span class="info-box-icon bg-gradient-primary"><i class="fas fa-folder-open"></i></span>

            <div class="info-box-content">
                <span class="info-box-text">Projects</span>
                <span class="info-box-number">{{number_format($projects)}}</span>
            </div>
        </div>
    </div>

    <div class="col-md-3 col-sm-6 col-12">
        <div class="info-box">
            <span class="info-box-icon bg-gradient-light"><i class="fas fa-users text-primary"></i></span>

            <div class="info-box-content">
                <span class="info-box-text">Active Members</span>
                <span class="info-box-number">{{number_format($active_members)}}</span>
            </div>
        </div>
    </div>

    <div class="col-md-3 col-sm-6 col-12">
        <div class="info-box">
            <span class="info-box-icon bg-gradient-light  text-info"><i class="fas fa-handshake"></i></span>

            <div class="info-box-content">
                <span class="info-box-text">Affiliates</span>
                <span class="info-box-number">{{number_format($affiliates)}}</span>
            </div>
        </div>

    </div>

    <div class="col-md-3 col-sm-6 col-12">
        <div class="info-box">
            <span class="info-box-icon bg-gradient-primary"><i class="fas fa-envelope"></i></span>

            <div class="info-box-content">
                <span class="info-box-text">Subscribed</span>
                <span class="info-box-number">{{number_format($subscribed_users)}}</span>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Daily Visitors Report for Month 04-2026</h5>

                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>

            </div>

            <div class="card-body">
                <div class="row">
                    <div class="col-md-9">
                        <p class="text-center">
                            <strong>Summary For TPHA Visitors</strong>
                        </p>

                        <div class="chart">
                            <canvas id="visitors-chart" height="180" style="height: 180px;"></canvas>
                        </div>

                    </div>

                    <div class="col-md-3">
                        <p class="text-center">
                            <strong>Other Summaries</strong>
                        </p>

                        <div class="progress-group">
                            Current Projects
                            <span class="float-right"><b>{{$projects_current}}</b>/{{$projects}}</span>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-primary" style="width: {{$current_projects}}%"></div>
                            </div>
                        </div>
                        <!-- /.progress-group -->

                        <div class="progress-group">
                            Past Projects
                            <span class="float-right"><b>{{$projects_past}}</b>/{{$projects}}</span>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-gradient-info" style="width: {{$past_projects}}%"></div>
                            </div>
                        </div>

                        <!-- /.progress-group -->
                        <div class="progress-group">
                            <span class="progress-text">Subscribed</span>
                            <span class="float-right"><b>{{$subscribed_users}}</b>/{{$all_subscribed}}</span>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-success" style="width: {{$subscribed_stats}}%"></div>
                            </div>
                        </div>

                        <div class="progress-group">
                            Active Members
                            <span class="float-right"><b>{{$active_members}}</b>/{{$all_members}}</span>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-gradient-info" style="width: {{$members_stats}}%"></div>
                            </div>
                        </div>

                    </div>

                </div>

            </div>

            <div class="card-footer">
                <div class="row">
                    <div class="col-sm-3 col-6">
                        <div class="description-block border-right">
                            <span class="description-percentage text-info"><i class="fas fa-fw fa-users"></i></span>
                            <h5 class="description-header">{{number_format($today_visitors)}}</h5>
                            <span class="description-text">Today &nbsp Visitors</span>
                        </div>

                    </div>

                    <div class="col-sm-3 col-6">
                        <div class="description-block border-right">
                            <span class="description-percentage text-info"><i class="fas fa-fw fa-clock"></i></span>
                            <h5 class="description-header">{{number_format($yesterday_visitors)}}</h5>
                            <span class="description-text">Yesterday &nbsp; Visitors</span>
                        </div>

                    </div>

                    <div class="col-sm-3 col-6">
                        <div class="description-block border-right">
                            <span class="description-percentage text-info"><i class="fas fa-fw fa-chart-bar"></i></span>
                            <h5 class="description-header">{{number_format($month_visitors)}}</h5>
                            <span class="description-text">This Month</span>
                        </div>

                    </div>

                    <div class="col-sm-3 col-6">
                        <div class="description-block">
                            <span class="description-percentage text-info"><i
                                    class="fas fa-fw fa-chart-line"></i></span>
                            <h5 class="description-header">{{number_format($all_time_visitors)}}</h5>
                            <span class="description-text">All Time</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card card-outline card-primary">
            <div class="card-header">
                <h3 class="card-title">LATEST MEMBER REGISTRATIONS</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
            </div>

            <div class="card-body">
                <div class="row">
                    <div class="col-md-7">

                        <!--################## LATEST REGISTRATION ################-->
                        <div class="table-responsive">
                            <table class="table m-0 text-sm">
                                <thead class="bg-gradient-light">
                                    <tr>
                                        <th>S/N</th>
                                        <th>Name</th>
                                        <th>Phone</th>
                                        <th>Status</th>
                                        <th>Date</th>
                                    </tr>
                                </thead>
                                <tbody>

                                  @foreach ($latest_members as $member)
                                      <tr>
                                        <td>{{$loop->index+1}}</td>
                                        <td>{{$member->title}} {{$member->first_name}} {{$member->middle_name}} {{$member->last_name}}</td>
                                        <td>{{$member->phone}}</td>
                                        @if($member->status == "unchecked")
                                        <td><span class="badge badge-warning p-2">{{$member->status}}</span></td>
                                        @else
                                        <td><span class="badge badge-success p-2">{{$member->status}}</span></td>
                                        @endif
                                        <td>{{Carbon\Carbon::parse($member->created_at)->format('d-m-Y')}}</td>
                                      </tr>
                                  @endforeach
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-5">
                      <div class="table-responsive">
                            <table class="table m-0 table-striped text-sm">
                                <thead class="bg-info">
                                    <tr>
                                        <th>S/N</th>
                                        <th>Email</th>
                                        <th>Status</th>
                                        <th>Date</th>
                                    </tr>
                                </thead>
                                <tbody>

                                  @foreach ($latest_subscribers as $sub)
                                      <tr>
                                        <td>{{$loop->index+1}}</td>
                                        <td title="{{$sub->email}}">{{Str::limit($sub->email,'15','..')}}</td>
                                        @if($sub->status == "unchecked")
                                        <td><span><i class="fas fa-fw fa-circle text-warning text-xs"></i></span></td>
                                        @else
                                        <td><span><i class="fas fa-fw fa-circle text-info text-xs"></i></span></td>
                                        @endif
                                        <td>{{Carbon\Carbon::parse($sub->created_at)->format('d-m-Y')}}</td>
                                      </tr>
                                  @endforeach
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
            <div class="card-footer clearfix">
              <a href="{{url('member_registration')}}" class="btn btn-sm btn-info float-left">View All &nbsp;<i class="fas fa-fw fa-users"></i></a>
              <a href="{{url('subscribed')}}" class="btn btn-sm btn-info float-right">View All &nbsp;&nbsp;<i class="fas fa-fw fa-eye"></i></a>
            </div>

        </div>
    </div>
</div>
</div>

<script>
    $(function () {
        'use strict'

        var ticksStyle = {
            fontColor: '#495057',
            fontStyle: 'bold'
        }

        var mode = 'index'
        var intersect = true

        var $groupLoanChart = $('#visitors-chart')
        var cData = JSON.parse('');
        var groupLoanChart = new Chart($groupLoanChart, {
            type: 'bar',
            data: {
                labels: cData.label,
                datasets: [{
                    backgroundColor: '#17A2B8',
                    borderColor: '#007bff',
                    data: cData.data
                }]
            },
            options: {
                maintainAspectRatio: false,
                tooltips: {
                    mode: mode,
                    intersect: intersect
                },
                hover: {
                    mode: mode,
                    intersect: intersect
                },
                legend: {
                    display: false
                },
                scales: {
                    yAxes: [{
                        // display: false,
                        gridLines: {
                            display: true,
                            lineWidth: '4px',
                            color: 'rgba(0, 0, 0, .2)',
                            zeroLineColor: 'transparent'
                        },
                        ticks: $.extend({
                            beginAtZero: true,

                            // Include a dollar sign in the ticks
                            callback: function (value, index, values) {
                                if (value >= 1) {
                                    value /= 1
                                }
                                return '' + value
                            }
                        }, ticksStyle)
                    }],
                    xAxes: [{
                        display: true,
                        gridLines: {
                            display: false
                        },
                        ticks: ticksStyle
                    }]
                }
            }
        })

    })
</script>



@endsection