@extends('frontend::layouts.master')

@section('content')
    <div class="container py-6 xs:py-12 md:py-16">
        <div class="text-center mx-auto relative">
            <h2 class="font-bold text-32 md:text-[40px] text-dark dark:text-white leading-7">
                {{ __('frontend::frontend.member_quotation.detail') }}
            </h2>
        </div>
    </div>
    <div class="container pb-12 md:pb-16">
        <div class="flex lg:gap-6">
            <div class="lg:w-60 lg:py-6 bg-glass lg:px-2">
                @php
                    $menu = $data['member']['sidebar'] ?? [];
                @endphp
                <livewire:frontend::menu.member-sidebar active='4' :menuData=$menu />
            </div>
            <div class="flex-1 p-4 lg:p-6 bg-glass ">
                <div class="text-14 sm:text-16 font-semibold capitalize flex items-center justify-between">
                    <a href="{{ mwz_route('frontend.member.quotation') }}" class="flex space-x-2">
                        <img src="{{ Module::asset('frontend:img/back.svg') }}" alt="Back to Order">
                        <h4 class="font-semibold capitalize">
                            {{ __('frontend::frontend.member_quotation.quotation') }}
                        </h4>
                    </a>
                    <div class="xl:hidden">
                        <button class="sidebar-more-trigger">
                            <img src="{{ Module::asset('frontend:img/more.svg') }}" alt="More" class="lg:hidden w-7">
                        </button>
                    </div>
                </div>
                <div class="flex justify-between flex-wrap items-center flex-col md:flex-row -mx-4 ">
                    <div class="flex flex-col-reverse items-center md:flex-row  px-4 pt-5 md:py-4 ">
                        <div>
                            {{ __('frontend::frontend.member_quotation.quotation_no') }} : {{ $data['order']['order_no'] ?? '' }}
                        </div>
                        @php
                            switch ($data['order']['quotation_status']) {
                                case 2:
                                    $class = 'success-bg';
                                    break;
                                case 9:
                                    $class = 'canceled-bg';
                                    break;
                                default:
                                    $class = 'pending-bg';
                                    break;
                            }
                        @endphp
                        <div class="stat-payment {{ $class ?? 'pending-bg' }} mx-3 mb-2 md:mb-0 px-2">
                            {{ __('order::order.quotation_status.' . $data['order']['quotation_status']) }}
                        </div>

                        {{-- <div class="stat-payment pending-bg mx-3">
                            Wait to Recieve
                        </div>
                        <div class="stat-payment canceled-bg mx-3">
                            Canceled
                        </div>
                        <div class="stat-payment success-bg mx-3">
                            Success
                        </div> --}}
                    </div>
                    <div class="p-4 sm:py-2 flex flex-col items-end gap-2">
                        <div class="flex flex-col sm:flex-row items-center gap-2">
                            @if ($data['order']['quotation_status'] == 1)
                                <div class="flex items-center gap-2">
                                    <a href="{{ mwz_route('frontend.member.quotation_file', [$data['order']['uuid']]) }}" target="_blank" class="flex items-center gap-2 px-3 py-1 rounded-sm bg-primary ">
                                        <p class="text-12 text-white">{{ __('frontend::frontend.member_quotation.download_quotation') }}</p>
                                        <img src="{{ Module::asset('frontend:img/dow.svg') }}" alt="Download PDF" class="w-5 h-5">
                                    </a>
                                    @if ($data['order']['member_id'] == auth()->guard('member')->user()->id)
                                        <button type="button" class="flex items-center gap-2 px-3 py-1 rounded-sm bg-primary" onclick="initUploadPo()">
                                            <p class="text-12 text-white">{{ __('frontend::frontend.member_quotation.attachment_po') }}</p>
                                            <img src="{{ Module::asset('frontend:img/att.svg') }}" alt="Attach PO" class="w-5 h-5">
                                        </button>
                                    @endif
                                </div>
                            @endif
                            @if ($data['order']['quotation_status'] == 1)
                                @if ($data['order']['member_id'] == auth()->guard('member')->user()->id)
                                    <p class="hidden sm:block cancel-quotation">|</p>
                                    <button type="button" onclick="cancelQuotation('{{ $data['order']['uuid'] }}')" class="mt-2 sm:mt-0 text-12 px-3 py-1 rounded-sm bg-white text-primary border-primary border cancel-quotation">{{ __('frontend::frontend.member_quotation.cancel_quotation') }}</button>
                                @endif
                            @elseif ($data['order']['quotation_status'] == 9)
                                <button type="button" class="mt-2 sm:mt-0 text-12 px-3 py-1 rounded-sm bg-red-600 text-white border-white cancel-quotation">{{ __('frontend::frontend.member_quotation.canceled_quotation') }}</button>
                            @endif
                        </div>
                        @if ($data['order']['quotation_status'] == 1)
                            <div id="show_po_file">
                                @if (!empty($data['order']['po_src']))
                                    <a href="{{ $data['order']['po_src'] ?? '#' }}" target="_blank" class="text-[10px] mr-[150px] dn">{{ $data['order']['po_name'] ?? '#' }}</a>
                                @endif
                            </div>
                        @endif
                        <form class="dn" id="upload_po" onsubmit="return false;">
                            <input type="hidden" name="uuid" value="{{ $data['order']['uuid'] }}">
                            <input type="file" name="po_file" id="po_file" onchange="uploadPo()" accept="application/pdf" hidden>
                        </form>
                    </div>
                </div>

                <div class="pb-3 mt-4 flex flex-col gap-1">
                    <div class="member-profile-wrapper">
                        <div class="member-profile-title">
                            <p>
                                {{ __('frontend::frontend.member_quotation.quotation_date') }}
                                <span class="hidden sm:inline-block">:</span>
                            </p>
                        </div>
                        <div class="member-profile-detail">
                            <p>
                                {{ $data['order']['order_at'] ?? '' }}
                            </p>
                        </div>
                        <div class="member-profile-action">
                        </div>
                    </div>
                    <div class="member-profile-wrapper">
                        <div class="member-profile-title">
                            <p>
                                {{ __('frontend::frontend.member_order.payment_method') }}
                                <span class="hidden sm:inline-block">:</span>
                            </p>
                        </div>
                        @if (!empty($data['order']['payment_status']))
                            <div class="member-profile-detail flex items-center gap-1 font-medium">
                                <p>
                                    {{ $data['order']['payment']->local->name ?? '' }}
                                </p>
                                @php
                                    switch ($data['order']['payment_status']) {
                                        case 2:
                                            $class = 'success';
                                            break;
                                        case 9:
                                            $class = 'canceled';
                                            break;
                                        default:
                                            $class = 'pending';
                                            break;
                                    }
                                @endphp
                                <div class="stat-payment {{ $class }}-bg mb-2 mx-2 md:mb-0 px-2">
                                    {{ __('order::order.payment_status.' . $data['order']['payment_status']) }}
                                </div>
                                @if ($data['order']['payment_method_id'] == 1 && empty($data['order']['payment_slip']))
                                    <p> | </p>
                                    <a class="underline font-semibold text-red-500" href="{{ mwz_route('frontend.page.bank_tranfer', ['uuid' => $data['order']['uuid']]) }}">
                                        {{ __('frontend::frontend.member_order.attachment_slip') }}
                                    </a>
                                @endif
                            </div>
                        @else
                            @if ($data['order']['member_id'] == auth()->guard('member')->user()->id)
                                @if (!empty($data['payment_methods']) && $data['order']['status'] < 2)
                                    <x-frontend::modal.basicmodal modalName="ModalPayment">
                                        <x-slot:modalButton>
                                            <span class="tracking-wide text-right dark:text-white initPayment"><u>{{ __('frontend::frontend.member_order.select_payment_method') }}</u></span>
                                        </x-slot>
                                        <x-slot:modalContent>
                                            <p class="font-medium text-center mb-4">{{ __('frontend::frontend.member_order.select_payment_method') }}</p>
                                            <div class="mx-auto max-w-sm profile-edit-modal">
                                                <div class="flex flex-wrap -mx-2">
                                                    @foreach ($data['payment_methods'] as $payment_method)
                                                        @if ($payment_method->id == 3 && (empty(auth()->guard('member')->user()->company_id) || empty(auth()->guard('member')->user()->company->credit_terms)))
                                                            @continue
                                                        @endif
                                                        <div class="w-full px-2 mt-4">
                                                            <div class="flex items-center justify-center gap-2">
                                                                <button class="button-primary w-full" type="button" onclick="setPaymentMethod('{{ $data['order']['uuid'] }}',{{ $payment_method->id }})" @click="ModalPayment = false">{{ $payment_method->local->name ?? 'PaymentMethod-' . $payment_method->id }}</button>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                    {{-- <div class="w-full px-2 mt-4">
                                                <div class="flex items-center justify-center gap-2">
                                                    <button class="button-primary w-full" type="button" @click="ModalPayment = false">เลือกวิธีการชำระเงิน</button>
                                                </div>
                                            </div>
                                            <div class="w-full px-2 mt-4">
                                                <div class="flex items-center justify-center gap-2">
                                                    <button class="button-primary w-full" type="button" @click="ModalPayment = false">เลือกวิธีการชำระเงิน</button>
                                                </div>
                                            </div> --}}
                                                </div>
                                            </div>
                                        </x-slot>
                                    </x-frontend::modal.basicmodal>
                                @endif
                            @endif
                        @endif
                        <div class="member-profile-action">
                        </div>
                    </div>
                    <div class="member-profile-wrapper">
                        <div class="member-profile-title">
                            <p>
                                {{ __('frontend::frontend.account_address_delivery') }}
                                <span class="hidden sm:inline-block">:</span>
                            </p>
                        </div>
                        <div class="member-profile-detail">
                            <span>{{ $data['order']['member_detail']['first_name'] ?? '' }} {{ $data['order']['member_detail']['last_name'] ?? '' }}</span>
                            @if (!empty($data['order']['member_detail']['tel']))
                                <span>({{ $data['order']['member_detail']['tel'] }})</span>
                            @endif
                            <br>
                            <span class="mt-1 block">{{ $data['order']['shipping_address_detail']['branch_name'] ?? '' }} {{ $data['order']['shipping_address_detail']['building'] ?? '' }} {{ $data['order']['shipping_address_detail']['street_no'] ?? '' }} {{ $data['order']['shipping_address_detail']['street'] ?? '' }} {{ $data['order']['shipping_address_detail']['block'] ?? '' }} {{ $data['order']['shipping_address_detail']['city'] ?? '' }} {{ $data['order']['shipping_address_detail']['zip_code'] ?? '' }}</span>
                        </div>
                        <div class="member-profile-action">
                        </div>
                    </div>
                </div>

                <div class="pb-4 mt-2">
                    <div class="cart-table order-detail-table">

                        <div class="cart-row cart-title">
                            <div class="cart-item justify-center">{{ __('frontend::frontend.table_head.product') }}</div>
                            <div class="cart-quantity justify-center">{{ __('frontend::frontend.table_head.quantity') }}</div>
                            <div class="cart-price text-center justify-center">{{ __('frontend::frontend.table_head.price') }}</div>
                            <div class="cart-total justify-center">{{ __('frontend::frontend.table_head.total') }}</div>
                        </div>

                        {{-- Pre-order Item --}}
                        @foreach ($data['order']['items'] as $item)
                            {{-- @dump($item) --}}
                            <div class="cart-row pre-order-row">
                                <div class="cart-item">
                                    <div class="cart-item-img">
                                        <div class="aspcov">
                                            <img src="{{ $item['image'] ?? '' }}" alt="{{ $item['product']['name'] ?? '' }}">
                                        </div>
                                    </div>
                                    <div class="cart-item-detail">
                                        <div class="flex gap-2">
                                            @if ($item['is_promotion'])
                                                @if (!empty($item['promotion_type']))
                                                    <div class="flex items-center gap-2 mb-2 ">
                                                        <p class="inline-block text-[10px] px-1 py-[2px] rounded-sm bg-danger text-white">
                                                            {{ __('frontend::frontend.label.promotion_' . $item['promotion_type']) }}
                                                        </p>
                                                    </div>
                                                @else
                                                    <div class="flex items-center gap-2 mb-2">
                                                        <p class="inline-block text-[10px] px-1 py-[2px] rounded-sm bg-danger text-white">
                                                            {{ __('frontend::frontend.label.free_item') }}
                                                        </p>
                                                    </div>
                                                @endif
                                            @endif

                                            @if (!empty($item['pre_order_quantity']))
                                                <div class="flex items-center gap-2 mb-2">
                                                    <p class="inline-block text-[10px] px-1 py-[2px] rounded-sm bg-primary text-white">
                                                        {{ __('frontend::frontend.label.pre_order') }}
                                                    </p>
                                                    <p class="inline-block text-[10px] pt-1">({{ number_format($item['pre_order_quantity']) }} of {{ number_format($item['quantity']) }})</p>
                                                </div>
                                            @endif
                                        </div>
                                        <p class="leading-4 text-14 max-h-[34px] font-bold">{{ $item['product']['name'] ?? '' }}</p>
                                        <div class="flex flex-col justify-center">
                                            <p class="text-[10px] mr-[.5rem] 2xl:!pb-0">
                                                @if (!empty($item['product']['detail']['brand']))
                                                    @foreach ($item['product']['detail']['brand'] as $brand)
                                                        @if ($brand['lang'] == app()->getLocale())
                                                            {{ $brand['name'] }} |
                                                        @endif
                                                    @endforeach
                                                @endif
                                                @if (!empty($item['product']['detail']['category']))
                                                    @foreach ($item['product']['detail']['category'] as $category)
                                                        @if ($category['lang'] == app()->getLocale())
                                                            {{ $category['name'] }}
                                                        @endif
                                                    @endforeach
                                                @endif
                                            </p>
                                        </div>
                                        <div class="cart-price xl:hidden">
                                            <p class="font-bold">{{ number_format($item['price'] ?? 0, 2) }} {{ __('frontend::frontend.label.thb') }}</p>
                                            @if (!empty($item['discount']))
                                                <p class="text-[10px] opacity-50 line-through">{{ number_format($item['normal_price'] ?? 0, 2) }} {{ __('frontend::frontend.label.thb') }}</p>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="cart-quantity text-14 xl:text-16 flex items-center">
                                    <span class="xl:hidden">
                                        {{ __('frontend::frontend.table_head.qty') }} :&nbsp;
                                    </span>
                                    <span>
                                        {{ number_format($item['quantity'] ?? 0) }}
                                    </span>
                                </div>
                                <div class="cart-price hidden xl:flex text-right items-center">
                                    <div>
                                        <p class="font-bold">{{ number_format($item['price'] ?? 0, 2) }} {{ __('frontend::frontend.label.thb') }}</p>
                                        @if (!empty($item['discount']))
                                            <p class="text-[10px] opacity-50 line-through">{{ number_format($item['normal_price'] ?? 0, 2) }} {{ __('frontend::frontend.label.thb') }}</p>
                                        @endif
                                    </div>
                                </div>
                                <div class="cart-total text-right">
                                    <p>
                                        <span class="xl:hidden">
                                            {{ __('frontend::frontend.table_head.total') }} :&nbsp;
                                        </span>
                                        <span class="font-bold">
                                            {{ number_format($item['sub_total'] ?? 0, 2) }} {{ __('frontend::frontend.label.thb') }}
                                        </span>
                                    </p>
                                </div>
                            </div>
                            @if (!empty($item['shipping']['progress']))
                                @foreach ($item['shipping']['progress'] as $progress)
                                    <div class="cart-row pre-order-deliver">
                                        <div class="cart-item flex-[initial]">
                                            <div class="cart-item-img">
                                            </div>
                                            <div class="cart-item">
                                                <div class="cart-item-detail">
                                                    <div>
                                                        <p class="inline-block text-[10px] px-1 py-[2px] rounded-sm item-pending text-white">
                                                            {{ number_format($progress->quantity ?? 0) }} {{ __('frontend::frontend.label.items') }} {{ __('frontend::frontend.label.delivering') }}
                                                        </p>
                                                    </div>
                                                    <div class="cart-price xl:hidden">
                                                    </div>
                                                    {{-- <p class="block font-bold text-[10px] rounded-sm tracking-delivering ">
                                                        AR No. : {{ $progress->order_shipping->tracking_id ?? '' }}
                                                    </p> --}}
                                                    <a class="block font-bold text-[10px] rounded-sm tracking-delivering" href="{{ $progress->order_shipping->tracking_url ?? '' }}">
                                                        {{ __('frontend::frontend.member_order.tracking_no') }} {{ $progress->order_shipping->tracking_id ?? '' }}
                                                    </a>
                                                    @if (!empty($progress->order_shipping->invoice_no))
                                                        <span class="block font-bold text-[10px] rounded-sm tracking-delivering">
                                                            {{ __('frontend::frontend.member_order.invoice_no') }} : {{ $progress->order_shipping->invoice_no ?? '' }}
                                                        </span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                            @if (!empty($item['shipping']['success']))
                                @foreach ($item['shipping']['success'] as $success)
                                    <div class="cart-row pre-order-deliver">
                                        <div class="cart-item flex-[initial]">
                                            <div class="cart-item-img">
                                            </div>
                                            <div class="cart-item">
                                                <div class="cart-item-detail">
                                                    <div>
                                                        <p class="inline-block text-[10px] px-1 py-[2px] rounded-sm item-success text-white">
                                                            {{ number_format($success->quantity ?? 0) }} {{ __('frontend::frontend.label.items') }} {{ __('frontend::frontend.label.delivered') }}
                                                        </p>
                                                    </div>
                                                    <div class="cart-price xl:hidden">
                                                    </div>
                                                    {{-- <p class="block font-bold text-[10px] rounded-sm tracking-delivering ">
                                                        AR No. : {{ $success->order_shipping->tracking_id ?? '' }}
                                                    </p> --}}
                                                    <a class="block font-bold text-[10px] rounded-sm tracking-delivering" href="{{ $success->order_shipping->tracking_url ?? '' }}">
                                                        {{ __('frontend::frontend.member_order.tracking_no') }} {{ $success->order_shipping->tracking_id ?? '' }}
                                                    </a>
                                                    @if (!empty($success->order_shipping->invoice_no))
                                                        <span class="block font-bold text-[10px] rounded-sm tracking-delivering">
                                                            {{ __('frontend::frontend.member_order.invoice_no') }} : {{ $success->order_shipping->invoice_no ?? '' }}
                                                        </span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                            {{-- <div class="cart-row pre-order-deliver">
                                <div class="cart-item flex-[initial]">
                                    <div class="cart-item-img">
                                    </div>
                                    <div class="cart-item ">
                                        <div class="cart-item-detail">
                                            <div>
                                                <p class="inline-block text-[10px] px-1 py-[2px] rounded-sm item-success text-white">
                                                    2 items Delivered
                                                </p>
                                            </div>
                                            <div class="cart-price xl:hidden">
                                            </div>
                                            <p class="block font-bold text-[10px] rounded-sm tracking-delivering ">
                                                AR No. : 04234872398749
                                            </p>
                                            <a class="block text-[10px] -mt-[3px] rounded-sm tracking-delivering " href="#">
                                                Tracking No. : 042348723987492384
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div> --}}

                            <div class="cart-row py-0"></div>
                        @endforeach
                    </div>
                </div>
                <div class="lg:px-4 lg:pb-4">
                    <div class="flex flex-col md:flex-row justify-between">
                        <div class="w-full md:w-3/5 xl:w-2/3">
                            @if (!empty($data['order']['invoice_address_detail']))
                                <p class="font-semibold tracking-wider">
                                    {{ __('frontend::frontend.member_order.tax_invoice') }}
                                </p>
                                <p class="mt-2 text-13">
                                    {{ $data['order']['member_detail']['tax_id'] ?? '' }}
                                </p>
                                <div class="flex items-baseline flex-wrap -mx-1">
                                    <p class="px-1 text-14 tracking-wider">
                                        {{ $data['order']['invoice_address_detail']['branch_name'] }}
                                    </p>
                                    {{-- <p class="px-1 text-13">
                                        (012-3456789)
                                    </p> --}}
                                </div>
                                <p class="text-13">
                                    {{ $data['order']['invoice_address_detail']['building'] ?? '' }} {{ $data['order']['invoice_address_detail']['street_no'] ?? '' }} {{ $data['order']['invoice_address_detail']['street'] ?? '' }} {{ $data['order']['invoice_address_detail']['block'] ?? '' }} {{ $data['order']['invoice_address_detail']['city'] ?? '' }} {{ $data['order']['invoice_address_detail']['zip_code'] ?? '' }}
                                </p>
                            @endif
                        </div>
                        <div class="w-full md:w-2/5 xl:w-1/3 mt-4 md:mt-0">
                            <div class="flex lg:gap-6">
                                <div class="w-full md:w-1/2">{{ __('frontend::frontend.member_order.sub_total') }}</div>
                                <div class="w-full md:w-1/2 text-right whitespace-nowrap">{{ number_format($data['order']['sub_total'], 2) }} {{ __('frontend::frontend.label.thb') }}</div>
                            </div>
                            @if (!empty($data['order']['discount_total']))
                                <div class="flex lg:gap-6">
                                    <div class="w-full md:w-1/2">{{ __('frontend::frontend.member_order.discount') }}</div>
                                    <div class="w-full md:w-1/2 text-right whitespace-nowrap">{{ number_format($data['order']['discount_total'], 2) }} {{ __('frontend::frontend.label.thb') }}</div>
                                </div>
                            @endif
                            <div class="flex lg:gap-6">
                                <div class="w-full md:w-1/2">{{ __('frontend::frontend.member_order.vat') }}</div>
                                <div class="w-full md:w-1/2 text-right whitespace-nowrap">{{ number_format($data['order']['vat_total'], 2) }} {{ __('frontend::frontend.label.thb') }}</div>
                            </div>
                            <div class="flex mt-4">
                                <div class="w-full md:w-1/2 text-18 font-bold">{{ __('frontend::frontend.member_order.total') }}</div>
                                <div class="w-full md:w-1/2 text-18 font-bold text-right whitespace-nowrap">{{ number_format($data['order']['grand_total'], 2) }} {{ __('frontend::frontend.label.thb') }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    {{ module_vite('build-mwz', 'resources/assets/js/lang.' . app()->getLocale() . '.js') }}
    {{ module_vite('build-mwz', 'resources/assets/js/mwz.js') }}
    {{ module_vite('build-frontend', 'resources/assets/js/quotation.js') }}
@endsection