<div class="modal-content modal-shop">
    <div class="modal-header">
        <h3 class="modal-title">
            {{ $product->name }}
        </h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
    </div>
    <div class="modal-body p-2 p-md-4">
        <div class="card mb-3 no-border">
            <div class="media flex-wrap flex-md-nowrap">
                <div class="d-block col-12 col-md-4 col-lg-4 text-center p-0 m-0">
                    @if(count($product->images))
                            <img src="{{route('product_image', [$product->images->first()->slug])}}" alt class="img-fluid" style="max-height: 300px">
                    @endif
                </div>

                <div class="media-body py-4 px-3 px-md-4">
                    {!! $product->copy !!}
                    <table class="table table-striped my-4">
                        <tbody>
                        <tr>
                            <td class="align-middle" style="width: 120px">Inhalt:</td>
                            <td class="font-weight-bold">{{ $product->contents }}</td>
                        </tr>
                        <tr>
                            <td class="align-middle">Gewicht:</td>
                            <td class="font-weight-bold">{{ $product->weight }} g</td>
                        </tr>
                        <tr>
                            <td class="align-middle">Art.-Nr.:</td>
                            <td class="font-weight-bold">{{ $product->number }}</td>
                        </tr>
                        @if(isset($data['view']) && $data['view'] === 'with-price')
                        <tr>
                            <td class="align-middle">Preis:</td>
                            <td class="font-weight-bold">{{ $product->getFormattedPrice() }} &euro;*</td>
                        </tr>
                        <tr>
                            <td class="align-middle">Grundpreis:</td>
                            <td class="font-weight-bold">{{ $product->getBasePriceFormattedFull() }} &euro;</td>
                        </tr>
                        <tr>
                            <td colspan="2" class=""><em>{{ __('shop.incl_VAT_plus_shipping') }}</em></td>
                        </tr>
                        @endif

                        </tbody>
                    </table>
                </div>
            </div>

            <div class="">

                <ul class="nav nav-tabs  justify-content-center border-0 px-4 px-lg-5">
                    <li class="nav-item">
                        <a class="nav-link small font-weight-normal text-expanded py-2 active" data-toggle="tab" href="#shop-product-description">Bechreibung</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link small font-weight-normal text-expanded py-2" data-toggle="tab" href="#shop-product-usage">Anwendung</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link small font-weight-normal text-expanded py-2" data-toggle="tab" href="#shop-product-full-ingredients">Inhaltsstoffe</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link small font-weight-normal text-expanded py-2" data-toggle="tab" href="#shop-product-ingredients">Hinweise</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="shop-product-description">
                        <div class="card borderless">
                            <div class="card-body">
                                {!! $product->description !!}
                            </div>
                        </div>

                    </div>
                    <div class="tab-pane fade" id="shop-product-usage">
                        <div class="card borderless">
                            <div class="card-body">
                                {!! $product->usage !!}
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="shop-product-full-ingredients">
                        <div class="card borderless no-border ">
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                <table class="datatables-style table table-striped">
                                    <thead>
                                    <tr>
                                        <th>{{__('Name')}}</th>
                                        <th>{{__('INCI')}}</th>
                                        <th>{{__('Wirkung') }}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($product->p_ingredients as $ingredient)
                                        <tr>
                                            <td>{{ $ingredient->name }}</td>
                                            <td>{{ $ingredient->inci }}</td>
                                            <td>{{ $ingredient->effect }}</td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="shop-product-ingredients">
                        <div class="card borderless">
                            <div class="card-body">
                                {!! $product->ingredients !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer  p-2">
            <button type="button" class="btn btn-default" data-dismiss="modal">schließen</button>
    </div>
</div>