@extends('layouts.admin.base-dashboard')

@section('title', 'Cetak Struk')

@section('content')
@php
    $encodedStruk = rawurlencode($struk);
    $rawbtLink = "rawbt:{$encodedStruk}";
    $rawbtLinkCompat = "rawbt://print?text={$encodedStruk}";
@endphp

<div class="container-fluid">
    <h3 class="mb-4">🖨️ Struk Siap Dicetak</h3>

    <div class="card shadow-sm" style="max-width: 400px; margin:auto;">
        <div class="card-body">
            <label class="mb-2 fw-bold">Preview Struk:</label>
            <pre id="struk-preview" style="background: #222; color: #fff; border-radius:10px; padding:18px; user-select:text;">{{ $struk }}</pre>

            <div class="d-flex flex-column gap-2 mt-3">
                <!-- Tombol Clean -->
                <button class="btn btn-success btn-lg mb-2 no-select" id="confirmPrintClean" style="user-select: none;">
                    <i class="zmdi zmdi-print text-white"></i> Cetak
                </button>

                <!-- Tombol Compat -->
                {{-- <button class="btn btn-info btn-lg mb-2 no-select" id="confirmPrintCompat" style="user-select: none;">
                    <i class="zmdi zmdi-print text-white"></i> Cetak Compat
                </button> --}}

                <a href="{{ route('cashiers.indexMobile') }}" class="btn btn-secondary btn-lg">
                    Kembali
                </a>
            </div>
        </div>
    </div>
</div>

@endsection

@push('script')
<script>
    // Trigger Clean → rawbt:
    document.getElementById('confirmPrintClean').addEventListener('click', function() {
        window.location.href = "{{ $rawbtLink }}";
    });

    // Trigger Compat → rawbt://print?text=
    document.getElementById('confirmPrintCompat').addEventListener('click', function() {
        window.location.href = "{{ $rawbtLinkCompat }}";
    });

    function copyStruk() {
        const text = document.getElementById('struk-preview').innerText;
        navigator.clipboard.writeText(text);
        showCopiedToast();
    }

    function showCopiedToast() {
        if (document.getElementById('copy-toast')) return;
        const toast = document.createElement('div');
        toast.id = 'copy-toast';
        toast.innerText = 'Struk berhasil disalin ke clipboard!';
        toast.style.position = 'fixed';
        toast.style.bottom = '20px';
        toast.style.left = '50%';
        toast.style.transform = 'translateX(-50%)';
        toast.style.background = '#007bff';
        toast.style.color = '#fff';
        toast.style.padding = '10px 22px';
        toast.style.borderRadius = '8px';
        toast.style.boxShadow = '0 2px 12px rgba(0,0,0,0.15)';
        toast.style.zIndex = '9999';
        document.body.appendChild(toast);
        setTimeout(() => { toast.remove(); }, 1200);
    }
</script>
@endpush

<style>
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
</style>