@extends('adminmodule::layouts.master')

@section('title', translate('Driver_Earning_Analytics'))

@section('content')

    <!-- Main Content -->
    <div class="main-content">
        <div class="container-fluid">

            <div class="row mb-4 text-center">
                <div class="col-md-4 mb-3">
                    <div class="card shadow-sm border-0 bg-success-subtle">
                        <div class="card-body">
                            <h5 class="card-title text-success">Recent Drivers</h5>
                            <h2>{{ $recent_count ?? 0 }}</h2>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mb-3">
                    <div class="card shadow-sm border-0 bg-warning-subtle">
                        <div class="card-body">
                            <h5 class="card-title text-warning">Not Recent Drivers</h5>
                            <h2>{{ $not_recent_count ?? 0 }}</h2>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mb-3">
                    <div class="card shadow-sm border-0 bg-secondary-subtle">
                        <div class="card-body">
                            <h5 class="card-title text-secondary">No Location</h5>
                            <h2>{{ $no_location_count ?? 0 }}</h2>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm border-0">
                <div class="card-header bg-light">
                    <h5 class="mb-0">Driver Location Status</h5>
                </div>
                <div class="card-body p-0">
                    <table class="table mb-0 align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Driver Name</th>
                                <th>Last Update</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($drivers as $index => $driver)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $driver->name ?? 'N/A' }}</td>
                                    <td>{{ $driver->updated_at ? $driver->updated_at->diffForHumans() : '—' }}</td>
                                    <td>
                                        @if ($driver->is_recent)
                                            <span class="pulse-dot bg-success" style="background-color: green !important"></span>
                                            <span class="text-success">Recent</span>
                                        @else
                                            <span class="pulse-dot bg-danger"></span>
                                            <span class="text-danger">Not Recent</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center text-muted py-3">
                                        No driver data available.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    @push('css_or_js')
        <style>
            .pulse-dot {
                display: inline-block;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                margin-right: 6px;
                position: relative;
            }

            .pulse-dot::after {
                content: '';
                position: absolute;
                top: -2px;
                left: -2px;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                border: 2px solid currentColor;
                opacity: 0;
                animation: pulse 1.2s infinite;
            }

            @keyframes pulse {
                0% {
                    transform: scale(0.9);
                    opacity: 1;
                }

                70% {
                    transform: scale(1.4);
                    opacity: 0;
                }

                100% {
                    opacity: 0;
                }
            }
        </style>
    @endpush
@endsection