@extends('std-admin::index-container')

@section('content')

    <div class="box">
        <div class="box-header">
            <h3 class="box-title">@transUcFirst('admin.sections.restaurant.printers.title')</h3>
            <br>
            <br>
            @if(companySetting('printer_solution') === 'gcp')
                @if($company->google_id)
                    <i class="fa fa-google"></i> <b>{{ $company->google_name }} ({{ $company->google_email }})</b> &nbsp; &nbsp;
                    <a href="{{ route('oauth.google.revoke', ['redirect-after' => route('admin.restaurant.printers.index')]) }}">
                        <i class="fa fa-times"></i> @transUc('.disconnect_account')
                    </a>
                @else
                    <i class="fa fa-info-circle"></i> <i>@trans('.you_must_log_in')</i> &nbsp; &nbsp;
                    <a href="{{ route('oauth.google.connect', ['redirect-after' => route('admin.restaurant.printers.index')]) }}">
                        <i class="fa fa-google-plus"></i> @transUc('admin.restaurant.printers.index.connect_account')
                    </a>
                @endif
                <div class="pull-right box-tools">
                    @if($company->google_id)
                        <a href="{!! route("admin.restaurant.printers.sync") !!}" class="btn btn-slim btn-primary">
                            <i class="fa fa-refresh"></i>&nbsp; @transUc('.refresh_printer_list')
                        </a>
                        <a href="{!! route("admin.restaurant.printers.diagnose.index") !!}" class="btn btn-slim btn-success">
                            <i class="fa fa-stethoscope"></i>&nbsp; @transUc('.diagnose')
                        </a>
                    @endif
                </div>
            @else
                <div class="pull-right box-tools">
                    <a id="sync-printers" href="#" class="btn btn-slim btn-primary">
                        <i class="fa fa-refresh"></i>&nbsp; @transUc('.refresh_printer_list')
                    </a>
                </div>
            @endif
        </div>
        <div class="box-body no-padding table-responsive">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>#</th>
                    <th>@transUc('models.generic.name')</th>
                    <th>@transUc('admin.sales.sales.tracking_sections')</th>
                    <th>@transUc('models.generic.actions')</th>
                </tr>
                </thead>
                <tbody>
                @foreach($rows as $row)
                    <tr>
                        <td> {{ $row->id }}</td>
                        <td> {{ $row->display_name }}</td>
                        <td>
                            @if($row->trackingSections && count($row->trackingSections))
                                <ul>
                                    @foreach($row->trackingSections as $trackingSection)
                                        <li>{{ $trackingSection->name }}</li>
                                    @endforeach
                                </ul>
                            @else
                                <label class="label label-warning">
                                    @transUc('ui.listing.not_selected')
                                </label>
                            @endif
                        </td>
                        <td style="width: 183px;">
                            <a href="{{ route('admin.restaurant.printers.diagnose.print-test',  $row->id) }}" class="btn btn-slim btn-default">
                                <i class="fa fa-print"></i>&nbsp; @transUc('.print_a_test_page')
                            </a>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <form id="sync-form" action="{{ route('admin.restaurant.printers.qz-sync') }}" method="POST">
        @csrf
    </form>

@endsection

@push('scripts')
    <!-- Required scripts -->
    <script type="text/javascript" src="/assets/qz/js/qz-tray.js"></script>
    <script type="text/javascript" src="/assets/qz/js/qz-tray-helpers.js"></script>

    <script>
        $(function () {
            let $syncBtn  = $('#sync-printers')
            let $syncForm = $('form#sync-form')

            // retry 5 times, pausing 1 second between each attempt
            startConnection({retries: 5, delay: 1})

            $syncBtn.click(async function () {
                console.log('sync start')
                let printers = await findPrinters()

                console.log(printers)
                $.each(printers, function (key, value) {
                    let $input = $("<input>")
                        .attr('type', 'hidden')
                        .attr('name', 'printers[' + key + ']')
                        .attr('value', value)
                    $syncForm.append($input)
                })

                $syncForm.submit()
            })
        })
    </script>
@endpush