@extends('layouts.app')

@section('content')
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-8">
            
            <!-- Hero / Welcome Section -->
            <div class="relative overflow-hidden rounded-2xl shadow-2xl p-8 md:p-12 group">
                <!-- Background Image with Overlay -->
                <div class="absolute inset-0 z-0">
                     <div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105" style="background-image: url('https://jfi.lk/images/gallery/Koswatta.JPG');"></div>
                     <div class="absolute inset-0 bg-gradient-to-r from-black/80 to-jfi-dark/60 mix-blend-multiply"></div>
                </div>
                
                <!-- Content -->
                <div class="relative z-10 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
                    <div>
                        <h1 class="text-4xl md:text-5xl font-bold text-white tracking-tight mb-2 drop-shadow-lg">
                            Welcome back, <br class="hidden md:block" />
                            <span class="text-jfi-gold">
                                {{ Auth::user()->name }}
                            </span>
                        </h1>
                    </div>
                    
                    <!-- Right Side Decoration / Action -->
                    <div class="hidden md:block">
                        <div class="p-4 bg-gradient-to-br from-blue-900/60 to-blue-600/60 backdrop-blur-md border border-white/10 rounded-xl flex items-center gap-4 shadow-2xl transition hover:scale-105">
                            <div class="bg-white/20 p-3 rounded-lg text-white shadow-lg backdrop-blur-sm">
                                <i class="fas fa-calendar-alt text-2xl"></i>
                            </div>
                            <div>
                                <p class="text-xs text-blue-200 uppercase tracking-wider font-bold">Today's Date</p>
                                <p class="text-white font-bold text-lg drop-shadow-md">{{ date('F d, Y') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Stats & Quick Actions Grid -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                <!-- Stat Card: Imports -->
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6 border-l-4 border-jfi-gold flex items-center justify-between transition hover:shadow-md">
                    <div>
                        <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">Total Imports</p>
                        <p class="text-3xl font-bold text-gray-900 mt-1">{{ $totalImports }}</p>
                    </div>
                    <div class="p-3 bg-yellow-50 rounded-full text-jfi-gold">
                        <i class="fas fa-arrow-down text-xl"></i>
                    </div>
                </div>

                <!-- Stat Card: Exports -->
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6 border-l-4 border-blue-500 flex items-center justify-between transition hover:shadow-md">
                    <div>
                        <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">Total Exports</p>
                        <p class="text-3xl font-bold text-gray-900 mt-1">{{ $totalExports }}</p>
                    </div>
                    <div class="p-3 bg-blue-50 rounded-full text-blue-500">
                        <i class="fas fa-arrow-up text-xl"></i>
                    </div>
                </div>

                <!-- Quick Action: New Import -->
                <a href="{{ route('import_requests.create') }}" class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6 flex flex-col items-center justify-center text-center group hover:bg-gray-800 hover:text-white transition duration-300 cursor-pointer border-t-4 border-gray-100 hover:border-gray-800">
                    <div class="p-4 bg-gray-100 rounded-full text-jfi-dark mb-3 group-hover:bg-white group-hover:text-gray-800 transition">
                        <i class="fas fa-plus text-xl"></i>
                    </div>
                    <span class="font-bold">New Import Request</span>
                </a>

                <!-- Quick Action: New Export -->
                <a href="{{ route('export_requests.create') }}" class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6 flex flex-col items-center justify-center text-center group hover:bg-gray-800 hover:text-white transition duration-300 cursor-pointer border-t-4 border-gray-100 hover:border-gray-800">
                    <div class="p-4 bg-gray-100 rounded-full text-gray-800 mb-3 group-hover:bg-white group-hover:text-gray-800 transition">
                        <i class="fas fa-paper-plane text-xl"></i>
                    </div>
                    <span class="font-bold">New Export Request</span>
                </a>
            </div>

            <!-- Recent Activity Section -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                
                <!-- Recent Imports -->
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 border-b border-gray-100 flex justify-between items-center">
                        <h3 class="font-bold text-lg text-gray-800"><i class="fas fa-history mr-2 text-jfi-gold"></i>Recent Imports</h3>
                        <a href="{{ route('import_requests.index') }}" class="text-sm text-jfi-gold hover:underline">View All</a>
                    </div>
                    <div class="p-6">
                        @if($recentImports->count() > 0)
                            <div class="overflow-x-auto">
                                <table class="w-full text-sm text-left">
                                    <thead class="text-xs text-gray-700 uppercase bg-gray-50">
                                        <tr>
                                            <th class="px-4 py-2">ID</th>
                                            <th class="px-4 py-2">Date</th>
                                            <th class="px-4 py-2">Receiver</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($recentImports as $import)
                                            <tr class="bg-white border-b hover:bg-gray-50">
                                                <td class="px-4 py-2 font-medium">
                                                    <a href="{{ route('import_requests.show', $import->id) }}" class="text-blue-600 hover:text-blue-900 hover:underline">#{{ $import->id }}</a>
                                                </td>
                                                <td class="px-4 py-2 text-gray-500">{{ $import->created_at->format('M d, Y') }}</td>
                                                <td class="px-4 py-2 truncate max-w-[150px]">{{ $import->receiver->name ?? 'N/A' }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <p class="text-gray-500 text-center py-4">No recent import requests.</p>
                        @endif
                    </div>
                </div>

                <!-- Recent Exports -->
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 border-b border-gray-100 flex justify-between items-center">
                        <h3 class="font-bold text-lg text-gray-800"><i class="fas fa-shipping-fast mr-2 text-blue-500"></i>Recent Exports</h3>
                        <a href="{{ route('export_requests.index') }}" class="text-sm text-blue-500 hover:underline">View All</a>
                    </div>
                    <div class="p-6">
                        @if($recentExports->count() > 0)
                            <div class="overflow-x-auto">
                                <table class="w-full text-sm text-left">
                                    <thead class="text-xs text-gray-700 uppercase bg-gray-50">
                                        <tr>
                                            <th class="px-4 py-2">ID</th>
                                            <th class="px-4 py-2">Date</th>
                                            <th class="px-4 py-2">Receiver</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($recentExports as $export)
                                            <tr class="bg-white border-b hover:bg-gray-50">
                                                <td class="px-4 py-2 font-medium">
                                                    <a href="{{ route('export_requests.show', $export->id) }}" class="text-blue-600 hover:text-blue-900 hover:underline">#{{ $export->id }}</a>
                                                </td>
                                                <td class="px-4 py-2 text-gray-500">{{ $export->created_at->format('M d, Y') }}</td>
                                                <td class="px-4 py-2 truncate max-w-[150px]">{{ $export->receiver->contact_name ?? $export->receiver->company_name ?? 'N/A' }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <p class="text-gray-500 text-center py-4">No recent export requests.</p>
                        @endif
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection