@extends('admin::layouts.master')
@php
use Webkul\Attribute\Models\AttributeOption;
@endphp
@section('page_title')
{{ __('admin::app.sales.orders.view-title', ['order_id' => $order->increment_id]) }} - {{
isset($order->customer->first_name ) ? $order->customer->first_name .' '.$order->customer->last_name : 'Guest' }}
@stop

@section('content-wrapper')
<div class="content full-page">
    <div class="page-header">
        <div class="page-title">
            <h1>
                {!! view_render_event('sales.order.title.before', ['order' => $order]) !!}
                <i class="icon angle-left-icon back-link" onclick="history.length > 1 ? history.go(-1) : window.location = '{{ route('admin.dashboard.index') }}';"></i>
                 Order #<span style="cursor:pointer;" @click="clickToClipboard()">{{ $order->increment_id}}</span>
                {!! view_render_event('sales.order.title.after', ['order' => $order]) !!}
            </h1>
        </div>
        @php
        $isWalletProduct = false;
        foreach ($order->items as $item) {
        if ($item->sku == 'wallet_product') {
        $isWalletProduct = true;
        }
        }
        $isPartialPayment = false;
        $remain = null;
        if ($order->additional != null) {
        $wallet = json_decode($order->additional);
        if ($wallet->is_partial_payment) {
        $isPartialPayment = true;
        $remain = $wallet->remaining;
        }
        }
        @endphp

        <div class="page-action">
            {!! view_render_event('sales.order.page_action.before', ['order' => $order]) !!}

            @if($order->status == 'canceled')
            <a href="{{ route('admin.sales.orders.edit', $order->id) }}" class="btn btn-sm btn-primary">
                <span class="material-symbols-outlined mt-2">edit</span>
                {{ __('Edit') }}
            </a>
            <a onclick="openEmailModal('emailModalShow')" class="btn btn-sm btn-primary">
                <span class="material-symbols-outlined mt-2">mail</span>
                {{ __('Email') }}
            </a>
            @elseif($order->status == 'pending')
            @if ($order->canInvoice() && !$isWalletProduct && $order->payment->method !== 'paypal_standard')
            <a href="javascript:void(0)" class="btn btn-sm btn-success" @click="handleButton('createInvoice')">
                <span class="material-symbols-outlined mt-2">check</span>
                {{ __('Confirm') }}
            </a>
            @endif
            <a href="{{ route('admin.sales.orders.edit', $order->id) }}" class="btn btn-sm btn-primary">
                <span class="material-symbols-outlined mt-2">edit_square</span>
                {{ __('Edit') }}
            </a>
            <a onclick="openEmailModal('emailModalShow')" class="btn btn-sm btn-primary">
                <span class="material-symbols-outlined mt-2">mail</span>
                {{ __('Email') }}
            </a>
            @if ($order->canCancel() && !$isWalletProduct && bouncer()->hasPermission('sales.orders.cancel'))
            <a href="{{ route('admin.sales.orders.cancel', $order->id) }}" class="btn btn-sm btn-danger" v-alert:message="'{{ __('admin::app.sales.orders.cancel-confirm-msg') }}'">
                <span class="material-symbols-outlined mt-2">cancel</span>
                {{ __('Cancel') }}
            </a>
            @endif
            @elseif($order->status == 'processing' && count($order->invoices) > 0 && $order->invoices[0]->state == 'pending')
            <a href="{{ config('services.liveUrl.url') }}/AFD/terminal.aspx?oid={{$order->increment_id}}" target="_blank" class="btn btn-sm btn-success">
                <span class="material-symbols-outlined mt-2">payments</span>
                {{ __('Pay') }}
            </a>
            <a href="{{ route('admin.sales.orders.edit', $order->id) }}" class="btn btn-sm btn-primary">
                <span class="material-symbols-outlined mt-2">edit_square</span>
                {{ __('Edit') }}
            </a>
            <a onclick="openEmailModal('emailModalShow')" class="btn btn-sm btn-primary">
                <span class="material-symbols-outlined mt-2">mail</span>
                {{ __('Email') }}
            </a>
            @if ($order->canCancel() && !$isWalletProduct && bouncer()->hasPermission('sales.orders.cancel'))
            <a href="{{ route('admin.sales.orders.cancel', $order->id) }}" class="btn btn-sm btn-danger" v-alert:message="'{{ __('admin::app.sales.orders.cancel-confirm-msg') }}'">
                <span class="material-symbols-outlined mt-2">cancel</span>
                {{ __('Cancel') }}
            </a>
            @endif
            @elseif($order->status == 'processing' && count($order->invoices) > 0 && $order->invoices[0]->state == 'paid' && isset($order->estimate_start_date) && $order->estimate_start_date > date('Y-m-d H:i:s'))
            @if ($order->canShip() && !$isWalletProduct)
            <a href="{{ route('admin.sales.shipments.create', $order->id) }}" class="btn btn-sm btn-success">
                <span class="material-symbols-outlined mt-2">local_shipping</span>
                {{ __('admin::app.sales.orders.shipment-btn-title') }}
            </a>
            @endif
            <a href="{{ route('admin.sales.orders.edit', $order->id) }}" class="btn btn-sm btn-primary">
                <span class="material-symbols-outlined mt-2">edit_square</span>
                {{ __('Edit') }}
            </a>
            <a onclick="openEmailModal('emailModalShow')" class="btn btn-sm btn-primary">
                <span class="material-symbols-outlined mt-2">mail</span>
                {{ __('Email') }}
            </a>
            @if ($order->canRefund())
            <a href="{{ route('admin.sales.refunds.create', $order->id) }}" class="btn btn-sm btn-danger">
                <span class="material-symbols-outlined mt-2">payments</span>
                {{ __('admin::app.sales.orders.refund-btn-title') }}
            </a>
            @endif
            @elseif($order->status == 'processing' && count($order->invoices) > 0 && $order->invoices[0]->state == 'paid' && isset($order->estimate_start_date) && $order->estimate_start_date <= date('Y-m-d H:i:s') && $order->canRefund())
                <a href="{{ route('admin.sales.refunds.create', $order->id) }}" class="btn btn-sm btn-primary">
                    {{ __('admin::app.sales.orders.refund-btn-title') }}
                </a>
                @if ($order->canShip() && !$isWalletProduct)
                <a href="{{ route('admin.sales.shipments.create', $order->id) }}" class="btn btn-sm btn-primary">
                    {{ __('admin::app.sales.orders.shipment-btn-title') }}
                </a>
                @endif
                @endif

                @if ($isWalletProduct && $order->canConfirm())
                <a href="{{ route('admin.orders.wallet.amount.confirm', $order->id) }}" class="btn btn-sm btn-primary" v-alert:message="'{{ __('Do you want to confirm Wallet Order') }}'">
                    {{ __('Confirm Wallet Order') }}
                </a>
                @endif
                {!! view_render_event('sales.order.page_action.after', ['order' => $order]) !!}
        </div>
        <form action="{{ route('admin.sales.invoices.custom_store')}}" class="d-inline-block" id="createInvoice" method="post">
            @csrf
            <input type="hidden" name="order_id" value="{{$order->id}}">
        </form>
    </div>

    <div class="page-content">
        <tabs>
            {!! view_render_event('sales.order.tabs.before', ['order' => $order]) !!}
            <tab name="{{ __('admin::app.sales.orders.info') }}" :selected="true">
                <div class="sale-container">
                    <div class="flex flex-col lg:flex-row gap-4 main-warpaer mt-4" slot="body">
                        <div class=" flex-1">
                            <div class="sale-section mb-5">
                                <div class="md:flex w-full gap-10">
                                    <div class="section-content w-full mb-5 md:mb-0 space-y-2">
                                        <div class="secton-title light-gray-bg flex gap-10" style="justify-content:space-between;align-items:center;">
                                            <h2 class="heading">{{ __('Order Status') }}</h2>
                                            @php
                                            $statusClass= '';

                                            if(isset($order->estimate_start_date)
                                            && $order->status == 'processing'
                                            && (count($order->invoices) > 0)
                                            && $order->estimate_start_date <= date('Y-m-d H:i:s') && $order->
                                                invoices[0]->state == 'paid'){
                                                $statusClass = 'badge badge-sm badge-info';
                                                }
                                                elseif($order->status == 'processing'
                                                && (count($order->invoices) > 0)
                                                && ($order->invoices[0]->state == 'pending'))
                                                {
                                                $statusClass='badge badge-sm badge-warning';
                                                }
                                                elseif($order->status == 'processing' || $order->status == 'completed'){
                                                $statusClass = 'badge badge-sm badge-success';
                                                }
                                                elseif($order->status == 'canceled' || $order->status == 'fraud'){
                                                $statusClass = 'badge badge-sm badge-danger';
                                                }
                                                elseif($order->status == 'pending' || $order->status ==
                                                'pending_payment'){
                                                $statusClass = 'badge badge-sm badge-warning';
                                                }
                                                elseif($order->status == 'closed'){
                                                $statusClass='badge badge-sm badge-info';
                                                }
                                                @endphp
                                                <span class="value {{ $statusClass }}">
                                                    @if(isset($order->estimate_start_date)
                                                    && $order->status == 'processing'
                                                    && (count($order->invoices) > 0)
                                                    && $order->invoices[0]->state == 'paid'
                                                    && $order->estimate_start_date <= date('Y-m-d H:i:s')) {{
                                                        __('Shipping') }} @elseif($order->status == 'processing'
                                                        && (count($order->invoices) > 0)
                                                        && ($order->invoices[0]->state == 'pending'))
                                                        {{ __('Pending Payment') }}
                                                        @else
                                                        {{ $order->status_label }}
                                                        @endif
                                                </span>
                                        </div>
                                        <div class="sale-section mb-4 w-full px-4">
                                            <div class="section-content space-y-2">
                                                <div class="row">
                                                    <span class="title">
                                                        <span class="material-symbols-outlined" style="float: left; font-size:18px; margin-right:5px">point_of_sale</span>
                                                        <span class="value">
                                                            {{ date('m-d-Y',strtotime($order->created_at)) }}
                                                        </span>
                                                    </span>
                                                    <span style="display: flex;align-items:center;gap: 0.25em;">
                                                        <span class="material-symbols-outlined" style="font-size: 18px;">orders
                                                        </span>
                                                        @if(!empty($order->customer_id))
                                                        <a class="value" target="_blank" href="{{ route('admin.customer.edit', ['id' => $order->customer->id,'active' => 'orders'])}}">{{
                                                            $orderAgainstCustomer ?? '' }}
                                                        </a>
                                                        @else
                                                        <a class="value" target="_blank" href="javascript:void(0)">{{
                                                        $orderAgainstCustomer ?? ''}}</a>

                                                        @endif
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="w-full gap-10">
                                            <div class="sale-section w-full">
                                                <div class="secton-title light-gray-bg">
                                                    <div class="row">
                                                        <h2 class="heading">{{ __('Schedule') }}</h2>
                                                        <span class="material-symbols-outlined" style="cursor:pointer">calendar_month
                                                            <span class="hidden">
                                                                <date-range hide-remove-button="1">
                                                                    <input type="text" autocomplete="off" @change="modifyEstimateddate($event,{{$order->id}})" class="control dateEstimate">
                                                                </date-range>
                                                            </span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="sale-section  mb-4 w-full px-4">
                                            <div class="section-content space-y-2">
                                                <div class="row">
                                                    <span class="title">
                                                        <span class="material-symbols-outlined" style="float: left; font-size:18px; margin-right:5px">local_shipping</span>
                                                        <span class="value">
                                                            @if(!empty($order->estimate_end_date))
                                                            {{ date('D m-j',
                                                            strtotime($order->estimate_start_date)) }} to {{ date('D m-d',
                                                            strtotime($order->estimate_end_date)) }}
                                                            @else
                                                            {{ date('D m-d',strtotime($order->estimate_start_date)) }}
                                                            @endif
                                                        </span>
                                                    </span>

                                                </div>
                                            </div>
                                        </div>
                                        {!! view_render_event('sales.order.created_at.after', ['order' => $order]) !!}
                                        {!! view_render_event('sales.order.channel_name.after', ['order' => $order]) !!}
                                        <div class="w-full gap-10">
                                            <div class="sale-section w-full">
                                                <div class="secton-title light-gray-bg">
                                                    <div class="row">
                                                        <h2 class="heading"> {{ __('Contact') }}</h2>
                                                        @if(!empty($order->customer_id))
                                                        <a class="value" href="{{ route('admin.customer.edit', ['id' => $order->customer_id])}}" target="_blank">
                                                            <span class="material-symbols-outlined" style="font-size: 18px; float:right; color:#000;">edit
                                                            </span>
                                                        </a>
                                                        @else
                                                        <a class="value" href="javascript:void(0)" target="_blank">
                                                            <span class="material-symbols-outlined" style="font-size: 18px; float:right; color:#000;">edit
                                                            </span>
                                                        </a>
                                                        @endif
                                                        <!-- <span class="material-symbols-outlined"
                                                        style="font-size: 18px; float:right;">edit
                                                    </span> -->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="sale-section mb-4 w-full lg:max-w-50 px-4">
                                            <div class="section-content space-y-2">
                                                <div>
                                                    <div>
                                                        @if(!empty(trim($order->customer_full_name)))
                                                        {{ $order->customer_full_name }}
                                                        @else
                                                        {{ $order->billing_address->first_name }} {{ $order->billing_address->last_name }}
                                                        @endif
                                                    </div>
                                                    <div> {{ $order->customer_email ?? $order->billing_address->email }} </div>
                                                    <div id="formattedPhone"> </div>
                                                </div>
                                            </div>
                                        </div>
                                        @if ($order->billing_address || $order->shipping_address)
                                        @if ($order->billing_address)
                                        <div class="w-full gap-10">
                                            <div class="sale-section w-full">
                                                <div class="secton-title light-gray-bg">
                                                    <div class="row">
                                                        <h2 class="heading"> {{ __('Billing') }} </h2>
                                                        <a class="value" href="{{ route('admin.sales.orders.edit', $order->id) }}" target="_blank">
                                                            <span class="material-symbols-outlined" style="font-size: 18px; float:right; color:#000;">edit
                                                            </span>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="sale-section mb-4 w-full lg:max-w-50 px-4">
                                            <div class="section-content space-y-2">
                                                <div>
                                                    <div> {{ $order->billing_address->name }}</div>
                                                    <div>{{ $order->billing_address->address1 }} {{
                                                            $order->billing_address->address2 }} </div>
                                                    <div>{{ $order->billing_address->city }}, {{
                                                            $order->billing_address->state }} {{ $order->billing_address->postcode }}</div>
                                                    <div></div>
                                                    <div>@if($order->billing_address->country != 'US') {{ $order->billing_address->country }} @endif</div>
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                        @if ($order->shipping_address)
                                        <div class="w-full gap-10">
                                            <div class="sale-section w-full">
                                                <div class="secton-title light-gray-bg">
                                                    <div class="row">
                                                        <h2 class="heading"> {{ __('Shipping') }} </h2>
                                                        <a class="value" href="{{ route('admin.sales.orders.edit', $order->id) }}" target="_blank">
                                                            <span class="material-symbols-outlined" style="font-size: 18px; float:right; color:#000;">edit
                                                            </span>
                                                        </a>
                                                        <!-- <span class="material-symbols-outlined"
                                                        style="font-size: 18px; float:right;">edit
                                                    </span> -->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="sale-section mb-4 w-full lg:max-w-50 px-4">
                                            <div class="section-content space-y-2">
                                                <div>
                                                    <div> {{ $order->shipping_address->name }}</div>
                                                    <div>{{ $order->shipping_address->address1 }} {{
                                                            $order->shipping_address->address2 }} </div>
                                                    <div>{{ $order->shipping_address->city }}, {{
                                                            $order->shipping_address->state }} {{ $order->shipping_address->postcode }}</div>
                                                    <div>@if($order->shipping_address->country != 'US') {{ $order->shipping_address->country }} @endif</div>
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                        @endif
                                        <div class="w-full gap-10">
                                            <div class="sale-section w-full">
                                                <div class="secton-title light-gray-bg">
                                                    <div class="row ">
                                                        <h2 class="heading"> {{ __('admin::app.sales.orders.payment-method') }} </h2>
                                                        <a class="value" href="{{ config('services.liveUrl.url') }}/AFD/terminal.aspx?oid={{$order->increment_id}}" target="_blank">
                                                            <span class="material-symbols-outlined" style="font-size: 18px; float:right; color:#000;">credit_card_gear
                                                            </span>
                                                        </a>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="sale-section mb-4 w-full lg:max-w-50 px-4">
                                            <div class="section-content space-y-2">
                                                <div>
                                                    @if($order->payment)
                                                    <div>

                                                        {{ core()->getConfigData('sales.paymentmethods.' .
                                                            $order->payment->method . '.title') }}
                                                        @if ($isPartialPayment)
                                                        ,
                                                        {{
                                                            core()->getConfigData('sales.paymentmethods.mpwalletsystem.title')
                                                            }}
                                                        {{ _('(Partial Payment)') }}
                                                        @endif
                                                    </div>
                                                    <div>
                                                        {{ core()->formatBasePrice($order->base_grand_total) }}
                                                    </div>
                                                    @else
                                                    <div>Pay By Phone</div>
                                                    <div>Pending</div>
                                                    @endif

                                                </div>
                                            </div>
                                        </div>
                                        <!-- Purchase information -->
                                        <!-- <div class="w-full space-y-8">
                                            <div class="sale-section">
                                                <div class="secton-title">
                                                    <h2 class="heading mb-5">{{
                                                        __('admin::app.sales.orders.payment-info') }}</h2>
                                                </div>

                                                <div class="section-content space-y-2">
                                                    <div class="row px-2">
                                                        <span class="title small-heading">
                                                            {{ __('admin::app.sales.orders.payment-method') }}
                                                        </span>

                                                        <span class="value">
                                                            {{ core()->getConfigData('sales.paymentmethods.' .
                                                            $order->payment->method . '.title') }}

                                                            @if ($isPartialPayment)
                                                            ,
                                                            {{
                                                            core()->getConfigData('sales.paymentmethods.mpwalletsystem.title')
                                                            }}
                                                            {{ _('(Partial Payment)') }}
                                                            @endif
                                                        </span>
                                                    </div>

                                                    <div class="row light-gray-bg">
                                                        <span class="title">
                                                            {{ __('Payment Amount') }}
                                                        </span>

                                                        <span class="value">
                                                            {{ core()->formatBasePrice($order->base_grand_total) }}
                                                        </span>
                                                    </div>

                                                    @php $additionalDetails =
                                                    \Webkul\Payment\Payment::getAdditionalDetails($order->payment->method);
                                                    @endphp

                                                    @if (!empty($additionalDetails))
                                                    <div class="row">
                                                        <span class="title">
                                                            {{ $additionalDetails['title'] }}
                                                        </span>

                                                        <span class="value">
                                                            {{ $additionalDetails['value'] }}
                                                        </span>
                                                    </div>
                                                    @endif

                                                    {!! view_render_event('sales.order.payment-method.after', ['order'
                                                    => $order])
                                                    !!}
                                                </div>
                                            </div>                
                                        </div> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full max-w-700">
                            <!--Customer history -->
                            <div class="md:flex gap-4">
                                <div class="w-full">
                                    <div class="secton-title light-gray-bg flex items-center justify-between">
                                        <h2 class="heading">Customer History</h2>
                                        <div>
                                            <button type="button" class="btn btn-base btn-primary" onclick="openEmailModal('emailModalShow')">
                                                <span class="material-symbols-outlined" style="font-size: 18px; float:right; color:#fff;">mail</span></button>
                                        </div>
                                    </div>
                                    <ul class="comment-list">
                                        @if (isset($order->customerHistory) && count($order->customerHistory) > 0)
                                        @foreach ($order->customerHistory as $key => $customerHistory)
                                        <li class="system-comment">
                                            <p style="cursor:pointer;" onclick="openMessageModal('{{ $customerHistory->id }}','{{ $order->id }}','{{ $customerHistory->subject }}')">{{ date('m/d h:i A', strtotime($customerHistory->date_created)) }} : {{
                                                $customerHistory->subject }}</p>
                                        </li>

                                        @endforeach
                                        @else
                                        <li class="px-2">No Record Found</li>
                                        @endif
                                    </ul>
                                </div>

                                <div class="w-full">
                                    <div class="secton-title flex items-center light-gray-bg justify-between">
                                        <h2 class="heading">Order History</h2>
                                        <div>
                                            <button type="button" class="btn btn-base btn-primary" onclick="openModal(null)">
                                                <span class="material-symbols-outlined" style="font-size: 18px; float:right; color:#fff;">add_notes</span></button>
                                            <button type="button" class="btn btn-base btn-primary" onclick="openEmailModal('modalOrderHistoryShow')">
                                                <span class="material-symbols-outlined" style="font-size: 18px; float:right; color:#fff;">news</span></button>
                                        </div>
                                    </div>
                                    <ul class="comment-list">
                                        @if (count(
                                        $order->comments()->orderBy('id', 'desc')->get()))
                                        @foreach ($order->comments()->orderBy('id', 'desc')->get() as $comment)
                                        @if($comment->created_by == 2)
                                        <li class="system-comment">
                                            <label>{{ date('m/d h:i A', strtotime($comment->created_at)) }}:</label>
                                            <p>{{ $comment->created_by_user_name ? $comment->created_by_user_name . ' -' : '' }} {{$comment->comment }}</p>
                                        </li>
                                        @elseif($comment->created_by == 1)
                                        <li class="user-comment" onclick="openModal('{{$comment}}')">
                                            <label>{{ date('m/d h:i A', strtotime($comment->created_at)) }}:</label>
                                            <p> {{ $comment->created_by_user_name ? $comment->created_by_user_name . ' -' : '' }}  {{$comment->comment }}</p>
                                        </li>
                                        @endif
                                        @endforeach
                                        @else
                                        <li>No Record Found</li>
                                        @endif
                                    </ul>
                                </div>
                            </div>

                            <div class="flex-1 mt-20">
                                <div class="table productTable">
                                    <table>
                                        <thead>
                                            <tr>
                                                <th>&nbsp;</th>
                                                <th>{{ __('admin::app.sales.orders.SKU') }}</th>
                                                <th>{{ __('admin::app.sales.orders.product-name') }}</th>
                                                @if(auth()->guard('admin')->user()->role->name == 'Administrator' ||
                                                auth()->guard('admin')->user()->role->name == 'Manager')<th>{{
                                                    __('Cost') }}</th>@endif
                                                <th>{{ __('Price') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $items_count = $order->items->count();
                                            @endphp
                                            @foreach ($order->items as $key => $item)
                                            <tr>
                                                <td>
                                                    @if($item->product->attribute_family_id != 1)
                                                    @if (isset($item->product) && !empty($item->product) &&
                                                    count($item->product->images) > 0)
                                                    <div style="width: 64px; height: 64px;">
                                                        <img src="{{ $item->product->images[0]->path }}" style="width: 100%; height: 100%; object-fit: contain;" alt="">
                                                    </div>
                                                    @elseif(isset($item->product) &&
                                                    !empty($item->product) &&
                                                    isset($item->product->parent) &&
                                                    count($item->product->parent->images) > 0)
                                                    <div style="width: 64px; height: 64px;">
                                                        <img src="{{ $item->product->parent->images[0]->path }}" style="width: 100%; height: 100%; object-fit: contain;" alt="">
                                                    </div>
                                                    @else
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="#d1d1d1" viewBox="0 0 16 16">
                                                        <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
                                                        </path>
                                                        <path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z">
                                                        </path>
                                                    </svg>
                                                    @endif
                                                    @endif
                                                </td>
                                                <td>
                                                @if($item->product->attribute_family_id != 1)
                                                    <p>{{ $item->getTypeInstance()->getOrderedItem($item)->sku }}</p>
                                                    @php
                                                    $producthasStock = '';
                                                    if($item->product){
                                                    $producthasStock =$item->product->inventories()
                                                    ->where('inventory_source_id', 1)->where('qty','>','0')->first();
                                                    }
                                                    @endphp
                                                    @if($order->status != 'completed' &&
                                                    isset($item->product) &&
                                                    $item->product->attribute_family_id == 4)
                                                    @if($item->canInvoice())
                                                    <span class="value badge badge-md badge-danger">
                                                        Not Confirmed
                                                    </span>
                                                    @elseif(!$item->canInvoice() && !empty($producthasStock))
                                                    <span class="value badge badge-md badge-success">
                                                        Received
                                                    </span>
                                                    @elseif(!$item->canInvoice() && empty($producthasStock))
                                                    <div style="display: flex;">
                                                        <span class="value badge badge-md badge-warning fix-design">
                                                            Purchased
                                                        </span>
                                                        <form id="theForm" class="d-inline-block" method="post" action="{{ route('admin.sales.orders.product_status') }}">
                                                            @csrf
                                                            <input type="hidden" name="product_id" value="{{$item->product_id}}">
                                                            <input type="hidden" name="order_id" value="{{ $order->id }}">

                                                            <span style="margin-left: 10px;" class="value badge badge-md badge-success" @click="handleButton('theForm')">
                                                                <svg width="18px" height="18px" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 320"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
                                                                    <path d="M58.9 42.1c3-6.1 9.6-9.6 16.3-8.7L320 64 564.8 33.4c6.7-.8 13.3 2.7 16.3 8.7l41.7 83.4c9 17.9-.6 39.6-19.8 45.1L439.6 217.3c-13.9 4-28.8-1.9-36.2-14.3L320 64 236.6 203c-7.4 12.4-22.3 18.3-36.2 14.3L37.1 170.6c-19.3-5.5-28.8-27.2-19.8-45.1L58.9 42.1zM321.1 128l54.9 91.4c14.9 24.8 44.6 36.6 72.5 28.6L576 211.6v167c0 22-15 41.2-36.4 46.6l-204.1 51c-10.2 2.6-20.9 2.6-31 0l-204.1-51C79 419.7 64 400.5 64 378.5v-167L191.6 248c27.8 8 57.6-3.8 72.5-28.6L318.9 128h2.2z">
                                                                    </path>
                                                                </svg>
                                                            </span>
                                                        </form>
                                                    </div>
                                                    @endif
                                                    @endif
                                                    @endif
                                                </td>
                                                <td>
                                                    {{ $item->name }}
                                                        @if ($key + 1 != $items_count)
                                                        <hr>
                                                        @endif
                                                    
                                                    <div class="" style="width: 100px;
                                                    float: right;
                                                    text-align: right;
                                                    margin-top: 0px;">
                                                        <a @click="itemModalOpen({{$item}})" class="item-edit">
                                                            <span class="material-symbols-outlined" style="font-size: 18px; float:right; color:#000;">edit
                                                            </span>
                                                        </a>
                                                    </div>
                                                    <div class="item-options" :id="`item-option-div_{{$item->id}}`">
                                                        @if(!empty($item->data) && isset($item->data) && $item->data !=
                                                        'null')
                                                        @foreach (json_decode($item->data) as $key => $value)
                                                        <div class="flex justify-between">
                                                            <p class="additional-size">{{ $key }} :
                                                                <b> {{ $value }} </b>
                                                            </p>
                                                        </div>
                                                        @endforeach
                                                        @endif
                                                    </div>
                                                    @if (isset($item->additional['attributes']))
                                                    <div class="item-options">
                                                        @foreach ($item->additional['attributes'] as $attribute)
                                                        <b>{{ $attribute['attribute_name'] }} :
                                                        </b>{{ $attribute['option_label'] }}</br>
                                                        @endforeach
                                                    </div>
                                                    @endif
                                                </td>
                                                @if(auth()->guard('admin')->user()->role->name == 'Administrator' ||
                                                auth()->guard('admin')->user()->role->name == 'Manager' )
                                                <td>
                                                    @php
                                                    $cost = 0;
                                                    if(isset($item->product) &&
                                                    isset($item->product->attribute_values)){
                                                    $cost =
                                                    $item->product->attribute_values->where('attribute_id','12')->pluck('float_value')->first();
                                                    }
                                                    @endphp
                                                    <p>{{ core()->formatBasePrice($cost) ?? number_format('0', 2) }}</p>
                                                    @if(isset($item->product) && $item->product->attribute_family_id ==
                                                    4) <p>({{ number_format('0', 2) }}%)</p>@endif

                                                </td>
                                                @endif
                                                <td>
                                                    <p>{{ core()->formatBasePrice($item->base_total +
                                                        $item->base_tax_amount) }}</p>
                                                    <p> @if(isset($item->product) && $item->product->attribute_family_id
                                                        == 4)
                                                        @php
                                                        $price = $item->base_total + $item->base_tax_amount ?? 0;
                                                        $cost =
                                                        $item->product->attribute_values->where('attribute_id','12')->pluck('float_value')->first();
                                                        $val = $price > 0 ? ($price - $cost)/($price) * 100 : 0;
                                                        @endphp
                                                        ({{ number_format($val, 2) }}%)
                                                        @endif
                                                    </p>

                                                </td>
                                            </tr>
                                            @endforeach
                                    </table>
                                </div>
                                <div class="summary-comment-container">
                                <table class="sale-summary">
                                <tr>
                                    <td>{{ __('admin::app.sales.orders.subtotal') }}</td>
                                    <td>-</td>
                                    <td>{{ core()->formatBasePrice($order->base_sub_total) }}</td>
                                </tr>

                                @if ($order->haveStockableItems() && $order->base_shipping_amount > 0)
                                    <tr>
                                        <td>{{ __('admin::app.sales.orders.shipping-handling') }}</td>
                                        <td>-</td>
                                        <td>{{ core()->formatBasePrice($order->base_shipping_amount) }}</td>
                                    </tr>
                                @endif

                                @if ($order->base_discount_amount > 0)
                                    <tr>
                                        <td>
                                            {{ __('admin::app.sales.orders.discount') }}
                                            @if ($order->coupon_code)
                                                ({{ $order->coupon_code }})
                                            @endif
                                        </td>
                                        <td>-</td>
                                        <td>({{ core()->formatBasePrice($order->base_discount_amount) }})</td>
                                    </tr>
                                @endif

                                @if ($order->base_tax_amount > 0)
                                    <tr class="border">
                                        <td>{{ __('admin::app.sales.orders.tax') }}
                                                {{ number_format($order->tax_percentage, 2) }} %
                                        </td>
                                        <td>-</td>
                                        <td>{{ core()->formatBasePrice($order->base_tax_amount) }}</td>
                                    </tr>
                                @endif

                                <tr>
                                    <td>{{ __('admin::app.sales.orders.grand-total') }}</td>
                                    <td>-</td>
                                    <td>{{ core()->formatBasePrice($order->base_grand_total) }}</td>
                                </tr>

                                @if ($isPartialPayment)
                                    <tr>
                                        <td>{{ __('Paid By wallet') }}</td>
                                        <td>-</td>
                                        <td>{{ core()->formatBasePrice($order->base_grand_total - $remain) }}</td>
                                    </tr>
                                    <tr>
                                        <td>{{ __('Remaining Grand Total') }}</td>
                                        <td>-</td>
                                        <td>{{ core()->formatBasePrice($remain) }}</td>
                                    </tr>
                                @endif

                                @if ($order->base_grand_total_invoiced > 0)
                                    <tr>
                                        <td>{{ __('admin::app.sales.orders.total-paid') }}</td>
                                        <td>-</td>
                                        <td>{{ core()->formatBasePrice($order->base_grand_total_invoiced) }}</td>
                                    </tr>
                                @endif

                                @if ($order->base_grand_total_refunded > 0)           
                                    <tr>
                                        <td>{{ __('admin::app.sales.orders.total-refunded') }}</td>
                                        <td>-</td>
                                        <td>{{ core()->formatBasePrice($order->base_grand_total_refunded) }}</td>
                                    </tr>
                                @endif

                                @php
                                    $invoice_amount = 0;
                                    if (count($order->invoices) > 0 && $order->invoices[0]->state == 'paid') {
                                        $invoice_amount = $order->base_grand_total_invoiced;
                                    }
                                    $duePayment = (float)($order->grand_total) - (float)($invoice_amount);
                                @endphp
                                
                                @if ($isPartialPayment)
                                    <tr>
                                        <td>{{ __('admin::app.sales.orders.total-due') }}</td>
                                        <td>-</td>
                                        @if ($order->base_total_due > 0)
                                            <td>{{ core()->formatBasePrice($remain) }}</td>
                                        @elseif ($duePayment > 0)
                                            <td>{{ core()->formatBasePrice($duePayment) }}</td>
                                        @endif
                                    </tr>
                                @elseif (number_format($duePayment, 2) > 0)
                                    <tr>
                                        <td>{{ __('admin::app.sales.orders.total-due') }}</td>
                                        <td>-</td>
                                        <td>{{ core()->formatBasePrice($duePayment) }}</td>
                                    </tr>
                                @endif
                                </table>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </tab>
            <tab name="{{ __('admin::app.sales.orders.invoices') }}">
                <div class="table" style="padding: 20px 0">
                    <table>
                        <thead>
                            <tr>
                                <th>{{ __('admin::app.sales.invoices.id') }}</th>
                                <th>{{ __('admin::app.sales.invoices.date') }}</th>
                                <th>{{ __('admin::app.sales.invoices.order-id') }}</th>
                                <th>{{ __('admin::app.sales.invoices.customer-name') }}</th>
                                <th>{{ __('admin::app.sales.invoices.status') }}</th>
                                <th>{{ __('admin::app.sales.invoices.amount') }}</th>
                                <th>{{ __('admin::app.sales.invoices.action') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($order->invoices as $invoice)
                            <tr>
                                <td>#{{ $invoice->id }}</td>
                                <td>{{ $invoice->created_at }}</td>
                                <td>#{{ $invoice->order->increment_id }}</td>
                                <td>{{ $invoice->address->name ?? '' }}</td>
                                <td>{{ $invoice->status_label }}</td>
                                <td>{{ core()->formatBasePrice($invoice->base_grand_total) }}</td>
                                <td class="action">
                                    <a href="{{ route('admin.sales.invoices.view', $invoice->id) }}">
                                        <i class="icon eye-icon"></i>
                                    </a>
                                </td>
                            </tr>
                            @endforeach
                            @if (!$order->invoices->count())
                            <tr>
                                <td class="empty" colspan="7">{{ __('admin::app.common.no-result-found') }}
                                </td>
                            <tr>
                                @endif
                    </table>
                </div>
            </tab>
            <tab name="{{ __('admin::app.sales.orders.shipments') }}">
                <div class="table" style="padding: 20px 0">
                    <table>
                        <thead>
                            <tr>
                                <th>{{ __('admin::app.sales.shipments.id') }}</th>
                                <th>{{ __('admin::app.sales.shipments.date') }}</th>
                                <th>{{ __('admin::app.sales.shipments.carrier-title') }}</th>
                                <th>{{ __('admin::app.sales.shipments.tracking-number') }}</th>
                                <th>{{ __('admin::app.sales.shipments.total-qty') }}</th>
                                <th>{{ __('admin::app.sales.shipments.action') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($order->shipments as $shipment)
                            <tr>
                                <td>#{{ $shipment->id }}</td>
                                <td>{{ $shipment->created_at }}</td>
                                <td>{{ $shipment->carrier_title }}</td>
                                <td><a href="https://www.fedex.com/apps/fedextrack/?tracknumbers={{$shipment->track_number}}" target="_blank">{{ $shipment->track_number }}</a></td>
                                <td>{{ $shipment->total_qty }}</td>
                                <td class="action">
                                    <a href="{{ route('admin.sales.shipments.view', $shipment->id) }}">
                                        <i class="icon eye-icon"></i>
                                    </a>
                                </td>
                            </tr>
                            @endforeach
                            @if (!$order->shipments->count())
                            <tr>
                                <td class="empty" colspan="7">{{ __('admin::app.common.no-result-found') }}
                                </td>
                            <tr>
                                @endif
                    </table>
                </div>
            </tab>
            <tab name="{{ __('admin::app.sales.orders.refunds') }}">
                <div class="table" style="padding: 20px 0">
                    <table>
                        <thead>
                            <tr>
                                <th>{{ __('admin::app.sales.refunds.id') }}</th>
                                <th>{{ __('admin::app.sales.refunds.date') }}</th>
                                <th>{{ __('admin::app.sales.refunds.order-id') }}</th>
                                <th>{{ __('admin::app.sales.refunds.customer-name') }}</th>
                                <th>{{ __('admin::app.sales.refunds.status') }}</th>
                                <th>{{ __('admin::app.sales.refunds.refunded') }}</th>
                                <th>{{ __('admin::app.sales.refunds.action') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($order->refunds as $refund)
                            <tr>
                                <td>#{{ $refund->id }}</td>
                                <td>{{ $refund->created_at }}</td>
                                <td>#{{ $refund->order->increment_id }}</td>
                                <td>{{ $refund->order->customer_full_name }}</td>
                                <td>{{ __('admin::app.sales.refunds.refunded') }}</td>
                                <td>{{ core()->formatBasePrice($refund->base_grand_total) }}</td>
                                <td class="action">
                                    <a href="{{ route('admin.sales.refunds.view', $refund->id) }}">
                                        <i class="icon eye-icon"></i>
                                    </a>
                                </td>
                            </tr>
                            @endforeach
                            @if (!$order->refunds->count())
                            <tr>
                                <td class="empty" colspan="7">{{ __('admin::app.common.no-result-found') }}
                                </td>
                            <tr>
                                @endif
                    </table>
                </div>
            </tab>
            {!! view_render_event('sales.order.tabs.after', ['order' => $order]) !!}
        </tabs>
    </div>
</div>
<!-- modal -->
<div class="modal" id="modalShow" style="display:none">
    <div class="modal-body">
        <form action="{{ route('admin.sales.orders.comment', $order->id) }}" method="post" onsubmit="return checkComment(this)">
            @csrf()
            <input hidden type="text" value="" id="comment_id" name="comment_id" />
            <div class="control-group" :class="[errors.has('comment') ? 'has-error' : '']">
                <label for="comment" class="required">{{ __('admin::app.sales.orders.comment') }}</label>
                <textarea type="text" style="width:100%" class="control" id="comment" name="comment" oninput="removeError()"></textarea>
                <!-- <textarea style="width:100%" v-validate="'required'" class="control" id="comment" name="comment"></textarea> -->
                <!-- <span class="control-error" v-if="errors.has('comment')">@{{ errors.first('comment') }}</span> -->
                <span class="control-error" id="comment-error" style="display:none">Comment is required.</span>
            </div>
            <!-- <div class="control-group">
                        <span class="checkbox">
                            <input type="checkbox" name="customer_notified" id="customer-notified" name="checkbox[]">
                            <label class="checkbox-view" for="customer-notified"></label>
                            {{ __('admin::app.sales.orders.notify-customer') }}
                        </span>
                    </div> -->
            <button type="submit" class="btn btn-lg btn-primary modalSubmit">
                {{ __('admin::app.sales.orders.submit-comment') }}
            </button>
            <button type="button" class="btn btn-lg btn-info" onclick="closeModal('modalShow')">
                {{ __('Cancel') }}
            </button>
        </form>
    </div>
</div>

<!-- modal -->
<div class="modal messageModalShow" id="messageModalShow" style="display:none">
    <div class="modal-body">
        <p style="font-weight: bold;" id="subjectDisplay"></p>
        <hr>
        <div class="mb-15 messageModal" id="messageDisplay"></div>
        <hr>
        <div class="flex justify-between mt-15">
            <button onclick="sendEmailBtn()" class="btn btn-sm btn-primary modalSubmit">
                {{ __('Send Email') }}
            </button>
            <button type="button" class="btn btn-sm btn-info" onclick="closeModal('messageModalShow')">
                {{ __('Cancel') }}
            </button>
        </div>
    </div>
</div>


<!-- Send Email Modal-->
<div class="modal emailModalShow body-scroll" id="emailModalShow" style="display:none">
    <div class="modal-body">
        <form action="{{ route('admin.sales.orders.sentEmail') }}" class="grid grid-cols-2 gap-x-4 gap-y-2 p-5 form-class" method="post" onsubmit="return disableButton(this);">
            @csrf()
            <div class="control-group mb-0" :class="[errors.has('order_id') ? 'has-error' : '']">
                <div class="flex items-center">
                    <label for="order_id" class="w-28 text-center">{{ __('Order') }}</label>
                    <input type="text" class="control w-full flex-1 mt-0" name="order_id" value="{{$order->increment_id ?? ''}}">
                </div>
                <span class="control-error" v-if="errors.has('order_id')">@{{ errors.first('order_id') }}</span>
            </div>
            <div class="control-group mb-0" :class="[errors.has('template') ? 'has-error' : '']">
                <div class="flex items-center">
                    <label for="order_id" class="w-28">{{ __('Template') }}</label>
                    <select class="control w-full flex-1 mt-0" name="template" id="templateSelector">
                        <option value="">Select</option>
                        @if($order->templates)
                        @foreach($order->templates as $key => $template)
                        <option value="{{ $template }}">{{ $template->name }}</option>
                        @endforeach
                        @endif
                    </select>
                </div>
                <span id="newKeySpan_1" style="color:red;margin-left:115px;"></span>
                <span class="control-error" v-if="errors.has('order_id')">@{{ errors.first('template') }}</span>
            </div>
            <div class="control-group mb-0 col-span-2" :class="[errors.has('from') ? 'has-error' : '']">
                <div class="flex items-center">
                    <label for="from" class="w-28 text-center">{{ __('From') }}</label>
                    <input type="email" class="control w-full flex-1 mt-0" name="from" value="{{ env('MAIL_FROM_ADDRESS', 'service@adiamor.com') }}">
                </div>
                <span class="control-error" v-if="errors.has('from')">@{{ errors.first('from') }}</span>
            </div>
            <div class="control-group mb-0 col-span-2" :class="[errors.has('to') ? 'has-error' : '']">
                <div class="flex items-center">
                    <label for="to" class="w-28 text-center">{{ __('To') }}</label>
                    <input type="email" class="control w-full flex-1 mt-0" name="to" value="{{ $order->customer_email ? $order->customer_email : $order->billing_address->email }}">
                </div>
                <span class="control-error" v-if="errors.has('to')">@{{ errors.first('to') }}</span>
            </div>
            <div class="control-group mb-0" :class="[errors.has('cc') ? 'has-error' : '']">
                <div class="flex items-center">
                    <label for="cc" class="w-28 text-center">{{ __('CC') }}</label>
                    <input type="email" class="control w-full flex-1 mt-0" name="cc">
                </div>
                <span class="control-error" v-if="errors.has('cc')">@{{ errors.first('cc') }}</span>
            </div>
            <div class="control-group mb-0" :class="[errors.has('bcc') ? 'has-error' : '']">
                <div class="flex items-center">
                    <label for="bcc" class="w-28 text-center">{{ __('BCC') }}</label>
                    <input type="email" class="control w-full flex-1 mt-0" name="bcc">
                </div>
                <span class="control-error" v-if="errors.has('bcc')">@{{ errors.first('bcc') }}</span>
            </div>
            <div class="control-group mb-0 col-span-2" :class="[errors.has('subject') ? 'has-error' : '']">
                <div class="flex items-center">
                    <label for="subject" class="w-28 text-center">{{ __('Subject') }}</label>
                    <input type="text" class="control w-full flex-1 mt-0" name="subject" id="templateSubject">
                </div>
                <span class="control-error" v-if="errors.has('subject')">@{{ errors.first('subject') }}</span>
            </div>
            <div class="control-group mb-0 col-span-2" :class="[errors.has('content') ? 'has-error' : '']">
                <!-- <textarea class="control w-full flex-1" id="myTextarea" name="content"></textarea> -->
                <textarea id='myTextarea' class="mt-0" name="content"></textarea>

                <span class="control-error" v-if="errors.has('content')">@{{ errors.first('content') }}</span>
            </div>
            <div class="modal-footer order-histor p-0">
                <button type="submit" class="btn btn-lg btn-primary modalSubmit" id="emailSubmit">
                    {{ __('Send Email') }}
                </button>
                <button type="button" class="btn btn-lg btn-info" onclick="closeEmailModal()">
                    {{ __('Cancel') }}
                </button>
            </div>
        </form>
    </div>
</div>


<!-- Order History Modal-->
<div class="modal emailModalShow body-scroll order-history-modal" id="modalOrderHistoryShow" style="display:none">
    <div class="modal-body">
        <div class="flex mb-4 justify-between items-center">    
        <h2 class="mb-0">Order History</h2>
        <div>
        <label><input type="checkbox" id="userCheckbox" checked onchange="filterComments()"> User</label>
        <label><input type="checkbox" id="systemCheckbox" checked onchange="filterComments()"> System</label>
        </div>
        </div>
        <ul class="comment-list" id="commentList">
            @if (count($order->comments()->orderBy('id', 'desc')->get()))
            @foreach ($order->comments()->orderBy('id', 'desc')->get() as $comment)
                @if($comment->created_by == 2)
                    <li class="py-1 system-comment modal-system-comment">
                        <label>{{ date('m/d h:i A', strtotime($comment->created_at)) }}:</label>
                        <p>{{ $comment->created_by_user_name ? $comment->created_by_user_name . ' -' : '' }} {{$comment->comment }}</p>
                    </li>
                @elseif($comment->created_by == 1)
                    <li class="py-1 user-comment modal-user-comment" onclick="openModal('{{$comment}}')">
                        <label>{{ date('m/d h:i A', strtotime($comment->created_at)) }}:</label>
                        <p>{{ $comment->created_by_user_name ? $comment->created_by_user_name . ' -' : '' }}  {{$comment->comment }}</p>
                    </li>
                @endif
            @endforeach
            @else
                <li>No Record Found</li>
            @endif
        </ul>
        <div class="modal-footer order-history flex pt-4 justify-end p-0">
            <button type="button" class="btn btn-sm btn-info" onclick="closeModal('modalOrderHistoryShow')">
                {{ __('Close') }}
            </button>
        </div>
    </div>
</div>

<!-- Item Update Modal-->
<div class="modal body-scroll" id="itemModalShow" style="display:none">
    <div class="modal-body">
        <h3 class="mb-0" id="itemSku"></h3>
        <div class="mb-4" id="itemName"></div>
        <div id="itemForm"></div>
    </div>
</div>
@stop
@push('scripts')
@include('admin::layouts.tinymce')
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" rel="stylesheet">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

<script>
    $(document).ready(function() {
        let tinyMCEInstance = tinyMCEHelper.initTinyMCE({
            selector: '#myTextarea',
            height: 200,
            width: "100%",
            plugins: 'image imagetools media wordcount save fullscreen code table lists link hr',
            toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor link hr | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent  | removeformat | code | table',
            image_advtab: true,
            setup: function(editor) {
                editor.on('init', function() {
                    var firstOptionValue = $('#templateSelector').find('option:first').val();
                    editor.setContent(firstOptionValue ? JSON.parse(firstOptionValue).content : '');
                    document.getElementById('templateSubject').value = firstOptionValue ? JSON.parse(firstOptionValue).name : '';

                    function templateChange(e) {

                        let contentToShow = e.target.value;
                        if (contentToShow == '') {
                            editor.setContent(contentToShow ? this.responseText : '');
                            document.getElementById('templateSubject').value = contentToShow ? JSON.parse(contentToShow).name : '';
                            return;
                        }
                        let templateId = JSON.parse(contentToShow).id;
                        document.getElementById(`newKeySpan_1`).textContent = "";
                        // Check if tinyMCEInstance is defined and has setContent method

                        if (editor) {
                            var orderId = '{{$order->id}}';
                            var http = new XMLHttpRequest();
                            var url = '{{ route("admin.sales.order.email.content") }}';
                            var params = 'orderId=' + orderId + '&templateId=' + templateId;
                            var csrfToken = $('meta[name="csrf-token"]').attr('content');
                            http.open('POST', url, true);
                            //Send the proper header information along with the request
                            http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                            http.setRequestHeader("x-csrf-token", csrfToken);
                            http.onreadystatechange = function() { //Call a function when the state changes.
                                if (http.readyState == 4 && http.status == 200) {
                                    editor.setContent(contentToShow ? this.responseText : '');
                                    document.getElementById('templateSubject').value = contentToShow ? JSON.parse(contentToShow).name : '';
                                }
                            };
                            http.send(params);

                        } else {
                            console.error('Unable to set content. Check if TinyMCE is initialized correctly.');
                        }
                    }
                    // Event listener for template change
                    $('#templateSelector').on('change', templateChange);
                });
            }
        });
    });
</script>
@endpush
<script>
    function itemModalOpen(itemData) {
        // document.getElementById('itemModalShow').style.display = "block";
        document.getElementById('itemModalShow').style.removeProperty('display');
        document.getElementById('itemSku').textContent = 'Update ' + itemData.sku;
        document.getElementById('itemName').textContent = itemData.name;
        document.getElementById('itemForm').innerHTML = '';
        // Create the form element
        var form = document.createElement('form');
        form.method = 'post';
        form.action = '#';
        form.id = 'modalBody';
        // Create the dynamicForm div
        var dynamicFormDiv = document.createElement('div');
        dynamicFormDiv.id = 'dynamicForm_' + itemData.id;
        // Check if itemData has data and it's not null
        if (itemData.data && itemData.data !== 'null') {
            Object.entries(JSON.parse(itemData.data)).forEach(([key, value], index) => {
                var formGroupDiv = document.createElement('div');
                formGroupDiv.className = 'form-group';
                formGroupDiv.setAttribute('data-index', index);
                var formControl1 = document.createElement('div');
                formControl1.className = 'form-control';
                formControl1.innerHTML = '<label for="" class="sr-only">Text</label>' + '<input type="text" placeholder="Name" name="" id="" class="control" value="' + key + '">';
                formGroupDiv.appendChild(formControl1);
                // Create input for value
                var formControl2 = document.createElement('div');
                formControl2.className = 'form-control';
                formControl2.innerHTML = '<label for="" class="sr-only">Text</label>' + '<input type="text" placeholder="Value"  name="" id="" class="control" value="' + value + '">';
                formGroupDiv.appendChild(formControl2);
                // Create delete button
                var deleteButton = createDeleteButton();
                formGroupDiv.appendChild(deleteButton);
                dynamicFormDiv.appendChild(formGroupDiv);
            });
        }
        var formGroupDiv1 = document.createElement('div');
        formGroupDiv1.className = 'form-group';
        var newKeyInput = document.createElement('div');
        newKeyInput.className = 'form-control';
        newKeyInput.innerHTML = '<label for="" class="sr-only">Text</label>' + '<input type="text" placeholder="Name" name="" id="newKey_' + itemData.id + '" class="control" value="">';
        var newKeySpan = createSpan('newKeySpan_' + itemData.id);
        formGroupDiv1.appendChild(newKeyInput);
        // Create the new value input
        // var newValInput = createInput('text', 'control', '');
        var newValInput = document.createElement('div');
        newValInput.className = 'form-control';
        newValInput.innerHTML = '<label for="" class="sr-only">Text</label>' + '<input type="text" placeholder="Value"  name="" id="newVal_' + itemData.id + '" class="control" value="">';
        // newValInput.id = 'newVal_' + itemData.id;
        // var newValSpan = createSpan('newValSpan_' + itemData.id);
        formGroupDiv1.appendChild(newValInput);
        // newValInput.appendChild(newValSpan);
        // Create the Add button
        var addButton = document.createElement('button');
        addButton.type = 'button';
        addButton.className = 'btn btn-sm btn-primary btn-update-custom';
        addButton.textContent = 'Add';
        addButton.addEventListener('click', function() {
            addNewItem(itemData);
        });
        formGroupDiv1.appendChild(addButton);
        let customdiv = document.createElement('div');
        customdiv.className = 'border-t mt-4';
        // Create the Update button
        var updateButton = document.createElement('button');
        updateButton.type = 'button';
        updateButton.className = 'btn btn-sm btn-primary ';
        updateButton.textContent = 'Update';
        updateButton.style.cssText = 'margin-right: 0.5em;'
        updateButton.addEventListener('click', function() {
            updateItemXHR(itemData);
        });

        // Create the Update button
        var closeButton = document.createElement('button');
        closeButton.type = 'button';
        closeButton.className = 'btn btn-sm btn-info';
        closeButton.textContent = 'Close';
        closeButton.addEventListener('click', function() {
            document.getElementById('itemModalShow').style.display = 'none';
        });
        customdiv.appendChild(updateButton);
        customdiv.appendChild(closeButton);
        // Append all elements to the form
        let customdiv1 = document.createElement('div');
        customdiv1.className = 'mt-2';
        dynamicFormDiv.appendChild(formGroupDiv1);
        customdiv1.appendChild(newKeySpan);
        form.appendChild(dynamicFormDiv);
        form.appendChild(customdiv1);
        form.appendChild(customdiv);
        // Append the form to the document body or any desired container
        document.getElementById('itemForm').appendChild(form);
    }

    function createInput(type, className, value) {
        var input = document.createElement('input');
        input.type = type;
        input.className = className;
        input.value = value || '';
        return input;
    }

    function createSpan(id) {
        var span = document.createElement('span');
        span.style.color = 'red';
        span.id = id;
        return span;
    }

    function createDeleteButton() {
        var deleteButton = document.createElement('button');
        deleteButton.type = 'button';
        deleteButton.className = 'btn btn-sm btn-primary';
        deleteButton.textContent = 'Remove';
        deleteButton.addEventListener('click', function(event) {
            deleteLoopItem(event);
        });
        return deleteButton;
    }

    function createFormGroup(...elements) {
        var formGroupDiv = document.createElement('div');
        formGroupDiv.className = 'form-group';
        for (var i = 0; i < elements.length; i++) {
            formGroupDiv.appendChild(elements[i]);
        }
        return formGroupDiv;
    }

    function modifyEstimateddate(e, id) {
        const value = e.target.value;
        const dates = value.split(' to ');
        // Check if there are two parts (start and end date)
        if (dates.length === 2) {
            document.getElementById("loader").style.display = "block";
            var http = new XMLHttpRequest();
            var csrfToken = "{{ csrf_token() }}";
            var url = '{{route("admin.sales.order.update-estimate-date")}}';
            http.open('POST', url, true);
            //Send the proper header information along with the request
            http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            http.setRequestHeader('x-csrf-token', csrfToken);
            http.onreadystatechange = function() { //Call a function when the state changes.
                if (http.readyState == 4 && http.status == 200) {
                    window.location.reload();
                    window.flashMessages = [{
                        'type': 'alert-success',
                        'message': http.response.message
                    }];
                }
            }
            http.send(JSON.stringify({
                estimated_shipping_date: e.target.value,
                order_id: id
            }));
        }
    }

    function disableButton() {
        var datum = document.getElementById('templateSelector');
        var datumValue = datum.options[datum.selectedIndex].value;
        if (!datumValue) {
            document.getElementById(`newKeySpan_1`).textContent = "Value is required.";
            return false;
        }
        document.getElementById(`newKeySpan_1`).textContent = "";
        const button = document.getElementById("emailSubmit");
        button.disabled = true;
        return true;
    }

    function openModal(data = null) {

        document.getElementById('modalShow').style.removeProperty('display');
        document.getElementById('comment').value = data ? JSON.parse(data).comment : '';
        document.getElementById('comment_id').value = data ? JSON.parse(data).id : '';
        document.getElementById('modalOrderHistoryShow').style.display = "none";
    }

    function openEmailModal(id = null) {
        // document.body.style.overflow = "hidden";
        document.getElementById(id).style.removeProperty('display');
    }

    function openMessageModal(id, orderId, subject) {
        document.getElementById("loader").style.display = "block";
        var http = new XMLHttpRequest();
        // Assuming 'id' and 'orderId' are already defined somewhere in your code
        var url = '{{ route("admin.sales.ticket.messages", ["id" => ":id", "orderId" => ":orderId"]) }}';
        url = url.replace(':id', id);
        url = url.replace(':orderId', orderId);
        http.open("GET", url);
        http.onreadystatechange = function() {
            if (http.readyState == 4 && http.status == 200) {
                // Request was successful, handle the response here
                var responseData = http.responseText;
                const data = JSON.parse(responseData);
                const dataArray = data.data;
                let html = '';
                // Loop through the array and access each object
                dataArray.forEach(item => {
                    const itemHtml = `<div class="liveAgent-message ${item.agentClass}">
                                <h4>${item.datecreated} : ${item.agentName}</h4>
                                <p>${item.message}</p>
                                </div>`;
                    // Append the HTML for this item to the overall HTML string
                    html += itemHtml;
                });

                // Set the generated HTML to the element with ID 'messageDisplay'
                document.getElementById('messageDisplay').innerHTML = html;
                document.getElementById('subjectDisplay').innerHTML = subject;
                document.getElementById("loader").style.display = "none";
                document.body.style.overflow = "hidden";
                document.getElementById('messageModalShow').style.removeProperty('display');
            }
            document.getElementById("loader").style.display = "none";
        };
        http.send();
    }

    function closeEmailModal() {
        document.getElementById('emailModalShow').style.display = "none";
        document.body.style.overflow = "auto";
    }

    function closeModal(id = null) {
        document.getElementById(id).style.display = "none";
        document.getElementById('comment-error').style.display = "none";
    }

    function sendEmailBtn() {
        document.getElementById('messageModalShow').style.display = "none";
        document.getElementById('emailModalShow').style.removeProperty('display');
    }

    function handleButton(id = null) {
        document.getElementById(id).submit();
    }

    function formatTitle(item) {
        var parentDiv = document.getElementById(`accordian_update_${item.id}`);
        if (!parentDiv) {
            return;
        }
        if (document.getElementById(`custom_small_tag_${item.id}`)) {
            return `${item.sku}`;
        }

        var childDiv = parentDiv.getElementsByClassName("accordian-header");
        var el = document.createElement("small");
        el.style.cssText = 'color: rgba(0,0,0,0.5); font-size: 0.8em; margin-left: 0.5em;'
        el.id = `custom_small_tag_${item.id}`;
        el.textContent = item.name;

        if (childDiv[0]) {
            childDiv[0].appendChild(el);
        }
        return item.sku ? `${item.sku}` : `${item.name}`;
    }

    function addNewItem(items) {
        let key = document.getElementById(`newKey_${items.id}`)?.value;
        let value = document.getElementById(`newVal_${items.id}`)?.value;
        if (!key || !value) {
            document.getElementById(`newKeySpan_${items.id}`).textContent = "Please fill the fields.";
            return;
        }
        document.getElementById(`newKeySpan_${items.id}`).innerText = "";
        var dynamicFormContainer = document.getElementById(`dynamicForm_${items.id}`);
        // var formGroups = dynamicFormContainer.getElementsByClassName('form-group');
        var formGroup = document.createElement('div');
        formGroup.className = 'form-group';
        var formControl1 = document.createElement('div');
        formControl1.className = 'form-control';
        formControl1.innerHTML = '<label for="" class="sr-only">Text</label>' + '<input type="text" placeholder="Name" name="" id="" class="control" value="' + key + '">';
        var formControl2 = document.createElement('div');
        formControl2.className = 'form-control';
        formControl2.innerHTML = '<label for="" class="sr-only">Text</label>' + '<input type="text" placeholder="Value"  name="" id="" class="control" value="' + value + '">';
        var formControl3 = createDeleteButton();
        formGroup.appendChild(formControl1);
        formGroup.appendChild(formControl2);
        formGroup.appendChild(formControl3);
        // Clone the last form-group
        var lastFormGroup = dynamicFormContainer.querySelector('.form-group:last-child');
        dynamicFormContainer.insertBefore(formGroup, lastFormGroup);
        // dynamicFormContainer ? dynamicFormContainer.appendChild(formGroup) : '';
        document.getElementById(`newKey_${items.id}`).value = "";
        document.getElementById(`newVal_${items.id}`).value = "";
    }

    function deleteLoopItem(event) {
        var parentElement = event.target.closest('.form-group');
        var index = Array.from(parentElement.parentNode.children).indexOf(parentElement);
        parentElement.remove();
    }

    function updateItemXHR(items) {
        var dynamicFormContainer = document.getElementById(`dynamicForm_${items.id}`);
        var formGroups = dynamicFormContainer.getElementsByClassName('form-group');
        var itemOptionDiv = document.getElementById(`item-option-div_${items.id}`);
        // Iterate through each form-group
        //Remove bottom item
        itemOptionDiv ? itemOptionDiv.innerHTML = '' : '';
        var keyValueObject = {};
        for (var i = 0; i < formGroups.length; i++) {
            var inputs = formGroups[i].querySelectorAll('.form-control input');
            if (inputs.length >= 2) {
                if (inputs[0].value && inputs[1].value) {
                    keyValueObject[inputs[0].value] = inputs[1].value;
                    //Append product-info tags
                    var newElement = document.createElement('p');
                    newElement.className = 'additional-size';
                    newElement.innerHTML = `${inputs[0].value} : <b> ${inputs[1].value} </b>`;
                    itemOptionDiv ? itemOptionDiv.appendChild(newElement) : '';
                }
            }
        }
        document.getElementById("loader").style.display = "block";
        var http = new XMLHttpRequest();
        var csrfToken = "{{ csrf_token() }}";
        var url = '{{route("admin.sales.order.item-additional")}}';
        http.open('POST', url, true);
        //Send the proper header information along with the request
        http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        http.setRequestHeader('x-csrf-token', csrfToken);
        http.onreadystatechange = function() { //Call a function when the state changes.
            if (http.readyState == 4 && http.status == 200) {
                document.getElementById("loader").style.display = "none";
                document.getElementById('itemModalShow').style.display = 'none';
                items.data = keyValueObject;
                window.location.reload();
            }
        }
        http.send(JSON.stringify({
            order_item_id: items.id,
            items: keyValueObject
        }));
    }

    function checkComment() {
        let data = document.getElementById('comment')?.value;
        if (!data) {
            document.getElementById('comment-error').style.display = "block";
        }
        return !data ? false : true;
    }

    function clickToClipboard() {
        // Get the text content of the span element
        var orderID = document.querySelector('.page-title span').textContent;

        // Create a temporary textarea element
        var textarea = document.createElement('textarea');
        textarea.value = orderID;

        // Append the textarea element to the document body
        document.body.appendChild(textarea);

        // Select the text inside the textarea
        textarea.select();

        // Copy the selected text to the clipboard
        document.execCommand('copy');

        // Remove the temporary textarea element
        document.body.removeChild(textarea);
        toastr.success('Order Number copied to clipboard: ' + orderID);
        // Alert the user that the order ID has been copied
        // alert('Order Number copied to clipboard: ' + orderID);
        
    }

    function filterComments() {
    var userCheckbox = document.getElementById('userCheckbox');
    var systemCheckbox = document.getElementById('systemCheckbox');
    var userComments = document.querySelectorAll('.modal-user-comment');
    var systemComments = document.querySelectorAll('.modal-system-comment');
    var isChecked = userCheckbox.checked || systemCheckbox.checked;

    if (!isChecked) {
        toastr.error('Please check at least one checkbox.');
        userCheckbox.checked = true;
        userComments.forEach(comment => comment.style.display = 'block');
        systemComments.forEach(comment => comment.style.display = 'none');
        return;
    }

    userComments.forEach(comment => comment.style.display = userCheckbox.checked ? 'block' : 'none');
    systemComments.forEach(comment => comment.style.display = systemCheckbox.checked ? 'block' : 'none');
    }


    function removeError() {
        document.getElementById('comment-error').style.display = "none";
    }

    function formatPhone(phoneNumber) {
        if (phoneNumber && phoneNumber.length == 10) { // Remove all non-digit characters
            phoneNumber = phoneNumber.replace(/\D/g, '');
            // Format the number
            phoneNumber = phoneNumber.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
            return phoneNumber;
        }
        return phoneNumber;
    }
    // Call formatPhone with the PHP variable as argument
    var phoneNumber = "{{ $order->customer->phone ?? $order->billing_address->phone }}";
    var formattedPhoneNumber = formatPhone(phoneNumber);
    console.log(document.getElementById('formattedPhone'));
    window.onload = function() {
        // Get the div element by its ID
        var myDiv = document.getElementById("formattedPhone");
        // Set the text content of the div
        myDiv ? myDiv.textContent = formattedPhoneNumber : '';
    };
</script>
<style>
    .form-control input,
    .form-control select {
        background: #fff;
        border: 2px solid #C7C7C7;
        border-radius: 3px;
        height: 36px;
        display: inline-block;
        vertical-align: middle;
        transition: .2s cubic-bezier(.4, 0, .2, 1);
        padding: 0 10px;
        font-size: 15px;
        width: 100%;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .form-control {
        font-size: 15px;
        width: 100%;
        max-width: 100%;
        position: relative;
        margin-bottom: 10px;
    }

    .form-group {
        display: flex;
        gap: 20px;
        align-items: center;
    }

    .sr-only {
        display: none;
    }

    p.additional-size {
        font-size: 12px;
        margin: 5px 0 !important;
    }

    .overlay-loader {
        left: 50%;
        margin-left: -24px;
        margin-top: -24px;
        position: fixed;
        top: 50%;
        z-index: 11;
    }

    .productTable svg {
        cursor: pointer;
    }

    .productTable td {
        font-family: Montserrat, sans-serif;
        font-size: 14px;
        font-weight: 500;
    }

    .cp-spinner {
        box-sizing: border-box;
        display: inline-block;
        height: 48px;
        left: calc(50% - 24px);
        margin-top: calc(40% - 24px);
        position: absolute;
        width: 48px;
    }

    .message-block {
        color: #fff;
        font-size: 16px;
        position: relative;
        top: 60px;
    }

    .fix-design {
        display: inline-block;
        margin-bottom: 15px;
    }

    /**
         * Spinner style.
         */
    .cp-round:before {
        border-radius: 50%;
        content: ' ';
        width: 48px;
        height: 48px;
        display: inline-block;
        box-sizing: border-box;
        border-top: solid 6px grey;
        border-right: solid 6px grey;
        border-bottom: solid 6px grey;
        border-left: solid 6px grey;
        position: absolute;
        top: 0;
        left: 0;
    }

    .cp-round:after {
        border-radius: 50%;
        content: ' ';
        width: 48px;
        height: 48px;
        display: inline-block;
        box-sizing: border-box;
        border-top: solid 6px;
        border-right: solid 6px transparent;
        border-bottom: solid 6px transparent;
        border-left: solid 6px transparent;
        position: absolute;
        top: 0;
        left: 0;
        animation: spin 1s ease-in-out infinite;
    }

    .emailModalShow .modal-body {
        max-width: 730px !important;
    }

    .messageModalShow .modal-body {
        max-width: 730px !important;
    }

    .w-full {
        width: 100% !important;
    }

    .grid {
        display: grid;
    }

    .gap-x-4 {
        column-gap: 1rem;
        /* 16px */
    }

    .gap-y-2 {
        row-gap: 0.5rem;
    }

    .grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .col-span-2 {
        grid-column: span 2 / span 2;
    }

    .w-28 {
        width: 7rem !important;
        /* 112px */
    }

    .text-center {
        text-align: center;
    }

    .accordian-header {
        padding: 10px 15px !important;
        line-height: 24px;
    }

    .accordian-content {
        padding: 5px 15px !important;
    }

    .mt-0 {
        margin-top: 0 !important;
    }

    .mb-0 {
        margin-bottom: 0 !important;
    }

    .py-1 {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;

    }

    .small-heading {
        font-size: 14px;
        font-weight: 600;
    }

    .mb-4 {
        margin-bottom: 10px;
    }

    .customer-email {
        margin-bottom: 0.5rem;
    }

    .modal-footer {
        position: absolute;
        bottom: 0;
        padding: 20px;
        background-color: #fff;
        left: 0;
        right: 0;
    }

    .form-class {
        position: relative;
        padding-bottom: 47px;
        margin-bottom: 0;
    }

    .material-symbols-outlined {
        font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24
    }

    body .emailModalShow select {
        height: 28px !important;
    }

    .emailModalShow input.control {
        height: auto !important;
        line-height: 26px;
        margin-bottom: 0 !important;
    }

    .emailModalShow iframe {
        height: 360px !important;
    }

    .p-0 {
        padding: 0;
    }

    .light-gray-bg {
        background-color: #ebebeb;
        padding: 7px 5px;
    }

    .px-2 {
        padding-left: 5px;
        padding-right: 5px;
    }

    #calender-destop .control-group {
        width: auto !important;
    }

    #calender-destop .control-group .control {
        width: 200px !important;
        margin-bottom: 0 !important;
    }

    #calender-destop .control-group.date:after,
    #calender-destop .control-group.datetime:after {
        top: 6 !important;
        right: 6px !important;
        left: auto !important;
    }

    #calender-destop .control-group {
        margin-bottom: 0 !important;
    }

    #calender-destop .control-group .control {
        margin-top: 0 !important;
    }


    .main-warpaer {
        max-width: 1000px;
    }

    .max-w-700 {
        max-width: 700px;
    }

    .px-4 {
        padding-left: 15px;
        padding-right: 15px;
    }


    @media only screen and (max-width: 480px) {
        #calender-destop {
            display: block !important;
        }
    }

    .user-comment:hover {
        cursor: pointer;
    }

    .material-symbols-outlined {
        font-family: 'Material Icons';
        font-size: 18px !important;
        float: left;
        position: relative;
    }

    /* Style to hide the date range initially */
    .hidden {
        opacity: 0;
        position: absolute;
        top: -7px;
        right: -60px;
    }

    .item-edit {
        cursor: pointer;
    }

    .dateEstimate {
        margin-top: 6px;
        height: 41px;
        cursor: pointer;
    }

    .liveAgent-message {
        margin: 10px 0;
    }

    .liveAgent-message h4 {
        margin: 0;
        color: rgba(0, 0, 0, 0.8);
        font-weight: normal;
        font-size: 13px;
    }

    .liveAgent-message p {
        margin: 0;
    }

    .liveAgent-message {
        padding: 5px;
        border: solid 1px rgba(0, 0, 0, 0.4);
        border-radius: 5px;
        box-shadow: 2.5px 2.5px 2.5px 0px rgba(0, 0, 0, 0.4);
    }

    .liveAgent-message.user {
        background-color: #0041ff33;
    }

    .liveAgent-message.staff {
        background-color: white;
        text-align: right;
    }

    .justify-end {
        justify-content: end;
    }

    .order-history-modal h2 {
        font-weight: 600;
        font-size: 16px;
        margin-top: 0 !important;
    }

    .order-history-modal .modal-body {
        width: 100%;
    }

    .order-history-modal ul.comment-list {
        max-height: 28rem;
    }

    .mt-2 {
        margin-right: 2px;
    }

    .order-history {
        position: relative;
    }

    .pt-4 {
        padding-top: 1rem;
    }

    .messageModal {
        max-height: 34rem;
        overflow: hidden;
        overflow-y: auto;
    }
    .sale-summary td {
        font-family: Montserrat, sans-serif;
        font-size: 14px;
        font-weight: 500;
    }
</style>