@extends('frontend::layouts.master_complete')
@section('title')

@section('style')
    <style>
        @media print {
            body * {
                visibility: hidden;
            }

            #section-to-print,
            #section-to-print * {
                visibility: visible;
            }

            #section-to-print {
                position: absolute;
                left: 0;
                top: 0;
            }

            .data-print {
                display: block !important;
            }

            html,
            body {
                height: 100vh;
                margin: 0 !important;
                padding: 0 !important;
                overflow: hidden;
            }

            @page {
                size: auto;
                /* auto is the initial value */
                margin: 5mm;
                /* this affects the margin in the printer settings */
                margin-right: 25px;
                margin-left: 25px;
            }
        }
    </style>
@endsection

@section('content')

    <main>
        <div class="full-y-starter">
            <div class="container">
                <div class="nav-state-wrapper">
                    <div class="nav-state-bar activated ">@lang('frontend.delivery')
                    </div>
                    <div class="nav-state-bar activated ">@lang('frontend.payment_method')
                    </div>
                    <div class="nav-state-bar activated current">@lang('frontend.you_order_complete')
                    </div>
                </div>
                <div class="flex pt-8 space-y-6 md:space-y-0 flex-col md:flex-row md:space-x-8">
                    <div class="flex flex-col w-full lg:w-9/12">
                        <div class="bdt"></div>
                        <div class="py-4 flex items-center flex-col sm:flex-row">
                            <h5>@lang('frontend.frnd_58')</h5>
                            <div class="text-center f-link border border-gray p-2 mt-3 sm:ml-6 sm:mt-0 lg:hidden">
                                <h4><i class="fa fa-print"></i></h4>
                                <p class="text-xs nowrap">@lang('frontend.frnd_122')</p><a class="f-url" href="javascript:print()"></a>
                            </div>
                        </div>
                        <div class="bdt"></div>
                        <div class="py-4">
                            <div class="fibt">
                                <h5>@lang('frontend.frnd_59')</h5>
                                <h5>{{ $order->order_no ?? '-' }}</h5>
                            </div>
                        </div>
                        <div class="pb-2">
                            <div class="fibt">
                                <p></p>
                                <p>@lang('frontend.frnd_60') / @lang('frontend.my_order')</p>
                            </div>
                        </div>
                        <div class="bddb"></div>
                        <div class="pt-3 pb-2">
                            <p>@lang('frontend.order_detail')</p>
                        </div>
                        <div class="bdt opacity-50"></div>
                        <div class="py-2">
                            <div class="fibt">
                                <p>@lang('frontend.order_date') </p>
                                <p>{{ $order->created_at ?? '-' }}</p>
                            </div>
                            <div class="fibt">
                                <p>@lang('frontend.payment_method') </p>
                                <p>{{ !empty($order->payment_type) ? ($order->payment_type == 1 ? __('frontend.credit_or_debit_card') : __('frontend.bank_transfer')) : '-' }}</p>
                            </div>
                            <div class="fibt">
                                <p>@lang('frontend.frnd_61') </p>
                                <p>{{ payment_text_status($order->payment_status ?? 0) }}</p>
                            </div>
                            <div class="fibt">
                                <p>@lang('frontend.member_mobile') </p>
                                <p>{{ $order->member_tel ?? '-' }}</p>
                            </div>
                        </div>
                        <div class="bddb"></div>
                        <div class="pt-3 pb-2">
                            <p>@lang('frontend.checkout_shipping_address')</p>
                        </div>
                        <div class="bdt opacity-50"></div>

                        @if (!empty($order->where_tobuy))
                            <div class="pt-2 pb-3 row">
                                <div class="col-md-4">
                                    <img style="max-width: 250px;" src="{{ convert_image($order->where_tobuy->image ?? '', 'wheretobuy') }}">
                                </div>
                                <div class="col-md-8">
                                    <p>{{ $order->where_tobuy['name_' . $pageInit['lang']] ?? '' }}</p>
                                </div>
                            </div>
                        @else
                            <div class="pt-2 pb-3">
                                <p>{{ $order->order_address->name ?? '' }}</p>
                                <p>{{ ($order->order_address->address ?? '') . ' ' . ($order->order_address->district['name_' . $pageInit['lang']] ?? '') . ' ' . ($order->order_address->city['name_' . $pageInit['lang']] ?? '') . ' ' . ($order->order_address->province['name_' . $pageInit['lang']] ?? '') . ' ' . ($order->order_address->zipcode ?? '') }}</p>
                                <p>@lang('frontend.checkout_mobile') {{ $order->order_address->mobile ?? '-' }} </p>
                                <p>@lang('frontend.member_email') {{ $order->member_email ?? '-' }}</p>
                            </div>
                        @endif
                        @if (!empty($order->tax_address) && $order->tax_address->status == 1)
                            <div class="bddb"></div>
                            <div class="pt-3 pb-2">
                                <p>@lang('frontend.tax_invoices')</p>
                            </div>
                            <div class="bdt opacity-50"></div>
                            <div class="pt-2 pb-3">
                                <p>{{ $order->tax_address->contact_name ?? '' }}</p>
                                @if (!empty($order->tax_address->company_name))
                                    {{ $order->tax_address->company_name }}
                                @endif
                                <p>{{ ($order->tax_address->address ?? '') . ' ' . ($order->tax_address->district['name_' . $pageInit['lang']] ?? '') . ' ' . ($order->tax_address->city['name_' . $pageInit['lang']] ?? '') . ' ' . ($order->tax_address->province['name_' . $pageInit['lang']] ?? '') . ' ' . ($order->tax_address->zipcode ?? '') }}</p>
                                <p>@lang('frontend.checkout_mobile') {{ $order->tax_address->mobile ?? '-' }} </p>
                                <p>@lang('frontend.member_email') {{ $order->tax_address->email ?? '-' }}</p>
                            </div>
                        @endif
                        <div class="bddb"></div>
                        <div class="pt-3 pb-2">
                            <p>@lang('frontend.order_total')</p>
                        </div>
                        <div class="bdt opacity-50"></div>
                        @if (!empty($order->items))
                            @foreach ($order->items as $item)
                                <div class="flex flex-wrap mt-6">
                                    <div class="cart-item-img mr-2">
                                        <img src="{{ convert_image(getImage($item) ?? '', 'product') }}" alt="" />
                                        <a href="{{ mwz_route('frontend.jewelry.detail', [create_slug($item->product ?? [])]) }}"></a>
                                    </div>
                                    <div class="cart-item-detail mx-0">
                                        <p class="text-lg font-medium">{{ $item['product_name_' . $pageInit['lang']] ?? '' }}</p>
                                        @if (!empty($item['cartificate_' . $pageInit['lang']]) && !empty($item->item_color))
                                            <div class="font-light text-lg">{{ $item['cartificate_' . $pageInit['lang']] }} / {{ $item->item_color }}</div>
                                        @else
                                            <div class="font-light text-lg">{{ $item['cartificate_' . $pageInit['lang']] ?? '' }}{{ $item->item_color ?? '' }}</div>
                                        @endif

                                        <div class="mt-2 text-sm">
                                            <div class="flex justify-between flex-col xs:flex-row xs:items-center">
                                                <div class="w1w5w0">SKU</div>
                                                <div>{{ $item->order_item_sku ?? '' }}</div>
                                            </div>
                                            @if (!empty($item['cartificate_' . $pageInit['lang']]))
                                                <div class="flex justify-between flex-col xs:flex-row xs:items-center">
                                                    <div class="w1w5w0">Certificate</div>
                                                    <div>{{ $item['cartificate_' . $pageInit['lang']] }}</div>
                                                </div>
                                            @endif
                                            @if (!empty($item->item_color))
                                                <div class="flex justify-between flex-col xs:flex-row xs:items-center">
                                                    <div class="w1w5w0">Body</div>
                                                    <div>{{ $item->item_color }}</div>
                                                </div>
                                            @endif
                                            @if (!empty($item->item_diamond))
                                                <div class="flex justify-between flex-col xs:flex-row xs:items-center">
                                                    <div class="w1w5w0">น้ำหนักเพชรเม็ดกลาง</div>
                                                    <div>{{ $item->item_diamond }}</div>
                                                </div>
                                            @endif
                                            @if (!empty($item->item_size))
                                                <div class="flex justify-between flex-col xs:flex-row xs:items-center">
                                                    <div class="w1w5w0">Weight</div>
                                                    <div>{{ $item->item_size }}</div>
                                                </div>
                                            @endif
                                            @if (!empty($item->engraving_text))
                                                <div class="flex justify-between flex-col xs:flex-row xs:items-center">
                                                    <div class="w1w5w0">Engraving</div>
                                                    <div>{{ $item->engraving_text }}</div>
                                                </div>
                                            @endif
                                            @if (!empty($item->fontstyle))
                                                <div class="flex justify-between flex-col xs:flex-row xs:items-center">
                                                    <div class="w1w5w0">Font</div>
                                                    <div>{{ $item->fontstyle }}</div>
                                                </div>
                                            @endif
                                            <div class="flex justify-between flex-col xs:flex-row xs:items-center">
                                                <div class="w1w5w0">Quantity</div>
                                                <div>{{ $item->quantity ?? 0 }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            <hr class="my-6" />
                            {!! !empty($data['freebies']['description'])?$data['freebies']['description']:'' !!}
                            <hr class="my-6" />
                        @endif
                        <div class="bddb my-6"></div>
                        <div class="text-lg">@lang('frontend.order_summery')</div>
                        <div class="bdt opacity-50 my-3"></div>
                        <div>
                            <div class="smry-wrapper">
                                <div class="smry-sm">@lang('frontend.sub_total')</div>
                                <div class="smry-sm">{{ number_format($order->sub_total ?? 0, 2) }} THB</div>
                            </div>
                            @if (!empty($order->discount_total) && (float) $order->discount_total > 0)
                                <div class="smry-wrapper">
                                    <p class="smry-sm">@lang('frontend.save')</p>
                                    <p class="smry-sm">{{ number_format($order->discount_total, 2) }} THB</p>
                                </div>
                            @endif
                            <div class="smry-wrapper">
                                <div class="smry-sm">@lang('frontend.frnd_63')</div>
                                <div class="smry-sm">0.00 THB</div>
                            </div>
                            <div class="smry-wrapper">
                                <div class="smry-sm">@lang('frontend.frnd_64')</div>
                                <div class="smry-sm">0.00 THB</div>
                            </div>
                            @if (!empty($order->coupon_code))
                                <div class="smry-wrapper mt-4">
                                    <div class="smry-sm">@lang('frontend.frnd_65')</div>
                                    <div class="smry-sm"><u>{{ $order->coupon_code ?? '' }}</u></div>
                                </div>
                                <div class="smry-wrapper">
                                    <div class="smry-sm">@lang('frontend.frnd_66')</div>
                                    <div class="smry-sm">{{ number_format($order->coupon_discount_price ?? 0, 2) }} THB</div>
                                </div>
                            @endif
                            <div class="smry-wrapper mt-4">
                                <div class="text-lg">@lang('frontend.frnd_62')</div>
                                <div class="text-lg">{{ !empty($order->coupon_code) ? number_format($order->discal_total ?? 0, 2) : number_format($order->grand_total ?? 0, 2) }} THB</div>
                            </div>
                        </div>
                        <div class="bddb mb-6"></div>
                        <div class=" lg:hidden">
                            <a href="{{ mwz_route('frontend.index') }}">
                                <button class="butn-submit py-2 add2bag-btn">@lang('frontend.frnd_67')</button>
                            </a>
                        </div>
                    </div>
                    <div class="continue-shopping w-full lg:w-3/12 relative hidden lg:block">
                        <div class="sticky top-10">
                            <div class="text-center w-full f-link border border-gray p-2 mb-2 hidden lg:block">
                                <h1><i class="fa fa-print"></i></h1>
                                <p>PRINT / DOWNLOAD PDF</p><a class="f-url" href="javascript:print()"></a>
                            </div>
                            <a href="{{ mwz_route('frontend.index') }}">
                                <button class="butn-submit py-2 add2bag-btn">@lang('frontend.frnd_67')</button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    @includeIf('frontend::print-complete')
@endsection

@section('script')
    <script>
        function myFunction() {
            // window.close();
            $('#section-to-print').css('display', 'none')
        }

        window.onafterprint = myFunction
    </script>
@endsection