{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: order-detail.blade.php
------------------------------------------------------
Use: A single order for the merchant: the buyer, the money
     split, the timeline and every transaction the order was
     settled with. Merchant-only figures (fee/share) shown
     to the shop owner, never to a regular user.
=====================================================
--}}

@extends('layouts.merchant')

@section('title', __('front.shop.order_detail.title', ['code' => $order->code]))

@php
    use App\Support\Format;
    $paid = $order->status === \App\Models\Order::STATUS_PAID;
@endphp

@section('breadcrumb')
    <x-ui.breadcrumb :items="[
        ['label' => __('admin.breadcrumb.home'), 'url' => route('account.shop.index')],
        ['label' => __('front.shop.orders.breadcrumb'), 'url' => route('account.shop.orders')],
        ['label' => $order->code],
    ]" />
@endsection

@section('page')
    <div class="mb-5 flex flex-wrap items-start justify-between gap-3">
        <div>
            <div class="flex items-center gap-2.5">
                <h1 class="text-2xl font-bold tracking-tight"><span dir="ltr">{{ $order->code }}</span></h1>
                <span @class([
                    'inline-block rounded-2xl px-3 py-1.5 text-[12.5px] font-bold',
                    'bg-[#e7f7ee] text-green-600' => $paid,
                    'bg-[#fff5e6] text-amber-600' => $order->status === \App\Models\Order::STATUS_PENDING,
                    'bg-secondary-50 text-secondary-500' => in_array($order->status, [\App\Models\Order::STATUS_FAILED, \App\Models\Order::STATUS_EXPIRED], true),
                ])>{{ __('front.shop.sales.statuses.'.$order->status) }}</span>
            </div>
            <p class="mt-1.5 text-sm text-ink-muted">{{ __('front.shop.order_detail.subtitle') }}</p>
        </div>
        <a href="{{ route('account.shop.sales', ['order' => $order->code]) }}" class="inline-flex items-center gap-1.5 rounded-xl bg-secondary-500 px-4 py-2 text-[13px] font-bold text-white transition hover:bg-secondary-600">
            <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8h13l-3-3M20 16H7l3 3"/></svg>
            {{ __('front.shop.order_detail.all_transactions') }}
        </a>
    </div>

    <div class="grid grid-cols-1 gap-5 lg:grid-cols-[1fr_1.4fr]">
        {{-- Buyer --}}
        <div class="rounded-2xl border border-line bg-white p-5.5">
            <h2 class="mb-4 text-[15px] font-bold">{{ __('front.shop.order_detail.buyer') }}</h2>
            @if ($order->user)
                <div class="flex items-center gap-3">
                    <span class="flex size-12 shrink-0 items-center justify-center rounded-full bg-gradient-to-bl from-[#fdd9dd] to-[#f7bcc2] text-[14px] font-bold text-secondary-500">
                        {{ mb_substr($order->user->first_name, 0, 1).'.'.mb_substr($order->user->last_name, 0, 1) }}
                    </span>
                    <div class="min-w-0">
                        <div class="truncate text-[15px] font-bold">{{ $order->user->fullName() }}</div>
                        <div class="text-[12.5px] text-ink-faint"><span dir="ltr">@fa($order->user->mobile)</span></div>
                    </div>
                </div>

                <div class="mt-4 flex flex-col gap-2.5 border-t border-[#f5f4f9] pt-4">
                    <a href="{{ route('account.shop.customers', ['q' => $order->user->mobile]) }}"
                       class="inline-flex items-center justify-center gap-2 rounded-xl bg-secondary-50 px-4 py-2.5 text-[13px] font-bold text-secondary-500 transition hover:bg-[#fbd5d9]">
                        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2h12v20l-2-1.5-2 1.5-2-1.5-2 1.5-2-1.5-2 1.5z"/><path d="M9 8h6M9 12h6"/></svg>
                        {{ __('front.shop.order_detail.other_orders', ['name' => $order->user->first_name]) }}
                    </a>
                    <a href="{{ route('account.support') }}"
                       class="inline-flex items-center justify-center gap-2 rounded-xl border border-line bg-white px-4 py-2.5 text-[13px] font-bold text-ink-soft transition hover:text-secondary-500">
                        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><line x1="12" y1="8" x2="12" y2="13"/><circle cx="12" cy="16.5" r="0.5"/></svg>
                        {{ __('front.shop.order_detail.report_problem') }}
                    </a>
                </div>
            @else
                <p class="text-sm text-ink-muted">{{ __('front.shop.order_detail.no_buyer') }}</p>
            @endif
        </div>

        {{-- Money + timeline --}}
        <div class="rounded-2xl border border-line bg-white p-5.5">
            <h2 class="mb-4 text-[15px] font-bold">{{ __('front.shop.order_detail.summary') }}</h2>
            <div class="flex flex-col gap-3 text-[13.5px]">
                @if ($order->isLinkPayment())
                    {{-- The buyer's note (link payments only), before the total. --}}
                    <div class="flex items-start justify-between gap-3">
                        <span class="shrink-0 text-ink-faint">{{ __('front.shop.order_detail.description') }}</span>
                        <span class="max-w-[70%] text-left font-bold leading-6">{{ $order->description ?: __('front.shop.order_detail.no_description') }}</span>
                    </div>
                    <div class="flex items-center justify-between gap-3 border-t border-[#f5f4f9] pt-3"><span class="text-ink-faint">{{ __('front.shop.order_detail.amount') }}</span><span class="font-bold"><span dir="ltr">@toman($order->amount)</span> {{ __('front.shop.txns.toman') }}</span></div>
                @else
                    <div class="flex items-center justify-between gap-3"><span class="text-ink-faint">{{ __('front.shop.order_detail.amount') }}</span><span class="font-bold"><span dir="ltr">@toman($order->amount)</span> {{ __('front.shop.txns.toman') }}</span></div>
                @endif
                <div class="flex items-center justify-between gap-3 border-t border-[#f5f4f9] pt-3"><span class="text-ink-faint">{{ __('front.shop.order_detail.share') }}</span><span class="font-bold text-green-600">@if ($paid)<span dir="ltr">@toman((int) $order->shop_share)</span> {{ __('front.shop.txns.toman') }}@else<span class="text-ink-faint">—</span>@endif</span></div>
                <div class="flex items-center justify-between gap-3 border-t border-[#f5f4f9] pt-3"><span class="text-ink-faint">{{ __('front.shop.order_detail.fee') }}</span><span class="font-bold text-ink-soft">@if ($paid)<span dir="ltr">@toman((int) $order->merchant_fee)</span> {{ __('front.shop.txns.toman') }}@else<span class="text-ink-faint">—</span>@endif</span></div>
                <div class="flex items-center justify-between gap-3 border-t border-[#f5f4f9] pt-3">
                    <span class="text-ink-faint">{{ __('front.shop.order_detail.reference') }}</span>
                    @if ($order->reference_id)
                        <span class="font-bold" dir="ltr">@fa($order->reference_id)</span>
                    @else
                        <span class="text-ink-faint">{{ __('front.shop.order_detail.reference_pending') }}</span>
                    @endif
                </div>
                <div class="flex items-center justify-between gap-3 border-t border-[#f5f4f9] pt-3">
                    <span class="text-ink-faint">{{ __('front.shop.order_detail.merchant_order_id') }}</span>
                    @if ($order->isLinkPayment())
                        <span class="font-bold text-secondary-500">{{ $order->merchantReference() }}</span>
                    @else
                        <span class="font-bold" dir="ltr">{{ $order->merchant_order_id ? Format::persianDigits($order->merchant_order_id) : '—' }}</span>
                    @endif
                </div>
                <div class="flex items-center justify-between gap-3 border-t border-[#f5f4f9] pt-3"><span class="text-ink-faint">{{ __('front.shop.order_detail.created') }}</span><span class="font-bold">@jalaliDateTime($order->created_at)</span></div>
                @if ($order->paid_at)
                    <div class="flex items-center justify-between gap-3 border-t border-[#f5f4f9] pt-3"><span class="text-ink-faint">{{ __('front.shop.order_detail.paid_at') }}</span><span class="font-bold">@jalaliDateTime($order->paid_at)</span></div>
                @endif
            </div>
        </div>
    </div>

    {{-- Transactions of this order --}}
    <div class="mt-5 rounded-2xl border border-line bg-white p-5.5">
        <h2 class="mb-4 text-[15px] font-bold">{{ __('front.shop.order_detail.transactions') }}</h2>
        @if ($transactions->isEmpty())
            <div class="rounded-[14px] border border-dashed border-[#e3e1ec] bg-[#fbfbfd] px-4 py-10 text-center text-sm text-ink-muted">{{ __('front.shop.order_detail.no_transactions') }}</div>
        @else
            <div class="overflow-x-auto rounded-[14px] border border-[#f0eff5]">
                <table class="w-full min-w-[720px] border-collapse text-right text-[13.5px]">
                    <thead>
                        <tr class="bg-[#faf9fd] text-ink-muted">
                            <th class="px-4 py-3.5 font-bold">{{ __('front.shop.txns.code') }}</th>
                            <th class="px-4 py-3.5 font-bold">{{ __('front.shop.txns.type') }}</th>
                            <th class="px-4 py-3.5 font-bold">{{ __('front.shop.txns.reference') }}</th>
                            <th class="px-4 py-3.5 font-bold">{{ __('front.shop.txns.amount') }}</th>
                            <th class="px-4 py-3.5 font-bold">{{ __('front.shop.txns.time') }}</th>
                            <th class="px-4 py-3.5 font-bold">{{ __('front.shop.txns.status') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($transactions as $transaction)
                            @php $incoming = $transaction->isIncoming(); @endphp
                            <tr class="border-t border-[#f0eff5]">
                                <td class="px-4 py-3.5 text-right! text-ink-soft" dir="ltr">@fa($transaction->code)</td>
                                <td class="px-4 py-3.5"><x-ui.type-badge :type="$transaction->type" :label="__('front.transactions.types.'.$transaction->type)" /></td>
                                <td class="px-4 py-3.5 text-ink-soft" dir="ltr">{{ $transaction->external_reference ? Format::persianDigits($transaction->external_reference) : '—' }}</td>
                                <td @class([
                                    'px-4 py-3.5 font-bold',
                                    'text-green-600' => $incoming && $transaction->isSuccessful(),
                                    'text-secondary-500' => ! $incoming && $transaction->isSuccessful(),
                                    'text-ink-faint' => ! $transaction->isSuccessful(),
                                ]) dir="ltr">{{ $incoming ? '+' : '−' }}@toman($transaction->amount) {{ __('front.shop.txns.toman') }}</td>
                                <td class="whitespace-nowrap px-4 py-3.5 text-ink-soft">@jalaliDateTime($transaction->created_at)</td>
                                <td class="px-4 py-3.5"><x-ui.status-badge :status="$transaction->status" :label="__('front.transactions.statuses.'.$transaction->status)" /></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
@endsection