@extends('simaju.layouts.main')
@section('title', 'Catat Pengembalian')
@section('page-title', 'Catat Pengembalian')
@section('page-subtitle', 'Proses pengembalian buku dari anggota')

@section('content')
<div class="max-w-5xl mx-auto">
    <div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
        <!-- Elegant Header -->
        <div class="relative bg-gradient-to-br from-rose-600 via-pink-600 to-red-700 px-8 py-8">
            <div class="absolute inset-0 opacity-10">
                <div class="absolute top-0 right-0 w-64 h-64 bg-white rounded-full -mr-32 -mt-32"></div>
                <div class="absolute bottom-0 left-0 w-48 h-48 bg-white rounded-full -ml-24 -mb-24"></div>
            </div>
            <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-undo text-white text-3xl"></i>
                </div>
                <div>
                    <h2 class="text-3xl font-bold text-white font-heading mb-1">Pengembalian Buku</h2>
                    <p class="text-rose-100">Lengkapi informasi pengembalian dan kondisi buku</p>
                </div>
            </div>
        </div>

        <!-- Form -->
        <form action="{{ route('perpustakaan.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-rose-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-file-invoice text-rose-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800">Pilih Peminjaman</h3>
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">
                        Data Peminjaman <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <select name="peminjaman_id" 
                                class="w-full px-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition-all appearance-none @error('peminjaman_id') border-red-500 @enderror" 
                                required>
                            <option value="">-- Pilih Peminjaman yang Akan Dikembalikan --</option>
                            @foreach($peminjamans as $pinjam)
                                <option value="{{ $pinjam->id }}" {{ old('peminjaman_id') == $pinjam->id ? 'selected' : '' }}>
                                    {{ $pinjam->anggota->nama_anggota }} - {{ $pinjam->buku->judul_buku }} 
                                    (Pinjam: {{ $pinjam->tanggal_peminjaman->format('d/m/Y') }})
                                </option>
                            @endforeach
                        </select>
                        <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
                            <i class="fas fa-chevron-down text-gray-400"></i>
                        </div>
                    </div>
                    @error('peminjaman_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-1.5 text-xs text-gray-500">Pilih peminjaman yang statusnya masih dipinjam</p>
                </div>
            </div>

            <!-- Section: Informasi Pengembalian -->
            <div class="mb-8">
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-10 h-10 bg-pink-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-calendar text-pink-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800">Tanggal Pengembalian</h3>
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">
                        Tanggal Pengembalian <span class="text-red-500">*</span>
                    </label>
                    <div class="relative group">
                        <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 group-focus-within:text-rose-500 transition-colors"></i>
                        </div>
                        <input type="date" 
                               name="tanggal_pengembalian" 
                               value="{{ old('tanggal_pengembalian', date('Y-m-d')) }}" 
                               class="w-full pl-12 pr-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition-all @error('tanggal_pengembalian') border-red-500 @enderror" 
                               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>
            </div>

            <!-- Section: Kondisi Buku -->
            <div class="mb-8">
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-10 h-10 bg-red-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-shield-alt text-red-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800">Kondisi Buku</h3>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Kondisi Buku -->
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Kondisi Buku <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <select name="kondisi_buku" 
                                    class="w-full px-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition-all appearance-none @error('kondisi_buku') border-red-500 @enderror" 
                                    required>
                                <option value="">-- Pilih Kondisi --</option>
                                <option value="baik" {{ old('kondisi_buku') == 'baik' ? 'selected' : '' }}>Baik</option>
                                <option value="rusak_ringan" {{ old('kondisi_buku') == 'rusak_ringan' ? 'selected' : '' }}>Rusak Ringan</option>
                                <option value="rusak_berat" {{ old('kondisi_buku') == 'rusak_berat' ? 'selected' : '' }}>Rusak Berat</option>
                                <option value="hilang" {{ old('kondisi_buku') == 'hilang' ? 'selected' : '' }}>Hilang</option>
                            </select>
                            <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
                                <i class="fas fa-chevron-down text-gray-400"></i>
                            </div>
                        </div>
                        @error('kondisi_buku')
                            <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>

                    <!-- Denda -->
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Denda (Rp) <span class="text-red-500">*</span>
                        </label>
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <i class="fas fa-money-bill-wave text-gray-400 group-focus-within:text-rose-500 transition-colors"></i>
                            </div>
                            <input type="number" 
                                   name="denda" 
                                   value="{{ old('denda', 0) }}" 
                                   class="w-full pl-12 pr-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition-all @error('denda') border-red-500 @enderror" 
                                   min="0"
                                   placeholder="0"
                                   required>
                        </div>
                        @error('denda')
                            <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-1.5 text-xs text-gray-500">Denda keterlambatan atau kerusakan</p>
                    </div>

                    <!-- Catatan (Full Width) -->
                    <div class="md:col-span-2">
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Catatan <span class="text-gray-400 font-normal">(Opsional)</span>
                        </label>
                        <div class="relative group">
                            <div class="absolute top-4 left-4 pointer-events-none">
                                <i class="fas fa-sticky-note text-gray-400 group-focus-within:text-rose-500 transition-colors"></i>
                            </div>
                            <textarea name="catatan" 
                                      rows="3"
                                      class="w-full pl-12 pr-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-rose-500 focus:border-rose-500 transition-all resize-none @error('catatan') border-red-500 @enderror" 
                                      placeholder="Catatan kondisi buku, alasan denda, atau informasi tambahan...">{{ old('catatan') }}</textarea>
                        </div>
                        @error('catatan')
                            <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>

            <!-- Info Box -->
            <div class="bg-gradient-to-r from-rose-50 to-red-50 border-2 border-rose-200 rounded-2xl p-5 mb-8">
                <div class="flex gap-4">
                    <div class="flex-shrink-0">
                        <div class="w-12 h-12 bg-gradient-to-br from-rose-500 to-red-600 rounded-xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-exclamation-triangle text-white text-xl"></i>
                        </div>
                    </div>
                    <div class="flex-1">
                        <h4 class="text-sm font-bold text-rose-900 mb-2">Perhatian Penting</h4>
                        <ul class="text-sm text-rose-800 space-y-1">
                            <li class="flex items-start gap-2">
                                <i class="fas fa-check-circle text-rose-600 mt-0.5"></i>
                                <span>Periksa kondisi buku dengan teliti sebelum menerima pengembalian</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <i class="fas fa-check-circle text-rose-600 mt-0.5"></i>
                                <span>Denda dihitung berdasarkan keterlambatan dan kondisi buku</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <i class="fas fa-check-circle text-rose-600 mt-0.5"></i>
                                <span>Buku yang dikembalikan akan menambah stok tersedia</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex flex-col sm:flex-row gap-4 pt-6 border-t-2 border-gray-100">
                <button type="submit" 
                        class="flex-1 px-8 py-4 bg-gradient-to-r from-rose-600 via-pink-600 to-red-600 text-white font-bold rounded-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300 flex items-center justify-center gap-3">
                    <i class="fas fa-check-circle text-xl"></i>
                    <span class="text-lg">Proses Pengembalian</span>
                </button>
                <a href="{{ route('perpustakaan.pengembalian.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 duration-200 flex items-center justify-center gap-3">
                    <i class="fas fa-arrow-left"></i>
                    <span class="text-lg">Kembali</span>
                </a>
            </div>
        </form>
    </div>
</div>
@endsection