@extends('layouts.admin')
<style>
    .card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover,
    .card:focus,
    .card:active {
        transform: scale(1.03);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        z-index: 2;
    }

    .icon-box {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .stat-card h6 {
        font-size: 0.95rem;
        color: #6c757d;
    }

    .google-gradient {
        background: linear-gradient(90deg, #4285F4 0%, #34A853 25%, #FBBC05 50%, #EA4335 75%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
    }
</style>

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <h1>Overview</h1>
    <div class="row mt-4">
        <div class="col-12 col-lg-3 col-sm-6 mt-lg-0 mt-3 my-2">
            <div class="card shadow rounded-4 border-0 p-3" style="height: 100px;">
                <div class="d-flex align-items-center h-100">
                    <div class="rounded-circle d-flex align-items-center justify-content-center"
                        style="width:60px; height:60px; background-color:#DE3996; color:#fff;">
                        <i class="fa fa-user fs-4"></i>
                    </div>
                    <div class="ms-4">
                        <h6 class="mb-1 fw-bold">Total Users</h6>
                        <h5 class="mb-0 fw-bold mt-3">{{ $total_users }}</h5>
                    </div>
                </div>
            </div>
        </div>


        <div class="col-12 col-lg-3 col-sm-6 mt-lg-0 mt-3 my-2">
            <div class="card shadow rounded-4 border-0 p-3" style="height: 100px;">
                <div class="d-flex align-items-center h-100">
                    <div class="rounded-circle d-flex align-items-center justify-content-center"
                        style="width:60px; height:60px; background-color:#DE3996; color:#fff;">
                        <i class="fa fa-users fs-4"></i>
                    </div>
                    <div class="ms-4">
                        <h6 class="mb-1 fw-bold">Total Teams</h6>
                        <h5 class="mb-0 fw-bold mt-3">{{ $total_teams }}</h5>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-3 col-sm-6 mt-lg-0 mt-3 my-2">
            <div class="card shadow rounded-4 border-0 p-3" style="height: 100px;">
                <div class="d-flex align-items-center h-100">
                    <div class="rounded-circle d-flex align-items-center justify-content-center"
                        style="width:60px; height:60px; background-color:#DE3996; color:#fff;">
                        <i class="fa fa-file-text fs-4"></i>
                    </div>
                    <div class="ms-4">
                        <h6 class="mb-1 fw-bold">Total Plans</h6>
                        <h5 class="mb-0 fw-bold mt-3">{{ $total_plans }}</h5>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-3 col-sm-6 mt-lg-0 mt-3 my-2">
            <div class="card shadow rounded-4 border-0 p-3" style="height: 100px;">
                <div class="d-flex align-items-center h-100">
                    <div class="rounded-circle d-flex align-items-center justify-content-center"
                        style="width:60px; height:60px; background-color:#DE3996; color:#fff;">
                        <i class="fa fa-folder fs-4"></i>
                    </div>
                    <div class="ms-4">
                        <h6 class="mb-1 fw-bold">Total Projects</h6>
                        <h5 class="mb-0 fw-bold mt-3">{{ $total_projects }}</h5>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-3 col-sm-6 mt-lg-0 mt-3 my-2">
            <div class="card shadow rounded-4 border-0 p-3" style="height: 100px;">
                <div class="d-flex align-items-center h-100">
                    <div class="rounded-circle d-flex align-items-center justify-content-center"
                        style="width:60px; height:60px; background-color:#DE3996; color:#fff;">
                        <i class="fa fa-clock fs-4"></i>
                    </div>
                    <div class="ms-4">
                        <h6 class="mb-1 fw-bold">Pending Projects</h6>
                        <h5 class="mb-0 fw-bold mt-3">{{ $pending_projects }}</h5>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-3 col-sm-6 mt-lg-0 mt-3 my-2">
            <div class="card shadow rounded-4 border-0 p-3" style="height: 100px;">
                <div class="d-flex align-items-center h-100">
                    <div class="rounded-circle d-flex align-items-center justify-content-center"
                        style="width:60px; height:60px; background-color:#DE3996; color:#fff;">
                        <i class="fa fa-check fs-4"></i>
                    </div>
                    <div class="ms-4">
                        <h6 class="mb-1 fw-bold">Projects Done</h6>
                        <h5 class="mb-0 fw-bold mt-3">{{ $completed_projects }}</h5>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-3 col-sm-6 mt-lg-0 mt-3 my-2">
            <div class="card shadow rounded-4 border-0 p-3" style="height: 100px;">
                <div class="d-flex align-items-center h-100">
                    <div class="rounded-circle d-flex align-items-center justify-content-center"
                        style="width:60px; height:60px; background-color:#DE3996; color:#fff;">
                        <i class="fa fa-times fs-4"></i>
                    </div>
                    <div class="ms-4">
                        <h6 class="mb-1 fw-bold">Failed Projects</h6>
                        <h5 class="mb-0 fw-bold mt-3">{{ $failed_projects }}</h5>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-3 col-sm-6 mt-lg-0 mt-3 my-2">
            <div class="card shadow rounded-4 border-0 p-3" style="height: 100px;">
                <div class="d-flex align-items-center h-100">
                    <div class="rounded-circle d-flex align-items-center justify-content-center"
                        style="width:60px; height:60px; background-color:#DE3996; color:#fff;">
                        <i class="fa fa-cubes fs-4"></i>
                    </div>
                    <div class="ms-4">
                        <h6 class="mb-1 fw-bold">Total Models</h6>
                        <h5 class="mb-0 fw-bold mt-3">{{ $total_models }}</h5>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-3 col-sm-6 mt-lg-0 mt-3 my-2">
            <div class="card shadow rounded-4 border-0 p-3" style="height: 100px;">
                <div class="d-flex align-items-center h-100">
                    <div class="rounded-circle d-flex align-items-center justify-content-center"
                        style="width:60px; height:60px; background-color:#DE3996; color:#fff;">
                        <i class="fa fa-people-arrows fs-4"></i>

                    </div>
                    <div class="ms-4">
                        <h6 class="mb-1 fw-bold">Total Visitors</h6>
                        {{-- <h5 class="mb-0 fw-bold mt-3">{{ number_format($totalVisitors) }}</h5> --}}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-4 col-md-6 my-2">
            <livewire:total-requests />
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-lg-5 mt-5 h-100">
            <div class="card border-0 shadow-lg rounded-4" style="height: 400px">
                <div class="card-body d-flex flex-column justify-content-center">
                    <h5 class="card-title fw-bold mb-4">User Growth</h5>
                    <div class="flex-grow-1">
                        <canvas id="userGrowthChart" class="w-100 h-100"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-7 mt-5">
            <div class="card border-0 shadow-lg rounded-4">
                <div class="card-body">
                    <h5 class="card-title fw-bold mb-4">Recent Joining</h5>
                    @if ($recent_users->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead class="">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    {{-- <th>Email</th> --}}
                                    <th>Joined At</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($recent_users as $user)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>
                                        @if ($user->google_id)
                                        <i class="fa-brands fa-google google-gradient" title="Google User"></i>
                                        @elseif ($user->facebook_id)
                                        <i class="fa-brands fa-facebook text-primary" title="Facebook User"></i>
                                        @else
                                        <i style="color: #DE3996" class="fa-solid fa-envelope " title="Form User"></i>
                                        @endif
                                        <strong>{{ $user->name }}</strong> <br>
                                        {{ $user->email }}

                                    </td>

                                    <td>{{ $user->created_at->format('d M, Y') }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="text-end mt-3">
                        <a href="{{ route('users.list') }}" class="btn btn-"
                            style="background-color: #DE3996; color: #fff">
                            View All
                        </a>
                    </div>
                    @else
                    <p class="text-muted">No new users joined this week.</p>
                    @endif

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


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('userGrowthChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: @json($userGrowthLabels),
                datasets: [{
                    label: 'New Users',
                    data: @json($userGrowthData),
                    borderColor: '#DE3996',
                    backgroundColor: 'rgba(222, 57, 150, 0.2)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false, // 🔑 allow canvas to fill container
                plugins: {
                    legend: {
                        display: true
                    },
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
</script>
@endsection