@extends('layouts.master')
@section('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/filepond/4.30.6/filepond.css"
        integrity="sha512-+9N9eHaPFoACOB0WABsAByw8rE3wPrCdY9DSUS5vM7qjss4w9g8CcKHDULxhVL/bg3zNVad4TIRUEdSujIjxcw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css"
        rel="stylesheet" />
    <style>
        .error {
            color: red;
        }
    </style>
@endsection
@section('title')
    Test Print
@endsection
@section('content')
    <main>
        <div class="row">
            <div class="col-xl-2"></div>
            <div class="col-xl-8">
                <div class="card">
                    <div class="card-header d-flex align-items-center">
                        <h5 class="card-title mb-0 flex-grow-1">
                            Test Print
                        </h5>
                    </div>

                    <select id="selectedPrinter1"></select>
                    <button onclick="savePrinter1()">Save</button>
                    <select id="selectedPrinter2"></select>
                    <button onclick="savePrinter2()">Save</button>

                    <button onclick="print1()">Print 1</button>
                    <button onclick="print2()">Print 2</button>
                    <button onclick="printBoth()">Print Both</button>

                </div>
            </div>
        </div>
    </main>
@endsection
@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"
        integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="{{ URL::asset('/assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/qz-tray@2.2.5/qz-tray.min.js "></script>

    <script>
        $('#selectedPrinter1').select2();
        $('#selectedPrinter2').select2();
        let printer1 = null;
        let printer2 = null;
        $(document).ready(function() {
            qz.websocket.connect()
                .then(() => qz.printers.find())
                .then(printers => {
                    const selected1 = document.getElementById('selectedPrinter1');
                    const selected2 = document.getElementById('selectedPrinter2');
                    printers.forEach(printer => {
                        const opt = document.createElement('option');
                        opt.value = opt.textContent = printer;
                        selected1.appendChild(opt);
                    });
                    printers.forEach(printer => {
                        const opt = document.createElement('option');
                        opt.value = opt.textContent = printer;
                        selected2.appendChild(opt);
                    });
                    if (localStorage.getItem('printer1')) {
                        printer1 = localStorage.getItem('printer1');
                    }
                    if (localStorage.getItem('printer2')) {
                        printer2 = localStorage.getItem('printer2');
                    }
                    if (printer1 != null) {
                        $('#selectedPrinter1').val(printer1).trigger('change');

                    }
                    if (printer2 != null) {
                        $('#selectedPrinter2').val(printer2).trigger('change');
                    }

                });
        });

        function print1() {
            const printer = document.getElementById('selectedPrinter1').value;

            if (!printer) {
                alert("Please select a printer.");
                return;
            }

            const config = qz.configs.create(printer);
            const data = ["Printing to: " + printer];

            qz.print(config, data)
                .then(() => alert("Print success"))
                .catch(err => alert("Error: " + err.message));
        }

        function print2() {
            const printer = document.getElementById('selectedPrinter2').value;

            if (!printer) {
                alert("Please select a printer.");
                return;
            }

            const config = qz.configs.create(printer);
            const data = ["Printing to: " + printer];

            qz.print(config, data)
                .then(() => alert("Print success"))
                .catch(err => alert("Error: " + err.message));
        }

        function printBoth() {
            const printer1 = document.getElementById('selectedPrinter1').value;
            const printer2 = document.getElementById('selectedPrinter2').value;

            if (!printer1 || !printer2) {
                alert("Please select both printers.");
                return;
            }

            const config1 = qz.configs.create(printer1);
            const data1 = ["Printing to: " + printer1];

            const config2 = qz.configs.create(printer2);
            const data2 = ["Printing to: " + printer2];

            qz.print(config1, data1)
                .then(() => qz.print(config2, data2))
                .then(() => alert("Print success"))
                .catch(err => alert("Error: " + err.message));
        }

        function savePrinter1() {
            printer1 = document.getElementById('selectedPrinter1').value;
            localStorage.setItem('printer1', printer1);
            alert('saved');
        }

        function savePrinter2() {
            printer2 = document.getElementById('selectedPrinter2').value;
            localStorage.setItem('printer2', printer2);
            alert('saved');
        }
    </script>
@endsection