<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>{{ isset($metadata) ? $metadata->meta_title : '' }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{{ isset($metadata) ? $metadata->meta_description : '' }}">
    <meta name="keywords" content="{{ isset($metadata) ? $metadata->meta_keywords : '' }}">

    <!-- Social Media Metadata -->
    <meta property="og:title" content="{{ isset($metadata) ? $metadata->og_title : '' }}">
    <meta property="og:description" content="{{ isset($metadata) ? $metadata->twitter_description : '' }}">
    <meta property="og:image" content="https://example.com/sample-image.jpg">
    <meta property="og:url" content="https://example.com">

    <!-- Twitter Cards -->
    <meta name="twitter:title" content="{{ isset($metadata) ? $metadata->twitter_title : '' }}">
    <meta name="twitter:description" content="{{ isset($metadata) ? $metadata->twitter_description : '' }}">
    <meta name="twitter:image" content="https://example.com/sample-image.jpg">

    <!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">

    <!-- Icon Font Stylesheet -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
    
    <!-- Libraries Stylesheet -->
    <link rel="stylesheet" href="{{ url('/') }}/front/lib/animate/animate.min.css" />
    <link href="{{ url('/') }}/front/lib/lightbox/css/lightbox.min.css" rel="stylesheet">
    <link href="{{ url('/') }}/front/lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
    
    <!-- Customized Bootstrap Stylesheet -->
    <link href="{{ url('/') }}/front/css/bootstrap.min.css" rel="stylesheet">
    <!-- Template Stylesheet -->
    <link href="{{ url('/') }}/front/css/style.css" rel="stylesheet">
    <!-- Split Header Stylesheet -->
    <link href="{{ url('/') }}/front/css/header-split.css" rel="stylesheet">
    <!-- Carousel Enhancement Stylesheet -->
    <link href="{{ url('/') }}/front/css/carousel-enhancement.css" rel="stylesheet">
    
    @php
        try {
            $colorSettings = \App\Models\ColorSetting::first();
            $primaryColor = $colorSettings->primary_color ?? '#000000';
            $secondaryColor = $colorSettings->secondary_color ?? '#ffffff';
            $themeMode = isset($colorSettings->theme_mode) ? $colorSettings->theme_mode : 'dark';
        } catch (\Exception $e) {
            $primaryColor = '#000000';
            $secondaryColor = '#ffffff';
            $themeMode = 'dark';
        }
        
        // Ensure siteData is available
        if (!isset($siteData)) {
            try {
                $siteData = \App\Models\SiteSettings::first();
            } catch (\Exception $e) {
                $siteData = null;
            }
        }
    @endphp
    
    <!-- Dark Theme Stylesheet (CRED-inspired) - Loaded dynamically -->
    <link href="{{ url('/') }}/front/css/dark-theme.css" rel="stylesheet" id="dark-theme-stylesheet">
    <!-- Theme Mode Meta Tag -->
    <meta name="theme-mode" content="{{ $themeMode }}">
    @if (!empty($siteData->favicon))
    <link rel="icon" href="{{ asset('uploads/favicon/' . $siteData->favicon) }}" sizes="32x32">
    @endif

    <style>
        :root {
            --bs-primary: {{ $primaryColor }};
            --dark-accent: {{ $primaryColor }};
        }
        .btn-primary{
            background-color:{{$primaryColor}};
        }
        .text-primary{
            color:{{$primaryColor}} !important;
        }

        /* Split Header Design - White Left, Black Right */
        .split-header {
            display: flex;
            width: 100%;
            min-height: 100px;
            position: relative;
            z-index: 1000;
        }

        .header-logo-section {
            background-color: transparent;
            width: 25%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            margin: 0;
            position: relative;
        }

        .header-nav-section {
            background-color: #000000;
            width: 75%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 40px;
        }

        .navbar-brand img,
        .logo-img,
        .header-logo-section img {
            max-height: 80px !important;
            max-width: 300px !important;
            width: auto !important;
            height: auto !important;
            object-fit: contain !important;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            position: relative !important;
            z-index: 10 !important;
            filter: none !important; /* Override dark theme filter */
        }
        
        .header-logo-section {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background-color: transparent !important;
            min-height: 100px;
            padding: 0 !important;
            margin: 0 !important;
        }
        
        .header-logo-section img,
        .header-logo-section .logo-img {
            max-height: 100px !important;
            max-width: 300px !important;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            filter: none !important; /* Override dark theme filter */
        }
        
        .navbar-brand {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            line-height: 1 !important;
        }
        
        .navbar-brand img {
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            vertical-align: top !important;
        }

        .navbar-dark .navbar-nav .nav-link {
            color: #ffffff !important;
            font-size: 16px;
            font-weight: 500;
            padding: 10px 15px !important;
            margin: 0 5px;
            transition: all 0.3s ease;
        }

        .navbar-dark .navbar-nav .nav-link:hover,
        .navbar-dark .navbar-nav .nav-link.active {
            color: var(--dark-accent, #00d4ff) !important;
        }

        .navbar-dark .navbar-toggler {
            border-color: rgba(255, 255, 255, 0.3);
            color: #ffffff;
        }

        .navbar-dark .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }

        /* Theme mode styling */
        body {
            @if($themeMode === 'dark')
            background-color: #000000 !important;
            color: #ffffff !important;
            @elseif($themeMode === 'light')
            background-color: #ffffff !important;
            color: #000000 !important;
            @else
            background-color: #000000 !important;
            color: #ffffff !important;
            @endif
        }

        @if($themeMode === 'light')
        #dark-theme-stylesheet {
            display: none !important;
        }
        @else
        #dark-theme-stylesheet {
            display: block !important;
        }
        @endif
        
        /* Light theme overrides - for JavaScript theme switching */
        body[data-theme-mode="light"],
        body.theme-light {
            background-color: #ffffff !important;
            color: #000000 !important;
        }
        
        body[data-theme-mode="light"] #dark-theme-stylesheet,
        body.theme-light #dark-theme-stylesheet {
            display: none !important;
        }
        
        /* Dark theme */
        body[data-theme-mode="dark"],
        body.theme-dark {
            background-color: #000000 !important;
            color: #ffffff !important;
        }
        
        body[data-theme-mode="dark"] #dark-theme-stylesheet,
        body.theme-dark #dark-theme-stylesheet {
            display: block !important;
        }

        /* Responsive Design */
        @media (max-width: 991.98px) {
            .split-header {
                flex-direction: column;
            }

            .header-logo-section {
                width: 100%;
                padding: 0;
                margin: 0;
            }

            .header-nav-section {
                width: 100%;
                padding: 15px 20px;
            }

            .navbar-brand img {
                max-height: 40px !important;
            }
        }

        @media (max-width: 768px) {
            .navbar-brand img {
                max-height: 35px !important;
            }
        }
    </style>
</head>

<body data-theme-mode="{{ $themeMode }}">

    <!-- Spinner Start -->
    <div id="spinner" class="show bg-dark-primary position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <!-- Spinner End -->

    <!-- Split Header Design -->
    <div class="split-header">
        <!-- Logo Section (Left) -->
        <div class="header-logo-section">
            <a href="{{ route('front.home') }}" class="navbar-brand p-0" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-decoration: none; margin: 0; padding: 0;">
                @php
                    // Default logo path
                    $defaultLogo = url('/front/img/LogoPSD-Recovered.png');
                    $logoPath = $defaultLogo;
                    
                    // Get site settings if not available
                    $siteSettings = isset($siteData) ? $siteData : \App\Models\SiteSettings::first();
                    
                    // Priority: header_logo > site_logo
                    if ($siteSettings) {
                        // First check for header_logo
                        if (!empty($siteSettings->header_logo)) {
                            if (strpos($siteSettings->header_logo, 'http') === 0) {
                                $logoPath = $siteSettings->header_logo;
                            } elseif (strpos($siteSettings->header_logo, '/') === 0) {
                                $logoPath = url($siteSettings->header_logo);
                            } else {
                                $customLogoPath = public_path('uploads/favicon/' . $siteSettings->header_logo);
                                if (file_exists($customLogoPath)) {
                                    $logoPath = asset('uploads/favicon/' . $siteSettings->header_logo);
                                }
                            }
                        }
                        // Fallback to site_logo if header_logo is not set
                        elseif (!empty($siteSettings->site_logo)) {
                            $customLogoPath = public_path('uploads/favicon/' . $siteSettings->site_logo);
                            if (file_exists($customLogoPath)) {
                                $logoPath = asset('uploads/favicon/' . $siteSettings->site_logo);
                            }
                        }
                    }
                @endphp
                <img src="{{ $logoPath }}" alt="Logo" class="logo-img" style="max-height: 80px !important; max-width: 300px !important; width: auto !important; height: auto !important; display: block !important; visibility: visible !important; opacity: 1 !important; object-fit: contain !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important;" onerror="console.error('Logo failed:', this.src); this.onerror=null; this.src='{{ $defaultLogo }}';">
            </a>
        </div>

        <!-- Black Navigation Section (Right) -->
        <div class="header-nav-section">
            <nav class="navbar navbar-expand-lg navbar-dark w-100 p-0">
                <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
                    <span class="navbar-toggler-icon"></span>
                </button>
                
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <div class="navbar-nav ms-auto align-items-center">
                        <a href="{{ route('front.home') }}" class="nav-item nav-link {{ Route::is('front.home') ? 'active' : '' }}">Home</a>
                        <a href="{{ route('front.about') }}" class="nav-item nav-link {{ Route::is('front.about') ? 'active' : '' }}">About</a>
                        <a href="{{ route('front.service') }}" class="nav-item nav-link {{ Route::is('front.service') ? 'active' : '' }}">Services</a>
                        <a href="{{ route('front.blogs') }}" class="nav-item nav-link {{ Route::is('front.blogs') ? 'active' : '' }}">Blogs</a>
                        
                        <div class="nav-item dropdown">
                            <a href="#" class="nav-link dropdown-toggle {{ Route::is('front.features') || Route::is('front.team') || Route::is('front.testimonial') || Route::is('front.offer') || Route::is('front.faqs') ? 'active' : '' }}" data-bs-toggle="dropdown">
                                Pages
                            </a>
                            <div class="dropdown-menu m-0">
                                <a href="{{ route('front.features') }}" class="dropdown-item {{ Route::is('front.features') ? 'active' : '' }}">Our Features</a>
                                <a href="{{ route('front.team') }}" class="dropdown-item {{ Route::is('front.team') ? 'active' : '' }}">Our team</a>
                                <a href="{{ route('front.testimonial') }}" class="dropdown-item {{ Route::is('front.testimonial') ? 'active' : '' }}">Testimonial</a>
                                <a href="{{ route('front.offer') }}" class="dropdown-item {{ Route::is('front.offer') ? 'active' : '' }}">Our offer</a>
                                <a href="{{ route('front.faqs') }}" class="dropdown-item {{ Route::is('front.faqs') ? 'active' : '' }}">FAQs</a>
                            </div>
                        </div>
                        
                        <a href="{{ route('front.contact') }}" class="nav-item nav-link {{ Route::is('front.contact') ? 'active' : '' }}">Contact Us</a>
                    </div>
                    
                    @if (!empty($siteData->whatsapp_no))
                        <a href="https://wa.me/{{$siteData->whatsapp_no}}?text=Hello%20there!" class="btn btn-primary rounded-pill py-2 px-4 ms-3 flex-shrink-0 whatsapp-button" target="_blank">Get Started</a>
                    @else
                        <a href="https://wa.me/9700620022?text=Hello%20there!" class="btn btn-primary rounded-pill py-2 px-4 ms-3 flex-shrink-0 whatsapp-button" target="_blank">Get Started</a>
                    @endif
                </div>
            </nav>
        </div>
    </div>
    <!-- Split Header End -->
