@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="info-cont purchased-cont">
                    <div class="sm:hidden">
                        <div class="form-wrapper bg-gray-light">
                            <select class="form-style bg-transparent" name="selectName" onchange="location = this.value;">
                                <option value="{{ mwz_route('frontend.m.info') }}">@lang('frontend.my_account')</option>
                                <option value="{{ mwz_route('frontend.m.repassword') }}">@lang('frontend.member_password')</option>
                                <option value="{{ mwz_route('frontend.m.purchased') }}">@lang('frontend.member_order_list')</option>
                                <option selected value="#">@lang('frontend.order_detail')</option>
                            </select>
                        </div>
                    </div>
                    <div class="portal-switcher switcher-member">
                        <h2 class="title-text uppercase unactives">@lang('frontend.my_account')
                            <a href="{{ mwz_route('frontend.m.info') }}"> </a>
                        </h2>
                        <h2 class="title-text uppercase unactives">@lang('frontend.member_password')
                            <a href="{{ mwz_route('frontend.m.repassword') }}"> </a>
                        </h2>
                        <h2 class="title-text uppercase unactives">@lang('frontend.member_order_list')
                            <a href="{{ mwz_route('frontend.m.purchased') }}"> </a>
                        </h2>
                    </div>
                    <div class="row pb-2 bg-white justify-center mx-0">
                        <div class="col-12 px-4">
                            <div class="flex space-y-6 md:space-y-0 flex-col md:flex-row md:space-x-8">
                                <div class="flex flex-col w-full">
                                    <div class="py-4">
                                        <!-- คลาส mobile-dc จะมีเฉพาะใน loop รองสุดท้าย-->
                                        <div class="brcrmb">
                                            <div class="brcrmb-wrrp">
                                                <div class="tmx-2 mobile-dc">
                                                    <!-- Mobile Icon-->
                                                    <a class="chv mobile-dc" href="{{ mwz_route('frontend.m.purchased') }}"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 chv" viewBox="0 0 20 20" fill="currentColor">
                                                            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                                                        </svg></a>
                                                </div>
                                                <a class="mobile-dc" href="{{ mwz_route('frontend.m.purchased') }}">@lang('frontend.member_order_list')</a>
                                            </div>
                                            <div class="brcrmb-wrrp active">
                                                <div class="tmx-2"><span class="slh">/ </span>
                                                </div>
                                                <a href="javascript:void(0)">{{ $order->order_no ?? '' }}</a>
                                            </div>
                                        </div>
                                        <div class="fibt mt-3">
                                            <h5>@lang('frontend.frnd_59') </h5>
                                            <h5>{{ $order->order_no ?? '' }}</h5>
                                        </div>
                                    </div>
                                    <div class="bddb"></div>
                                    <div class="pt-3 pb-2 flex items-center justify-between">
                                        <p>@lang('frontend.order_detail')</p>
                                        <div class="pb-2">
                                            <div class="text-center f-link border border-gray p-2">
                                                <h4><i class="fa fa-print"></i></h4>
                                                <p class="text-xs nowrap">DOWNLOAD PDF</p><a class="f-url" href="javascript:print()"></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="bdt opacity-50"></div>
                                    <div class="py-2">
                                        <div class="fibt col-xsd">
                                            <p>@lang('frontend.order_date') </p>
                                            <p>{{ $order->created_at->format('Y-m-d H:i') ?? '-' }}</p>
                                        </div>
                                        <div class="fibt col-xsd">
                                            <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 col-xsd">
                                            <p>@lang('frontend.frnd_61') </p>
                                            <p>{{ payment_text_status($order->payment_status ?? 0) }}</p>
                                        </div>
                                        <div class="fibt col-xsd">
                                            <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="{{ url('product-detail') }}"></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">@lang('frontend::lang.m_purchased_detail_01')</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->grand_total))
                                        <div class="smry-wrapper">
                                            <div class="smry-sm">@lang('frontend::lang.m_purchased_detail_02')</div>
                                            <div class="smry-sm">{{ number_format(($order->sub_total - $order->grand_total) ?? 0, 2) }} THB</div>
                                        </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>
                            </div>
                        </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