@extends('layouts.app')

@section('title', 'Skeniraj račun - Checkpoint')

@section('content')
<div class="container py-4">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card card-modern">
                <div class="card-header">
                    <h4 class="card-title">
                        <i class="fas fa-qrcode me-2"></i>Skeniraj fiskalni račun
                    </h4>
                </div>
                <div class="card-body">
                    <div class="scanner-container mb-4">
                        <video id="video-preview" class="w-100" style="display:none;"></video>
                        <canvas id="canvas-preview" style="display:none;"></canvas>
                        <div class="scanner-overlay" id="scanner-overlay" style="display:none;"></div>
                        
                        <div id="scanner-placeholder" class="text-center py-5">
                            <i class="fas fa-camera fa-4x text-muted mb-3"></i>
                            <h5>Kamera nije pokrenuta</h5>
                            <p class="text-muted">Kliknite dugme ispod da pokrenete kameru</p>
                        </div>
                    </div>
                    
                    <div class="text-center mb-4">
                        <button id="start-scanner" class="btn btn-primary btn-lg">
                            <i class="fas fa-camera me-2"></i>Pokreni kameru
                        </button>
                        <button id="stop-scanner" class="btn btn-danger btn-lg" style="display:none;">
                            <i class="fas fa-stop me-2"></i>Zaustavi kameru
                        </button>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Tip računa</label>
                                <div class="custom-control custom-radio">
                                    <input type="radio" id="type-personal" name="receipt_type" value="personal" class="custom-control-input" checked>
                                    <label class="custom-control-label" for="type-personal">Lični</label>
                                </div>
                                <div class="custom-control custom-radio">
                                    <input type="radio" id="type-business" name="receipt_type" value="business" class="custom-control-input">
                                    <label class="custom-control-label" for="type-business">Poslovni</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="is-warranty">
                                <label class="form-check-label" for="is-warranty">
                                    Račun sa garancijom
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Success Message -->
                    <div id="scan-success" class="alert alert-success" style="display:none;">
                        <h5 class="alert-heading"><i class="fas fa-check-circle me-2"></i>Uspešno skenirano!</h5>
                        <p class="mb-0">Račun je uspešno skeniran i sačuvan.</p>
                        <hr>
                        <div id="scan-details"></div>
                        <a id="view-receipt" href="#" class="btn btn-success btn-sm mt-2">
                            <i class="fas fa-eye me-1"></i>Prikaži račun
                        </a>
                    </div>
                    
                    <!-- Error Message -->
                    <div id="scan-error" class="alert alert-danger" style="display:none;">
                        <h5 class="alert-heading"><i class="fas fa-exclamation-triangle me-2"></i>Greška</h5>
                        <p id="error-message" class="mb-0"></p>
                    </div>
                    
                    <!-- Manual Entry -->
                    <div class="text-center mt-4">
                        <a href="{{ route('receipts.create') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-keyboard me-2"></i>Ručni unos računa
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- Instructions -->
            <div class="card card-modern mt-4">
                <div class="card-body">
                    <h5 class="card-title">Uputstvo za skeniranje</h5>
                    <ol class="mb-0">
                        <li>Kliknite na dugme "Pokreni kameru" iznad</li>
                        <li>Dozvolite pristup kameri kada vas browser pita</li>
                        <li>Usmerite kameru na QR kod na fiskalnom računu</li>
                        <li>Držite telefon/kameru stabilno dok se QR kod ne skenira</li>
                        <li>Račun će biti automatski sačuvan nakon skeniranja</li>
                    </ol>
                    
                    <div class="alert alert-info mt-3 mb-0">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Napomena:</strong> QR kod se obično nalazi na dnu fiskalnog računa.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- Load jsQR library -->
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>

<script>
$(document).ready(function() {
    let video = document.getElementById('video-preview');
    let canvas = document.getElementById('canvas-preview');
    let context = canvas.getContext('2d');
    let scanning = false;
    let stream = null;
    
    // Start scanner
    $('#start-scanner').click(function() {
        startScanner();
    });
    
    // Stop scanner
    $('#stop-scanner').click(function() {
        stopScanner();
    });
    
    function startScanner() {
        $('#scanner-placeholder').hide();
        $('#scan-success').hide();
        $('#scan-error').hide();
        
        // Get user media
        navigator.mediaDevices.getUserMedia({
            video: {
                facingMode: 'environment',
                width: { ideal: 1280 },
                height: { ideal: 720 }
            }
        })
        .then(function(mediaStream) {
            stream = mediaStream;
            video.srcObject = stream;
            video.setAttribute('playsinline', true); // iOS compatibility
            video.style.display = 'block';
            $('#scanner-overlay').show();
            $('#start-scanner').hide();
            $('#stop-scanner').show();
            
            video.play();
            scanning = true;
            requestAnimationFrame(scan);
        })
        .catch(function(error) {
            console.error('Camera error:', error);
            $('#scan-error').show();
            $('#error-message').text('Nije moguće pristupiti kameri. Molimo proverite dozvole.');
        });
    }
    
    function stopScanner() {
        scanning = false;
        
        if (stream) {
            stream.getTracks().forEach(track => track.stop());
            stream = null;
        }
        
        video.style.display = 'none';
        $('#scanner-overlay').hide();
        $('#scanner-placeholder').show();
        $('#start-scanner').show();
        $('#stop-scanner').hide();
    }
    
    function scan() {
        if (!scanning) return;
        
        if (video.readyState === video.HAVE_ENOUGH_DATA) {
            canvas.height = video.videoHeight;
            canvas.width = video.videoWidth;
            context.drawImage(video, 0, 0, canvas.width, canvas.height);
            
            const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
            const code = jsQR(imageData.data, imageData.width, imageData.height, {
                inversionAttempts: "dontInvert"
            });
            
            if (code) {
                console.log('QR Code found:', code.data);
                processQRCode(code.data);
                return; // Stop scanning after successful read
            }
        }
        
        requestAnimationFrame(scan);
    }
    
    function processQRCode(qrData) {
        // Stop scanning
        stopScanner();
        
        // Get receipt type
        const receiptType = $('input[name="receipt_type"]:checked').val();
        const isWarranty = $('#is-warranty').is(':checked');
        
        // Send to server
        $.ajax({
            url: '{{ route("api.receipts.ingest-qr") }}',
            method: 'POST',
            data: {
                qr_data: qrData,
                receipt_type: receiptType,
                is_warranty: isWarranty
            },
            success: function(response) {
                if (response.success) {
                    $('#scan-success').show();
                    $('#scan-details').html(`
                        <p class="mb-1"><strong>Prodavac:</strong> ${response.data.seller_name}</p>
                        <p class="mb-1"><strong>Broj računa:</strong> ${response.data.receipt_number}</p>
                        <p class="mb-1"><strong>Datum:</strong> ${response.data.receipt_datetime}</p>
                        <p class="mb-0"><strong>Iznos:</strong> ${response.data.total_amount.toFixed(2)} RSD</p>
                    `);
                    $('#view-receipt').attr('href', `/receipts/${response.receipt_id}`);
                    
                    // Vibrate on success (mobile)
                    if (navigator.vibrate) {
                        navigator.vibrate(200);
                    }
                } else {
                    $('#scan-error').show();
                    $('#error-message').text(response.message || 'Greška prilikom skeniranja računa.');
                }
            },
            error: function(xhr) {
                $('#scan-error').show();
                let message = 'Greška prilikom komunikacije sa serverom.';
                
                if (xhr.status === 409) {
                    message = 'Ovaj račun je već skeniran.';
                } else if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }
                
                $('#error-message').text(message);
            }
        });
    }
    
    // Clean up on page leave
    $(window).on('beforeunload', function() {
        if (stream) {
            stream.getTracks().forEach(track => track.stop());
        }
    });
});
</script>
@endpush