@extends('system.layout.main', [
    'header' => true,
    'ngController' => "TemplateEditController"
])
@section('title')
<title>Cấu hình tự động chọn template</title>
@endsection
@section('script')
{{-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> --}}
{{-- <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> --}}
<script type="text/javascript">
    system.controller("TemplateEditController", TemplateEditController);
    function TemplateEditController($scope, $http, $rootScope) {
        this.__proto__ = new BaseController($scope, $http, $rootScope);
        $scope.blueprints = [];
        $scope.init = function() {
            $scope.statuses = [
                {
                    id : 1,
                    title : "Enabled"
                },
                {
                    id : 0,
                    title : "Disabled"
                }
            ]
            $scope.template = {!!json_encode($template) !!};
            // $('#blueprint_id').select2();
            $scope.getBlueprints();
            $scope.getBlueprint();
            $scope.getPrintProviders();
            $scope.getVariants();
        }

        $scope.changeBlueprintId = function () {
            $scope.getBlueprint();
            $scope.getPrintProviders();
            $scope.template.print_provider_id = '';
            $scope.template.variant_id = '';
        }

        $scope.changePrintProviderId = function () {
            $scope.getVariants();
            $scope.template.variant_id = '';
        }

        $scope.getBlueprints = function() {
            $http.get("https://api.printify.com/v1/catalog/blueprints.json", {
                    headers: {
                        'Authorization': "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIzN2Q0YmQzMDM1ZmUxMWU5YTgwM2FiN2VlYjNjY2M5NyIsImp0aSI6ImNjMDkxMTgxYTE0ZjFiNDgyZGM4YzY4MWYyNTI3ZjcyZDA2YWY4NWMxYjVhOWUxMDNiMzE0NDRjZTVmMWFjNzgwMDYyYjQ1MTJkNzFkNTNiIiwiaWF0IjoxNjM5Nzk4MTcxLCJuYmYiOjE2Mzk3OTgxNzEsImV4cCI6MTY3MTMzNDE3MSwic3ViIjoiNzY4NjY2NSIsInNjb3BlcyI6WyJzaG9wcy5tYW5hZ2UiLCJzaG9wcy5yZWFkIiwiY2F0YWxvZy5yZWFkIiwib3JkZXJzLnJlYWQiLCJvcmRlcnMud3JpdGUiLCJwcm9kdWN0cy5yZWFkIiwicHJvZHVjdHMud3JpdGUiLCJ3ZWJob29rcy5yZWFkIiwid2ViaG9va3Mud3JpdGUiLCJ1cGxvYWRzLnJlYWQiLCJ1cGxvYWRzLndyaXRlIiwicHJpbnRfcHJvdmlkZXJzLnJlYWQiXX0.AAG2k6eGgUrPbrSuL0Lpr1iIqiHzDB4nQXk0oCkr51rYSAPssVlwx-F74yjArhSC2GEZ_0n-CCZuAU6QZS0"
                    }
                })
                .then(function(response) {
                    $scope.blueprints = response.data;

                });
        }

        $scope.getBlueprint = function () {
            if (!$scope.template.blueprint_id) {
                return;
            }
            $http.get(`https://api.printify.com/v1/catalog/blueprints/${$scope.template.blueprint_id}.json`, {
                    headers: {
                        'Authorization': "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIzN2Q0YmQzMDM1ZmUxMWU5YTgwM2FiN2VlYjNjY2M5NyIsImp0aSI6ImNjMDkxMTgxYTE0ZjFiNDgyZGM4YzY4MWYyNTI3ZjcyZDA2YWY4NWMxYjVhOWUxMDNiMzE0NDRjZTVmMWFjNzgwMDYyYjQ1MTJkNzFkNTNiIiwiaWF0IjoxNjM5Nzk4MTcxLCJuYmYiOjE2Mzk3OTgxNzEsImV4cCI6MTY3MTMzNDE3MSwic3ViIjoiNzY4NjY2NSIsInNjb3BlcyI6WyJzaG9wcy5tYW5hZ2UiLCJzaG9wcy5yZWFkIiwiY2F0YWxvZy5yZWFkIiwib3JkZXJzLnJlYWQiLCJvcmRlcnMud3JpdGUiLCJwcm9kdWN0cy5yZWFkIiwicHJvZHVjdHMud3JpdGUiLCJ3ZWJob29rcy5yZWFkIiwid2ViaG9va3Mud3JpdGUiLCJ1cGxvYWRzLnJlYWQiLCJ1cGxvYWRzLndyaXRlIiwicHJpbnRfcHJvdmlkZXJzLnJlYWQiXX0.AAG2k6eGgUrPbrSuL0Lpr1iIqiHzDB4nQXk0oCkr51rYSAPssVlwx-F74yjArhSC2GEZ_0n-CCZuAU6QZS0"
                    }
                })
                .then(function(response) {
                    $scope.blueprint = response.data;
                    console.log($scope.blueprint);
                });
        }

        $scope.getPrintProviders = function () {
            if (!$scope.template.blueprint_id) {
                return;
            }
            $http.get(`https://api.printify.com/v1/catalog/blueprints/${$scope.template.blueprint_id}/print_providers.json`, {
                    headers: {
                        'Authorization': "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIzN2Q0YmQzMDM1ZmUxMWU5YTgwM2FiN2VlYjNjY2M5NyIsImp0aSI6ImNjMDkxMTgxYTE0ZjFiNDgyZGM4YzY4MWYyNTI3ZjcyZDA2YWY4NWMxYjVhOWUxMDNiMzE0NDRjZTVmMWFjNzgwMDYyYjQ1MTJkNzFkNTNiIiwiaWF0IjoxNjM5Nzk4MTcxLCJuYmYiOjE2Mzk3OTgxNzEsImV4cCI6MTY3MTMzNDE3MSwic3ViIjoiNzY4NjY2NSIsInNjb3BlcyI6WyJzaG9wcy5tYW5hZ2UiLCJzaG9wcy5yZWFkIiwiY2F0YWxvZy5yZWFkIiwib3JkZXJzLnJlYWQiLCJvcmRlcnMud3JpdGUiLCJwcm9kdWN0cy5yZWFkIiwicHJvZHVjdHMud3JpdGUiLCJ3ZWJob29rcy5yZWFkIiwid2ViaG9va3Mud3JpdGUiLCJ1cGxvYWRzLnJlYWQiLCJ1cGxvYWRzLndyaXRlIiwicHJpbnRfcHJvdmlkZXJzLnJlYWQiXX0.AAG2k6eGgUrPbrSuL0Lpr1iIqiHzDB4nQXk0oCkr51rYSAPssVlwx-F74yjArhSC2GEZ_0n-CCZuAU6QZS0"
                    }
                })
                .then(function(response) {
                    $scope.print_providers = response.data;
                    console.log($scope.print_providers);
                });
        }

        $scope.getVariants = function () {
            if (!$scope.template.blueprint_id || !$scope.template.print_provider_id) {
                return;
            }
            $http.get(`https://api.printify.com/v1/catalog/blueprints/${$scope.template.blueprint_id}/print_providers/${$scope.template.print_provider_id}/variants.json`, {
                    headers: {
                        'Authorization': "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIzN2Q0YmQzMDM1ZmUxMWU5YTgwM2FiN2VlYjNjY2M5NyIsImp0aSI6ImNjMDkxMTgxYTE0ZjFiNDgyZGM4YzY4MWYyNTI3ZjcyZDA2YWY4NWMxYjVhOWUxMDNiMzE0NDRjZTVmMWFjNzgwMDYyYjQ1MTJkNzFkNTNiIiwiaWF0IjoxNjM5Nzk4MTcxLCJuYmYiOjE2Mzk3OTgxNzEsImV4cCI6MTY3MTMzNDE3MSwic3ViIjoiNzY4NjY2NSIsInNjb3BlcyI6WyJzaG9wcy5tYW5hZ2UiLCJzaG9wcy5yZWFkIiwiY2F0YWxvZy5yZWFkIiwib3JkZXJzLnJlYWQiLCJvcmRlcnMud3JpdGUiLCJwcm9kdWN0cy5yZWFkIiwicHJvZHVjdHMud3JpdGUiLCJ3ZWJob29rcy5yZWFkIiwid2ViaG9va3Mud3JpdGUiLCJ1cGxvYWRzLnJlYWQiLCJ1cGxvYWRzLndyaXRlIiwicHJpbnRfcHJvdmlkZXJzLnJlYWQiXX0.AAG2k6eGgUrPbrSuL0Lpr1iIqiHzDB4nQXk0oCkr51rYSAPssVlwx-F74yjArhSC2GEZ_0n-CCZuAU6QZS0"
                    }
                })
                .then(function(response) {
                    $scope.variants = response.data.variants;
                    console.log($scope.variants);
                });
        }

        $scope.save = function () {
            $http.put(window.location.href, $scope.template)
            .then(function(response) {
                console.log(response);
                toastr.success('Template saved successful');
            }).error(function () {
                toastr.error('Template saved fail');
            });
        }

        $scope.auto = function () {
            $http.get(window.location.href + '/auto')
            .then(function (response) {
                $scope.template.blueprint_id = response.data.blueprint_id;
                $scope.template.print_provider_id = response.data.print_provider_id;
                $scope.template.variant_id = response.data.variant_id;
                $scope.getPrintProviders();
                $scope.getVariants();
                toastr.success('Auto template successful');
            })
        }
        $scope.init();
    }
</script>
@endsection
@section('css')
<style media="screen">
    .chosen-container-single,
    .chosen-container-multi {
        width: 100% !important;
    }
    .chosen-single {
        height: 34px !important;
        padding-top: 5px !important;
        font-size: 15px;
    }
</style>
@endsection
@section('content')
<section class="content-header">
    <h1>Tự động chọn cấu hình Template</h1>
</section>
<section class="content">
    <div class="box no-border">
        <div class="box-body">
            <form class="" action="index.html" method="post">
                @{{ template }} <div class="form-group">
                    <label for="id">ID</label>
                    <input id="id" type="text" name="id" class="form-control" placeholder="Enter ID" ng-model="template.id" disabled>
        </div>
        <div class="form-group">
            <label for="category_id">Category ID</label>
            <input id="category_id" type="text" name="category_id" class="form-control" placeholder="Enter Category ID" ng-model="template.category_id"  disabled>
        </div>
        <div class="form-group">
            <label for="color">Color</label>
            <input id="color" type="text" name="color" class="form-control" placeholder="Enter Color" ng-model="template.color"  disabled>
        </div>
        <div class="form-group">
            <label for="size">Size</label>
            <input id="size" type="text" name="size" class="form-control" placeholder="Enter Size" ng-model="template.size"  disabled>
        </div>
        <div class="form-group">
            <label for="size">Type</label>
            <input id="size" type="text" name="size" class="form-control" placeholder="Enter type" ng-model="template.type"  disabled>
        </div>
        <div class="form-group">
            <label for="style">style</label>
            <input id="style" type="text" name="style" class="form-control" placeholder="Enter style" ng-model="template.style" disabled>
        </div>
        <div class="form-group">
            <label for="printing_service">Printing Service</label>
            <input id="printing_service" type="text" name="printing_service" class="form-control" placeholder="Enter Printing Service" ng-model="template.printing_service" disabled>
        </div>
        <div class="form-group">
            <label for="enable">Enable</label>
            <select chosen class="form-control chosen-select" ng-model="template.enable" ng-options="option.id as option.title for option in statuses" placeholder="Select">
            </select>
        </div>
        <div class="form-group">
            <label for="blueprint_id">Blueprint</label>
            <select chosen class="form-control chosen-select" name="blueprint_id" ng-model="template.blueprint_id" ng-options="option.id as option.title for option in blueprints" placeholder="Select" ng-change="changeBlueprintId()">
            </select>
        </div>
        <div class="form-group">
            <label for="blueprint_id">Print Provider</label>
            <select chosen class="form-control chosen-select" name="print_provider_id" ng-model="template.print_provider_id" ng-options="option.id as option.title for option in print_providers" placeholder="Select" ng-change="changePrintProviderId()">
            </select>
        </div>
        <div class="form-group">
            <label for="blueprint_id">Variant</label>
            <select chosen class="form-control chosen-select" name="variant_id" ng-model="template.variant_id" ng-options="option.id as option.title for option in variants" placeholder="Select variant">
            </select>
        </div>
        <button class="btn btn-primary" type="button" name="button" ng-click="save()">Save</button>
        <button class="btn btn-danger" type="button" name="button" ng-click="auto()">Auto Config</button>
        <a href="./">Back</a>
        </form>
    </div>
    </div>
</section>
@endsection
