<div class="modal fade fulfill-modal" id="modalFulfillGelato" 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')">
                    <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" class="modal-title">
                    <img style="height: 25px;"
                        src="https://play-lh.googleusercontent.com/n66oD-zgMNts72-YxOfnd86_wK452Ehz7OtqgXbjkdGSo62EC6fkB1jNo0H5eb55hg">
                    <span style="display: inline-block; vertical-align: text-top">Gelato Fulfillment</span>
                </h4>
                <div class="pull-right has-selected">
                    <strong>Order Currency</strong>
                    <select class="pull-right select" ng-model="fulFillCurrency" ng-change="changeCurrency()">
                        <option value="" disabled>-- Choose Currency --</option>
                        <option value="@{{ c }}" ng-repeat="c in CURRENCIES">@{{ c }}
                        </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">Gelato Order Profile</th>
                    </thead>
                    <tbody class="fulfillment-tbody">
                        <tr class="fulfillment-row" ng-repeat="item in gelatoCurrentOrder.items track by item.id">
                            <td class="fulfillment-col" ng-if="$index == 0" rowspan="@{{ gelatoCurrentOrder.items.length }}">
                                <div class="fulfillment-col-item-label">
                                    <div class="current-order-code">
                                        @{{ gelatoCurrentOrder.id }}. #@{{ gelatoCurrentOrder.code }}
                                    </div>
                                    <table class="shipping-info">
                                        <tr>
                                            <td><strong>Fullname:</strong> </td>
                                            <td>@{{ gelatoCurrentOrder.customer.full_name }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Email:</strong> </td>
                                            <td>
                                                <div class="shipping-info-mail">
                                                    @{{ gelatoCurrentOrder.customer.email }}
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>Phone:</strong> </td>
                                            <td>@{{ gelatoCurrentOrder.customer.phone }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Country:</strong> </td>
                                            <td>
                                                @{{ gelatoCurrentOrder.country.nicename }}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>Region:</strong> </td>
                                            <td>
                                                <input id="gelato_inputRegion" class="form-control"
                                                    ng-model="gelatoCurrentOrder.state_name" type="text"
                                                    placeholder="Region / Province">
                                                {{-- <span ng-if="gelatoCurrentOrder.state_name">@{{ gelatoCurrentOrder.state_name }}</span>
                                                <span ng-if="gelatoCurrentOrder.province.name">@{{ gelatoCurrentOrder.province.name }}</span> --}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>City:</strong> </td>
                                            <td>
                                                <input id="gelato_inputCity" class="form-control"
                                                    ng-model="gelatoCurrentOrder.city_name" type="text"
                                                    placeholder="City">
                                                {{-- <span ng-if="gelatoCurrentOrder.city_name">@{{ gelatoCurrentOrder.city_name }}</span>
                                                <span ng-if="gelatoCurrentOrder.city.name">@{{ pgelatoCurrentOrder.city.name }}</span> --}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>Address:</strong> </td>
                                            <td>@{{ gelatoCurrentOrder.delivery_address }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Address2:</strong> </td>
                                            <td>@{{ gelatoCurrentOrder.optional_address }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Zipcode:</strong> </td>
                                            <td>@{{ gelatoCurrentOrder.zip_code }}</td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <strong>Created at:</strong>
                                            </td>
                                            <td>
                                                @{{ summarizeTime(gelatoCurrentOrder.created_at) }}
                                                @{{ toVietnameseDate(gelatoCurrentOrder.created_at, true) }} (GMT+7)
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <strong>Shipping method:</strong>
                                            </td>
                                            <td>
                                                <select class="select chosse-input"
                                                ng-model="gelatoCurrentOrder.shipping_type">
                                                    <option value="standard">Standard</option>
                                                    <option value="express">Express</option>
                                                </select>
                                            </td>
                                        </tr>
                                    </table>                                   
                                    @include('print-suppliers::suppliers.base.suggestion-printing')
                                    {{-- <strong>@{{ gelatoCurrentOrder.shipping_type }}</strong> --}}
                                    <div id="gelato_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="display-configure fulfillment-item-id">
                                                <span>Item Id:</span>
                                                <strong>@{{ item.id }}</strong>
                                            </div>
                                            <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="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>
                                            </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">
                                    Gelato Catalog
                                    <img ng-if='gelatoState.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"
                                        ng-if='!item.printify_state.loading' ng-click="gelato_copyProfileData(item)"
                                        style="margin-left: 5px;">
                                        <i class="fa fa-copy"></i>
                                    </button>
                                    <button title="Paste profile" data-toggle="tooltip" class="btn btn-xs"
                                        ng-if='!item.printify_state.loading' ng-click="gelato_pasteProfileData(item)">
                                        <i class="fa fa-clipboard"></i>
                                    </button>
                                </div>

                                <div ng-if="!gelatoState.loading" class="row gelato-data"
                                    style="margin-bottom: 10px; position: relative">

                                    <div class="col-md-12 gelato-chosen">
                                        <select chosen search_contains="true" ng-change="chooseCatalog(item)"
                                            ng-options="catalog.title for catalog in gelatoFilteredCatalogs"
                                            ng-model="item.gelatoData.catalog" class="form-control chosse-input"
                                            style="display: inline-block;">
                                            <option value="">-- Choose filter --</option>
                                        </select>
                                    </div>

                                </div>
                                <div class="fulfillment-header" ng-if="item.gelatoData.catalog.catalogUid">
                                    <span>
                                        Product Filters
                                    </span>
                                    <img ng-if="item.gelatoData.states.loadingFilters" class="small-img-loading" src="@asset('print-suppliers/images/loading-1.gif')">
                                </div>
                                <div class="gelatoData grid-3col" ng-if="item.gelatoData.catalog.catalogUid">
                                    <div class="gelatoData-item gelato-chosen"
                                        ng-repeat="filter in item.gelatoData.filters"
                                        ng-if="filter.values.length > 1">
                                        <label style="font-weight: normal">@{{ filter.productAttributeUid }}</label>
                                        <select chosen search_contains="true" search_contains="true"
                                            ng-change="changeGelatoData(item)"
                                            ng-model="item.gelatoData.filterChoosed[filter.productAttributeUid]"
                                            class="form-control chosse-input" style="display: inline-block;">
                                            <option value="">-- Choose filter --</option>
                                            <option ng-repeat="option in filter.values"
                                                value="@{{ option.productAttributeValueUid }}">
                                                @{{ option.title }}
                                            </option>
                                        </select>
                                    </div>
                                </div>

                                <div ng-if="item.gelatoData.filterChoosed" class="fulfillment-header">
                                    <span>Gelato products</span>
                                    <img ng-if="item.gelatoData.states.loadingProducts" class="small-img-loading"  src="@asset('print-suppliers/images/loading-1.gif')">
                                </div>

                                <div class="row">
                                    <div class="col col-md-12">
                                        <div ng-if="item.gelatoData.products && !item.gelatoData.states.loadingProducts"
                                            class="panel panel-default"
                                            style="max-height: 250px; overflow-y: auto; margin-bottom: 0">
                                            <div class="list-group gelato-list-products">
                                                <a ng-click="chooseProduct(product, item)"
                                                    ng-class="{'active': product.isActive}"
                                                    ng-repeat="product in item.gelatoData.products"
                                                    class="list-group-item" style="cursor: pointer">
                                                    <div style="display: flex">
                                                        <div
                                                            style="padding: 3px 8px 3px 0; border-right: 1px solid #f9f9f9;">
                                                            <strong
                                                                style="margin-bottom: 8px; display: block">@{{ gelato_getDisplayNameProduct(product, item) }}</strong>
                                                            <span ng-if="product.attributes['GarmentSize']">
                                                                <strong>Size: </strong> @{{ gelato_getAttribute(product, 'GarmentSize', item).title }}
                                                            </span>
                                                            <span ng-if="product.attributes['GarmentColor']">
                                                                <strong>Color: </strong> @{{ gelato_getAttribute(product, 'GarmentColor', item).title }}
                                                                <span class="preview-color"
                                                                    style="height: 20px; width: 20px; background-color: @{{ product.dimensions['ColorHexCode'].value }}"></span>
                                                            </span>
                                                        </div>
                                                        <div style="min-width: 300px; padding-left: 8px">
                                                            <table class="table-dimensions">
                                                                <tr ng-repeat="(key, dimension) in product.dimensions">
                                                                    <td><strong>@{{ key }}</strong></td>
                                                                    <td>
                                                                        @{{ dimension.value }}
                                                                        (@{{ dimension.measureUnit }})
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="text-center" style="padding: 12px;"
                                                ng-if="!item.gelatoData.products.length">Products not found!</div>
                                        </div>
                                    </div>
                                </div>

                                <span ng-if="item.gelatoData.productUid" class="text-muted"
                                    style="margin-bottom: 7px; margin-top: 10px; display: block;">
                                    Print files
                                    <img ng-if="gelatoState.loadingProductInfo" class="small-img-loading"
                                        style="margin-left: 5px" src="@asset('print-suppliers/images/loading-1.gif')" alt="Loading fig">
                                </span>

                                <div class="gelato-upload-design">
                                    <div class="gelato-upload-design-col"  ng-repeat="(index, designFile) in item.gelatoData.files">
                                        <div>
                                            <select class="select" ng-model="designFile.print_type">
                                                <option ng-selected="area == designFile.print_type"
                                                    ng-repeat="area in spreads" value="@{{ area }}">
                                                    @{{ capitalizeFirstLetter(area) }}</option>
                                            </select>
                                        </div>

                                        <div class="design-image design-image-@{{ item.id }}" style="background-color: @{{ item.gelatoData.ColorHexCode }}">
                                            <div class="gelato-action-gr" ng-if="item.gelatoData.files.length > 1 || designFile.url">
                                                <button ng-if="item.gelatoData.files.length > 1" class="btn gelato-btn-item gelato-close-design" ng-click="removeFile(item, index)">
                                                    <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>
                                                <button class="btn gelato-btn-item gelato-brush-design" ng-if="designFile.url" ng-click="gelato_openEditDesignModal(designFile, 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>
                                            </div>

                                            <button class="click-up-design" ng-if="!designFile.url" ngf-select="gelato_uploadImages($files, item, designFile)">
                                                <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="designFile.url"
                                                ngf-select="gelato_uploadImages($files, item, designFile)"
                                                ng-src="@{{ getImageCdn(designFile.url, 540, 540) }}" alt="file design"
                                                src="/images/blank.gif" />

                                            <a ng-if="designFile.frame_url" href="@{{ designFile.frame_url }}">
                                                <img class="gelato_frame-design" ng-src="@{{ designFile.frame_url }}"
                                                    width="80px" alt="framed image" src="/images/blank.gif">
                                            </a>
                                        </div>

                                        <div class="form-group paste-design-url">
                                            <input ng-model="designFile.url" onClick="this.select();"
                                                ng-change="gelato_changeDesignUrl(item)" type="text"
                                                placeholder="Paste Design Url Here" class="form-control">
                                            <a ng-if="!item.gelatoData.states.uploading"
                                                ngf-select="gelato_uploadImages($files, item, designFile)"
                                                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.gelatoData.states.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"  ng-if="item.gelatoData.patternDesigns.length > 0">
                                            <div class="available-designs-area-item"
                                                ng-class="{'selected-design': design.selected, 'uncomfirm': !design.is_design_comfirm}"
                                                ng-repeat="design in item.gelatoData.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="gelato_chooseDesign(design, designFile, item)" width="80" height="80" ng-src="@{{ getImageCdn(design.url, 360, 360) }}" alt="available design" src="/images/blank.gif">
                                                <span class="text-danger">@{{design.resolution}}</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="gelato-upload-design-col upload-design-gr">
                                        <button class="btn gelato-upload-design-btn" ng-click="addNewFile(item)">
                                            <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="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1" /> <path d="M9 15l3 -3l3 3" /> <path d="M12 12l0 9" /> </svg>
                                            <span>Add new File</span>
                                        </button>
                                    </div>

                                </div>

                            </td>
                        </tr>
                    </tbody>
                </table>
                {{-- <div class="loader size">Loading...</div> --}}
            </div>
            <div class="modal-footer fulfill-modal-footer">
                <button id="btnPostGelatoOrder" ng-click="orderGelato()" 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>
