@extends('vendor.shopify-app.layouts.default')
@section('content')
<section class="full-width">
    <article>
        <div class="card" style="font-weight: bold;font-size: 15px">
            <div class="sent-notification">
                @if($user_script != null)
                    @if($user_script->is_removed == 1)
                        <div class="alert warning">
                            <dl>
                                <dt>Mouseflow is currently disabled on your store. Click on save to enable again.</dt>
                            </dl>
                        </div>
                    @endif
                @endif
            </div>
            <h2 style="font-weight: bolder">Mouseflow Setup</h2>
            <div style="font-weight: bold">
                Get the full potential out of your website by connecting Mouseflow with Shopify. By connecting the two, you will have the perfect tool to grow your business.
                <br>
                1. To get started, get your Mouseflow tracking code from your Mouseflow account. Create or access Mouseflow account by clicking below. It is free with a limited number of website records.
                <br>
                <a href="https://sdig.it/mouseflowinstall" target="_blank" class="button" style="margin-top: 10px;">Access MouseFlow</a>
                <button id="remove_script" class="warning" style="margin-top: 10px;">Remove script</button>
            </div>
            <br>
            <hr>
            <br>
            <div>
                <p style="font-weight: bold">2. Add your Mouseflow script tracking code below and save.</p>
                <textarea style="margin-top: 10px" id="script" placeholder="enter your code" name="" id="" cols="30"
                          rows="10">@php
                              if($user_script != null){
                                echo $user_script->user_script;
                              }
                          @endphp</textarea>

                <button style="margin-top: 10px" id="btn" onclick="document.location='#'">Save tracking Code
                </button>
                <div>
                    <br>
                    3. How to activate and deactivate the app's app embed block in Online Store 2.0 themes
                    <p>If you want to activate or deactivate this app in your theme, follow these instructions:</p>
                    <p>- Click on your online shop</p>
                    <p>- Go to themes</p>
                    <p>- Open on the customizer</p>
                    <p>- Click on the theme settings and open the app embed</p>
                    <p>- There you can activate or deactivate the app with a switch</p>
                    <p>- Please make sure to save your changes</p>
                    If you uninstall the app, the block associated with the app will be automatically and entirely removed from your online store themes.
                </div>
                <div>
                    <small style="color: red;">Note: Removing the Mouseflow script or uninstalling this application will not cancel your Mouseflow account. If you want to cancel your Mouseflow account, please log into your Mouseflow account to adjust your services.</small>
                </div>
            </div>

        </div>
    </article>
</section>
<script>
    $(document).ready(function () {

        $('#btn').click(function () {
            var script = $('#script').val();
            $.ajax({
                url: "https://plugin.stratmanndigital.de/saveScript",
                type: "POST",
                data: {
                    script: script,
                },
                success: function (result) {
                    $('.sent-notification').html('<div class="alert success" role="alert">' + result + '</div>');
                }
            })
        });

        $('#remove_script').click(function () {
            $.ajax({
                url: "https://plugin.stratmanndigital.de/remove-script",
                type: "POST",
                success: function (result) {
                    $('.sent-notification').html('<div class="alert success" role="alert">' + result + '</div>');
                }
            })
        });
    });
</script>
@endsection