@extends('layouts.app')

@section('title', 'Users Management')

@section('content')
    <div class="content-header">
        <div class="container-fluid mb-5 mt-3 ">
            <div class="row align-items-center mb-4">
                 <div class="col-md-6">
                     <h1 class="page-title mb-1">Users Management</h1>
                     <p class="text-muted">Manage all users account here</p>
                </div>
                     <div class="col-sm-6 d-flex justify-content-end gap-3">
                            <button type="button" class="btn btn-success action-btn px-4 py-2 mr-2" data-toggle="modal" data-target="#CreateUser"><i
                            class="fas fa-plus mr-2"></i>Create User</button>

                            <div class="modal fade inventory-modal" id="CreateUser" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        @livewire('user-management.create-user')
                                    </div>
                                </div>
                            </div>
                            <a href="{{ route('admin.user.allUsers')}}" class="btn btn-outline-secondary" style="border-radius: 8px; font-weight: 600; color: #343a40;">View All</a>
                            
                    </div>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-md-4">
                    <div class="metric-card">
                        <div class="metric-content">
                            <p class="metric-label">Today's Users</p>
                            <h2 class="metric-value">
                                <span class="metric-amount">{{ number_format($todayUsersCount) }}</span>
                            </h2>
                        </div>
                        <div class="metric-icon bg-success"><i class="fas fa-users"></i></div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="metric-card">
                        <div class="metric-content">
                            <p class="metric-label">Active User</p>
                            <h2 class="metric-value">
                                <span class="metric-amount">{{ number_format($activeUsersCount) }}</span>
                            </h2>
                        </div>
                        <div class="metric-icon bg-success"><i class="fas fa-user-check"></i></div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="metric-card">
                        <div class="metric-content">
                            <p class="metric-label">Inactive Users</p>
                            <h2 class="metric-value">
                                <span class="metric-amount">{{ number_format($inactiveUsersCount) }}</span>
                            </h2>
                        </div>
                        <div class="metric-icon bg-danger"><i class="fas fa-user-slash"></i></div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-8">
                    <div class="card chart-card">
                        <div class="card-header bg-white d-flex align-items-center">
                            <h5 class="mb-0"  style="font-weight: 700;">Role Performance (Jan - June)</h5>
                            <div class="chart-legend ml-auto d-flex align-items-center">
                                <span class="legend-dot user"></span><span class="legend-label mr-3">User</span>
                                <span class="legend-dot vendor"></span><span class="legend-label">Vendor</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>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header bg-white d-flex">
                            <h5 class="mb-0" style="font-weight: 700;">Services</h5>
                        </div>
                        <div class="card-body services-card">
                            <div class="donut-chart"></div>
                            <div class="legend-list">
                                <div><span class="legend-bullet mobile"></span><span class="legend-label">Mobile Top-Up</span><span class="percent">40%</span></div>
                                <div><span class="legend-bullet savings"></span><span class="legend-label">Savings & Loan</span><span class="percent">30%</span></div>
                                <div><span class="legend-bullet realestate"></span><span class="legend-label">Real Estate</span><span class="percent">30%</span></div>
                                <div><span class="legend-bullet ecommerce"></span><span class="legend-label">E-Commerce</span><span class="percent">30%</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        
            <div class="table-class card user-index">
                <div class="card-header bg-white d-flex">
                    <h5 class="mb-0"  style="font-weight: 700;">All registered users</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0 user-index-table">
                            <thead class="thead">
                                <tr>
                                    <th><input class="form-check-input" type="checkbox"></th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Role</th>
                                    <th>Status</th>
                                    <th>Approval Status</th>
                                    {{-- <th>Last seen date</th> --}}
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody class="tbody">
                                @forelse($recentUsers as $user)
                                <tr>
                                    <td><input class="form-check-input" type="checkbox" value="{{ $user->id }}"></td>
                                    <td class="name-cell">
                                        <span class="avatar bg-success text-white d-inline-flex align-items-center justify-content-center">
                                            <i class="fas fa-user"></i>
                                        </span>
                                        <a href="{{ route('admin.user.management.show', $user->id) }}" class="text-dark text-decoration-none">
                                            {{ $user->full_name ?? $user->first_name . ' ' . $user->last_name }}
                                        </a>
                                    </td>
                                    <td>{{ $user->email }}</td>
                                    <td>{{ strtoupper($user->user_type) }}</td>
                                    <td>
                                        @if($user->status == \App\Enums\UserStatus::ACTIVE->value)
                                            <span class="status-pill active">Active</span>
                                        @else
                                            <span class="status-pill inactive">Inactive</span>
                                        @endif
                                    </td>
                                           @php
                                            $approval = strtolower($user->approval_status ?? 'pending');
                                            $approvalLabel = ucwords(str_replace('_', ' ', $approval));
                                            $approvalClass = match ($approval) {
                                                'approved' => 'success',
                                                'rejected' => 'danger',
                                                default => 'pending',
                                            };
                                        @endphp
                                        <td><span class="status-badge {{ $approvalClass }}">{{ $approvalLabel }}</span></td>
                                        <td><a href="{{ route('admin.user.management.show', $user->id) }}" class="action-view-circle"><i class="fas fa-eye"></i></a></td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="7" class="text-center py-4 text-muted">No registered users yet.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection