@extends('core::layouts.master')
@section('breadcrumb')
<a href="{{ route('admin.apps') }}">Kho ứng dụng</a> / Google Shopping
@endsection
@section('head-action')
{{ Form::bsNavBtnSubmit('Lưu thay đổi','setting-form') }}
@endsection
@section('content')
@php($google_shopping = $settings['google_shopping'] ?? [])
<div class="row">
    <div class="panel panel-default">
        <div class="panel-body">
            {!! Form::open([
            'method' => 'POST',
            'url'  => route('admin.order.google_shopping'),
            'files'  => true,
            'id' => 'setting-form',
            ]) !!}
            <div class="col-xs-12">
                <fieldset class="content-group">
                    <legend class="text-bold">Đường Dẫn Đến File Google Sheets</legend>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <input class="form-control" id="google_shopping_google_sheets" placeholder="vd: https://docs.google.com/spreadsheets/d/1dehjRRoTXjsmhgFGjggte3dAU9RLg8uwcEEgYHGYPrU/edit?usp=sharing" name="google_shopping[google_sheets]" type="text" value="{{@$google_shopping['google_sheets']}}">
                                <small class="help-block">Lưu ý: ứng dụng cần "quyền chỉnh sửa công khai" của file này</small>
                                <input id="google_shopping_products" type="hidden" name="google_shopping[products]" value="{{@$google_shopping['products']}}">
                                <input id="google_shopping_all_product" type="hidden" name="google_shopping[allproduct]" value="false">
                            </div>
                        </div>
                    </div>
                    <legend class="text-bold">Chọn sản phẩm để chèn vào file Google Sheets</legend>
                    <div class="row">
                        <div class="col-md-6">
                            {{Form::bsSelectItem('Chọn sản phẩm', 'product_select', 'product', ['google_shopping'=>true, 'is_published'=>true])}}
                        </div>
                        <div class="col-md-6">
                            <button type="button" class="btn btn-danger pull-right" id="removeAllProduct"><i class="fa fa-times" aria-hidden="true"></i> Xóa tất cả sản phẩm</button>
                            <button type="button" class="btn btn-primary pull-right" id="addAllProduct" style="margin-right: 10px"><i class="fa fa-plus-circle" aria-hidden="true"></i> Thêm tất cả sản phẩm</button>
                        </div>
                        <div class="col-md-12">
                            <table id="product_item" class="table datatable-ajax" data-source="{{ route('admin.product.datatables') }}?type=google_shopping">
                                <thead>
                                    <tr>
                                        <th width="100px">Hình</th>
                                        <th>Tên sản phẩm</th>
                                        <th width="100px">Đơn giá</th>
                                        <th width="50px"></th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </fieldset>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
@endsection
@section('scripts')
@parent
<style type="text/css">
    .datatable-header{display: none;}
</style>
<script>
    var google_shopping_products = [];
    Number.prototype.format = function(n, x) {
        var re = '(\\d)(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\.' : '$') + ')';
        return this.toFixed(Math.max(0, ~~n)).replace(new RegExp(re, 'g'), '$1.') + 'đ';
    };

    function priceFormat(number){
        if(parseInt(number) > 0) {
            return parseInt(number).format(0);
        }
        return '0đ';
    }

    function getExitData() {
        if($('#google_shopping_products').val() != '') {

            var product_ids = JSON.parse('['+$('#google_shopping_products').val()+']');
            $.each(product_ids, function(key, item){
                google_shopping_products.push({
                    'product_id': item,
                });
            });
        }
    }

    function renderTableProduct() {
        var products = [];
        //var i = 0;
        $.each(google_shopping_products, function(index, item){
            /*var related_html = '<tr id="item_'+item.product_id+'">';
            related_html +=     '<td><img src="'+item.thumbnail+'" style="max-height: 50px;" /></td>';
            related_html +=     '<td>'+item.product_title+'</td>';
            related_html +=     '<td>'+priceFormat(item.price)+'</td>';
            related_html +=     '<td><a class="remove_group_item" data-id="'+item.product_id+'"><i class="fa fa-times" aria-hidden="true"></i></a></td>';
            related_html += '</tr>';
            $('#product_item tbody').append(related_html);*/
            products.push(item.product_id);
            /*i++;
            if(i == google_shopping_products.length) {
                updateData(products.toString());
            }*/
        });
        $('#google_shopping_products').val(products.toString());
    }

    function updateData(product_ids) {
        $('#google_shopping_products').val(product_ids);
        $.ajax({
            type: "POST",
            url: "{{route('admin.order.google_shopping')}}",
            data: {
                '_token': $('input[name=_token]').val(),
                'google_shopping[google_sheets]': $('input#google_shopping_google_sheets').val(),
                'google_shopping[products]': product_ids,
                'google_shopping[allproduct]': false,
            },
            success: function (response) {
                if (response.code) {
                    successNotice('Thông báo', response.msg);
                    WBDatatables.reloadData();
                    product_select.reload();
                } else {
                    errorNotice('Thông báo', response.msg);
                }
            },
        });
    }
    (function ($) {
        getExitData();
        var columnDatas = [
            {
                data: null,
                render: function (data) {
                    return '<img src="' + data.thumbnail + ' " style="max-height: 50px"/>';
                }, orderable: false, searchable: false
            },
            {
                data: null, 
                render: function (data) {
                    return data.description.title;
                }, orderable: false, searchable: false
            },
            {
                data: null,
                render: function (data) {
                    if(data.discount != '') {
                        return priceFormat(data.discount.price);
                    }else{
                        return priceFormat(data.price);
                    }
                },
                orderable: false, searchable: false
            },
            {
                data: null,
                render: function (data) {
                    return '<a class="remove_group_item" data-id="' + data.id + '" ><i class="fa fa-times" aria-hidden="true"></i></a>';
                }, orderable: false, searchable: false
            }
        ];

        WBDatatables.init('.datatable-ajax', columnDatas);

        $('#product_select').on('click', '.add_item_select', function () {
            var data = {};
            data.action = $(this).is(':checked') ? 'add' : 'delete';
            data.id = $(this).attr('data-id');
            data.title = $(this).attr('data-title');
            data.thumbnail = $(this).attr('data-thumbnail');
            data.price = $(this).attr('data-price');
            _update(data);
        });

        $('#product_item').on('click', '.remove_group_item', function () {
            var data = {};
            data.action = 'delete';
            data.id = parseInt($(this).attr('data-id'));
            $(this).parents('tr').remove();
            _update(data);
        });

        function _update(data) {
            $('#google_shopping_all_product').val('false');
            if(data.action == 'add'){
                if(!google_shopping_products.includes({'product_id': data.id})) {
                    google_shopping_products.unshift({
                        'product_id': data.id,
                    });
                    //$('tr[data-id='+data.id+']').hide();
                    var related_html = '<tr id="item_'+data.id+'">';
                    related_html +=     '<td><img src="'+data.thumbnail+'" style="max-height: 50px;" /></td>';
                    related_html +=     '<td>'+data.title+'</td>';
                    related_html +=     '<td>'+priceFormat(data.price)+'</td>';
                    related_html +=     '<td><a class="remove_group_item" data-id="'+data.id+'"><i class="fa fa-times" aria-hidden="true"></i></a></td>';
                    related_html += '</tr>';
                    $('#product_item tbody').prepend(related_html);
                    renderTableProduct();
                }
            }
            if(data.action == 'delete'){
                $('#product_select tr[data-id='+data.id+'] .checked input').click();
                $('.remove_group_item[data-id='+data.id+']').parents('tr').remove();
                $.each(google_shopping_products, function(index, item){
                    if(item.product_id == data.id) {
                        google_shopping_products.splice(index, 1);
                        return false;
                    }
                });
                renderTableProduct();
            }
        }

        $('#addAllProduct').on('click', function (e) {
            if (confirm("Vui lòng xác nhận thực hiện thao tác này?")) {
                $('#google_shopping_all_product').val('true');
                $('button.heading-btn[data-form=setting-form]').click();
            }
        })

        $('#removeAllProduct').on('click', function (e) {
            if (confirm("Bạn muốn xóa tất cả sản phẩm đã thêm?")) {
                $('#google_shopping_products').val('');
                google_shopping_products = [];
                $('#product_item tbody').empty();
                $('.datatable-footer').remove();
                $('#google_shopping_all_product').val('delete');
                $('button.heading-btn[data-form=setting-form]').click();
            }
        })
    })(jQuery)
</script>
@endsection