@extends('admin.layouts.master-soyuz')
@section('title', __('Import from eBay | '))
@section('body')
@component('admin.component.breadcumb',['secondaryactive' => 'active'])
    @slot('heading') {{ __('Import from eBay') }} @endslot
    @slot('menu1') {{ __('Products') }} @endslot
@endcomponent

<div class="contentbar">
    <div class="row">
        <div class="col-lg-12">
            <div class="card m-b-30">
                <div class="card-header"><h5 class="card-title">{{ __('Search eBay catalog') }}</h5></div>
                <div class="card-body">
                    <div class="alert alert-info">
                        {{ __('Configure') }} <code>EBAY_CLIENT_ID</code>, <code>EBAY_CLIENT_SECRET</code>, <code>EBAY_SANDBOX</code>,
                        <code>EBAY_MARKETPLACE</code> {{ __('in your .env. Get keys at') }}
                        <a href="https://developer.ebay.com/my/keys" target="_blank" rel="noopener">developer.ebay.com/my/keys</a>.
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <label>{{ __('Keywords') }}</label>
                            <input type="text" id="ebay_q" class="form-control" placeholder="wireless headphones">
                        </div>
                        <div class="col-md-3">
                            <label>{{ __('Target emart Category') }}</label>
                            <select id="target_category" class="form-control">
                                @foreach(\App\Category::where('status',1)->get() as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-1">
                            <label>{{ __('Limit') }}</label>
                            <input type="number" id="ebay_limit" class="form-control" value="20" min="1" max="50">
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button id="ebay-fetch" class="btn btn-primary">{{ __('Search') }}</button>
                        </div>
                    </div>

                    <hr>
                    <div id="ebay-results" data-skeleton data-skel-kind="list" data-skel-rows="6"></div>

                    <div class="mt-3">
                        <button id="ebay-import" class="btn btn-success" disabled>{{ __('Import selected') }}</button>
                        <span id="ebay-progress" class="ml-3 text-muted"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function(){
    var csrf = '{{ csrf_token() }}';
    var endpoint = {
        search: '{{ url('/admin/ebay/search') }}',
        import: '{{ url('/admin/ebay/import') }}'
    };

    function q(id){ return document.getElementById(id); }

    q('ebay-fetch').addEventListener('click', function(){
        var target = q('ebay-results');
        window.Skeleton && window.Skeleton.add(target);
        q('ebay-import').disabled = true;

        $.ajax({
            url: endpoint.search,
            method: 'GET',
            data: { q: q('ebay_q').value, limit: q('ebay_limit').value },
            success: function(r){
                window.Skeleton && window.Skeleton.remove(target);
                if(r.status !== 'ok'){ target.innerHTML = '<div class="alert alert-danger">'+(r.message||'')+'</div>'; return; }
                if(!r.products.length){ target.innerHTML = '<div class="alert alert-warning">{{ __("No results.") }}</div>'; return; }
                var rows = r.products.map(function(p){
                    var img = p.image && p.image.imageUrl ? p.image.imageUrl : '';
                    var price = p.price ? p.price.value + ' ' + (p.price.currency || '') : '';
                    return '<tr>'
                        +'<td><input type="checkbox" class="ebay-pick" value="'+p.itemId+'" checked></td>'
                        +'<td>'+(img ? '<img src="'+img+'" width="60">' : '')+'</td>'
                        +'<td>'+(p.title||'')+'</td>'
                        +'<td>'+price+'</td>'
                        +'<td>'+(p.condition||'')+'</td>'
                        +'</tr>';
                }).join('');
                target.innerHTML = '<table class="table table-sm"><thead><tr>'
                    +'<th><input type="checkbox" id="ebay-all" checked></th><th></th><th>Title</th><th>Price</th><th>Condition</th>'
                    +'</tr></thead><tbody>'+rows+'</tbody></table>';
                q('ebay-import').disabled = false;
                q('ebay-all').addEventListener('change', function(){
                    document.querySelectorAll('.ebay-pick').forEach(function(c){ c.checked = q('ebay-all').checked; });
                });
            },
            error: function(x){
                window.Skeleton && window.Skeleton.remove(target);
                target.innerHTML = '<div class="alert alert-danger">'+x.responseText+'</div>';
            }
        });
    });

    q('ebay-import').addEventListener('click', function(){
        var picked = [].slice.call(document.querySelectorAll('.ebay-pick:checked')).map(function(c){ return c.value; });
        if(!picked.length){ alert('{{ __("Select at least one product.") }}'); return; }
        q('ebay-progress').textContent = '{{ __("Importing…") }}';
        q('ebay-import').disabled = true;
        $.ajax({
            url: endpoint.import,
            method: 'POST',
            data: { _token: csrf, category_id: q('target_category').value, item_ids: picked },
            success: function(r){
                q('ebay-progress').textContent = 'Imported: '+r.imported.length+'   Skipped: '+r.skipped.length;
                q('ebay-import').disabled = false;
            },
            error: function(x){
                q('ebay-progress').textContent = 'Error: '+x.responseText;
                q('ebay-import').disabled = false;
            }
        });
    });
})();
</script>
@endsection