<div class="modal fade fulfill-modal" id="modalFulfillPrintify" style="overflow-y: hidden;">
    <div class="modal-dialog modal-lg fulfillment-modal-dialog">
        <div class="modal-content" style="border-radius: 5px">
            <div class="modal-header" style="padding: 8px;">
                <button type="button" class="close close-modal-btn" data-dismiss="modal" aria-label="Close"
                    ng-click="handleViewOrder('order:close')" style="opacity: 0.8">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon-close-modal" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M18 6l-12 12" /> <path d="M6 6l12 12" /> </svg> 
                </button>
                <h4 style="line-height: unset; display: inline-block;" class="modal-title">
                    <img style="height: 25px;" src="https://ps.w.org/printify-for-woocommerce/assets/icon.svg" />
                    <span style="display: inline-block; vertical-align: sub">Printify Fulfillment</span>
                </h4>
                <div class="pull-right has-selected">
                    <strong>Fulfill Account</strong>
                    <select class="select form-control" ng-model="accountIdChoosed" ng-change="changeAccount()">
                        <!-- <option value="" disabled>-- Choose Account --</option> -->
                        <option value="@{{ account.shop_id }}" ng-repeat="account in printifyConfigs.accounts">
                            @{{ account.name }}</option>
                    </select>
                </div>
            </div>
            <div class="modal-body" ng-keyup="$event.keyCode == 13 && save()"
                style="width: 100%; padding: 0; height: 80vh; overflow-y: auto; overflow-x:hidden">
                <table class="fulfillment-table">
                    <thead>
                        <th class="fulfillment-col-head">No. Id / Label</th>
                        <th class="fulfillment-col-head">Items</th>
                        <th class="fulfillment-col-head">Printify Order Profile</th>
                    </thead>
                    <tbody class="fulfillment-tbody">
                        <tr class="fulfillment-row" ng-repeat="item in printifyCurrentOrder.items">
                            <td class="fulfillment-col" ng-if="$index == 0" rowspan="@{{ printifyCurrentOrder.items.length }}">
                                <div class="fulfillment-col-item-label">
                                    <div class="current-order-code">
                                        @{{ printifyCurrentOrder.id }}. #@{{ printifyCurrentOrder.code }}
                                    </div>
                                    <table class="shipping-info">
                                        <tr>
                                            <td><strong>Fullname:</strong> </td>
                                            <td>@{{ printifyCurrentOrder.customer.full_name }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Email:</strong> </td>
                                            <td>
                                                <div class="shipping-info-mail">
                                                    @{{ printifyCurrentOrder.customer.email }}
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>Phone:</strong> </td>
                                            <td>@{{ printifyCurrentOrder.customer.phone }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Country:</strong> </td>
                                            <td>
                                                @{{ printifyCurrentOrder.country.nicename }}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>Region:</strong> </td>
                                            <td>
                                                <input id="inputRegion" class="form-control"
                                                    ng-model="printifyCurrentOrder.state_name" type="text"
                                                    placeholder="Region / Province">
                                                {{-- <span ng-if="printifyCurrentOrder.state_name">@{{ printifyCurrentOrder.state_name }}</span>
                                                <span ng-if="printifyCurrentOrder.province.name">@{{ printifyCurrentOrder.province.name }}</span> --}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>City:</strong> </td>
                                            <td>
                                                <input id="inputCity" class="form-control"
                                                    ng-model="printifyCurrentOrder.city_name" type="text"
                                                    placeholder="City">
                                                {{-- <span ng-if="printifyCurrentOrder.city_name">@{{ printifyCurrentOrder.city_name }}</span>
                                                <span ng-if="printifyCurrentOrder.city.name">@{{ pprintifyCurrentOrder.city.name }}</span> --}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>Address:</strong> </td>
                                            <td>@{{ printifyCurrentOrder.delivery_address }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Address2:</strong> </td>
                                            <td>@{{ printifyCurrentOrder.optional_address }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Zipcode:</strong> </td>
                                            <td>@{{ printifyCurrentOrder.zip_code }}</td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <strong>Created at:</strong>
                                            </td>
                                            <td>
                                                @{{ summarizeTime(printifyCurrentOrder.created_at) }}
                                                @{{ toVietnameseDate(printifyCurrentOrder.created_at, true) }} (GMT+7)
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <strong>Shipping method:</strong>
                                            </td>
                                            <td>
                                                <select class="select chosse-input"
                                                    ng-model="printifyCurrentOrder.shipping_type">
                                                    <option value="standard">Standard</option>
                                                    <option value="express">Express</option>
                                                    <option value="express-priority">Express Priority</option>
                                                </select>
                                            </td>
                                        
                                        </tr>
                                    </table>
                                    @include('print-suppliers::suppliers.base.suggestion-printing')
                                    {{-- <strong>@{{ printifyCurrentOrder.shipping_type }}</strong> --}}
                                    <div id="warningBox" class="alert alert-simple alert-warning">
                                        <i class="start-icon fa fa-exclamation-triangle faa-flash animated"></i>
                                        Address auto filled in for the first time! Please check for correct.!
                                    </div>
                                </div>
                            </td>
                            <td class="fulfillment-col">
                                <div class="fulfillment-col-item-info-contain">
                                    <div class="fulfillment-col-item-info">
                                        <div class="fulfillment-item-image">
                                            <img ng-src="@{{ getImageCdn(item.image_url, 540, 540) }}" referrerpolicy="no-referrer">
                                        </div>
                                        <div class="product-fulfill-attrs">
                                            <div class="fulfill-product-name-box">
                                                <div class="fulfill-product-name">
                                                    @{{ item.product_name }}
                                                </div>
                                                <button ngclipboard data-clipboard-text="@{{ item.product_name }}" class="btn btn-xs button-icon">
                                                    <svg xmlns="http://www.w3.org/2000/svg"  width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="#595959" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" /> <path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" /> </svg>
                                                </button>
                                            </div>
    
                                            <div class="display-configure" ng-repeat="(key, value) in name2Attrs(item.name)">
                                                <span>@{{ key }}:</span>
                                                <strong>@{{ value }}</strong>
                                            </div>
                                            <div class="display-configure">
                                                <span>Quantity:</span>
                                                <strong>@{{ item.quantity }} </strong>
                                            </div>
                                            <div class="display-configure-box" ng-if="item.display_configure">
                                                <div class="display-configure-row" ng-repeat="(key, value) in item.display_configure track by $index">
                                                    <div class="display-configure" ng-if="key == 'is_print_front'">
                                                        <span>Print on:</span>
                                                        <strong> @{{ (value == 1) ? 'Front' : 'Back' }} </strong>
                                                    </div>
                                                    <div class="display-configure" ng-if="key != 'is_print_front'">
                                                        <span>@{{ key }}:</span>
                                                        <strong>@{{ value }}</strong>
                                                    </div>
                                                </div>
                                            </div>
                                            <div ng-if="hasMultipleDesign(item)">
                                                <button class="btn btn-default" ng-click="download(item)">
                                                    Download Design
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    @include('print-suppliers::suppliers/base/fulfill-design-job')
                                </div>
                            </td>
                            <td class="fulfillment-col">
                                <div class="fulfillment-header">
                                    <span>Printify Data</span>
                                    <img ng-if='item.printify_state.loading' class="small-img-loading"
                                        style="margin-left: 5px;" src="@asset('print-suppliers/images/loading-1.gif')">
                                    <button title="Copy profile" data-toggle="tooltip" class="btn btn-xs button-icon"
                                        ng-if='!item.printify_state.loading' ng-click="copyProfileData(item)">
                                        <svg xmlns="http://www.w3.org/2000/svg"  width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" /> <path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" /> </svg>
                                    </button>
                                    <button title="Paste profile" data-toggle="tooltip" class="btn btn-xs button-icon"
                                        ng-if='!item.printify_state.loading' ng-click="pasteProfileData(item)">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /> <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /> </svg>
                                    </button>
                                </div>

                                @include('print-suppliers::suppliers/printify/components/printify-data')

                                <div ng-if="item.printify_state.avaiableProviders">
                                    {{-- printify_state.avaiableProviders --}}
                                    <div class="row">
                                        <div class="col col-md-12">
                                            <div class="panel panel-default panel-avaiable-providers">
                                                <table class="table table-avaiable-providers">
                                                    <tr
                                                        style="position: sticky; top: 0; z-index: 1; background-color: #f7f7f7;">
                                                        <th style="border-radius: 0">
                                                            Provider
                                                            <input type="text"
                                                                class="search-providers-input"
                                                                ng-model="item.printify_state.providerSearch"
                                                                ng-keyup="searchProviders(item)"
                                                                placeholder="Search Provider">
                                                        </th>
                                                        <th>Avaiable</th>
                                                        <th>Costs <span class="cost-tooltip" data-placement="bottom"
                                                                data-toggle="tooltip"
                                                                title="Print Area: Blank, Printing, Fee (USD)"><i
                                                                    class="fa fa-question-circle"></i></span></th>
                                                        <th style="border-radius: 0;">Shipping / Production time</th>
                                                    </tr>

                                                    <tbody style="border-top: 0" ng-repeat="provider in item.printify_state.providersFiltered">
                                                        <tr ng-class="{selected: provider.selected, 'not-avaiable': (variant.status === 'out-of-stock')}"
                                                            ng-click="choosePrintprovider(item, variant, provider)"
                                                            class="provider-row"
                                                            ng-repeat="variant in provider.variants">
                                                            <td class="provider-name">
                                                                <strong>@{{ provider.name }}</strong>
                                                                <span>
                                                                    @{{ variant.label }}
                                                                </span>
                                                            </td>
                                                            <td class="provider-status">
                                                                @{{ (variant.status !== 'out-of-stock') ? "Instock" : "Out of Stock" }}
                                                            </td>
                                                            <td class="provider-variant-color">
                                                                <div ng-repeat="cost in variant.costs">
                                                                    <strong>@{{ capitalizeFirstLetter(cost.placeholders.join(', ')) }}: </strong>
                                                                    @{{ (cost.blank / 100); }}, @{{ (cost.printing / 100); }},
                                                                    @{{ (cost.fee / 100); }}
                                                                </div>
                                                            </td>
                                                            <td class="provider-shipping">
                                                                <div>@{{ getSummaryShipping(provider.shipping) }}</div>
                                                                <div ng-if="provider.fulfillmentStats.averageBusinessDaysInProduction">
                                                                    @{{ provider.fulfillmentStats.averageBusinessDaysInProduction }} business days
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    </tbody>

                                                </table>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <div ng-if="!item.printify_state.printAreas || item.printify_state.printAreas.length">
                                    <div class="available-designs-list">
                                        <div class="available-design-item"
                                            ng-class="{'selected-design': design.selected, 'uncomfirm': !design.is_design_comfirm}"
                                            ng-repeat="design in item.printify_state.patternDesigns">
                                            <button class="btn btn-xs btn-zoom-design" data-magnify="gallery"
                                                href="@{{ design.url }}" ng-data-src="@{{ design.url }}">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13"
                                                    fill="currentColor" class="bi bi-zoom-in" viewBox="0 0 16 16">
                                                    <path fill-rule="evenodd"
                                                        d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z" />
                                                    <path
                                                        d="M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1 6.538 6.538 0 0 1-1.398 1.4z" />
                                                    <path fill-rule="evenodd"
                                                        d="M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5z" />
                                                </svg>
                                            </button>
                                            <div class="available-design-item-image">
                                                <img width="90" height="90" ng-src="@{{ getImageCdn(design.url, 360, 360) }}">
                                            </div>
                                            <div class="text-danger">@{{ design.resolution }}</div>
                                        </div>
                                    </div>
                                </div>

                                <div ng-if="item.printify_state.printAreas && item.printify_state.printAreas.length">
                                    <div class="fulfillment-header">
                                        <span>Printify Print Area</span>
                                    </div>
                                    <div class="print-area">
                                        <div class="location-design grid-2col">
                                            <div class="location-design-item" ng-repeat="option in item.printify_state.printAreas">
                                                <div class="pop-print-location">
                                                    @{{ option }}
                                                </div>
                                                
                                                <div class="design-image" style="background-color: @{{ item.printify_state.selectedColor.colors[0].hex }}">
                                                    <div class="gelato-action-gr" ng-if="item.printify_state.designs[option] || item.printify_state.designs[option]">
                                                        <button ng-if="item.printify_state.designs[option]" class="btn gelato-btn-item gelato-brush-design"
                                                            ng-click="openEditDesignModal(item.printify_state.designs[option], option, item)">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M3 21v-4a4 4 0 1 1 4 4h-4" /> <path d="M21 3a16 16 0 0 0 -12.8 10.2" /> <path d="M21 3a16 16 0 0 1 -10.2 12.8" /> <path d="M10.6 9a9 9 0 0 1 4.4 4.4" /> </svg>
                                                        </button>
                                                        <button ng-if="item.printify_state.designs[option]" class="btn gelato-btn-item gelato-close-design"
                                                            ng-click="item.printify_state.designs[option] = ''; changeDesignUrl(option, item)">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M18 6l-12 12" /> <path d="M6 6l12 12" /> </svg>
                                                        </button>
                                                    </div>

                                                    <button class="click-up-design" ng-if="!item.printify_state.designs[option]" ngf-select="uploadImages($files, item, option)">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M12 21a9 9 0 0 1 0 -18c4.97 0 9 3.582 9 8c0 1.06 -.474 2.078 -1.318 2.828c-.844 .75 -1.989 1.172 -3.182 1.172h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25" /> <path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> </svg>
                                                        <span>Click to upload design</span>
                                                    </button>
        
                                                    <img ng-if="item.printify_state.designs[option]"
                                                        ngf-select="uploadImages($files, item, option)"
                                                        id="designImage-@{{ item.id }}-@{{ replaceSpace(option) }}" alt="file design" 
                                                        ng-src="@{{ getImageCdn(item.printify_state.designs[option], 360, 360) }}"

                                                        src="/images/blank.gif" />
                                                </div>

                                                <div ng-if="getDisplayPosition(item, option)"
                                                    style="margin: 3px; padding: 3px; background: aliceblue; border-radius: 5px; font-size: smaller">
                                                    @{{ getDisplayPosition(item, option) }}
                                                </div>
                                                <div class="form-group paste-design-url">
                                                    <input ng-model="item.printify_state.designs[option]"
                                                        ng-change="changeDesignUrl(option, item)" type="text"
                                                        placeholder="Paste Design Url Here" class="form-control">
                                                    <a ng-if="!item.uploading"
                                                        ngf-select="uploadImages($files, item, option)"
                                                        class="btn-upload-image">
                                                        <i class="fa fa-cloud-upload" aria-hidden="true"></i> Choose
                                                        file
                                                    </a>
                                                    <span class="btn-upload-image" ng-if="item.uploading">
                                                        <svg xmlns="http://www.w3.org/2000/svg" class="loadingIcon" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M12 6l0 -3" /> <path d="M16.25 7.75l2.15 -2.15" /> <path d="M18 12l3 0" /> <path d="M16.25 16.25l2.15 2.15" /> <path d="M12 18l0 3" /> <path d="M7.75 16.25l-2.15 2.15" /> <path d="M6 12l-3 0" /> <path d="M7.75 7.75l-2.15 -2.15" /> </svg>
                                                        Uploading...
                                                    </span>
                                                </div>

                                                <div class="available-designs-area">
                                                    <div class="available-designs-area-item"
                                                        ng-class="{'selected-design': design.selected, 'uncomfirm': !design.is_design_comfirm}"
                                                        ng-repeat="design in item.printify_state.patternDesigns">
                                                        <button class="btn btn-xs btn-zoom-design"
                                                            data-magnify="gallery" href="@{{ design.url }}"
                                                            ng-data-src="@{{ design.url }}">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="13"
                                                                height="13" fill="currentColor"
                                                                class="bi bi-zoom-in" viewBox="0 0 16 16">
                                                                <path fill-rule="evenodd"
                                                                    d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z" />
                                                                <path
                                                                    d="M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1 6.538 6.538 0 0 1-1.398 1.4z" />
                                                                <path fill-rule="evenodd"
                                                                    d="M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5z" />
                                                            </svg>
                                                        </button>
                                                        <img ng-click="chooseDesign(design, item, option)" width="80" height="80" ng-src="@{{ getImageCdn(design.url, 540, 540) }}">
                                                        <div class="text-danger ng-binding">@{{ design.resolution }}</div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

                                    </div>
                                </div>

                            </td>
                        </tr>
                    </tbody>
                </table>
                {{-- <div class="loader size">Loading...</div> --}}
            </div>
            <div class="modal-footer fulfill-modal-footer">
                <span ng-show="textNotify">@{{ textNotify }}</span>
                <div class="needSaveTemplate">
                    <input id="needSaveTemplate" ng-model="needSaveTemplate" type="checkbox" class="form-check-input">
                    <label for="needSaveTemplate">Save template</label>
                </div>
                <button id="btnPostPrintifyOrder" ng-click="orderPrintify()" type="button" class="btn btn-primary btn-create-fulfilment">
                    Create
                </button>
                <button type="button" class="btn btn-default btn-close-fulfilment" data-dismiss="modal" ng-click="handleViewOrder('order:close')">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>
