@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>
                                    <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>
                                </div>
                            @endif
                            @if ($data['order']['quotation_status'] == 1)
                                <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>
                            @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.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">{{ __('frontend::frontend.table_head.product') }}</div>
                            <div class="cart-quantity">{{ __('frontend::frontend.table_head.quantity') }}</div>
                            <div class="cart-price">{{ __('frontend::frontend.table_head.price') }}</div>
                            <div class="cart-total text-right">{{ __('frontend::frontend.table_head.total') }}</div>
                        </div>

                        @foreach ($data['order']['items'] as $item)
                            <div class="cart-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">
                                        <p class="leading-4 text-14 max-h-[34px] font-bold">{{ $item['product']['name'] ?? '' }}</p>
                                        <div class="flex flex-col justify-center">
                                            @if (!empty($item['product']['detail']['brand']))
                                                @foreach ($item['product']['detail']['brand'] as $brand)
                                                    @if ($brand['lang'] == app()->getLocale())
                                                        <p class="text-[10px] mr-[.5rem] 2xl:!pb-0">{{ $brand['name'] ?? '' }}</p>
                                                    @endif
                                                @endforeach
                                            @endif
                                            @if (!empty($item['product']['detail']['category']))
                                                @foreach ($item['product']['detail']['category'] as $category)
                                                    @if ($category['lang'] == app()->getLocale())
                                                        <p class="text-[10px] mr-[.5rem] 2xl:!pb-0">{{ $category['name'] ?? '' }}</p>
                                                    @endif
                                                @endforeach
                                            @endif
                                        </div>
                                        <div class="cart-price xl:hidden">
                                            @if (!empty($item['discount']))
                                                <p class="font-bold">{{ number_format($item['price'], 2) }} {{ __('frontend::frontend.label.thb') }}</p>
                                                <p class="text-[10px] opacity-50 line-through">{{ number_format($item['normal_price'], 2) }} {{ __('frontend::frontend.label.thb') }}</p>
                                            @else
                                                <p class="font-bold">{{ number_format($item['price'], 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>
                                        {{ $item['quantity'] }}
                                    </span>
                                </div>

                                <div class="cart-price hidden xl:flex">
                                    @if (!empty($item['discount']))
                                        <p class="font-bold">{{ number_format($item['price'], 2) }} {{ __('frontend::frontend.label.thb') }}</p>
                                        <p class="text-[10px] opacity-50 line-through">{{ number_format($item['normal_price'], 2) }} {{ __('frontend::frontend.label.thb') }}</p>
                                    @else
                                        <p class="font-bold">{{ number_format($item['price'], 2) }} {{ __('frontend::frontend.label.thb') }}</p>
                                    @endif
                                </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'], 2) }} {{ __('frontend::frontend.label.thb') }}
                                        </span>
                                    </p>
                                </div>

                            </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-2/5 xl:w-1/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">{{ number_format($data['order']['sub_total'], 2) }} {{ __('frontend::frontend.label.thb') }}</div>
                            </div>
                            @if (!empty($data['order']['discount_total']))
                                <div class="flex opacity-40">
                                    <div class="w-full md:w-1/2 text-12">{{ __('frontend::frontend.member_order.discount') }}</div>
                                    <div class="w-full md:w-1/2 text-12 text-right">{{ number_format($data['order']['discount_total'], 2) }} {{ __('frontend::frontend.label.thb') }}</div>
                                </div>
                            @endif
                            <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">{{ 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