@extends('layouts.auth')
@section('content')
@section('bodyClass', 'mobile_banner')
<div class="">
    <a href="{{ route('logout') }}" class="backto-login">
        <svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M11.3334 4.83329H3.22008L6.94675 1.10663L6.00008 0.166626L0.666748 5.49996L6.00008 10.8333L6.94008 9.89329L3.22008 6.16663H11.3334V4.83329Z"
                fill="white" />
        </svg>
        Back to Login
    </a>
    <div class="row align-items-center banner_layout">
        <div class="col-md-7 contents">
           
        </div>
        <div class="col-md-5 carousel-contents">
            <div id="demo" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
                <!-- The slideshow/carousel -->
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="card_layout">
                            <div class="card_body">
                                <form method="post" class="process-form" action="{{ route('studio.complete_mindbody_setup') }}">
                                    @csrf
                                    <input type="hidden" value="single" name="details">
                                    <h3 class="card_title">Mindbody is self managed</h3>
                                    <div class="form-group ">
                                    <p class="text-theme">To connect your Mindbody account, click below to generate and copy your activation code.</p>
                                    <p>
                                        <a href="javascript:void(0)"class="btn-theme yellow btn-small shadow-none copy-activation-code" data-code="{{ $studio->mindbody->activation_code }}" id="copy-activation-code">
                                            <svg class="no-stroke" width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1.99935 3.83366H0.666016V14.5003C0.666016 15.2337 1.26602 15.8337 1.99935 15.8337H12.666V14.5003H1.99935V3.83366ZM13.9993 1.16699H4.66602C3.93268 1.16699 3.33268 1.76699 3.33268 2.50033V11.8337C3.33268 12.567 3.93268 13.167 4.66602 13.167H13.9993C14.7327 13.167 15.3327 12.567 15.3327 11.8337V2.50033C15.3327 1.76699 14.7327 1.16699 13.9993 1.16699ZM13.9993 11.8337H4.66602V2.50033H13.9993V11.8337Z" fill="#000000"/>
                                            </svg>
                                            Copy Activation Code
                                        </a>
                                    </p>
                                    <p class="text-theme">Then login to your Mindbody account:</p>
                                    <p>
                                        <a target="_blank" href="https://www.mindbodyonline.com/" rel="noopener" class="btn-theme dark btn-small">
                                            <svg class="no-stroke" width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M10.6667 11.1667H1.33333V1.83333H6V0.5H1.33333C0.593333 0.5 0 1.1 0 1.83333V11.1667C0 11.9 0.593333 12.5 1.33333 12.5H10.6667C11.4 12.5 12 11.9 12 11.1667V6.5H10.6667V11.1667ZM7.33333 0.5V1.83333H9.72667L3.17333 8.38667L4.11333 9.32667L10.6667 2.77333V5.16667H12V0.5H7.33333Z" fill="white"/>
                                            </svg>
                                            Open Mindbody
                                        </a>
                                    </p>
                                    <p class="text-theme">Go to <strong>Manager Tools > Mindbody Add Ons</strong> then insert your activation code.</p>
                                    <p class="text-theme">This will enable a connection between your Mindbody account and CloudTasker.</p>
                                    </div>
                                
                                    <div id="custom-error_manage_type"></div>
                                    <div class="row popup-error-sucess popup-error align-items-center" style="display:none;">
                                        <div class="col-md-12">
                                            <div class="edit_content">
                                                <img src="{{ asset('/images/exlamation_round_red.svg') }}" alt="exlamation">
                                                <p></p>
                                            </div>
                                        </div>  
                                    </div>
                                    @include('includes.loader')
                                    <button type="submit" class="profile-btn fw-700"><span class="font-lato">Completed and Continue</span>
                                        <img src="{{ asset('images/arrow_white.svg') }}" alt="Move Forword" />
                                    </button>
                                    <input type="hidden" name="studio_id" value="{{ $studio->id }}">
                                </form>           
                                <a href="{{ route('studio.manage_mindbody', ['studio' => $studio->uuid]) }}">
                                <button type="button" class="btn-theme light w-100 mt-3 fw-700">
                                    <img src="{{ asset('images/arrow_back_black.svg') }}" alt="plus">
                                    <span class="font-lato">Previous Step</span>
                                </button>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item ">
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection
    @push('scripts')
    <script type="text/javascript">
    $(document).ready(function() {
        $('.copy-activation-code').click(function(){
            var string = $(this).attr("data-code");
            var id = $(this).attr("id");
            copyToClipboard(string, id);
        });
    });

    function copyToClipboard(string, id) {    
        let textarea;
        let result;

        try {
            textarea = document.createElement('textarea');
            textarea.setAttribute('readonly', true);
            textarea.setAttribute('contenteditable', true);
            textarea.style.position = 'fixed'; // prevent scroll from jumping to the bottom when focus is set.
            textarea.value = string;

            document.body.appendChild(textarea);

            textarea.focus();
            textarea.select();

            const range = document.createRange();
            range.selectNodeContents(textarea);

            const sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);

            textarea.setSelectionRange(0, textarea.value.length);
            result = document.execCommand('copy');
        } catch (err) {
            console.error(err);
            result = null;
        } finally {
            document.body.removeChild(textarea);
        }
        $('#' + id).html('Copied');
            setTimeout(
                function() {
                    var cpy_icon =
                        '<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">' +
                        '<path d="M9.86654 0.166992H1.86654C1.1332 0.166992 0.533203 0.766992 0.533203 1.50033V10.8337H1.86654V1.50033H9.86654V0.166992ZM9.19987 2.83366L13.1999 6.83366V13.5003C13.1999 14.2337 12.5999 14.8337 11.8665 14.8337H4.52654C3.7932 14.8337 3.19987 14.2337 3.19987 13.5003L3.20654 4.16699C3.20654 3.43366 3.79987 2.83366 4.5332 2.83366H9.19987ZM8.5332 7.50033H12.1999L8.5332 3.83366V7.50033Z" />' +
                        '</svg>';
                    $('#' + id).html(cpy_icon + ' Copy Message');
                }, 5000);
        return true;
    }
    </script>
    @endpush('scripts')