<div class="modal-content">


    <div class="modal-header">
        <h5 class="modal-title">
            Produktdetails
        </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
    </div>
    <div class="modal-body">

        <div class="card mb-3">
            <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 p-4 p-md-5 ">
                    <h4 class="mb-2">
                        <a href="#" class="text-body">{{ $product->name }}</a>
                    </h4>
                    {!! $product->copy !!}

                    <table class="table my-4">
                        <tbody>
                        <tr>
                            <td class="border-0 text-muted align-middle" style="width: 110px">Points:</td>
                            <td class="border-0">{{ $product->points }}</td>
                        </tr>
                        <tr>
                            <td class="border-0 text-muted align-middle" style="width: 110px">Inhalt:</td>
                            <td class="border-0">{{ $product->contents }}</td>
                        </tr>
                        <tr>
                            <td class="border-0 text-muted align-middle" style="width: 110px">Gewicht:</td>
                            <td class="border-0">{{ $product->weight }} g</td>
                        </tr>
                        <tr>
                            <td class="border-0 text-muted align-middle" style="width: 110px">Art.-Nr.:</td>
                            <td class="border-0">{{ $product->number }}</td>
                        </tr>
                        <tr>
                            <td class="border-0 text-muted align-middle" style="width: 110px">Netto-Preis:</td>
                            <td class="border-0">{{ $product->getFormattedPriceWith() }} &euro;</td>
                        </tr>

                        </tbody>
                    </table>

                 {{--
                                     <hr class="mt-0 mb-4">

                    <div class="input-group d-inline-flex w-auto">
                        <span class="input-group-prepend">
                          <button class="btn btn-secondary icon-btn md-btn-flat" type="button">-</button>
                        </span>
                        <input type="text" class="form-control text-center" value="1" style="width: 46px;">
                        <span class="input-group-append">
                          <button class="btn btn-secondary icon-btn md-btn-flat" type="button">+</button>
                        </span>
                    </div>

                    <button class="btn btn-secondary ml-3 mb-1">
                        <strong>&euro; {{$product->getFormattedPriceWith()}}</strong>&nbsp; +<span class="ion ion-md-cart"></span>
                    </button>
                    --}}
                </div>
            </div>

            <div class="">

                <ul class="nav nav-tabs tabs-alt 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-4 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-4" 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-4" data-toggle="tab" href="#shop-product-ingredients">Inhaltsstoffe</a>
                    </li>
                </ul>
                <hr class="m-0">

                <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-ingredients">
                        <div class="card borderless">
                            <div class="card-body">
                                {!! $product->ingredients !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">schließen</button>
    </div>
</div>
<script type="text/javascript">
    $( document ).ready(function() {

    });
</script>