@extends('adminlte::page')

@section('content_header')
<h1>@lang('global.Settings')</h1>
@endsection

@section('content')

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <form action="{{ route('settings') }}" method="POST" enctype="multipart/form-data" name="settings">
                    @csrf
                    @method('PUT')

                    <x-card>
                        @include('partials._settings_form')

                        <div class="row">
                            {{-- <div class="col-md-6">
                                <canvas id="axis_position_preview"></canvas>
                            </div> --}}
                            <div class="col-md-12">
                                <iframe class="border" id="qrcode-position-frame" src="{{ url('qrcode-position-preview/'.get_setting('qrcode_position_x_axis', env('QRCODE_POSITION_X_AXIS')).'/'.get_setting('qrcode_position_y_axis', env('QRCODE_POSITION_Y_AXIS'))) }}" style="width: 100%; height: 500px;border: none;"></iframe>
                            </div>
                        </div>

                        <x-slot name="footer" class="text-center">
                            {!! Util::FormSubmitActions('settings', route('home'), __('global.Load')) !!}
                        </x-slot>
                    </x-card>
            </div>
        </div>
    </div>

@endsection

@push('js')
    <script>
        function reload_frame() {
            const x_axis = $('#qrcode_position_x_axis').val() != '' ? $('#qrcode_position_x_axis').val() : 0;
            const y_axis = $('#qrcode_position_y_axis').val() != '' ? $('#qrcode_position_y_axis').val() : 0;
            const height = $('#qrcode_height').val() != '' ? $('#qrcode_height').val() : 0;
            const width = $('#qrcode_width').val() != '' ? $('#qrcode_width').val() : 0;
            
            const signature_x_axis = $('#signature_position_x_axis').val() != '' ? $('#signature_position_x_axis').val() : 0;
            const signature_y_axis = $('#signature_position_y_axis').val() != '' ? $('#signature_position_y_axis').val() : 0;
            const signature_height = $('#signature_height').val() != '' ? $('#signature_height').val() : 0;
            const signature_width = $('#signature_width').val() != '' ? $('#signature_width').val() : 0;

            const sign_file_first_name_position_x_axis = $('#sign_file_first_name_position_x_axis').val() != '' ? $('#sign_file_first_name_position_x_axis').val() : 0;
            const sign_file_first_name_position_y_axis = $('#sign_file_first_name_position_y_axis').val() != '' ? $('#sign_file_first_name_position_y_axis').val() : 0;
            const sign_file_first_name_charachters_limit = $('#sign_file_first_name_charachters_limit').val() != '' ? $('#sign_file_first_name_charachters_limit').val() : 0;

            const sign_file_last_name_position_x_axis = $('#sign_file_last_name_position_x_axis').val() != '' ? $('#sign_file_last_name_position_x_axis').val() : 0;
            const sign_file_last_name_position_y_axis = $('#sign_file_last_name_position_y_axis').val() != '' ? $('#sign_file_last_name_position_y_axis').val() : 0;
            const sign_file_last_name_charachters_limit = $('#sign_file_last_name_charachters_limit').val() != '' ? $('#sign_file_last_name_charachters_limit').val() : 0;

            const names_sub_query = `fn_position_x_axis=${sign_file_first_name_position_x_axis}&fn_position_y_axis=${sign_file_first_name_position_y_axis}&fn_c_limit=${sign_file_first_name_charachters_limit}`+
                    `&ln_position_x_axis=${sign_file_last_name_position_x_axis}&ln_position_y_axis=${sign_file_last_name_position_y_axis}&ln_c_limit=${sign_file_last_name_charachters_limit}`;

            const signature_sub_query = `signature_x_axis=${signature_x_axis}&signature_y_axis=${signature_y_axis}&signature_height=${signature_height}&signature_width=${signature_width}`;
            const settings_group_name = $('body #settings_group_name').val();
            const group_name_value = $('body #group_name_value').val();
            const group_sub_query = `group_name=${settings_group_name}&group_name_value=${group_name_value}`;
            console.log('REPLACING');
            $('#qrcode-position-frame')
                .parent()
                .html(`<iframe id="qrcode-position-frame" src="{{ url('qrcode-position-preview') }}/${x_axis}/${y_axis}?width=${width}&height=${height}&${names_sub_query}&${signature_sub_query}&${group_sub_query}" style="width: 100%; height: 500px;border: none;"></iframe>`);
        }

        $(function () {

            $('#qrcode_position_x_axis, #qrcode_position_y_axis, #qrcode_height, #qrcode_width, '+
            '#signature_position_x_axis, #signature_position_y_axis, #signature_height, #signature_width, '+
            '#sign_file_first_name_position_x_axis, #sign_file_first_name_position_y_axis, #sign_file_first_name_charachters_limit, '+
            '#sign_file_last_name_position_x_axis, #sign_file_last_name_position_y_axis, #sign_file_last_name_charachters_limit').on('input', function () {

                reload_frame();
            });

            $(document).on('ifChecked', '.update-settings', function () {
                
                setTimeout(() => {
                    
                    reload_frame();
                }, 1000);
            });

            $(document).on('ifUnchecked', '.update-settings', function () {
            
                setTimeout(() => {
                    
                    reload_frame();
                }, 1000);
            });
        });
    </script>
@endpush