@extends('layouts.smart_receipt_tester_default')

@section('style')
    <style>
        label.main-title {
            font-size: 1rem;
        }

        .result-row {
            max-width: 1250px;
            margin: 0px auto;
        }

        div.preview-wrap {
            overflow: hidden;
            border-radius: 10px;
        }

        @media (max-width:767.98px) {
            div.preview-wrap {
                height: 350px;
            }
        }

        div.preview-wrap .preview {
            {{-- background-image: url('{{ asset('assets/images/smart_receipt/sample-receipt.png') }}'); --}}
            background-repeat: no-repeat;
            {{-- background-size: contain; --}}
            background-size: cover;
            background-position: center;
            cursor: pointer;
        }

        .img-container:not(#cropper-editor),
        #cropper-canvas {
            position: relative;
            max-height: 65vh;
        }

        .img-container:not(#cropper-editor) {
            overflow: hidden;
        }

        #cropper-canvas {
            overflow: auto;
        }

        .img-container:not(#cropper-editor) img,
        #cropper-canvas canvas {
            max-height: 100%;
        }

        button[disabled] {
            cursor: not-allowed;
        }

        {{--
        #TBL_RESULT thead {
            display: none;
        }
        --}}

        #TBL_RESULT tr>td:first-child {
            font-weight: 600;
        }

        i.fas.fa-check-circle {
            color: #37A745;
        }
        i.fas.fa-times-circle {
            color: #EE5068;
        }
        i.fas[data-original-title] {
            cursor: help;
        }

        #TBL_RESULT, #TBL_ITEMS {
            font-size: 0.9rem;
        }

        #TBL_RESULT td, #TBL_ITEMS td {
            padding: 0.5rem;
        }

        .extracted-text-wrap, .ocr-response-text-wrap, .errors-text-wrap {
            border-radius: 5px;
            border: 1px solid #91979D;
            background-color: #F9F7F7;
        }
        [role="button"]:disabled {
            cursor: not-allowed !important;
        }
        .tooltip { pointer-events: none; }
    </style>
@endsection


@section('content')
    {{-- Header --}}
    <div class="row bg-gray-dark py-4 text-center mb-4">
        {{-- logo --}}
        <div class="col-sm-12 my-4">
            <img src="{{ env('LOGO_URL')??asset('assets/images/skale-logo-red-white.svg') }}" alt="sKale" style="width: 200px;">
        </div>

        {{-- title --}}
        <div class="col-sm-12">
            <h3 style="font-weight: 600;">
                Smart Receipt Tester {{ app()->isLocal() ? 'Local Env' : '' }}
            </h3>
            <div class="my-2" style="color: #999C9F; font-size: 0.9rem;">
                Upload a receipt image to test for the OCR results!
            </div>
        </div>

        {{-- form components --}}
        <div class="col-sm-12">
            {{-- service type picker --}}
            <div class="row">
                <div class="col-sm-3 col-md-4"></div>

                @component('admin.components.form_field',
                    [
                        'help' => '',
                        'class' => 'col-sm-6 col-md-4 my-0 mb-1',
                        'label' => '',
                        'required' => true,
                        'description' => '',
                        'hasError' => false,
                    ])
                    @component('components.smart_receipt.service_type', ['id' => 'service_type'])
                    @endcomponent
                @endcomponent

                <div class="col-sm-3 col-md-4"></div>
            </div>

            {{-- file picker --}}
            <div class="row">
                <div class="col-sm-3 col-md-4"></div>

                @component('admin.components.form_field',
                    [
                        'help' => '',
                        'class' => 'col-sm-6 col-md-4',
                        'label' => '',
                        'required' => true,
                        'description' => '',
                        'hasError' => false,
                    ])
                    <div class="input-group">
                        <input name="image" type="file" class="custom-file-input" role="button"
                            accept="{{ $extensions ?? 'image/*' }}">
                        <label class="custom-file-label mx-0 text-left" for="icon" role="button">Choose File</label>
                    </div>
                @endcomponent

                <div class="col-sm-3 col-md-4"></div>
            </div>

            {{-- Past Image Selector --}}
            @if($historyOpt ?? false)
                <div class="row">
                    <div class="col-sm-3 col-md-4"></div>
                    @component('admin.components.form_field',
                        [
                            'help' => '',
                            'class' => 'col-sm-6 col-md-4 my-0 mb-1',
                            'label' => '',
                            'required' => false,
                            'description' => '',
                            'hasError' => false,
                        ])
                        @php
                            $id = 'img_logs';
                            $switcher = app()->isLocal();
                        @endphp
                        <div class="form-group w-100 mx-auto mb-0 px-0">
                            <div class="input-group justify-content-center mx-0">
                                <select 
                                    name="{{$id}}" id="{{$id}}" class="form-control select2 log-selector" 
                                    data-placeholder="-- Rerun the Past Receipt --" 
                                    {{-- style="width:90%" --}}
                                    data-ajax-url="{{ route('public.select2.ajax.get_data', ['type' => 'ocr_logs']) }}" 
                                    data-normalSearch="true"
                                    >
                                </select>
                                @if($switcher)
                                    <input type="number" min="1"  name="{{$id}}" class="form-control log-selector text-center d-none" placeholder="-- Input Internal Ref. --" />
                                @endif
                                <span class="input-group-append">
                                    @if($switcher)
                                        <button class="btn btn-secondary d-flex align-items-center" data-toggle="tooltip" data-title="Switch">
                                            <i class="fas fa-toggle-on"></i>
                                        </button>
                                    @endif
                                    {{-- @if(app()->isLocal()) --}}
                                        <button class="btn btn-primary d-flex align-items-center" data-toggle="tooltip" data-title="Refresh">
                                            <i class="fas fa-sync"></i>
                                        </button>
                                    {{-- @endif --}}
                                    <button class="btn btn-danger d-flex align-items-center" data-toggle="tooltip" data-title="Erase">
                                        <i class="fas fa-eraser"></i>
                                    </button>
                                </span>
                            </div>
                        </div>
                    @endcomponent
                    <div class="col-sm-3 col-md-4"></div>
                </div>
            @endif
        </div>
        
        {{-- export btn --}}
        @if($urlExport ?? null)
            <div style="position: absolute; right: 10; z-index: 1;" class="mr-3">
                <a class="btn btn-primary" href="{{ $urlExport }}" target="_blank">
                    <i class="fas fa-download"></i>
                </a>
            </div>
        @endif
    </div>

    {{-- Content --}}
    <div class="row my-2 d-none result-row">
        {{-- Receipt Viewer --}}
        <div class="col-sm-12 col-md-4 mb-sm-4 mb-2" style="overflow: hidden;">
            <label class="main-title">Uploaded Image</label>
            <div class="preview-wrap">
                <div class="preview h-100 w-100"></div>
            </div>
        </div>

        {{-- Result Viewer --}}
        <div class="col-sm-12 col-md-8 px-md-4 px-sm-0">
            <div class="row">
                <div class="col-sm-12 mb-2 req-ref">
                    <label class="main-title">Reference: </label>
                    <span></span>
                </div>

                <div class="col-sm-12 mb-2 criteria-fulfillment">
                    <label class="main-title">Criteria Fulfillment: </label>
                    <i class="cf-pass text-success h6 d-none">Pass</i>
                    <i class="cf-fail text-danger h6 d-none">Fail</i>
                    <i class="cf-not-applc text-dark h4">-</i>
                </div>

                <div class="col-sm-12 mb-2 duplicate-fulfillment">
                    <label class="main-title">Duplicate Receipt: </label>
                    <i class="df-fail text-danger h6 d-none">Yes</i>
                    <i class="df-pass text-success h6 d-none">No</i>
                    <i class="df-not-applc text-dark h4">-</i>
                </div>

                <div class="col-sm-12 mb-2 manual-review-fulfillment">
                    <label class="main-title">Manual Review: </label>
                    <i class="mf-fail text-danger h6 d-none">Yes</i>
                    <i class="mf-pass text-success h6 d-none">No</i>
                    <i class="mf-not-applc text-dark h4">-</i>
                </div>

                <div class="col-sm-12 mb-2">
                    <label class="main-title">Errors</label>
                    <div class="px-2 py-2 errors-text-wrap"></div>
                </div>

                <div class="col-sm-12 mb-2">
                    <label class="main-title">Detected Results</label>
                    <table id="TBL_RESULT" class="table table-bordered table-hover dataTable no-footer"></table>

                    <div class="mt-4">Item Line:</div>
                    <table id="TBL_ITEMS" class="table table-bordered table-hover dataTable no-footer"></table>
                </div>

                <div class="col-sm-12 mb-2">
                    <label class="main-title">Extracted Text</label>
                    <div class="px-2 py-2 extracted-text-wrap"></div>
                </div>

                <div class="col-sm-12 mb-2">
                    <label class="main-title">OCR Response</label>
                    <div class="px-2 py-2 ocr-response-text-wrap"></div>
                </div>
            </div>
        </div>
    </div>

    {{-- popup modal --}}
    @component('components.utility.template_popup',
        [
            'hideFooter' => 1,
            'id' => 'popup_' . ($cropper_id = 'cropper'),
        ])
        @slot('slot_header')
            <img src="{{ asset('assets/images/skale.min.png') }}" style="height: 20px;" alt="Logo">
        @endslot

        @component('components.utility.receipt_cropper', ['id' => $cropper_id])
        @endcomponent
    @endcomponent

    {{-- loading --}}
    @component('components.utility.loading', ['is_hidden' => 1, 'label' => 'Extracting'])
    @endcomponent
@endsection

@section('script')
    <script src="{{ mix('js/admin/admin-maint.js') }}"></script>
    <script src="{{ mix('js/main/general.js') }}"></script>
    <script>
        $(function() {
            {{-- criteria selector --}}
            var suffix = '-fulfillment:first i';
            var $criteria = $('.criteria' + suffix);
            var $duplicate = $('.duplicate' + suffix);
            var $manual = $('.manual-review' + suffix);
            var $cf = {
                notApplc: $criteria.filter('i.cf-not-applc'),
                pass: $criteria.filter('i.cf-pass'),
                fail: $criteria.filter('i.cf-fail'),
            };
            var $df = {
                notApplc: $duplicate.filter('i.df-not-applc'),
                pass: $duplicate.filter('i.df-pass'),
                fail: $duplicate.filter('i.df-fail'),
            };
            var $mf = {
                notApplc: $manual.filter('i.mf-not-applc'),
                pass: $manual.filter('i.mf-pass'),
                fail: $manual.filter('i.mf-fail'),
            };
            var $selImgLogs = $(), $btnClear = $();

            {{-- table init --}}
            {{-- _internalKey is hardcoded value for rest of the program usage, should not change it --}}
            var opt_result, opt_item;
            var $tbl = $('#TBL_RESULT').DataTable(opt_result = {
                autoWidth: false,
                paging: false,
                ordering: false,
                info: false,
                dom: '',
                columns: [
                    { title: 'Label', data: 'label', _internalKey: 'label' },
                    { title: 'Confidence', 'data': 'confidence', _internalKey: 'confidence' },
                    { title: 'Value', data: 'value', _internalKey: 'value' },
                    { title: 'Is Hybrid', data: 'is_hybrid', _internalKey: 'is_hybrid', class: 'text-center' },
                ],
            });
            var $tbl_item = $('#TBL_ITEMS').DataTable(opt_item = {
                autoWidth: false,
                paging: false,
                ordering: false,
                info: false,
                dom: '',
                columns: [
                    { title: 'SKU', data: 'sku_code.value', _internalKey: 'sku_code' },
                    { title: 'Name', data: 'name.value', _internalKey: 'name' },
                    { title: 'Qty', data: 'qty.value', _internalKey: 'qty' },
                    { title: 'Unit Price', data: 'unit_price.value', _internalKey: 'unit_price' },
                    { title: 'Price', data: 'price.value', _internalKey: 'price' },
                    { title: 'Is Hybrid', data: 'name.is_hybrid', _internalKey: 'is_hybrid', class: 'text-center' },
                ],
                columnDefs: [{
                    targets: [2,3],
                    className: 'text-center'
                },{
                    targets: [4],
                    className: 'text-right'
                }],
            });
            var cropper_id = '{{ $cropper_id }}';
            window.POPUP_CROPPER_ID = 'popup_' + cropper_id;
            var $popup = $('.modal#' + POPUP_CROPPER_ID);
            var useNativeInput = false;
            var rand = null;
            var $file = $('input[type=file][name=image]').on('change', function(e) {
                useNativeInput = false;
                var name = $file.val();
                if (!name) {
                    return;
                }
                var file = $file.get(0).files[0];
                useNativeInput = file.type === 'image/heic';
                $popup.modal('show');
                if (useNativeInput) {
                    var curr = Math.random();
                    rand = curr;
                    window.doImageConversion(file).then(res => {
                        curr === rand &&
                            $popup.is(':visible') &&
                            $popup.trigger('shown.bs.modal.custom', [res]);
                    });
                    return;
                }
                $btnClear.trigger('click');
            });
            var img_url = null;
            var $loader = $popup.find('#cropper-loader');
            $popup.on('shown.bs.modal', function() {
                destoryCropper();
                if (useNativeInput) {
                    $popup.find('#cropper-editor').hide();
                    $loader.show();
                    return;
                }
                $loader.hide();
                initCropper($file);
            }).on('shown.bs.modal.custom', function(e, data) {
                if (!useNativeInput || !$.isPlainObject(data) || !data.url) {
                    return;
                }
                $popup.find('#cropper-editor').find('.img-container #image')
                    .attr('src', data.url)
                    .off('load')
                    .on('load', function(e) {
                        $(e.currentTarget).off('load');
                        $loader.hide();
                        destoryCropper();
                        initCropper(null, null, e.currentTarget);
                    });
            }).on('hidden.bs.modal', function() {
                destoryCropper();
            }).find('[data-dismiss="modal"]').on('click', function() {
                $file.val('').trigger('change');
            });
            $('[name=service_type]').on('change', function() {
                closeAllTooltips();
                $file.val('').trigger('change');
                $selImgLogs.val('').trigger('change');
            });

            {{-- fn to populate result --}}
            function populateResult(data) {
                closeAllTooltips();
                data.dataCriteria = data.dataCriteria || {};
                $tbl.clear();
                $tbl_item.clear();
                img_url = data.url;
                $('.extracted-text-wrap').html(data.text);
                $('.errors-text-wrap').html(JSON.stringify(data.dataCriteria.errors));
                $('.ocr-response-text-wrap').html(data.ocr_response);
                $('.preview-wrap .preview').css('background-image', 'url("' + img_url + '")');
                $('.req-ref span:first').text(data.ref || '');
                var genIconEl = function (bool) {
                    return $('<i class="fas fa-' + (bool ? 'check': 'times') + '-circle p-2"></i>');
                };
                var cb_row = function(val, $tbl, with_node, errors) {
                    if (!$.isPlainObject(val) || $.isPlainObject(val.value) || Array.isArray(val.value)) {
                        return;
                    }
                    var node = $tbl.row.add(val).node();

                    var get_node = function (config, internal_key) {
                        return $($(node).children('td').get(
                            config.columns.findIndex(res => res._internalKey === internal_key)
                        ));
                    };

                    if ($tbl === $tbl_item) {
                        $.each(val, function (key, val) {
                            if (val.confidence !== null) {
                                var $info = $(
                                    '<i class="fas fa-info-circle p-2"></i>'
                                ).tooltip({
                                    title: 'Confidence: ' + val.confidence,
                                });
                                get_node(opt_item, key).append($info);
                            }
                            val.marker !== null && get_node(opt_item, key).append(
                                genIconEl(val.marker)
                            );
                        });
                    } else {
                        {{--
                        // add tick icon
                        if (val.value !== null && with_node) {
                            $(node).children('td:first').append('<i class="fas fa-check-circle p-2"></i>');
                        }
                        --}}

                        if (with_node && val.marker !== null) {
                            var $icon = genIconEl(val.marker);
                            get_node(opt_result, 'label').append($icon);

                            {{-- parse to single level --}}
                            var epool = [];
                            $.each(val.marker ? [] : errors, function (ekey, earrs) {
                                if (!earrs) {
                                    return;
                                }
                                if (!Array.isArray(earrs)) {
                                    earrs = [earrs];
                                }
                                earrs.forEach(function (msg) {
                                    epool.push('- ' + window.escapeHtml(msg));
                                });
                            });
                        
                            epool.length && $icon.tooltip({
                                html: true,
                                title: epool.join('<br/>'),
                            });
                        }
                    }

                    return true;
                };
                var populate = function(arr, errors) {
                    $.each(arr, function(key, val) {
                        var errs = errors[key] || {};
                        if (val === null || (key !== 'item_line' && cb_row(val, $tbl, true, errs) === true) || Array.isArray(val)) {
                            return;
                        }
                        $.each(val.value, function(inner_key, inner_val) {
                            var ierrs = errs[inner_key] || {};
                            if (inner_key === 'id') {
                                return;
                            }
                            if (key === 'item_line') {
                                return cb_row(inner_val, $tbl_item, false, ierrs);
                            }
                            if (key === 'outlet') {
                                ierrs = errs;
                            }
                            Array.isArray(inner_val) ? populate(inner_val, errors) : cb_row(inner_val, $tbl, true, ierrs);
                        });
                    });
                };
                var dcriteria = data.dataCriteria;
                populate(data.results, dcriteria.errors || {});

                $tbl.draw();
                $tbl_item.draw();

               
                {{-- criteria --}}
                $criteria
                    .not($cf[getStatusDomKey(dcriteria.isPass)].removeClass('d-none'))
                    .addClass('d-none');

                {{-- duplicate --}}
                $duplicate
                    .not($df[getStatusDomKey(dcriteria.isDuplicate, true)].removeClass('d-none'))
                    .addClass('d-none');

                {{-- manual review --}}
                $manual
                    .not($mf[getStatusDomKey(dcriteria.requiresManualApproval, true)].removeClass('d-none'))
                    .addClass('d-none');
            }

            function getStatusDomKey(bool, flip = false) {
                var pkey = flip ? 'pass' : 'fail';
                if (bool) {
                    pkey = flip ? 'fail' : 'pass';
                } else if (bool === null || bool === undefined) {
                    pkey = 'notApplc';
                }
                return pkey;
            }

            function closeAllTooltips() {
                $('[data-toggle="tooltip"], .tooltip').tooltip("hide");
            }

            function populateError(data) {
                if (!data.errors) {
                    window.makeToast('bg-danger', data.error_msg || data.error || 'Something went wrong');
                    return;
                }
                $.each(data.errors, function(key, val) {
                    $.each(val, function(inner_key, inner_val) {
                        window.makeToast('bg-danger', inner_val);
                    });
                });
            }

            function doOcrRequest(data) {
                return window.doAbsoluteAJAX('{{ route('srr.ocr.store') }}', 'POST', data, 'multipart/form-data',
                        false).promise
                    .then(function(response) {
                        if (!response.success) {
                            return Promise.reject(response);
                        }
                        $('.result-row').removeClass('d-none');

                        var showHybrid = $('[name=service_type]:checked').val() === 'hybrid';

                        $tbl.columns(
                            $tbl.columns()[0].length - 1
                        ).visible(showHybrid);
                        $tbl_item.columns(
                            $tbl_item.columns()[0].length - 1
                        ).visible(showHybrid);

                        populateResult(response.data);
                        $popup.modal('hide');
                        return Promise.resolve(response);
                    })
                    .catch(function(error) {
                        populateError(error);
                        return Promise.reject(error);
                    });
            }

            {{-- cropper submission --}}
            $popup.find('#' + cropper_id + '-cropper-submit').on('click', async function(e) {
                closeAllTooltips();
                var $submit = $(e.currentTarget);
                var $btns = $popup.find('button.btn').not($submit).addClass('disabled');
                setButtonToLoading($submit.get(0));

                var data = new FormData();
                {{--
                useNativeInput ?
                    data.append('image[]', $file.get(0).files[0]) :
                --}}
                var getURL = canvas => {
                    return new Promise(resolve => {
                        canvas.toBlob(b => {
                            {{--
                            var file = b.size > 2000000
                                ? canvas.toDataURL('image/jpeg', 0.7)
                                : canvas.toDataURL('image/jpeg');
                            resolve(b);
                            --}}
                            return b.size > 2000000
                                ? canvas.toBlob(b => resolve(b), 'image/jpeg', 0.7)
                                : resolve(b);
                        });
                    });
                };
                
                var img_src = await getURL(
                    $popup.find('#cropper-canvas canvas').get(0)
                );
                data.append(typeof img_src === 'string' ? 'image_base64[]' : 'image[]', img_src);
                data.append('service_type', $('[name=service_type]:checked').val());

                doOcrRequest(data).finally(function() {
                    $btns.not($submit).removeClass('disabled');
                    resetLoadingButton();
                });
            });

            {{-- preview event --}}
            $('.preview-wrap .preview').on('click', function(event) {
                closeAllTooltips();
                img_url && window.open(img_url, '_blank', 'noopener');
            });

            @if($historyOpt ?? false)
                {{-- Past Request ReOCR --}}
                $selImgLogs = $('select.log-selector');
                $btnClear = $selImgLogs
                    .on('change', function(event) {
                        var $self = $(event.currentTarget);
                        var val = $self.val();
                        if (!val) {
                            return;
                        }
                        var $els = $('select, button, input[type=file], input[type=radio], input[type=checkbox]')
                            .filter(':visible:not(:disabled)')
                            .prop('disabled', true);
                        var data = new FormData();
                        @if($switcher ?? 0)
                            if ($self.prop('tagName') === 'INPUT') {
                                data.append('tag', 'input')
                            }
                        @endif
                        data.append('request_id', val);
                        data.append('service_type', $('[name=service_type]:checked').val());
                        setButtonToLoading($btnClear);
                        doOcrRequest(data).finally(function() {
                            $els.prop('disabled', false);
                            resetLoadingButton();
                        });
                    })
                    .parents('.form-group:first').find('i.fa-eraser').parent('button')
                    .on('click', function(event) {
                        $('select.log-selector').val('').trigger('change');
                    });

                @if($switcher ?? 0)
                    $selImgLogs.parents('.form-group:first').find('i.fa-toggle-on').parent('button')
                        .on('click', function(event) {
                            var $show = $selImgLogs.filter(':not(:visible):first');
                            $show.hasClass('select2') &&
                                $show.next('.select2-container').removeClass('d-none');
                            $selImgLogs.not($show.removeClass('d-none')).each(function () {
                                var $comp = $(this);
                                $comp.hasClass('select2') &&
                                    $comp.next('.select2-container').addClass('d-none');
                                $comp.addClass('d-none');
                            });
                        });
                @endif

                {{-- @if(app()->isLocal()) --}}
                    $selImgLogs.parents('.form-group:first')
                        .find('i.fa-sync').parent('button')
                        .on('click', function(event) {
                            closeAllTooltips();
                            $('select.log-selector').trigger('change');
                        });
                {{-- @endif --}}
            @endif
        });
    </script>
@endsection