@extends('admin.layouts.master-soyuz')
@section('title', __('Import from WooCommerce | '))
@section('body')
@component('admin.component.breadcumb',['secondaryactive' => 'active'])
    @slot('heading') {{ __('Import from WooCommerce') }} @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">{{ __('Connect your WooCommerce store') }}</h5></div>
                <div class="card-body">

                    <div class="alert alert-info">
                        {{ __('Create a REST API key in your WooCommerce admin under') }}
                        <code>WooCommerce → Settings → Advanced → REST API</code>
                        — {{ __('grant read or read/write, then paste the consumer key and secret below.') }}
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <label>{{ __('Store URL') }}</label>
                            <input type="url" id="woo_url" class="form-control" placeholder="https://example.com">
                        </div>
                        <div class="col-md-4">
                            <label>{{ __('Consumer Key') }}</label>
                            <input type="text" id="consumer_key" class="form-control" placeholder="ck_***">
                        </div>
                        <div class="col-md-4">
                            <label>{{ __('Consumer Secret') }}</label>
                            <input type="text" id="consumer_secret" class="form-control" placeholder="cs_***">
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <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-2">
                            <label>{{ __('Per page') }}</label>
                            <input type="number" id="per_page" class="form-control" value="20" min="1" max="100">
                        </div>
                        <div class="col-md-2">
                            <label>{{ __('Page') }}</label>
                            <input type="number" id="page" class="form-control" value="1" min="1">
                        </div>
                        <div class="col-md-4 d-flex align-items-end">
                            <button id="woo-fetch" class="btn btn-primary">{{ __('Fetch products') }}</button>
                        </div>
                    </div>

                    <hr>
                    <div id="woo-results"></div>

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

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

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

    q('woo-fetch').addEventListener('click', function(){
        q('woo-results').innerHTML = '<em>{{ __('Loading…') }}</em>';
        q('woo-import').disabled = true;

        $.ajax({
            url: endpoint.fetch,
            method: 'POST',
            data: {
                _token: csrf,
                woo_url: q('woo_url').value,
                consumer_key: q('consumer_key').value,
                consumer_secret: q('consumer_secret').value,
                per_page: q('per_page').value,
                page: q('page').value
            },
            success: function(r){
                if(r.status !== 'ok'){ q('woo-results').innerHTML = '<div class="alert alert-danger">'+(r.message||'')+'</div>'; return; }
                var rows = r.products.map(function(p){
                    var thumb = p.images && p.images[0] ? p.images[0].src : '';
                    return '<tr>'
                        +'<td><input type="checkbox" class="woo-pick" value="'+p.id+'" checked></td>'
                        +'<td>'+(thumb ? '<img src="'+thumb+'" width="60">' : '')+'</td>'
                        +'<td>'+(p.name||'')+'</td>'
                        +'<td>'+(p.sku||'')+'</td>'
                        +'<td>'+(p.price||'')+'</td>'
                        +'<td>'+(p.status||'')+'</td>'
                        +'</tr>';
                }).join('');
                q('woo-results').innerHTML = '<table class="table table-sm"><thead><tr>'
                    +'<th><input type="checkbox" id="woo-all" checked></th><th></th><th>Name</th><th>SKU</th><th>Price</th><th>Status</th>'
                    +'</tr></thead><tbody>'+rows+'</tbody></table>';
                q('woo-import').disabled = false;
                q('woo-all').addEventListener('change', function(){
                    document.querySelectorAll('.woo-pick').forEach(function(c){ c.checked = q('woo-all').checked; });
                });
            },
            error: function(x){
                q('woo-results').innerHTML = '<div class="alert alert-danger">'+x.responseText+'</div>';
            }
        });
    });

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