@extends('layouts.app')

@section('title', __('pos.services.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.services.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($services->isEmpty())
        <div class="text-center py-5">
            <i class="bi bi-briefcase text-muted" style="font-size: 4rem;"></i>
            <p class="text-muted mt-3 fs-5">{{ __('no_services_found') }}</p>
        </div>
    @else
        <div class="pos-grid">
            @foreach($services as $service)
                @if($service->type === 'monthly_subscription_limited')
                    <a href="{{ route('services.monthly_subscription_limited.index', ['service_id' => $service->id]) }}" class="pos-item-card text-decoration-none">
                @elseif($service->type === 'monthly_subscription_open')
                    <a href="{{ route('services.monthly_subscription_open.index', ['service_id' => $service->id]) }}" class="pos-item-card text-decoration-none">
                @elseif($service->type === 'ads_creation')
                    <a href="{{ route('services.ads_creation.index', ['service_id' => $service->id]) }}" class="pos-item-card text-decoration-none">
                @elseif($service->type === 'web_development')
                    <a href="{{ route('services.web_development.index', ['service_id' => $service->id]) }}" class="pos-item-card text-decoration-none">
                @elseif($service->type === 'domains_emails')
                    <a href="{{ route('services.domains_emails.index', ['service_id' => $service->id]) }}" class="pos-item-card text-decoration-none">
                @elseif($service->type === 'app_development')
                    <a href="{{ route('services.app_development.index', ['service_id' => $service->id]) }}" class="pos-item-card text-decoration-none">
                @elseif($service->type === 'wordpress_templates')
                    <a href="{{ route('services.wordpress_templates.index', ['service_id' => $service->id]) }}" class="pos-item-card text-decoration-none">
                @elseif($service->type === 'one_time_service')
                    <a href="{{ route('services.one_time_service.index', ['service_id' => $service->id]) }}" class="pos-item-card text-decoration-none">
                @else
                    <div class="pos-item-card">
                @endif
                    <div class="pos-item-content h-100 d-flex flex-column">
                        <h3 class="pos-item-title mb-2">{{ $service->name }}</h3>
                        
                        @if($service->description)
                            <p class="pos-item-description">
                                {{ $service->description }}
                            </p>
                        @endif
                        
                        <div class="pos-item-price mt-auto text-end">
                            {{ number_format($service->price, 0) }}
                        </div>
                    </div>
                @if($service->type === 'monthly_subscription_limited' || $service->type === 'monthly_subscription_open' || $service->type === 'ads_creation' || $service->type === 'one_time_service' || $service->type === 'web_development' || $service->type === 'domains_emails' || $service->type === 'app_development' || $service->type === 'wordpress_templates')
                    </a>
                @else
                    </div>
                @endif
            @endforeach
        </div>
    @endif
</div>
@endsection