@extends('layouts.app')

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

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

@section('content')
<div class="container-fluid products-hub">
    <div class="d-flex align-items-center gap-3 mb-4 w-100">
        <h2 class="h3 fw-bold text-dark mb-0">{{ __('products.hub.title') }}</h2>
        <a href="{{ route('dashboard') }}" 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 class="row g-4">
        <!-- Main Categories -->
        <div class="col-12 col-md-6 col-lg-4">
            <a href="{{ route('products.page', 'main-categories') }}" class="product-hub-card">
                <div class="card-content">
                    <i class="bi bi-grid-fill card-icon"></i>
                    <h3 class="card-title">{{ __('products.cards.main_categories') }}</h3>
                </div>
            </a>
        </div>

        <!-- Sub Categories -->
        <div class="col-12 col-md-6 col-lg-4">
            <a href="{{ route('products.page', 'sub-categories') }}" class="product-hub-card">
                <div class="card-content">
                    <i class="bi bi-grid-3x3-gap-fill card-icon"></i>
                    <h3 class="card-title">{{ __('products.cards.sub_categories') }}</h3>
                </div>
            </a>
        </div>

        <!-- Product Details -->
        <div class="col-12 col-md-6 col-lg-4">
            <a href="{{ route('products.page', 'product-details') }}" class="product-hub-card">
                <div class="card-content">
                    <i class="bi bi-file-earmark-text-fill card-icon"></i>
                    <h3 class="card-title">{{ __('products.cards.product_details') }}</h3>
                </div>
            </a>
        </div>

        <!-- Products -->
        <div class="col-12 col-md-6 col-lg-4">
            <a href="{{ route('products.page', 'items') }}" class="product-hub-card">
                <div class="card-content">
                    <i class="bi bi-box-seam-fill card-icon"></i>
                    <h3 class="card-title">{{ __('products.cards.products') }}</h3>
                </div>
            </a>
        </div>

        <!-- Inventory -->
        <div class="col-12 col-md-6 col-lg-4">
            <a href="{{ route('products.page', 'inventory') }}" class="product-hub-card">
                <div class="card-content">
                    <i class="bi bi-shop card-icon"></i>
                    <h3 class="card-title">{{ __('products.cards.inventory') }}</h3>
                </div>
            </a>
        </div>

        <!-- Delivery -->
        <div class="col-12 col-md-6 col-lg-4">
            <a href="{{ route('products.page', 'delivery') }}" class="product-hub-card">
                <div class="card-content">
                    <i class="bi bi-truck card-icon"></i>
                    <h3 class="card-title">{{ __('products.cards.delivery') }}</h3>
                </div>
            </a>
        </div>
    </div>
</div>
@endsection