# ID Scanner Modal - Setup & Troubleshooting Guide
## ✅ Implementation Complete
### Files Created/Modified:
1. **Livewire Component:** `app/Livewire/IdScannerModal.php`
2. **Modal View:** `resources/views/livewire/id-scanner-modal.blade.php`
3. **Form Include:** `resources/views/filament/forms/components/id-scanner-modal.blade.php`
4. **Form Integration:** `app/Filament/Resources/BookingResource/Forms/BookingForm.php`
---
## How It Works
### 1. Modal Trigger
**Two ways to open the modal:**
**A. Quick Actions Bar (Top of form):**
```php
Action::make('scan_id_card')
->label('Scan ID Card')
->icon('heroicon-o-identification')
->extraAttributes([
'onclick' => "window.dispatchEvent(new CustomEvent('open-id-scanner'))",
]),
```
**B. Guest Repeater (Each guest item):**
```php
Action::make('scan_id')
->label('Scan ID Card')
->icon('heroicon-o-camera')
->extraAttributes([
'onclick' => "window.dispatchEvent(new CustomEvent('open-id-scanner'))",
]),
```
### 2. Modal Display
The modal uses **Alpine.js** (built into Filament) for reactivity:
```blade
<div x-data="{ open: @entangle('isOpen') }"
@open-id-scanner.window="open = true">
<div x-show="open" x-cloak>
<!-- Modal content -->
</div>
</div>
```
### 3. Event Flow
```
User clicks "Scan ID Card"
↓
JavaScript dispatches 'open-id-scanner' event
↓
Alpine.js listens for event and sets open = true
↓
Modal becomes visible
↓
User uploads ID document
↓
Livewire processes file and extracts data (OCR)
↓
Data dispatched back to form fields
↓
Form fields auto-fill with extracted data
```
---
## Testing the Modal
### Step 1: Open Booking Form
```
Navigate to: Bookings → Create Booking or Edit Booking
```
### Step 2: Trigger Modal
**Option A:** Click "Scan ID Card" in Quick Actions (top section)
**Option B:** Go to "Guest Information" tab → Add Guest → Click "Scan ID Card"
### Step 3: Verify Modal Opens
- Modal should appear as overlay
- Background should be dimmed
- Modal should be centered on screen
### Step 4: Test Upload
- Click file input or drag & drop image
- Preview should appear
- Click "Scan & Extract Data"
---
## Troubleshooting
### ❌ Modal Not Showing
**Check 1: Livewire Component Registered**
```bash
php artisan livewire:discover
```
**Check 2: View File Exists**
```bash
# Should exist:
resources/views/livewire/id-scanner-modal.blade.php
resources/views/filament/forms/components/id-scanner-modal.blade.php
```
**Check 3: Browser Console**
Open browser DevTools (F12) and check for JavaScript errors:
```javascript
// Test manually in console:
window.dispatchEvent(new CustomEvent('open-id-scanner'))
```
**Check 4: Alpine.js Loaded**
In browser console:
```javascript
// Should return Alpine object:
Alpine
```
**Check 5: Cache Clear**
```bash
php artisan view:clear
php artisan cache:clear
php artisan config:clear
```
### ❌ Modal Opens But Doesn't Close
**Issue:** Alpine.js state not syncing
**Fix:** Check that `@entangle` is working:
```blade
<div x-data="{ open: @entangle('isOpen') }">
```
**Alternative:** Use pure Alpine:
```blade
<div x-data="{ open: false }" @open-id-scanner.window="open = true">
```
### ❌ File Upload Not Working
**Check 1: Storage Permissions**
```bash
chmod -R 775 storage/app/private
```
**Check 2: Storage Link**
```bash
php artisan storage:link
```
**Check 3: Livewire Config**
```php
// config/livewire.php
'temporary_file_upload' => [
'disk' => 'local',
'rules' => 'file|max:5120', // 5MB
],
```
### ❌ OCR Not Extracting Data
**Issue:** OCR service not implemented
**Current Status:** Placeholder returns empty array
**To Implement:**
**Option 1: Google Cloud Vision**
```bash
composer require google/cloud-vision
```
**Option 2: AWS Textract**
```bash
composer require aws/aws-sdk-php
```
**Option 3: Tesseract OCR**
```bash
composer require thiagoalessio/tesseract_ocr
```
See `BOOKING_BACKEND_IMPLEMENTATION.md` for full OCR integration examples.
---
## Manual Testing Script
### Test 1: Modal Visibility
```javascript
// Open browser console (F12)
// Run this command:
window.dispatchEvent(new CustomEvent('open-id-scanner'))
// Expected: Modal should appear
```
### Test 2: Alpine State
```javascript
// In console, check Alpine data:
Alpine.store('isOpen')
// Or inspect element with x-data
```
### Test 3: Livewire Connection
```javascript
// Check Livewire is loaded:
Livewire
// Check component is registered:
Livewire.all()
```
---
## Quick Fixes
### Fix 1: Force Modal to Show (Debug)
Add to `id-scanner-modal.blade.php`:
```blade
<div x-data="{ open: true }"> <!-- Force open -->
```
### Fix 2: Add Debug Button
Add to any blade file:
```blade
<button onclick="window.dispatchEvent(new CustomEvent('open-id-scanner'))">
Test Modal
</button>
```
### Fix 3: Check Livewire Render
Add to `IdScannerModal.php`:
```php
public function mount()
{
\Log::info('IdScannerModal mounted');
}
public function render()
{
\Log::info('IdScannerModal rendering, isOpen: ' . $this->isOpen);
return view('livewire.id-scanner-modal');
}
```
Then check logs:
```bash
tail -f storage/logs/laravel.log
```
---
## Alternative: Pure Alpine Modal (No Livewire)
If Livewire is causing issues, use pure Alpine:
```blade
<!-- Add to form view -->
<div x-data="{ scannerOpen: false }"
@open-id-scanner.window="scannerOpen = true">
<div x-show="scannerOpen"
x-cloak
class="fixed inset-0 z-50 overflow-y-auto">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75"
@click="scannerOpen = false"></div>
<div class="relative bg-white rounded-lg p-6 max-w-lg mx-auto mt-20">
<h3 class="text-lg font-bold mb-4">Scan ID Card</h3>
<input type="file"
accept="image/*"
class="mb-4"
@change="console.log($event.target.files[0])">
<div class="flex gap-2">
<button @click="scannerOpen = false"
class="px-4 py-2 bg-gray-200 rounded">
Cancel
</button>
<button class="px-4 py-2 bg-blue-600 text-white rounded">
Scan
</button>
</div>
</div>
</div>
</div>
```
---
## Verification Checklist
- [ ] Livewire component exists in `app/Livewire/IdScannerModal.php`
- [ ] View file exists in `resources/views/livewire/id-scanner-modal.blade.php`
- [ ] Include file exists in `resources/views/filament/forms/components/id-scanner-modal.blade.php`
- [ ] ViewField added to BookingForm
- [ ] "Scan ID Card" buttons have onclick handlers
- [ ] Cache cleared (`php artisan view:clear`)
- [ ] Browser console shows no JavaScript errors
- [ ] Alpine.js is loaded (check in console: `Alpine`)
- [ ] Livewire is loaded (check in console: `Livewire`)
- [ ] Modal appears when clicking "Scan ID Card"
---
## Expected Behavior
### ✅ Working Modal:
1. Click "Scan ID Card" button
2. Modal slides in from center
3. Background dims (gray overlay)
4. File input is visible
5. Can upload image
6. Preview shows uploaded image
7. "Scan & Extract Data" button is clickable
8. "Cancel" button closes modal
9. Clicking background closes modal
### ❌ Not Working:
- Button click does nothing
- Console shows errors
- Modal appears but is invisible
- Modal doesn't close
- File upload fails
---
## Support
If modal still not showing after all checks:
1. **Check browser console** for JavaScript errors
2. **Check Laravel logs** for PHP errors
3. **Verify Livewire** is properly installed
4. **Test Alpine.js** with simple example
5. **Clear all caches** (browser + Laravel)
6. **Try alternative** pure Alpine modal
---
## Next Steps
Once modal is working:
1. ✅ Modal opens/closes correctly
2. ⏳ Implement OCR service (Google Vision/AWS/Tesseract)
3. ⏳ Wire up extracted data to form fields
4. ⏳ Add validation and error handling
5. ⏳ Test with real ID documents
---
## Summary
The ID scanner modal is implemented with:
- ✅ Livewire component for backend logic
- ✅ Alpine.js for frontend reactivity
- ✅ Custom event system for triggering
- ✅ File upload with preview
- ✅ Encrypted storage ready
- ⏳ OCR integration (placeholder)
**Current Status:** Modal structure complete, OCR integration pending.