@extends('layouts.app')

@section('title', 'Pengaturan QRIS')

@section('content')
<div class="row">
    <div class="col-12">
        <h2 class="mb-4"><i class="fas fa-qrcode me-2"></i>Pengaturan QR Code & QRIS</h2>
    </div>
</div>

<!-- QRIS Settings -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-credit-card me-2"></i>Pengaturan QRIS</h5>
            </div>
            <div class="card-body">
                @if(session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @endif
                
                <form action="{{ route('admin.qrcode.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="qrisName" class="form-label">Nama QRIS</label>
                                <input type="text" class="form-control" id="qrisName" name="name" 
                                       value="{{ $qris->name }}" placeholder="Contoh: QRIS Toko Kami">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="qrisImage" class="form-label">Gambar QRIS</label>
                                <input type="file" class="form-control" id="qrisImage" name="image" accept="image/*">
                                <small class="text-muted">Format: JPG, PNG, GIF, SVG (Max 2MB)</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Preview QRIS Saat Ini</label>
                        <div class="border rounded p-3 text-center bg-light">
                            @if($qris->image_path && file_exists(public_path('images/qris/' . $qris->image_path)))
                                <img src="{{ asset('images/qris/' . $qris->image_path) }}" 
                                     alt="QRIS" style="max-width: 250px; max-height: 250px;">
                            @else
                                <div class="text-muted py-4">
                                    <i class="fas fa-image fa-3x mb-2"></i>
                                    <p class="mb-0">Belum ada gambar QRIS</p>
                                </div>
                            @endif
                        </div>
                    </div>
                    
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i> Simpan Pengaturan QRIS
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Menu QR Code Generator -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0"><i class="fas fa-qrcode me-2"></i>Generate QR Code Menu</h5>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title mb-4">Generate QR Code</h5>
                <form id="qrForm">
                    <div class="mb-3">
                        <label for="menuUrl" class="form-label">URL Menu</label>
                        <input type="url" class="form-control" id="menuUrl" 
                               value="{{ url('/menu') }}" required>
                    </div>
                    <div class="mb-3">
                        <label for="qrSize" class="form-label">Ukuran QR (px)</label>
                        <select class="form-select" id="qrSize">
                            <option value="150">150 x 150</option>
                            <option value="200" selected>200 x 200</option>
                            <option value="250">250 x 250</option>
                            <option value="300">300 x 300</option>
                            <option value="400">400 x 400</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="restaurantName" class="form-label">Nama Restauran</label>
                        <input type="text" class="form-control" id="restaurantName" 
                               value="Menu QR Restaurant" placeholder="Masukkan nama restauran">
                    </div>
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-qrcode me-1"></i> Generate QR Code
                        </button>
                        <button type="button" class="btn btn-primary" id="printQr">
                            <i class="fas fa-print me-1"></i> Print QR Code
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card">
            <div class="card-body text-center">
                <h5 class="card-title mb-4">QR Code Preview</h5>
                <div id="qrResult" class="mb-3">
                    <img id="qrImage" src="" alt="QR Code" style="display: none; max-width: 100%;">
                    <div id="qrPlaceholder" class="text-muted py-5">
                        <i class="fas fa-qrcode fa-5x"></i>
                        <p class="mt-3">QR Code akan muncul di sini</p>
                    </div>
                </div>
                <div id="qrInfo" style="display: none;">
                    <p class="text-muted mb-2" id="urlDisplay"></p>
                    <a href="#" id="downloadQr" class="btn btn-outline-primary" download="menu-qr.png">
                        <i class="fas fa-download me-1"></i> Download QR Code
                    </a>
                </div>
            </div>
        </div>
        
        <!-- Print Template -->
        <div class="card mt-3">
            <div class="card-body">
                <h5 class="card-title mb-3">Cara Penggunaan</h5>
                <ol class="mb-0">
                    <li>Generate QR Code dengan URL menu</li>
                    <li>Download atau Print QR Code</li>
                    <li>Tempelkan QR Code di meja/restoran</li>
                    <li>Customer scan QR untuk lihat menu</li>
                </ol>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
<script>
document.getElementById('qrForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const url = document.getElementById('menuUrl').value;
    const size = parseInt(document.getElementById('qrSize').value);
    const restaurantName = document.getElementById('restaurantName').value || 'Menu QR';
    
    const canvas = document.createElement('canvas');
    QRCode.toCanvas(canvas, url, {
        width: size,
        margin: 2,
        color: {
            dark: '#000000',
            light: '#ffffff'
        }
    }, function(error) {
        if (error) {
            console.error(error);
            alert('Gagal generate QR Code!');
            return;
        }
        
        const qrImage = document.getElementById('qrImage');
        const qrPlaceholder = document.getElementById('qrPlaceholder');
        const qrInfo = document.getElementById('qrInfo');
        const urlDisplay = document.getElementById('urlDisplay');
        const downloadQr = document.getElementById('downloadQr');
        
        qrImage.src = canvas.toDataURL('image/png');
        qrImage.style.display = 'block';
        qrPlaceholder.style.display = 'none';
        
        urlDisplay.textContent = url;
        qrInfo.style.display = 'block';
        
        downloadQr.href = canvas.toDataURL('image/png');
        downloadQr.download = 'menu-qr-' + restaurantName.toLowerCase().replace(/\s+/g, '-') + '.png';
    });
});

document.getElementById('printQr').addEventListener('click', function() {
    const qrImage = document.getElementById('qrImage');
    if (!qrImage.src || qrImage.style.display === 'none') {
        alert('Silakan generate QR Code terlebih dahulu!');
        return;
    }
    
    const printWindow = window.open('', '_blank');
    printWindow.document.write(`
        <!DOCTYPE html>
        <html>
        <head>
            <title>Print QR Code - Menu QR</title>
            <style>
                body {
                    font-family: Arial, sans-serif;
                    text-align: center;
                    padding: 40px;
                }
                img {
                    max-width: 300px;
                    margin: 20px 0;
                }
                .restaurant-name {
                    font-size: 24px;
                    font-weight: bold;
                    margin-bottom: 10px;
                }
                .instructions {
                    color: #666;
                    margin-top: 20px;
                }
                @media print {
                    body { padding: 20px; }
                }
            </style>
        </head>
        <body>  
            <div class="restaurant-name">${document.getElementById('restaurantName').value || 'Menu QR Restaurant'}</div>
            <img src="${qrImage.src}" alt="QR Code">
            <p class="url">${document.getElementById('menuUrl').value}</p>
            <p class="instructions">Scan QR Code untuk melihat menu</p>
            <script>window.onload = function() { window.print(); window.close(); }<\/script>
        </body>
        </html>
    `);
    printWindow.document.close();
});
</script>
@endpush
@endsection