<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" type="text/css" media="screen">
    <meta name="shopify-api-key" content="{{ \Osiset\ShopifyApp\getShopifyConfig('api_key', Auth::user()->name ) }}" />
    <title>Document</title>
</head>
<body>
    <div id="app">
        <v-app>
            <v-app-bar app>
                <nav class="navbar">
                    <v-btn small elevation="0" to="/">Dashboard</v-btn>
                    <v-btn small elevation="0" to="/orders">Orders</v-btn>
                    <v-btn small elevation="0" to="/products">Products</v-btn>
                    <v-btn small elevation="0" to="/image-importer">Image Importer</v-btn>
                    <v-btn small elevation="0" to="/content-tools">Content Tools</v-btn>
                    <v-btn small elevation="0" to="/sync-tools">Sync Tools</v-btn>
                </nav>
            </v-app-bar>
            <v-main>
                <router-view></router-view>
            </v-main>
        </v-app>
    </div>
    <script src="{{ asset('js/app.js') }}"></script>
    @if(\Osiset\ShopifyApp\getShopifyConfig('appbridge_enabled'))
        <!--<script src="https://unpkg.com/@shopify/app-bridge{{ \Osiset\ShopifyApp\getShopifyConfig('appbridge_version') ? '@'.config('shopify-app.appbridge_version') : '' }}"></script>
        -->
        <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
        <script>
            /*
            var AppBridge = window['app-bridge'];
            var createApp = AppBridge.default;
            var app = createApp({
                apiKey: '{{ \Osiset\ShopifyApp\getShopifyConfig('api_key', Auth::user()->name ) }}',
                host: new URLSearchParams(location.search).get("host"),
                forceRedirect: true,
            });
            console.log(new URLSearchParams(location.search).get("host"));


*/setTimeout(() => {
            fetch('shopify:admin/api/graphql.json', {
            method: 'POST',
            body: JSON.stringify({
                query: `
                query GetProduct($id: ID!) {
                    product(id: $id) {
                    title
                    }
                }
                `,
                variables: {id: 'gid://shopify/Product/6572340543674'},
            }),
            }).then((res) => {
                const {data} = res.json().then(({data}) => {
                    console.log(data);
                });

            });
        }, 3000);
        </script>
	<button id="open-picker">Open resource picker</button>
    <script>
      document
        .getElementById('open-picker')
        .addEventListener('click', async () => {
          const selected = await shopify.resourcePicker({type: 'product'});
          console.log(selected);
        });
    </script>
        @include('shopify-app::partials.flash_messages')
    @endif
</body>
</html>
