@extends('layout.main')
@section('content')
    <div class="container grid px-6 mx-auto">
        <h2 class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
            Assets
        </h2>
        <div class="flex flex-col flex-wrap mb-8 md:flex-row md:items-center gap-4">
            @can('asset-create')
                <x-link route="{{ route('assets.create') }}" isButton class="bg-purple-600">Add New Asset</x-link>
            @endcan
        </div>
        <h4 class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300">
            Assets List
        </h4>
        <div class="w-full overflow-hidden rounded-lg shadow-xs p-2">
            <div class="w-full overflow-x-auto">
                <x-table.table datatable>
                    <x-table.head>
                        <th>Image</th>
                        <th>Name</th>
                        <th>Category</th>
                        <th>Location</th>
                        <th>Status</th>
                        <th>Assigned To</th>
                        <th>Initial Value  ({{getCurrencyCode()}})</th>
                        <th>Current Value  ({{getCurrencyCode()}})</th>
                        <th>Purchase Date</th>
                        <th>Action</th>
                    </x-table.head>
                    <x-table.body>
                        @foreach ($assets as $asset)
                            <x-table.row>
                                <x-table.cell>
                                    @if($asset->image)
                                        <img src="{{ asset('storage/' . $asset->image) }}" 
                                             alt="{{ $asset->name }}" 
                                             class="w-12 h-12 object-cover rounded-lg border border-gray-300 dark:border-gray-600">
                                    @else
                                        <div class="w-12 h-12 bg-gray-200 dark:bg-gray-600 rounded-lg flex items-center justify-center">
                                            <i class="fa fa-image text-gray-400"></i>
                                        </div>
                                    @endif
                                </x-table.cell>
                                <x-table.cell>
                                    @can('asset-show')
                                        <a href="{{ route('assets.show', $asset) }}"
                                            class="text-blue-600 dark:text-blue no-underline hover:underlined font-medium"
                                            title="{{ $asset?->description }}">{{ $asset->name }}</a>
                                    @else
                                        <span class="font-medium" title="{{ $asset?->description }}">{{ $asset->name }}</span>
                                    @endcan
                                </x-table.cell>
                                <x-table.cell>
                                    <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">
                                        {{ $asset->assetCategory?->name ?? 'N/A' }}
                                    </span>
                                </x-table.cell>
                                <x-table.cell>
                                    <span class="text-sm">{{ $asset->location }}</span>
                                </x-table.cell>
                                <x-table.cell>
                                    @php
                                        $statusColors = [
                                            'available' => 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100',
                                            'assigned' => 'bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100',
                                            'maintenance' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100',
                                            'retired' => 'bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100',
                                            'in-use' => 'bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-100'
                                        ];
                                    @endphp
                                    <span class="px-2 py-1 text-xs font-semibold rounded-full {{ $statusColors[$asset->status] ?? 'bg-gray-100 text-gray-800' }}">
                                        {{ ucfirst(str_replace('-', ' ', $asset->status)) }}
                                    </span>
                                </x-table.cell>
                                <x-table.cell>
                                    @if($asset->assignedUser)
                                        <span class="text-sm font-medium">{{ $asset->assignedUser->fullname }}</span>
                                    @else
                                        <span class="text-gray-400 text-sm">Unassigned</span>
                                    @endif
                                </x-table.cell>
                                <x-table.cell>
                                    <span class="text-sm font-medium">{{ formatAmount($asset->initial_value) }}</span>
                                </x-table.cell>
                                <x-table.cell>
                                    @if($asset->current_value)
                                        <span class="text-sm font-medium">{{ formatAmount($asset->current_value) }}</span>
                                    @else
                                        <span class="text-gray-400 text-sm">N/A</span>
                                    @endif
                                </x-table.cell>
                                <x-table.cell>
                                    <span class="text-sm">{{ $asset->purchase_date?->format('d/m/Y') ?? 'N/A' }}</span>
                                </x-table.cell>
                                <x-table.cell>
                                    <div class="flex items-center gap-2">
                                        @can('asset-show')
                                            <a href="{{ route('assets.show', $asset) }}"
                                                class="text-blue-600 dark:text-blue" title="View Asset">
                                                <i class="fa fa-eye"></i>
                                            </a>
                                        @endcan
                                        @can('asset-edit')
                                            <a href="{{ route('assets.edit', $asset) }}"
                                                class="text-green-600 dark:text-green" title="Edit Asset">
                                                <i class="fa fa-edit"></i>
                                            </a>
                                        @endcan
                                        @can('asset-delete')
                                            <x-delete-button route="{{ route('assets.destroy', $asset) }}" />
                                        @endcan
                                    </div>
                                </x-table.cell>
                            </x-table.row>
                        @endforeach
                    </x-table.body>
                </x-table.table>
            </div>
        </div>
    </div>
@endsection