@extends('simaju.layouts.main')
@section('title', 'Tambah Aset')
@section('page-title', 'Tambah Aset')
@section('page-subtitle', 'Tambahkan aset baru ke sistem')

@section('content')
<!-- Back Button -->
<div class="mb-6">
    <a href="{{ route('simaju.aset.index') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-all duration-300 shadow-sm hover:shadow-md text-gray-700">
        <i class="fas fa-arrow-left"></i>
        <span>Kembali ke Daftar</span>
    </a>
</div>

<!-- Main Form 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 items-center gap-4 text-white">
            <div class="bg-white bg-opacity-20 rounded-xl p-3">
                <i class="fas fa-plus-square text-2xl"></i>
            </div>
            <div>
                <h2 class="text-2xl font-bold">Form Tambah Aset</h2>
                <p class="text-indigo-100 text-sm mt-1">Lengkapi informasi aset dengan benar dan detail</p>
            </div>
        </div>
    </div>

    <!-- Form Body -->
    <form action="{{ route('simaju.aset.store') }}" method="POST" enctype="multipart/form-data" class="p-8">
        @csrf

        <!-- Section: Identitas Aset -->
        <div class="mb-8">
            <div class="flex items-center gap-3 mb-6">
                <div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-lg flex items-center justify-center text-white shadow-lg">
                    <i class="fas fa-id-card"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-900">Identitas Aset</h3>
                    <p class="text-sm text-gray-500">Informasi dasar dan identifikasi aset</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Kode Aset -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Kode Aset <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-barcode text-gray-400"></i>
                        </div>
                        <input type="text" name="kode_aset" value="{{ old('kode_aset') }}" class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all duration-300 @error('kode_aset') border-red-500 @enderror" 
                               placeholder="Contoh: AST-001" required>
                    </div>
                    @error('kode_aset')
                    <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </p>
                    @enderror
                </div>

                <!-- Nama Aset -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Nama Aset <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-box text-gray-400"></i>
                        </div>
                        <input type="text" name="nama_aset" value="{{ old('nama_aset') }}" class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all duration-300 @error('nama_aset') border-red-500 @enderror" 
                               placeholder="Masukkan nama aset" required>
                    </div>
                    @error('nama_aset')
                    <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </p>
                    @enderror
                </div>

                <!-- Kategori Aset -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Kategori Aset <span class="text-red-500">*</span>
                    </label>
                    <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_aset" class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all duration-300 @error('kategori_aset') border-red-500 @enderror" required>
                            <option value="">Pilih Kategori</option>
                            <option value="peralatan" {{ old('kategori_aset') == 'peralatan' ? 'selected' : '' }}>Peralatan</option>
                            <option value="kendaraan" {{ old('kategori_aset') == 'kendaraan' ? 'selected' : '' }}>Kendaraan</option>
                            <option value="gedung" {{ old('kategori_aset') == 'gedung' ? 'selected' : '' }}>Gedung</option>
                            <option value="tanah" {{ old('kategori_aset') == 'tanah' ? 'selected' : '' }}>Tanah</option>
                            <option value="elektronik" {{ old('kategori_aset') == 'elektronik' ? 'selected' : '' }}>Elektronik</option>
                            <option value="furniture" {{ old('kategori_aset') == 'furniture' ? 'selected' : '' }}>Furniture</option>
                            <option value="lainnya" {{ old('kategori_aset') == 'lainnya' ? 'selected' : '' }}>Lainnya</option>
                        </select>
                    </div>
                    @error('kategori_aset')
                    <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </p>
                    @enderror
                </div>

                <!-- Foto -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Foto Aset
                    </label>
                    <div class="relative">
                        <input type="file" name="foto" accept="image/jpeg,image/png,image/jpg" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all duration-300 @error('foto') border-red-500 @enderror">
                    </div>
                    @error('foto')
                    <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </p>
                    @enderror
                    <p class="mt-2 text-xs text-gray-500 flex items-center gap-1">
                        <i class="fas fa-info-circle"></i>
                        Format: JPG, PNG (Max: 2MB)
                    </p>
                </div>
            </div>
        </div>

        <!-- Divider -->
        <div class="border-t border-gray-200 my-8"></div>

        <!-- Section: Nilai & Perolehan -->
        <div class="mb-8">
            <div class="flex items-center gap-3 mb-6">
                <div class="w-10 h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center text-white shadow-lg">
                    <i class="fas fa-money-bill-wave"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-900">Nilai & Perolehan</h3>
                    <p class="text-sm text-gray-500">Informasi nilai dan tanggal perolehan aset</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Nilai Perolehan -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Nilai Perolehan (Rp) <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <span class="text-gray-400 font-semibold">Rp</span>
                        </div>
                        <input type="number" name="nilai_perolehan" value="{{ old('nilai_perolehan', 0) }}" class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all duration-300 @error('nilai_perolehan') border-red-500 @enderror" 
                               placeholder="0" min="0" step="0.01" required>
                    </div>
                    @error('nilai_perolehan')
                    <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </p>
                    @enderror
                </div>

                <!-- Tanggal Perolehan -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Tanggal Perolehan <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-calendar text-gray-400"></i>
                        </div>
                        <input type="date" name="tanggal_perolehan" value="{{ old('tanggal_perolehan') }}" class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all duration-300 @error('tanggal_perolehan') border-red-500 @enderror" required>
                    </div>
                    @error('tanggal_perolehan')
                    <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </p>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Divider -->
        <div class="border-t border-gray-200 my-8"></div>

        <!-- Section: Kondisi & Status -->
        <div class="mb-8">
            <div class="flex items-center gap-3 mb-6">
                <div class="w-10 h-10 bg-gradient-to-br from-amber-500 to-amber-600 rounded-lg flex items-center justify-center text-white shadow-lg">
                    <i class="fas fa-clipboard-check"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-900">Kondisi & Status</h3>
                    <p class="text-sm text-gray-500">Kondisi fisik dan status operasional aset</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Kondisi -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Kondisi <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-check-circle text-gray-400"></i>
                        </div>
                        <select name="kondisi" class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500 focus:border-transparent transition-all duration-300 @error('kondisi') border-red-500 @enderror" required>
                            <option value="baik" {{ old('kondisi', 'baik') == 'baik' ? 'selected' : '' }}>✓ Baik</option>
                            <option value="rusak_ringan" {{ old('kondisi') == 'rusak_ringan' ? 'selected' : '' }}>⚠ Rusak Ringan</option>
                            <option value="rusak_berat" {{ old('kondisi') == 'rusak_berat' ? 'selected' : '' }}>✖ Rusak Berat</option>
                            <option value="hilang" {{ old('kondisi') == 'hilang' ? 'selected' : '' }}>⊗ Hilang</option>
                        </select>
                    </div>
                    @error('kondisi')
                    <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </p>
                    @enderror
                </div>

                <!-- Status -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Status <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-flag text-gray-400"></i>
                        </div>
                        <select name="status" class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500 focus:border-transparent transition-all duration-300 @error('status') border-red-500 @enderror" required>
                            <option value="aktif" {{ old('status', 'aktif') == 'aktif' ? 'selected' : '' }}>✓ Aktif</option>
                            <option value="nonaktif" {{ old('status') == 'nonaktif' ? 'selected' : '' }}>⊗ Non-Aktif</option>
                            <option value="dalam_perbaikan" {{ old('status') == 'dalam_perbaikan' ? 'selected' : '' }}>⚙ Dalam Perbaikan</option>
                            <option value="dijual" {{ old('status') == 'dijual' ? 'selected' : '' }}>$ Dijual</option>
                        </select>
                    </div>
                    @error('status')
                    <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </p>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Divider -->
        <div class="border-t border-gray-200 my-8"></div>

        <!-- Section: Lokasi & Penanggung Jawab -->
        <div class="mb-8">
            <div class="flex items-center gap-3 mb-6">
                <div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg flex items-center justify-center text-white shadow-lg">
                    <i class="fas fa-map-marker-alt"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-900">Lokasi & Penanggung Jawab</h3>
                    <p class="text-sm text-gray-500">Informasi lokasi dan pengelola aset</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Lokasi -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Lokasi
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-building text-gray-400"></i>
                        </div>
                        <input type="text" name="lokasi" value="{{ old('lokasi') }}" class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300 @error('lokasi') border-red-500 @enderror" 
                               placeholder="Contoh: Ruang Lab Komputer">
                    </div>
                    @error('lokasi')
                    <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </p>
                    @enderror
                </div>

                <!-- Penanggung Jawab -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Penanggung Jawab
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-user-tie text-gray-400"></i>
                        </div>
                        <input type="text" name="penanggung_jawab" value="{{ old('penanggung_jawab') }}" class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300 @error('penanggung_jawab') border-red-500 @enderror" 
                               placeholder="Nama penanggung jawab">
                    </div>
                    @error('penanggung_jawab')
                    <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </p>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Divider -->
        <div class="border-t border-gray-200 my-8"></div>

        <!-- Section: Informasi Tambahan -->
        <div class="mb-8">
            <div class="flex items-center gap-3 mb-6">
                <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white shadow-lg">
                    <i class="fas fa-info-circle"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-900">Informasi Tambahan</h3>
                    <p class="text-sm text-gray-500">Deskripsi dan keterangan detail aset</p>
                </div>
            </div>

            <!-- Deskripsi -->
            <div class="mb-6">
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    Deskripsi
                </label>
                <textarea name="deskripsi" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 @error('deskripsi') border-red-500 @enderror" 
                          placeholder="Deskripsi detail aset...">{{ old('deskripsi') }}</textarea>
                @error('deskripsi')
                <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                    <i class="fas fa-exclamation-circle"></i>
                    {{ $message }}
                </p>
                @enderror
            </div>

            <!-- Keterangan -->
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    Keterangan
                </label>
                <textarea name="keterangan" rows="3" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 @error('keterangan') border-red-500 @enderror" 
                          placeholder="Keterangan tambahan...">{{ old('keterangan') }}</textarea>
                @error('keterangan')
                <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                    <i class="fas fa-exclamation-circle"></i>
                    {{ $message }}
                </p>
                @enderror
            </div>
        </div>

        <!-- Form Actions -->
        <div class="flex items-center gap-4 pt-6 border-t border-gray-200">
            <button type="submit" class="inline-flex items-center gap-2 px-8 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-semibold">
                <i class="fas fa-save"></i>
                <span>Simpan Aset</span>
            </button>
            <a href="{{ route('simaju.aset.index') }}" class="inline-flex items-center gap-2 px-8 py-3 bg-white border-2 border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-all duration-300 font-semibold">
                <i class="fas fa-times"></i>
                <span>Batal</span>
            </a>
        </div>
    </form>
</div>

<!-- Help Card -->
<div class="mt-6 bg-gradient-to-r from-indigo-50 to-indigo-100 rounded-xl p-6 border border-indigo-200">
    <div class="flex items-start gap-4">
        <div class="w-10 h-10 bg-indigo-500 rounded-lg flex items-center justify-center text-white flex-shrink-0">
            <i class="fas fa-lightbulb"></i>
        </div>
        <div>
            <h4 class="font-bold text-indigo-900 mb-2">Tips Pengisian Form</h4>
            <ul class="text-sm text-indigo-800 space-y-1">
                <li class="flex items-start gap-2">
                    <i class="fas fa-check-circle text-indigo-600 mt-0.5"></i>
                    <span>Gunakan kode aset yang unik dan konsisten (contoh: AST-001, AST-002)</span>
                </li>
                <li class="flex items-start gap-2">
                    <i class="fas fa-check-circle text-indigo-600 mt-0.5"></i>
                    <span>Upload foto aset untuk memudahkan identifikasi visual</span>
                </li>
                <li class="flex items-start gap-2">
                    <i class="fas fa-check-circle text-indigo-600 mt-0.5"></i>
                    <span>Isi nilai perolehan sesuai dengan harga pembelian atau estimasi nilai</span>
                </li>
                <li class="flex items-start gap-2">
                    <i class="fas fa-check-circle text-indigo-600 mt-0.5"></i>
                    <span>Tentukan lokasi dan penanggung jawab untuk tracking yang lebih baik</span>
                </li>
            </ul>
        </div>
    </div>
</div>
@endsection