<div class="modal fade fulfill-modal" id="modalFulfillBondre" 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://assets.printerval.com/2023/04/07/1638779322197-cebf9a39b6b2050b020abff8f9408a73.jpg"> --}}
                    <svg height="25px" style="vertical-align: middle;" viewBox="0 0 120 120" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <g id="SVGRepo_bgCarrier" stroke-width="0" />
                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
                        <g id="SVGRepo_iconCarrier">
                            <rect width="120" height="120" fill="#EFF1F3" />
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M33.2503 38.4816C33.2603 37.0472 34.4199 35.8864 35.8543 35.875H83.1463C84.5848 35.875 85.7503 37.0431 85.7503 38.4816V80.5184C85.7403 81.9528 84.5807 83.1136 83.1463 83.125H35.8543C34.4158 83.1236 33.2503 81.957 33.2503 80.5184V38.4816ZM80.5006 41.1251H38.5006V77.8751L62.8921 53.4783C63.9172 52.4536 65.5788 52.4536 66.6039 53.4783L80.5006 67.4013V41.1251ZM43.75 51.6249C43.75 54.5244 46.1005 56.8749 49 56.8749C51.8995 56.8749 54.25 54.5244 54.25 51.6249C54.25 48.7254 51.8995 46.3749 49 46.3749C46.1005 46.3749 43.75 48.7254 43.75 51.6249Z"
                                fill="#687787" />
                        </g>
                    </svg>
                    <span style="display: inline-block; vertical-align: text-top">Bondre 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">Bondre Order Profile</th>
                    </thead>
                    <tbody class="fulfillment-tbody">
                        <tr class="fulfillment-row" ng-repeat="item in bondreCurrentOrder.items track by item.id">
                            <td class="fulfillment-col" ng-if="$index == 0" rowspan="@{{ bondreCurrentOrder.items.length }}">
                                <div class="fulfillment-col-item-label">
                                    <div class="current-order-code">
                                        @{{ bondreCurrentOrder.id }}. #@{{ bondreCurrentOrder.code }}
                                    </div>
                                    <table class="shipping-info">
                                        <tr>
                                            <td><strong>Fullname:</strong> </td>
                                            <td>@{{ bondreCurrentOrder.customer.full_name }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Email:</strong> </td>
                                            <td>@{{ bondreCurrentOrder.customer.email }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Phone:</strong> </td>
                                            <td>
                                                <div class="shipping-info-mail">
                                                    @{{ bondreCurrentOrder.customer.phone }}
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>Country:</strong> </td>
                                            <td>
                                                @{{ bondreCurrentOrder.country.nicename }}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>Region:</strong> </td>
                                            <td>
                                                <input id="gelato_inputRegion" class="form-control"
                                                    ng-model="bondreCurrentOrder.state_name" type="text"
                                                    placeholder="Region / Province">
                                                {{-- <span ng-if="bondreCurrentOrder.state_name">@{{ bondreCurrentOrder.state_name }}</span>
                                                <span ng-if="bondreCurrentOrder.province.name">@{{ bondreCurrentOrder.province.name }}</span> --}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>City:</strong> </td>
                                            <td>
                                                <input id="gelato_inputCity" class="form-control"
                                                    ng-model="bondreCurrentOrder.city_name" type="text"
                                                    placeholder="City">
                                                {{-- <span ng-if="bondreCurrentOrder.city_name">@{{ bondreCurrentOrder.city_name }}</span>
                                                <span ng-if="bondreCurrentOrder.city.name">@{{ pbondreCurrentOrder.city.name }}</span> --}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>Address:</strong> </td>
                                            <td>@{{ bondreCurrentOrder.delivery_address }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Address2:</strong> </td>
                                            <td>@{{ bondreCurrentOrder.optional_address }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Zipcode:</strong> </td>
                                            <td>@{{ bondreCurrentOrder.zip_code }}</td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <strong>Created at:</strong>
                                            </td>
                                            <td>
                                                @{{ summarizeTime(bondreCurrentOrder.created_at) }}
                                                @{{ toVietnameseDate(bondreCurrentOrder.created_at, true) }} (GMT+7)
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <strong>Shipping method:</strong>
                                            </td>
                                            <td>
                                                <select class="select chosse-input"
                                                    ng-model="bondreCurrentOrder.shipping_type">
                                                    <option value="standard">Standard</option>
                                                    <option value="express">Express</option>
                                                </select>
                                            </td>
                                        </tr>
                                    </table>
                                    @include('print-suppliers::suppliers.base.suggestion-printing')
                                    {{-- <div>@{{ bondreCurrentOrder.shipping_type }}</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> <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> <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"></path> </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">
                                @include('print-suppliers::suppliers/bondre/components/bondre-data')
                            </td>
                        </tr>
                    </tbody>
                </table>
                {{-- <div class="loader size">Loading...</div> --}}
            </div>
            <div class="modal-footer fulfill-modal-footer">
                <button id="btnPostPrintLogisticOrder" ng-click="orderToBondre()" 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>
