@extends('layouts.master')

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

@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />

<div class="container">
    <div class="mb-3">
        <a href="{{ route('seller.products.index') }}" class="btn btn-secondary">&larr; Back to Products</a>
    </div>

    <div class="row">
        <div class="col-md-6">
            @if(!empty($product->images_json))
                <div class="mb-3">
                    <a href="{{ asset('storage/' . $product->images_json[0]['original']) }}" data-fancybox="gallery">
                        <img src="{{ asset('storage/' . $product->images_json[0]['original']) }}" class="img-fluid rounded" alt="{{ $product->name }}">
                    </a>
                </div>
                <div class="row">
                    @foreach($product->images_json as $index => $image)
                        @if($index > 0)
                            <div class="col-3 mb-2">
                                <a href="{{ asset('storage/' . $image['original']) }}" data-fancybox="gallery">
                                    <img src="{{ asset('storage/' . $image['thumbnail']) }}" class="img-fluid rounded" alt="{{ $product->name }}">
                                </a>
                            </div>
                        @endif
                    @endforeach
                </div>
            @else
                <div class="alert alert-secondary">No images available.</div>
            @endif
        </div>
        <div class="col-md-6">
            <h1>{{ $product->name }}</h1>
            <p class="text-muted">Category: {{ $product->category->name }}</p>
            <h3 class="text-primary">{{ $product->price }}</h3>
            <p><strong>MOQ:</strong> {{ $product->moq }}</p>
            <hr>
            <h5>Description</h5>
            <p>{{ $product->description }}</p>
            
            <div class="mt-4">
                <a href="{{ route('seller.products.edit', $product) }}" class="btn btn-warning">Edit Product</a>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<script>
    Fancybox.bind("[data-fancybox]", {
        // Your custom options
    });
</script>
@endsection