@extends('layouts.admin')
@section('style')
    <style>
        .select2-selection{
            position:relative
        }
        .hidden-column {
            display: none;
        }
        .editable-cell {
            cursor: pointer;
        }
        .editable-cell-delete {
            text-align: center;
            color: red;
        }
        .pagination {
            overflow-x: auto !important;
            margin-left: auto;
        }
    </style>
@endsection

@section('script')
    @parent
    @php
        $asset_approve_fields = [
            'approve_outlet'=> true,
            'approve_product'=> true,
            'approve_txn_amt'=> true,
            'approve_comments'=> true,
        ]

    @endphp

    <script type="text/javascript">
        const APPROVAL_FIELDS  = @json($asset_approve_fields);
        function getReceiptEditedDetails(){

            let details = {};
            let approval_fields = ['approve_outlet', 'approve_product', 'approve_txn_amt'];
            $.each( approval_fields , function(){
                if(APPROVAL_FIELDS[this] && $('#'+this).val()){
                    details[this] =  $('#'+this).val();
                }
            })

            let products = {
                "update": [],
                "create": [],
            }

            $("#editableProductsTable tbody tr").each(function () {
                let row = {};
                const fields = ['receipt_entry_product_relations_id', 'product_id', 'product_name', 'sku_unit_price', 'sku_unit_qty']
                $(this).find('td').each(function(index) {
                    if (fields[index] !== undefined) {
                        row[fields[index]] = $(this).text();
                    }
                });

                row.receipt_entry_product_relations_id
                    ? products.update.push(row)
                    : products.create.push(row)
                ;
            });

            details['products'] = products
            details['transaction_date'] = $('#transaction_date').val()
            details['outlet_name'] = $('#outlet_name').val()
            details['payment_mode'] = $('#payment_mode').val()

            return details;
        }

        function generateRewardTableHTML(rewards, $table_id){
            $('#'+$table_id+' tbody').empty();

            rewards.forEach((reward) => {
                const row = $("<tr>");

                const type = reward.type.charAt(0).toUpperCase() + reward.type.slice(1);

                let reward_to_provision = reward.reward_to_provision !== undefined && reward.reward_to_provision !== false
                    ? ' ( Actual reward to provision:'+reward.reward_to_provision+' )'
                    : '';

                const typeCell = $("<td>").text(type);
                const valueCell = $("<td>").text(reward.display_name ? reward.display_name :
                    reward.qty !== undefined && reward.qty !== false
                    ? reward.qty + reward_to_provision
                    : 'undefined');


                row.append(typeCell, valueCell);
                $("#"+$table_id+" tbody").append(row);
            })
        }

        $(function(){
            let lastFilterValues = {};
            const modal_el =  $('#receipt_validate_popup');

            let HAS_APPROVAL_FIELDS = false;
            const approve_item = $('#approve_item');
            const approve_wrap = $('#approve_wrap');
            const approve_paginate = $('#approve_paginate');
            $('#store_name').select2({
                tags: true,
                sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),
            });
            var $receipt_uid = $('#receipt_uid').select2({
                tags: true,
                tokenSeparators: [',', ' '],
            });
            $receipt_uid.parents('.input-group:first').find('button i.fa-times').on('click', e => {
                $receipt_uid.val().length && $receipt_uid.val('').trigger('change');
            });

            const format = 'YYYY-MM-DD';
            const last_yr = moment().subtract(1, 'year').format(format);
            const now =moment().format(format);
            const daterangeformat = {
                singleDatePicker: true,
                showDropdowns: true,
                locale: {format: format,cancelLabel: 'Clear'},
                autoApply: false,
                startDate: now,
                endDate: now,
                minDate: last_yr,
                maxDate: now,
            }
            $('#date_to').daterangepicker( daterangeformat);
            $('#date_from').daterangepicker( daterangeformat);
            $('#date_from, #date_to, #transaction_date').on('apply.daterangepicker', function(ev, picker) {
                if (!picker.startDate.isValid() || !picker.endDate.isValid()) {
                    $(this).val('')
                }
                if( moment( $('#date_from').val() ) > moment($('#date_to').val() ) ){
                    makeToast('bg-danger', 'Invalid date range selection')
                    $(this).val('')
                }
                $(this).change();

            }).on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('')
                $(this).change();
            }).val('')

            $.each(APPROVAL_FIELDS, function(k,v){
                $('#'+v).addClass( !v ? 'd-none':'' );
                if(v){
                    HAS_APPROVAL_FIELDS = true;
                    return;
                }
            });

            $('#transaction_date').daterangepicker(daterangeformat)

            $('#approve_product').select2({
                dropdownParent: $('#receipt_validate_popup'),
                sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),
            });

            $('#approve_outlet').select2({
                dropdownParent: $('#select_outlet_parent'),
                sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),
            });

            $('#approve_comments_select').select2({
                placeholder: "Select rejection reasons here or type custom remarks in the next box below",
            });

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                }
            });
            function doGetURLparams(){
                var params = new window.URLSearchParams(window.location.search);
                if(!window.location.search){
                    return;
                }
                let value = {};
                $.each($('.filter-input'), function(){
                    const id = $(this).attr('id')
                    let param_value = (params.get(id)?? '' ).split(',');
                    value[id] = param_value;
                    let $filter =  $('#'+id);
                    if(id !== 'store_name') {
                        $filter.val(param_value ?? '').change();
                    }
                    else {
                        let selected = $filter.val()
                        $.each(param_value, function(k , v){
                            selected.push(v);
                            if (!$filter.find("option[value='" + v + "']").length) {
                                var newOption = new Option(v,v, true, true);
                                $filter.append(newOption).trigger('change');
                            }
                        })
                        $filter.val(selected).change();
                    }
                })
                lastFilterValues = value;
                doAjaxGetAssets(value);

            }

            doGetURLparams();

            // getting receipt data
            var timeout;
            var ajaxGetAsset = null;
            function doAjaxGetAssets(value=''){
                $('.asset-count').hide();
                approve_wrap.html(
                    '<div class="overlay py-5 mx-auto"><i class="fas fa-3x fa-sync-alt fa-spin text-muted"></i><div class="text-bold pt-2 pl-2 text-muted">Loading...</div></div>'
                )
                if (ajaxGetAsset) {
                    ajaxGetAsset.abort();
                    ajaxGetAsset = null;
                }
                if(timeout) {
                    clearTimeout(timeout);
                }
                var reset = () => {
                    ajaxGetAsset = null;
                    approve_wrap.find('.overlay').remove()
                };
                timeout = setTimeout( function(){
                    ajaxGetAsset = $.ajax({
                        "url" : window.location.href,
                        "method": "GET",
                    }).done(function (response) {
                        reset();
                        if(response) {
                            doAppendAssetGridView(response);
                        }
                    }).fail((xhr, textStatus, error) => error !== 'abort' && reset());
                }, 1000)
            }



            function doAppendAssetGridView(response){
                $('.asset-count').text(response.paging.total +' assets found').show();
                function checkEmpty(){
                    if( response.data.length ===0 ){
                        approve_wrap.append( $('#approve_empty').clone())
                    }
                }


                function doSubmitAssetApproval(receiptData, is_approved=false){
                    $.ajax({
                        method: "POST",
                        url: "ajax/change_status",
                        data: {...receiptData,
                            "new_status": is_approved ? 'approved': 'rejected'
                        }
                    }).done(function (response) {
                        if(response){
                            makeToast('bg-success', 'Asset '+ receiptData.receipt_uid +' is successfully '+ (is_approved ? 'approved': 'rejected') ??response.message);
                            // reset the array to remove stale data
                            removeUserTags.length = 0;
                            removeReceiptTags.length = 0;
                            doAjaxGetAssets();
                            checkEmpty();
                            modal_el.modal('hide');
                        } else {
                            makeToast('bg-danger', 'Something went wrong');
                        }
                    }).fail(function(response){
                        makeToast('bg-danger', 'Something went wrong');
                    }).always(()=> {
                        resetLoadingButton();
                        $('#modal_confirmation').modal('hide');
                    });
                }


                function appendAssetInfo(new_item, receipt) {

                    $('#editableProductsTable tbody').empty();
                    if (new_item.attr('id') === "receipt_validate_popup") {
                        if (
                            "receipt_products_relations" in receipt
                            && receipt["receipt_products_relations"]
                            && typeof receipt["receipt_products_relations"][Symbol.iterator] === 'function'
                        ) {
                            receipt.receipt_products_relations.forEach((receiptProductRelations) => {
                                // Create a new row
                                const row = $("<tr>");

                                // Add cells to the new row
                                const idCell = $("<td class='hidden-column'>").text(receiptProductRelations.id)
                                const productIdCell = $("<td class='hidden-column'>").text(receiptProductRelations.product_id)
                                const productNameCell = $("<td>").text(receiptProductRelations.product_name);
                                const productPriceCell = $("<td class='editable-cell editable-cell-price'>").text(receiptProductRelations.sku_unit_price);
                                const quantityCell = $("<td class='editable-cell editable-cell-quantity'>").text(receiptProductRelations.sku_unit_qty);
                                const deleteCell = $("<td class='editable-cell editable-cell-delete'>").append('<i class="fas fa-trash mr-1"><i/>');

                                // Append cells to the row
                                row.append(idCell, productIdCell, productNameCell, productPriceCell, quantityCell, deleteCell);
                                // Append the new row to the table
                                $("#editableProductsTable tbody").append(row);
                            })
                        }

                        if (
                            "rewards" in receipt
                            && receipt["rewards"]
                            && typeof receipt["rewards"][Symbol.iterator] === 'function'
                        ) {

                            if(receipt.rewards.length === 0){
                                $('#rewardsTable tbody').empty();
                                $("#rewardsTable tbody").append("<td>No Reward Provisioned</td>");
                            }else{
                                generateRewardTableHTML(receipt.rewards, 'rewardsTable');
                            }
                        }


                        if (
                            "estimated_rewards" in receipt
                            && receipt["estimated_rewards"]
                            && typeof receipt["estimated_rewards"][Symbol.iterator] === 'function'
                        ) {

                            if(receipt.estimated_rewards.length === 0){
                                $('#estimatedRewardsTable tbody').empty();
                                $("#estimatedRewardsTable tbody").append("<td>No Reward</td>");
                            }else{
                                generateRewardTableHTML(receipt.estimated_rewards, 'estimatedRewardsTable');
                            }
                        }

                        // Set default values in manual review popup
                        $('#approve_outlet').val(receipt.business_asset_id).trigger('change');
                        $('#approve_txn_amt').val(receipt.transaction_amount);
                        $('#approve_comments').val(receipt.status_reason);
                        // todo: add new fields heree
                        $('#transaction_date').val(receipt.transaction_date)
                        $('#outlet_name').val(receipt.outlet_name)
                        $('#payment_mode').val(receipt.payment_mode)
                    }

                    $.each(receipt, function(key,value){
                        if(key==='ocr_result'){
                            try{
                                value = JSON.parse(value);
                            }catch(e){}
                            $.each(value, function(ocr_key, ocr_value){
                                const el = new_item.find('td.'+ocr_key);
                                if(el && ocr_value  && ocr_value!=='null'){
                                    el.text(ocr_value).parent('tr').show();
                                }
                            });
                        } else {
                            const el = new_item.find('td.'+key);
                            if( (el && value && value!=='null') || value===0){
                                switch(key){
                                    case 'products':
                                        try{
                                            jsonvalue = JSON.parse(value)
                                            value = jsonvalue;
                                        } catch(e){}
                                        let prod_val = '';
                                        $.each(value, function(k,v){
                                            prod_val += '<span class="badge badge-secondary mr-1">'+v.product + ' <small>(' + v.qty + ' qty)</small></span>';
                                        });
                                        value = prod_val;
                                        break;
                                    case 'merchants':
                                        try{
                                            jsonvalue = JSON.parse(value)
                                            value = jsonvalue.value;
                                        } catch(e){}
                                        break;
                                    case 'created_at':
                                    case 'reviewed_at':
                                        {{--
                                        date = new Date(value);
                                        value = moment(date).format('D MMMM YYYY h:mm A')
                                        --}}
                                        value = value ? moment(value).format('D MMMM YYYY h:mm A') : '';
                                        break;
                                    case 'module':
                                        value = value.replaceAll('_',' ')
                                        break;
                                    case 'rejection_reasons':
                                        if (Array.isArray(value) === false || value.length === 0) {
                                            value = "-"
                                            break;
                                        }

                                        value = value.join(".\n")
                                }
                                el.html(value).attr('style', 'text-transform:capitalize;').parent('tr').show();
                            }
                        }

                    })
                    return new_item
                }

                // populate existing tags data into user/receipt section on apv popup
                function displayTags(userId, receiptId) {
                    const userTagsContainer = $("#selected_tags_container");
                    const receiptTagsContainer = $("#selected_tags_container_remarks");
                    userTagsContainer.empty();
                    receiptTagsContainer.empty();

                    if (userId) {
                        $.ajax({
                            url: AJAX_URL + `get_user_tags/${userId}`,
                            method: 'GET',
                            success: function (response) {
                                response.forEach(tag => {
                                    const userTag = $(`
                        <div class="badge badge-primary mx-1 my-1 d-flex align-items-center">
                            ${tag.name}
                            <i class="fas fa-times ml-2" style="cursor: pointer;" data-tag-id="${tag.id}"></i>
                        </div>
                    `);
                                    userTagsContainer.append(userTag);
                                });
                            },
                            error: function () {
                                console.error('Error fetching user tags.');
                            }
                        });
                    }

                    if (receiptId) {
                        $.ajax({
                            url: AJAX_URL + `get_receipt_tags/${receiptId}`,
                            method: 'GET',
                            success: function (response) {
                                response.forEach(tag => {
                                    const receiptTag = $(`
                        <div class="badge badge-secondary mx-1 my-1 d-flex align-items-center">
                            ${tag.name}
                            <i class="fas fa-times ml-2" style="cursor: pointer;" data-tag-id="${tag.id}"></i>
                        </div>
                    `);
                                    receiptTagsContainer.append(receiptTag);
                                });
                            },
                            error: function () {
                                console.error('Error fetching receipt tags.');
                            }
                        });
                    }
                }

                // clone receipt card
                $.each(response.data,function( k , receipt ){
                    let file_url = receipt.receipt_url ?? receipt.file_url;
                    let $receipt_urls = receipt.receipt_urls;
                    let new_item = approve_item.clone().attr('id',receipt.uid);
                    new_item.data('receipt',receipt);
                    // load carousel if multiple images for one receipt, else single image
                    if ($receipt_urls && $receipt_urls.length > 1) {
                        let receipturlsHtml = '<div id="carousel' + receipt.uid + '" class="carousel slide" data-ride="carousel" data-interval="false"><div class="carousel-inner">';
                        receipturlsHtml += '<ol class="carousel-indicators">';
                        $receipt_urls.forEach(function(url, index) {
                            receipturlsHtml += '<li data-target="#carousel' + receipt.uid + '" data-slide-to="' + index + '"'
                                + (index === 0 ? ' class="active"' : '')
                                + ' style="width: 12px; height: 12px; background-color: white; border-radius: 50%; margin: 0 5px; filter: drop-shadow(2px 4px 5px black);'
                                + '"></li>';
                        });
                        receipturlsHtml += '</ol>';
                        receipturlsHtml += '<div class="carousel-inner">';
                        $receipt_urls.forEach(function(url, index) {
                            receipturlsHtml += '<div class="carousel-item ' + (index === 0 ? 'active' : '') + '">';
                            receipturlsHtml += '<img src="' + url + '" class="d-block w-100" style="max-height:400px; object-fit: contain;">';
                            receipturlsHtml += '</div>';
                        });
                        receipturlsHtml += '</div>';
                        receipturlsHtml += '<a class="carousel-control-prev" href="#carousel' + receipt.uid + '" role="button" data-slide="prev" style="filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 1));">';
                        receipturlsHtml += '<span class="carousel-control-prev-icon" aria-hidden="true"></span>';
                        receipturlsHtml += '</a>';
                        receipturlsHtml += '<a class="carousel-control-next" href="#carousel' + receipt.uid + '" role="button" data-slide="next" style="filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 1));">';
                        receipturlsHtml += '<span class="carousel-control-next-icon" aria-hidden="true"></span>';
                        receipturlsHtml += '</a>';
                        receipturlsHtml += '</div>';

                        new_item.find('.img-container').html(receipturlsHtml);
                    } else {
                        new_item.find('img').attr('src', file_url).parent().attr('href', file_url);
                    }
                    // new_item.find('img').attr('src', file_url).parent().attr('href', file_url);
                    approve_wrap.append(appendAssetInfo(new_item,receipt))
                    new_item.find('.uid').text(
                        receipt.receipt_uid
                        {{--
                        receipt.uid +
                        (receipt.receipt_uid ? ` (${receipt.receipt_uid})` : '')
                        --}}
                    );

                    switch(new_item.data('receipt').status){
                        case 'pending':
                            new_item.find('.card').addClass('border border-warning')
                            new_item.find('.status-bar').text('Pending').addClass('badge-warning');
                            break;
                        case 'rejected':
                            new_item.find('.card-footer').hide().end().find('.edit-status').show();
                            new_item.find('.status-bar').text('Rejected').addClass('badge-danger');
                            break;
                        case 'approved':
                            new_item.find('.card-footer').hide();
                            new_item.find('.status-bar').text('Approved').addClass('badge-success');
                            if(receipt.module==='upload_receipt'){
                                new_item.find('.edit-status').show();new_item.find('.approve_item_btn[approve="false"]').hide();
                                new_item.find('.approve_item_btn[approve="true"]').removeClass('w-50').addClass('w-100');
                                let approvehtml = new_item.find('.approve_item_btn[approve="true"]').html();
                                approvehtml = approvehtml.replace('Approve','Edit Approval');
                                new_item.find('.approve_item_btn[approve="true"]').html(approvehtml)
                            }

                            break;
                    }

                    $('[data-toggle="tooltip"]').tooltip();
                    new_item.find('.edit-status').off('click').on('click', function(e){
                        // new_item.find('.card-footer').slideDown(300);
                        //
                        // $('html,body').animate({scrollTop: new_item.offset().top},'slow');
                        // setTimeout(function(){
                        //     new_item.find('.card-footer').slideUp(300);
                        // }, 30000) // hide after 30s
                        let is_done = false;
                        var $appv_btn = $(e.currentTarget);
                        if( HAS_APPROVAL_FIELDS &&
                            ( $appv_btn.attr('approve')==='false' || new_item.data('receipt').module !== 'upload_receipt') ){
                            setButtonToLoading(e.currentTarget);
                            is_done = true;
                            $('.approval-confirm-status').text( $appv_btn.attr('approve')==='true' ? 'approve':'reject');
                            $('#modal_confirmation').modal('show').find('.btn-confirm').off('click').on('click',function(e){
                                resetLoadingButton();
                                setButtonToLoading( e.currentTarget );
                                doSubmitAssetApproval(formData, $appv_btn.attr('approve')==='true');
                            })
                        }
                        if(is_done){return}

                        const receiptData = new_item.data('receipt');
                        const userId = receiptData.user_id;
                        const receiptId = receiptData.id;
                        // console.log('userid:', userId, 'receiptid:', receiptId);
                        displayTags(userId, receiptId);

                        modal_el.find('#assetId').text(receipt.receipt_uid);
                        modal_el.data('receipt', new_item.data('receipt')).modal('show');
                        // carousel for edit approve/reject asset popup
                        // modal_el.find('#receipt_validate_img').attr('src', receipt.receipt_url ?? receipt.file_url);
                        const modalCarouselId = 'modalCarousel' + receipt.uid;
                        if ($receipt_urls && $receipt_urls.length > 1) {
                            let pagination = '<ol class="carousel-indicators">';
                            $receipt_urls.forEach(function(url, index) {
                                pagination += '<li data-target="#' + modalCarouselId + '" data-slide-to="' + index + '" ' + (index === 0 ? 'class="active"' : '')
                                    + ' style="width: 12px; height: 12px; background-color: white; border-radius: 50%; margin: 0 5px; filter: drop-shadow(2px 4px 5px black);'
                                    + '"></li>';
                            });
                            pagination += '</ol>';
                            let popupCarousel = '<div id="' + modalCarouselId + '" class="carousel slide" data-ride="carousel" data-interval="false">';
                            popupCarousel += pagination;
                            popupCarousel += '<div class="carousel-inner">';
                            $receipt_urls.forEach(function(url, index) {
                                popupCarousel += '<div class="carousel-item ' + (index === 0 ? 'active' : '') + '">';
                                popupCarousel += '<img src="' + url + '" class="d-block w-100 image-fluid" style="max-height:100%; object-fit: contain;">';
                                popupCarousel += '</div>';
                            });
                            popupCarousel += '</div>';
                            popupCarousel += '<a class="carousel-control-prev" href="#' + modalCarouselId + '" role="button" data-slide="prev" style="filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 1));">';
                            popupCarousel += '<span class="carousel-control-prev-icon" aria-hidden="true"></span>';
                            popupCarousel += '</a>';
                            popupCarousel += '<a class="carousel-control-next" href="#' + modalCarouselId + '" role="button" data-slide="next" style="filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 1));">';
                            popupCarousel += '<span class="carousel-control-next-icon" aria-hidden="true"></span>';
                            popupCarousel += '</a></div>';

                            modal_el.find('.img-popup-container').html(popupCarousel);
                            modal_el.find('.img-popup-container').show();
                        } else {
                            modal_el.find('.img-popup-container').hide();
                            modal_el.find('#receipt_validate_img').attr('src', receipt.receipt_url ?? receipt.file_url);
                        }
                        appendAssetInfo( modal_el,  modal_el.data('receipt') )

                        // separates custom rejected texts and selected reasons on popup
                        $('#approve_comments_select').val(null).trigger('change');
                        $('#approve_comments').val('');

                        if(receipt.status_reason){
                            const reasonsArray = receipt.status_reason.split('; ');
                            const knownReasons = $('#approve_comments_select option').map(function() {
                                return $(this).val();
                            }).get();

                            const matchedReasons = reasonsArray.filter(reason => knownReasons.includes(reason));
                            const customRemarks = reasonsArray.filter(reason => !knownReasons.includes(reason)).join('; ');

                            $('#approve_comments_select').val(matchedReasons).trigger('change');
                            $('#approve_comments').val(customRemarks);
                        }

                        if(modal_el.data('receipt').status ==='approved'){
                            modal_el.find('.approve_item_btn[approve="false"]').hide();
                            let approvehtml = modal_el.find('.approve_item_btn[approve="true"]').html();
                            approvehtml = approvehtml.replace('Approve','Edit Approval');
                            modal_el.find('.approve_item_btn[approve="true"]').html(approvehtml)
                        } else {
                            modal_el.find('.approve_item_btn[approve="false"]').show();
                            let approvehtml = modal_el.find('.approve_item_btn[approve="true"]').html();
                            approvehtml = approvehtml.replace('Edit Approval','Approve');
                            modal_el.find('.approve_item_btn[approve="true"]').html(approvehtml)

                        }

                        modal_el.find('.approve_item_btn').off('click').on('click', function(e){
                            setButtonToLoading(e.currentTarget);

                            // allow to either have selected reasons or custom remarks
                            let apv_remark = '';
                            let selectRejectOptions = $('#approve_comments_select').val();
                            let customRemarks = $('#approve_comments').val();

                            if (selectRejectOptions && selectRejectOptions.length > 0) {
                                apv_remark += selectRejectOptions.join('; ');
                            }

                            if (customRemarks) {
                                if (apv_remark) {
                                    apv_remark += '; ';
                                }
                                apv_remark += customRemarks;
                            }

                            if ( $(this).attr('approve') !=='true' ){
                                $('.approval-confirm-status').text('reject');
                                $('#modal_confirmation').modal('show').find('.btn-confirm').off('click').on('click',function(e){
                                    resetLoadingButton();
                                    setButtonToLoading( e.currentTarget );
                                    const userTags = [];
                                    $("#selected_tags_container .badge .fa-times").each(function() {
                                        userTags.push($(this).data("tag-id"));
                                    });
                                    const receiptTags = [];
                                    $("#selected_tags_container_remarks .badge .fa-times").each(function() {
                                        receiptTags.push($(this).data("tag-id"));
                                    });
                                    // append tags to formData
                                    formData.user_tags = userTags;
                                    formData.receipt_tags = receiptTags;
                                    formData.remove_user_tags = removeUserTags;
                                    formData.remove_receipt_tags = removeReceiptTags;
                                    doSubmitAssetApproval({
                                        ...formData,
                                        'remark' :  APPROVAL_FIELDS['approve_comments'] ? apv_remark : '',
                                    }, false);
                            });
                                return;
                            }

                            $('.error').text('');
                            modal_el.find('.required').removeClass('is-invalid');
                            let has_error = false;
                            $.each(modal_el.find('.required'), function(k,input){
                                if(!$(input).val() || $(input).val().length === 0){
                                    $(input).addClass('is-invalid');
                                    has_error = true;
                                }
                            })
                            if(has_error){
                                modal_el.find('.error').text('Please fill up the required fields');
                                resetLoadingButton();
                                return;
                            }

                            $('.approval-confirm-status').text('approve');
                            $('#modal_confirmation').modal('show').find('.btn-confirm').off('click').on('click',function(e){
                                resetLoadingButton();
                                setButtonToLoading( e.currentTarget );
                                const userTags = [];
                                $("#selected_tags_container .badge .fa-times").each(function() {
                                    userTags.push($(this).data("tag-id"));
                                });
                                const receiptTags = [];
                                $("#selected_tags_container_remarks .badge .fa-times").each(function() {
                                    receiptTags.push($(this).data("tag-id"));
                                });
                                // append tags to formData
                                formData.user_tags = userTags;
                                formData.receipt_tags = receiptTags;
                                formData.remove_user_tags = removeUserTags;
                                formData.remove_receipt_tags = removeReceiptTags;
                                doSubmitAssetApproval({
                                    ...formData,
                                    ...getReceiptEditedDetails(),
                                    // 'remark' :  APPROVAL_FIELDS['approve_comments'] ? $('#approve_comments').val() : '',
                                    'remark' :  APPROVAL_FIELDS['approve_comments'] ? apv_remark : '',
                                },true);
                            })
                        })
                    })

                    let formData = {
                        "receipt_uid": receipt.uid,
                        "user_uid": receipt.user_uid,
                    }


                    // click trigger
                    new_item.find('.approve_item_btn').off('click').on('click', function(e){
                        let is_done = false;
                        var $appv_btn = $(e.currentTarget);
                        if( HAS_APPROVAL_FIELDS &&
                            ( $appv_btn.attr('approve')==='false' || new_item.data('receipt').module !== 'upload_receipt') ){
                            setButtonToLoading(e.currentTarget);
                            is_done = true;
                            $('.approval-confirm-status').text( $appv_btn.attr('approve')==='true' ? 'approve':'reject');
                            $('#modal_confirmation').modal('show').find('.btn-confirm').off('click').on('click',function(e){
                                resetLoadingButton();
                                setButtonToLoading( e.currentTarget );
                                doSubmitAssetApproval(formData, $appv_btn.attr('approve')==='true');
                            })
                        }
                        if(is_done){return}

                        modal_el.find('#assetId').text(receipt.receipt_uid);
                        modal_el.data('receipt', new_item.data('receipt')).modal('show');

                        // carousel for approve asset
                        // modal_el.find('#receipt_validate_img').attr('src', receipt.receipt_url ?? receipt.file_url);
                        const modalCarouselId = 'modalCarousel' + receipt.uid;
                        if ($receipt_urls && $receipt_urls.length > 1) {
                            let pagination = '<ol class="carousel-indicators">';
                            $receipt_urls.forEach(function(url, index) {
                                pagination += '<li data-target="#' + modalCarouselId + '" data-slide-to="' + index + '" ' + (index === 0 ? 'class="active"' : '')
                                    + ' style="width: 12px; height: 12px; background-color: white; border-radius: 50%; margin: 0 5px; filter: drop-shadow(2px 4px 5px black);'
                                    + '"></li>';
                            });
                            pagination += '</ol>';
                            let popupCarousel = '<div id="' + modalCarouselId + '" class="carousel slide" data-ride="carousel" data-interval="false">';
                            popupCarousel += pagination;
                            popupCarousel += '<div class="carousel-inner">';
                            $receipt_urls.forEach(function(url, index) {
                                popupCarousel += '<div class="carousel-item ' + (index === 0 ? 'active' : '') + '">';
                                popupCarousel += '<img src="' + url + '" class="d-block w-100 image-fluid" style="max-height:100%; object-fit: contain;">';
                                popupCarousel += '</div>';
                            });
                            popupCarousel += '</div>';
                            popupCarousel += '<a class="carousel-control-prev" href="#' + modalCarouselId + '" role="button" data-slide="prev" style="filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 1));">';
                            popupCarousel += '<span class="carousel-control-prev-icon" aria-hidden="true"></span>';
                            popupCarousel += '</a>';
                            popupCarousel += '<a class="carousel-control-next" href="#' + modalCarouselId + '" role="button" data-slide="next" style="filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 1));">';
                            popupCarousel += '<span class="carousel-control-next-icon" aria-hidden="true"></span>';
                            popupCarousel += '</a></div>';

                            modal_el.find('.img-popup-container').html(popupCarousel);
                            modal_el.find('.img-popup-container').show();
                        } else {
                            modal_el.find('.img-popup-container').hide();
                            modal_el.find('#receipt_validate_img').attr('src', receipt.receipt_url ?? receipt.file_url);
                        }
                        appendAssetInfo( modal_el,  modal_el.data('receipt') )
                        if(modal_el.data('receipt').status ==='approved'){
                            modal_el.find('.approve_item_btn[approve="false"]').hide();
                            let approvehtml = modal_el.find('.approve_item_btn[approve="true"]').html();
                            approvehtml = approvehtml.replace('Approve','Edit Approval');
                            modal_el.find('.approve_item_btn[approve="true"]').html(approvehtml)
                        } else {
                            modal_el.find('.approve_item_btn[approve="false"]').show();
                            let approvehtml = modal_el.find('.approve_item_btn[approve="true"]').html();
                            approvehtml = approvehtml.replace('Edit Approval','Approve');
                            modal_el.find('.approve_item_btn[approve="true"]').html(approvehtml)

                        }
                        const receiptData = new_item.data('receipt');
                        const userId = receiptData.user_id;
                        const receiptId = receiptData.id;
                        // console.log('userid:', userId, 'receiptid:', receiptId);
                        displayTags(userId, receiptId);

                        modal_el.find('.approve_item_btn').off('click').on('click', function(e){
                            setButtonToLoading(e.currentTarget);

                            // allow to either have selected reasons or custom remarks
                            let apv_remark = '';
                            let selectRejectOptions = $('#approve_comments_select').val();
                            let customRemarks = $('#approve_comments').val();

                            if (selectRejectOptions && selectRejectOptions.length > 0) {
                                apv_remark += selectRejectOptions.join('; ');
                            }

                            if (customRemarks) {
                                if (apv_remark) {
                                    apv_remark += '; ';
                                }
                                apv_remark += customRemarks;
                            }
                            if ( $(this).attr('approve') !=='true' ){
                                $('.approval-confirm-status').text('reject');
                                $('#modal_confirmation').modal('show').find('.btn-confirm').off('click').on('click',function(e){
                                    resetLoadingButton();
                                    setButtonToLoading( e.currentTarget );
                                    const userTags = [];
                                    $("#selected_tags_container .badge .fa-times").each(function() {
                                        userTags.push($(this).data("tag-id"));
                                    });
                                    const receiptTags = [];
                                    $("#selected_tags_container_remarks .badge .fa-times").each(function() {
                                        receiptTags.push($(this).data("tag-id"));
                                    });
                                    // append tags to formData
                                    formData.user_tags = userTags;
                                    formData.receipt_tags = receiptTags;
                                    formData.remove_user_tags = removeUserTags;

                                    doSubmitAssetApproval({
                                        ...formData,
                                        // 'remark' :  APPROVAL_FIELDS['approve_comments'] ? $('#approve_comments').val() : '',
                                        'remark' :  APPROVAL_FIELDS['approve_comments'] ? apv_remark : '',
                                    }, false);
                                })
                                return;
                            }

                            $('.error').text('');
                            modal_el.find('.required').removeClass('is-invalid');
                            let has_error = false;
                            $.each(modal_el.find('.required'), function(k,input){
                                if(!$(input).val() || $(input).val().length === 0){
                                    $(input).addClass('is-invalid');
                                    has_error = true;
                                }
                            })
                            if(has_error){
                                modal_el.find('.error').text('Please fill up the required fields');
                                resetLoadingButton();
                                return;
                            }

                            $('.approval-confirm-status').text('approve');
                            $('#modal_confirmation').modal('show').find('.btn-confirm').off('click').on('click',function(e){
                                resetLoadingButton();
                                setButtonToLoading( e.currentTarget );

                                const userTags = [];
                                $("#selected_tags_container .badge .fa-times").each(function() {
                                    userTags.push($(this).data("tag-id"));
                                });
                                const receiptTags = [];
                                $("#selected_tags_container_remarks .badge .fa-times").each(function() {
                                    receiptTags.push($(this).data("tag-id"));
                                });
                                // append tags to formData
                                formData.user_tags = userTags;
                                formData.receipt_tags = receiptTags;
                                formData.remove_user_tags = removeUserTags;

                                doSubmitAssetApproval({
                                    ...formData,
                                    ...getReceiptEditedDetails(),
                                    'remark' :  APPROVAL_FIELDS['approve_comments'] ? $('#approve_comments').val() : '',
                                },true);
                            })
                        })
                    });
                });

                checkEmpty()

                if(response.paging.count==0){
                    return
                }

                let is_first = response.paging.current_page===1;
                let is_last = response.paging.current_page === response.paging.total_page;
                //let pagination_el = `<nav class="w-100"> <ul class="pagination justify-content-end"><li class="page-item ${is_first?'disabled':''}"><a class="page-link" id="pg-${is_first?'': response.paging.current_page-1}">Previous</a></li>`;
                let pagination_el = `<nav class="w-100"> <ul class="pagination"><li class="page-item ${is_first?'disabled':''}"><a class="page-link" id="pg-${is_first?'': response.paging.current_page-1}">Previous</a></li>`;

                for (let i = 1; i <= response.paging.total_page; i++) {
                    pagination_el += `<li class="page-item ${response.paging.current_page==i ? 'active':''}"><a class="page-link" id="${response.paging.current_page==i ? '' : ('pg-'+i) }" href="javascript:void(0)">${i}</a></li>`;
                }
                pagination_el+=`<li class="page-item ${is_last?'disabled':''}"><a class="page-link" id="pg-${is_last?'': response.paging.current_page+1 }" href="javascript:void(0)">Next</a></li></ul></nav>`

                approve_paginate.html(pagination_el);


                approve_paginate.find('.page-link').off('click').on('click', function(){
                    let this_page = $(this).attr('id').replaceAll('pg-','');
                    if(!this_page){
                        return;
                    }
                    lastFilterValues = {...lastFilterValues, 'page': this_page };
                    history.pushState({}, null,'view_receipts_approver?'+ doFormatSearchParams(lastFilterValues));
                    doToggleFilterConditions(lastFilterValues);
                    doAjaxGetAssets(lastFilterValues);
                })

            }

            function doFormatSearchParams(value){
                let url_path = '';
                $.each(value, function(k,v){
                    if(v!=='' && v.length > 0){
                        url_path += k+'=' +  ( $.isArray(v) ? v.join(',') : v) + '&';
                    }
                })
                url_path = url_path.slice(0, -1);
                return url_path
            }

            // hide/show fields if upload receipt challenge
            function doToggleFilterConditions(value){
                const order_by = { 'amount_desc' : 'Least Spend', 'amount_asc' : 'Most Spend' }
                let has_upload_receipt = value['receipt_challenge'].includes('upload_receipt');
                if(has_upload_receipt){
                    $('#store_name').parent('.form-group').show();
                    for (const [k, v] of Object.entries(order_by)) {
                        if ( !$('option[value='+k+']').length ) {
                            var newOption = new Option( v , k, false, false);
                            $('#order_by').append(newOption);
                        }
                    }
                } else {
                    $('#store_name').parent('.form-group').hide();
                    for (const [k, v] of Object.entries(order_by)) {
                        $('option[value='+k+']').length? $('option[value='+k+']').remove():'';
                    }
                }
            }

            // reset product table and show prompt when change store/outlet
            let currentOutletId = null;
            let currentStoreGroup = null;

            function getStoreGroup(outletId) {
                return $('#approve_outlet option[value="' + outletId + '"]').closest('optgroup').attr('label');
            }

            $('#receipt_validate_popup').on('shown.bs.modal', function() {
                currentOutletId = $('#approve_outlet').val();
                currentStoreGroup = getStoreGroup($('#approve_outlet').val());
            });

            $('#approve_outlet').on('change', function() {
                const newStoreGroup = getStoreGroup($('#approve_outlet').val());
                if (newStoreGroup !== currentStoreGroup && currentStoreGroup !== null) {
                    if (currentOutletId) {
                        $('#changeStore').modal('show');
                    } else {
                        currentStoreGroup = newStoreGroup;
                    }
                }
            });

            $('#confirmChangeStore').on('click', function() {
                currentStoreGroup = getStoreGroup($('#approve_outlet').val());
                $("#editableProductsTable tbody").empty();
                $('#changeStore').modal('hide');
            });
            // revert to previous choices on cancel
            $('#cancelChangeStore').on('click', function(){
                $('#approve_outlet').val(currentOutletId).trigger('change');
                $('#changeStore').modal('hide');
            });

            $('#changeStore').on('hidden.bs.modal', function () {
                $('body').addClass('modal-open');
            });

            // tag dropdown to be used for user and receipt part of APV
            function initializeTagInput(newTagBtnSelector, newTagDropdownSelector, selectedTagsContainerSelector, tagType, removeTags) {
                const $newTagBtn = $(newTagBtnSelector);
                const $newTagDropdown = $(newTagDropdownSelector);
                const $selectedTagsContainer = $(selectedTagsContainerSelector);

                $newTagBtn.on("click", function () {
                    $newTagBtn.addClass("d-none");
                    $newTagDropdown.removeClass("d-none");

                    $.ajax({
                        url: AJAX_URL + 'get_tags',
                        method: "GET",
                        data: { type: tagType },
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                        },
                        success: function (response) {
                            $newTagDropdown.empty();
                            response.forEach((tag) => {
                                $newTagDropdown.append(new Option(tag.name, tag.id));
                            });
                            $newTagDropdown.prepend('<option disabled selected>Select a tag</option>');
                        },
                        error: function () {
                            console.error("Error fetching tags.");
                            $newTagDropdown.empty().append('<option disabled>Error loading tags</option>');
                        },
                    });
                });

                $newTagDropdown.on("change", function () {
                    const selectedValue = $(this).val();
                    const selectedText = $(this).find("option:selected").text();

                    if (selectedValue) {
                        const $tagBadge = $(`
                <div class="badge badge-primary mx-1 my-1 d-flex align-items-center">
                    ${selectedText}
                    <i class="fas fa-times ml-2" style="cursor: pointer;" data-tag-id="${selectedValue}"></i>
                </div>
            `);

                        $selectedTagsContainer.append($tagBadge);
                        $newTagDropdown.addClass("d-none").val(null);
                        $newTagBtn.removeClass("d-none");
                    }
                });

                // have 'x' inside the selected tags to have the ability to remove them
                $selectedTagsContainer.on("click", ".fa-times", function () {
                    const tagId = $(this).data("tag-id");
                    if (tagId && !removeTags.includes(tagId)) {
                        removeTags.push(tagId);
                    }
                    $(this).parent().remove();
                });
            }
            const removeUserTags = [];
            const removeReceiptTags = [];
            initializeTagInput(
                "#new_tag_btn",
                "#new_tag_dropdown",
                "#selected_tags_container",
                "user",
                removeUserTags
            );
            initializeTagInput(
                "#new_tag_btn_remarks",
                "#new_tag_dropdown_remarks",
                "#selected_tags_container_remarks",
                "receipt",
                removeReceiptTags
            );

            $('.filter-input').on('change keyup', function(){
                let value = {}
                $.each( $('.filter-input'), function(){ value[ $(this).attr('id') ] = $(this).val() ?? ''});
                if(lastFilterValues===value){ return }
                lastFilterValues = value;
                history.pushState({}, null,'view_receipts_approver?'+ doFormatSearchParams(value));
                doToggleFilterConditions(value);
                doAjaxGetAssets(value);

            }).change();

            if(APPROVAL_FIELDS['approve_outlet'] && APPROVAL_FIELDS['approve_product']){
                $('#approve_product').select2({
                    sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),
                }).change();
                $('#approve_outlet').val('').on('change', function(){
                    if(!$(this).val()){return}
                    $('#select_product').find('option').remove().val('').select2().change();
                    $.ajax({
                        "url": AJAX_URL + 'get_business_asset_products/'+ $(this).val(),
                        "method": "GET",
                    }).done(function (response) {
                        if(response.length > 0){
                            // Add default empty option
                            const defaultOption = $('<option>', {
                                value: '',
                                text: 'Select a Product',
                                disabled: true,
                                selected: true
                            });

                            $('#select_product').append(defaultOption);

                            $.each(response, function(k,product){
                                var newOption = new Option(product.name, product.id, false, false);
                                $('#select_product').append(newOption);
                            });

                            const productTableCount = $("#editableProductsTable tbody tr").length;
                            if (productTableCount === 0) {
                                $('#select_product')
                                    .addClass('required')
                                    .parent('.form-group').find('label .text-danger').removeClass('d-none');
                            }

                        } else{
                            $('#select_product')
                                .removeClass('required')
                                .parent('.form-group').find('label .text-danger').addClass('d-none');
                        }
                    })

                }).change();
            }

            modal_el.on('hidden.bs.modal', function(e){
                currentStoreGroup = null;
                $('#receipt_validate_popup')
                    .find('input, select, textarea').val('').change().end()
                    .find('.required').removeClass('is-invalid').end()
                    .find('.error, td').text('').end()
                    .find('img').attr('src','').end()
                    .data('receipt',null);
            })

            $('#modal_confirmation').on('hidden.bs.modal', function(){
                resetLoadingButton();
                $('#modal_confirmation').find('.btn-confirm').off('click');
            });

        });
    </script>

    <script defer type="text/javascript">
        const selectInput = $("#select_product");
        selectInput.on('change', function () {
            $(this).removeClass('required');
        });

        selectInput.select2({
            dropdownParent: $("#select_product_parent"),
            minimumResultsForSearch: 10
        });

        selectInput.on('change', function () {
            let isProductAlreadyInTable = false;
            const productId = $(this).val();
            const productName = $(this).find('option:selected').text();

            $('#editableProductsTable tbody td:nth-child(' + 2 + ')').each(function() {
                if ($(this).text().includes(productId)) {
                    isProductAlreadyInTable = true;
                    return false;
                }
            });

            if (isProductAlreadyInTable === true) {
                return;
            }

            const row = $("<tr>");

            const idCell = $("<td class='hidden-column'>").text("")
            const productIdCell = $("<td class='hidden-column'>").text(productId)
            const productNameCell = $("<td>").text(productName);
            const productPriceCell = $("<td class='editable-cell editable-cell-price'>").text("0.00");
            const quantityCell = $("<td class='editable-cell editable-cell-quantity'>").text("1");
            const deleteCell = $("<td class='editable-cell editable-cell-delete'>").append('<i class="fas fa-trash mr-1"><i/>');

            row.append(idCell, productIdCell, productNameCell, productPriceCell, quantityCell, deleteCell);
            $("#editableProductsTable tbody").append(row);
            $(this).val("");
        })

        $("#editableProductsTable").on('click', 'td.editable-cell-product-name', function () {
            const currentElement = $(this);
            const value = currentElement.text();

            // Check if the input is already there to avoid multiple inputs
            if (currentElement.children('input').length === 0) {
                currentElement.html('<input type="text" value="' + value + '" />');

                // Focus and select the input value
                currentElement.children('input').focus().select();

                // Handle focus out to save the new value
                currentElement.children('input').on('blur', function() {
                    let newValue = $(this).val().trim();

                    if (newValue === '') {
                        // Reset to the original value if the input is empty
                        currentElement.html(value);
                    } else {
                        currentElement.html(newValue);
                    }
                });

                // Optionally, add a keypress handler to handle "Enter" key
                currentElement.children('input').on('keypress', function(e) {
                    if (e.which === 13) {  // Enter key
                        $(this).blur();  // Trigger the blur event
                    }
                });
            }
        });


        $("#editableProductsTable").on('click', 'td.editable-cell-price',function () {
            const currentElement = $(this);
            const value = currentElement.html();
            // Check if the input is already there to avoid multiple inputs
            if (currentElement.children('input').length === 0) {
                currentElement.html('<input type="text" pattern="^\d*(\.\d{0,2})?$" value="' + value + '" />');

                // Focus and select the input value
                currentElement.children('input').focus().select();

                // Handle focus out to save the new value
                currentElement.children('input').on('blur', function() {
                    let value = $(this).val();
                    // Validate the format and adjust if necessary
                    if (value === '' || parseFloat(value) === 0) {
                        value = '0.00'; // Default to zero if empty or zero
                    } else if (!value.includes('.')) {
                        value = parseInt(value, 10).toString(); // Remove leading zeroes
                    } else if (value.endsWith('.')) {
                        value = value.slice(0, -1); // Remove trailing decimal point
                    }
                    currentElement.html(value);
                });

                // Validate
                currentElement.children('input').on('input', function () {
                    let value = $(this).val();
                    // Remove any character that is not a digit or decimal point
                    value = value.replace(/[^\d.]+/, '');

                    if (value.includes('.')) {
                        let parts = value.split('.');
                        if (parts.length > 2) {
                            value = parts[0] + '.' + parts[1]
                        }
                        if (parts[1].length > 2) {
                            value = parts[0] + '.' + parts[1].substring(0, 2);
                        }
                    }

                    $(this).val(value);
                })

                // Optionally, add a keypress handler to handle "Enter" key
                currentElement.children('input').on('keypress', function(e) {
                    if (e.which === 13) {  // Enter key
                        let value = $(this).val();
                        // Validate the format and adjust if necessary
                        if (value === '' || parseFloat(value) === 0) {
                            value = '0.00'; // Default to zero if empty or zero
                        } else if (!value.includes('.')) {
                            value = parseInt(value, 10).toString(); // Remove leading zeroes
                        } else if (value.endsWith('.')) {
                            value = value.slice(0, -1); // Remove trailing decimal point
                        }
                        $(this).val(value);
                        $(this).blur();  // Trigger the blur event
                    }
                });
            }
        });

        $("#editableProductsTable").on('click', 'td.editable-cell-quantity',function () {
            const currentElement = $(this);
            const value = currentElement.html();
            // Check if the input is already there to avoid multiple inputs
            if (currentElement.children('input').length === 0) {
                currentElement.html('<input type="text" pattern="^\d*(\.\d{0,2})?$" value="' + value + '" />');

                // Focus and select the input value
                currentElement.children('input').focus().select();

                // Handle focus out to save the new value
                currentElement.children('input').on('blur', function() {
                    // let value = $(this).val();
                    // value = value.replace(/[^\d]/g, '');  // Allow digits only
                    // value = value.replace(/^0+/, '');     // Remove leading zeroes
                    //
                    // // Set a default value of zero if the input is empty
                    // let finalValue = $(this).val(value === '' ? '0' : value);
                    // currentElement.html(finalValue);
                    let newValue = $(this).val();
                    if (newValue === '') {
                        newValue = 1
                    }

                    currentElement.html(newValue);
                });

                // Validate
                currentElement.children('input').on('input', function () {
                    var value = $(this).val();
                    value = value.replace(/\D/g, '');  // Allow digits only
                    value = value.replace(/^0+/, '');     // Remove leading zeroes
                    $(this).val(value);
                })

                // Optionally, add a keypress handler to handle "Enter" key
                currentElement.children('input').on('keypress', function(e) {
                    if (e.which === 13) {  // Enter key
                        if (value === "" || value < 0) {
                            $(this).val(0)
                        }
                        $(this).blur();  // Trigger the blur event
                    }
                });
            }
        });

        $("#editableProductsTable").on('click', 'td.editable-cell-delete',function () {
            $(this).closest('tr').remove();
        });


        $("#editableProductsTable, #editable-cell-delete, #approve_txn_amt").on('keyup click', function (e){
            setTimeout(function(){
                if($('#receipt_validate_popup').data('receipt').uid) {
                    uid = $('#receipt_validate_popup').data('receipt').uid

                    $.ajax({
                        url: '{{route('admin.get_receipt_estimated_rewards')}}',
                        method: "POST",
                        data: {
                            ...{
                                'approval_id': uid,
                            },
                            ...getReceiptEditedDetails()
                        }
                    }).done(function (response) {
                        if (!response.error) { //  typeof != 'undefined'
                            generateRewardTableHTML(response, 'estimatedRewardsTable');
                        }

                    })
                }
            }, 1000)

        })

    </script>
@endSection


@section('content')

    @php
        $modules = getModuleActivationStatus();

        $card_tb = [
            //'receipt_uid'=>'Asset ID',
            //'user_id'=>'User ID',
            'user_uid'=>'User UID',
            'name'=>'Name',
            //'approved challenges'=>'Approved Challenges',
            'vouchers'=>'Vouchers',
            'merchants'=>'Store/ Outlet',
            'module'=>'Challenge',
            'transaction_amount'=>'Spend ($)',
            'products'=>'Products',
            //'status'=>'Status',
            //'error'=>'Error',
            'created_at'=>'Uploaded',
            'reviewed_at' => 'Reviewed At',
            'reviewed_by' => 'Reviewed By',
            'status_reason' => 'Remarks',
            'question_title' => 'Survey Title',
            'answer_text' => 'Survey Answer',
            'rejection_reasons' => 'Rejection Reason(s)',
            'qualifying_spend' => 'SKU Qualifying Spend',
        ];

        if (isset($modules['dsc']) && $modules['dsc'] === true) {
            $card_tb['grid_position'] = 'Grid Position';
            $card_tb['user_card_no'] = 'User Stamp Card No.';
        }

        $popup_tb = [
            //'receipt_uid'=>'Asset ID',
            //'user_id'=>'User ID',
            //'products'=>'Products',
            'user_uid'=>'User UID',
            'merchants'=>'Store/ Outlet',
            'transaction_amount'=>'Spend ($)',
            'products'=>'Products',
            'module'=>'Challenge',
            //'status'=>'Status',
            //'error'=>'Error',
            'created_at'=>'Uploaded',
            'reviewed_at' => 'Reviewed At',
            'reviewed_by' => 'Reviewed By',
            'status_reason' => 'Remarks',
            'question_title' => 'Survey Title',
            'answer_text' => 'Survey Answer',
            'rejection_reasons' => 'Rejection Reason(s)',
        ];
    @endphp
    @component('admin.components.tabs')
        <div class="container-fluid">
            <div class="row p-3 border-bottom">
                @php $form = config('admin.receipt_approval_filter') @endphp

                @php $id = 'order_by'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', [ 'class'=> 'col-6 col-sm-2', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <select id="{{$id}}" name="{{$id}}[]" class="filter-input form-control select2 {{$errors->has($id) ? 'is-invalid':'select2bs4'}}"
                            data-placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;">
                        @if($form[$id]['input'])
                        @foreach($form[$id]['input'] as $value => $label)
                            <option value="{{$value }}" {{ in_array( $value , $form[$id]['value'])?'selected':'' }}>{{ $label }}</option>
                        @endforeach
                        @endif
                    </select>
                @endcomponent


                @php $id = 'user_id'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', [ 'class'=> 'col-6 col-sm-4', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <input id="{{$id}}" name="{{$id}}[]" class="filter-input form-control" placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;"/>
                @endcomponent

                @php $id = 'date_from'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', [ 'class'=> 'col-6 col-sm-3', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <input id="{{$id}}" name="{{$id}}" class="filter-input form-control" placeholder="{{$form[$id]['placeholder']}}" value="" style="width: 100%;"/>
                @endcomponent

                @php $id = 'date_to'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', [ 'class'=> 'col-6 col-sm-3', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <input id="{{$id}}" name="{{$id}}" class="filter-input form-control" placeholder="{{$form[$id]['placeholder']}}" value="" style="width: 100%;"/>
                @endcomponent

                @php $id = 'receipt_status'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', [ 'class'=> 'col-6 col-sm-2', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <select id="{{$id}}" name="{{$id}}[]" class="filter-input form-control select2 {{$errors->has($id) ? 'is-invalid':'select2bs4'}}"
                            multiple="multiple" data-placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;">
                        @if($form[$id]['input'])
                            @foreach($form[$id]['input'] as $value => $label)
                                <option value="{{$value }}" {{ in_array( $value , $form[$id]['value'])?'selected':'' }}>{{ $label }}</option>
                            @endforeach
                        @endif
                    </select>
                @endcomponent

                @php $id = 'receipt_challenge'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', ['class'=> 'col-6 col-sm-4', 'help'=> $form[$id]['help'], 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <select id="{{$id}}" name="{{$id}}[]" class="filter-input form-control select2 {{$errors->has($id) ? 'is-invalid':'select2bs4'}}"
                            multiple="multiple" data-placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;">
                        @if($form[$id]['input'])
                            @foreach($form[$id]['input'] as $value => $label)
                                <option value="{{$value }}" {{ in_array( $value , $form[$id]['value'])?'selected':'' }}>{{ $label }}</option>
                            @endforeach
                        @endif
                    </select>
                @endcomponent

                @php $id = 'store_name'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', [ 'class'=> 'col-12 col-sm-6', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <select id="{{$id}}" name="{{$id}}[]" class="filter-input form-control select2 {{$errors->has($id) ? 'is-invalid':'select2bs4'}}"
                            multiple="multiple" data-placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;">
                        @if($form[$id]['input'])
                            @foreach($form[$id]['input'] as $value => $label)
                                <option value="{{$value }}" {{ in_array( $value , $form[$id]['value'])?'selected':'' }}>{{ $label }}</option>
                            @endforeach
                        @endif
                        @if($asset_array)
                            @foreach($asset_array as $key => $assets)
                                <optgroup label="{{$stores[$key]['name']}}">
                                    @foreach($assets as $key => $asset)
                                        @if( $asset['status'] == 'active' || $asset['active'] == 'active')
                                            <option value="{{ $asset['id'] }}">{{ $asset['name'] }}</option>
                                        @endif
                                    @endforeach
                                </optgroup>
                            @endforeach
                        @endif
                    </select>

                    @slot('prepend')
                        @php $id = 'store_name_type'; $hasError = $errors->has($id) @endphp
                        <select id="{{$id}}" name="{{$id}}[]" class="filter-input form-control select2 {{$errors->has($id) ? 'is-invalid':'select2bs4'}}"
                                data-placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;">
                            @foreach($form[$id]['input'] as $value => $label)
                                <option value="{{$value }}" {{ in_array( $value , $form[$id]['value'])?'selected':'' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    @endslot

                @endcomponent

                @php $id = 'receipt_uid'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', ['class'=> 'col-6 col-sm-6', 'help'=> $form[$id]['help'], 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <div class="input-group">
                        <select id="{{$id}}" name="{{$id}}[]" class="filter-input form-control select2 {{$errors->has($id) ? 'is-invalid':'select2bs4'}}"
                            multiple="multiple" data-placeholder="{{$form[$id]['placeholder']}}" style="width: 90%;">
                        </select>
                        <div class="input-group-append">
                            <button class="btn btn-outline-light" type="button">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                @endcomponent

            </div>
        </div>

        <div class="col-sm-12 overflow-auto">
            <div class="col-12 pl-3 asset-count my-3 text-bold text-muted">
            </div>

            <div id="approve_wrap" class="row row-cols-md-2 px-3 row-cols-lg-3 row-cols-xl-4">

            </div>
            <div id="approve_paginate" class="row w-100">
            </div>
            <div id="approve_template" class="d-none">
                <div id="approve_item" class="col approve_item">
                    <div class="card bg-light overflow-hidden">
                        <div class="card-header p-0 border-0">
                            <div class="align-items-center d-flex justify-content-between px-2 py-1 text-muted w-100">
                                <span>ID: <span class="uid"></span></span>
                                <span class="float-right">
                                    <span class="edit-status badge badge-btn btn btn-xs btn-link p-0 text-black-50"
                                          data-toggle="tooltip" data-placement="top" title="Edit Approval"
                                          style="display:none; font-size: .75rem !important;"><i class="fas fa-edit mr-1"></i></span>
                                    <span class="status-bar badge"></span>
                                </span>
                            </div>
                            <div class="img-container img w-100 bg-secondary" style="max-height:400px; object-fit: contain;">
                            </div>
                            <a href="" target="_blank">
                                <img class="receipt-img img w-100 bg-secondary" src="" alt="" style="max-height:400px; object-fit: contain;"/>
                            </a>
                        </div>
                        <div class="card-body p-0">
                            <table class="table table-sm small">
                                <tbody>
                                @foreach( $card_tb as $id => $title_val )
                                <tr style="display:none">
                                    <th scope="row" class="pl-3 pr-0" style="width: 75px">{{$title_val}}</th>
                                    <td class="{{$id}} pr-3"></td>
                                </tr>
                                @endforeach
                                </tbody>
                            </table>

                        </div>
                        <div class="card-footer p-2">
                            <div class="d-flex">
                                <a href='#' class="w-50 mr-2 btn btn-sm btn-danger approve_item_btn text-nowrap" approve="false">
                                    <i class="fas fa-times mr-2"></i>Reject
                                </a>
                                <a href='#' class="w-50 btn btn-sm btn-success approve_item_btn text-nowrap" approve="true">
                                    <i class="fas fa-check mr-2"></i>Approve
                                </a>
                            </div>
                        </div>
                        <div class="overlay dark d-none">
                            <i class="fas fa-2x fa-sync-alt"></i>
                        </div>
                    </div>
                </div>
                <h5 id="approve_empty" class="mx-auto my-5 text-center text-muted">
                    <i class="fas fa-2x fa-thumbs-up my-3"></i><br/>
                    No Assets Found
                </h5>
            </div>
        </div>

        <div class="modal fade" id="changeStore" tabindex="-1"role="dialog" aria-labelledby="changeStoreLabel" aria-hidden="true" style="z-index: 2050;">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="changeStoreLabel">Confirm Change</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        You have selected a different store/outlet. Please choose a new product.
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" id="cancelChangeStore">Cancel</button>
                        <button type="button" class="btn btn-primary" id="confirmChangeStore">Confirm</button>
                    </div>
                </div>
            </div>
        </div>

    @endcomponent

    @component('components.utility.template_popup', ['id' => 'receipt_validate_popup', 'custom_dialog_class' => 'modal-xl'])
        @slot('slot_header')
            <label class="modal-title">Approve Asset ID:<span id="assetId"></span></label>
        @endslot

        @slot('slot')
            <div class="container-fluid p-0">
                <div class="row">
                    <div class="col-md-6">
                        <img src="" class="image-fluid w-100" id="receipt_validate_img"/>
                    <div class="img-popup-container">
                    </div>
                    </div>
                    <div class="col-md-6 text-left">
                        <label class="mb-0">User Input</label>

                        <div class="rounded border bg-light mb-3">
                            <table class="table table-sm">
                                <tbody>
                                @foreach( $popup_tb as $id => $title_val )
                                    <tr style="display:none">
                                        <th scope="row">{{$title_val}}</th>
                                        <td class="{{$id}}">
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                            @php $id = 'new_tag_user'; $hasError = $errors->has($id) @endphp
                                @component('admin.components.form_field', [ 'class'=> 'col-12 px-0', 'label'=>$form[$id]['label'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                <div id="tag_wrapper_user" class="d-flex flex-wrap align-items-center" style="margin-left: 10px;">
                                    <button id="new_tag_btn" class="btn btn-sm btn-outline-primary">+ New Tag</button>
                                    <select id="new_tag_dropdown" class="form-control mt-2 d-none" style="width: auto;">
                                        <option disabled selected>Loading tags...</option>
                                    </select>
                                    <div id="selected_tags_container" class="d-flex flex-wrap"></div>
                                </div>
                                @endcomponent
                        </div>

                        <label class="mb-0">Approve Details</label><br>
{{--                        <small class="text-muted">The receipt will only be approved upon validation</small>--}}

                        <div class="bg-light border p-2 rounded">
                            @php $id = 'approve_outlet'; $hasError = $errors->has($id) @endphp
                            @if($asset_approve_fields[$id])
                            <div id="select_outlet_parent">
                                @component('admin.components.form_field', [ 'class'=> 'col-12 px-0', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                    <select id="{{$id}}" name="{{$id}}" class="form-control select2 {{$errors->has($id) ? 'is-invalid':'select2bs4'}} {{$form[$id]['req']?'required':''}}"
                                            data-placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;">
                                        @foreach($asset_array as $key => $assets)
                                            <optgroup label="{{$stores[$key]['name']}}">
                                                @foreach($assets as $key => $asset)
                                                    @if( $asset['status'] == 'active' || $asset['active'] == 'active')
                                                        <option value="{{ $asset['id'] }}">{{ $asset['name'] }}</option>
                                                    @endif
                                                @endforeach
                                            </optgroup>
                                        @endforeach
                                    </select>
                                @endcomponent
                            </div>
                            @endif



                            @php $id = 'approve_product'; $hasError = $errors->has($id) @endphp
                            @if($asset_approve_fields[$id])
                            <div id="select_product_parent">
                                @component('admin.components.form_field', [ 'class'=> 'col-12 px-0', 'label'=>$form[$id]['label'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                    <select id="select_product" name="select_product" class="form-control select2 select2bs4 {{$errors->has($id) ? 'is-invalid': ''}}"
                                            data-placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;">
                                    </select>
                                    <table id="editableProductsTable" class="table table-md mt-2">
                                        <thead>
                                        <tr>
                                            <th class="hidden-column"></th>
                                            <th class="hidden-column"></th>
                                            <th>Product</th>
                                            <th>SKU Price</th>
                                            <th>Quantity</th>
                                            <th style="text-align: center">Action</th>
                                        </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                @endcomponent
                            </div>
                            @endif

                            @php $id = 'approve_txn_amt'; $hasError = $errors->has($id) @endphp
                            @if($asset_approve_fields[$id])
                            @component('admin.components.form_field', [ 'class'=> 'col-12 px-0', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                <input id="{{$id}}" name="{{$id}}" class="form-control" placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;"/>
                            @endcomponent
                            @endif

                            @php $id = 'approve_comments'; $hasError = $errors->has($id) @endphp
                            @if($asset_approve_fields[$id])
                            @component('admin.components.form_field', [ 'class'=> 'col-12 px-0', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                <select id="approve_comments_select" name="approve_comments_select[]" class="form-control select2 {{$errors->has($id) ? 'is-invalid':'select2bs4'}} {{$form[$id]['req'] ? 'required':''}}"
                                        multiple="multiple" style="width: 100%;">
                                    <option value="Purchase was not within the promotion period">Purchase was not within the promotion period</option>
                                    <option value="Receipt has been submitted previously">Receipt has been submitted previously</option>
                                    <option value="Purchase was made in a non-participating store">Purchase was made in a non-participating store</option>
                                    <option value="Purchase did not meet the participation criteria">Purchase did not meet the participation criteria</option>
                                    <option value="Receipt did not contain all information needed for validation">Receipt did not contain all information needed for validation</option>
                                    <option value="Receipt is not legible">Receipt is not legible</option>
                                    <option value="Others">Others</option>
                                </select>
                                <textarea row="5" id="{{$id}}" name="{{$id}}[]" class="form-control" placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;"></textarea>
                            @endcomponent
                            @endif
                            @php $id = 'new_tag_receipt'; $hasError = $errors->has($id) @endphp
                                @component('admin.components.form_field', [ 'class'=> 'col-12 px-0', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                <div id="tag_wrapper_remarks" class="d-flex flex-wrap align-items-center">
                                    <button id="new_tag_btn_remarks" class="btn btn-sm btn-outline-primary">+ New Tag</button>
                                    <select id="new_tag_dropdown_remarks" class="form-control mt-2 d-none" style="width: auto;">
                                        <option disabled selected>Loading tags...</option>
                                    </select>
                                    <div id="selected_tags_container_remarks" class="d-flex flex-wrap"></div>
                                </div>
                                @endcomponent
                            @if(config('smart_receipt.settings.has_require_transaction_date'))
                                @component('admin.components.form_field', [ 'class'=> 'col-12 px-0', 'label'=> 'Transaction Date', 'required'=> true, 'description'=> '',])
                                    <input id="transaction_date" type="text" name="transaction_date" class="form-control" placeholder="YYYY-MM-DD" />
                                @endcomponent
                            @endif

                            @if(config('smart_receipt.settings.has_require_outlet_name'))
                                @component('admin.components.form_field', [ 'class'=> 'col-12 px-0', 'label'=> 'Outlet Name', 'required'=> true, 'description'=> '',])
                                    <input id="outlet_name" type="text" name="outlet_name" class="form-control" placeholder="Outlet Name" />
                                @endcomponent
                            @endif

                            @if(config('smart_receipt.settings.has_require_payment_mode'))
                                @component('admin.components.form_field', [ 'class'=> 'col-12 px-0', 'label'=> 'Payment Mode', 'required'=> true, 'description'=> '',])
                                    <select id="payment_mode" name="payment_mode" class="form-control required" style="width: 100%;">
                                        <option selected value="">Select</option>
                                        @foreach(array_filter(explode(',', config('smart_receipt.settings.payment_mode_options'))) as $option)
                                            <option value="{{ $option }}">{{ $option }}</option>
                                        @endforeach
                                    </select>
                                @endcomponent
                            @endif

                            <div class="rounded border bg-light mb-3">
                                <table id="rewardsTable" class="table table-md">
                                    <thead>
                                    <tr>
                                        <th>Provisioned Rewards</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>

                            <div class="rounded border bg-light mb-3">
                                <table id="estimatedRewardsTable" class="table table-md">
                                    <thead>
                                    <tr>
                                        <th>Estimated Rewards</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endslot

        @slot('slot_footer')
            <div class="w-100 small text-danger error text-right"></div>

            <div class="w-100 justify-content-between">
                <button type="button" class="btn btn-default float-left" data-dismiss="modal">{{ __('heading.btn_close') }}</button>
                <div class="float-right d-flex flex-row justify-content-end">

                    <a href='#' class="mr-2 btn btn-danger approve_item_btn text-nowrap" approve="false">
                        <i class="fas fa-times mr-2"></i>Reject
                    </a>
                    <a href='#' class="btn btn-success approve_item_btn text-nowrap" approve="true">
                        <i class="fas fa-check mr-2"></i>Approve
                    </a>
                </div>
            </div>

        @endslot
    @endcomponent

    @component('components.utility.modal_confirmation')
        @slot('slot_header')
            <span>Confirm <span class="approval-confirm-status text-capitalize"></span></span>
        @endslot
        @slot('slot_body_info')
            Please confirm if you would like to <span class="approval-confirm-status text-bold"></span> this asset?
        @endslot
    @endcomponent

@endsection