@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="image-importer page" data-controller="ImageImporter">
        <a href="\">back</a>
        <h2>Import images</h2>
        <div class="image-importer__message" data-role="message"></div>
        <div class="image-importer__setup-form">
            <div>
                <p>Images Location Url</p>
                <input type="text" name="baseUrl" class="image-importer__url-input" placeholder="URL" value="https://areateam.app/public/tmp/photos"/>
            </div>
            <div>
                <p>Line separated list of images (names must be [SAP id - no leading zeros][-position].png eg.: 10448.png 10448-1.png 10448-2.png</p>
                <p>Images will be sorted automatically by ids and position since the import for each product should be always in order of image positon (main, -1, -2, etc).</p>
                <p>IMPORTANT: When importing an image position that still doesn't exist, the image will assume the last position always, even if it is a lower one. Eg. a product has only one image and matnr-3.png is imported alone: this image will be the 2nd image and not the 4th.</p>
                <textarea name="images" placeholder=""></textarea>
            </div>
            <button data-action="setup">Setup Image Import</button>
        </div>
        <div class="image-importer__import">
            <p>This will import the list of images below. The product main image will be replaced if it exists</p>
            <div>
                <button data-action="reset" class="reset-button">Reset</button>
                <button data-action="start" class="start-button">START</button><button class="stop-button" data-action="stop">PAUSE</button>
            </div>
            <div class="image-importer__list">
                <table>
                    <thead>
                        <tr>
                            <th>
                                Product ID (SAP)
                            </th>
                            <th>
                                Image URL
                            </th>
                            <th>
                                Import Status
                            </th>
                        </tr>
                    </thead>
                    <tbody data-role="list">
                    </tbody>
                </table>
            </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