@extends('layouts.app')
@section('title', __('All Products'))

@section('content')
    <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
        <form method="GET" class="flex flex-1 flex-wrap items-center gap-2">
            <input type="text" name="q" value="{{ request('q') }}" class="input max-w-xs" placeholder="{{ __('Search name or barcode') }}">
            <select name="category_id" class="input max-w-xs">
                <option value="">{{ __('All categories') }}</option>
                @foreach ($categories as $category)
                    <option value="{{ $category->id }}" @selected(request('category_id') == $category->id)>{{ $category->name }}</option>
                @endforeach
            </select>
            <button class="btn-secondary">{{ __('Filter') }}</button>
        </form>
        <div class="flex gap-2">
            <a href="{{ route('products.import.form') }}" class="btn-secondary"><x-icon name="download" class="h-4 w-4"/>{{ __('Import') }}</a>
            <a href="{{ route('products.create') }}" class="btn-primary"><x-icon name="plus" class="h-4 w-4"/>{{ __('New Product') }}</a>
        </div>
    </div>

    @if (session('import_categories'))
        <div class="mb-4 rounded-xl bg-brand-50 px-4 py-3 text-sm text-brand-800 ring-1 ring-brand-100">
            <p class="font-semibold">{{ __('Categories created automatically') }}</p>
            <p class="mt-1 text-xs">{{ implode(', ', session('import_categories')) }}</p>
        </div>
    @endif

    @if (session('import_warnings'))
        <div class="mb-4 rounded-xl bg-sky-50 px-4 py-3 text-sm text-sky-800 ring-1 ring-sky-100">
            <p class="font-semibold">{{ __('Import warnings') }}</p>
            <ul class="mt-1 list-inside list-disc text-xs">
                @foreach (session('import_warnings') as $warning)
                    <li>{{ $warning }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if (session('import_errors'))
        <div class="mb-4 rounded-xl bg-amber-50 px-4 py-3 text-sm text-amber-800 ring-1 ring-amber-100">
            <p class="font-semibold">{{ __('Import errors') }}</p>
            <ul class="mt-1 list-inside list-disc text-xs">
                @foreach (session('import_errors') as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="table-wrap">
        <table class="min-w-full divide-y divide-slate-100">
            <thead class="bg-slate-50">
                <tr>
                    <th class="th">{{ __('Name') }}</th>
                    <th class="th">{{ __('Category') }}</th>
                    <th class="th">{{ __('Barcode') }}</th>
                    <th class="th">{{ __('Purchase') }}</th>
                    <th class="th">{{ __('Selling') }}</th>
                    <th class="th">{{ __('Stock') }}</th>
                    <th class="th"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse ($products as $product)
                    <tr class="hover:bg-slate-50">
                        <td class="td">
                            <span class="font-medium text-slate-700">{{ $product->name }}</span>
                            @if ($product->requires_prescription)<span class="badge ml-1 bg-purple-100 text-purple-700">Rx</span>@endif
                            @if ($product->generic_name)<span class="block text-xs text-slate-400">{{ $product->generic_name }}</span>@endif
                        </td>
                        <td class="td">{{ $product->category?->name ?? '—' }}</td>
                        <td class="td font-mono text-xs">{{ $product->barcode ?? '—' }}</td>
                        <td class="td">{{ money($product->purchase_price) }}</td>
                        <td class="td font-semibold">{{ money($product->selling_price) }}</td>
                        <td class="td">
                            <span class="badge {{ $product->total_stock <= $product->min_stock ? 'bg-red-100 text-red-700' : 'bg-brand-100 text-brand-700' }}">
                                {{ $product->total_stock }}
                            </span>
                        </td>
                        <td class="td text-right">
                            <div class="flex justify-end gap-2">
                                <a href="{{ route('products.show', $product) }}" class="text-slate-400 hover:text-slate-600"><x-icon name="search" class="h-4 w-4"/></a>
                                <a href="{{ route('products.edit', $product) }}" class="text-brand-600 hover:text-brand-800"><x-icon name="pencil" class="h-4 w-4"/></a>
                                <form method="POST" action="{{ route('products.destroy', $product) }}" onsubmit="return confirm('{{ __('Delete this product?') }}')">
                                    @csrf @method('DELETE')
                                    <button class="text-red-500 hover:text-red-700"><x-icon name="trash" class="h-4 w-4"/></button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="td py-10 text-center text-slate-400">{{ __('No products found.') }}</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="mt-4">{{ $products->links() }}</div>
@endsection