@extends('simaju.layouts.main')
@section('title', 'Catat Pengembalian Aset')
@section('page-title', 'Catat Pengembalian Aset')
@section('page-subtitle', 'Catat pengembalian aset yang dipinjam')

@section('content')
<!-- Back Button -->
<div class="mb-6">
    <a href="{{ route('simaju.aset-pengembalian.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-purple-600 to-purple-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-undo-alt text-2xl"></i>
            </div>
            <div>
                <h2 class="text-2xl font-bold">Form Pengembalian Aset</h2>
                <p class="text-purple-100 text-sm mt-1">Lengkapi data pengembalian aset dengan benar</p>
            </div>
        </div>
    </div>

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

        <!-- Section: Pilih Peminjaman -->
        <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-clipboard-check"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-900">Pilih Peminjaman</h3>
                    <p class="text-sm text-gray-500">Pilih aset yang akan dikembalikan dari daftar peminjaman</p>
                </div>
            </div>

            <!-- Peminjaman Aset -->
            <div class="group">
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    Peminjaman 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-open text-gray-400"></i>
                    </div>
                    <select name="peminjaman_aset_id" 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('peminjaman_aset_id') border-red-500 @enderror" required>
                        <option value="">-- Pilih Peminjaman yang Belum Dikembalikan --</option>
                        @foreach($peminjamans as $peminjaman)
                        <option value="{{ $peminjaman->id }}" {{ old('peminjaman_aset_id') == $peminjaman->id ? 'selected' : '' }}>
                            {{ $peminjaman->aset->kode_aset }} - {{ $peminjaman->aset->nama_aset }} 
                            (Peminjam: {{ $peminjaman->peminjam ?? 'N/A' }})
                        </option>
                        @endforeach
                    </select>
                </div>
                @error('peminjaman_aset_id')
                <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>
                    Hanya menampilkan aset yang sedang dipinjam dan belum dikembalikan
                </p>
            </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-orange-500 to-orange-600 rounded-lg flex items-center justify-center text-white shadow-lg">
                    <i class="fas fa-clipboard-list"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-900">Kondisi & Status Pengembalian</h3>
                    <p class="text-sm text-gray-500">Tentukan kondisi aset saat dikembalikan</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Kondisi Pengembalian -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Kondisi Pengembalian <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_pengembalian" class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all duration-300 @error('kondisi_pengembalian') border-red-500 @enderror" required>
                            <option value="">-- Pilih Kondisi --</option>
                            <option value="baik" {{ old('kondisi_pengembalian') == 'baik' ? 'selected' : '' }}>✓ Baik</option>
                            <option value="rusak_ringan" {{ old('kondisi_pengembalian') == 'rusak_ringan' ? 'selected' : '' }}>⚠ Rusak Ringan</option>
                            <option value="rusak_berat" {{ old('kondisi_pengembalian') == 'rusak_berat' ? 'selected' : '' }}>✖ Rusak Berat</option>
                            <option value="hilang" {{ old('kondisi_pengembalian') == 'hilang' ? 'selected' : '' }}>⊗ Hilang</option>
                        </select>
                    </div>
                    @error('kondisi_pengembalian')
                    <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-lightbulb"></i>
                        Periksa kondisi fisik aset dengan teliti
                    </p>
                </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-orange-500 focus:border-transparent transition-all duration-300 @error('status') border-red-500 @enderror" required>
                            <option value="">-- Pilih Status --</option>
                            <option value="dikembalikan" {{ old('status') == 'dikembalikan' ? 'selected' : '' }}>✓ Dikembalikan</option>
                            <option value="hilang" {{ old('status') == 'hilang' ? 'selected' : '' }}>⊗ Hilang</option>
                            <option value="rusak" {{ old('status') == 'rusak' ? 'selected' : '' }}>⚠ Rusak</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: Detail Pengembalian -->
        <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-calendar-check"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-900">Detail Pengembalian</h3>
                    <p class="text-sm text-gray-500">Informasi waktu dan keterangan pengembalian</p>
                </div>
            </div>

            <!-- Tanggal Pengembalian -->
            <div class="mb-6">
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    Tanggal Pengembalian <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="datetime-local" name="tanggal_pengembalian" 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_pengembalian') border-red-500 @enderror" 
                           value="{{ old('tanggal_pengembalian', now()->format('Y-m-d\TH:i')) }}" required>
                </div>
                @error('tanggal_pengembalian')
                <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>
                <div class="relative">
                    <textarea name="keterangan" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all duration-300 @error('keterangan') border-red-500 @enderror" 
                              placeholder="Tambahkan catatan kondisi atau informasi penting lainnya...">{{ old('keterangan') }}</textarea>
                </div>
                @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
                <p class="mt-2 text-xs text-gray-500 flex items-center gap-1">
                    <i class="fas fa-info-circle"></i>
                    Jelaskan kondisi atau kerusakan jika ada
                </p>
            </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-purple-600 to-purple-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 Pengembalian</span>
            </button>
            <a href="{{ route('simaju.aset-pengembalian.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-purple-50 to-purple-100 rounded-xl p-6 border border-purple-200">
    <div class="flex items-start gap-4">
        <div class="w-10 h-10 bg-purple-500 rounded-lg flex items-center justify-center text-white flex-shrink-0">
            <i class="fas fa-info-circle"></i>
        </div>
        <div>
            <h4 class="font-bold text-purple-900 mb-2">Panduan Pencatatan Pengembalian</h4>
            <ul class="text-sm text-purple-800 space-y-1">
                <li class="flex items-start gap-2">
                    <i class="fas fa-check-circle text-purple-600 mt-0.5"></i>
                    <span>Pilih peminjaman yang akan dikembalikan dari dropdown</span>
                </li>
                <li class="flex items-start gap-2">
                    <i class="fas fa-check-circle text-purple-600 mt-0.5"></i>
                    <span>Periksa kondisi fisik aset dengan teliti sebelum memilih kondisi</span>
                </li>
                <li class="flex items-start gap-2">
                    <i class="fas fa-check-circle text-purple-600 mt-0.5"></i>
                    <span>Pilih status "Dikembalikan" jika aset kembali, "Hilang" jika tidak kembali, atau "Rusak" jika mengalami kerusakan</span>
                </li>
                <li class="flex items-start gap-2">
                    <i class="fas fa-check-circle text-purple-600 mt-0.5"></i>
                    <span>Catat keterangan detail jika ada kerusakan atau kehilangan</span>
                </li>
                <li class="flex items-start gap-2">
                    <i class="fas fa-check-circle text-purple-600 mt-0.5"></i>
                    <span>Status peminjaman akan otomatis diupdate setelah pengembalian dicatat</span>
                </li>
            </ul>
        </div>
    </div>
</div>

<!-- Info Alert -->
<div class="mt-6 bg-gradient-to-r from-blue-50 to-blue-100 rounded-xl p-5 border border-blue-200">
    <div class="flex items-start gap-3">
        <div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center text-white flex-shrink-0">
            <i class="fas fa-bell"></i>
        </div>
        <div>
            <h5 class="font-bold text-blue-900 text-sm mb-1">Penting!</h5>
            <p class="text-sm text-blue-800">Setelah pengembalian dicatat, status peminjaman akan berubah menjadi "Dikembalikan" dan aset dapat dipinjam kembali.</p>
        </div>
    </div>
</div>
@endsection