@extends('layouts.app')

@section('page-title', 'Dashboard')

@section('header-actions')
    <!-- Date Filter -->
    <form action="{{ route('dashboard') }}" method="GET" class="flex items-center gap-2">
        <div class="hidden md:flex items-center gap-2">
            <input type="date" name="start_date" value="{{ $startDate }}" 
                class="text-sm border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 h-9">
            <span class="text-gray-500 text-sm">to</span>
            <input type="date" name="end_date" value="{{ $endDate }}" 
                class="text-sm border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 h-9">
            <button type="submit" class="px-3 py-1.5 bg-indigo-600 text-white text-sm rounded-md hover:bg-indigo-700 transition h-9">
                Filter
            </button>
        </div>
        
        <!-- Mobile Filter Button -->
        <div x-data="{ open: false }" class="md:hidden relative">
            <button @click="open = !open" type="button" class="p-2 text-gray-600 hover:text-indigo-600">
                <i class="fas fa-calendar-alt text-xl"></i>
            </button>
            
            <div x-show="open" @click.away="open = false" class="absolute right-0 mt-2 w-72 bg-white rounded-lg shadow-xl border border-gray-100 p-4 z-50">
                <div class="space-y-3">
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Start Date</label>
                        <input type="date" name="start_date" value="{{ $startDate }}" 
                            class="w-full text-sm border-gray-300 rounded-md">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">End Date</label>
                        <input type="date" name="end_date" value="{{ $endDate }}" 
                            class="w-full text-sm border-gray-300 rounded-md">
                    </div>
                    <button type="submit" class="w-full py-2 bg-indigo-600 text-white text-sm rounded-md hover:bg-indigo-700">
                        Apply Filter
                    </button>
                </div>
            </div>
        </div>
    </form>
@endsection

@section('content')
    <div> <!-- Removed manual padding as layout handles it -->
        <!-- Key Metrics Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mb-8">
            <!-- Total Bookings -->
            <div class="bg-white overflow-hidden shadow-sm rounded-lg p-4 md:p-6 border-l-4 border-blue-500 card-hover">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-blue-100 text-blue-500 mr-4">
                        <i class="fas fa-box fa-lg"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 font-medium">Total Bookings</p>
                        <p class="text-xl md:text-2xl font-bold text-gray-800">{{ number_format($totalBookings) }}</p>
                    </div>
                </div>
            </div>

            <!-- Total Income -->
            <div class="bg-white overflow-hidden shadow-sm rounded-lg p-4 md:p-6 border-l-4 border-green-500 card-hover">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-green-100 text-green-500 mr-4">
                        <i class="fas fa-money-bill-wave fa-lg"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 font-medium">Total Revenue</p>
                        <p class="text-xl md:text-2xl font-bold text-gray-800">Rs. {{ number_format($totalIncome) }}</p>
                    </div>
                </div>
            </div>

            <!-- Total Due -->
            <div class="bg-white overflow-hidden shadow-sm rounded-lg p-4 md:p-6 border-l-4 border-red-500 card-hover">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-red-100 text-red-500 mr-4">
                        <i class="fas fa-exclamation-circle fa-lg"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 font-medium">Outstanding Due</p>
                        <p class="text-xl md:text-2xl font-bold text-gray-800">Rs. {{ number_format($totalDue) }}</p>
                    </div>
                </div>
            </div>

            <!-- Total Weight -->
            <div class="bg-white overflow-hidden shadow-sm rounded-lg p-4 md:p-6 border-l-4 border-purple-500 card-hover">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-purple-100 text-purple-500 mr-4">
                        <i class="fas fa-weight-hanging fa-lg"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 font-medium">Total Weight</p>
                        <p class="text-xl md:text-2xl font-bold text-gray-800">{{ number_format($totalWeight, 2) }} <span class="text-sm font-normal text-gray-500">kg</span></p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Status & Volume Section -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
            <!-- Status Breakdown -->
            <div class="bg-white overflow-hidden shadow-sm rounded-lg p-6 lg:col-span-1">
                <h3 class="text-lg font-semibold text-gray-800 mb-4 border-b pb-2">Shipment Status</h3>
                <div class="space-y-4">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <span class="w-3 h-3 rounded-full bg-yellow-400 mr-2"></span>
                            <span class="text-gray-600">Pending</span>
                        </div>
                        <span class="font-semibold bg-yellow-100 text-yellow-800 py-1 px-3 rounded-full text-xs">{{ $pendingShipments }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <span class="w-3 h-3 rounded-full bg-blue-400 mr-2"></span>
                            <span class="text-gray-600">In Transit</span>
                        </div>
                        <span class="font-semibold bg-blue-100 text-blue-800 py-1 px-3 rounded-full text-xs">{{ $inTransitShipments }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <span class="w-3 h-3 rounded-full bg-green-400 mr-2"></span>
                            <span class="text-gray-600">Delivered</span>
                        </div>
                        <span class="font-semibold bg-green-100 text-green-800 py-1 px-3 rounded-full text-xs">{{ $deliveredShipments }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <span class="w-3 h-3 rounded-full bg-red-400 mr-2"></span>
                            <span class="text-gray-600">Damaged</span>
                        </div>
                        <span class="font-semibold bg-red-100 text-red-800 py-1 px-3 rounded-full text-xs">{{ $damagedShipments }}</span>
                    </div>
                </div>
            </div>

            <!-- Recent Bookings -->
            <div class="bg-white overflow-hidden shadow-sm rounded-lg p-6 lg:col-span-2">
                <div class="flex justify-between items-center mb-4 border-b pb-2">
                    <h3 class="text-lg font-semibold text-gray-800">Recent Bookings</h3>
                    <a href="{{ route('bookings.index') }}" class="text-sm text-indigo-600 hover:text-indigo-800">View All</a>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead>
                            <tr>
                                <th class="px-3 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CNTR</th>
                                <th class="px-3 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
                                <th class="px-3 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                <th class="px-3 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                <th class="px-3 py-3 bg-gray-50 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @forelse($recentBookings as $booking)
                            <tr>
                                <td class="px-3 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
                                    {{ $booking->cntr_no }}
                                </td>
                                <td class="px-3 py-3 whitespace-nowrap text-sm text-gray-500">
                                    {{ $booking->customer->name ?? 'N/A' }}
                                </td>
                                <td class="px-3 py-3 whitespace-nowrap text-sm text-gray-500">
                                    {{ $booking->booking_date->format('M d') }}
                                </td>
                                <td class="px-3 py-3 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                        {{ $booking->status === 'Delivered' ? 'bg-green-100 text-green-800' : 
                                           ($booking->status === 'Pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-blue-100 text-blue-800') }}">
                                        {{ $booking->status }}
                                    </span>
                                </td>
                                <td class="px-3 py-3 whitespace-nowrap text-sm text-right font-medium">
                                    {{ number_format($booking->total_amount) }}
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="px-3 py-4 text-center text-sm text-gray-500">
                                    No recent bookings found.
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection