@extends('layouts.admin')
@section('title', __('Products'))
@section('content')
<div class="mb-6 flex flex-wrap items-center justify-between gap-3"><h1 class="text-2xl font-extrabold text-primary">{{ __('Products') }}</h1><x-btn :href="route('admin.products.create')"><x-icon name="plus"/> {{ __('New product') }}</x-btn></div>
<form method="GET" class="mb-5 flex flex-wrap gap-3">
    <label class="sr-only" for="q">{{ __('Search') }}</label>
    <input id="q" name="q" value="{{ $q }}" placeholder="{{ __('Search name or code') }}" class="min-h-[44px] min-w-0 flex-1 rounded-full border border-outline-variant bg-white px-5">
    <select name="status" aria-label="{{ __('Status') }}" class="min-h-[44px] rounded-full border border-outline-variant bg-white px-4"><option value="">{{ __('All statuses') }}</option>
        @foreach (['active' => __('Active'), 'draft' => __('Draft'), 'archived' => __('Archived')] as $k => $l)<option value="{{ $k }}" @selected($status === $k)>{{ $l }}</option>@endforeach</select>
    <x-btn type="submit" variant="ghost">{{ __('Filter') }}</x-btn>
</form>
@if ($result['items'])
<div class="overflow-x-auto rounded-[28px] border border-surface-variant bg-white">
    <table class="w-full text-left text-sm">
        <thead class="bg-surface-mid text-on-surface-variant"><tr><th class="p-4">{{ __('Product') }}</th><th class="p-4">{{ __('Price') }}</th><th class="p-4">{{ __('Variants') }}</th><th class="p-4">{{ __('In stock') }}</th><th class="p-4">{{ __('Status') }}</th><th></th></tr></thead>
        <tbody>
        @foreach ($result['items'] as $p)
            <tr class="border-t border-surface-variant">
                <td class="p-4"><div class="flex items-center gap-3"><span class="h-12 w-12 flex-none overflow-hidden rounded-xl bg-surface-mid">@if ($p->image)<img src="{{ $p->image }}" alt="" class="h-full w-full object-cover">@endif</span>
                    <span><span class="block font-bold text-primary">{{ $p->name }}</span><span class="text-xs text-outline">{{ $p->sku_prefix }}</span></span></div></td>
                <td class="p-4">{{ $shop->money->format((float) $p->base_price) }}</td><td class="p-4">{{ $p->variants }}</td>
                <td class="p-4 {{ (int) $p->stock === 0 ? 'font-bold text-error' : '' }}">{{ $p->stock }}</td>
                <td class="p-4"><span class="rounded-full px-3 py-1 text-xs font-extrabold uppercase {{ $p->status === 'active' ? 'bg-secondary-container text-on-secondary-container' : 'bg-surface-variant text-on-surface-variant' }}">{{ __(ucfirst($p->status)) }}</span></td>
                <td class="p-4 text-right"><a class="font-bold text-primary underline" href="{{ route('admin.products.edit', $p->id) }}">{{ __('Edit') }}</a></td>
            </tr>
        @endforeach
        </tbody>
    </table>
</div>
@include('partials.pagination', ['result' => $result])
@else <x-empty :title="__('No products found')" :text="__('Add your first product to start selling.')"><x-btn :href="route('admin.products.create')">{{ __('New product') }}</x-btn></x-empty> @endif
@endsection