<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
    @yield('meta_tags')
    <link rel="shortcut icon" href="/images/site/{{ isset(settings()->site_favicon) ? settings()->site_favicon : '' }}"
        type="image/x-icon">
    <link rel="icon" type="image/png" sizes="32x32"
        href="/images/site/{{ isset(settings()->site_favicon) ? settings()->site_favicon : '' }}">
    <link rel="icon" href="/images/site/{{ isset(settings()->site_favicon) ? settings()->site_favicon : '' }}"
        type="image/x-icon">
    <link rel="stylesheet" href="/front/plugins/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="/front/css/animate.min.css">
    <link rel="stylesheet" href="/front/plugins/themify-icons/themify-icons.css">
    <link rel="stylesheet" href="/front/plugins/slick/slick.css">
    <link rel="stylesheet" href="/front/css/style.css">
    @stack('stylesheets')
    @yield('head')
    @yield('structured_data')
</head>

<body>
    <!-- navigation -->
    <header class="sticky-top bg-white border-bottom border-default">
        <div class="container-fluid">

            <nav class="navbar navbar-expand-lg navbar-white">
                <a class="navbar-brand" href="/">
                    <img class="img-fluid" width="150px"
                        src="/images/site/{{ isset(settings()->site_logo) ? settings()->site_logo : '' }}"
                        alt="{{ isset(settings()->site_title) ? settings()->site_title : '' }}">
                </a>
                <button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#navigation">
                    <i class="ti-menu"></i>
                </button>

                <div class="collapse navbar-collapse text-center" id="navigation">
                    <ul class="navbar-nav mx-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="/">Home</a>
                        </li>
                        <!-- <li class="nav-item">
                            <a class="nav-link" href="about.html">About</a>
                        </li> -->

                        {!! navigations() !!}
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('contact') }}">Kontakt</a>
                        </li>
                    </ul>

                    <!-- search -->
                    <div class="search px-4">
                        <button id="searchOpen" class="search-btn"><i class="ti-search"></i></button>
                        <div class="search-wrapper">
                            <form action="{{ route('search_posts') }}" method="GET" class="h-100">
                                <input class="search-box pl-4" id="search-query" name="q" type="search"
                                    placeholder="Gib ein wonach du suchst zb. discover articles, guide &amp; tutorials... "
                                    value="{{ request('q') ? request('q') : '' }}">
                            </form>
                            <button id="searchClose" class="search-close"><i class="ti-close text-dark"></i></button>
                        </div>
                    </div>
                    <!-- /search -->
                    <!-- User Details + DropDown -->
                    @auth
                        <div class="user-details">
                            <img src="{{ auth()->user()->picture }}" alt="User Avatar" />
                            <div class="user-dropdown">
                                <a href="{{ route('admin.dashboard') }}">
                                    <i class="ti-dashboard">Dashboard</i>
                                </a>
                                <a href="{{ route('admin.profile') }}">
                                    <i class="ti-user">Profile</i>
                                </a>
                                @if (auth()->user()->type == 'superAdmin')
                                    <a href="{{ route('admin.settings') }}">
                                        <i class="ti-settings">Einstellungen</i>
                                    </a>
                                @endif
                                <form id="front-logout-form" action="{{ route('admin.logout', ['source' => 'front']) }}"
                                    method="POST" style="display:none;">
                                    @csrf
                                </form>
                                <a href="javascript:;"
                                    onclick="event.preventDefault();document.getElementById('front-logout-form').submit();">
                                    <i class="ti-power-off">Ausloggen</i>
                                </a>
                            </div>
                        </div>
                    @endauth
                    <!-- /User Details + DropDown -->

                </div>
            </nav>
        </div>
    </header>
    <!-- /navigation -->

    <section class="section">
        <div class="container">
            @yield('content')
        </div>
    </section>

    <footer class="section-sm pb-0 border-top border-default">
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-md-3 mb-4">
                    <a class="mb-4 d-block" href="#">
                        <img class="img-fluid" width="150px"
                            src="/images/site/{{ isset(settings()->site_logo) ? settings()->site_logo : '' }}"
                            alt="{{ isset(settings()->site_title) ? settings()->site_title : '' }}">
                    </a>
                    <p>{{ isset(settings()->site_meta_description) ? settings()->site_meta_description : '' }}</p>
                </div>

                <div class="col-lg-2 col-md-3 col-6 mb-4">
                    <h6 class="mb-4">Quick Links</h6>
                    <ul class="list-unstyled footer-list">
                        <li><a href="{{ route('contact') }}">Kontakt</a></li>
                        <!--
                        <li><a href="privacy-policy.html">Privacy Policy</a></li>
                        <li><a href="terms-conditions.html">Terms Conditions</a></li> -->
                    </ul>
                </div>

                <div class="col-lg-2 col-md-3 col-6 mb-4">
                    <h6 class="mb-4">Social Links</h6>
                    <ul class="list-unstyled footer-list">
                        @if (site_social_links()?->facebook_url)
                            <li><a href="{{ site_social_links()->facebook_url }}" target="_blank">Facebook</a></li>
                        @endif
                        @if (site_social_links()?->twitter_url)
                            <li><a href="{{ site_social_links()->twitter_url }}" target="_blank">Twitter</a></li>
                        @endif
                        @if (site_social_links()?->instagram_url)
                            <li><a href="{{ site_social_links()->instagram_url }}" target="_blank">Instagram</a></li>
                        @endif
                        @if (site_social_links()?->linkedin_url)
                            <li><a href="{{ site_social_links()->linkedin_url }}" target="_blank">Linkedin</a></li>
                        @endif
                    </ul>
                </div>

                <div class="col-md-3 mb-4">
                    <h6 class="mb-4">Newsletter abonnieren</h6>
                    @livewire('newsletter-form')
                </div>
            </div>
            <div class="scroll-top">
                <a href="#top" id="scrollTop"><i class="ti-angle-up"></i></a>
            </div>
            <div class="text-center">
                <p class="content">&copy; 2026 - Design by SawaStacks &amp; Develop By MagicPotter</p>
            </div>
        </div>
    </footer>


    <script src="/front/plugins/jQuery/jquery.min.js"></script>
    <script src="/front/plugins/bootstrap/bootstrap.min.js" async></script>
    <script src="/front/plugins/slick/slick.min.js"></script>
    <script src="/front/js/script.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        toastr.options = {
            "closeButton": true,
            "newestOnTop": false,
            "progressBar": true,
            "positionClass": "toast-bottom-right",
            "preventDuplicates": false,
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        };

        window.addEventListener("showToastr", function(event) {
            const payload = Array.isArray(event.detail) ? event.detail[0] : event.detail;
            if (!payload) return;

            const {
                type,
                message
            } = payload;

            const Toast = Swal.mixin({
                toast: true,
                position: "bottom-end",
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.onmouseenter = Swal.stopTimer;
                    toast.onmouseleave = Swal.resumeTimer;
                }
            });

            Toast.fire({
                icon: type || "info",
                title: message || ""
            });
        });
    </script>
    <script>
        document.querySelector('.user-details').addEventListener('click', function() {
            this.classList.toggle('active');
        });
        document.addEventListener('click', function(e) {
            const userDetails = document.querySelector('.user-details');
            if (!userDetails.contains(e.target)) {
                userDetails.classList.remove('active');
            }
        });
    </script>
    @stack('scripts')
</body>

</html>
