@extends('layouts.bootstrap')

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

@section('header')
    <h1 class="h3 mb-0">
        <i class="bi bi-box me-2"></i>{{ $product->name }}
    </h1>
    <div>
        @if(auth()->user()->canManage())
            <a href="{{ route('products.edit', $product) }}" class="btn btn-warning me-2">
                <i class="bi bi-pencil me-1"></i>Edit
            </a>
        @endif
        <a href="{{ route('products.index') }}" class="btn btn-secondary">
            <i class="bi bi-arrow-left me-1"></i>Back to Products
        </a>
    </div>
@endsection

@section('content')
<div class="row">
    <!-- Product Information -->
    <div class="col-md-8 mb-4">
        <div class="card shadow">
            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-primary">Product Details</h6>
                <div>
                    @if($product->isComplete())
                        <span class="badge bg-success">Complete ({{ $product->getCompletionPercentage() }}%)</span>
                    @else
                        <span class="badge bg-warning text-dark">Incomplete ({{ $product->getCompletionPercentage() }}%)</span>
                        @if(auth()->user()->canManage())
                            <a href="{{ route('products.edit', $product) }}" class="btn btn-sm btn-outline-warning ms-2">
                                <i class="bi bi-pencil me-1"></i>Complete Details
                            </a>
                        @endif
                    @endif
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-borderless">
                            <tr>
                                <td><strong>Name:</strong></td>
                                <td>{{ $product->name }}</td>
                            </tr>
                            <tr>
                                <td><strong>Category:</strong></td>
                                <td>
                                    @if($product->category)
                                        <a href="{{ route('categories.show', $product->category) }}" class="text-decoration-none">
                                            {{ $product->category->name }}
                                        </a>
                                    @else
                                        <span class="text-muted">Not specified</span>
                                        <span class="badge bg-warning text-dark ms-1">Missing</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <td><strong>Subcategory:</strong></td>
                                <td>
                                    @if($product->subcategory)
                                        <a href="{{ route('subcategories.show', $product->subcategory) }}" class="text-decoration-none">
                                            {{ $product->subcategory->name }}
                                        </a>
                                    @else
                                        <span class="text-muted">Not specified</span>
                                        <span class="badge bg-warning text-dark ms-1">Missing</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <td><strong>Country of Origin:</strong></td>
                                <td>
                                    @if($product->country_of_origin)
                                        {{ $product->country_of_origin }}
                                    @else
                                        <span class="text-muted">Not specified</span>
                                        <span class="badge bg-warning text-dark ms-1">Missing</span>
                                    @endif
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-borderless">
                            <tr>
                                <td><strong>Price:</strong></td>
                                <td>
                                    @if($product->price)
                                        <span class="h4 text-success">${{ number_format($product->price, 2) }}</span>
                                    @else
                                        <span class="text-muted">Not specified</span>
                                        <span class="badge bg-warning text-dark ms-1">Missing</span>
                                    @endif
                                </td>
                            </tr>
                            @if($product->measurement_unit)
                            <tr>
                                <td><strong>Measurement Unit:</strong></td>
                                <td>
                                    <span class="badge bg-info">{{ $product->measurement_unit }}</span>
                                </td>
                            </tr>
                            @else
                            <tr>
                                <td><strong>Measurement Unit:</strong></td>
                                <td>
                                    <span class="text-muted">Not specified</span>
                                    <span class="badge bg-warning text-dark ms-1">Missing</span>
                                </td>
                            </tr>
                            @endif
                            <tr>
                                <td><strong>Created By:</strong></td>
                                <td>{{ $product->creator->name }}</td>
                            </tr>
                            <tr>
                                <td><strong>Updated By:</strong></td>
                                <td>{{ $product->updater->name }}</td>
                            </tr>
                            <tr>
                                <td><strong>Created:</strong></td>
                                <td>{{ $product->created_at->format('M d, Y H:i') }}</td>
                            </tr>
                            <tr>
                                <td><strong>Updated:</strong></td>
                                <td>{{ $product->updated_at->format('M d, Y H:i') }}</td>
                            </tr>
                        </table>
                    </div>
                </div>

                @if($product->description)
                    <div class="mt-3">
                        <h6><strong>Description:</strong></h6>
                        <p class="text-muted">{{ $product->description }}</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Quick Stats -->
    <div class="col-md-4 mb-4">
        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Quick Stats</h6>
            </div>
            <div class="card-body">
                <div class="text-center">
                    <div class="mb-3">
                        <i class="bi bi-graph-up display-4 text-success"></i>
                        <h4 class="mt-2">${{ number_format($product->price, 2) }}</h4>
                        <p class="text-muted">Current Price</p>
                    </div>
                    
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="border-end">
                                <h5>{{ $history->count() }}</h5>
                                <small class="text-muted">Changes</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <h5>{{ $product->created_at->diffInDays(now()) }}</h5>
                            <small class="text-muted">Days Old</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Product History -->
@if($history->count() > 0)
<div class="row">
    <div class="col-12">
        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="bi bi-clock-history me-2"></i>Change History
                </h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>Date</th>
                                <th>Action</th>
                                <th>Changed By</th>
                                <th>Changes</th>
                                <th>Reason</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($history as $audit)
                                <tr>
                                    <td>{{ $audit->created_at->format('M d, Y H:i') }}</td>
                                    <td>
                                        <span class="badge 
                                            @if($audit->action === 'created') bg-success
                                            @elseif($audit->action === 'updated') bg-warning
                                            @else bg-danger
                                            @endif">
                                            {{ ucfirst($audit->action) }}
                                        </span>
                                    </td>
                                    <td>{{ $audit->user->name }}</td>
                                    <td>
                                        @if($audit->field_changes)
                                            <small>
                                                @foreach($audit->field_changes as $field => $value)
                                                    @if($field !== 'updated_at' && $field !== 'updated_by')
                                                        <div>
                                                            <strong>{{ ucfirst(str_replace('_', ' ', $field)) }}:</strong>
                                                            @if($audit->action === 'updated' && isset($audit->field_changes[$field]))
                                                                {{ $value }}
                                                            @else
                                                                {{ $value }}
                                                            @endif
                                                        </div>
                                                    @endif
                                                @endforeach
                                            </small>
                                        @endif
                                    </td>
                                    <td>
                                        @if($audit->reason)
                                            <small class="text-muted">{{ $audit->reason }}</small>
                                        @else
                                            <small class="text-muted">-</small>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endif
@endsection