<?= link_tag('assets/css/qr-code.css?v='.asset_version('assets/css/qr-code.css')); ?>

<div class="qr-generator-page" id="qrCodeApp">
    <div class="qr-generator-shell">
        <div class="qr-page-heading">
            <div class="qr-heading-icon"><i class="fa fa-qrcode"></i></div>
            <div>
                <h1>Generator QR Code</h1>
                <p>Buat QR Code dari tautan, teks, nomor telepon, atau informasi lainnya.</p>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-7">
                <div class="qr-card">
                    <div class="qr-card-title">Isi QR Code</div>
                    <label class="qr-field">
                        <span>Teks atau tautan</span>
                        <textarea id="qrContent" rows="7" maxlength="1000" placeholder="Contoh: https://website-anda.com"></textarea>
                        <small><span id="qrCharacterCount">0</span>/1.000 karakter</small>
                    </label>

                    <div class="qr-design-heading"><strong>Desain QR Code</strong></div>
                    <div class="qr-design-tabs" role="tablist">
                        <button type="button" class="is-active" data-tab="frame">Frame</button>
                        <button type="button" data-tab="shape">Bentuk</button>
                        <button type="button" data-tab="logo">Logo</button>
                        <button type="button" data-tab="level">Level</button>
                    </div>

                    <div class="qr-design-panel is-active" data-panel="frame">
                        <div class="qr-option-title">Pilih frame QR Code</div>
                        <div class="qr-frame-options" id="qrFrameStyles">
                            <button type="button" class="is-active" data-value="none"><span class="frame-none"><i class="fa fa-ban"></i></span><small>Tanpa frame</small></button>
                            <button type="button" data-value="envelope"><span class="frame-envelope"><i></i></span><small>Amplop</small></button>
                            <button type="button" data-value="video"><span class="frame-thumb"><i class="fa fa-youtube-play"></i></span><small>Video</small></button>
                            <button type="button" data-value="tray"><span class="frame-thumb"><i class="fa fa-hand-paper-o"></i></span><small>Nampan tangan</small></button>
                            <button type="button" data-value="sketch"><span class="frame-thumb"><i class="fa fa-pencil"></i></span><small>Sketsa</small></button>
                            <button type="button" data-value="beer"><span class="frame-thumb"><i class="fa fa-beer"></i></span><small>Beer mug</small></button>
                            <button type="button" data-value="scooter"><span class="frame-thumb"><i class="fa fa-motorcycle"></i></span><small>Skuter</small></button>
                            <button type="button" data-value="coffee"><span class="frame-thumb"><i class="fa fa-coffee"></i></span><small>Cangkir kopi</small></button>
                            <button type="button" data-value="chef"><span class="frame-thumb"><i class="fa fa-cutlery"></i></span><small>Chef</small></button>
                            <button type="button" data-value="pointing"><span class="frame-thumb"><i class="fa fa-hand-o-up"></i></span><small>Tangan tunjuk</small></button>
                            <button type="button" data-value="plain_text"><span class="frame-thumb"><i class="fa fa-pencil-square-o"></i></span><small>Teks bebas</small></button>
                            <button type="button" data-value="separate_footer"><span class="frame-caption"><i></i></span><small>Footer pisah</small></button>
                            <button type="button" data-value="speech_bottom"><span class="frame-thumb"><i class="fa fa-comment"></i></span><small>Label balon</small></button>
                            <button type="button" data-value="solid_footer"><span class="frame-card"><i></i></span><small>Footer solid</small></button>
                            <button type="button" data-value="outline_text"><span class="frame-thumb"><i class="fa fa-square-o"></i></span><small>Outline</small></button>
                            <button type="button" data-value="smartphone"><span class="frame-thumb"><i class="fa fa-mobile-phone"></i></span><small>Smartphone</small></button>
                            <button type="button" data-value="floating_label"><span class="frame-thumb"><i class="fa fa-minus-square"></i></span><small>Label mengambang</small></button>
                            <button type="button" data-value="clipboard"><span class="frame-thumb"><i class="fa fa-clipboard"></i></span><small>Clipboard</small></button>
                            <button type="button" data-value="triangle_footer"><span class="frame-thumb"><i class="fa fa-caret-up"></i></span><small>Footer segitiga</small></button>
                            <button type="button" data-value="spiral"><span class="frame-thumb"><i class="fa fa-book"></i></span><small>Notebook spiral</small></button>
                            <button type="button" data-value="arrow_script"><span class="frame-thumb"><i class="fa fa-long-arrow-up"></i></span><small>Panah tulisan</small></button>
                            <button type="button" data-value="receipt"><span class="frame-thumb"><i class="fa fa-file-text-o"></i></span><small>Struk</small></button>
                            <button type="button" data-value="bow"><span class="frame-thumb"><i class="fa fa-gift"></i></span><small>Pita hadiah</small></button>
                            <button type="button" data-value="script"><span class="frame-thumb"><i class="fa fa-pencil"></i></span><small>Tulisan tangan</small></button>
                            <button type="button" data-value="speech_top"><span class="frame-top"><i></i></span><small>Balon atas</small></button>
                            <button type="button" data-value="ticket"><span class="frame-thumb"><i class="fa fa-ticket"></i></span><small>Tiket</small></button>
                            <button type="button" data-value="drink"><span class="frame-thumb"><i class="fa fa-glass"></i></span><small>Gelas minuman</small></button>
                            <button type="button" data-value="ribbon"><span class="frame-thumb"><i class="fa fa-bookmark"></i></span><small>Pita</small></button>
                            <button type="button" data-value="takeaway"><span class="frame-thumb"><i class="fa fa-trash-o"></i></span><small>Takeaway cup</small></button>
                            <button type="button" data-value="cafe_bag"><span class="frame-thumb"><i class="fa fa-circle-o"></i></span><small>Frame bundar</small></button>
                            <button type="button" data-value="round_display"><span class="frame-thumb"><i class="fa fa-circle"></i></span><small>Display bundar</small></button>
                            <button type="button" data-value="shopping_bag"><span class="frame-thumb"><i class="fa fa-shopping-bag"></i></span><small>Tas belanja</small></button>
                        </div>
                        <div class="qr-frame-settings is-disabled" id="qrFrameSettings">
                            <label class="qr-field"><span>Teks frame</span><input type="text" id="qrFrameText" value="Scan me!" maxlength="32" placeholder="Contoh: Scan me!"></label>
                            <label class="qr-field qr-color-field"><span>Warna teks</span><span class="qr-color-control"><input type="color" id="qrFrameTextColor" value="#ffffff"><code id="qrFrameTextColorText">#FFFFFF</code></span></label>
                            <label class="qr-field qr-color-field"><span>Warna frame</span><span class="qr-color-control"><input type="color" id="qrFrameColor" value="#111827"><code id="qrFrameColorText">#111827</code></span></label>
                        </div>
                        <p class="qr-panel-note"><i class="fa fa-info-circle"></i> Frame ikut disimpan ke dalam PNG. Area aman QR tetap dipertahankan agar mudah dipindai.</p>
                    </div>

                    <div class="qr-design-panel" data-panel="shape">
                        <div class="qr-option-title">Bentuk pola QR</div>
                        <div class="qr-style-options" id="qrModuleStyles">
                            <button type="button" class="is-active" data-value="square"><span class="pattern-square"></span><small>Kotak</small></button>
                            <button type="button" data-value="rounded"><span class="pattern-rounded"></span><small>Bulat</small></button>
                            <button type="button" data-value="dots"><span class="pattern-dots"></span><small>Titik</small></button>
                            <button type="button" data-value="diamond"><span class="pattern-diamond"></span><small>Berlian</small></button>
                        </div>
                        <div class="qr-option-title qr-eye-title">Bentuk mata QR</div>
                        <div class="qr-style-options qr-eye-options" id="qrEyeStyles">
                            <button type="button" class="is-active" data-value="square"><span class="eye-square"></span><small>Kotak</small></button>
                            <button type="button" data-value="rounded"><span class="eye-rounded"></span><small>Bulat</small></button>
                            <button type="button" data-value="circle"><span class="eye-circle"></span><small>Lingkaran</small></button>
                        </div>
                    </div>

                    <div class="qr-design-panel" data-panel="logo">
                        <div class="qr-option-title">Tambahkan logo di tengah</div>
                        <label class="qr-logo-drop" id="qrLogoDrop">
                            <input type="file" id="qrLogo" accept="image/png,image/jpeg">
                            <span class="qr-logo-placeholder" id="qrLogoPlaceholder"><i class="fa fa-cloud-upload"></i><strong>Tarik logo ke sini atau klik untuk memilih</strong><small>JPG, JPEG, atau PNG — maksimal 2 MB</small></span>
                            <span class="qr-logo-selected" id="qrLogoSelected"><img id="qrLogoThumb" alt="Logo"><span><strong id="qrLogoName"></strong><small>Klik untuk mengganti logo</small></span></span>
                        </label>
                        <button type="button" class="qr-remove-logo" id="qrRemoveLogo"><i class="fa fa-trash-o"></i> Hapus logo</button>
                        <p class="qr-panel-note"><i class="fa fa-shield"></i> Jika logo digunakan, level otomatis ditingkatkan ke H agar QR lebih aman dipindai.</p>
                    </div>

                    <div class="qr-design-panel" data-panel="level">
                        <div class="qr-option-title">Pilih tingkat koreksi kesalahan</div>
                        <div class="qr-level-options" id="qrLevelOptions">
                            <button type="button" data-value="L"><span>L</span><strong>Rendah</strong><small>±7%</small></button>
                            <button type="button" class="is-active" data-value="M"><span>M</span><strong>Sedang</strong><small>±15%</small></button>
                            <button type="button" data-value="Q"><span>Q</span><strong>Tinggi</strong><small>±25%</small></button>
                            <button type="button" data-value="H"><span>H</span><strong>Maksimal</strong><small>±30%</small></button>
                        </div>
                    </div>

                    <div class="qr-form-grid">
                        <label class="qr-field">
                            <span>Ukuran gambar</span>
                            <select id="qrSize">
                                <option value="300">300 x 300 px</option>
                                <option value="500" selected>500 x 500 px</option>
                                <option value="700">700 x 700 px</option>
                                <option value="1000">1000 x 1000 px</option>
                            </select>
                        </label>
                        <label class="qr-field">
                            <span>Koreksi kesalahan</span>
                            <select id="qrLevel" aria-label="Koreksi kesalahan">
                                <option value="L">Rendah (L)</option>
                                <option value="M" selected>Sedang (M)</option>
                                <option value="Q">Tinggi (Q)</option>
                                <option value="H">Maksimal (H)</option>
                            </select>
                        </label>
                        <label class="qr-field qr-color-field">
                            <span>Warna QR</span>
                            <span class="qr-color-control"><input type="color" id="qrForeground" value="#111827"><code id="qrForegroundText">#111827</code></span>
                        </label>
                        <label class="qr-field qr-color-field">
                            <span>Warna latar</span>
                            <span class="qr-color-control"><input type="color" id="qrBackground" value="#ffffff"><code id="qrBackgroundText">#FFFFFF</code></span>
                        </label>
                    </div>

                    <div class="qr-actions">
                        <button type="button" class="btn qr-primary-btn" id="qrGenerate"><i class="fa fa-magic"></i> Buat QR Code</button>
                        <button type="button" class="btn qr-secondary-btn" id="qrReset"><i class="fa fa-refresh"></i> Atur Ulang</button>
                    </div>
                    <p class="qr-auto-note"><i class="fa fa-bolt"></i> Pratinjau diperbarui otomatis saat isi atau desain berubah.</p>
                    <div class="qr-message" id="qrMessage" role="alert"></div>
                </div>
            </div>

            <div class="col-lg-5">
                <div class="qr-card qr-preview-card">
                    <div class="qr-card-title">Pratinjau</div>
                    <div class="qr-preview" id="qrPreview">
                        <div class="qr-empty-state" id="qrEmptyState">
                            <i class="fa fa-qrcode"></i>
                            <strong>QR Code belum dibuat</strong>
                            <span>Mulai ketik pada kolom isi QR Code.</span>
                        </div>
                        <img id="qrImage" alt="Pratinjau QR Code">
                    </div>
                    <button type="button" class="btn qr-download-btn" id="qrDownload" disabled><i class="fa fa-download"></i> Unduh PNG</button>
                    <p class="qr-tip"><i class="fa fa-info-circle"></i> Uji pindai QR Code sebelum digunakan untuk produksi cetak.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
window.qrCodeConfig = {
    endpoint: <?= json_encode(base_url('qr-code/generate')); ?>,
    frameBase: <?= json_encode(base_url('assets/qr-frames/')); ?>
};
</script>
<script src="<?= base_url('assets/vendor/vue/vue.global.prod.js?v='.asset_version('assets/vendor/vue/vue.global.prod.js')); ?>"></script>
<script src="<?= base_url('assets/js/qr-code-vue.js?v='.asset_version('assets/js/qr-code-vue.js')); ?>"></script>
