@extends('layouts.admin_main')

@section('title', $order->order_number)

@push('styles')
    <style>
        .help-block {
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
            overflow: hidden;
            display: block;
        }

        .order_detail_section .order_header {
            padding: 1.5rem 1rem;
        }

        .order_detail_section .order_header .row {
            align-items: flex-end;
        }

        .order_detail_section .order_header p {
            margin: 0;
        }

        .order_detail_section .order_header h2 {
            margin-bottom: 0;
            color: #48465b;
            font-size: 1.6rem;
        }

        .order_detail_section .order_header h2 span {
            opacity: 0.5;
        }

        .order_detail_section .order_header h2 small {
            font-size: 14px;
        }

        .order_detail_section .order_header .order_date_time {
            font-size: 1rem;
            opacity: 0.5;
            font-weight: 500;
        }

        .order_detail_section .order_header .order_date {
            margin-left: 2rem;
        }

        .order_detail_section .order_header .order_date p {
            color: #959cb6;
            font-weight: 500;
            display: flex;
            align-items: center;
        }

        .order_detail_section .order_header .order_date span {
            margin: 0 0.5rem;
        }

        .order_detail_section .order_header .order_date i {
            font-size: 1.5rem;
        }

        .order_detail_section .order_header .order_status {
            margin-left: 2rem;
        }

        .order_detail_section .order_header .order_status .staus_panding {
            font-size: 1rem;
            font-weight: 500;
            padding: 0.35rem 1rem;
            border-radius: 4px;
            color: #5867dd;
            background-color: rgba(88, 103, 221, 0.1);
        }

        .order_detail_section .order_item_box {
            display: flex;
            flex-grow: 1;
            flex-direction: column;
            box-shadow: 0 0 13px 0 rgba(82, 63, 105, 0.05);
            background-color: #fff;
            margin-bottom: 20px;
            border-radius: 4px;
            padding: 20px;
        }

        .order_detail_section .order_item_box .row {
            margin: 0;
        }

        .order_detail_section .order_item_box .order_item .od_text {
            font-size: 1.1rem;
            margin-top: 0.5rem;
            font-weight: 600;
        }

        .order_detail_section .order_item_box .order_item .od_text span {
            font-size: 0.8rem;
            font-weight: 400;
            display: block;
            margin-bottom: 0.2rem;
        }

        .order_detail_section .order_item_box .order_item .od_img {
            width: 5rem;
            display: inline-block;
            height: 5rem;
            text-align: center;
        }

        .order_detail_section .order_item_box .order_item .od_img img {
            width: auto;
            max-width: 100%;
            max-height: 100%;
        }

        .order_detail_section .order_item_box .order_item .od_name {
            display: inline-block;
            margin-left: 1rem;
            vertical-align: top;
            width: 60%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            transition: all 0.3s ease-out;
        }

        .order_detail_section .order_item_box .order_item .od_name:hover {
            white-space: inherit;
        }

        .order_detail_section .payment_summery {
            padding: 0;
        }

        .order_detail_section .payment_summery h3 {
            color: #48465b;
            font-size: 1.3rem;
            padding: 30px 30px 15px;
        }

        .order_detail_section .payment_summery ul {
            margin: 0;
            padding: 0;
        }

        .order_detail_section .payment_summery li {
            padding: 5px 30px;
            list-style: none;
        }

        .order_detail_section .payment_summery li p {
            margin: 0;
        }

        .order_detail_section .payment_summery li p span {
            opacity: 0.7;
        }

        .order_detail_section .payment_summery li p:last-child {
            font-weight: 600;
        }

        .order_detail_section .payment_summery li.total_block {
            color: #48465b;
            font-size: 1.1rem;
            margin-top: 1rem;
            padding: 15px 30px;
            font-weight: 600;
            background-color: #f9fafc;
        }

        .order_detail_section .order_heade_right {
            display: flex;
            align-items: center;
        }

        .order_detail_section .order_heade_right .dropdown {
            margin-right: 3px;
        }

        .order_detail_section .order_heade_right .print a {
            background-color: #0abb87;
            color: #fff;
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            line-height: 1.5;
            border-radius: 0.2rem;
            font-weight: 600;
            display: flex;
            align-items: center;
        }

        .order_detail_section .order_heade_right .print a i {
            font-size: 1.3rem;
            margin-right: 0.5rem;
        }
        .order_detail_section .order_heade_right .download a {
            background-color: #fd397a;
            color: #fff;
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            line-height: 1.5;
            border-radius: 0.2rem;
            font-weight: 600;
            display: flex;
            align-items: center;
        }

        .order_detail_section .order_heade_right .download a i {
            font-size: 1.3rem;
            margin-right: 0.5rem;
        }

        .order_info_box .bd_bottom {
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }

        .order_info_box h4 {
            color: #48465b;
            font-size: 1rem;
            margin-bottom: 1rem;
        }

        .order_info_box .contact_info,
        .order_info_box .shiiping_detail,
        .order_info_box .billing_detail {
            padding-bottom: 0.8rem;
            margin-bottom: 1.2rem;
            padding: 0.2rem 0px;
        }

        .order_info_box .billing_detail {
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .order_info_box p i {
            font-weight: 600;
            font-size: 1.3rem;
            vertical-align: middle;
            margin-right: 0.5rem;
        }

        .order_info_box p span {
            margin-right: 0.5rem;
        }

        .order_info_box p span .kt-svg-icon g [fill] {
            fill: #96a9c8;
        }

        .shipping-data .btn-remove {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 0.4rem;
        }

        .shipping-data .btn-remove i {
            padding-right: 0;
        }

        .return_product {
            display: flex;
            align-items: center;
        }

        .return_product .r_img_block {
            width: 4rem;
            height: 4rem;
            display: inline-block;
            text-align: center;
        }

        .return_product .r_img_block img {
            width: auto;
            max-width: 100%;
            max-height: 100%;
        }

        .return_product .re_pd_name {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            width: 14rem;
            margin-left: 0.3rem;
        }
    </style>
@endpush

@section('content')
    @breadcrumb([
        'home_url' => route('admin.dashboard.index'),
        'links' => [
            [
                'url' => route('admin.orders.index'),
                'title' => trans('admin_lang.manage_orders'),
            ]
        ],
        'current_page_title' => trans('admin_lang.order_details')
    ])
    @endbreadcrumb

    <section class="order_detail_section">
        <div class="order_header">
            <div class="row">
                <div class="col-md-8">
                    <div class="">
                        <h2>
                            <span>{{ trans('admin_lang.order_id') }}</span> {{ $order->order_number }}<br>
                        </h2>
                        <p class="order_date_time">{{ $order->created_at->translatedFormat(config('defaults.time_format')) }}</p>
                        <div class="order_status">
                            @php
                                $status = []
                            @endphp
                            @foreach (\App\Models\Order::$status as $key => $value)
                                @php
                                    $status[$value['code']] = $value
                                @endphp
                                @php
                                    $status[$value['code']]['key'] = $key
                                @endphp
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="order_heade_right">
                            <div class="dropdown">
                                <a href="#" class="btn btn-label-brand btn-bold btn-sm dropdown-toggle od_status" data-toggle="dropdown" aria-expanded="false">
                                    {{ trans('admin_lang.status_'.$status[$order->status]['slug']) }}
                                </a>
                                <div class="dropdown-menu dropdown-menu-sm" style="">
                                    <!--begin::Nav-->
                                    <ul class="kt-nav">
                                        @foreach (\App\Models\Order::$status as $key => $status)
                                            @if ($status['can_be_changed_via_backend'])
                                                <li class="kt-nav__item">
                                                    <a href="{{ route('admin.orders.change_status', ['order' => $order->id, 'status' => $key]) }}" data-method="POST" class="dropdown-item kt-nav__link btn-confirm" swal-cancel="{{ trans('admin_lang.cancel') }}" swal-confirm="{{ trans('admin_lang.yes_do_it') }}" swal-description="{{ trans('admin_lang.change_status_swal') }}" swal-title="{{ trans('admin_lang.change_status') }}">
                                                        <span class="kt-nav__link-bullet kt-nav__link-bullet--line"><span></span></span>
                                                        <span class="kt-nav__link-text">{{ trans('admin_lang.status_'.$key) }}</span>
                                                    </a>
                                                </li>
                                            @endif
                                        @endforeach
                                    </ul>
                                    <!--end::Nav-->
                                </div>
                            </div>
                            @if ($order->status != App\Models\Order::STATUS_PARTIAL_RETURN)
                                <div class="" style="margin-right: 3px;">
                                    <button type="button" class="btn btn-bold btn-label-brand btn-sm" data-toggle="modal" data-target="#kt_modal_5">@lang('admin_lang.upload_excel')</button>
                                    {{--<a href="{{ route('admin.products.uploadExcel') }}" class="btn btn-outline-primary">{{trans('admin_lang.upload_excel')}}</a>--}}
                                </div>
                            @endif
                            @php
                                $path = asset('storage/order-excel/'.$order->order_number.'.xlsx');
                            @endphp
                            <div class="print" style="margin-right: 3px;">
                                <a href="{{ $path }}" class="kt-nav__link" download>
                                    <i class="kt-nav__link-icon la la-download"></i>
                                    <span class="kt-nav__link-text">{{ trans('admin_lang.download_btn_label') }}</span>
                                </a>
                            </div>
                            @if($order->is_updated == 1)
                                @php
                                    $pathLatest = asset('storage/order-excel-latest/'.$order->order_number.'.xlsx');
                                @endphp
                                <div class="download" style="margin-right: 3px;">
                                    <a href="{{ $pathLatest }}" class="kt-nav__link" download>
                                        <i class="kt-nav__link-icon la la-download"></i>
                                        <span class="kt-nav__link-text">{{ trans('admin_lang.download_latest_btn_label') }}</span>
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

            </div>
            <div class="order_body">
                <div class="row">
                    <div class="col-md-8">
                    @php
                        $sum = 0;
                        $bycost_commission = 0;
                        $totalDiscount = 0;
                        $originalItemTotal = 0;
                        $totalVat = 0;
                        $total = 0;
                        $totalWeight = 0;
                        $totalQuantity = 0;
                    @endphp

                    @foreach($order->items as $key => $item)

                        @php
                            $sellingPrice = $item->price;

                            $qty = (int) $item->qty;
                             $totalQuantity +=  $qty;
                            if (!empty($weight) && $weight > 0)
                            {
                                $totalWeight += ($weight * $qty);
                            }
                            $discountPercentage = $order->customer_vat;;
                            $vatPercentage = $item->vat;

                            $itemTotalAmount = $sellingPrice * $qty;
                            $originalItemTotal +=  $itemTotalAmount;

                            $discount = findDiscountAmount($itemTotalAmount, $discountPercentage);
                            $totalDiscount += $discount;
                            $afterDiscountItemTotal = ($itemTotalAmount - $discount);

                            $totalVat += findVatAmount($afterDiscountItemTotal, $vatPercentage);
                        @endphp

                        <div class="order_item_box">
                            <div class="order_item">
                                <div class="row">
                                    <div class="col-md-5">
                                        <div class="od_img">
                                            <img src="{{ productImageUrl(!empty($item->product) ? $item->product->sku : null) }}">
                                        </div>
                                        <h4 class="od_name od_text">
                                            <span>@lang('admin_lang.name')</span>
                                            {{ $item->title }}<br>
                                            <br>
                                            @if($item->status == \App\Models\OrderItem::STATUS_CANCELED)
                                                <small>(@lang('admin_lang.status_cancelled'))</small>
                                            @elseif($item->status == \App\Models\OrderItem::STATUS_RETURNED)
                                                <small>(@lang('admin_lang.status_return'))</small>
                                            @endif
                                        </h4>
                                    </div>
                                    <div class="col-md-7">
                                        <div class="row align-items-center justify-content-between">
                                            <p class="od_price od_text"><span>@lang('admin_lang.price')</span>{{ number_format($item->price, 2) }}</p>
                                            <p class="od_qty od_text"> <span>@lang('admin_lang.qty')</span> {{ ($item->status == \App\Models\OrderItem::STATUS_CANCELED || $item->status == \App\Models\OrderItem::STATUS_RETURNED) ? 0 : $item->qty }}</p>
                                            <p class="od_total_price od_text"> <span>@lang('admin_lang.total')</span>{{ number_format($item->price*(($item->status == \App\Models\OrderItem::STATUS_CANCELED || $item->status == \App\Models\OrderItem::STATUS_RETURNED) ? 0 : $item->qty), 2) }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    <div class="order_item_box payment_summery">
                        <h3>{{ trans('admin_lang.payment_summary') }}</h3>
                        <ul>
                            <li>
                                <div class="row align-items-center justify-content-between">
                                    <p>{{ trans('admin_lang.sub_total') }} <span>({{ $totalQuantity }} items, {{ $totalWeight }} kg)</span></p>
                                    <p class="strong">{{ showAmount($originalItemTotal) }}</p>
                                </div>
                            </li>
                            @if($totalDiscount > 0)
                                <li>
                                    <div class="row align-items-center justify-content-between">
                                        <p>{{ trans('frontend_lang.discount') }}</p>
                                        <p class="strong">{{ showAmount($totalDiscount) }}</p>
                                    </div>
                                </li>
                            @endif

                            @if($totalVat > 0)
                                <li>
                                    <div class="row align-items-center justify-content-between">
                                        <p>{{ trans('frontend_lang.vat') }}</p>
                                        <p class="strong">{{ showAmount($totalVat) }}</p>
                                    </div>
                                </li>
                            @endif

                            <li class="total_block">
                                <div class="row align-items-center justify-content-between">
                                    <p>{{ trans('frontend_lang.net_total') }}</p>
                                    <p class="strong">{{ showAmount(($originalItemTotal - $totalDiscount) + $totalVat) }}</p>
                                </div>
                            </li>
                        </ul>
                    </div>

                </div>
                <div class="col-md-4">
                    <div class="order_item_box order_info_box">
                        <div class="contact_info bd_bottom">
                            <h4>{{ trans('admin_lang.contact_info') }}</h4>
                            <p class="c_name">
                                <span>
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <polygon points="0 0 24 0 24 24 0 24"/>
                                            <path d="M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                            <path d="M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z" fill="#000000" fill-rule="nonzero"/>
                                        </g>
                                    </svg>
                                </span>
                                <a href="{{ route('admin.users.show', $order->user_id) }}"> {{ $order->user->getFullName()}} </a>
                            </p>
                            <p class="c_mail">
                                <span>
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <rect x="0" y="0" width="24" height="24"/>
                                            <path d="M21,12.0829584 C20.6747915,12.0283988 20.3407122,12 20,12 C16.6862915,12 14,14.6862915 14,18 C14,18.3407122 14.0283988,18.6747915 14.0829584,19 L5,19 C3.8954305,19 3,18.1045695 3,17 L3,8 C3,6.8954305 3.8954305,6 5,6 L19,6 C20.1045695,6 21,6.8954305 21,8 L21,12.0829584 Z M18.1444251,7.83964668 L12,11.1481833 L5.85557487,7.83964668 C5.4908718,7.6432681 5.03602525,7.77972206 4.83964668,8.14442513 C4.6432681,8.5091282 4.77972206,8.96397475 5.14442513,9.16035332 L11.6444251,12.6603533 C11.8664074,12.7798822 12.1335926,12.7798822 12.3555749,12.6603533 L18.8555749,9.16035332 C19.2202779,8.96397475 19.3567319,8.5091282 19.1603533,8.14442513 C18.9639747,7.77972206 18.5091282,7.6432681 18.1444251,7.83964668 Z" fill="#000000"/>
                                            <circle fill="#000000" opacity="0.3" cx="19.5" cy="17.5" r="2.5"/>
                                        </g>
                                    </svg>
                                </span>
                                <a href="mailto:{{ $order->email }}">{{ $order->email }}</a>
                            </p>
                            <p class="c_phone">
                                <span>
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <rect x="0" y="0" width="24" height="24"/>
                                            <path d="M11.914857,14.1427403 L14.1188827,11.9387145 C14.7276032,11.329994 14.8785122,10.4000511 14.4935235,9.63007378 L14.3686433,9.38031323 C13.9836546,8.61033591 14.1345636,7.680393 14.7432841,7.07167248 L17.4760882,4.33886839 C17.6713503,4.14360624 17.9879328,4.14360624 18.183195,4.33886839 C18.2211956,4.37686904 18.2528214,4.42074752 18.2768552,4.46881498 L19.3808309,6.67676638 C20.2253855,8.3658756 19.8943345,10.4059034 18.5589765,11.7412615 L12.560151,17.740087 C11.1066115,19.1936265 8.95659008,19.7011777 7.00646221,19.0511351 L4.5919826,18.2463085 C4.33001094,18.1589846 4.18843095,17.8758246 4.27575484,17.613853 C4.30030124,17.5402138 4.34165566,17.4733009 4.39654309,17.4184135 L7.04781491,14.7671417 C7.65653544,14.1584211 8.58647835,14.0075122 9.35645567,14.3925008 L9.60621621,14.5173811 C10.3761935,14.9023698 11.3061364,14.7514608 11.914857,14.1427403 Z" fill="#000000"/>
                                        </g>
                                    </svg>
                                </span>
                                <a href="tel:{{ $order->phone }}">{{ $order->user->phone }}</a>
                            </p>
                        </div>
                    </div>
                    <div class="order_item_box order_info_box">
                        <div class="contact_info bd_bottom">
                            <h4>{{ trans('admin_lang.order_notes') }}</h4>
                            <p class="c_name">
                                {{ $order->notes }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    {{--@if (!$order->trails->isEmpty())--}}
                        {{--<div class="order_item_box payment_summery pb-5">--}}
                            {{--<h3>{{ trans('admin_lang.track_record') }}</h3>--}}
                            {{--<ul class="timeline timeline-2">--}}
                                {{--<div class="timeline-bar"></div>--}}
                                {{--@foreach ($order->trails as $log)--}}
                                    {{--<li class="timeline-item">--}}
                                        {{--<div class="timeline-badge bg-success"></div>--}}
                                        {{--<div class="timeline-content d-flex align-items-center justify-content-between">--}}
                                            {{--<span class="mr-3">--}}
                                                {{--{!! get_log_message($log->message, $log->old_data, $log->new_data, $log->user) !!}--}}
                                            {{--</span>--}}
                                            {{--<span class="text-muted text-right">{{ $log->updated_at->diffForHumans() }}</span>--}}
                                        {{--</div>--}}
                                    {{--</li>--}}
                                {{--@endforeach--}}
                            {{--</ul>--}}
                        {{--</div>--}}
                    {{--@endif--}}
                </div>
            </div>
        </div>
        <!--begin::Modal-->
        <div class="modal fade" id="kt_modal_5" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <form action="{{ route('admin.orders.updateOrder') }}" method="POST">
                        <input type="hidden" name="order_id" value="{{ $order->id }}">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">@lang('admin_lang.update_order')</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="name" class="required">@lang('admin_lang.select_excel_file')</label>
                                <input type="file" name="file" id="file" required class="form-control" accept=".xls, .xlsx, .csv">
                                <span class="form-text text-muted">@lang('admin_lang.allowed_types_excel')</span>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">@lang('admin_lang.cancel')</button>
                            @button(['type' => 'submit'])@endbutton
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--end::Modal-->
    </section>
@endsection