@extends('layouts.app')

@section('title', __('dashboard.purchase_return_details'))
@section('page_heading', __('dashboard.purchase_return') . ' #' . $purchaseReturn->id)

@section('content')
@include('layouts.partials.workspace-page-styles')
@include('dashboard.partials.audit-log-styles')

<div class="workspace-shell mb-4">
    <div class="workspace-body">
        <div class="collection-card__header">
            <div class="collection-card__intro">
                <span class="collection-card__icon"><i class="fa-solid fa-receipt"></i></span>
                <div class="collection-card__title">
                    <h2>{{ __('dashboard.purchase_return_details') }} #{{ $purchaseReturn->id }}</h2>
                </div>
            </div>
            <div style="display:flex;gap:.5rem;align-items:center">
                <span class="collection-card__meta text-red-600 dark:text-red-400">{{ __('dashboard.Total Refunded') }}: {{ number_format($purchaseReturn->total_refunded, 2) }}</span>
                @can('edit purchase returns')
                <a href="{{ route('dashboard.purchase-returns.edit', $purchaseReturn->id) }}" class="app-btn app-btn--secondary app-btn--sm">
                    <i class="fa-solid fa-pen"></i> {{ __('dashboard.Edit') }}
                </a>
                @endcan
                <a href="{{ route('dashboard.purchase-returns.index') }}" class="app-btn app-btn--secondary app-btn--sm">
                    <i class="fa-solid fa-arrow-right"></i> {{ __('dashboard.Purchase Returns') }}
                </a>
            </div>
        </div>

        <div class="app-grid gap-4 mt-2">
            <div class="md:col-span-3">
                <div class="text-slate-500 dark:text-slate-400" style="font-size:.78rem;font-weight:700">{{ __('dashboard.Purchase ID') }}</div>
                <a href="{{ route('dashboard.purchases.show', $purchaseReturn->purchase_id) }}" class="font-bold">#{{ $purchaseReturn->purchase_id }}</a>
            </div>
            <div class="md:col-span-3">
                <div class="text-slate-500 dark:text-slate-400" style="font-size:.78rem;font-weight:700">{{ __('dashboard.Supplier') }}</div>
                <div class="font-bold">{{ $purchaseReturn->purchase->supplier->name ?? '—' }}</div>
            </div>
            <div class="md:col-span-3">
                <div class="text-slate-500 dark:text-slate-400" style="font-size:.78rem;font-weight:700">{{ __('dashboard.Created By') }}</div>
                <div class="font-bold">{{ $purchaseReturn->creator->name ?? __('dashboard.System') }}</div>
            </div>
            <div class="md:col-span-3">
                <div class="text-slate-500 dark:text-slate-400" style="font-size:.78rem;font-weight:700">{{ __('dashboard.Created At') }}</div>
                <div class="font-bold">{{ $purchaseReturn->created_at->format('Y-m-d H:i') }}</div>
            </div>
        </div>
    </div>
</div>

<div class="workspace-shell mb-4">
    <div class="workspace-body">
        <div class="collection-card__header">
            <div class="collection-card__intro">
                <span class="collection-card__icon"><i class="fa-solid fa-box"></i></span>
                <div class="collection-card__title"><h2>{{ __('dashboard.Returned Products') }}</h2></div>
            </div>
        </div>
        <div class="app-table-wrap mt-4">
            <table class="app-table app-table--striped collection-table">
                <thead>
                    <tr>
                        <th>{{ __('dashboard.product_name') }}</th>
                        <th>{{ __('dashboard.product_sku') }}</th>
                        <th>{{ __('dashboard.quantity_returned') }}</th>
                        <th>{{ __('dashboard.refund_amount') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($returnedProductRows as $item)
                    <tr>
                        <td class="font-bold">{{ $item['product_name'] }}</td>
                        <td class="text-slate-500 dark:text-slate-400">{{ $item['product_sku'] }}</td>
                        <td>{{ $item['quantity'] }}</td>
                        <td class="font-bold">{{ $item['refund_amount'] }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="workspace-shell">
    <div class="workspace-body">
        <div class="collection-card__header">
            <div class="collection-card__intro">
                <span class="collection-card__icon"><i class="fa-solid fa-clock-rotate-left"></i></span>
                <div class="collection-card__title"><h2>{{ __('dashboard.history_title') }}</h2></div>
            </div>
            <div class="flex items-center gap-2 flex-wrap">
                <span class="app-badge app-badge--secondary">{{ $auditSummary['total'] }}</span>
                <a href="#audit_history_collapse" class="app-btn app-btn--secondary app-btn--sm" onclick="event.preventDefault();var el=document.getElementById('audit_history_collapse');el.style.display=el.style.display==='none'?'block':'none'">{{ __('dashboard.history_toggle') }}</a>
            </div>
        </div>
        <div id="audit_history_collapse" class="app-collapse mt-4">
            <div class="timeline">
                @forelse($auditEntries as $entry)
                <div class="timeline-item">
                    <div class="timeline-line w-40px"></div>
                    <div class="timeline-icon inline-flex rounded-full w-10 h-10 me-4">
                        <div class="inline-flex items-center justify-center w-10 h-10 rounded-full" style="background:var(--c-primary-bg)">
                            <i class="{{ $entry['icon'] }} text-2xl" style="color:var(--c-primary)"></i>
                        </div>
                    </div>
                    <div class="timeline-content mb-10 mt-n1">
                        <div class="font-semibold mb-1">{{ $entry['actor'] }} {{ $entry['headline'] }}</div>
                        <div class="text-slate-500 dark:text-slate-400" style="font-size:.75rem">{{ $entry['timestamp'] }}</div>
                        <div class="mt-2">
                            @foreach($entry['changes'] as $change)
                            <div class="flex flex-wrap gap-1">
                                <span class="font-bold">{{ $change['label'] }}:</span>
                                @if($change['has_old'])<span class="text-red-600 dark:text-red-400"><s>{{ $change['old'] }}</s></span><i class="fa-solid fa-arrow-right text-slate-500 dark:text-slate-400 mx-1"></i>@endif
                                <span class="text-emerald-600 dark:text-emerald-400 font-bold">{{ $change['new'] }}</span>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                @empty
                <p class="text-slate-500 dark:text-slate-400">{{ __('dashboard.history_no_history_found') }}</p>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection