@php
    $etop = @$shipping_method['etop'];
@endphp
<div class="panel panel-flat">
    <div class="panel-heading">
        <h6 class="panel-title">Top Ship</h6>
        <div class="heading-elements">
            <button type="button" class="btn btn-default heading-btn pull-right" data-toggle="collapse" data-target="#collapseETOP">Thiết lập <i class="fa fa-angle-down"></i></button>
            <label class="checkbox-inline checkbox-right checkbox-switch checkbox-switch-sm pull-right">
                <input type="checkbox" class="switch change_status" data-on-text="Đã kích hoạt" data-off-text="Chưa kích hoạt" data-size="small" {{ (isset($etop['is_published']) && ($etop['is_published'] == 1))?'checked':'' }} data-method="etop">
            </label>
        </div>
    </div>
    <div class="panel-body">
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
            <img src="{{env('ASSETS_URL') . '/backend/images/logo-topship.png'}}" class="img-responsive">
        </div>
        <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
            <p>Sử dụng dịch vụ topship.vn để vận chuyển đơn hàng của bạn.</p>
            <a href="https://topship.vn/huong-dan" target="_blank">Hướng dẫn</a>
        </div>
    </div>
    <div id="collapseETOP" class="panel-collapse collapse">
        <div class="panel-body">
            <form action="{{route('admin.order.setting.shipping.store')}}" method="POST" class="form-horizontal" role="form" id="configETOPForm">
                {{csrf_field()}}
                <input type="hidden" name="key" value="etop">
                <input type="hidden" name="title" value="Top Ship">
                <input type="hidden" name="config[shop_id]" class="shop_id" value="">
                <div class="form-group">
                    @if($etop)
                        {{Form::bsText('Shop ID', 'config[shop_id]', @$etop['config']['shop_id'], ['disabled' => 'true'])}}
                        <div class="pull-left">
                            <a class="btn remove_item btn-danger" href="{{route('admin.order.setting.shipping.destroy', ['id' => $etop->id])}}" role="button">Xóa</a>
                        </div>
                    @else
                        <div class="pull-right" style="padding-right: 20px;">
                            <button type="submit" class="btn btn-primary" id="submitLoginETOPForm">Kết nối tài khoản Top Ship</button>
                        </div>
                    @endif
                </div>
            </form>
        </div>
    </div>
</div>
<style type="text/css">
    #etop-component{
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        text-align: center;
        display: none;
        z-index: 9;
        background-color: #33b7d5;
    }
    #etop-component iframe{
        height: 490px;
        width: 100%;
        border: none;
    }
</style>
<div id="etop-component"></div>
<script src="{{env('APP_ENV') == 'production' ? config('ecommerce.shipping.etop.production.API_HOST') : config('ecommerce.shipping.etop.dev.API_HOST')}}/dist/ecom/ecom-polyfill.js"></script>
<script type="text/javascript">
    $('#configETOPForm').on('submit', function (e) {
        var self = this;
        $('#submitLoginETOPForm').attr('disabled', 'true').text('Đang xử lý...');
        $.ajax({
            url: $(self).attr('action'),
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                key: 'etop', 
                shop_id: ''
            }
        }).done(function (response) {
            initEtop(response.auth_token);
        });

        if($('#configETOPForm input.shop_id').val() == '' ) {
            return false;
        }
    });

    function initEtop(auth_token) {
        $('#etop-component').show();
        $('body').css('overflow', 'hidden');
        var etopComponent = etop.init({
            elem: 'etop-component',
            auth_token: auth_token
        })
        .onReady(function() {
            $('#etop-component').hide();
        })
        .onAccessGranted(function (data) {
            $('#configETOPForm input.shop_id').val(data.shop_id);
            $('#configETOPForm').submit();
        })
        .onError((error) => console.error('Lỗi:', error));
    }
</script>