@extends('shopify-app::layouts.default')

@section('styles')
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" type="text/css" media="screen">
@endsection

@section('content')
    <div class="home" data-controller="HomeController">
        <div class="menu">
            <a href="" data-action="image-import">Product Images Import / Replace</a>
            <a href="" data-action="content-tools">Content Tools</a>
        </div>
        <div class="panel">
            <h2>Manual sync commands</h2>
            <h4>(use only if you know what each task really does)</h4>
            <p>All of these actions are run automatically so there shouldn't be the need to use them here</p>
        <div class="action">
            <button data-action="sap-sync">Complete Sync from SAP</button>
            <span class="message" data-role="message"></span>
        </div>
        <div class="action">
            <button data-action="sap-prices-sync">Prices / stock Sync from SAP</button>
            <span class="message" data-role="message"></span>
        </div>
        <div class="action">
            <div>
                <button data-action="shopify-products-sync">Import / Sync products to Shopify</button>
                <span class="message" data-role="message"></span>
            </div>
            <div class="info">
                * Only products marked to be sync - each run will process a max. of 500 pending to be sync products
            </div>
        </div>
        <div class="action">
            <div>
                <input type="text" name="sapId" placeholder="SAP ID"/>
                <button data-action="shopify-product-sync">Import / Sync product to Shopify</button>
                <span class="message" data-role="message"></span>
            </div>
            <div class="info">
                * Forces sync, even if product is not marked for sync
            </div>
        </div>
        <div class="action">
            <button data-action="shopify-collections-sync">Sync shopify collections</button>
            <span class="message" data-role="message"></span>
        </div>
        <div class="action">
            <input type="text" name="sapId" placeholder="SAP ID"/>
            <button data-action="sap-check-product-data">Check SAP product data</button>
            <span class="message" data-role="message"></span>
        </div>
        <div class="action">
            <div>
                <input type="text" name="shopifyId" placeholder="Shopify ID"/>
                <button data-action="shopify-order-update">Update order in Shopify</button>
                <span class="message" data-role="message"></span>
            </div>
            <div class="info">
                * Syncs current order state with Shopify (fulfills and refunds if needed)
            </div>
        </div>
        <div class="action">
            <div>
                <input type="text" name="shopifyId" placeholder="Order ID (shopify)"/>
                <button data-action="shopify-sync-order">Sync Shopify Order</button>
                <span class="message" data-role="message"></span>
            </div>
            <div class="info">
                * Forces syncing a paid Shopify order that for some reason was not created on the integration system by Shopify webhook
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    @parent

    <script type="text/javascript">
        var AppBridge = window['app-bridge'];
        var actions = AppBridge.actions;
        var TitleBar = actions.TitleBar;
        var Button = actions.Button;
        var Redirect = actions.Redirect;
        var titleBarOptions = {
            title: 'Welcome',
        };
        var myTitleBar = TitleBar.create(app, titleBarOptions);

    </script>
    <script src="/js/app.js"></script>
@endsection