@extends('layouts.app')

@section('title', __('dashboard.sales_focus.recent_embroidery_orders'))
@section('page_heading', __('dashboard.sales_focus.recent_embroidery_orders'))

@section('content')

<div class="adm-hero mb-6">
    <div class="adm-hero__inner">
        <div>
            <div class="adm-hero__eyebrow">{{ __('dashboard.sales_focus.title') }}</div>
            <h1 class="adm-hero__title">{{ __('dashboard.sales_focus.recent_embroidery_orders') }}</h1>
            <div class="adm-hero__date">{{ __('dashboard.sales_focus.current_user') }}: {{ $user->name }}</div>
            <div class="adm-hero__chips">
                <span class="adm-chip"><i class="fa-solid fa-clock"></i>{{ __('dashboard.sales_focus.last_x_minutes', ['minutes' => $minutes]) }}</span>
                <span class="adm-chip {{ $orders->count() ? 'adm-chip--success' : '' }}">
                    <i class="fa-solid fa-star"></i>{{ $orders->count() }} {{ __('dashboard.sales_focus.records') }}
                </span>
            </div>
        </div>
        <div class="adm-hero__metrics">
            <div class="adm-metric adm-metric--warning">
                <div class="adm-metric__label">{{ __('dashboard.sales_focus.total_estimated') }}</div>
                <div class="adm-metric__value">{{ number_format($orders->sum('estimated_price'), 2) }}</div>
                <div class="adm-metric__sub">{{ $orders->count() }} {{ __('dashboard.sales_focus.order') }}</div>
            </div>
        </div>
    </div>
</div>

<div class="adm-panel mb-5">
    <div class="adm-panel__header sf-table-toolbar">
        <div>
            <div class="adm-panel__title">{{ __('dashboard.sales_focus.recent_embroidery_orders') }}</div>
            <div class="adm-panel__sub">{{ __('dashboard.sales_focus.last_x_minutes', ['minutes' => $minutes]) }}</div>
        </div>
        <div class="sf-table-toolbar__actions">
            @canany(['view products', 'create products'])
            <a href="{{ route('dashboard.embroidery-orders.index') }}" class="app-btn app-btn--sm app-btn--primary">
                <i class="fa-solid fa-star"></i>{{ __('dashboard.sales_focus.embroidery_orders') }}
            </a>
            @endcanany
            <a href="{{ route('dashboard.sales-focus.index') }}" class="app-btn app-btn--sm app-btn--ghost">
                <i class="fa-solid fa-chevron-right"></i>{{ __('dashboard.sales_focus.back_to_focus') }}
            </a>
            <span class="adm-chip sf-refresh-chip"><i class="fa-solid fa-arrows-rotate me-1"></i><span id="refresh-indicator">60s</span></span>
        </div>
    </div>
    <div class="adm-panel__body" style="padding:0">
        <div class="sf-table-wrap">
            <table class="sf-table" style="min-width:700px">
                <thead>
                    <tr class="sf-head-row">
                        <th class="sf-head-cell sf-head-cell--id">#</th>
                        <th class="sf-head-cell">{{ __('dashboard.Reference') }}</th>
                        <th class="sf-head-cell">{{ __('dashboard.Customer') }}</th>
                        <th class="sf-head-cell">{{ __('dashboard.Title') }}</th>
                        <th class="sf-head-cell">{{ __('dashboard.Status') }}</th>
                        <th class="sf-head-cell">{{ __('dashboard.Estimated Price') }}</th>
                        <th class="sf-head-cell">{{ __('dashboard.Time') }}</th>
                        <th class="sf-head-cell"></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($orders as $order)
                    @php
                        $status = $order->status ?? '';
                        [$sBg, $sColor] = match($status) {
                            'completed'   => ['#f0fdf4','#16a34a'],
                            'in_progress' => ['#eff6ff','#2563eb'],
                            'cancelled'   => ['#f1f5f9','#475569'],
                            default       => ['#fffbeb','#d97706'],
                        };
                        $sLabel = match($status) {
                            'completed'   => __('dashboard.Completed'),
                            'in_progress' => __('dashboard.In Progress'),
                            'cancelled'   => __('dashboard.Cancelled'),
                            default       => ($status ?: __('dashboard.Pending')),
                        };
                    @endphp
                    <tr>
                        <td class="sf-cell-id">{{ $order->id }}</td>
                        <td class="sf-cell-primary">{{ $order->reference_code ?? '-' }}</td>
                        <td class="sf-cell-primary">
                            @if($order->customer_id)
                                <a href="{{ route('dashboard.customers.show', $order->customer_id) }}" class="sf-link">
                                    {{ $order->customer?->name ?? '-' }}
                                </a>
                            @else
                                <span class="sf-link">-</span>
                            @endif
                        </td>
                        <td class="sf-cell-secondary">{{ $order->title ?? '-' }}</td>
                        <td class="sf-cell-secondary">
                            <span style="display:inline-flex;align-items:center;padding:.3rem .7rem;border-radius:999px;font-size:.75rem;font-weight:700;background:{{ $sBg }};color:{{ $sColor }}">
                                {{ $sLabel }}
                            </span>
                        </td>
                        <td class="sf-cell-strong">{{ number_format((float)$order->estimated_price, 2) }}</td>
                        <td class="sf-cell-muted">{{ $order->created_at?->format('H:i:s') }}</td>
                        <td class="sf-cell-action">
                            @canany(['view products', 'create products'])
                            <a href="{{ route('dashboard.embroidery-orders.show', $order->id) }}" class="adm-item__btn sf-view-btn">
                                <i class="fa-solid fa-eye"></i>
                            </a>
                            @endcanany
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8">
                            <div class="adm-empty" style="margin:1rem">{{ __('dashboard.sales_focus.no_records_in_window') }}</div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
(function() {
    let countdown = 60;
    const indicator = document.getElementById('refresh-indicator');
    const timer = setInterval(function() {
        countdown--;
        if (indicator) indicator.textContent = countdown + 's';
        if (countdown <= 0) { clearInterval(timer); location.reload(); }
    }, 1000);
})();
</script>
@endsection