@extends('layouts.admin')

@section('title', 'Dashboard')
@section('breadcrumb_title', 'Dashboard')
@section('breadcrumb_sub_title', 'Overview')
@section('page_title', 'Dashboard')

@section('content')
    <div class="row">
        <!-- Statistics Cards -->
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-header p-3 pt-2">
                    <div
                        class="icon icon-lg icon-shape bg-gradient-primary shadow-primary text-center border-radius-xl mt-n4 position-absolute">
                        <i class="fa-solid fa-charging-station text-white opacity-10"></i>
                    </div>
                    <div class="text-end pt-1">
                        <p class="text-sm mb-0 text-capitalize">Total Charging Points</p>
                        <h4 class="mb-0">{{ $stats['active_charging_points'] ?? 0 }}</h4>
                    </div>
                </div>
                <div class="card-footer p-3">
                    <!-- <p class="mb-0"><span class="text-success text-sm font-weight-bolder">+{{ $stats['charging_points_growth'] ?? 0 }}%</span> than last month</p> -->
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-header p-3 pt-2">
                    <div
                        class="icon icon-lg icon-shape bg-gradient-info shadow-info text-center border-radius-xl mt-n4 position-absolute">
                        <i class="fa-solid fa-code-pull-request text-white opacity-10"></i>
                    </div>
                    <div class="text-end pt-1">
                        <p class="text-sm mb-0 text-capitalize">New Update Requests</p>
                        <h4 class="mb-0">{{ $stats['total_update_requests'] ?? 0 }}</h4>
                    </div>
                </div>
                <div class="card-footer p-3">
                    <!-- <p class="mb-0"><span class="text-success text-sm font-weight-bolder">+{{ $stats['networks_growth'] ?? 0 }}%</span> than last month</p> -->
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-header p-3 pt-2">
                    <div
                        class="icon icon-lg icon-shape bg-gradient-success shadow-success text-center border-radius-xl mt-n4 position-absolute">
                        <i class="fa-solid fa-users text-white opacity-10"></i>
                    </div>
                    <div class="text-end pt-1">
                        <p class="text-sm mb-0 text-capitalize">Active Clients</p>
                        <h4 class="mb-0">{{ $stats['active_clients'] ?? 0 }}</h4>
                    </div>
                </div>
                <div class="card-footer p-3">
                    <!-- <p class="mb-0"><span class="text-success text-sm font-weight-bolder">+{{ $stats['clients_growth'] ?? 0 }}%</span> than last month</p> -->
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-sm-6">
            <div class="card">
                <div class="card-header p-3 pt-2">
                    <div
                        class="icon icon-lg icon-shape bg-gradient-warning shadow-warning text-center border-radius-xl mt-n4 position-absolute">
                        <i class="fa-solid fa-bug text-white opacity-10"></i>
                    </div>
                    <div class="text-end pt-1">
                        <p class="text-sm mb-0 text-capitalize">bug Requests</p>
                        <h4 class="mb-0">{{ $stats['bug_requests'] ?? 0 }}</h4>
                    </div>
                </div>
                <div class="card-footer p-3">
                    <!-- <p class="mb-0"><span class="text-warning text-sm font-weight-bolder">{{ $stats['requests_growth'] ?? 0 }}%</span> from last week</p> -->
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <!-- Charging Points Chart -->
        <div class="col-lg-8 col-md-6 mb-md-0 mb-4">
            <div class="card">
                <div class="card-header pb-0">
                    <div class="row">
                        <div class="col-lg-12 col-12">
                            <h6>Charging Points Overview</h6>
                            <div class="d-flex align-items-center status-indicators">
                                <span class="d-inline-flex align-items-center me-4">
                                    <i class="fa fa-check text-success me-1" aria-hidden="true"></i>
                                    <span class="font-weight-bold text-sm">Verified:
                                        {{ $stats['active_charging_points'] ?? 0 }}</span>
                                </span>
                                <span class="d-inline-flex align-items-center me-4">
                                    <i class="fa fa-clock text-warning me-1" aria-hidden="true"></i>
                                    <span class="font-weight-bold text-sm">Under Review:
                                        {{ $stats['under_review_points'] ?? 0 }}</span>
                                </span>
                                <span class="d-inline-flex align-items-center me-4">
                                    <i class="fa fa-link text-info me-1" aria-hidden="true"></i>
                                    <span class="font-weight-bold text-sm">Merged:
                                        {{ $stats['merged_charging_points'] ?? 0 }}</span>
                                </span>
                                <span class="d-inline-flex align-items-center me-4">
                                    <i class="fa fa-times text-danger me-1" aria-hidden="true"></i>
                                    <span class="font-weight-bold text-sm">Rejected:
                                        {{ $stats['rejected_charging_points'] ?? 0 }}</span>
                                </span>
                                <span class="d-inline-flex align-items-center">
                                    <i class="fa fa-pause text-secondary me-1" aria-hidden="true"></i>
                                    <span class="font-weight-bold text-sm">Inactive:
                                        {{ $stats['inactive_charging_points'] ?? 0 }}</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body px-0 pb-2">
                    <div class="table-responsive">
                        <table class="table align-items-center mb-0">
                            <thead>
                                <tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                        Status</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                        Count</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                        Percentage</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                        Progress</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="d-flex px-0 py-1">
                                            <div>
                                                <i class="fa fa-check-circle text-success me-2"></i>
                                            </div>
                                            <div class="d-flex flex-column justify-content-center">
                                                <h6 class="mb-0 text-sm">Verified</h6>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="text-xs font-weight-bold mb-0">
                                            {{ $stats['active_charging_points'] ?? 0 }}</p>
                                    </td>
                                    <td>
                                        <span
                                            class="text-xs font-weight-bold mb-0">{{ $stats['active_percentage'] ?? 0 }}%</span>
                                    </td>
                                    <td class="align-middle">
                                        <div class="progress-wrapper w-100 mx-auto">
                                            <div class="progress-info">
                                                <div class="progress-percentage">
                                                    <span
                                                        class="text-xs font-weight-bold">{{ $stats['active_percentage'] ?? 0 }}%</span>
                                                </div>
                                            </div>
                                            <div class="progress">
                                                <div class="progress-bar bg-gradient-success" role="progressbar"
                                                    style="width: {{ $stats['active_percentage'] ?? 0 }}%"
                                                    aria-valuenow="{{ $stats['active_percentage'] ?? 0 }}"
                                                    aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex px-0 py-1">
                                            <div>
                                                <i class="fa fa-clock text-warning me-2"></i>
                                            </div>
                                            <div class="d-flex flex-column justify-content-center">
                                                <h6 class="mb-0 text-sm">Under Review</h6>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="text-xs font-weight-bold mb-0">{{ $stats['under_review_points'] ?? 0 }}
                                        </p>
                                    </td>
                                    <td>
                                        <span
                                            class="text-xs font-weight-bold mb-0">{{ $stats['review_percentage'] ?? 0 }}%</span>
                                    </td>
                                    <td class="align-middle">
                                        <div class="progress-wrapper w-100 mx-auto">
                                            <div class="progress-info">
                                                <div class="progress-percentage">
                                                    <span
                                                        class="text-xs font-weight-bold">{{ $stats['review_percentage'] ?? 0 }}%</span>
                                                </div>
                                            </div>
                                            <div class="progress">
                                                <div class="progress-bar bg-gradient-warning" role="progressbar"
                                                    style="width: {{ $stats['review_percentage'] ?? 0 }}%"
                                                    aria-valuenow="{{ $stats['review_percentage'] ?? 0 }}"
                                                    aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex px-0 py-1">
                                            <div>
                                                <i class="fa fa-link text-info me-2"></i>
                                            </div>
                                            <div class="d-flex flex-column justify-content-center">
                                                <h6 class="mb-0 text-sm">Merged</h6>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="text-xs font-weight-bold mb-0">
                                            {{ $stats['merged_charging_points'] ?? 0 }}</p>
                                    </td>
                                    <td>
                                        <span
                                            class="text-xs font-weight-bold mb-0">{{ $stats['merged_percentage'] ?? 0 }}%</span>
                                    </td>
                                    <td class="align-middle">
                                        <div class="progress-wrapper w-100 mx-auto">
                                            <div class="progress-info">
                                                <div class="progress-percentage">
                                                    <span
                                                        class="text-xs font-weight-bold">{{ $stats['merged_percentage'] ?? 0 }}%</span>
                                                </div>
                                            </div>
                                            <div class="progress">
                                                <div class="progress-bar bg-gradient-info" role="progressbar"
                                                    style="width: {{ $stats['merged_percentage'] ?? 0 }}%"
                                                    aria-valuenow="{{ $stats['merged_percentage'] ?? 0 }}"
                                                    aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex px-0 py-1">
                                            <div>
                                                <i class="fa fa-times-circle text-danger me-2"></i>
                                            </div>
                                            <div class="d-flex flex-column justify-content-center">
                                                <h6 class="mb-0 text-sm">Rejected</h6>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="text-xs font-weight-bold mb-0">
                                            {{ $stats['rejected_charging_points'] ?? 0 }}</p>
                                    </td>
                                    <td>
                                        <span
                                            class="text-xs font-weight-bold mb-0">{{ $stats['rejected_percentage'] ?? 0 }}%</span>
                                    </td>
                                    <td class="align-middle">
                                        <div class="progress-wrapper w-100 mx-auto">
                                            <div class="progress-info">
                                                <div class="progress-percentage">
                                                    <span
                                                        class="text-xs font-weight-bold">{{ $stats['rejected_percentage'] ?? 0 }}%</span>
                                                </div>
                                            </div>
                                            <div class="progress">
                                                <div class="progress-bar bg-gradient-danger" role="progressbar"
                                                    style="width: {{ $stats['rejected_percentage'] ?? 0 }}%"
                                                    aria-valuenow="{{ $stats['rejected_percentage'] ?? 0 }}"
                                                    aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex px-0 py-1">
                                            <div>
                                                <i class="fa fa-pause-circle text-secondary me-2"></i>
                                            </div>
                                            <div class="d-flex flex-column justify-content-center">
                                                <h6 class="mb-0 text-sm">Inactive</h6>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="text-xs font-weight-bold mb-0">
                                            {{ $stats['inactive_charging_points'] ?? 0 }}</p>
                                    </td>
                                    <td>
                                        <span
                                            class="text-xs font-weight-bold mb-0">{{ $stats['inactive_percentage'] ?? 0 }}%</span>
                                    </td>
                                    <td class="align-middle">
                                        <div class="progress-wrapper w-100 mx-auto">
                                            <div class="progress-info">
                                                <div class="progress-percentage">
                                                    <span
                                                        class="text-xs font-weight-bold">{{ $stats['inactive_percentage'] ?? 0 }}%</span>
                                                </div>
                                            </div>
                                            <div class="progress">
                                                <div class="progress-bar bg-gradient-secondary" role="progressbar"
                                                    style="width: {{ $stats['inactive_percentage'] ?? 0 }}%"
                                                    aria-valuenow="{{ $stats['inactive_percentage'] ?? 0 }}"
                                                    aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Activity -->
        <div class="col-lg-4 col-md-6">
            <div class="card h-100">
                <div class="card-header pb-0">
                    <h6>Recent Activity</h6>
                </div>
                <div class="card-body p-2">
                    <div class="timeline timeline-one-side">
                        @forelse($recentActivities ?? [] as $activity)
                            <div class="timeline-block mb-3">
                                <span class="timeline-step">
                                    <i class="fa-regular fa-star text-success me-0"></i>
                                </span>
                                <div class="timeline-content">
                                    <h6 class="text-dark text-sm font-weight-bold mb-0">
                                        {{ $activity['title'] ?? 'New Activity' }}</h6>
                                    <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">
                                        {{ $activity['description'] ?? 'No description available' }}</p>
                                    <p class="text-xs text-muted mb-0">{{ $activity['time'] ?? 'Just now' }}</p>
                                </div>
                            </div>
                        @empty
                            <div class="timeline-block mb-3">
                                <span class="timeline-step">
                                    <i class="fa-regular fa-star text-success me-0"></i>
                                </span>
                                <div class="timeline-content">
                                    <h6 class="text-dark text-sm font-weight-bold mb-0">No recent activity</h6>
                                    <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">Check back later for
                                        updates</p>
                                </div>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header pb-0">
                    <h6>Quick Actions</h6>
                    <p class="text-sm mb-0">Common administrative tasks</p>
                </div>
                <div class="card-body p-3">
                    <div class="row">
                        <div class="col-lg-3 col-md-6 col-sm-12 mb-3">
                            <a href="{{ route('charging-points.index') }}" class="btn btn-outline-success btn-lg w-100">
                                <i class="fa fa-bolt me-2"></i>
                                Manage Charging Points
                            </a>
                        </div>
                        <div class="col-lg-3 col-md-6 col-sm-12 mb-3">
                            <a href="{{ route('charging-point-update-requests.index') }}"
                                class="btn btn-outline-primary btn-lg w-100">
                                <i class="fa fa-clock me-2"></i>
                                Review Update Requests
                            </a>
                        </div>
                        <div class="col-lg-3 col-md-6 col-sm-12 mb-3">
                            <a href="{{ route('users.index') }}" class="btn btn-outline-info btn-lg w-100">
                                <i class="fa fa-user me-2"></i>
                                Manage Users
                            </a>
                        </div>
                        <div class="col-lg-3 col-md-6 col-sm-12 mb-3">
                            <a href="{{ route('status-reports.index') }}" class="btn btn-outline-warning btn-lg w-100">
                                <i class="fa-solid fa-bug me-2"></i>
                                Bug Reports
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <style>
        @media (min-width: 992px) {
            .status-indicators {
                flex-wrap: nowrap !important;
            }
        }

        @media (max-width: 991px) {
            .status-indicators {
                flex-wrap: wrap;
            }

            .status-indicators span {
                margin-bottom: 0.5rem;
            }
        }

        @media (max-width: 576px) {
            .status-indicators {
                flex-direction: column;
                align-items: flex-start !important;
            }

            .status-indicators span {
                margin-right: 0 !important;
                margin-bottom: 0.5rem !important;
            }
        }

        @media (max-width: 768px) {
            .status-indicators span {
                font-size: 0.75rem;
            }
        }
    </style>
    <script>
        // Initialize any dashboard-specific JavaScript here
        console.log('Dashboard loaded successfully');
    </script>
@endsection