@extends('dashboard.layouts.master')
@section('title', $product_image->product->title)

@section('content')
<div class="container my-5">
    <div class="row">
        <div class="col-md-6">
            <div class="mb-3">
                <img id="mainImage" src="{{ asset('storage/' . ($product->images->first()->image ?? $product->thumbnail)) }}"
                    alt="{{ $product->title }}" class="img-fluid rounded" style="width: 100%; max-height: 400px; object-fit: contain;">
            </div>
            <div class="d-flex gap-2">
                @foreach($product->images as $img)
                    <img src="{{ asset('storage/' . $img->image) }}"
                        alt="Thumbnail {{ $loop->iteration }}"
                        class="img-thumbnail"
                        style="width: 60px; height: 60px; object-fit: cover; cursor: pointer;"
                        onclick="document.getElementById('mainImage').src='{{ asset('storage/' . $img->image) }}'">
                @endforeach
            </div>
        </div>

        <div class="col-md-6">
            <h2 class="mb-2">{{ $product->title }}</h2>
            <h4 class="text-danger">Rs. {{ number_format($product->selling_price, 2) }}</h4>

            <div>
                <h4 class="mb-2">Product Details</h4>
                <p><strong>Product Name: </strong>{{ $product->title }}</p>
                <p><strong>Product Sub Title: </strong>{{ $product->sub_title }}</p>
                <p><strong>Categories: </strong>
    @if($product->categories->count())
        @foreach($product->categories as $category)
            {{ $category->title }}@if(!$loop->last), @endif
        @endforeach
    @else
        N/A
    @endif
</p>
                <p><strong>Display Price: </strong>Rs.{{ $product->display_price }}</p>
                <p><strong>Selling Price: </strong>Rs.{{ $product->selling_price }}</p>
                <p><strong>Description: </strong>{{ $product->description }}</p>
                <p><strong>Product Images: </strong>{{ $product->images->count() }}</p>
                <p><strong>Created At: </strong>{{ $product->created_at }}</p>
            </div>
        </div>
    </div>
</div>
<a href="{{ route('dashboard.productImages.index') }}" class="btn btn-primary">Back</a>
@endsection