@extends('layouts.app')

@section('title', __('dashboard.Supplier Details'))
@section('page_heading', $supplier->name)

@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-address-card"></i></span>
                <div class="collection-card__title">
                    <h2>{{ __('dashboard.Supplier Details') }}</h2>
                    <p>{{ __('dashboard.supplier_basic_info_desc') }}</p>
                </div>
            </div>
            <div class="flex items-center gap-2">
                @can('edit suppliers')
                <a href="{{ route('dashboard.suppliers.edit', $supplier->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.suppliers.index') }}" class="app-btn app-btn--secondary app-btn--sm">
                    <i class="fa-solid fa-arrow-right"></i> {{ __('dashboard.Suppliers') }}
                </a>
            </div>
        </div>

        <div class="app-grid gap-4 mt-2">
            <div class="md:col-span-4">
                <div class="text-slate-500 dark:text-slate-400" style="font-size:.78rem;font-weight:700">{{ __('dashboard.Name') }}</div>
                <div class="font-bold">{{ $supplier->name }}</div>
            </div>
            <div class="md:col-span-4">
                <div class="text-slate-500 dark:text-slate-400" style="font-size:.78rem;font-weight:700">{{ __('dashboard.Phone') }}</div>
                <div class="font-bold">{{ $supplier->phone ?: '—' }}</div>
            </div>
            <div class="md:col-span-4">
                <div class="text-slate-500 dark:text-slate-400" style="font-size:.78rem;font-weight:700">{{ __('dashboard.Address') }}</div>
                <div class="font-bold">{{ $supplier->address ?: '—' }}</div>
            </div>
        </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">{{ __('dashboard.history_total') }}: {{ $auditSummary['total'] }}</span>
                <span class="app-badge app-badge--success">{{ __('dashboard.history_created') }}: {{ $auditSummary['created'] }}</span>
                <span class="app-badge app-badge--warning">{{ __('dashboard.history_updated') }}: {{ $auditSummary['updated'] }}</span>
                <span class="app-badge app-badge--danger">{{ __('dashboard.history_deleted') }}: {{ $auditSummary['deleted'] }}</span>
                <a href="#supplier_history_collapse" class="app-btn app-btn--secondary app-btn--sm" onclick="event.preventDefault();var el=document.getElementById('supplier_history_collapse');el.style.display=el.style.display==='none'?'block':'none'">{{ __('dashboard.history_toggle') }}</a>
            </div>
        </div>

        <div id="supplier_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['headline'] }} {{ __('dashboard.history_event_by') }} <span class="font-bold">{{ $entry['actor'] }}</span></div>
                        <div class="text-slate-500 dark:text-slate-400" style="font-size:.75rem">{{ $entry['timestamp'] }} ({{ $entry['timestamp_human'] }})</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