@extends('simaju.layouts.main')
@section('title', 'Tambah Buku')
@section('page-title', 'Tambah Buku')
@section('page-subtitle', 'Tambahkan buku baru ke koleksi perpustakaan')

@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-emerald-600 via-green-600 to-teal-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-book text-white text-3xl"></i>
                </div>
                <div>
                    <h2 class="text-3xl font-bold text-white font-heading mb-1">Buku Baru</h2>
                    <p class="text-green-100">Lengkapi informasi buku untuk menambahkan ke koleksi</p>
                </div>
            </div>
        </div>

        <!-- Form -->
        <form action="{{ route('perpustakaan.buku.store') }}" method="POST" enctype="multipart/form-data" class="p-8">
            @csrf
            <!-- Section: Informasi Buku -->
            <div class="mb-8">
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-book-open text-green-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800">Informasi Buku</h3>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="md:col-span-2">
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Judul Buku <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-heading text-gray-400"></i>
                            </div>
                            <input type="text" name="judul_buku" value="{{ old('judul_buku') }}" 
                                   class="w-full pl-12 pr-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all @error('judul_buku') border-red-500 @enderror" 
                                   placeholder="Masukkan judul buku..." required>
                        </div>
                        @error('judul_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
                        <p class="mt-1.5 text-xs text-gray-500">Masukkan judul lengkap buku</p>
                    </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">
                        Pengarang <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-user-edit text-gray-400"></i>
                        </div>
                        <input type="text" name="pengarang" value="{{ old('pengarang') }}" 
                               class="w-full pl-12 pr-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all @error('pengarang') border-red-500 @enderror" 
                               placeholder="Nama pengarang..." required>
                    </div>
                    @error('pengarang')
                        <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>
                    <label class="block text-sm font-bold text-gray-700 mb-2">
                        Penerbit <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-building text-gray-400"></i>
                        </div>
                        <input type="text" name="penerbit" value="{{ old('penerbit') }}" 
                               class="w-full pl-12 pr-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all @error('penerbit') border-red-500 @enderror" 
                               placeholder="Nama penerbit..." required>
                    </div>
                    @error('penerbit')
                        <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>
                    <label class="block text-sm font-bold text-gray-700 mb-2">
                        ISBN <span class="text-red-500">*</span>
                    </label>
                    <div class="flex gap-2">
                        <div class="flex-1 relative">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <i class="fas fa-barcode text-gray-400"></i>
                            </div>
                            <input type="text" id="isbn" name="isbn" value="{{ old('isbn') }}" 
                                   class="w-full pl-12 pr-4 py-3.5 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent @error('isbn') border-red-500 @enderror" 
                                   placeholder="978-xxx-xxx..." required>
                        </div>
                        <button type="button" onclick="startBarcodeScanner()" 
                                class="px-4 py-3.5 bg-blue-600 text-white font-bold rounded-xl hover:bg-blue-700 transition-all flex items-center gap-2 whitespace-nowrap">
                            <i class="fas fa-camera"></i>
                            <span class="hidden sm:inline">Scan</span>
                        </button>
                    </div>
                    @error('isbn')<p class="mt-2 text-sm text-red-600"><i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}</p>@enderror
                    <p class="mt-1.5 text-xs text-gray-500"><i class="fas fa-info-circle mr-1"></i>Masukkan ISBN atau klik tombol Scan untuk memindai barcode</p>
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">
                        Tahun Terbit <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="number" name="tahun_terbit" value="{{ old('tahun_terbit') }}" 
                               class="w-full pl-12 pr-4 py-3.5 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent @error('tahun_terbit') border-red-500 @enderror" 
                               placeholder="2024..." required>
                    </div>
                    @error('tahun_terbit')<p class="mt-2 text-sm text-red-600"><i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}</p>@enderror
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">
                        Kategori <span class="text-red-500">*</span>
                    </label>
                    <select name="kategori_id" class="w-full px-4 py-3.5 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent @error('kategori_id') border-red-500 @enderror" required>
                        <option value="">Pilih Kategori</option>
                        @foreach($kategoris as $kategori)
                            <option value="{{ $kategori->id }}" {{ old('kategori_id') == $kategori->id ? 'selected' : '' }}>
                                {{ $kategori->nama_kategori }}
                            </option>
                        @endforeach
                    </select>
                    @error('kategori_id')<p class="mt-2 text-sm text-red-600"><i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}</p>@enderror
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">
                        Jumlah Buku <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-warehouse text-gray-400"></i>
                        </div>
                        <input type="number" name="jumlah_buku" value="{{ old('jumlah_buku') }}" 
                               class="w-full pl-12 pr-4 py-3.5 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent @error('jumlah_buku') border-red-500 @enderror" 
                               placeholder="Total stok..." required min="0">
                    </div>
                    @error('jumlah_buku')<p class="mt-2 text-sm text-red-600"><i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}</p>@enderror
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">
                        Jumlah Tersedia <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>
                        <input type="number" name="jumlah_tersedia" value="{{ old('jumlah_tersedia') }}" 
                               class="w-full pl-12 pr-4 py-3.5 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent @error('jumlah_tersedia') border-red-500 @enderror" 
                               placeholder="Stok tersedia..." required min="0">
                    </div>
                    @error('jumlah_tersedia')<p class="mt-2 text-sm text-red-600"><i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}</p>@enderror
                </div>

                <div class="md:col-span-2">
                    <label class="block text-sm font-bold text-gray-700 mb-2">
                        Deskripsi <span class="text-gray-400 text-xs">(Opsional)</span>
                    </label>
                    <textarea name="deskripsi" rows="4" 
                              class="w-full px-4 py-3.5 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent @error('deskripsi') border-red-500 @enderror" 
                              placeholder="Masukkan deskripsi atau sinopsis buku...">{{ old('deskripsi') }}</textarea>
                    @error('deskripsi')<p class="mt-2 text-sm text-red-600"><i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}</p>@enderror
                </div>

                <div class="md:col-span-2">
                    <label class="block text-sm font-bold text-gray-700 mb-2">
                        Foto Buku <span class="text-gray-400 text-xs">(Opsional)</span>
                    </label>
                    <input type="file" name="foto_buku" accept="image/*"
                           class="w-full px-4 py-3.5 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent @error('foto_buku') border-red-500 @enderror">
                    <p class="mt-2 text-sm text-gray-500"><i class="fas fa-info-circle mr-1"></i>Format: JPG, PNG, GIF. Maksimal 2MB</p>
                    @error('foto_buku')<p class="mt-2 text-sm text-red-600"><i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}</p>@enderror
                </div>
            </div>

            <div class="flex flex-col sm:flex-row gap-3 mt-8 pt-6 border-t border-gray-200">
                <button type="submit" 
                        style="pointer-events: auto; cursor: pointer;" 
                        class="flex-1 px-6 py-3.5 bg-gradient-to-r from-green-600 to-teal-600 text-white font-bold rounded-xl hover:shadow-lg transform hover:-translate-y-0.5 transition-all">
                    <i class="fas fa-save mr-2"></i>Simpan Buku
                </button>
                <a href="{{ route('perpustakaan.buku.index') }}" 
                   class="flex-1 px-6 py-3.5 bg-gray-100 text-gray-700 font-bold text-center rounded-xl hover:bg-gray-200 transition-all">
                    <i class="fas fa-times mr-2"></i>Batal
                </a>
            </div>
        </form>
    </div>
</div>

<!-- Barcode Scanner Modal -->
<div id="scannerModal" class="hidden fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl max-w-2xl w-full overflow-hidden">
        <!-- Modal Header -->
        <div class="bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-4 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-white bg-opacity-20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-camera text-white text-lg"></i>
                </div>
                <div>
                    <h3 class="text-xl font-bold text-white">Scan Barcode ISBN</h3>
                    <p class="text-blue-100 text-sm">Arahkan kamera ke barcode buku</p>
                </div>
            </div>
            <button onclick="stopBarcodeScanner()" class="text-white hover:bg-white hover:bg-opacity-20 rounded-lg p-2 transition-all">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        
        <!-- Scanner Area -->
        <div class="p-6">
            <div id="reader" class="w-full rounded-xl overflow-hidden border-4 border-blue-200 bg-gray-900"></div>
            
            <!-- Instructions -->
            <div class="mt-4 bg-blue-50 rounded-xl p-4 border border-blue-200">
                <div class="flex items-start gap-3">
                    <i class="fas fa-info-circle text-blue-600 text-lg mt-0.5"></i>
                    <div class="text-sm text-blue-800">
                        <p class="font-bold mb-1">Petunjuk Penggunaan:</p>
                        <ul class="list-disc list-inside space-y-1 text-blue-700">
                            <li>Izinkan akses kamera saat diminta browser</li>
                            <li>Arahkan kamera ke barcode ISBN pada buku</li>
                            <li>Pastikan barcode terlihat jelas dan tidak blur</li>
                            <li>Scanner akan otomatis mendeteksi dan menutup</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <!-- Result Display -->
            <div id="scanResult" class="hidden mt-4 bg-green-50 rounded-xl p-4 border border-green-200">
                <div class="flex items-center gap-3">
                    <i class="fas fa-check-circle text-green-600 text-2xl"></i>
                    <div>
                        <p class="font-bold text-green-800">Berhasil!</p>
                        <p class="text-sm text-green-700">ISBN: <span id="scannedISBN" class="font-mono font-bold"></span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Include Html5-QRCode Library -->
<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>

<script>
let html5QrcodeScanner = null;

function startBarcodeScanner() {
    const modal = document.getElementById('scannerModal');
    modal.classList.remove('hidden');
    
    // Initialize scanner
    html5QrcodeScanner = new Html5QrcodeScanner(
        "reader",
        { 
            fps: 10,
            qrbox: { width: 350, height: 150 },
            formatsToSupport: [
                Html5QrcodeSupportedFormats.EAN_13,
                Html5QrcodeSupportedFormats.EAN_8,
                Html5QrcodeSupportedFormats.CODE_128,
                Html5QrcodeSupportedFormats.CODE_39,
                Html5QrcodeSupportedFormats.UPC_A,
                Html5QrcodeSupportedFormats.UPC_E
            ],
            rememberLastUsedCamera: true,
            showTorchButtonIfSupported: true
        },
        false
    );

    html5QrcodeScanner.render(onScanSuccess, onScanError);
}

function onScanSuccess(decodedText, decodedResult) {
    // Display result
    document.getElementById('scannedISBN').textContent = decodedText;
    document.getElementById('scanResult').classList.remove('hidden');
    
    // Fill ISBN input
    document.getElementById('isbn').value = decodedText;
    
    // Optional: Try to fetch book info from Google Books API
    fetchBookInfo(decodedText);
    
    // Stop scanner and close modal after 2 seconds
    setTimeout(() => {
        stopBarcodeScanner();
    }, 2000);
}

function onScanError(errorMessage) {
    // Ignore scan errors (they occur frequently during scanning)
}

function stopBarcodeScanner() {
    if (html5QrcodeScanner) {
        html5QrcodeScanner.clear().then(() => {
            html5QrcodeScanner = null;
        }).catch(error => {
            console.error("Failed to clear scanner:", error);
        });
    }
    
    document.getElementById('scannerModal').classList.add('hidden');
    document.getElementById('scanResult').classList.add('hidden');
}

// Fetch book info from Google Books API (optional enhancement)
async function fetchBookInfo(isbn) {
    try {
        const response = await fetch(`https://www.googleapis.com/books/v1/volumes?q=isbn:${isbn}`);
        const data = await response.json();
        
        if (data.items && data.items.length > 0) {
            const bookInfo = data.items[0].volumeInfo;
            
            // Auto-fill form fields if empty
            if (bookInfo.title && !document.querySelector('input[name="judul_buku"]').value) {
                document.querySelector('input[name="judul_buku"]').value = bookInfo.title;
            }
            
            if (bookInfo.authors && bookInfo.authors.length > 0 && !document.querySelector('input[name="pengarang"]').value) {
                document.querySelector('input[name="pengarang"]').value = bookInfo.authors.join(', ');
            }
            
            if (bookInfo.publisher && !document.querySelector('input[name="penerbit"]').value) {
                document.querySelector('input[name="penerbit"]').value = bookInfo.publisher;
            }
            
            if (bookInfo.publishedDate && !document.querySelector('input[name="tahun_terbit"]').value) {
                const year = bookInfo.publishedDate.split('-')[0];
                document.querySelector('input[name="tahun_terbit"]').value = year;
            }
            
            if (bookInfo.description && !document.querySelector('textarea[name="deskripsi"]').value) {
                document.querySelector('textarea[name="deskripsi"]').value = bookInfo.description;
            }
            
            // Show success notification
            showNotification('Informasi buku berhasil diambil dari Google Books!', 'success');
        }
    } catch (error) {
        console.error('Error fetching book info:', error);
        // Continue without auto-fill if API fails
    }
}

function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 z-50 px-6 py-4 rounded-xl shadow-lg transform transition-all duration-300 ${
        type === 'success' ? 'bg-green-500' : type === 'error' ? 'bg-red-500' : 'bg-blue-500'
    } text-white font-bold flex items-center gap-3`;
    
    notification.innerHTML = `
        <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'}"></i>
        <span>${message}</span>
    `;
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.style.opacity = '0';
        notification.style.transform = 'translateX(100%)';
        setTimeout(() => notification.remove(), 300);
    }, 3000);
}

// Close modal on ESC key
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape' && !document.getElementById('scannerModal').classList.contains('hidden')) {
        stopBarcodeScanner();
    }
});
</script>
@endsection