@extends('admin.layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="space-y-6">
    <!-- Welcome & Summary Section -->
    <div class="bg-white rounded-xl shadow-sm p-6">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">Welcome back, {{ Auth::user()->name }}</h1>
                <p class="mt-1 text-gray-600">Here's your shipment activity overview</p>
            </div>
            <div class="mt-4 md:mt-0">
                <a href="{{ route('admin.shipments.create') }}" 
                   class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors shadow-sm">
                    <i class="fas fa-plus mr-2"></i>
                    <span>New Shipment</span>
                </a>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Total Shipments -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="px-6 py-5 flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-500">Total Shipments</p>
                    <h3 class="mt-2 text-3xl font-bold text-gray-900">{{ number_format($totalShipments) }}</h3>
                    <a href="{{ route('admin.shipments.index') }}" class="mt-2 inline-block text-sm text-blue-600 hover:text-blue-800">
                        View all
                        <i class="fas fa-arrow-right ml-1 text-xs"></i>
                    </a>
                </div>
                <div class="bg-blue-100 p-3 rounded-lg">
                    <i class="fas fa-boxes text-2xl text-blue-600"></i>
                </div>
            </div>
            <div class="bg-gradient-to-r from-blue-600 to-blue-700 h-1.5"></div>
        </div>

        <!-- In Transit -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="px-6 py-5 flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-500">In Transit</p>
                    <h3 class="mt-2 text-3xl font-bold text-gray-900">{{ number_format($inTransitShipments) }}</h3>
                    <a href="{{ route('admin.shipments.index', ['status' => 'in_transit']) }}" class="mt-2 inline-block text-sm text-yellow-600 hover:text-yellow-800">
                        View active
                        <i class="fas fa-arrow-right ml-1 text-xs"></i>
                    </a>
                </div>
                <div class="bg-yellow-100 p-3 rounded-lg">
                    <i class="fas fa-shipping-fast text-2xl text-yellow-600"></i>
                </div>
            </div>
            <div class="bg-gradient-to-r from-yellow-500 to-yellow-600 h-1.5"></div>
        </div>

        <!-- Delivered -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="px-6 py-5 flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-500">Delivered</p>
                    <h3 class="mt-2 text-3xl font-bold text-gray-900">{{ number_format($deliveredShipments) }}</h3>
                    <a href="{{ route('admin.shipments.index', ['status' => 'delivered']) }}" class="mt-2 inline-block text-sm text-green-600 hover:text-green-800">
                        View completed
                        <i class="fas fa-arrow-right ml-1 text-xs"></i>
                    </a>
                </div>
                <div class="bg-green-100 p-3 rounded-lg">
                    <i class="fas fa-check-circle text-2xl text-green-600"></i>
                </div>
            </div>
            <div class="bg-gradient-to-r from-green-500 to-green-600 h-1.5"></div>
        </div>

        <!-- Revenue -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="px-6 py-5 flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-500">Total Revenue</p>
                    <h3 class="mt-2 text-3xl font-bold text-gray-900">${{ number_format($totalRevenue, 2) }}</h3>
                    <p class="mt-2 text-sm text-gray-500">
                        <i class="fas fa-calendar-alt mr-1"></i>
                        Last 30 days
                    </p>
                </div>
                <div class="bg-purple-100 p-3 rounded-lg">
                    <i class="fas fa-dollar-sign text-2xl text-purple-600"></i>
                </div>
            </div>
            <div class="bg-gradient-to-r from-purple-500 to-purple-600 h-1.5"></div>
        </div>
    </div>

    <!-- Recent Shipments & Quick Actions -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Recent Shipments -->
        <div class="lg:col-span-2 bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
                <h2 class="text-lg font-semibold text-gray-900">Recent Shipments</h2>
                <a href="{{ route('admin.shipments.index') }}" class="text-sm text-blue-600 hover:text-blue-800">
                    View all
                </a>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Tracking #
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Status
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider hidden md:table-cell">
                                Destination
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Date
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($recentShipments as $shipment)
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <a href="{{ route('admin.shipments.show', $shipment) }}" class="text-blue-600 hover:text-blue-900">
                                        {{ $shipment->tracking_number }}
                                    </a>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full 
                                        {{ $shipment->status === 'delivered' ? 'bg-green-100 text-green-800' : 
                                           ($shipment->status === 'in_transit' ? 'bg-yellow-100 text-yellow-800' : 
                                           'bg-gray-100 text-gray-800') }}">
                                        {{ ucfirst($shipment->status) }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 hidden md:table-cell">
                                    {{ Str::limit($shipment->destination, 30) }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ $shipment->created_at->format('M d, Y') }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="px-6 py-4 text-center text-sm text-gray-500">
                                    No recent shipments found
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Quick Actions & Recent Activity -->
        <div class="lg:col-span-1 space-y-6">
            <!-- Quick Actions -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100">
                    <h2 class="text-lg font-semibold text-gray-900">Quick Actions</h2>
                </div>
                <div class="p-6 space-y-4">
                    <a href="{{ route('admin.shipments.create') }}" 
                       class="flex items-center px-4 py-3 bg-blue-50 text-blue-700 rounded-lg hover:bg-blue-100 transition-colors">
                        <i class="fas fa-plus-circle w-6 text-center text-blue-600"></i>
                        <span class="ml-3">Create New Shipment</span>
                    </a>
                    
                    <a href="{{ route('admin.shipments.index') }}" 
                       class="flex items-center px-4 py-3 bg-gray-50 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors">
                        <i class="fas fa-search w-6 text-center text-gray-600"></i>
                        <span class="ml-3">Find Shipment</span>
                    </a>
                    
                    <a href="{{ route('admin.settings.general') }}" 
                       class="flex items-center px-4 py-3 bg-gray-50 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors">
                        <i class="fas fa-cog w-6 text-center text-gray-600"></i>
                        <span class="ml-3">Settings</span>
                    </a>
                </div>
            </div>

            <!-- Recent Activity -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100">
                    <h2 class="text-lg font-semibold text-gray-900">Recent Activity</h2>
                </div>
                <div class="p-6">
                    <div class="flow-root">
                        <ul class="-mb-8">
                            @forelse($recentActivity as $activity)
                                <li>
                                    <div class="relative pb-8">
                                        @if(!$loop->last)
                                            <span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
                                        @endif
                                        <div class="relative flex space-x-3">
                                            <div>
                                                <span class="h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white 
                                                    {{ $activity->type === 'created' ? 'bg-green-500' : 
                                                       ($activity->type === 'updated' ? 'bg-blue-500' : 'bg-gray-500') }}">
                                                    <i class="fas {{ $activity->type === 'created' ? 'fa-plus' : 'fa-edit' }} text-xs text-white"></i>
                                                </span>
                                            </div>
                                            <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
                                                <div>
                                                    <p class="text-sm text-gray-700">{{ $activity->description }}</p>
                                                </div>
                                                <div class="text-right text-xs whitespace-nowrap text-gray-500">
                                                    <time datetime="{{ $activity->created_at->toISOString() }}">{{ $activity->created_at->diffForHumans() }}</time>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            @empty
                                <li class="text-center text-sm text-gray-500 py-4">
                                    No recent activity
                                </li>
                            @endforelse
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection