@extends('simaju.layouts.main')
@section('title', 'Manajemen Aset')
@section('page-title', 'Manajemen Aset')
@section('page-subtitle', 'Kelola aset sekolah')

@section('content')
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
    <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-lg p-6 text-white transform hover:scale-105 transition-all duration-300">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-blue-100 text-sm font-medium">Total Aset</p>
                <h3 class="text-3xl font-bold mt-2">{{ $asets->total() }}</h3>
            </div>
            <div class="bg-white bg-opacity-20 rounded-full p-4">
                <i class="fas fa-boxes text-2xl"></i>
            </div>
        </div>
    </div>

    <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl shadow-lg p-6 text-white transform hover:scale-105 transition-all duration-300">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-green-100 text-sm font-medium">Kondisi Baik</p>
                <h3 class="text-3xl font-bold mt-2">{{ \App\Models\Aset::where('kondisi', 'baik')->count() }}</h3>
            </div>
            <div class="bg-white bg-opacity-20 rounded-full p-4">
                <i class="fas fa-check-circle text-2xl"></i>
            </div>
        </div>
    </div>

    <div class="bg-gradient-to-br from-amber-500 to-amber-600 rounded-xl shadow-lg p-6 text-white transform hover:scale-105 transition-all duration-300">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-amber-100 text-sm font-medium">Perlu Perbaikan</p>
                <h3 class="text-3xl font-bold mt-2">{{ \App\Models\Aset::whereIn('kondisi', ['rusak_ringan', 'rusak_berat'])->count() }}</h3>
            </div>
            <div class="bg-white bg-opacity-20 rounded-full p-4">
                <i class="fas fa-tools text-2xl"></i>
            </div>
        </div>
    </div>

    <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl shadow-lg p-6 text-white transform hover:scale-105 transition-all duration-300">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-purple-100 text-sm font-medium">Total Nilai</p>
                <h3 class="text-2xl font-bold mt-2">Rp {{ number_format(\App\Models\Aset::sum('nilai_perolehan'), 0, ',', '.') }}</h3>
            </div>
            <div class="bg-white bg-opacity-20 rounded-full p-4">
                <i class="fas fa-money-bill-wave text-2xl"></i>
            </div>
        </div>
    </div>
</div>

<!-- Main Card -->
<div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
    <!-- Header with Gradient -->
    <div class="bg-gradient-to-r from-indigo-600 to-indigo-700 p-6">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div class="text-white">
                <h2 class="text-2xl font-heading font-bold flex items-center gap-3">
                    <div class="bg-white bg-opacity-20 rounded-lg p-2">
                        <i class="fas fa-box text-xl"></i>
                    </div>
                    Daftar Aset Sekolah
                </h2>
                <p class="text-indigo-100 text-sm mt-2">Manajemen dan monitoring aset sekolah secara terpusat</p>
            </div>
            <a href="{{ route('simaju.aset.create') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-white text-indigo-600 rounded-xl hover:bg-indigo-50 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1 font-medium">
                <i class="fas fa-plus-circle"></i>
                <span>Tambah Aset</span>
            </a>
        </div>

        <!-- Filters -->
        <form method="GET" class="mt-6 grid grid-cols-1 md:grid-cols-4 gap-3">
            <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                    <i class="fas fa-search text-gray-400"></i>
                </div>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari aset..." class="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-400 focus:border-transparent bg-white shadow-sm">
            </div>
            
            <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                    <i class="fas fa-tag text-gray-400"></i>
                </div>
                <select name="kategori" class="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-400 focus:border-transparent bg-white shadow-sm appearance-none">
                    <option value="">Semua Kategori</option>
                    <option value="peralatan" {{ request('kategori') == 'peralatan' ? 'selected' : '' }}>Peralatan</option>
                    <option value="kendaraan" {{ request('kategori') == 'kendaraan' ? 'selected' : '' }}>Kendaraan</option>
                    <option value="gedung" {{ request('kategori') == 'gedung' ? 'selected' : '' }}>Gedung</option>
                    <option value="tanah" {{ request('kategori') == 'tanah' ? 'selected' : '' }}>Tanah</option>
                    <option value="elektronik" {{ request('kategori') == 'elektronik' ? 'selected' : '' }}>Elektronik</option>
                    <option value="furniture" {{ request('kategori') == 'furniture' ? 'selected' : '' }}>Furniture</option>
                    <option value="lainnya" {{ request('kategori') == 'lainnya' ? 'selected' : '' }}>Lainnya</option>
                </select>
            </div>

            <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                    <i class="fas fa-clipboard-check text-gray-400"></i>
                </div>
                <select name="kondisi" class="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-400 focus:border-transparent bg-white shadow-sm appearance-none">
                    <option value="">Semua Kondisi</option>
                    <option value="baik" {{ request('kondisi') == 'baik' ? 'selected' : '' }}>Baik</option>
                    <option value="rusak_ringan" {{ request('kondisi') == 'rusak_ringan' ? 'selected' : '' }}>Rusak Ringan</option>
                    <option value="rusak_berat" {{ request('kondisi') == 'rusak_berat' ? 'selected' : '' }}>Rusak Berat</option>
                    <option value="hilang" {{ request('kondisi') == 'hilang' ? 'selected' : '' }}>Hilang</option>
                </select>
            </div>

            <button type="submit" class="px-6 py-3 bg-white text-indigo-600 rounded-xl hover:bg-indigo-50 transition-all duration-300 shadow-sm hover:shadow-md font-medium">
                <i class="fas fa-search mr-2"></i>Cari
            </button>
        </form>
    </div>

    <!-- Table -->
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gradient-to-r from-gray-50 to-gray-100 border-b-2 border-gray-200">
                <tr>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Kode</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Nama Aset</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Kategori</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Nilai</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Kondisi</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Lokasi</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-4 text-center text-xs font-bold text-gray-700 uppercase tracking-wider">Aksi</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-100">
                @forelse($asets as $aset)
                <tr class="hover:bg-gradient-to-r hover:from-indigo-50 hover:to-transparent transition-all duration-200 group">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center gap-2">
                            <div class="w-2 h-2 bg-indigo-500 rounded-full group-hover:scale-150 transition-transform"></div>
                            <span class="font-mono text-sm font-semibold text-gray-900">{{ $aset->kode_aset }}</span>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <div class="flex items-center gap-3">
                            @if($aset->foto)
                                <img src="{{ asset('storage/' . $aset->foto) }}" alt="{{ $aset->nama_aset }}" class="w-14 h-14 rounded-xl object-cover shadow-md ring-2 ring-gray-100">
                            @else
                                <div class="w-14 h-14 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-xl flex items-center justify-center text-white shadow-lg">
                                    <i class="fas fa-box text-lg"></i>
                                </div>
                            @endif
                            <div>
                                <p class="text-sm font-bold text-gray-900">{{ $aset->nama_aset }}</p>
                                <p class="text-xs text-gray-500 flex items-center gap-1 mt-1">
                                    <i class="fas fa-calendar text-xs"></i>
                                    {{ $aset->tanggal_perolehan->format('d M Y') }}
                                </p>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="inline-flex items-center gap-1 px-3 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                            <i class="fas fa-tag text-xs"></i>
                            {{ $aset->kategori_label }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-bold text-gray-900">Rp {{ number_format($aset->nilai_perolehan, 0, ',', '.') }}</div>
                        <div class="text-xs text-gray-500">{{ number_format($aset->nilai_perolehan / 1000000, 1) }}jt</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        @php
                            $kondisiBadge = [
                                'baik' => ['bg' => 'bg-gradient-to-r from-green-500 to-green-600', 'icon' => 'fa-check-circle'],
                                'rusak_ringan' => ['bg' => 'bg-gradient-to-r from-yellow-500 to-yellow-600', 'icon' => 'fa-exclamation-circle'],
                                'rusak_berat' => ['bg' => 'bg-gradient-to-r from-orange-500 to-orange-600', 'icon' => 'fa-times-circle'],
                                'hilang' => ['bg' => 'bg-gradient-to-r from-red-500 to-red-600', 'icon' => 'fa-exclamation-triangle'],
                            ];
                            $badge = $kondisiBadge[$aset->kondisi] ?? ['bg' => 'bg-gradient-to-r from-gray-500 to-gray-600', 'icon' => 'fa-circle'];
                        @endphp
                        <span class="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-bold rounded-lg text-white {{ $badge['bg'] }} shadow-md">
                            <i class="fas {{ $badge['icon'] }}"></i>
                            {{ $aset->kondisi_label }}
                        </span>
                    </td>
                    <td class="px-6 py-4">
                        <div class="flex items-center gap-2">
                            <i class="fas fa-map-marker-alt text-indigo-500 text-xs"></i>
                            <span class="text-sm text-gray-600">{{ $aset->lokasi ?? '-' }}</span>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        @php
                            $statusBadge = [
                                'aktif' => ['bg' => 'bg-gradient-to-r from-green-500 to-green-600', 'icon' => 'fa-check-circle'],
                                'nonaktif' => ['bg' => 'bg-gradient-to-r from-gray-500 to-gray-600', 'icon' => 'fa-pause-circle'],
                                'dalam_perbaikan' => ['bg' => 'bg-gradient-to-r from-orange-500 to-orange-600', 'icon' => 'fa-wrench'],
                                'dijual' => ['bg' => 'bg-gradient-to-r from-red-500 to-red-600', 'icon' => 'fa-shopping-cart'],
                            ];
                            $badge = $statusBadge[$aset->status] ?? ['bg' => 'bg-gradient-to-r from-gray-500 to-gray-600', 'icon' => 'fa-circle'];
                        @endphp
                        <span class="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-bold rounded-lg text-white {{ $badge['bg'] }} shadow-md">
                            <i class="fas {{ $badge['icon'] }}"></i>
                            {{ $aset->status_label }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-center">
                        <div class="flex items-center justify-center gap-2">
                            <a href="{{ route('simaju.aset.show', $aset) }}" class="p-2.5 text-blue-600 hover:bg-blue-100 rounded-lg transition-all duration-300 transform hover:scale-110 shadow-sm hover:shadow-md" title="Lihat Detail">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="{{ route('simaju.aset.edit', $aset) }}" class="p-2.5 text-amber-600 hover:bg-amber-100 rounded-lg transition-all duration-300 transform hover:scale-110 shadow-sm hover:shadow-md" title="Edit">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form action="{{ route('simaju.aset.destroy', $aset) }}" method="POST" class="inline" onsubmit="return confirm('Yakin ingin menghapus aset ini?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="p-2.5 text-red-600 hover:bg-red-100 rounded-lg transition-all duration-300 transform hover:scale-110 shadow-sm hover:shadow-md" title="Hapus">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="px-6 py-16 text-center">
                        <div class="flex flex-col items-center gap-4">
                            <div class="w-24 h-24 bg-gradient-to-br from-gray-100 to-gray-200 rounded-full flex items-center justify-center">
                                <i class="fas fa-inbox text-5xl text-gray-400"></i>
                            </div>
                            <div>
                                <p class="text-gray-600 font-semibold text-lg">Belum ada data aset</p>
                                <p class="text-gray-400 text-sm mt-1">Mulai tambahkan aset sekolah</p>
                            </div>
                            <a href="{{ route('simaju.aset.create') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-indigo-600 to-indigo-700 text-white rounded-xl hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 font-medium">
                                <i class="fas fa-plus-circle"></i>
                                Tambah Aset Baru
                            </a>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($asets->hasPages())
    <div class="p-6 border-t border-gray-100 bg-gray-50">
        {{ $asets->links() }}
    </div>
    @endif
</div>
@endsection