@extends('layouts.app')

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

@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_sales') }}</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 {{ $sales->count() ? 'adm-chip--success' : '' }}">
                    <i class="fa-solid fa-receipt"></i>{{ $sales->count() }} {{ __('dashboard.sales_focus.records') }}
                </span>
            </div>
        </div>
        <div class="adm-hero__metrics">
            <div class="adm-metric adm-metric--primary">
                <div class="adm-metric__label">{{ __('dashboard.sales_focus.total_value') }}</div>
                <div class="adm-metric__value">{{ number_format($sales->sum('final_total'), 2) }}</div>
                <div class="adm-metric__sub">{{ $sales->count() }} {{ __('dashboard.sales_focus.sale') }}</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_sales') }}</div>
            <div class="adm-panel__sub">{{ __('dashboard.sales_focus.last_x_minutes', ['minutes' => $minutes]) }}</div>
        </div>
        <div class="sf-table-toolbar__actions">
            @can('create sales')
            <a href="{{ route('dashboard.sales.create') }}" class="app-btn app-btn--sm app-btn--primary">
                <i class="fa-solid fa-cart-plus"></i>{{ __('dashboard.sales_focus.new_sale') }}
            </a>
            @endcan
            <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:600px">
                <thead>
                    <tr class="sf-head-row">
                        <th class="sf-head-cell sf-head-cell--id">#</th>
                        <th class="sf-head-cell">{{ __('dashboard.Customer') }}</th>
                        <th class="sf-head-cell">{{ __('dashboard.Total') }}</th>
                        <th class="sf-head-cell">{{ __('dashboard.Payment Status') }}</th>
                        <th class="sf-head-cell">{{ __('dashboard.Payment Method') }}</th>
                        <th class="sf-head-cell">{{ __('dashboard.Time') }}</th>
                        <th class="sf-head-cell"></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($sales as $sale)
                    @php
                        $ps = $sale->payment_status ?? '';
                        [$psBg, $psColor] = match($ps) {
                            'paid'    => ['#f0fdf4','#16a34a'],
                            'partial' => ['#fffbeb','#d97706'],
                            default   => ['#fef2f2','#dc2626'],
                        };
                        $psLabel = match($ps) {
                            'paid'    => __('dashboard.Paid'),
                            'partial' => __('dashboard.Partial'),
                            default   => __('dashboard.Unpaid'),
                        };
                    @endphp
                    <tr>
                        <td class="sf-cell-id">{{ $sale->id }}</td>
                        <td class="sf-cell-primary">
                            @if($sale->customer_id)
                                <a href="{{ route('dashboard.customers.show', $sale->customer_id) }}" class="sf-link">
                                    {{ $sale->customer?->name ?? $sale->customer_name ?? '-' }}
                                </a>
                            @else
                                <span class="sf-link">{{ $sale->customer_name ?? '-' }}</span>
                            @endif
                        </td>
                        <td class="sf-cell-strong">{{ number_format((float)$sale->final_total, 2) }}</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:{{ $psBg }};color:{{ $psColor }}">
                                {{ $psLabel }}
                            </span>
                        </td>
                        <td class="sf-cell-secondary">{{ $sale->payment_method ?? '-' }}</td>
                        <td class="sf-cell-muted">{{ $sale->created_at?->format('H:i:s') }}</td>
                        <td class="sf-cell-action">
                            @can('view sales')
                            <a href="{{ route('dashboard.sales.show', $sale->id) }}" class="adm-item__btn sf-view-btn">
                                <i class="fa-solid fa-eye"></i>
                            </a>
                            @endcan
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7">
                            <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