@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="px-4 py-6 sm:px-0">
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">Dashboard</h1>
        <p class="text-gray-600">Welcome to your invoice management system</p>
    </div>

    <!-- Quick Access Cards -->
    <div class="mb-8">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">Quick Access</h2>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
            <!-- Invoices -->
            <a href="{{ route('invoices.index') }}" class="dashboard-link">
                <div class="bg-gradient-to-br from-indigo-500 to-indigo-600 p-4 rounded-lg text-center">
                    <i class="fas fa-file-invoice text-white text-2xl mb-2"></i>
                    <p class="font-semibold text-white">Invoices</p>
                    <p class="text-sm text-indigo-100">{{ $stats['total_invoices'] }} total</p>
                </div>
            </a>

            <!-- Quotations -->
            <a href="{{ route('quotations.index') }}" class="dashboard-link">
                <div class="bg-gradient-to-br from-purple-500 to-purple-600 p-4 rounded-lg text-center">
                    <i class="fas fa-file-contract text-white text-2xl mb-2"></i>
                    <p class="font-semibold text-white">Quotations</p>
                    <p class="text-sm text-purple-100">{{ $stats['total_quotations'] }} total</p>
                </div>
            </a>

            <!-- Clients -->
            <a href="{{ route('clients.index') }}" class="dashboard-link">
                <div class="bg-gradient-to-br from-blue-500 to-blue-600 p-4 rounded-lg text-center">
                    <i class="fas fa-users text-white text-2xl mb-2"></i>
                    <p class="font-semibold text-white">Clients</p>
                    <p class="text-sm text-blue-100">{{ $stats['total_clients'] }} total</p>
                </div>
            </a>

            <!-- Companies -->
            <a href="{{ route('companies.index') }}" class="dashboard-link">
                <div class="bg-gradient-to-br from-yellow-500 to-yellow-600 p-4 rounded-lg text-center">
                    <i class="fas fa-building text-white text-2xl mb-2"></i>
                    <p class="font-semibold text-white">Companies</p>
                    <p class="text-sm text-yellow-100">{{ $stats['total_companies'] }} total</p>
                </div>
            </a>

            <!-- Suppliers -->
            <a href="{{ route('suppliers.index') }}" class="dashboard-link">
                <div class="bg-gradient-to-br from-orange-500 to-orange-600 p-4 rounded-lg text-center">
                    <i class="fas fa-truck text-white text-2xl mb-2"></i>
                    <p class="font-semibold text-white">Suppliers</p>
                    <p class="text-sm text-orange-100">{{ $stats['total_suppliers'] }} total</p>
                </div>
            </a>

            <!-- Price Records -->
            <a href="{{ route('price-records.index') }}" class="dashboard-link">
                <div class="bg-gradient-to-br from-teal-500 to-teal-600 p-4 rounded-lg text-center">
                    <i class="fas fa-tag text-white text-2xl mb-2"></i>
                    <p class="font-semibold text-white">Price Records</p>
                    <p class="text-sm text-teal-100">{{ $stats['total_price_records'] }} total</p>
                </div>
            </a>
        </div>
    </div>

    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <!-- Total Invoices -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
                        <i class="fas fa-file-invoice text-white text-xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Invoices</dt>
                            <dd class="text-lg font-medium text-gray-900">{{ $stats['total_invoices'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- Paid Invoices -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
                        <i class="fas fa-check-circle text-white text-xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Paid Invoices</dt>
                            <dd class="text-lg font-medium text-gray-900">{{ $stats['paid_invoices'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- Total Quotations -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
                        <i class="fas fa-file-contract text-white text-xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Quotations</dt>
                            <dd class="text-lg font-medium text-gray-900">{{ $stats['total_quotations'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- Approved Quotations -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
                        <i class="fas fa-check-circle text-white text-xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Approved Quotations</dt>
                            <dd class="text-lg font-medium text-gray-900">{{ $stats['approved_quotations'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- Total Clients -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
                        <i class="fas fa-users text-white text-xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Clients</dt>
                            <dd class="text-lg font-medium text-gray-900">{{ $stats['total_clients'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- Total Companies -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
                        <i class="fas fa-building text-white text-xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Companies</dt>
                            <dd class="text-lg font-medium text-gray-900">{{ $stats['total_companies'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- Total Suppliers -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-orange-500 rounded-md p-3">
                        <i class="fas fa-truck text-white text-xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Suppliers</dt>
                            <dd class="text-lg font-medium text-gray-900">{{ $stats['total_suppliers'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- Active Price Records -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-teal-500 rounded-md p-3">
                        <i class="fas fa-tag text-white text-xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Active Price Records</dt>
                            <dd class="text-lg font-medium text-gray-900">{{ $stats['active_price_records'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Items Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Recent Invoices -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                <h3 class="text-lg leading-6 font-medium text-gray-900">Recent Invoices</h3>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Invoice #</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($recentInvoices as $invoice)
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <a href="{{ route('invoices.show', $invoice) }}" class="text-indigo-600 hover:text-indigo-900 font-medium">
                                    {{ $invoice->invoice_number }}
                                </a>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">{{ $invoice->client->company_name }}</td>
                            <td class="px-6 py-4 whitespace-nowrap">{{ $invoice->invoice_date->format('M d, Y') }}</td>
                            <td class="px-6 py-4 whitespace-nowrap">${{ number_format($invoice->grand_total, 2) }}</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
                                    {{ $invoice->status === 'paid' ? 'bg-green-100 text-green-800' :
                                       ($invoice->status === 'sent' ? 'bg-blue-100 text-blue-800' :
                                       ($invoice->status === 'overdue' ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800')) }}">
                                    {{ ucfirst($invoice->status) }}
                                </span>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="px-6 py-4 text-center text-gray-500">No invoices found</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
                <a href="{{ route('invoices.index') }}" class="text-indigo-600 hover:text-indigo-900 font-medium">View all invoices</a>
            </div>
        </div>

        <!-- Recent Quotations -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                <h3 class="text-lg leading-6 font-medium text-gray-900">Recent Quotations</h3>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quotation #</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Valid Until</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($recentQuotations as $quotation)
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <a href="{{ route('quotations.show', $quotation) }}" class="text-indigo-600 hover:text-indigo-900 font-medium">
                                    {{ $quotation->quotation_number }}
                                </a>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">{{ $quotation->client->company_name }}</td>
                            <td class="px-6 py-4 whitespace-nowrap">{{ $quotation->quotation_date->format('M d, Y') }}</td>
                            <td class="px-6 py-4 whitespace-nowrap {{ $quotation->is_expired ? 'text-red-600' : '' }}">
                                {{ $quotation->valid_until_date->format('M d, Y') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">${{ number_format($quotation->grand_total, 2) }}</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
                                    {{ $quotation->status === 'approved' ? 'bg-green-100 text-green-800' :
                                       ($quotation->status === 'sent' ? 'bg-blue-100 text-blue-800' :
                                       ($quotation->status === 'rejected' ? 'bg-red-100 text-red-800' :
                                       ($quotation->status === 'converted_to_invoice' ? 'bg-purple-100 text-purple-800' :
                                       ($quotation->status === 'revised' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800')))) }}">
                                    {{ ucfirst(str_replace('_', ' ', $quotation->status)) }}
                                </span>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="px-6 py-4 text-center text-gray-500">No quotations found</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
                <a href="{{ route('quotations.index') }}" class="text-indigo-600 hover:text-indigo-900 font-medium">View all quotations</a>
            </div>
        </div>

        <!-- Recent Supplier Prices -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                <h3 class="text-lg leading-6 font-medium text-gray-900">Recent Supplier Prices</h3>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Supplier</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Item Type</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Unit Price</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quoted</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($recentSupplierPrices as $record)
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <a href="{{ route('suppliers.show', $record->supplier) }}" class="text-indigo-600 hover:text-indigo-900 font-medium">
                                    {{ $record->supplier->codename }}
                                </a>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="font-medium">{{ $record->item_type }}</div>
                                <div class="text-sm text-gray-500 truncate max-w-xs">{{ $record->short_description }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="font-semibold">{{ $record->unit_price_formatted }}</span>
                                <div class="text-sm text-gray-500">per {{ $record->uom }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-gray-500">
                                {{ $record->quoted_at->format('M d, Y') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
                                    {{ $record->is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                                    {{ $record->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="px-6 py-4 text-center text-gray-500">No supplier price records found</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
                <a href="{{ route('suppliers.index') }}" class="text-indigo-600 hover:text-indigo-900 font-medium">View all suppliers</a>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
        <a href="{{ route('invoices.create') }}" class="bg-indigo-600 text-white p-4 rounded-lg text-center hover:bg-indigo-700 transition-colors">
            <i class="fas fa-plus-circle text-2xl mb-2"></i>
            <p class="font-semibold">New Invoice</p>
        </a>
        <a href="{{ route('quotations.create') }}" class="bg-purple-600 text-white p-4 rounded-lg text-center hover:bg-purple-700 transition-colors">
            <i class="fas fa-file-contract text-2xl mb-2"></i>
            <p class="font-semibold">New Quotation</p>
        </a>
        <a href="{{ route('clients.create') }}" class="bg-blue-600 text-white p-4 rounded-lg text-center hover:bg-blue-700 transition-colors">
            <i class="fas fa-user-plus text-2xl mb-2"></i>
            <p class="font-semibold">Add Client</p>
        </a>
        <a href="{{ route('companies.create') }}" class="bg-green-600 text-white p-4 rounded-lg text-center hover:bg-green-700 transition-colors">
            <i class="fas fa-building text-2xl mb-2"></i>
            <p class="font-semibold">Add Company</p>
        </a>
        <a href="{{ route('suppliers.create') }}" class="bg-orange-600 text-white p-4 rounded-lg text-center hover:bg-orange-700 transition-colors">
            <i class="fas fa-truck text-2xl mb-2"></i>
            <p class="font-semibold">Add Supplier</p>
        </a>
    </div>
</div>

<style>
    .dashboard-link {
        transition: all 0.3s ease;
    }

    .dashboard-link:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    .dashboard-link div {
        min-height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
</style>
@endsection