@extends('system.layout.main')

@section('css')

@endsection

@section('title')
    <title>Print Suppliers - Portal</title>
@endsection

@section('content')

    <div class="content" ng-controller="StuckAutoFFPortal" ng-cloak style="max-width: 1330px;">
        <div class="row">
            <div class="col-md-12" style="margin: 15px 0px">
                <div class="pull-left">
                    <h3 style="margin: 0">
                        Fulfillment Portal - Stuck Auto Fulfillment
                    </h3>
                </div>
                <div class="pull-right">
                    <a href="{{ route('customization::template::index') }}">

                    </a>
                </div>
            </div>
            <div class="col-md-12" style="min-height: 500px">
<!--                <div class="box no-border">
                    <div class="box-header">
                        <strong>Printify 5+ days in Production</strong>
                    </div>
                    <div class="box-body">
                        <button class="btn btn-default" disabled>Generate Report</button>
                        <i class="text-danger">In Developing</i>
                    </div>
                </div>-->
                <div class="box no-border">
                    <div class="box-header">
                        <strong>Stuck Auto Fulfillment</strong>
                    </div>
                    <div class="box-body">
                        <button class="btn btn-default" ng-click="generateStuckOrderReport()">Generate Report</button>
                        <table class="table table-bordered" style="margin-top: 25px">
                            <tr>
                                <th class="text-center" rowspan="2" style="vertical-align: middle">Market / Date</th>
                                <th class="text-center" colspan="2" ng-repeat="date in dateReports">@{{ date }}</th>
                            </tr>
                            <tr>
                                <th class="text-center" ng-repeat="n in range(1, 2 * dateReports.length)">
                                    <span ng-if="n %2 != 0">Order</span>
                                    <span ng-if="n %2 == 0">Product</span>
                                </th>
                            </tr>
                            <tr ng-repeat="(key, values) in stuckOrders">
                                <td class="text-center">@{{ key.toUpperCase() }}</td>
                                <td class="text-center" ng-repeat-start="value in values">
                                    @{{ value.length }}
                                </td>
                                <td class="text-center" ng-repeat-end>
                                    @{{ countProduct(value) }}
                                </td>
                            </tr>
                        </table>

                        <span class="text-warning text-sm" style="margin-top: 5px; display:block;">
                            Order: Order count <br>
                            Product: Product count
                        </span>

                        <table class="table" style="margin-top: 25px" ng-if="stuckOrders.length">
                            <tr>
                                <td colspan="6">
                                    <strong>Total</strong>: @{{ stuckOrderMeta.total_count }}
                                </td>
                            </tr>
                            <tr>
                                <th>Order Id</th>
                                <th>Order code</th>
                                <th>Items</th>
                                <th>Created at</th>
                                <th>Payment</th>
                                <th>Shipping</th>
                            </tr>
                            <tr ng-repeat="order in stuckOrders">
                                <td>@{{ order.id }}</td>
                                <td>@{{ order.code }}</td>
                                <td>
                                    <div ng-repeat="item in order.items">
                                        <strong>@{{ item.product_sku }}</strong>
                                    </div>
                                </td>
                                <td>@{{ order.created_at }}</td>
                                <td>@{{ order.payment_type }}</td>
                                <td>@{{ order.shipping_type }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script>
        var markets = {!! $markets !!};
    </script>
    <script src="/modules/print-suppliers/js/fulfill-base.js?v=<?= $printSupplierSourceVersion ?>"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js"></script>
    <script src="@asset('print-suppliers/js/stuck-autoff-portal-controller.js')?v={{ $printSupplierSourceVersion }}"></script>
@endsection
