<?php

use yii\helpers\Html;
use yii\grid\GridView;
use yii\widgets\Pjax;

use myresto\models\SyncToJurnalHeader;
use mdm\admin\components\Helper;
use yii\bootstrap\Modal;
use yii\helpers\Url;

$this->title = 'Log Sync';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="content-page logsync">
    <div class="content-page-header"><?= Html::encode($this->title) ?></div>
    <div class="content-page-content logsync-content container-fluid">
        <div class="form-group">
            <select class="logsync-content-filter form-control" id="jenis_sinkron">
                <option value="all">All Sync</option>
                <option value="manual">Manual Sync</option>
                <option value="otomatis">Live Sync</option>
            </select>
            <select class="logsync-content-filter form-control" id="jenis_data">
                <option value="all">All Sync</option>
                <option value="master">Master Sync</option>
                <option value="transaksi">Transaction Sync</option>
            </select>
        </div>
        <?php Pjax::begin(['id' => 'pjax-gridview']); ?>

        <?= GridView::widget([
            'dataProvider' => $dataProvider,
            // 'filterModel' => $searchModel,
            'columns' => [
                'date_created:datetime',
                [
                    'attribute' => 'status',
                    'value' => function($model) {
                        $status = SyncToJurnalHeader::getStatusSync($model->id_header);
                        return $status;
                    }
                ],
                [
                    'attribute' => 'jenis_sinkron',
                    'value' => function($model) {
                        if ($model->jenis_sinkron == 'manual')
                            return 'Manual';
                        else
                            return 'Live';
                    }
                ],
                [
                    'attribute' => 'summary',
                    'format' => 'html',
                    'value' => function($model) {
                        $data = SyncToJurnalHeader::getDataSync($model->id_header);

                        if ($model->jenis_data == 'master') {
                            $result = '
                                <div class="logsync-table-title">Master Sync</div>
                                <div>Product ('.$data['product_success'].' dari '.$data['product_total'].')</div>
                                <div>Modifier ('.$data['modifier_success'].' dari '.$data['modifier_total'].')</div>
                                <div>Customer ('.$data['customer_success'].' dari '.$data['customer_total'].')</div>
                                <div>Supplier ('.$data['supplier_success'].' dari '.$data['supplier_total'].')</div>
                            ';
                        } else {
                            $result = '
                                <div class="logsync-table-title">Transaction Sync</div>
                                <div>Sales ('.$data['sales_success'].' dari '.$data['sales_total'].')</div>
                                <div>Payment ('.$data['payment_success'].' dari '.$data['payment_total'].')</div>
                                <div>Deposit ('.$data['deposit_success'].' dari '.$data['deposit_total'].')</div>
                                <div>Sales Return ('.$data['salesreturn_success'].' dari '.$data['salesreturn_total'].')</div>
                            ';
                        }

                        return $result;
                    }
                ],

                [
                    'class' => 'yii\grid\ActionColumn',
                    'header' => 'View Error',
                    'template' => Helper::filterActionColumn(['view']),
                    'buttons' => [
                        'view' => function($url, $model) {
                            $options = [
                                'title' => 'View',
                                'aria-label' => 'View',
                                'class' => 'logsync-content-eye log-modal',
                                'data-id' => $model->id_header,
                                'data-type' => $model->jenis_data,
                            ];
                            return Html::a('<i class="material-icons">visibility</i>', 'javascript:;', $options);
                        }
                    ]
                ],
            ],
            'summary' => '',
            'tableOptions' => ['class' => 'table'],
        ]); ?>
        <?php Pjax::end(); ?>

        <?php
        Modal::begin([
            'header' => '<div>Error Log</div>',
            'footer' => '<button class="btn btn-primary btn-close-modal">Close</button>',
            'size' => 'modal-lg',
            'id' => 'modal-log-master'
        ]);
        ?>
            <div class="syncmast-popup-content">
                <div>Data Synced</div>
                <div class="syncmast-popup-content-date">Wednesday, 24 Apr 2019, 13:41</div>

                <ul class="nav nav-tabs nav-justified">
                    <li class="active"><a data-toggle="tab" href="#product">Product (<span id="count-rst_menu">0</span>)</a></li>
                    <li><a data-toggle="tab" href="#modifier">Modifier (<span id="count-rst_menu_notes2">0</span>)</a></li>
                    <li><a data-toggle="tab" href="#customer">Customer (<span id="count-bp_customer">0</span>)</a></li>
                    <li><a data-toggle="tab" href="#supplier">Supplier (<span id="count-bp_supplier">0</span>)</a></li>
                </ul>

                <div class="tab-content">
                    <div id="product" class="tab-pane fade in active">
                        <table class="table" id="rst_menu">
                            <thead>
                                <tr>
                                    <th>NO</th>
                                    <th>ID PRODUCT</th>
                                    <th>PRODUCT NAME</th>
                                    <th>ERROR NOTE</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>

                    <div id="modifier" class="tab-pane fade">
                        <table class="table" id="rst_menu_notes2">
                            <thead>
                                <tr>
                                    <th>NO</th>
                                    <th>ID MODIFIER</th>
                                    <th>MODIFIER CODE</th>
                                    <th>ERROR NOTE</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>

                    <div id="customer" class="tab-pane fade">
                        <table class="table" id="bp_customer">
                            <thead>
                                <tr>
                                    <th>NO</th>
                                    <th>ID CUSTOMER</th>
                                    <th>CUSTOMER NAME</th>
                                    <th>ERROR NOTE</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>

                    <div id="supplier" class="tab-pane fade">
                        <table class="table" id="bp_supplier">
                            <thead>
                                <tr>
                                    <th>NO</th>
                                    <th>ID SUPPLIER</th>
                                    <th>SUPPLIER NAME</th>
                                    <th>ERROR NOTE</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        <?php
        Modal::end();

        Modal::begin([
            'header' => '<div>Error Log</div>',
            'footer' => '<button class="btn btn-primary btn-close-modal">Close</button>',
            'size' => 'modal-lg',
            'id' => 'modal-log-transaction'
        ]);
        ?>
            <div class="syncmast-popup-content">
                <div>Data Synced</div>
                <div class="syncmast-popup-content-date">Wednesday, 24 Apr 2019, 13:41</div>

                <ul class="nav nav-tabs nav-justified">
                    <li class="active"><a data-toggle="tab" href="#transaction">Sales (<span id="count-rst_fc_trans_header">0</span>)</a></li>
                    <li><a data-toggle="tab" href="#payment">Payment (<span id="count-rst_fc_payment">0</span>)</a></li>
                    <li><a data-toggle="tab" href="#deposit">Deposit (<span id="count-bp_customer_deposit">0</span>)</a></li>
                    <li><a data-toggle="tab" href="#salesreturn">Sales Return (<span id="count-sales_return">0</span>)</a></li>
                </ul>

                <div class="tab-content">
                    <div id="transaction" class="tab-pane fade in active">
                        <table class="table" id="rst_fc_trans_header">
                            <thead>
                                <tr>
                                    <th>NO</th>
                                    <th>ID SALES</th>
                                    <th>SALES CODE</th>
                                    <th>ERROR NOTE</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>

                    <div id="payment" class="tab-pane fade">
                        <table class="table" id="rst_fc_payment">
                            <thead>
                                <tr>
                                    <th>NO</th>
                                    <th>ID PAYMENT</th>
                                    <th>SALES CODE</th>
                                    <th>ERROR NOTE</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>

                    <div id="deposit" class="tab-pane fade">
                        <table class="table" id="bp_customer_deposit">
                            <thead>
                                <tr>
                                    <th>NO</th>
                                    <th>ID DEPOSIT</th>
                                    <th>DEPOSIT DATE</th>
                                    <th>ERROR NOTE</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>

                    <div id="salesreturn" class="tab-pane fade">
                        <table class="table" id="sales_return">
                            <thead>
                                <tr>
                                    <th>NO</th>
                                    <th>ID RETURN</th>
                                    <th>RETURN CODE</th>
                                    <th>ERROR NOTE</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        <?php
        Modal::end();
    ?>
    </div>
</div>

<script type="text/javascript">
    var idHeaderLog = 0;
    var type = '';
    var jenisSinkron = '';
    var jenisData = '';

    function checkLog() {
        $.ajax({
            url: '<?= Url::to(['sync-to-jurnal/check-log']); ?>',
            data: {idHeaderLog: idHeaderLog, type_con: 'resto'},
            method: 'post',
            success: function(result) {
                var count = {
                    rst_menu: 0,
                    rst_menu_notes2: 0,
                    bp_customer: 0,
                    bp_supplier: 0,
                    rst_fc_trans_header: 0,
                    rst_fc_payment: 0,
                    bp_customer_deposit: 0,
                    sales_return: 0
                };

                for (var key in count) {
                    if (count.hasOwnProperty(key)) {
                        $('table#'+key+' tbody').empty();
                    }
                }

                result = JSON.parse(result);

                var temp = new Date(result.header.date_created);
                var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false };
                $('.syncmast-popup-content-date').html(temp.toLocaleDateString("en-US", options));

                if (result.detail.length == 0) {
                } else {
                    result.detail.forEach(function(entry) {
                        count[entry.tipe_tabel]++;
                        $('table#'+entry.tipe_tabel+' tbody').append(
                            '<tr>'+
                                '<td>'+count[entry.tipe_tabel]+'</td>'+
                                '<td>'+entry.id_record+'</td>'+
                                '<td>'+entry.fname+'</td>'+
                                '<td>'+entry.keterangan+'</td>'+
                            '</tr>'
                        );
                    });
                    
                }

                for (var key in count) {
                    if (count.hasOwnProperty(key)) {
                        $('#count-'+key).html(count[key]);
                    }
                }

                if (type == 'master')
                    $('#modal-log-master').modal('show');
                else
                    $('#modal-log-transaction').modal('show');

                console.log(result);
            }
        });
        
    }

    $('body').on('click', '.log-modal', function() {
        idHeaderLog = $(this).attr('data-id');
        type = $(this).attr('data-type');
        checkLog();
    });

    function pjaxReload() {
        if (jenisSinkron == 'all')
            jenisSinkron = '';
        if (jenisData == 'all')
            jenisData = '';
        $.pjax.reload({
            url: "<?= Url::to(['index']) ?>?SyncToJurnalHeaderSearch[jenis_sinkron]=" + jenisSinkron + "&SyncToJurnalHeaderSearch[jenis_data]=" + jenisData,
            container: "#pjax-gridview",
            timeout: 1000,
        });
    }

    $('.logsync-content-filter#jenis_sinkron').change(function() {
        jenisSinkron = $(this).val();
        pjaxReload();
    });
    $('.logsync-content-filter#jenis_data').change(function() {
        jenisData = $(this).val();
        pjaxReload();
    });
</script>