<?php

/*

 * *************************************************

 * Copyright (C) 2020 Earworks.                    *

 * Codeigniter Project Template Modification       *

 * Please contact our email for more information : *

 * contact@earworks.co.id                          *

 * *************************************************

 */



defined('BASEPATH') OR exit('No direct script access allowed');

Ci::set_style(<<<CSS

    footer {display:none}

    .footer-blank {display:block !important;}

    .main-content {

        height: calc(100vh - 120px);

        overflow: hidden;

    }

    .row-card {

        background-color:white;

        border: 1px solid #cfcfcf;

        padding:10px;

//        border-bottom:0px;

         display:block;

        max-width:320px;

        margin:0px auto;

        opacity:1;

        transition:0.3s;

        transform: translateX(0px);

        margin-top:-1px;

    }

    .row-card:first-child { margin-top:0px;}

    .row-order {

        margin-top:15px;

    }

    .row-card.new {

        opacity:0;

        transform: translateX(10px);

        border-bottom: 1px solid #cfcfcf;

    }

    .row-card > span {

        display:block;

        text-align:center;

        font-weight:bold;

        font-size:18px;

    }

//    body {

//        height:100vh;

//        overflow:hidden;

//    }

    .row-image > img {

        display:block;

        max-width:200px;

        margin:0px auto;

    }

    .no-padding {padding:0px;}

    .no-padding:first-child {padding-left:30px;}

    .no-padding:last-child {padding-right:30px;}

    .row-total {

        display:block;

        font-weight:bold; 

        font-size:20px; 

        text-align:center;

    }

CSS

        , 'embed');

?>

<div class="container-fluid">

    <span class="separator half"></span>

    <div class="row">

        <?php if ($product): ?>

            <?php $j = 0; ?>

            <?php foreach ($product as $res) : ?>

                <div class="col-xs-4 no-padding">

                    <div class="row-image">

                        <img src="<?= base_url('img/uploads/' . $res['productPath']) ?>" class="img img-responsive" style="width:100%;"/>

                        <span class="row-total">

                            Jumlah 

                            <?php

                            switch ($res['productId']) {

                                case 1 :

                                    echo 'Platinum';

                                    break;

                                case 2 :

                                    echo "Gold";

                                    break;

                                case 3 :

                                    echo "Silver";

                                    break;

                                default:

                                    echo "Silver";

                                    break;

                            }

                            ?>

                            : <span id="counter-<?= $res['productId'] ?>">0</span>

                        </span>

                    </div>

                    <div class="row-order" id="order-<?= $res['productId'] ?>">

                    </div>

                </div>

            <?php endforeach; ?>

        <?php endif; ?>

    </div>

</div>

<?php

$draw_url = base_url('home/ajax-get-order');

Ci::set_script(<<<EOD

    var order = function () {

        var the;

        var draw_url = '{$draw_url}';

        var stacklist = [];

        var new_object_list = [];

        var new_object_count = 0;

        var count_interval = 0;

        return {

            init: function () {

                the = this;

                setInterval(the.draw_record, 10000);

            },

            draw_record: function () {

                count_interval++;

                $.ajax({

                    url: draw_url, type: 'GET', dataType: 'JSON',

                    'success': the.register_item

                });

                

            },

            register_item: function (res) {

                if (res.length === 0) {

                    return;

                }

                $.each(res, function (idx, data) {

                    if (stacklist.hasOwnProperty(idx) === false) {

                        stacklist[idx] = [];

                    }

                    if (data) {

                        var counter = 0;

                        $.each(data, function (idx2, data2) {

                            if (stacklist[idx].hasOwnProperty(idx2) === false) {

                                stacklist[idx][idx2] = data2;

                                var new_object = the.create_object(data2);

                                $('#order-' + idx).prepend(new_object);

                                new_object_list[new_object_count] = new_object;

                                new_object_count++;

                            }

                             counter++;

                        });

                        $('#counter-'+idx).html(counter);

                    }

                });

                the.enter_animation();

            },

            enter_animation: function () {

                if (new_object_list.length === 0) {

                    return;

                }

                var timeout = 0;

                $('.row-card').each(function () {

                    var obj = $(this);

                    setTimeout(function () {

                        if (obj.hasClass('new')) {

                            obj.removeClass('new');

                        }

                    }, timeout);

                    timeout += 200;

                });

            },

            create_object: function (data2) {

                var new_wrapper = $('<div>', {"class": "row-card new", "data-id": data2.ordId});

                var new_span1 = $('<span>', {"class": "company"}).html(data2.profileCompany);

                var new_span2 = $('<span>', {"class": "name"}).html(data2.ordCode);

                new_wrapper.append(new_span1, new_span2);

                return new_wrapper;

            }

        };

    }();

    $(document).ready(function () {

        order.init();

    });

EOD

        , 'embed');

