@extends('layouts.erp_theme_01')
@section('content')
    
    <div class="row">

        <div class="col-md-4  mt-3">
            <div class="card ">
                <div class='card-header'>
                    <h3 class="titled">PIN Details</h3>
                    <hr/>
                    <p>
                        <strong>PIN Unit ID:</strong> <br/>{{ $data['pin']['pin_id'] }}
                    <hr/>
                    <strong>Collection ID:</strong> <br/>{{ $data['pin']['collection_id'] }}
                    <hr/>
                    <strong>Collection Name:</strong> <br/>{{ $data['collection']['collection_name'] }}
                    <hr/>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-4  mt-3">
            <div class="card ">
                <div class='card-header'>
                    <h3 class="title">Product Details</h3>
                    <hr/>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">SKU: {{ $data['product']['product_sku'] }}</li>
                        <li class="list-group-item">{{ $data['product']['product_name'] }}</li>
                        <li class="list-group-item">Category: <span
                                    class='badge bg-success rounded-pill'>{{ $data['product']['category'] }}</span></li>
                        <li class="list-group-item">Sub-category: {{ $data['product']['sub_category'] }}</li>
                        <li class="list-group-item">{{ $data['product']['description'] }}</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-md-4  mt-3">
            <div class="card ">
                <div class='card-header'>
                    <h3 class="title">Product Images</h3>
                    <hr/>
                    @if(count( $data['product']['images'] ) == 0)
                        <p class='alert alert-info white'>No product image has been uploaded!</p>
                    @else
                        <div class="gallery">
                            @foreach( $data['product']['images'] as $image)
                                <a href="{{ $image['image_url'] }}" class="big">
                                    <img src="{{ $image['image_url'] }}" width="80"/>
                                </a>
                            @endforeach
                        </div>
                    @endif

                </div>
            </div>
        </div>

    </div>
@endsection


@section('script')

    <script>
        (function () {
            var $gallery = new SimpleLightbox('.gallery a', {});
        })();
    </script>
@endsection