@extends('system.layout.main')

@section('title')
    <title>Printify Report</title>
@endsection

@php
    $extensionURL = "https://chrome.google.com/webstore/detail/local-storage/nnlekldijoehomfgfciodmolohhfkfpm";
    $printifyURL = "https://printify.com/app/login";
    $steps = [
        '/modules/print-suppliers/images/step0-v2.png',
        '/modules/print-suppliers/images/step1-v2.png',
        '/modules/print-suppliers/images/step2-v2.png',
        '/modules/print-suppliers/images/step3-v2.png',
    ];
@endphp

@section('content')
<section class="content" ng-controller="PrintifyReportController" ng-cloak>
    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">Printify Payment Transactions</h3>
                </div>
                <div class="box-body">
                    <div class="row">
                        <form action="" class="form-horizontal" style="margin-top: 10px">
                            <div class="col-md-2 col-xs-12"></div>
                            <div class="col-md-5 col-xs-12">
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Access Token</label>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control" ng-model="report.token" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 col-xs-12">
                                <div class="form-group">
                                    <label class="col-md-2 control-label">Limit</label>
                                    <div class="col-md-10">
                                        <input type="text" class="form-control" ng-model="report.limit" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-1 col-xs-12 text-center">
                                <button type="button" class="btn btn-primary" ng-click="exportExcel()"><i class="fa fa-file-excel-o"></i> Get Excel</button>
                            </div>
                        </form>
                    </div>

                    <p><span style="font-weight: bold; color: red">Chú ý:</span> Nếu hệ thống báo lỗi <i>Unauthenticated</i> có nghĩa Access Token đã hết hạn, cần được tạo mới, hãy làm theo các bước phía dưới để lấy được Token.</p>
                    <hr />
                    <p>
                        <b>Bước 1: (bỏ qua nếu dã cài đặt)</b> Cài đặt Extension <b>Local Storage</b> tại đường dẫn sau: <a href="{{ $extensionURL }}" target="_blank">{{ $extensionURL }}</a>
                        . Sau đó ghim lại biểu tượng trên thanh extension của trình duyệt.
                    </p>
                    <div class="row">
                        
                        <div class="col-xs-12 col-md-6">
                            <a href="{{ $steps[0] }}" target="_blank">
                                <img style="margin: 0 auto; padding: 10px 0px; height: 300px" class="img-responsive" src="{{ $steps[0] }}" /> 
                            </a>
                            
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a href="{{ $steps[1] }}" target="_blank">
                                <img style="margin: 0 auto; padding: 10px 0px; height: 300px" class="img-responsive" src="{{ $steps[1] }}" /> 
                            </a>
                        </div>
                    </div>
                    <p>
                        <b>Bước 2:</b> Truy cập vào hệ thống của Printify tại địa chỉ <a href="{{ $printifyURL }}" target="_blank">{{ $printifyURL }}</a> để đăng nhập. Sau khi đăng nhập thành công hãy nhấn sử dụng công cụ <b>Local Storage</b> để đọc dữ liệu. Tìm kiếm mục <b>session</b> như trong hình.
                        <a href="{{ $steps[2] }}" target="_blank">
                            <img style="margin: 0 auto; padding: 10px 0px; height: 400px" class="img-responsive" src="{{ $steps[2] }}" /> 
                        </a>
                        
                    </p>
                    <p>
                        <b>Bước 3:</b> Sau đó nhấn Copy chuỗi Access Token và dán vào ô bên trên.
                        <a href="{{ $steps[3] }}" target="_blank">
                            <img style="margin: 0 auto; padding: 10px 0px; height: 300px" class="img-responsive" src="{{ $steps[3] }}" /> 
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('script')
<script src="/modules/print-suppliers/js/printify-report-controller.js?v={{ $printSupplierSourceVersion }}" charset="utf-8"></script>
@endsection