@extends('system.layout.main')

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

@php
    $paymentTransactionURL = "https://dashboard.gelato.com/payment-methods/wallets";
    $videoURL = "https://drive.google.com/file/d/11hiPx1WCEA5-8yBoryiCfG-5HsEIt0AN/view?usp=sharing";
    $printifyURL = "https://printify.com/app/login";
    $steps = [
        '/modules/print-suppliers/images/gelato0.png',
        '/modules/print-suppliers/images/gelato1.png',
        '/modules/print-suppliers/images/gelato2.png',
        '/modules/print-suppliers/images/gelato3.png',
        '/modules/print-suppliers/images/gelato4.png',
        '/modules/print-suppliers/images/gelato5.png',
    ];
@endphp

@section('content')
<section class="content" ng-controller="GelatoReportController" ng-cloak>
    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">Gelato Payment Transactions</h3>
                </div>
                <div class="box-body">
                    <div class="row">
                        <form action="" class="form-horizontal" style="margin-top: 10px">
                            <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-5 control-label">Ví tiền</label>
                                    <div class="col-md-7">
                                        <select class="form-control" ng-model="report.wallet" ng-options="item.code as item.name for item in wallets">
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 col-xs-12">
                                <div class="form-group">
                                    <label class="col-md-5 control-label">Từ ngày</label>
                                    <div class="col-md-7">
                                        <input type="text" class="form-control" ng-model="report.createdAtBefore" id="date-from" autocomplete="off" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 col-xs-12">
                                <div class="form-group">
                                    <label class="col-md-5 control-label">đến ngày</label>
                                    <div class="col-md-7">
                                        <input type="text" class="form-control" ng-model="report.createdAtAfter" id="date-to" autocomplete="off" />
                                    </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>Xem video toàn bộ quá trình lấy <b>Access Token:</b> <a href="{{ $videoURL }}">{{ $videoURL }}</a></p>
                    <p>
                        <b>Bước 1:</b> Đăng nhập tài khoản <b>Gelato</b> và truy cập vào đường dẫn sau: <a href="{{ $paymentTransactionURL }}" target="_blank">{{ $paymentTransactionURL }}</a>. Click chọn Transactions History
                    </p>
                    <div class="row">
                        <a href="{{ $steps[0] }}" target="_blank">
                            <img style="margin: 0 auto; padding: 10px 0px; height: 400px" class="img-responsive" src="{{ $steps[0] }}" /> 
                        </a>
                    </div>
                    <p>
                        <b>Bước 2:</b> Chuột phải chọn <b>Inspect</b> hoặc <b>Kiểm tra phần tử</b>. Một cửa sổ hiện lên chọn mở tab <b>Network</b>
                        <a href="{{ $steps[1] }}" target="_blank">
                            <img style="margin: 0 auto; padding: 10px 0px; height: 400px" class="img-responsive" src="{{ $steps[1] }}" /> 
                        </a>
                        <br />
                        <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> Click vào Nút <b>Search</b>. Xuất hiện một Request có tên là <b>transactions:search</b>.
                        <a href="{{ $steps[3] }}" target="_blank">
                            <img style="margin: 0 auto; padding: 10px 0px; height: 400px" class="img-responsive" src="{{ $steps[3] }}" /> 
                        </a>
                    </p>
                    <p>
                        <b>Bước 4:</b> Click vào Request có tên là <b>transactions:search</b>. Tìm đến mục có tên <b>authorization</b> đây chính là chuỗi Access Token cần copy.
                        <a href="{{ $steps[4] }}" target="_blank">
                            <img style="margin: 0 auto; padding: 10px 0px; height: 400px" class="img-responsive" src="{{ $steps[4] }}" /> 
                        </a>
                    </p>
                    <p>
                        <b>Bước 5:</b> Sau đó nhấn Copy chuỗi Access Token và dán vào ô bên trên. Copy bắt đầu từ <b>Bearer</b> cho đến hết.
                        <a href="{{ $steps[5] }}" target="_blank">
                            <img style="margin: 0 auto; padding: 10px 0px; height: 400px" class="img-responsive" src="{{ $steps[5] }}" /> 
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

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