@extends('layouts.app')

@section('title', 'Dashboard')

@section('breadcrumb')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Overview</h1>
                    <p class="text-muted">Manage users account permissions here</p>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="container-fluid dashboard-overview">
        <div class="overview-cards">
            <div class="overview-card">
                <div>
                    <p>Total Members</p>
                    <h3>{{ number_format($totalMembers ?? 0) }}</h3>
                </div>
                <div class="icon-chip green"><i class="fas fa-users"></i></div>
            </div>
            <div class="overview-card">
                <div>
                    <p>Total Branches</p>
                    <h3>{{ number_format($totalBranches ?? 0) }}</h3>
                </div>
                <div class="icon-chip green"><i class="far fa-file"></i></div>
            </div>
            <div class="overview-card">
                <div>
                    <p>Total Sales</p>
                    <h3>{{ number_format($totalSales ?? 0) }}</h3>
                </div>
                <div class="icon-chip green"><i class="fas fa-shopping-cart"></i></div>
            </div>
            <div class="overview-card">
                <div>
                    <p>Inactive users</p>
                    <h3>{{ number_format($inactiveUsers ?? 0) }}</h3>
                </div>
                <div class="icon-chip red"><i class="fas fa-user-times"></i></div>
            </div>
        </div>

        <div class="overview-grid">
         

             <div class="card overview-chart">
                <div class="card-header">
                     <div>
                        <h5>Sales Performance</h5>
                        <span class="subtext">(+5%) in 2025</span>
                    </div>
                </div>
                        <div class="card-body">
                            <div class="line-chart">
                                <div class="y-axis">
                                    <span>500</span>
                                    <span>400</span>
                                    <span>300</span>
                                    <span>200</span>
                                    <span>100</span>
                                </div>
                                <svg viewBox="0 0 600 240" preserveAspectRatio="none">
                                    <defs>
                                        <linearGradient id="userFill" x1="0" y1="0" x2="0" y2="1">
                                            <stop offset="0%" stop-color="#1e6a2b" stop-opacity="0.25"/>
                                            <stop offset="100%" stop-color="#1e6a2b" stop-opacity="0"/>
                                        </linearGradient>
                                    </defs>
                                    <g stroke="#e9ecef" stroke-width="1">
                                        <line x1="0" y1="200" x2="600" y2="200"/>
                                        <line x1="0" y1="160" x2="600" y2="160"/>
                                        <line x1="0" y1="120" x2="600" y2="120"/>
                                        <line x1="0" y1="80" x2="600" y2="80"/>
                                        <line x1="0" y1="40" x2="600" y2="40"/>
                                    </g>
                                    <path d="M 20 180 C 80 140, 120 160, 180 120 C 240 100, 300 160, 360 140 C 420 120, 480 180, 560 160 L 560 220 L 20 220 Z" fill="url(#userFill)"/>
                                    <path d="M 20 180 C 80 140, 120 160, 180 120 C 240 100, 300 160, 360 140 C 420 120, 480 180, 560 160" fill="none" stroke="#1e6a2b" stroke-width="3"/>
                                    <path d="M 20 140 C 80 120, 120 130, 180 100 C 240 90, 300 120, 360 110 C 420 100, 480 140, 560 130" fill="none" stroke="#a0cfb0" stroke-width="3"/>
                                </svg>
                                <div class="chart-months">
                                    <span>0</span><span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span><span>Jun</span><span>Jul</span><span>Aug</span><span>Sept</span><span>Oct</span><span>Nov</span><span>Dec</span>
                                </div>
                            </div>
                        </div>
                    </div>

            <div class="card recent-status">
                <div class="card-header">
                    <h5>Recent Status</h5>
                    <a href="#" class="link-more ml-auto">View more <i class="fas fa-chevron-right"></i></a>
                </div>
                <div class="card-body">
                    @for ($i = 0; $i < 5; $i++)
                    <div class="status-row">
                        <div class="status-user">
                            <img src="{{ asset('assets/img/user2-160x160.jpg') }}" alt="User">
                            <div>
                                <p class="name">Daniel Adebanjo</p>
                                <p class="meta">Funded his wallet</p>
                            </div>
                        </div>
                        <div class="amount">+23,000</div>
                    </div>
                    @endfor
                </div>
            </div>
        </div>

        <div class="card recent-transactions mt-3">
            <div class="card-header">
                <h5>Recent Transactions</h5>
                <a href="#" class="link-more ml-auto">View more <i class="fas fa-chevron-right"></i></a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table overview-table">
                        <thead>
                            <tr>
                                <th style="width: 50px;"><input type="checkbox" class="form-check-input"></th>
                                <th>Customer Name</th>
                                <th>Services</th>
                                <th>Trans. Type</th>
                                <th>Amount</th>
                                <th>Date</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @for ($i = 0; $i < 5; $i++)
                            {{-- <tr>
                                <td><input type="checkbox" class="form-check-input {{ $i == 1 ? 'checked' : '' }}"></td>
                                <td>Daniel Adebanjo</td>
                                <td>Mobile-top up</td>
                                <td>{{ $i == 1 ? 'Data' : 'Airtime' }}</td>
                                <td>2,000</td>
                                <td>12/04/25</td>
                                <td>
                                    <span class="status-pill {{ $i == 1 ? 'danger' : 'success' }}">
                                        {{ $i == 1 ? 'Failed' : 'Successful' }}
                                    </span>
                                </td>
                            </tr> --}}
                            @endfor
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection