@extends('layouts.app')

@section('title', $product->name)

@section('content')
    <div class="page-header">
        <h1><i class="fas fa-box"></i> {{ $product->name }}</h1>
        <p class="text-white-50 mt-2">{{ __('products.product_details') }}</p>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card mb-4">
                <div class="card-body p-4">
                    <div class="row">
                        <div class="col-md-6 mb-4">
                            @if ($product->image)
                                <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" 
                                     class="img-fluid rounded" style="border-radius: 15px; object-fit: cover; height: 400px; width: 100%;">
                            @else
                                <div class="bg-light d-flex align-items-center justify-content-center rounded" 
                                     style="height: 400px; border-radius: 15px;">
                                    <i class="fas fa-image text-muted" style="font-size: 3rem;"></i>
                                </div>
                            @endif
                        </div>
                        <div class="col-md-6">
                            <!-- Price -->
                            <div class="mb-4">
                                <h6 class="text-muted">{{ __('products.price') }}</h6>
                                <h3 class="text-success">
                                    <i class="fas fa-money-bill"></i> {{ number_format($product->price, 2) }} ر.ع
                                </h3>
                            </div>

                            <!-- Stock Status -->
                            <div class="mb-4">
                                <h6 class="text-muted">{{ __('products.stock_status') }}</h6>
                                @if ($product->isInStock())
                                    <p>
                                        <span class="badge bg-success p-2">
                                            <i class="fas fa-check-circle"></i> {{ $product->stock }} {{ __('products.items_available') }}
                                        </span>
                                    </p>
                                @elseif ($product->isLowStock())
                                    <p>
                                        <span class="badge bg-warning p-2">
                                            <i class="fas fa-exclamation-circle"></i> {{ $product->stock }} {{ __('products.low_stock_warning') }}
                                        </span>
                                    </p>
                                @else
                                    <p>
                                        <span class="badge bg-danger p-2">
                                            <i class="fas fa-times-circle"></i> {{ __('products.out_of_stock') }}
                                        </span>
                                    </p>
                                @endif
                            </div>

                            <!-- Status -->
                            <div class="mb-4">
                                <h6 class="text-muted">{{ __('products.status') }}</h6>
                                @if ($product->status === 'active')
                                    <span class="badge bg-success p-2">
                                        <i class="fas fa-toggle-on"></i> {{ __('products.active') }}
                                    </span>
                                @else
                                    <span class="badge bg-danger p-2">
                                        <i class="fas fa-toggle-off"></i> {{ __('products.inactive') }}
                                    </span>
                                @endif
                            </div>

                            <!-- SKU -->
                            @if ($product->sku)
                                <div class="mb-4">
                                    <h6 class="text-muted">{{ __('products.sku') }}</h6>
                                    <p>
                                        <code class="bg-light p-2 rounded">{{ $product->sku }}</code>
                                    </p>
                                </div>
                            @endif

                            <!-- Dates -->
                            <div class="mb-4">
                                <h6 class="text-muted">{{ __('products.created') }}</h6>
                                <p>{{ $product->created_at->format('d/m/Y H:i') }}</p>
                            </div>

                            @if ($product->updated_at->ne($product->created_at))
                                <div class="mb-4">
                                    <h6 class="text-muted">{{ __('products.last_updated') }}</h6>
                                    <p>{{ $product->updated_at->format('d/m/Y H:i') }}</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Description -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-align-left"></i> {{ __('products.description') }}</h5>
                </div>
                <div class="card-body">
                    <p class="lead">{{ $product->description }}</p>
                </div>
            </div>
        </div>

        <!-- Sidebar Actions -->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-cogs"></i> {{ __('products.actions') }}</h5>
                </div>
                <div class="card-body d-flex flex-column gap-2">
                    <a href="{{ route('products.edit', $product) }}" class="btn btn-warning btn-lg">
                        <i class="fas fa-edit"></i> {{ __('products.edit_product') }}
                    </a>
                    <form action="{{ route('products.destroy', $product) }}" method="POST" novalidate>
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger btn-lg w-100" 
                                onclick="return confirm('{{ __('products.confirm_delete') }}')">
                            <i class="fas fa-trash"></i> {{ __('products.delete_product') }}
                        </button>
                    </form>
                    <a href="{{ route('products.index') }}" class="btn btn-secondary btn-lg">
                        <i class="fas fa-arrow-left"></i> {{ __('products.back_to_list') }}
                    </a>
                </div>
            </div>

            <!-- Product Info Card -->
            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-info-circle"></i> {{ __('products.product_info') }}</h5>
                </div>
                <div class="card-body">
                    <dl class="row">
                        <dt class="col-sm-6">{{ __('products.id') }}:</dt>
                        <dd class="col-sm-6"><strong>#{{ $product->id }}</strong></dd>

                        <dt class="col-sm-6">{{ __('products.price') }}:</dt>
                        <dd class="col-sm-6"><strong>{{ number_format($product->price, 2) }} ر.ع</strong></dd>

                        <dt class="col-sm-6">{{ __('products.stock') }}:</dt>
                        <dd class="col-sm-6"><strong>{{ $product->stock }}</strong></dd>

                        <dt class="col-sm-6">{{ __('products.status') }}:</dt>
                        <dd class="col-sm-6">
                            <strong>
                                @if ($product->status === 'active')
                                    <span class="badge bg-success">{{ __('products.active') }}</span>
                                @else
                                    <span class="badge bg-danger">{{ __('products.inactive') }}</span>
                                @endif
                            </strong>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
@endsection