@extends('layouts.admin')

@section('title', 'Admin Dashboard')

@section('content')
<!-- Header -->
<div>
    <h1 class="text-3xl font-bold text-gray-900">Dashboard</h1>
    <p class="text-gray-600 mt-1">Welcome back! Here's what's happening with your logistics today.</p>
</div>

@php
    // Fetch the latest GBP → NGN rate
    $gbpToNgnRate = \App\Models\CurrencyRate::latest()->value('gbp_to_ngn') ?? 1000;
@endphp

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">

    {{-- Total Customers --}}
    <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200 flex items-center gap-4">
        <div class="p-3 bg-blue-100 text-blue-600 rounded-full">
            <!-- Users Icon -->
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                    d="M17 20h5v-2a4 4 0 00-3-3.87M9 20H4v-2a4 4 0 013-3.87M12 12a5 5 0 100-10 5 5 0 000 10z" />
            </svg>
        </div>
        <div>
            <div class="text-sm text-gray-500">Total Customers</div>
            <div class="text-2xl font-bold text-gray-900">{{ $totalCustomers }}</div>
            <div class="text-xs text-green-600 mt-1">+12% this month</div>
        </div>
    </div>

    {{-- Premium Customers --}}
    <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200 flex items-center gap-4">
        <div class="p-3 bg-amber-100 text-amber-600 rounded-full">
            <!-- Star Icon -->
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" stroke="none">
                <path d="M12 17.27L18.18 21 16.54 13.97 22 9.24 14.81 8.63 12 2 9.19 8.63 2 9.24 7.46 13.97 5.82 21z"/>
            </svg>
        </div>
        <div>
            <div class="text-sm text-gray-500">Premium Customers</div>
            <div class="text-2xl font-bold text-gray-900">{{ $premiumCustomers }}</div>
            <div class="text-xs text-green-600 mt-1">+8% this month</div>
        </div>
    </div>

    {{-- Total Shipments --}}
    <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200 flex items-center gap-4">
        <div class="p-3 bg-purple-100 text-purple-600 rounded-full">
            <!-- Box Icon -->
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                    d="M20 13V5a2 2 0 00-2-2H6a2 2 0 00-2 2v8m16 0l-8 5-8-5M12 18v4" />
            </svg>
        </div>
        <div>
            <div class="text-sm text-gray-500">Total Shipments</div>
            <div class="text-2xl font-bold text-gray-900">{{ $totalShipments }}</div>
            <div class="text-xs text-green-600 mt-1">+18% this month</div>
        </div>
    </div>

   {{-- Total Revenue with Currency Switch --}}
<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200 flex flex-col gap-4">
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
            <div class="p-3 bg-green-100 text-green-600 rounded-full">
                <!-- Currency Icon -->
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                        d="M12 8c-3 0-4 1-4 4s1 4 4 4m0-8v8m0-8H8m4 0h4m0 0h-4" />
                </svg>
            </div>
            <span class="text-sm text-gray-500">Total Revenue</span>
        </div>

        {{-- Currency Selector --}}
        <select id="revenueCurrency" class="border rounded px-2 py-1 text-sm">
            <option value="GBP" selected>GBP</option>
            <option value="NGN">NGN</option>
        </select>
    </div>

    <div id="revenueAmount" class="text-2xl font-bold text-gray-900">
        £{{ number_format($totalRevenue, 2) }}
    </div>
    <div class="text-xs text-green-600 mt-1">+22% this month</div>
</div>

{{-- Currency Toggle Script --}}
<script>
    const revenueSelect = document.getElementById('revenueCurrency');
    const revenueAmount = document.getElementById('revenueAmount');
    const totalRevenueGBP = @json($totalRevenue); // stored in GBP
    const gbpToNgnRate = @json($gbpToNgnRate);   // latest conversion rate

    revenueSelect.addEventListener('change', function () {
        if (this.value === 'NGN') {
            const ngn = (totalRevenueGBP * gbpToNgnRate).toFixed(2);
            revenueAmount.textContent = '₦' + Number(ngn).toLocaleString();
        } else {
            revenueAmount.textContent = '£' + Number(totalRevenueGBP).toLocaleString();
        }
    });
</script>


</div>



<!-- Quick Actions -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
    <h2 class="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h2>
    <div class="flex flex-wrap gap-3">
        <a href="{{route('admin.customers.create')}}"
            class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">Add Customer</a>
        <a href="{{ route('admin.shipments.create') }}"
            class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">Add Shipment</a>
        <a href="#" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">Activate
            Premium</a>
        <a href="#" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition">View
            Renewals</a>
        <a href="#" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition">Premium
            Reports</a>
    </div>
</div>

<!-- Recent Shipments Table -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
    <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
        <h2 class="text-lg font-semibold text-gray-900">Recent Shipments</h2>
        <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-700">View All →</a>
    </div>

    <!-- Responsive table wrapper -->
    <div class="overflow-x-auto">
        <table class="min-w-full table-auto text-left border-collapse">
            <thead class="bg-gray-50 border-b border-gray-200">
                <tr>
                    <th class="px-2 py-2 text-xs font-semibold text-gray-600 uppercase">Tracking</th>
                    <th class="px-2 py-2 text-xs font-semibold text-gray-600 uppercase hidden md:table-cell">Customer
                    </th>
                    <th class="px-2 py-2 text-xs font-semibold text-gray-600 uppercase hidden sm:table-cell">Weight</th>
                    <th class="px-2 py-2 text-xs font-semibold text-gray-600 uppercase">Price</th>
                    <th class="px-2 py-2 text-xs font-semibold text-gray-600 uppercase">Payment</th>
                    <th class="px-2 py-2 text-xs font-semibold text-gray-600 uppercase">Status</th>
                    <th class="px-2 py-2 text-xs font-semibold text-gray-600 uppercase hidden lg:table-cell">Date</th>
                    <th class="px-2 py-2 text-xs font-semibold text-gray-600 uppercase">Actions</th>
                </tr>
            </thead>

            <tbody class="divide-y divide-gray-200">
                @foreach($recentShipments as $shipment)
                <tr class="hover:bg-gray-50 transition-colors text-sm">
                    <td class="px-2 py-2">{{ $shipment->tracking_number }}</td>

                    <td class="px-2 py-2 hidden md:table-cell">{{ $shipment->customer_name }}</td>

                    <td class="px-2 py-2 hidden sm:table-cell">{{ $shipment->weight }} kg</td>

                    <td class="px-2 py-2">₦{{ number_format($shipment->price) }}</td>

                    {{-- Payment Status --}}
                    <td class="px-2 py-2">
                        <span class="px-2 py-1 rounded-full text-xs font-semibold {{ $shipment->paymentColor }}">
                            {{ ucfirst($shipment->payment_status) }}
                        </span>
                    </td>



                    {{-- Shipment Status --}}
                    <td class="px-2 py-2">
                        <span
                            class="inline-flex px-2 py-1 rounded-full text-xs font-medium {{ $shipment->statusColor }}">
                            {{ $shipment->status }}
                        </span>
                    </td>

                    <td class="px-2 py-2 hidden lg:table-cell">{{ $shipment->created_at->format('Y-m-d') }}</td>

                    <td class="px-2 py-2">
                        <a href="{{ route('admin.shipments.show', $shipment->id) }}" class="text-blue-600">View</a>
                    </td>
                </tr>
                @endforeach
            </tbody>

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



@endsection