@extends('simaju.layouts.main')
@section('title', 'Edit Peminjaman')
@section('page-title', 'Edit Peminjaman')
@section('page-subtitle', 'Perbarui informasi peminjaman buku')

@section('content')
<div class="max-w-5xl mx-auto">
    <div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
        <div class="relative bg-gradient-to-br from-cyan-600 via-blue-600 to-indigo-700 px-8 py-8">
            <div class="relative flex items-center gap-5">
                <div class="w-16 h-16 bg-white bg-opacity-20 backdrop-blur-lg rounded-2xl flex items-center justify-center shadow-lg">
                    <i class="fas fa-edit text-white text-3xl"></i>
                </div>
                <div>
                    <h2 class="text-3xl font-bold text-white font-heading mb-1">Edit Peminjaman</h2>
                    <p class="text-cyan-100">Perbarui informasi peminjaman buku</p>
                </div>
            </div>
        </div>

        <form action="{{ route('perpustakaan.peminjaman.update', $peminjaman) }}" method="POST" class="p-8">
            @csrf
            @method('PUT')

            <div class="mb-8">
                <h3 class="text-xl font-bold text-gray-800 mb-4">Informasi Peminjaman</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                    <div class="bg-gray-50 rounded-xl p-4 border border-gray-200">
                        <label class="block text-xs font-bold text-gray-500 mb-2">Anggota</label>
                        <p class="text-gray-800 font-semibold">{{ $peminjaman->anggota->nama_anggota }}</p>
                        <p class="text-sm text-gray-500">{{ $peminjaman->anggota->no_anggota }}</p>
                    </div>
                    <div class="bg-gray-50 rounded-xl p-4 border border-gray-200">
                        <label class="block text-xs font-bold text-gray-500 mb-2">Buku</label>
                        <p class="text-gray-800 font-semibold">{{ $peminjaman->buku->judul_buku }}</p>
                        <p class="text-sm text-gray-500">{{ $peminjaman->buku->kode_buku }}</p>
                    </div>
                    <div class="bg-gray-50 rounded-xl p-4 border border-gray-200">
                        <label class="block text-xs font-bold text-gray-500 mb-2">Jumlah Pinjam</label>
                        <p class="text-gray-800 font-semibold">
                            <i class="fas fa-layer-group text-blue-600"></i> {{ $peminjaman->jumlah_pinjam }} buku
                        </p>
                    </div>
                    <div class="bg-gray-50 rounded-xl p-4 border border-gray-200">
                        <label class="block text-xs font-bold text-gray-500 mb-2">Tanggal Peminjaman</label>
                        <p class="text-gray-800 font-semibold">{{ $peminjaman->tanggal_peminjaman->format('d F Y') }}</p>
                    </div>
                    <div class="bg-gray-50 rounded-xl p-4 border border-gray-200">
                        <label class="block text-xs font-bold text-gray-500 mb-2">Status</label>
                        <p class="text-gray-800 font-semibold">{{ ucfirst($peminjaman->status) }}</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Tanggal Target Pengembalian <span class="text-red-500">*</span>
                        </label>
                        <input type="date" name="tanggal_pengembalian_target" 
                               value="{{ old('tanggal_pengembalian_target', $peminjaman->tanggal_pengembalian_target->format('Y-m-d')) }}" 
                               class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500" required>
                        @error('tanggal_pengembalian_target')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Denda (Rp) <span class="text-gray-400 text-xs font-normal">- Isi 0 jika tidak ada denda</span>
                        </label>
                        <input type="number" name="denda" value="{{ old('denda', $peminjaman->denda ?? 0) }}" min="0" step="1000"
                               class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500" placeholder="0">
                        @error('denda')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                        <p class="mt-1 text-xs text-gray-500">Jumlah: {{ \App\Models\Peminjaman::where('anggota_id', $peminjaman->anggota_id)->count() }} peminjaman</p>
                    </div>
                </div>

                <div class="mt-6">
                    <label class="block text-sm font-bold text-gray-700 mb-2">Catatan</label>
                    <textarea name="catatan" rows="3" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 resize-none" 
                              placeholder="Catatan tambahan...">{{ old('catatan', $peminjaman->catatan) }}</textarea>
                </div>
            </div>

            <div class="flex gap-4">
                <button type="submit" class="flex-1 px-8 py-4 bg-gradient-to-r from-cyan-600 to-blue-600 text-white font-bold rounded-xl hover:shadow-xl transition-all">
                    <i class="fas fa-save mr-2"></i>Simpan Perubahan
                </button>
                <a href="{{ route('perpustakaan.peminjaman.index') }}" class="flex-1 px-8 py-4 bg-gray-100 text-gray-700 font-bold text-center rounded-xl hover:bg-gray-200 transition-all">
                    <i class="fas fa-arrow-left mr-2"></i>Kembali
                </a>
            </div>
        </form>
    </div>
</div>
@endsection