@inject('type', 'Type')

@php
    $typeAnkundigung = $type->get("Ankündigung");
    $typeLeistungen = $type->get("Leistungen");
    $typeNews = $type->get("News");
    $typeProdukte = $type->get("Produkte");
    $typeEvents = $type->get("Event");
    $typeReferenzen = $type->get("Referenzen");
    $typeJobs = $type->get("Jobs");
@endphp

<!doctype html>
<html lang="de">
<head>

    @include('template.'.config('settings.template').'.content.includes.meta')
    @include('template.'.config('settings.template').'.content.includes.css')
    @include('template.'.config('settings.template').'.content.includes.analytics')
    @yield('head')
</head>
<body>
    
    @if(auth()->check())
        <div style="background: #000 url('https://www.getlumino.com/admin-assets/images/back.png');" class="text-light py-1 sticky-top">
            <div class="container">
                <div class="row">
                    <div class="col-6 ">
                       <img src="https://ik.imagekit.io/areya/tr:ar-1-1,w-24/lumino-logo_eyOxwlM0c.png" class="img-fluid" alt="Lumino CMS">
                        Lumino CMS
                    </div>
                    <div class="col-6 text-end">
                        <img id="open-user-menu" class="rounded-circle border me-2" data-bs-toggle="dropdown" aria-haspopup="true" style="cursor:pointer;" aria-expanded="false" src="{{ auth()->user()->profile() }}" width="24" height="24" alt="{{ auth()->user()->name }}">
                        <a href="{{url(config('settings.admin_slug', 'admin'))}}" class="text-decoration-none text-light">
                            Administration  ⟶
                        </a>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <noscript>
        <div class="alert alert-warning show mb-0" role="alert">
            <div class="container">
                <strong>
                    <svg style="fill: currentColor; width: 20px; margin-bottom: 8px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M34.5 420.4c-1.6 2.8-2.5 6-2.5 9.3c0 10.2 8.2 18.4 18.4 18.4H461.6c10.2 0 18.4-8.2 18.4-18.4c0-3.3-.9-6.4-2.5-9.3L276.5 75.8C272.2 68.5 264.4 64 256 64s-16.2 4.5-20.5 11.8L34.5 420.4zM6.9 404.2l201-344.6C217.9 42.5 236.2 32 256 32s38.1 10.5 48.1 27.6l201 344.6c4.5 7.7 6.9 16.5 6.9 25.4c0 27.8-22.6 50.4-50.4 50.4H50.4C22.6 480 0 457.4 0 429.6c0-8.9 2.4-17.7 6.9-25.4zM256 160c8.8 0 16 7.2 16 16V304c0 8.8-7.2 16-16 16s-16-7.2-16-16V176c0-8.8 7.2-16 16-16zM232 384a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z"/></svg>
                    JavaScript ist derzeit deaktiviert!
                </strong>
                <br>
                Diese Seite ist auch für die Nutzung ohne JavaScript ausgelegt. Einige Funktionen oder visuelle Effekte werden dann aber nicht oder nur eingeschränkt dargestellt.
            </div>
        </div>
    </noscript>



    @if(session()->has('auth_user'))
        <div class="alert mb-0 alert-warning alert-dismissible fade show py-1 px-0" role="alert">

        </div>
    @endif

    @if($_contact_bar)
        <div style="background-color: {{$_primary_ci_color}}; color: {{$_footer_color}}; font-size: 13px;">
            <div class="container">
                <div class="row py-1">
                    <div class="col-6">
                        {{$_legal_zip_code}} {{$_legal_city}}
                    </div>
                    <div class="col text-end">
                        <a href="tel:{{$_telefonnummer}}" class="text-decoration-none" style="color:{{$_footer_color}}">
                            <svg style="fill: currentColor; width: 13px; margin-bottom: 1px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM186.7 128.7c9.7-2.6 19.9 2.3 23.7 11.6l20 48c3.4 8.2 1 17.6-5.8 23.2L200 231.7c16.6 35.2 45.1 63.7 80.3 80.3l20.2-24.7c5.6-6.8 15-9.2 23.2-5.8l48 20c9.3 3.9 14.2 14 11.6 23.7l-12 44C368.9 378 361 384 352 384c-123.7 0-224-100.3-224-224c0-9 6-16.9 14.7-19.3l44-12z"/></svg>
                            {{$_telefonnummer}}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    @else
        <div style="border-top: 8px solid {{$_primary_ci_color}};"></div>
    @endif
    <nav class="navbar navbar-expand-lg py-3" style="background-color: {{$_menue_background_color}};" role="navigation">
        <div class="container ">
            <a class="navbar-brand " href="{{url('/')}}">
                <x-img src="{{$logo}}" alt="{{config('settings.name')}}" height="60px" sizes="220px" class="fw-bold" style="color: {{$_primary_ci_color}};" loading="eager" blur="off"/>
            </a>
            @if(!request()->is('checkout'))
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
                    <div class="navbar-nav fs-5">
                        @if($typeProdukte->status)
                            <a class="nav-item nav-link {{request()->is('produkt*')?'active':''}}" href="{{url('/produkte')}}">Produkte</a>
                        @endif
                        @if($typeLeistungen->status)
                            <a class="nav-item nav-link {{request()->is('leistung*')?'active':''}}" href="{{url('/leistungen')}}">Leistungen</a>
                        @endif
                        @if($typeNews->status)
                            <a class="nav-item nav-link {{request()->is('aktuelles*') || request()->is('news*')?'active':''}}" href="{{url('/aktuelles')}}">Aktuelles</a>
                        @endif
                        <a class="nav-item nav-link {{request()->is('ueber-uns*')?'active':''}}" href="{{url('/ueber-uns')}}">Über uns</a>
                        @if($typeReferenzen->status)
                            <a class="nav-item nav-link {{request()->is('referenzen*')?'active':''}}" href="{{url('/referenzen')}}">Referenzen</a>
                        @endif
                        @if($typeEvents->status)
                            <a class="nav-item nav-link {{request()->is('events*')?'active':''}}" href="{{url('/events')}}">Events</a>
                        @endif

                        @if($typeJobs->status)
                             <a class="nav-item nav-link {{request()->is('karriere*')?'active':''}}" href="{{url('/karriere')}}">Karriere</a>
                        @endif


                        <a class="nav-item nav-link {{request()->is('kontakt*')?'active':''}}" href="{{url('/kontakt')}}">Kontakt</a>
                        @if($_warenkorb_aktiv)
                            <a class="nav-item" data-bs-toggle="modal" data-bs-target="#shopping-cart" class="position-relative d-block">
                                    <svg style="fill: {{$_primary_ci_color}}; width: 30px; margin-top: 6px;" 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"></path></svg>
                                    <span class="position-absolute badge rounded-pill bg-danger js-product-counter" style="display: none; bottom: -10px; right: -10px;">0</span>
                            </a>
                        @endif
                        @if($_menu_button)
                            <a href="{{$_menu_button_link}}" class="btn btn-primary position-relative d-block mt-1 text-light nav-item" @if($_link_type == "External Link") target="_blank" @endif>
                                {{$_menu_button_text}}
                                @if($_link_type == "External Link")
                                    <svg style="fill: currentColor; width: 13px; margin-left: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M336 0c-8.8 0-16 7.2-16 16s7.2 16 16 16H457.4L212.7 276.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L480 54.6V176c0 8.8 7.2 16 16 16s16-7.2 16-16V16c0-8.8-7.2-16-16-16H336zM64 32C28.7 32 0 60.7 0 96V448c0 35.3 28.7 64 64 64H416c35.3 0 64-28.7 64-64V304c0-8.8-7.2-16-16-16s-16 7.2-16 16V448c0 17.7-14.3 32-32 32H64c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32H208c8.8 0 16-7.2 16-16s-7.2-16-16-16H64z"/></svg>
                                @endif
                            </a>
                        @endif
                    </div>
                </div>
            @endif
        </div>
    </nav>

    @yield('content')
    @include('template.'.config('settings.template').'.content.includes.cookie-banner')
    @if($_warenkorb_aktiv)
        <div class="modal fade" id="shopping-cart" tabindex="-1" aria-labelledby="shopping-cart" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: {{$_secondary_ci_color}} ; color: white;">
                        <h5 class="modal-title" id="exampleModalLabel">
                            <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>
                            Warenkorb
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div style="display: none;" class="alert alert-danger mt-5" role="alert" id="cart-error">
                                Fehler beim Laden der Produkte, versuchen Sie, die Seite neu zu laden
                            </div>
                            <div style="display: none;" class="col-12 text-center" id="no-products">
                                <br>
                                <br>
                                <br>
                                <lottie-player src="{{storage('assets/animations/no-products.json')}}"  background="transparent"  speed="1"  style="width: 150px; height: 150px; margin-left: 40%"  loop  autoplay></lottie-player>
                                <br>
                                <br>
                                <br>
                                <i>Es befinden sich noch keine Produkte im Warenkorb</i>
                                <br>
                                <br>
                                <a class="btn btn-primary mb-3" href="{{url('/produkte')}}">Jetzt Produkte entdecken</a>
                                <br>
                            </div>
                            <div class="col-12" id="selected-products">
                                <table class="table table-striped">
                                    <tbody id="list-products-in-bag"></tbody>
                                    <tfoot>
                                        <tr>
                                            <th class="text-start" scope="col">Gesammt:</th>
                                            <th colspan="3" class="text-end">
                                                <span class="js-total-price">0 €</span>
                                                <br>
                                                <small class="text-end fw-light">Preise inkl. 19% Umsatzsteuer</small>
                                            </th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                        <div class="row mt-3" id="modal-buttons">
                            <div class="col-6">
                                <button class="btn btn-transparent text-muted text-decoration-none border" data-bs-toggle="modal" data-bs-target="#share-cart">
                                    Warenkorb teilen
                                    <svg style="fill: currentColor; width: 19px; margin-left: 4px; margin-bottom: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M564.907 196.35L388.91 12.366C364.216-13.45 320 3.746 320 40.016v88.154C154.548 130.155 0 160.103 0 331.19c0 94.98 55.84 150.231 89.13 174.571 24.233 17.722 58.021-4.992 49.68-34.51C100.937 336.887 165.575 321.972 320 320.16V408c0 36.239 44.19 53.494 68.91 27.65l175.998-184c14.79-15.47 14.79-39.83-.001-55.3zm-23.127 33.18l-176 184c-4.933 5.16-13.78 1.73-13.78-5.53V288c-171.396 0-295.313 9.707-243.98 191.7C72 453.36 32 405.59 32 331.19 32 171.18 194.886 160 352 160V40c0-7.262 8.851-10.69 13.78-5.53l176 184a7.978 7.978 0 0 1 0 11.06z"/></svg>
                                </button>
                            </div>
                            <div class="col-6 text-end">
                                <a href="{{url('/checkout')}}" type="button" class="btn btn-primary">Angebot unverbindlich anfragen</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="share-cart" tabindex="-1" aria-labelledby="share-cart" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: {{$_secondary_ci_color}}; color: white;">
                        <h5 class="modal-title" id="exampleModalLabel">Warenkorb teilen</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body" style="background-color: #f7fcf7;">
                        <div class="row">
                            <div class="col-12 my-3">
                                <p>Teilen Sie Ihre Einkaufsliste mit Freunden und Bekannten, damit diese Sie dann bei Ihrere Auswahl helfen können.</p>
                            </div>
                        </div>
                        <div class="input-group input-group-lg my-2">
                            <input type="text" class="form-control cart-link js-cart-link" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" style="box-shadow: none;" readonly>
                            <span class="input-group-text" id="btn-copy-cart-link">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
                                    <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
                                    <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
                                </svg>
                            </span>
                        </div>
                        <br>
                        <button class="btn btn-share btn-primary mx-auto">
                            Warenkorb teilen
                            <svg style="fill: currentColor; width: 19px; margin-left: 4px; margin-bottom: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M564.907 196.35L388.91 12.366C364.216-13.45 320 3.746 320 40.016v88.154C154.548 130.155 0 160.103 0 331.19c0 94.98 55.84 150.231 89.13 174.571 24.233 17.722 58.021-4.992 49.68-34.51C100.937 336.887 165.575 321.972 320 320.16V408c0 36.239 44.19 53.494 68.91 27.65l175.998-184c14.79-15.47 14.79-39.83-.001-55.3zm-23.127 33.18l-176 184c-4.933 5.16-13.78 1.73-13.78-5.53V288c-171.396 0-295.313 9.707-243.98 191.7C72 453.36 32 405.59 32 331.19 32 171.18 194.886 160 352 160V40c0-7.262 8.851-10.69 13.78-5.53l176 184a7.978 7.978 0 0 1 0 11.06z"/></svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif
    @include('template.'.config('settings.template').'.content.includes.footer')
    @include('template.'.config('settings.template').'.content.includes.scripts')
    @yield('scripts')
    <script>
    AOS.init();
  </script>
</body>
</html>
