@extends('simaju.layouts.main')
@section('title', 'Detail Aset')
@section('page-title', 'Detail Aset')
@section('page-subtitle', 'Informasi lengkap aset')

@section('content')
<div class="max-w-4xl">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 mb-6">
        <div class="p-6 border-b border-gray-100 flex items-center justify-between">
            <h2 class="text-xl font-heading font-bold text-gray-800">Detail Aset</h2>
            <div class="flex gap-2">
                <a href="{{ route('simaju.aset.edit', $aset) }}" class="px-4 py-2 bg-amber-500 text-white rounded-lg hover:bg-amber-600 transition-colors">
                    <i class="fas fa-edit mr-2"></i>Edit
                </a>
                <a href="{{ route('simaju.aset.index') }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>Kembali
                </a>
            </div>
        </div>

        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Foto Aset -->
                <div class="md:col-span-1">
                    @if($aset->foto)
                        <img src="{{ asset('storage/' . $aset->foto) }}" alt="{{ $aset->nama_aset }}" class="w-full h-64 object-cover rounded-lg border border-gray-200">
                    @else
                        <div class="w-full h-64 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg flex items-center justify-center border border-gray-200">
                            <i class="fas fa-box text-6xl text-gray-400"></i>
                        </div>
                    @endif
                </div>

                <!-- Informasi Aset -->
                <div class="md:col-span-2 space-y-4">
                    <div>
                        <label class="text-sm font-medium text-gray-500">Kode Aset</label>
                        <p class="text-lg font-mono font-semibold text-gray-900">{{ $aset->kode_aset }}</p>
                    </div>

                    <div>
                        <label class="text-sm font-medium text-gray-500">Nama Aset</label>
                        <p class="text-lg font-semibold text-gray-900">{{ $aset->nama_aset }}</p>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="text-sm font-medium text-gray-500">Kategori</label>
                            <p class="mt-1">
                                <span class="px-3 py-1 text-sm font-medium rounded-full bg-blue-100 text-blue-800">
                                    {{ $aset->kategori_label }}
                                </span>
                            </p>
                        </div>

                        <div>
                            <label class="text-sm font-medium text-gray-500">Status</label>
                            <p class="mt-1">
                                @php
                                    $statusBadge = [
                                        'aktif' => 'bg-green-100 text-green-800',
                                        'nonaktif' => 'bg-gray-100 text-gray-800',
                                        'dalam_perbaikan' => 'bg-orange-100 text-orange-800',
                                        'dijual' => 'bg-red-100 text-red-800',
                                    ];
                                @endphp
                                <span class="px-3 py-1 text-sm font-medium rounded-full {{ $statusBadge[$aset->status] ?? 'bg-gray-100 text-gray-800' }}">
                                    {{ $aset->status_label }}
                                </span>
                            </p>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="text-sm font-medium text-gray-500">Kondisi</label>
                            <p class="mt-1">
                                @php
                                    $kondisiBadge = [
                                        'baik' => 'bg-green-100 text-green-800',
                                        'rusak_ringan' => 'bg-yellow-100 text-yellow-800',
                                        'rusak_berat' => 'bg-orange-100 text-orange-800',
                                        'hilang' => 'bg-red-100 text-red-800',
                                    ];
                                @endphp
                                <span class="px-3 py-1 text-sm font-medium rounded-full {{ $kondisiBadge[$aset->kondisi] ?? 'bg-gray-100 text-gray-800' }}">
                                    {{ $aset->kondisi_label }}
                                </span>
                            </p>
                        </div>

                        <div>
                            <label class="text-sm font-medium text-gray-500">Nilai Perolehan</label>
                            <p class="text-lg font-semibold text-gray-900">Rp {{ number_format($aset->nilai_perolehan, 0, ',', '.') }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Detail Informasi -->
            <div class="mt-6 pt-6 border-t border-gray-100">
                <h3 class="text-lg font-heading font-semibold text-gray-800 mb-4">Informasi Detail</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="text-sm font-medium text-gray-500">Tanggal Perolehan</label>
                        <p class="text-gray-900 mt-1">{{ $aset->tanggal_perolehan->format('d F Y') }}</p>
                    </div>

                    <div>
                        <label class="text-sm font-medium text-gray-500">Lokasi</label>
                        <p class="text-gray-900 mt-1">{{ $aset->lokasi ?? '-' }}</p>
                    </div>

                    <div>
                        <label class="text-sm font-medium text-gray-500">Penanggung Jawab</label>
                        <p class="text-gray-900 mt-1">{{ $aset->penanggung_jawab ?? '-' }}</p>
                    </div>

                    <div>
                        <label class="text-sm font-medium text-gray-500">Ditambahkan Pada</label>
                        <p class="text-gray-900 mt-1">{{ $aset->created_at->format('d F Y, H:i') }}</p>
                    </div>

                    @if($aset->deskripsi)
                    <div class="md:col-span-2">
                        <label class="text-sm font-medium text-gray-500">Deskripsi</label>
                        <p class="text-gray-900 mt-1 whitespace-pre-line">{{ $aset->deskripsi }}</p>
                    </div>
                    @endif

                    @if($aset->keterangan)
                    <div class="md:col-span-2">
                        <label class="text-sm font-medium text-gray-500">Keterangan</label>
                        <p class="text-gray-900 mt-1 whitespace-pre-line">{{ $aset->keterangan }}</p>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Riwayat -->
            <div class="mt-6 pt-6 border-t border-gray-100">
                <h3 class="text-lg font-heading font-semibold text-gray-800 mb-4">Riwayat</h3>
                
                <div class="bg-gray-50 rounded-lg p-4">
                    <div class="flex items-start gap-3">
                        <div class="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
                        <div class="flex-1">
                            <p class="text-sm font-medium text-gray-900">Aset Ditambahkan</p>
                            <p class="text-xs text-gray-500">{{ $aset->created_at->format('d F Y, H:i') }}</p>
                        </div>
                    </div>
                    
                    @if($aset->updated_at != $aset->created_at)
                    <div class="flex items-start gap-3 mt-3">
                        <div class="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
                        <div class="flex-1">
                            <p class="text-sm font-medium text-gray-900">Terakhir Diperbarui</p>
                            <p class="text-xs text-gray-500">{{ $aset->updated_at->format('d F Y, H:i') }}</p>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection