{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: sales.blade.php
------------------------------------------------------
Use: The merchant's sale transactions: every ledger
     transaction tied to this shop's orders, each naming its
     order, method/type and reference. Optionally scoped to
     a single order.
=====================================================
--}}

@extends('layouts.merchant')

@section('title', __('front.shop.txns.title'))

@php use App\Support\Format; @endphp

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

@section('page')
    <div class="mb-5">
        <h1 class="mb-1 text-2xl font-bold tracking-tight">{{ __('front.shop.txns.title') }}</h1>
        <p class="text-sm text-ink-muted">{{ __('front.shop.txns.subtitle') }}</p>
    </div>

    {{-- When scoped to a single order, a clearly-labelled banner + a way out. --}}
    @if ($scopedOrder)
        <div class="mb-5 flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-secondary-500/20 bg-secondary-50 px-4 py-3">
            <div class="flex items-center gap-2.5 text-[13px] text-secondary-600">
                <svg class="size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8h13l-3-3M20 16H7l3 3"/></svg>
                {{ __('front.shop.txns.scoped') }}
                <a href="{{ route('account.shop.orders.show', $scopedOrder) }}" class="font-bold underline underline-offset-2" dir="ltr">{{ $scopedOrder->code }}</a>
            </div>
            <a href="{{ route('account.shop.sales') }}" class="rounded-lg bg-white px-3 py-1.5 text-[12px] font-bold text-secondary-500">{{ __('front.shop.txns.clear_scope') }}</a>
        </div>
    @endif

    <div class="rounded-2xl border border-line bg-white p-5.5">
        {{-- Status filter + search --}}
        <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
            <div class="inline-flex flex-wrap gap-0.5 rounded-xl bg-[#f2f0fa] p-1">
                @foreach (__('front.shop.txns.filters') as $key => $label)
                    <a href="{{ route('account.shop.sales', array_filter(['status' => $key === 'all' ? null : $key, 'q' => $search ?: null, 'order' => $scopedOrder?->code])) }}"
                       @class([
                           'rounded-[9px] px-4 py-2 text-[13px] font-bold transition',
                           'bg-white text-secondary-500 shadow-sm' => $status === $key,
                           'text-ink-muted hover:text-secondary-500' => $status !== $key,
                       ])>{{ $label }}</a>
                @endforeach
            </div>

            <form method="GET" action="{{ route('account.shop.sales') }}" class="flex items-center gap-2">
                @if ($status !== 'all')<input type="hidden" name="status" value="{{ $status }}">@endif
                @if ($scopedOrder)<input type="hidden" name="order" value="{{ $scopedOrder->code }}">@endif
                <div class="flex items-center rounded-[11px] border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3">
                    <svg class="size-4 text-ink-faint" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>
                    <input name="q" value="{{ $search }}" placeholder="{{ __('front.shop.txns.search_placeholder') }}" class="w-40 border-none bg-transparent px-2 py-2.5 text-[13px] outline-none sm:w-52">
                </div>
                <button type="submit" class="rounded-[11px] bg-secondary-500 px-4 py-2.5 text-[13px] font-bold text-white transition hover:bg-secondary-600">{{ __('front.shop.txns.search_action') }}</button>
            </form>
        </div>

        @if ($transactions->isEmpty())
            <div class="rounded-[14px] border border-dashed border-[#e3e1ec] bg-[#fbfbfd] px-4 py-12 text-center text-sm text-ink-muted">
                {{ $search !== '' || $status !== 'all' ? __('front.shop.txns.empty_search') : __('front.shop.txns.empty') }}
            </div>
        @else
            <div class="overflow-x-auto rounded-[14px] border border-[#f0eff5]">
                <table class="w-full min-w-[920px] 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.order') }}</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">
                                    @if ($transaction->order)
                                        <a href="{{ route('account.shop.orders.show', $transaction->order) }}" class="font-bold text-secondary-500 transition hover:text-secondary-600" dir="ltr">{{ $transaction->order->code }}</a>
                                    @else
                                        <span class="text-ink-faint">—</span>
                                    @endif
                                </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(),
                                ])><span dir="ltr">{{ $incoming ? '+' : '−' }}@toman($transaction->amount)</span> {{ __('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>

            <div class="mt-4 flex flex-wrap items-center justify-between gap-3">
                <span class="text-[13px] text-ink-faint">
                    {{ __('front.shop.txns.summary', [
                        'from' => Format::persianDigits((string) $transactions->firstItem()),
                        'to' => Format::persianDigits((string) $transactions->lastItem()),
                        'total' => Format::persianDigits((string) $transactions->total()),
                    ]) }}
                </span>
                <div>{{ $transactions->links() }}</div>
            </div>
        @endif
    </div>
@endsection