@extends('layouts.app')

@section('title', __('pos.products.title'))

@push('styles')
<link href="{{ asset('css/pos.css') }}" rel="stylesheet">
@endpush

@section('content')
<div class="pos-container">
    <div class="pos-header">
        <div class="d-flex align-items-center gap-3 w-100">
            <h2 class="pos-title">{{ __('pos.products.title') }}</h2>
            <a href="{{ route('pos') }}" class="btn btn-outline-secondary app-back-end">
                <i class="bi {{ app()->getLocale() == 'ar' ? 'bi-arrow-right' : 'bi-arrow-left' }}"></i> {{ __('common.back') }}
            </a>
        </div>
    </div>

    @if($products->isEmpty())
        <div class="text-center py-5">
            <i class="bi bi-box-seam text-muted" style="font-size: 4rem;"></i>
            <p class="text-muted mt-3 fs-5">{{ __('products.items.no_products_found') }}</p>
        </div>
    @else
        <div class="pos-grid">
            @foreach($products as $product)
                <div class="pos-item-card">
                    @if($product->images->isNotEmpty())
                        <img src="{{ Storage::url($product->images->first()->path) }}" alt="{{ $product->name }}" class="pos-item-image">
                    @else
                        <div class="pos-item-placeholder">
                            <i class="bi bi-box-seam"></i>
                        </div>
                    @endif
                    
                    <div class="pos-item-content">
                        <h3 class="pos-item-title">{{ $product->name }}</h3>
                        <div class="pos-item-price">
                            {{ number_format($product->sale_price, 0) }}
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>
@endsection