basic-business-template/content/contents/produkt.blade.php

@extends('template.'.config('settings.template').'.content.master')
@section('head')
    <title>{{$content->title}}</title>

    <meta name="product-id" content="{{$content->id}}">
@stop
@section('content')
    <div class="pt-3 pb-2 mb-5" style="background-color: {{$_primary_ci_color}}">
        <div class="container">


            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                <ol class="breadcrumb text-decoration-none">
                    <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{url('/produkte')}}">Produkte</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{$content->title}}</li>
                </ol>
            </nav>
        </div>
    </div>
    <div class="container">
        @if(session()->has('success'))
            <div class="alert alert-success">{{session()->get('success')}}</div>
        @elseif(session()->has('error'))
            <div class="alert alert-danger">{{session()->get('error')}}</div>
        @endif
            <div class="row">
                <div class="col-12 col-lg-5">

                        <img src="{{ $content->image() }}" class="rounded img-fluid shadow-sm"  alt="Bild {{$content->title}} ">
                    <br>
                    <br>
                    <br>
                </div>
                <div class="col-12 col-lg-6 offset-lg-1">
                    <h1 class="h2">{{$content->title}}</h1>
                    <div class=" mt-3 mb-3">
                        <span class="fs-3 fw-bold" style="color: #546c8a;">{{$content->preis}} €</span>
                        <span class="text-muted fs-7"> inkl. 19% MwSt.</span>
                    </div>
                    <div class=" mt-3 mb-3 fs-6 fw-bolder" >


                        @if($content->verfugbarkeit == 'sofort verfuegbar')

                            <span style="color: #79b27f;">
                                <svg style="fill: currentColor; width: 22px; margin-right: 10px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M624 352h-16V243.9c0-12.7-5.1-24.9-14.1-33.9L494 110.1c-9-9-21.2-14.1-33.9-14.1H416V48c0-26.5-21.5-48-48-48H112C85.5 0 64 21.5 64 48v48H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h272c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H40c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h208c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h208c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H64v128c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h48c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm320 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-208H416V144h44.1l99.9 99.9V256z"/></svg>
                                Sofort in {{$_legal_city}} verfügbar!
                            </span>

                        @elseif($content->verfugbarkeit == 'In kürze Verfügbar')

                            <span style="color: #c9a767;">
                                <svg style="fill: currentColor; width: 22px; margin-right: 10px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M624 352h-16V243.9c0-12.7-5.1-24.9-14.1-33.9L494 110.1c-9-9-21.2-14.1-33.9-14.1H416V48c0-26.5-21.5-48-48-48H112C85.5 0 64 21.5 64 48v48H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h272c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H40c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h208c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h208c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H64v128c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h48c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm320 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-208H416V144h44.1l99.9 99.9V256z"/></svg>
                                In Kürze wieder verfügbar
                            </span>

                        @elseif($content->verfugbarkeit = 'auf bestellung verfuegbar')

                            <span style="color: #c9a767;">
                            <svg style="fill: currentColor; width: 22px; margin-right: 10px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M624 352h-16V243.9c0-12.7-5.1-24.9-14.1-33.9L494 110.1c-9-9-21.2-14.1-33.9-14.1H416V48c0-26.5-21.5-48-48-48H112C85.5 0 64 21.5 64 48v48H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h272c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H40c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h208c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h208c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H64v128c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h48c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm320 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-208H416V144h44.1l99.9 99.9V256z"/></svg>
                            Produkt ist auf Bestellung verfügbar.
                        </span>

                        @elseif($content->verfugbarkeit = 'nicht mehr verfuegbar')



                        <span style="color: #b0413d;">
                            <svg style="fill: currentColor; width: 22px; margin-right: 10px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/></svg>
                            Produkt ist leider nicht mehr verfügbar.
                        </span>


                        @endif



                        <br>

                        <br>
                            {!! $content->kurzbeschreibung !!}

                        <br>




                    </div>

                    <div class="row">
                        @isset($content->preis_5)
                            <div class="col-6">


                                <p>
                                    <button class="btn btn-link text-muted text-decoration-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
                                        <svg style="fill: currentColor; width: 20px; margin-right: 2px; margin-bottom: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M349.66 173.65l-11.31-11.31c-3.12-3.12-8.19-3.12-11.31 0l-164.7 164.69c-3.12 3.12-3.12 8.19 0 11.31l11.31 11.31c3.12 3.12 8.19 3.12 11.31 0l164.69-164.69c3.13-3.12 3.13-8.18.01-11.31zM240 192c0-26.47-21.53-48-48-48s-48 21.53-48 48 21.53 48 48 48 48-21.53 48-48zm-64 0c0-8.83 7.19-16 16-16s16 7.17 16 16-7.19 16-16 16-16-7.17-16-16zm144 80c-26.47 0-48 21.53-48 48s21.53 48 48 48 48-21.53 48-48-21.53-48-48-48zm0 64c-8.81 0-16-7.17-16-16s7.19-16 16-16 16 7.17 16 16-7.19 16-16 16zm192-80c0-35.5-19.4-68.2-49.6-85.5 9.1-33.6-.3-70.4-25.4-95.5s-61.9-34.5-95.5-25.4C324.2 19.4 291.5 0 256 0s-68.2 19.4-85.5 49.6c-33.6-9.1-70.4.3-95.5 25.4s-34.5 61.9-25.4 95.5C19.4 187.8 0 220.5 0 256s19.4 68.2 49.6 85.5c-9.1 33.6.3 70.4 25.4 95.5 26.5 26.5 63.4 34.1 95.5 25.4 17.4 30.2 50 49.6 85.5 49.6s68.1-19.4 85.5-49.6c32.7 8.9 69.4.7 95.5-25.4 25.1-25.1 34.5-61.9 25.4-95.5 30.2-17.3 49.6-50 49.6-85.5zm-91.1 68.3c5.3 11.8 29.5 54.1-6.5 90.1-28.9 28.9-57.5 21.3-90.1 6.5C319.7 433 307 480 256 480c-52.1 0-64.7-49.5-68.3-59.1-32.6 14.8-61.3 22.2-90.1-6.5-36.8-36.7-10.9-80.5-6.5-90.1C79 319.7 32 307 32 256c0-52.1 49.5-64.7 59.1-68.3-5.3-11.8-29.5-54.1 6.5-90.1 36.8-36.9 80.8-10.7 90.1-6.5C192.3 79 205 32 256 32c52.1 0 64.7 49.5 68.3 59.1 11.8-5.3 54.1-29.5 90.1 6.5 36.8 36.7 10.9 80.5 6.5 90.1C433 192.3 480 205 480 256c0 52.1-49.5 64.7-59.1 68.3z"/></svg>
                                        Mengenrabate
                                    </button>
                                </p>
                            </div>
                        @endisset



                        <div class="col-12">
                            <div class="collapse" id="collapseWidthExample">
                                <div class="card card-body mb-5">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th scope="col">Abnahme</th>
                                            <th scope="col">Preis pro Einheit</th>
                                            <th scope="col">Rabatt</th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        @isset($content->preis_5)
                                            <tr>
                                                <td>ab 5 Stück</td>
                                                <td>{{$content->preis_5}} €</td>
                                                <td><span class="badge text-bg-dark">{{number_format((float) (($content->preis_5-$content->preis)*100)/$content->preis , 2, ',', '')}} %</span></td>
                                            </tr>
                                        @endisset

                                        @isset($content->preis_10)
                                            <tr>
                                                <td>ab 10 Stück</td>
                                                <td>{{$content->preis_10}} €</td>
                                                <td><span class="badge text-bg-dark">{{number_format((float) (($content->preis_10-$content->preis)*100)/$content->preis , 2, ',', '')}} %</span></td>
                                            </tr>
                                        @endisset

                                        @isset($content->preis_palette)
                                            <tr>
                                                <td>Palette ({{$content->module_pro_palette}} Stück)</td>
                                                <td>{{$content->preis_palette}} €</td>
                                                <td><span class="badge text-bg-dark">{{number_format((float) (($content->preis_palette-$content->preis)*100)/$content->preis , 2, ',', '')}} %</span></td>
                                            </tr>
                                        @endisset


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

                    <div class="row mt-5">
                        <div class="col-12 col-md-6">
                            <button  id="btn-add-to-bag" data-id="{{$content->id}}" class="btn btn-outline-success  mb-5" style="padding-top: 6px; padding-bottom: 6px; padding-right: 20px; padding-left: 20px;">
                                <svg style="fill: currentColor; width: 19px; margin-right: 8px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 128C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128H0v304c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V128h-96zM224 48c44.112 0 80 35.888 80 80H144c0-44.112 35.888-80 80-80zm176 384c0 17.645-14.355 32-32 32H80c-17.645 0-32-14.355-32-32V176h48v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h160v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h48v256z"/></svg>
                                In den Einkaufswagen
                            </button>
                            <button  id="btn-show-bag" type="button" data-bs-toggle="modal" data-bs-target="#ShoppingCart" class="btn btn-success position-relative mb-5">
                                Im Warenkorb ansehen
                                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" id="count-items-in-bag"></span>
                            </button>
                        </div>
                        <div  class="col-12 col-md-6">
                            <button id="btn-check-out" data-id="{{$content->id}}" class="btn btn-primary mb-5" style="padding-top: 6px; padding-bottom: 6px; padding-right: 20px; padding-left: 20px;">
                                <svg style="fill: white; width: 19px; margin-right: 8px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 128C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128H0v304c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V128h-96zM224 48c44.112 0 80 35.888 80 80H144c0-44.112 35.888-80 80-80zm176 384c0 17.645-14.355 32-32 32H80c-17.645 0-32-14.355-32-32V176h48v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h160v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h48v256z"/></svg>
                                Unverbindlich anfragen
                            </button>
                        </div>
                    </div>
                </div>
            </div>


        <div class="row mb-5">
            <div class="col-12 fs-5 mb-5">
                <h2 class="mb-4 mt-5 h3">Produktbeschreibung</h2>
                {!! $content->beschreibung !!}



            </div>


        </div>
        <div class="row mb-5">
            <div class="col-12">
                <h2 class="mb-4 mt-5 h3">Weitere Produktbilder</h2>

            </div>

            <div class="col-12 col-md-6 col-lg-3 text-center">
                <img src="https://picsum.photos/400/300" class="rounded img-fluid border mb-3">
            </div>

            <div class="col-12 col-md-6 col-lg-3 text-center">
                <img src="https://picsum.photos/400/300" class="rounded img-fluid border mb-3">
            </div>

            <div class="col-12 col-md-6 col-lg-3 text-center">
                <img src="https://picsum.photos/400/300" class="rounded img-fluid border mb-3">
            </div>

            <div class="col-12 col-md-6 col-lg-3 text-center">
                <img src="https://picsum.photos/400/300" class="rounded img-fluid border mb-3">
            </div>
        </div>

            <div class="row mb-5">
                <div class="col-12">
                    <hr class="pb-5 mt-5">
                    <h2 class="mb-4 mt-5 h3">Weitere Produkte</h2>
                </div>

                    <div class="col-12 col-md-4 mb-3">
                        <a href="33" class="text-decoration-none">
                            <div class="card shadow-sm">
                                <img src="https://picsum.photos/600/400" class="img-fluid card-img-top">
                                <div class="card-body">
                                    <h3 class="h5 mb-2">Anderes Produkt XMY </h3>
                                    <div class="fw-bold my-3 text-right fs-5" style="color: {{$_secondary_link_color}};">391 €</div>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam blanditiis, eligendi ex explicabo odio possimus provident rerum saepe soluta suscipit tenetur ullam vero. Autem blanditiis obcaecati quis quod voluptates voluptatum.
                                </div>
                            </div>
                        </a>
                    </div>

                <div class="col-12 col-md-4 mb-3">
                    <a href="33" class="text-decoration-none">
                        <div class="card shadow-sm">
                            <img src="https://picsum.photos/600/400" class="img-fluid card-img-top">
                            <div class="card-body">
                                <h3 class="h5 mb-2">Anderes Produkt XMY </h3>
                                <div class="fw-bold my-3 text-right fs-5" style="color: {{$_secondary_link_color}};">391 €</div>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam blanditiis, eligendi ex explicabo odio possimus provident rerum saepe soluta suscipit tenetur ullam vero. Autem blanditiis obcaecati quis quod voluptates voluptatum.
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-12 col-md-4 mb-3">
                    <a href="33" class="text-decoration-none">
                        <div class="card shadow-sm">
                            <img src="https://picsum.photos/600/400" class="img-fluid card-img-top">
                            <div class="card-body">
                                <h3 class="h5 mb-2">Anderes Produkt XMY </h3>
                                <div class="fw-bold my-3 text-right fs-5" style="color: {{$_secondary_link_color}};">391 €</div>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam blanditiis, eligendi ex explicabo odio possimus provident rerum saepe soluta suscipit tenetur ullam vero. Autem blanditiis obcaecati quis quod voluptates voluptatum.
                            </div>
                        </div>
                    </a>
                </div>
            </div>
    </div>

@stop
@section('scripts')
    <script src="{{storage('js/product.js')}}"></script>
@stop