<div class="modal fade fulfill-modal" id="modalFulfillProLuxury" 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://bops.xiaosache.com/logo.png"> --}}
                    <span style="display: inline-block; vertical-align: text-top">Pro Luxury Fulfillment</span>
                </h4>
            </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">Pro Luxury Order Profile</th>
                    </thead>
                    <tbody class="fulfillment-tbody">
                        <tr class="fulfillment-row" ng-repeat="item in proLuxuryCurrentOrder.items track by item.id">
                            <td class="fulfillment-col" ng-if="$index == 0" rowspan="@{{ proLuxuryCurrentOrder.items.length }}">
                                <div class="fulfillment-col-item-label">
                                    <div class="current-order-code">
                                        @{{ proLuxuryCurrentOrder.id }}. #@{{ proLuxuryCurrentOrder.code }}
                                    </div>
                                    <table class="shipping-info">
                                        <tr>
                                            <td><strong>Fullname:</strong> </td>
                                            <td>@{{ proLuxuryCurrentOrder.customer.full_name }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Email:</strong> </td>
                                            <td>
                                                <div class="shipping-info-mail">
                                                    @{{ proLuxuryCurrentOrder.customer.email }}
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>Phone:</strong> </td>
                                            <td>@{{ proLuxuryCurrentOrder.customer.phone }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Country:</strong> </td>
                                            <td>
                                                @{{ proLuxuryCurrentOrder.country.nicename }}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>Region:</strong> </td>
                                            <td>
                                                <input id="gelato_inputRegion" class="form-control"
                                                    ng-model="proLuxuryCurrentOrder.state_name" type="text"
                                                    placeholder="Region / Province">
                                                {{-- <span ng-if="proLuxuryCurrentOrder.state_name">@{{ proLuxuryCurrentOrder.state_name }}</span>
                                                <span ng-if="proLuxuryCurrentOrder.province.name">@{{ proLuxuryCurrentOrder.province.name }}</span> --}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>City:</strong> </td>
                                            <td>
                                                <input id="gelato_inputCity" class="form-control"
                                                    ng-model="proLuxuryCurrentOrder.city_name" type="text"
                                                    placeholder="City">
                                                {{-- <span ng-if="proLuxuryCurrentOrder.city_name">@{{ proLuxuryCurrentOrder.city_name }}</span>
                                                <span ng-if="proLuxuryCurrentOrder.city.name">@{{ pProLuxuryCurrentOrder.city.name }}</span> --}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>Address:</strong> </td>
                                            <td>@{{ proLuxuryCurrentOrder.delivery_address }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Address2:</strong> </td>
                                            <td>@{{ proLuxuryCurrentOrder.optional_address }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Zipcode:</strong> </td>
                                            <td>@{{ proLuxuryCurrentOrder.zip_code }}</td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <strong>Created at:</strong>
                                            </td>
                                            <td>
                                                @{{ summarizeTime(proLuxuryCurrentOrder.created_at) }}
                                                @{{ toVietnameseDate(proLuxuryCurrentOrder.created_at, true) }} (GMT+7)
                                            </td>
                                        </tr>
                                    </table>
                                    @include('print-suppliers::suppliers.base.suggestion-printing')
                                    {{-- <strong>@{{ proLuxuryCurrentOrder.shipping_type }}</strong> --}}
                                    {{-- <div class="form-group" style="margin-top: 15px">
                                        <span>Shipping method:</span>
                                        <select class="select chosse-input" ng-model="proLuxuryCurrentOrder.shipping_type">
                                            <option value="standard">Standard</option>
                                            <option value="express">Express</option>
                                        </select>
                                    </div> --}}
                                    <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="#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>
                                </div>
                            </td>
                            <td class="fulfillment-col">
                                @include('print-suppliers::suppliers/pro-luxury/components/pro-luxury-data')
                            </td>
                        </tr>
                    </tbody>
                </table>
                {{-- <div class="loader size">Loading...</div> --}}
            </div>
            <div class="modal-footer fulfill-modal-footer">
                <button id="btnPostProLuxuryOrder" ng-click="orderProLuxury()" 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>
