

    function cancel_approved_by() {
        var newtext =`<div id="approved_by_div" style="display:grid; gap:0; grid-template-columns: 70% 20% 10%;">
                        <div style="grid-column:1; grid-row:1; padding:0; margin:0;z-index:1;">
                            <div style='grid-column:1; grid-row:1; padding:0; margin:0;'>
                                <input type='hidden' name='approved_by' id='approved_by' value='' >
                                <input type='hidden' name='date_approved' id='date_approved' value=''>
                            </div>
                            <a id="approved_by_btn" class="button v-small" style="width:-webkit-fill-available; color:white;" href="#" onclick="approved_by_click();">Click to Approve</a>
                        </div>
                    </div>`;

        $('#approved_by_div').replaceWith(newtext);
    }

    function approved_by_click() {
        DayPilot.Modal.confirm("Do you Approve this Green Coffee Inspection?", {
            theme: "modal_rounded"
        }).then(function(args) {
            if (args.result) {
                var newtext =`<div id='approved_by_div' style='display:grid; gap:0; grid-template-columns: 70% 20% 10%;'>
                        <div style='grid-column:1; grid-row:1; padding:0; margin:0;'>
                            <input type='hidden' name='approved_by' id='approved_by'
                                value='<?= esc(auth()->user()->username) ?>' >
                            <input type='hidden' name='date_approved' id='date_approved' value="<?= date_format(date_create(), 'Y-m-d H:i:s') ?>">

                            <input type='text' name='approved_by_display' id='approved_by_display'
                                class='grid-column:1; grid-cell' style='padding:0; margin:0;height:100%;border-style:solid; border-color:dimgray;text-align:center;'
                                value='<?= esc(auth()->user()->username) ?>' disabled>
                        </div>
                        <div style='grid-column:2; grid-row:1; padding:0; margin:0;'>
                            <a id='cancel_approved_by'
                                href='#'
                                class='disableifapproved'
                                onclick='cancel_approved_by();'
                                style='align-content:center; justify-self:center; text-align:center; width:100%; height:100%; border-style: solid; border-radius:5px; background-color:dimgrey; color:white; display:block;'>
                                x
                            </a>
                        </div>
                    </div>`;
                $('#approved_by_div').replaceWith(newtext);
                $('#submit_btn').click();
            }
        });
    }

    $().ready(() => {
        // On Page Ready
        <?php if (auth()->user()->inGroup('admin') || null == $greencoffee->approved_by || empty($greencoffee->approved_by)): ?>
            // Do not disable controls if admin or approved by is empty
            $(".disableifapproved").prop("disabled", false);
        <?php else: ?>
            // disbale controls becasuse form is sapproved
            $(".disableifapproved").prop("disabled", true);
            $("a.disableifapproved").hide();
        <?php endif; ?>
    });

