<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>@yield('meta_title', $siteSettings->site_title)</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <!-- Dynamic Meta Tags -->
    <meta name="keywords" content="@yield('meta_keywords', $siteSettings->meta_keyword)">
    <meta name="description" content="@yield('meta_description', $siteSettings->meta_description)">
    <!-- Favicon -->

    <link rel="icon" href="{{ asset('img/favicon.ico') }}" type="image/x-icon">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600&amp;display=swap" rel="stylesheet">
    <!-- resources/views/styles.blade.php -->
    <style>
        :root {
            --nav-bg-color: {{ $siteSettings->nav_bg_color }};
            --nav-text-color: {{ $siteSettings->nav_text_color }};
            --top-bg-color: {{ $siteSettings->navtop_bg_color }};
            --top-text-color: {{ $siteSettings->navtop_text_color }};
            --footer-bg-color: {{ $siteSettings->footer_bg_color }};
            --footer-text-color: {{ $siteSettings->footer_text_color }};
            --sidebar-bg-color: {{ $siteSettings->sidebar_bg_color }};
            --sidebar-text-color: {{ $siteSettings->sidebar_text_color }};
        }

        /* Side-sliding alert styles */
        .alert-side {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #d4edda;
            color: #155724;
            border-left: 4px solid #28a745;
            padding: 15px 20px;
            min-width: 250px;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            animation: slide-in 0.5s forwards;
            z-index: 1050;
        }

        .alert-side .close-btn {
            position: absolute;
            top: 8px;
            right: 12px;
            cursor: pointer;
            border: none;
            background: transparent;
            font-size: 18px;
            color: #155724;
        }

        @keyframes slide-in {
            from {
                transform: translateX(100%);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        .fade-out {
            animation: fade-out 0.5s forwards;
        }

        @keyframes fade-out {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }
    </style>


    <!-- CSS Libraries -->
    <link href="{{ asset('frontend/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ asset('frontend/css/all.min.css') }}" rel="stylesheet">
    <link href="{{ asset('frontend/lib/slick/slick.css') }}" rel="stylesheet">
    <link href="{{ asset('frontend/lib/slick/slick-theme.css') }}" rel="stylesheet">

    <!-- globel Template Stylesheet -->
    <link href="{{ asset('frontend/css/style.css') }}" rel="stylesheet">
    @stack('style')

</head>

<body>
    @if (session('success'))
        <div id="laravel-alert" class="alert-side" role="alert">
            <button type="button" class="close-btn" onclick="dismissAlert()">&times;</button>
            {{ session('success') }}
        </div>
    @endif
