@php use App\Libs\Users; @endphp
@extends('main')
@section('body')
    <form id="form_upload_files" name="form_upload_files" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="form-group">
            <input type="file" id="select_upload_file" name="select_upload_file" class="d-none">
            <input type="hidden" id="_trigger_id" name="_trigger_id" />
        </div>
    </form>
    <div class="container my-0 my-md-5">
        <section id="section_status_main">
            <div class="row">
                <div class="col-12">
                    <h3 class="mb-1 fw-bold">{!! __("universal.page.order_mgmt_status.title") !!}</h3>
                    <p>{!!__("universal.page.order_mgmt_status.text") !!}</p>
                </div>
            </div>
            <div class="row mb-4">
                <div class="col-12 col-md-7">
                    <div class="border-bottom pb-1 mb-2">
                        <h5 class="mb-1"><i class="fa-solid fa-folder-open icon-design-headline me-2"></i>{!! __("universal.page.order_mgmt_status_order_data.title") !!}</h5>
                    </div>
                    <div class="row">
                        @if(!empty($order->orderCanceled))
                            <div class="row">
                                <div class="col-12">
                                    <h5><span class="badge text-bg-danger w-100">{{__("universal.order_canceled")}}</span></h5>
                                </div>
                            </div>
                        @endif
                        <div class="col-auto">
                            @component("components.text.text_inline", ["label" => __("universal.order_no"), "value" => $order->no ?? ""])
                            @endcomponent
                        </div>
                        <div class="col-auto">
                            @component("components.text.text_inline", ["label" => __("universal.order_date"), "value" => $order->creationDate ?? ""])
                            @endcomponent
                        </div>
                        @if(!empty($order->finishingDate))
                            <div class="col-auto">
                                @component("components.text.text_inline", ["label" => __("universal.finishing_date"), "value" => $order->finishingDate])
                                @endcomponent
                            </div>
                        @endif
                        @if(!empty($order->yourReference))
                            <div class="col-auto">
                                @component("components.text.text_inline", ["label" => __("universal.your_reference"), "value" => $order->yourReference])
                                @endcomponent
                            </div>
                        @endif
                        @if(!empty($order->serviceReference))
                            <div class="col-auto">
                                @component("components.text.text_inline", ["label" => __("universal.service_reference"), "value" => $order->serviceReference])
                                @endcomponent
                            </div>
                        @endif
                        @if(!empty($order->warranty))
                            <div class="col-auto">
                                @component("components.text.text_inline", ["label" => __("universal.warranty"), "value" => ($order->warranty == "yes" ? __("universal.yes") : __("universal.no")), "classValue" => ($order->warranty == "yes" ? "fw-bold text-success" : "fw-bold text-danger")])
                                @endcomponent
                            </div>
                        @endif
                    </div>
                    @if(!empty($order->warranty) && $order->warranty != "yes")
                        <div class="row mt-1">
                            <div class="col-12">
                                @component("components.alerts.alert", ["class" => "alert-warning alert-permanent", "headline" => __("universal.info.provide_proof_of_warranty.title"), "text" => __("universal.info.provide_proof_of_warranty.text")])
                                @endcomponent
                            </div>
                        </div>
                    @endif
                </div>
                <div class="col-12 col-md-5 mt-5 mt-md-0">
                    @if(!empty($currentProcessingStatus))
                        <div class="border-bottom pb-1 mb-2">
                            <h5 class="mb-1"><i class="fa-solid fa-check-circle icon-design-headline me-2"></i>{!! __("universal.page.order_mgmt_status_current_status.title") !!}</h5>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <p class="p-0 m-0 text-secondary fw-bold">
                                    {{$currentProcessingStatus["date"] ?? ""}} {{$currentProcessingStatus["time"] ?? ""}} /
                                    {!! $currentProcessingStatus["headline"] ?? "" !!}
                                </p>
                                <p class="p-0 m-0">
                                    {!! $currentProcessingStatus["description"] ?? "" !!}
                                </p>
                                {{-- Tracking information --}}
                                @if(in_array($currentProcessingStatus["code"], [165, 166, 167, 171, 172, 173]) && !empty($returnShipment))
                                    @include("order_management.status.outbound_tracking")
                                @endif
                                {{-- Order cancellation --}}
                                @if($order->cancellationAllowed === true)
                                    <div class="row mt-3">
                                        <div class="col-12 text-end">
                                            @component("components.buttons.button", [
                                                 "id" => "btn_open_modal_cancel_order",
                                                 "title" => __("universal.button.cancel_order"),
                                                 "buttonClass" => "btn-danger",
                                                 "iconClass" => "fa-solid fa-ban"
                                             ])
                                            @endcomponent
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endif
                </div>
            </div>
            @if(!empty($requestingShippingLabelAllowed))
                <div class="row mb-5">
                    <div class="col-12">
                        <div class="border-bottom pb-1 mb-2">
                            <h5 class="mb-1"><i class="fa-solid fa-truck icon-design-headline me-2"></i>{!! __("universal.page.order_mgmt_request_shipping_label.title") !!}</h5>
                        </div>
                        <p>{!! __("universal.page.order_mgmt_request_shipping_label.text") !!}</p>
                        <div id="shipping_label_request_result">
                            @component("components.buttons.button", [
                                 "id" => "btn_request_shipping_label",
                                 "title" => __("universal.button.request_shipping_label"),
                                 "buttonClass" => "btn-primary",
                                 "iconClass" => "fa-solid fa-envelope",
                                 "value" => $order->no ?? ""
                             ])
                            @endcomponent
                        </div>
                    </div>
                </div>
            @endif
            @if(!empty($serviceOptions))
                <div class="row mb-5">
                    <div class="col-12">
                        <div class="border-bottom pb-1 mb-2">
                            <h5 class="mb-1"><i class="fa-solid fa-file-lines text-danger me-2"></i>{!! __("universal.page.order_mgmt_status_quotation.title") !!}</h5>
                        </div>
                        <p>
                            {!! __("universal.page.order_mgmt_status_quotation.text") !!}
                        </p>
                        <section id="section_fee_based_services">
                            <table class="table table-striped">
                                @foreach($serviceOptions->feeBasedServices AS $feeBasedService)
                                    <tr>
                                        <td>
                                            @component("components.radios.radio", [
                                                "id" => "fee_based_services_".$loop->index,
                                                "name" => "fee_based_services",
                                                "value" => $feeBasedService->code,
                                                "label" => $feeBasedService->description ?? ""
                                            ])
                                            @endcomponent
                                        </td>
                                        <td style="text-align: right;">
                                            {{$feeBasedService->totalAmountGross ?? ""}} {{$feeBasedService->currency ?? ""}}
                                        </td>
                                    </tr>
                                @endforeach
                            </table>
                        </section>
                        <section id="section_total_amount" class="mt-3">
                            <table class="table">
                                <tr>
                                    <th>
                                        {{__("universal.shipping_costs")}}
                                    </th>
                                    <td style="text-align: right;"><div id="calc_shipping_costs">0.00 {{$feeBasedService->currency ?? ""}}</div></td>
                                </tr>
                                <tr>
                                    <th>
                                        {{__("universal.total_amount")}}
                                    </th>
                                    <td style="text-align: right; font-weight: bold;"><div id="calc_total_amount">0.00 {{$feeBasedService->currency ?? ""}}</div></td>
                                </tr>
                            </table>
                        </section>
                        <div class="row text-end">
                            <div class="col-12">
                                @component("components.buttons.button", [
                                     "id" => "btn_send_decision_on_quotation",
                                     "title" => __("universal.button.confirm_selection"),
                                     "buttonClass" => "btn-success",
                                     "style" => "min-width: 8em;"
                                 ])
                                @endcomponent
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            <div class="row mb-5">
                <div class="col-12">
                    <div class="border-bottom pb-1 mb-2">
                        <h5 class="mb-1"><i class="fa-solid fa-mobile icon-design-headline me-2"></i>{!! __("universal.page.order_mgmt_status_product.title") !!}</h5>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <ul class="nav nav-tabs mt-2 mb-3" id="pills-tab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="pills-product-data-tab" data-bs-toggle="pill" data-bs-target="#pills-product-data" type="button" role="tab" aria-controls="pills-product-data" aria-selected="true">{{__("universal.link.product_data")}}</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-error-description-tab" data-bs-toggle="pill" data-bs-target="#pills-error-description" type="button" role="tab" aria-controls="pills-error-description" aria-selected="false">{{__("universal.link.error_description")}}</button>
                                </li>
                            </ul>
                            <div class="tab-content" id="pills-tabContent">
                                <div class="tab-pane fade show active" id="pills-product-data" role="tabpanel" aria-labelledby="pills-product-data-tab">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="row">
                                                <div class="col-auto">
                                                    @component("components.text.text_inline", ["label" => __("universal.manufacturer"), "value" => (!empty($order->serviceItemLines[0]->manufacturerName) ? $order->serviceItemLines[0]->manufacturerName : __("universal.unknown"))]))
                                                    @endcomponent
                                                </div>
                                                <div class="col-auto">
                                                    @component("components.text.text_inline", ["label" => __("universal.item_description"), "value" => $order->serviceItemLines[0]->itemDescription])
                                                    @endcomponent
                                                </div>
                                                @if(!empty($order->serviceItemLines[0]->imeiNo))
                                                    <div class="col-auto">
                                                        @component("components.text.text_inline", ["label" => __("universal.imei_no"), "value" => $order->serviceItemLines[0]->imeiNo])
                                                        @endcomponent
                                                    </div>
                                                @endif
                                                @if(!empty($order->serviceItemLines[0]->swapImeiNo))
                                                    <div class="col-auto">
                                                        @component("components.text.text_inline", ["label" => __("universal.swap_imei_no"), "value" => $order->serviceItemLines[0]->swapImeiNo])
                                                        @endcomponent
                                                    </div>
                                                @endif
                                                @if(!empty($order->serviceItemLines[0]->newImeiNo))
                                                    <div class="col-auto">
                                                        @component("components.text.text_inline", ["label" => __("universal.new_imei_no"), "value" => $order->serviceItemLines[0]->newImeiNo])
                                                        @endcomponent
                                                    </div>
                                                @endif
                                                @if(!empty($order->serviceItemLines[0]->serialNo))
                                                    <div class="col-auto">
                                                        @component("components.text.text_inline", ["label" => __("universal.serial_no"), "value" => $order->serviceItemLines[0]->serialNo])
                                                        @endcomponent
                                                    </div>
                                                @endif
                                                @if(!empty($order->serviceItemLines[0]->swapSerialNo))
                                                    <div class="col-auto">
                                                        @component("components.text.text_inline", ["label" => __("universal.swap_serial_no"), "value" => $order->serviceItemLines[0]->swapSerialNo])
                                                        @endcomponent
                                                    </div>
                                                @endif
                                                @if(!empty($order->serviceItemLines[0]->newSerialNo))
                                                    <div class="col-auto">
                                                        @component("components.text.text_inline", ["label" => __("universal.new_serial_no"), "value" => $order->serviceItemLines[0]->newSerialNo])
                                                        @endcomponent
                                                    </div>
                                                @endif
                                            </div>
                                            @if(!empty($order->serviceItemLines->accessoryString))
                                                <div class="col-auto">
                                                    @component("components.text.text_inline", ["label" => __("universal.accessories"), "value" => $order->serviceItemLines->accessoryString])
                                                    @endcomponent
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-error-description" role="tabpanel" aria-labelledby="pills-error-description-tab">
                                    <div class="row">
                                        <div class="col-12 col-md-7 mt-0">
                                            <p class="fw-bold m-0 p-0">{{__("universal.type_and_scope_of_problem")}}</p>
                                            {{$order->errorDescription->freeText->string ?? ""}}
                                        </div>
                                        <div class="col-12 col-md-5 mt-3 mt-md-0">
                                            @if(!empty($order->errorDescription->codes[0]))
                                                <p class="fw-bold m-0 p-0">{{__("universal.your_selection_of_errors")}}</p>
                                                <ul>
                                                    @foreach($order->errorDescription->codes AS $error)
                                                        <li>
                                                            {{$error->description ?? ""}}
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @if(Users::AccessGranted(session("user.grantedPermissions"), [10, 11, 12, 13] ))
                <div class="row mb-5">
                    <div class="col-12">
                        <div class="border-bottom pb-1 mb-2">
                            <h5 class="mb-1"><i class="fa-solid fa-address-book icon-design-headline me-2"></i>{!! __("universal.page.order_mgmt_status_address_data.title") !!}</h5>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <ul class="nav nav-tabs mt-2 mb-3" id="pills-tab" role="tablist">
                                    @if(Users::AccessGranted(session("user.grantedPermissions"), 10 ))
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link active" id="pills-send-in-address-tab" data-bs-toggle="pill" data-bs-target="#pills-send-in-address" type="button" role="tab" aria-controls="pills-send-in-address" aria-selected="true">{{__("universal.link.send_in_address")}}</button>
                                        </li>
                                        @php $active=true;@endphp
                                    @endif
                                    @if(Users::AccessGranted(session("user.grantedPermissions"), 11 ))
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link {{empty($active) ? "active" : ""}}" id="pills-shipping-address-tab" data-bs-toggle="pill" data-bs-target="#pills-shipping-address" type="button" role="tab" aria-controls="pills-shipping-address" aria-selected="false">{{__("universal.link.shipping_address")}}</button>
                                        </li>
                                        @php $active=true;@endphp
                                    @endif
                                    @if(Users::AccessGranted(session("user.grantedPermissions"), 12 ))
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link {{empty($active) ? "active" : ""}}" id="pills-billing-address-tab" data-bs-toggle="pill" data-bs-target="#pills-billing-address" type="button" role="tab" aria-controls="pills-billing-address" aria-selected="false">{{__("universal.link.billing_address")}}</button>
                                        </li>
                                        @php $active=true;@endphp
                                    @endif
                                    @if(Users::AccessGranted(session("user.grantedPermissions"), 13 ) && !empty($order->endCustomerAddress->postalCode))
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link {{empty($active) ? "active" : ""}}" id="pills-end-customer-address-tab" data-bs-toggle="pill" data-bs-target="#pills-end-customer-address" type="button" role="tab" aria-controls="pills-end-customer-address" aria-selected="false">{{__("universal.link.end_customer_address")}}</button>
                                        </li>
                                        @php $active=true;@endphp
                                    @endif
                                </ul>
                                <div class="tab-content" id="pills-tabContent">
                                    @if(Users::AccessGranted(session("user.grantedPermissions"), 10 ))
                                        <div class="tab-pane fade show active" id="pills-send-in-address" role="tabpanel" aria-labelledby="pills-send-in-address-tab">
                                            <ul class="ps-3">
                                                @if(!empty($order->sendInAddress->name_1))
                                                    <li class="list-group-item">{{$order->sendInAddress->name_1}}</li>
                                                @endif
                                                @if(!empty($order->sendInAddress->name_2))
                                                    <li class="list-group-item">{{$order->sendInAddress->name_2}}</li>
                                                @endif
                                                @if(!empty($order->sendInAddress->address_1))
                                                    <li class="list-group-item">{{$order->sendInAddress->address_1}}</li>
                                                @endif
                                                @if(!empty($order->sendInAddress->address_2))
                                                    <li class="list-group-item">{{$order->sendInAddress->address_2}}</li>
                                                @endif
                                                @if(!empty($order->sendInAddress->postalCode) && !empty($order->sendInAddress->city))
                                                    <li class="list-group-item">{{$order->sendInAddress->postalCode}} {{$order->sendInAddress->city}}</li>
                                                @endif
                                                @if(!empty($order->sendInAddress->country))
                                                    <li class="list-group-item">{{$order->sendInAddress->country}}</li>
                                                @endif
                                            </ul>
                                            <ul class="ps-3">
                                                @if(!empty($order->sendInAddress->phoneNo))
                                                    <li class="list-group-item"><i class="fa-solid fa-phone"></i> {{$order->sendInAddress->phoneNo}}</li>
                                                @endif
                                                @if(!empty($order->sendInAddress->eMail))
                                                    <li class="list-group-item"><i class="fa-solid fa-envelope"></i> {{$order->sendInAddress->eMail}}</li>
                                                @endif
                                            </ul>
                                        </div>
                                    @endif
                                    @if(Users::AccessGranted(session("user.grantedPermissions"), 11 ))
                                        <div class="tab-pane fade" id="pills-shipping-address" role="tabpanel" aria-labelledby="pills-shipping-address-tab">
                                            <ul class="ps-3">
                                                @if(!empty($order->shippingAddress->name_1))
                                                    <li class="list-group-item">{{$order->shippingAddress->name_1}}</li>
                                                @endif
                                                @if(!empty($order->shippingAddress->name_2))
                                                    <li class="list-group-item">{{$order->shippingAddress->name_2}}</li>
                                                @endif
                                                @if(!empty($order->shippingAddress->address_1))
                                                    <li class="list-group-item">{{$order->shippingAddress->address_1}}</li>
                                                @endif
                                                @if(!empty($order->shippingAddress->address_2))
                                                    <li class="list-group-item">{{$order->shippingAddress->address_2}}</li>
                                                @endif
                                                @if(!empty($order->shippingAddress->postalCode) && !empty($order->shippingAddress->city))
                                                    <li class="list-group-item">{{$order->shippingAddress->postalCode}} {{$order->shippingAddress->city}}</li>
                                                @endif
                                                @if(!empty($order->shippingAddress->country))
                                                    <li class="list-group-item">{{$order->shippingAddress->country}}</li>
                                                @endif
                                            </ul>
                                            <ul class="ps-3">
                                                @if(!empty($order->shippingAddress->phoneNo))
                                                    <li class="list-group-item"><i class="fa-solid fa-phone"></i> {{$order->shippingAddress->phoneNo}}</li>
                                                @endif
                                                @if(!empty($order->shippingAddress->eMail))
                                                    <li class="list-group-item"><i class="fa-solid fa-envelope"></i> {{$order->shippingAddress->eMail}}</li>
                                                @endif
                                            </ul>
                                            @if(!empty($addressEditingAllowed->shippingAddress))
                                                <div class="row ps-3 mt-3">
                                                    <div class="col-12">
                                                        @component("components.buttons.button", [
                                                             "id" => "btn_open_modal_edit_shipping_address",
                                                             "value" => "shipping",
                                                             "title" => __("universal.button.edit_address"),
                                                             "buttonClass" => "btn-edit-address btn-primary",
                                                             "iconClass" => "fa-solid fa-pen-to-square"
                                                         ])
                                                        @endcomponent
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    @endif
                                    @if(Users::AccessGranted(session("user.grantedPermissions"), 12 ))
                                        <div class="tab-pane fade" id="pills-billing-address" role="tabpanel" aria-labelledby="pills-billing-address-tab">
                                            <ul class="ps-3">
                                                @if(!empty($order->billingAddress->name_1))
                                                    <li class="list-group-item">{{$order->billingAddress->name_1}}</li>
                                                @endif
                                                @if(!empty($order->billingAddress->name_2))
                                                    <li class="list-group-item">{{$order->billingAddress->name_2}}</li>
                                                @endif
                                                @if(!empty($order->billingAddress->address_1))
                                                    <li class="list-group-item">{{$order->billingAddress->address_1}}</li>
                                                @endif
                                                @if(!empty($order->billingAddress->address_2))
                                                    <li class="list-group-item">{{$order->billingAddress->address_2}}</li>
                                                @endif
                                                @if(!empty($order->billingAddress->postalCode) && !empty($order->billingAddress->city))
                                                    <li class="list-group-item">{{$order->billingAddress->postalCode}} {{$order->billingAddress->city}}</li>
                                                @endif
                                                @if(!empty($order->billingAddress->country))
                                                    <li class="list-group-item">{{$order->billingAddress->country}}</li>
                                                @endif
                                            </ul>
                                            <ul class="ps-3">
                                                @if(!empty($order->billingAddress->phoneNo))
                                                    <li class="list-group-item"><i class="fa-solid fa-phone"></i> {{$order->billingAddress->phoneNo}}</li>
                                                @endif
                                                @if(!empty($order->billingAddress->eMail))
                                                    <li class="list-group-item"><i class="fa-solid fa-envelope"></i> {{$order->billingAddress->eMail}}</li>
                                                @endif
                                            </ul>
                                        </div>
                                    @endif
                                    @if(Users::AccessGranted(session("user.grantedPermissions"), 13 ) && !empty($order->endCustomerAddress->postalCode))
                                        <div class="tab-pane fade" id="pills-end-customer-address" role="tabpanel" aria-labelledby="pills-end-customer-address-tab">
                                            <ul class="ps-3">
                                                @if(!empty($order->endCustomerAddress->name_1))
                                                    <li class="list-group-item">{{$order->endCustomerAddress->name_1}}</li>
                                                @endif
                                                @if(!empty($order->endCustomerAddress->name_2))
                                                    <li class="list-group-item">{{$order->endCustomerAddress->name_2}}</li>
                                                @endif
                                                @if(!empty($order->endCustomerAddress->address_1))
                                                    <li class="list-group-item">{{$order->endCustomerAddress->address_1}}</li>
                                                @endif
                                                @if(!empty($order->endCustomerAddress->address_2))
                                                    <li class="list-group-item">{{$order->endCustomerAddress->address_2}}</li>
                                                @endif
                                                @if(!empty($order->endCustomerAddress->postalCode) && !empty($order->endCustomerAddress->city))
                                                    <li class="list-group-item">{{$order->endCustomerAddress->postalCode}} {{$order->endCustomerAddress->city}}</li>
                                                @endif
                                                @if(!empty($order->endCustomerAddress->country))
                                                    <li class="list-group-item">{{$order->endCustomerAddress->country}}</li>
                                                @endif
                                            </ul>
                                            <ul class="ps-3">
                                                @if(!empty($order->endCustomerAddress->phoneNo))
                                                    <li class="list-group-item"><i class="fa-solid fa-phone"></i> {{$order->endCustomerAddress->phoneNo}}</li>
                                                @endif
                                                @if(!empty($order->endCustomerAddress->eMail))
                                                    <li class="list-group-item"><i class="fa-solid fa-envelope"></i> {{$order->endCustomerAddress->eMail}}</li>
                                                @endif
                                            </ul>
                                            @if(!empty($addressEditingAllowed->endCustomerAddress))
                                                <div class="row ps-3 mt-3">
                                                    <div class="col-12">
                                                        @component("components.buttons.button", [
                                                             "id" => "btn_open_modal_edit_customer_address",
                                                             "value" => "end-customer",
                                                             "title" => __("universal.button.edit_address"),
                                                             "buttonClass" => "btn-edit-address btn-primary",
                                                             "iconClass" => "fa-solid fa-pen-to-square"
                                                         ])
                                                        @endcomponent
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            <div class="row mb-5">
                <div class="col-12">
                    <div class="border-bottom pb-1 mb-2">
                        <h5 class="mb-1"><i class="fa-solid fa-file-lines icon-design-headline me-2"></i>{!! __("universal.page.order_mgmt_status_documents.title") !!}</h5>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <ul class="nav nav-tabs mt-2 mb-3" id="pills-tab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="pills-documents-tab" data-bs-toggle="pill" data-bs-target="#pills-documents" type="button" role="tab" aria-controls="pills-documents" aria-selected="true">{{__("universal.link.order_related_documents")}}</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-images-tab" data-bs-toggle="pill" data-bs-target="#pills-images" type="button" role="tab" aria-controls="pills-images" aria-selected="false">{{__("universal.link.order_related_images")}}</button>
                                </li>
                                @if(!empty($uploadButtons))
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="pills-uploads-tab" data-bs-toggle="pill" data-bs-target="#pills-uploads" type="button" role="tab" aria-controls="pills-uploads" aria-selected="false">{{__("universal.link.uploads")}}</button>
                                    </li>
                                @endif
                            </ul>
                            <div class="tab-content" id="pills-tabContent">
                                <div class="tab-pane fade show active" id="pills-documents" role="tabpanel" aria-labelledby="pills-documents-tab">
                                    <div class="row ps-3">
                                        <div class="col-12 col-md-6 col-lg-5">
                                            @if(!empty($documents[0]) || !empty($onDemandDocuments))
                                                <p>
                                                    {{__("universal.overview_of_order_related_documents")}}
                                                </p>
                                                <table class="table table-sm table-striped">
                                                    <thead>
                                                    <tr>
                                                        <th>{{__("universal.name")}}</th>
                                                        <th>{{__("universal.provision_date")}}</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    @foreach($documents AS $document)
                                                        @if(!in_array($document->documentType, ["A", "B"]))
                                                            <tr>
                                                                <td>
                                                                    @component("components.links.link", [
                                                                        "id" => "lnk_document".$loop->index,
                                                                        "title" => $document->documentTypeDescription ?? "",
                                                                        "url" => "/documents/view/".$document->id,
                                                                        "linkClass" => "link-dark",
                                                                        "target" => "_blank"
                                                                    ])
                                                                    @endcomponent
                                                                </td>
                                                                <td>{{$document->creationDate ?? ""}}</td>
                                                            </tr>
                                                        @endif
                                                    @endforeach
                                                    @foreach($onDemandDocuments AS $document)
                                                        <tr>
                                                            <td>
                                                                @component("components.links.link", [
                                                                    "id" => "lnk_document".$loop->index,
                                                                    "title" => $document->name ?? "",
                                                                    "url" => $document->url,
                                                                    "linkClass" => "link-dark",
                                                                    "target" => "_blank"
                                                                ])
                                                                @endcomponent
                                                            </td>
                                                            <td>{{$document->creationDate ?? ""}}</td>
                                                        </tr>
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            @else
                                                <span class="text-secondary">{{__("universal.no_documents_available")}}</span>
                                            @endif
                                        </div>
                                        @if(!empty($documents[0]) || !empty($onDemandDocuments))
                                            <div class="col-12 col-md-6 col-lg-7">
                                                @component("components.alerts.alert", ["class" => "alert-info alert-permanent h-100", "headline" => __("universal.info.document_loading_times.title"), "text" => __("universal.info.document_loading_times.text")])
                                                @endcomponent
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-images" role="tabpanel" aria-labelledby="pills-images-tab">
                                    <div class="row ps-3">
                                        @if(!empty($documents[0]))
                                            <p>
                                                {{__("universal.overview_of_order_related_pictures")}}
                                            </p>
                                            @foreach($documents AS $document)
                                                @if($document->documentType == "A" && !empty($document->fileProvider->url))
                                                    <div class="col-auto">
                                                        <a href="#" data-document-id="{{$document->id ?? 0}}" class="lnk-image-gallery">
                                                            <img alt="" class="w-100 rounded" src="{{$document->fileProvider->url}}" style="max-width:150px; height: auto;">
                                                        </a>
                                                    </div>
                                                @endif
                                            @endforeach
                                        @else
                                            <span class="text-secondary">{{__("universal.no_images_available")}}</span>
                                        @endif
                                    </div>
                                </div>
                                @if(!empty($uploadButtons))
                                    <div class="tab-pane fade" id="pills-uploads" role="tabpanel" aria-labelledby="pills-uploads-tab">
                                        <div class="row ps-3">
                                            <div class="col-12">
                                                <p>
                                                    {!! __("universal.note_on_file_uploads") !!}
                                                    @component("components.links.link_modal", [
                                                        "id" => "lnk_upload_conditions",
                                                        "title" => __("universal.link.upload_conditions"),
                                                        "dataTarget" => "modal_info_upload_conditions"
                                                    ])
                                                    @endcomponent
                                                </p>
                                            </div>
                                        </div>
                                        <div class="row ps-3">
                                            @foreach($uploadButtons AS $button)
                                                <div class="col-auto">
                                                    @component('components.buttons.button_icon_center', [
                                                        "id" => $button->id ?? "",
                                                        "title" => $button->title ?? "",
                                                        "iconClass" => $button->iconClass ?? "",
                                                        "buttonClass" => $button->buttonClass ?? "",
                                                        "style" => $button->style ?? ""
                                                    ])
                                                    @endcomponent
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @if(!empty($usagePermitted->orderRelatedMessages))
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="border-bottom pb-1 mb-2">
                            <h5 class="mb-1"><i class="fa-solid fa-comment icon-design-headline me-2"></i>{!! __("universal.page.order_mgmt_order_related_messages.title") !!}</h5>
                        </div>
                        <div class="row mb-3">
                            <div class="col-12">
                                {!! __("universal.page.order_mgmt_order_related_messages.text") !!}
                            </div>
                        </div>
                        <div class="row">
                            <div id="order_related_messages_body" class="col-12 scrollable-div">
                                @if(!empty($orderRelatedMessages))
                                    @foreach($orderRelatedMessages AS $message)
                                        <div class="d-flex mb-1 {{$message->sentByMe ? "justify-content-end align-items-end" : "justify-content-start align-items-start"}}">
                                            <div class="card w-50 {{$message->cssCard ?? ""}}">
                                                <div class="card-body">
                                                    <h6 class="card-title text-uppercase">{{$message->senderUserCategoryName ?? ""}}</h6>
                                                    <h6 class="card-subtitle mb-1">{{FormatDateTime($message->timestamp ?? "")}} {{!empty($message->senderName) ? " - ".$message->senderName : ""}}</h6>
                                                    <p class="card-text">{{$message->text ?? ""}}</p>
                                                </div>
                                                @if(($message->withinAllowedChangePeriod === true)
                                                    && ((session("user.type") != "EC" && session("user.customerNo") == $message->senderCustomerNo)
                                                    || (session("user.type") == "EC" && session("user.type") == $message->senderUserCategoryCode && str_starts_with($message->senderCustomerNo, "X"))))
                                                    <div class="card-footer">
                                                        <div class="text-end">
                                                            <button class="btn btn-link delete-order-related-message {{$message->cssCardFooterButton ?? ""}}" value="{{$message->id}}"><i class="fa-solid fa-trash"></i></button>
                                                            <button class="btn btn-link edit-order-related-message {{$message->cssCardFooterButton ?? ""}}" value="{{$message->id}}"><i class="fa-solid fa-pen"></i></button>
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <h6 class="text-ingram-blue">{{__("universal.no_order_related_messages")}}</h6>
                                @endif
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-12">
                                @component("components.inputs.input", ["id" => "message", "placeholder" => __("universal.enter_message_here")])
                                @endcomponent
                            </div>
                        </div>
                        <div class="row mt-1">
                            <div class="col-12 text-end">
                                @if(session("user.type") == "IMSCC")
                                    @component("components.buttons.button", [
                                         "id" => "btn_mark_as_read",
                                         "title" => __("universal.button.mark_as_read"),
                                         "style" => "min-width: 8em;",
                                         "buttonClass" => "btn-dark-grayish-cyan"
                                    ])
                                    @endcomponent
                                @endif
                                @component("components.buttons.button", [
                                     "id" => "btn_send_order_related_message",
                                     "title" => __("universal.button.send"),
                                     "style" => "min-width: 8em;",
                                     "buttonClass" => "btn-default"
                                 ])
                                @endcomponent
                            </div>
                        </div>
                    </div>
                </div>
                @component("components.modals.modal", ["id" => "modal_edit_order_related_message", "modalTitle" => __("universal.modal.edit_order_related_message.title")])
                    @slot("modalBody")
                    @endslot
                    @slot("modalFooter")
                        <button type="button" class="btn btn-danger" style="min-width: 8em;" data-bs-dismiss="modal">{{__("universal.button.cancel")}}</button>
                        <button id="btn_edit_order_related_message" type="button" class="btn btn-success" style="min-width: 8em;" value="">{{__("universal.button.save")}}</button>
                    @endslot
                @endcomponent
            @endif
            @if(!empty($order->history))
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="border-bottom pb-1 mb-2">
                            <h5 class="mb-1"><i class="fa-solid fa-clock icon-design-headline me-2"></i>{!! __("universal.page.order_mgmt_status_history.title") !!}</h5>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <section class="bsb-timeline-1 mt-3 ps-2">
                                    <ul class="timeline">
                                        @foreach($order->history AS $history)
                                            <li class="timeline-item">
                                                <div class="timeline-body">
                                                    <div class="timeline-content">
                                                        <div class="card border-0">
                                                            <div class="card-body p-0">
                                                                <h6 class="card-subtitle text-secondary mb-1">{{$history["date"]}} {{$history["time"]}}</h6>
                                                                <h6 class="card-title mb-3">{!! $history["headline"] ?? "" !!}</h6>
                                                                <p class="card-text m-0">{!! $history["description"] ?? "" !!}</p>
                                                                {{-- Tracking information --}}
                                                                @if(in_array($history["code"], [165, 166, 167, 171, 172, 173]) && !empty($returnShipment))
                                                                    @include("order_management.status.outbound_tracking")
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            @component("components.modals.modal", ["id" => "modal_image_gallery", "modalTitle" => __("universal.images")])
            @endcomponent
            @component("components.modals.modal", ["id" => "modal_cancel_order", "modalTitle" => __("universal.modal.cancel_order.title")])
                @slot("modalBody")
                    {{__("universal.modal.cancel_order.text")}}
                @endslot
                @slot("modalFooter")
                    <button type="button" class="btn btn-secondary" style="min-width: 8em;" data-bs-dismiss="modal">{{__("universal.button.cancel")}}</button>
                    <button id="btn_cancel_order" type="button" class="btn btn-danger" style="min-width: 8em;" value="{{$order->no}}">{{__("universal.button.yes")}}</button>
                @endslot
            @endcomponent
            @component("components.modals.modal", ["id" => "modal_info_upload_conditions", "modalTitle" => __("universal.info.upload_conditions.title")])
                @slot("modalBody")
                    <p>
                        {!! __("universal.info.upload_conditions.text") !!}
                    </p>
                    @if(!empty($uploadConditions))
                        <table class="table table-sm table-striped w-100">
                            <thead>
                                <tr>
                                    <th>
                                        {{__("universal.type_of_document_to_be_uploaded")}}
                                    </th>
                                    <th>
                                        {{__("universal.allowed_file_types")}}
                                    </th>
                                    <th>
                                        {{__("universal.maximum_file_size")}}
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach($uploadConditions AS $condition)
                                <tr>
                                    <td>
                                        {{$condition->documentTypeDescription}}
                                    </td>
                                    <td>
                                        @if(!empty($condition->validExtensions))
                                            {{implode(",", $condition->validExtensions)}}
                                        @endif
                                    </td>
                                    <td>
                                        {{BytesToHumanReadableSize($condition->maxFileSize)}}
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    @endif
                @endSlot
            @endcomponent
            @component("components.modals.modal", ["id" => "modal_confirmation_product_disposal", "modalTitle" => __("universal.modal.confirmation_product_disposal.title")])
                @slot("modalBody")
                    {{__("universal.modal.confirmation_product_disposal.text")}}
                @endslot
                @slot("modalFooter")
                    <button type="button" class="btn btn-secondary" style="min-width: 8em;" data-bs-dismiss="modal">{{__("universal.button.cancel")}}</button>
                    <button id="btn_confirmation_product_disposal" type="button" class="btn btn-success" style="min-width: 8em;" value="">{{__("universal.button.yes")}}</button>
                @endslot
            @endcomponent
            @component("components.modals.modal", ["id" => "modal_payment_method_selected", "modalTitle" => __("universal.modal.payment_method_selected.title")])
                @slot("modalBody")
                @endslot
                @slot("modalFooter")
                    <button type="button" class="btn btn-danger" style="min-width: 8em;" data-bs-dismiss="modal">{{__("universal.button.cancel")}}</button>
                    <button id="btn_payment_method_selected" type="button" class="btn btn-success" style="min-width: 8em;" value="">{{__("universal.button.confirm_selection")}}</button>
                @endslot
            @endcomponent
            @component("components.modals.modal", ["id" => "modal_edit_address", "modalTitle" => __("universal.modal.edit_address.title")])
                @slot("modalBody")
                @endslot
                @slot("modalFooter")
                    <button type="button" class="btn btn-danger" style="min-width: 8em;" data-bs-dismiss="modal">{{__("universal.button.cancel")}}</button>
                    <button id="btn_edit_address" type="button" class="btn btn-success" style="min-width: 8em;" value="">{{__("universal.button.save")}}</button>
                @endslot
            @endcomponent
        </section>
    </div>
@endsection