@extends('simaju.layouts.main')
@section('title', 'Tambah Peminjaman Aset')
@section('page-title', 'Tambah Peminjaman Aset')
@section('page-subtitle', 'Catat peminjaman aset baru')

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

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

        <!-- Section: Informasi 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-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white shadow-lg">
                    <i class="fas fa-box"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-900">Informasi Aset</h3>
                    <p class="text-sm text-gray-500">Pilih aset yang akan dipinjam</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Aset -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        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-boxes text-gray-400"></i>
                        </div>
                        <select name="aset_id" class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 @error('aset_id') border-red-500 @enderror" required>
                            <option value="">-- Pilih Aset --</option>
                            @foreach($asets as $aset)
                            <option value="{{ $aset->id }}" {{ old('aset_id') == $aset->id ? 'selected' : '' }}>
                                {{ $aset->kode_aset }} - {{ $aset->nama_aset }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    @error('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
                </div>

                <!-- Kondisi Peminjaman -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Kondisi Peminjaman <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_peminjaman" class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 @error('kondisi_peminjaman') border-red-500 @enderror" required>
                            <option value="">-- Pilih Kondisi --</option>
                            <option value="baik" {{ old('kondisi_peminjaman') == 'baik' ? 'selected' : '' }}>Baik</option>
                            <option value="rusak_ringan" {{ old('kondisi_peminjaman') == 'rusak_ringan' ? 'selected' : '' }}>Rusak Ringan</option>
                            <option value="rusak_berat" {{ old('kondisi_peminjaman') == 'rusak_berat' ? 'selected' : '' }}>Rusak Berat</option>
                        </select>
                    </div>
                    @error('kondisi_peminjaman')
                    <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 Peminjam -->
        <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-user"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-900">Informasi Peminjam</h3>
                    <p class="text-sm text-gray-500">Pilih guru, siswa, atau masukkan nama peminjam</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Guru -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Guru
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-chalkboard-teacher text-gray-400"></i>
                        </div>
                        <select name="guru_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('guru_id') border-red-500 @enderror">
                            <option value="">-- Pilih Guru --</option>
                            @foreach($gurus as $guru)
                            <option value="{{ $guru->id }}" {{ old('guru_id') == $guru->id ? 'selected' : '' }}>
                                {{ $guru->nama }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    @error('guru_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
                </div>

                <!-- Siswa -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Siswa
                    </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-graduate text-gray-400"></i>
                        </div>
                        <select name="siswa_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('siswa_id') border-red-500 @enderror">
                            <option value="">-- Pilih Siswa --</option>
                            @foreach($siswas as $siswa)
                            <option value="{{ $siswa->id }}" {{ old('siswa_id') == $siswa->id ? 'selected' : '' }}>
                                {{ $siswa->nis }} - {{ $siswa->nama }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    @error('siswa_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
                </div>
            </div>

            <!-- Nama Peminjam Manual -->
            <div class="mt-6">
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    Nama Peminjam (Jika bukan Guru/Siswa)
                </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-circle text-gray-400"></i>
                    </div>
                    <input type="text" name="peminjam_nama" 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('peminjam_nama') border-red-500 @enderror" 
                           value="{{ old('peminjam_nama') }}" placeholder="Masukkan nama peminjam">
                </div>
                @error('peminjam_nama')
                <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>
                    Isi field ini jika peminjam bukan dari daftar guru atau siswa
                </p>
            </div>
        </div>

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

        <!-- Section: Detail 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-green-500 to-green-600 rounded-lg flex items-center justify-center text-white shadow-lg">
                    <i class="fas fa-calendar-alt"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-900">Detail Peminjaman</h3>
                    <p class="text-sm text-gray-500">Informasi tujuan dan waktu peminjaman</p>
                </div>
            </div>

            <!-- Tujuan Peminjaman -->
            <div class="mb-6">
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    Tujuan Peminjaman <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                    <textarea name="tujuan_peminjaman" 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('tujuan_peminjaman') border-red-500 @enderror" 
                              placeholder="Jelaskan tujuan peminjaman aset..." required>{{ old('tujuan_peminjaman') }}</textarea>
                </div>
                @error('tujuan_peminjaman')
                <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 class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Tanggal Peminjaman -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Tanggal Peminjaman <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_peminjaman" 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_peminjaman') border-red-500 @enderror" 
                               value="{{ old('tanggal_peminjaman', now()->format('Y-m-d\TH:i')) }}" required>
                    </div>
                    @error('tanggal_peminjaman')
                    <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 Kembali Rencana -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Tanggal Kembali Rencana
                    </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-check text-gray-400"></i>
                        </div>
                        <input type="datetime-local" name="tanggal_kembali_rencana" 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_kembali_rencana') border-red-500 @enderror" 
                               value="{{ old('tanggal_kembali_rencana') }}">
                    </div>
                    @error('tanggal_kembali_rencana')
                    <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>

            <!-- Keterangan -->
            <div class="mt-6">
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    Keterangan
                </label>
                <div class="relative">
                    <textarea name="keterangan" rows="3" 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 keterangan jika diperlukan...">{{ 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
            </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-blue-600 to-blue-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 Peminjaman</span>
            </button>
            <a href="{{ route('simaju.aset-peminjaman.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-blue-50 to-blue-100 rounded-xl p-6 border border-blue-200">
    <div class="flex items-start gap-4">
        <div class="w-10 h-10 bg-blue-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-blue-900 mb-2">Panduan Pengisian</h4>
            <ul class="text-sm text-blue-800 space-y-1">
                <li class="flex items-start gap-2">
                    <i class="fas fa-check-circle text-blue-600 mt-0.5"></i>
                    <span>Pilih aset yang akan dipinjam dan tentukan kondisinya saat dipinjam</span>
                </li>
                <li class="flex items-start gap-2">
                    <i class="fas fa-check-circle text-blue-600 mt-0.5"></i>
                    <span>Pilih peminjam dari guru atau siswa, atau masukkan nama manual jika bukan keduanya</span>
                </li>
                <li class="flex items-start gap-2">
                    <i class="fas fa-check-circle text-blue-600 mt-0.5"></i>
                    <span>Jelaskan tujuan peminjaman dengan jelas</span>
                </li>
                <li class="flex items-start gap-2">
                    <i class="fas fa-check-circle text-blue-600 mt-0.5"></i>
                    <span>Tentukan tanggal peminjaman dan rencana pengembalian</span>
                </li>
            </ul>
        </div>
    </div>
</div>
@endsection