@extends(config('admin_theme.layout', 'admin.layout.master'))
@section('title')
    {{ $current_route->{'name_' . trans('admin.lang')} }}
@stop
@section('page-breadcrumb')
<!-- start page title -->
    <div class="row">
        <div class="col-sm-6">
            <div class="page-title-box">
                <h4>{{ $current_route->{'name_' . trans('admin.lang')} }}</h4>
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">@Lang('admin.home')</a></li>
                    <li class="breadcrumb-item">{{ $current_route->{'name_' . trans('admin.lang')} }}</li>
                    <li class="breadcrumb-item active">@Lang('admin.add')</li>
                </ol>
            </div>
        </div>
    </div>
<!-- end page title -->
@stop
@section('page-content')
    @include(config('admin_theme.view_prefix', 'admin').'.layout.error')
    <form role="form" method="post" action="">
        <div class="row mb-3">
            <div class="form-group mb-3  col-md-3 col-sm-12">
                <label class="col-form-label" for="item_name">@Lang('admin.favorite_name')<span class="require">*</span></label>
                <input type="text" autocomplete="off" class="form-control" value="{{ $info->favorite_name }}" name="favorite_name">
            </div>
            <div class="form-group mb-3  col-md-3 col-sm-12">
                <label class="col-form-label" for="color">@Lang('admin.color')</label>
                <input type="color" class="form-control" value="{{ $info->color }}" name="color">
            </div>
            <div class="form-group mb-3  col-md-3 col-sm-12">
                <label class="col-form-label" for="font_color">@Lang('admin.font_color')</label>
                <input type="color" class="form-control" value="{{ $info->font_color }}" name="font_color">
            </div>
            <div class="form-group mb-3  col-md-3 col-sm-12">
                <label for="store_id">@Lang('admin.store_id')<span class="require">*</span></label>
                <select class="form-control" id="store_id" name="store_id">
                    @foreach ($stores as $item)
                <option value="{{ $item->id }}" selected>
                        {{ $item->{'store_name_' . trans('admin.lang')} }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group mb-3  col-md-3 col-sm-12">
            <label class="col-form-label" for="font_color">@Lang('admin.marchent-header')</label>
                <input type="text" autocomplete="off" class="form-control" value="{{ $info->printer_title }}" name="printer_title">
        </div>
        <div class="form-group mb-3 col-md-6 col-sm-12">
            <label for="name">@Lang('admin.default_print')<span class="require">*</span></label>
            <select id="default_print" name="printer_name" class="form-control">
                <option>@lang('admin.select')</option>
            </select>
        </div>
    </div>
    <div class="text-center">
        <button id="test_btn" class="btn btn-lg"
            style="background-color: #000000;color:#ffffff">{{ __('admin.test_btn_title') }}</button>
    </div>
    <div class="form-actions mt-5">
        <button id="save" type="submit" class="btn btn-success">@Lang('admin.do')</button>
        <a href="{{ route('favorite.view') }}" type="button" class="btn btn-secondary">@Lang('admin.cancel')</a>
        {{ csrf_field() }}
    </div>
    </form>
@stop
@section('js')
    <script src="{{ url('qz-tray.js') }}" type="text/javascript"></script>
    <script>
$(function () {
// Global variable to store printer data
var printerData = [];

// Fetch printer data and store it in the global variable
function findPrinters() {
        @if($psetting && $psetting->txt_file!='')
qz.security.setCertificatePromise(function (resolve, reject) {
                           fetch("{{ url($psetting->txt_file)}}", {cache: 'no-store', headers: {'Content-Type': 'text/plain'}})
                                   .then(function (data) {
                                       data.ok ? resolve(data.text()) : reject(data.text());
                                   });
                       });
                       qz.security.setSignatureAlgorithm("SHA512"); // Since 2.1
                       qz.security.setSignaturePromise(function (toSign) {
                           return function (resolve, reject) {
                               fetch("{{url('admin/printKeys/'.$psetting->user_id)}}?request=" + toSign, {cache: 'no-store', headers: {'Content-Type': 'text/plain'}})
                                       .then(function (data) {
                                           data.ok ? resolve(data.text()) : reject(data.text());
                                       });
                           };
                       });
        @endif
    qz.websocket.connect().then(() => {
        qz.printers.find().then(function(data) {
            // Store the printer data in the global variable
            printerData = data;
            // Populate the default_print select
            populateSelectOptions(document.getElementById('default_print'), data,'{{ $info->printer_name }}');
            // Populate the extra_print select options for all existing elements
            populateExtraPrintOptions();
        }).catch(function(e) { console.error(e); });
    });
}

// Function to populate options in a select element
function populateSelectOptions(selectElement, data,selectedValue) {
    selectElement.innerHTML = ''; // Clear existing options
    var option = document.createElement('option');
        option.value ="";
        option.text = "@lang('admin.select')";
        selectElement.appendChild(option);
    for (var i = 0; i < data.length; i++) {
        var option = document.createElement('option');
        option.value = data[i];
        option.text = data[i];
        selectElement.appendChild(option);
        if (data[i] === selectedValue) {
            option.selected = true; // Set this option as selected
        }
    }
}

// Function to populate options in all extra_print selects
function populateExtraPrintOptions() {
    var extraPrintElements = document.getElementsByClassName('extra_print');
    for (var i = 0; i < extraPrintElements.length; i++) {
        populateSelectOptions(extraPrintElements[i], printerData,extraPrintElements[i].getAttribute('data-name'));
    }
}

// Initialize printers on page load
findPrinters();
 
});
    </script>
    <script>
$(document).on('change', '[name="color"]', function() {
$("#test_btn").css('background-color', $(this).val());
})
$(document).on('change', '[name="font_color"]', function() {
$("#test_btn").css('color', $(this).val());
})
    </script>
@stop