@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-10">
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <div class="card">
                <div class="card-body">
                    <!-- Product Header -->
                    <div class="d-flex justify-content-between align-items-start mb-4">
                        <div class="flex-grow-1">
                            <h1 class="mb-2">{{ $product->title }}</h1>
                            <p class="text-muted mb-0">
                                <span class="badge bg-secondary">{{ $product->category->name }}</span>
                                @if($product->isPending())
                                    <span class="badge bg-warning text-dark">Pending Review</span>
                                @elseif($product->isApproved())
                                    <span class="badge bg-success">Approved</span>
                                @elseif($product->isRejected())
                                    <span class="badge bg-danger">Rejected</span>
                                @endif
                            </p>
                        </div>
                        <div>
                            @can('edit-product', $product)
                                <a href="{{ route('products.edit', $product) }}" class="btn btn-sm btn-outline-primary">Edit</a>
                            @endcan
                            @can('delete-product', $product)
                                <form action="{{ route('products.destroy', $product) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this product?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
                                </form>
                            @endcan
                        </div>
                    </div>

                    <!-- Product Thumbnail -->
                    @if($product->thumbnail_url)
                        <div class="mb-4">
                            <img src="{{ $product->thumbnail_url }}" alt="{{ $product->title }}" class="img-fluid rounded" style="max-height: 400px;">
                        </div>
                    @endif

                    <!-- Product Description -->
                    <div class="mb-4">
                        <h4>About</h4>
                        <p class="lead">{{ $product->description }}</p>
                    </div>

                    <!-- Product Links -->
                    <div class="mb-4">
                        <a href="{{ $product->website_url }}" target="_blank" rel="noopener" class="btn btn-primary btn-lg">
                            Visit Website →
                        </a>
                    </div>

                    <!-- Product Metadata -->
                    <hr>
                    <div class="row text-muted small">
                        <div class="col-md-6">
                            <strong>Submitted by:</strong>
                            <a href="{{ route('profile.show', $product->user) }}">{{ $product->user->name }}</a>
                        </div>
                        <div class="col-md-6 text-md-end">
                            <strong>Submitted:</strong> {{ $product->created_at->format('F j, Y') }}
                        </div>
                    </div>

                    @if($product->isApproved() && $product->approved_at)
                        <div class="row text-muted small mt-2">
                            <div class="col-md-12">
                                <strong>Approved:</strong> {{ $product->approved_at->format('F j, Y') }}
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Moderator Actions -->
            @can('approve-product')
                @if($product->isPending() || $product->isRejected())
                    <div class="card mt-3">
                        <div class="card-header bg-warning">
                            <h5 class="mb-0">Moderator Actions</h5>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('products.approve', $product) }}" method="POST" class="d-inline">
                                @csrf
                                <button type="submit" class="btn btn-success">Approve Product</button>
                            </form>
                            <form action="{{ route('products.reject', $product) }}" method="POST" class="d-inline">
                                @csrf
                                <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to reject this product?');">Reject Product</button>
                            </form>
                        </div>
                    </div>
                @endif
            @endcan

            <div class="mt-3">
                <a href="{{ route('products.index') }}" class="btn btn-secondary">← Back to Products</a>
            </div>
        </div>
    </div>
</div>
@endsection