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

@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-cyan-600 via-blue-600 to-indigo-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-hand-holding text-white text-3xl"></i>
                </div>
                <div>
                    <h2 class="text-3xl font-bold text-white font-heading mb-1">Peminjaman Baru</h2>
                    <p class="text-cyan-100">Lengkapi informasi transaksi peminjaman buku</p>
                </div>
            </div>
        </div>

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

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

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">
                        Pilih Anggota <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <select name="anggota_id" 
                                class="w-full px-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 transition-all appearance-none @error('anggota_id') border-red-500 @enderror" 
                                required>
                            <option value="">-- Pilih Anggota --</option>
                            @foreach($anggotas as $anggota)
                                <option value="{{ $anggota->id }}" {{ old('anggota_id') == $anggota->id ? 'selected' : '' }}>
                                    {{ $anggota->no_anggota }} - {{ $anggota->nama_anggota }} ({{ ucfirst($anggota->jenis_anggota) }})
                                </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('anggota_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 anggota yang akan meminjam buku</p>
                    
                    <!-- Statistik Anggota -->
                    <div id="anggota-stats" class="hidden mt-3 p-3 bg-cyan-50 border border-cyan-200 rounded-lg">
                        <div class="flex items-center gap-2 text-sm">
                            <i class="fas fa-info-circle text-cyan-600"></i>
                            <span class="text-cyan-800">
                                Total Peminjaman: <strong id="total-peminjaman">0</strong> buku
                            </span>
                        </div>
                    </div>
                </div>
            </div>

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

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">
                        Pilih Buku <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <select name="buku_id" 
                                class="w-full px-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 transition-all appearance-none @error('buku_id') border-red-500 @enderror" 
                                required>
                            <option value="">-- Pilih Buku --</option>
                            @foreach($bukus as $buku)
                                <option value="{{ $buku->id }}" {{ old('buku_id') == $buku->id ? 'selected' : '' }}
                                        {{ $buku->jumlah_tersedia == 0 ? 'disabled' : '' }}>
                                    {{ $buku->judul_buku }} - {{ $buku->penulis }} 
                                    (Tersedia: {{ $buku->jumlah_tersedia }})
                                </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('buku_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">Buku yang tidak tersedia tidak dapat dipilih</p>
                </div>

                <!-- Jumlah Pinjam -->
                <div class="mt-6">
                    <label class="block text-sm font-bold text-gray-700 mb-2">
                        Jumlah Pinjam <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-hashtag text-gray-400 group-focus-within:text-cyan-500 transition-colors"></i>
                        </div>
                        <input type="number" 
                               name="jumlah_pinjam" 
                               value="{{ old('jumlah_pinjam', 1) }}" 
                               min="1"
                               max="3"
                               class="w-full pl-12 pr-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 transition-all @error('jumlah_pinjam') border-red-500 @enderror" 
                               required>
                    </div>
                    @error('jumlah_pinjam')
                        <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">Maksimal 3 buku per peminjaman</p>
                </div>
            </div>

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

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Tanggal Peminjaman -->
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Tanggal Peminjaman <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-cyan-500 transition-colors"></i>
                            </div>
                            <input type="date" 
                                   name="tanggal_peminjaman" 
                                   value="{{ old('tanggal_peminjaman', 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-cyan-500 focus:border-cyan-500 transition-all @error('tanggal_peminjaman') border-red-500 @enderror" 
                                   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 Target Pengembalian -->
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Target 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-times text-gray-400 group-focus-within:text-cyan-500 transition-colors"></i>
                            </div>
                            <input type="date" 
                                   name="tanggal_pengembalian_target" 
                                   value="{{ old('tanggal_pengembalian_target') }}" 
                                   class="w-full pl-12 pr-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 transition-all @error('tanggal_pengembalian_target') border-red-500 @enderror" 
                                   required>
                        </div>
                        @error('tanggal_pengembalian_target')
                            <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">Biasanya 7-14 hari dari tanggal peminjaman</p>
                    </div>
                </div>
            </div>

            <!-- Info Box -->
            <div class="bg-gradient-to-r from-cyan-50 to-blue-50 border-2 border-cyan-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-cyan-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-info-circle text-white text-xl"></i>
                        </div>
                    </div>
                    <div class="flex-1">
                        <h4 class="text-sm font-bold text-cyan-900 mb-2">Informasi Penting</h4>
                        <ul class="text-sm text-cyan-800 space-y-1">
                            <li class="flex items-start gap-2">
                                <i class="fas fa-check-circle text-cyan-600 mt-0.5"></i>
                                <span>Pastikan anggota dalam status aktif dan tidak memiliki tunggakan</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <i class="fas fa-check-circle text-cyan-600 mt-0.5"></i>
                                <span>Buku yang dipinjam akan mengurangi stok tersedia</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <i class="fas fa-check-circle text-cyan-600 mt-0.5"></i>
                                <span>Keterlambatan pengembalian akan dikenakan denda sesuai aturan</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-cyan-600 via-blue-600 to-indigo-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-save text-xl"></i>
                    <span class="text-lg">Simpan Peminjaman</span>
                </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 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>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const anggotaSelect = document.querySelector('select[name="anggota_id"]');
    const statsDiv = document.getElementById('anggota-stats');
    const totalPeminjamanSpan = document.getElementById('total-peminjaman');
    
    // Data peminjaman per anggota
    const peminjamanData = {!! json_encode($anggotas->mapWithKeys(function($anggota) {
        return [$anggota->id => \App\Models\Peminjaman::where('anggota_id', $anggota->id)->count()];
    })) !!};
    
    if (anggotaSelect) {
        anggotaSelect.addEventListener('change', function() {
            const anggotaId = this.value;
            
            if (anggotaId && peminjamanData[anggotaId] !== undefined) {
                totalPeminjamanSpan.textContent = peminjamanData[anggotaId];
                statsDiv.classList.remove('hidden');
            } else {
                statsDiv.classList.add('hidden');
            }
        });
        
        // Trigger change if there's an old value
        if (anggotaSelect.value) {
            anggotaSelect.dispatchEvent(new Event('change'));
        }
    }
});
</script>
@endpush

@endsection