@extends('layouts.app')
@section('content')
    <div>
        <div class="Polaris-Page">
            @if ($success == true)
                <div>
                    <div class="Polaris-Banner Polaris-Banner--statusSuccess Polaris-Banner--hasDismiss Polaris-Banner--withinPage"
                        tabindex="0" role="status" aria-live="polite" aria-labelledby="PolarisBanner18Heading"
                        aria-describedby="PolarisBanner18Content">
                        <div class="Polaris-Banner__Dismiss">
                            <button class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly"
                                aria-label="Dismiss notification" type="button">
                                <span class="Polaris-Button__Content">
                                    <span class="Polaris-Button__Icon">
                                        <span class="Polaris-Icon">
                                            <span class="Polaris-VisuallyHidden"></span>
                                            {{-- <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                          <path d="m11.414 10 4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z"></path>
                        </svg> --}}
                                        </span>
                                    </span>
                                </span>
                            </button>
                        </div>
                        <div class="Polaris-Banner__Ribbon"><span
                                class="Polaris-Icon Polaris-Icon--colorSuccess Polaris-Icon--applyColor"><span
                                    class="Polaris-VisuallyHidden"></span><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg"
                                    focusable="false" aria-hidden="true">
                                    <path fill-rule="evenodd"
                                        d="M0 10a10 10 0 1 0 20 0 10 10 0 0 0-20 0zm15.2-1.8a1 1 0 0 0-1.4-1.4L9 11.6 6.7 9.3a1 1 0 0 0-1.4 1.4l3 3c.4.4 1 .4 1.4 0l5.5-5.5z">
                                    </path>
                                </svg></span></div>
                        <div class="Polaris-Banner__ContentWrapper">
                            <div class="Polaris-Banner__Heading" id="PolarisBanner18Heading">
                                <p class="Polaris-Heading">Customer ID Number Updated Successfully</p>
                            </div>
                            {{-- <div class="Polaris-Banner__Content" id="PolarisBanner18Content">
                  <div class="Polaris-Banner__Actions">
                    <div class="Polaris-ButtonGroup">
                      <div class="Polaris-ButtonGroup__Item">
                        <div class="Polaris-Banner__PrimaryAction"><button class="Polaris-Banner__Button" type="button">Print label</button></div>
                      </div>
                    </div>
                  </div>
                </div> --}}
                        </div>
                    </div>
                    <div id="PolarisPortalsContainer"></div>
                </div>
            @endif



            <div style="margin-top: 10px;">
                <div class="Polaris-Banner Polaris-Banner--statusInfo Polaris-Banner--hasDismiss Polaris-Banner--withinPage"
                    tabindex="0" role="status" aria-live="polite" aria-labelledby="PolarisBanner4Heading"
                    aria-describedby="PolarisBanner4Content">
                    <div class="Polaris-Banner__Dismiss">
                        <button class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly"
                            aria-label="Dismiss notification" type="button">
                            <span class="Polaris-Button__Content">
                                <span class="Polaris-Button__Icon">
                                    <span class="Polaris-Icon">
                                        <span class="Polaris-VisuallyHidden">
                                        </span>
                                        {{-- <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                        <path d="m11.414 10 4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z"></path>
                      </svg> --}}
                                    </span>
                                </span>
                            </span>
                        </button>
                    </div>
                    <div class="Polaris-Banner__Ribbon">
                        <span class="Polaris-Icon Polaris-Icon--colorHighlight Polaris-Icon--applyColor">
                            <span class="Polaris-VisuallyHidden"></span>
                            <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                <path fill-rule="evenodd"
                                    d="M10 20c5.514 0 10-4.486 10-10S15.514 0 10 0 0 4.486 0 10s4.486 10 10 10zm1-6a1 1 0 1 1-2 0v-4a1 1 0 1 1 2 0v4zm-1-9a1 1 0 1 0 0 2 1 1 0 0 0 0-2z">
                                </path>
                            </svg>
                        </span>
                    </div>

                    <div class="Polaris-Banner__ContentWrapper">
                        <div class="Polaris-Banner__Heading" id="PolarisBanner4Heading">
                            <p class="Polaris-Heading">Customer ID Number</p>
                        </div>
                        <div class="Polaris-Banner__Content" id="PolarisBanner4Content">
                            <p>Your Customer ID number is a unique number that is assigned to you during store setup. Your
                                APOD representative will assign this number to you after you have successfully installed the
                                application</p>
                        </div>
                    </div>
                </div>
                <div id="PolarisPortalsContainer"></div>
            </div>
            <div style="margin-top: 10px;">
            <div class="Polaris-Banner Polaris-Banner--statusInfo Polaris-Banner--hasDismiss Polaris-Banner--withinPage" tabindex="0" role="status" aria-live="polite" aria-labelledby="PolarisBanner4Heading" aria-describedby="PolarisBanner4Content">
                <div class="Polaris-Banner__Dismiss">
                    <button class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly" aria-label="Dismiss notification" type="button">
                        <span class="Polaris-Button__Content">
                            <span class="Polaris-Button__Icon">
                                <span class="Polaris-Icon">
                                    <span class="Polaris-VisuallyHidden">
                                    </span>

                                </span>
                            </span>
                        </span>
                    </button>
                </div>


                <div class="Polaris-Banner__ContentWrapper">
                    <div class="Polaris-Banner__Heading" id="PolarisBanner4Heading">
                        <div style="display: flex;justify-content: space-between;align-items: center;">
                        <div style="display: flex">
                            <div>
                            <div class="Polaris-Banner__Ribbon" style="margin-top: 3px;">
                                <span class="Polaris-Icon Polaris-Icon--colorHighlight Polaris-Icon--applyColor">
                                    <span class="Polaris-VisuallyHidden"></span>
                                    <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M10 20c5.514 0 10-4.486 10-10S15.514 0 10 0 0 4.486 0 10s4.486 10 10 10zm1-6a1 1 0 1 1-2 0v-4a1 1 0 1 1 2 0v4zm-1-9a1 1 0 1 0 0 2 1 1 0 0 0 0-2z">
                                        </path>
                                    </svg>
                                </span>
                            </div></div>
                        <p class="Polaris-Heading">Connect to Luna</p></div>
                        <button class="Polaris-Button Polaris-Button--primary" type="button"
                        style="float: right; justify-content: space-between;" id="luna_connect">

                        <span class="Polaris-Button__Content">

                            <span class="Polaris-Button__Text">Connect</span>

                        </span>

                    </button>
                        </div>
                    </div>
                    <div class="Polaris-Banner__Content" id="PolarisBanner4Content">
                    </div>
                </div>
            </div>
            </div>
            <div
                class="Polaris-Page-Header Polaris-Page-Header--isSingleRow Polaris-Page-Header--mobileView Polaris-Page-Header--noBreadcrumbs Polaris-Page-Header--mediumTitle">
                <div class="Polaris-Page-Header__Row">
                    <div class="Polaris-Page-Header__TitleWrapper">
                        <div>
                            <div class="Polaris-Header-Title__TitleAndSubtitleWrapper">
                                <h1 class="Polaris-Header-Title" style="margin-bottom: 10px; ">Settings</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <form method="GET" action="{{ route('update-settings') }}">
                    <input type="hidden" name="id" value="{{ auth()->user()->id }}">
                    <div class="Polaris-FormLayout">
                        <div class="Polaris-FormLayout__Item">
                            <div class="">
                                <div class="Polaris-Connected">
                                    <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                        <div class="Polaris-TextField">
                                            <input id="PolarisTextField2" disabled name="store_id" autocomplete="store_id"
                                                class="Polaris-TextField__Input" type="store_id"
                                                aria-describedby="PolarisTextField2HelpText"
                                                aria-labelledby="PolarisTextField2Label" aria-invalid="false"
                                                @if (isset($store_id)) value="{{ $store_id }}" @endif>
                                            <div class="Polaris-TextField__Backdrop"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="Polaris-FormLayout__Item"><button class="Polaris-Button" type="submit"><span
                                    class="Polaris-Button__Content"><span
                                        class="Polaris-Button__Text">Submit</span></span></button></div>
                    </div><span class="Polaris-VisuallyHidden"><button type="submit" aria-hidden="true"
                            tabindex="-1">Submit</button></span>
                    <div>

                    </div>
                </form>
                <div id="PolarisPortalsContainer"></div>
            </div>
        </div>

    </div>
    <script type="text/javascript">
        luna_connect.addEventListener('click', function() {
            window.open('{{ env("MES_URL", "https://luna.americanprintondemand.com") }}/verify?token={{ Auth::user()->token }}', '_blank');
        });
    </script>
@endsection