@extends('website.layouts.app')

@section('content')

    <div class="container pt-50 pb-50">
		<div class="title">Product Detailes</div>
        <div class="product_details section mb-80">
            <div class="columns is-vcentered is-multiline has-text-centered products-list">
                <div class="column is-6 pl-20 pr-20">
                    <div class="image-wrapper">
                        <img src="{{ asset('storage/'.$product->image) }}"
                        data-demo-src="{{ asset('storage/'.$product->image) }}"/>
                    </div>
                </div>
                <div class="column is-6 pl-20 pr-20 mb-0">
                    <div>
                        <div class="title">{{ $product->name }}</div>
                        <div class="desc mb-30">{{ $product->description }}</div>
                    </div>
                </div>
            </div>
        </div>

        @if($product->content)
            <div class="fishes-list section mb-100">
                <div class="columns page_section is-vcentered is-multiline has-text-centered">
                    {!! $product->content !!}
                </div>
            </div>
        @endif

		<div class="title">Targeted Fish</div>
        <div class="fishes-list section mb-100">
            <div class="columns is-vcentered is-multiline has-text-centered">
                @foreach($related_fishes as $product)
                    <div class="column is-4 pl-20 pr-20 mb-40">
                        <a href="{{ route('fish_details', ['fish' => $product->id]) }}">
                            <div class="image-wrapper">
                                <img src="{{ asset('storage/'.$product->image) }}"
                                data-demo-src="{{ asset('storage/'.$product->image) }}"/>
                            </div>
                            <div>
                                <div class="title">{{ $product->name }}</div>
                                <div class="type">{{ $product->fish_type->name }}</div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>

    </div>

@endsection