@php
    $setting = \App\Models\Setting::first();
    $ourServiceHeaderList = \App\Models\OurService::select('id', 'title', 'slug_name')->where('status', 1)->get();
@endphp
<!-- Spinner Start -->
<div id="spinner"
    class="show bg-white 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-secondary" style="width: 3rem; height: 3rem" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>
<!-- Spinner End -->

<!-- Topbar Start -->
<div class="container-fluid bg-primary px-5 d-none d-lg-block">
    <div class="row gx-0 align-items-center">
        <!-- LEFT: Email + Phone -->
        <div class="col-lg-6 text-start">
            <div class="d-flex">
                <a href="#" class="text-white me-4">
                    <i class="fas fa-envelope text-top me-2"></i>{{ $setting->email ?? '' }}
                </a>

                <a href="#" class="text-white">
                    <i class="fas fa-phone-alt text-top me-2"></i> {{ $setting->phone ?? '' }}
                </a>
            </div>
        </div>

        <!-- RIGHT: Social Icons -->
        <div class="col-lg-6 text-end">
            <div class="d-inline-flex align-items-center" style="height: 45px">
                <a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2"
                    href="{{ $setting->twitter_link ?? 'javascript:void(0)' }}">
                    <i class="bi bi-twitter-x fw-normal text-top"></i>
                </a>

                <a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2"
                    href="{{ $setting->facebook_link ?? 'javascript:void(0)' }}">
                    <i class="bi bi-facebook fw-normal text-top"></i>
                </a>

                <a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2"
                    href="{{ $setting->linkedin_link ?? 'javascript:void(0)' }}">
                    <i class="bi bi-linkedin fw-normal text-top"></i>
                </a>

                <a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2"
                    href="{{ $setting->instagram_link ?? 'javascript:void(0)' }}">
                    <i class="bi bi-instagram fw-normal text-top"></i>
                </a>

                <a class="btn btn-sm btn-outline-light btn-square rounded-circle"
                    href="{{ $setting->youtube_link ?? 'javascript:void(0)' }}">
                    <i class="bi bi-youtube fw-normal text-top"></i>
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Topbar End -->

<!-- Navbar & Hero Start -->
<div class="container-fluid nav-bar p-0">
    <nav class="navbar navbar-expand-lg navbar-light bg-white px-4 px-lg-5 py-3 py-lg-0">
        <a href="index.html" class="navbar-brand p-0">
            <h1 class="text-secondary m-0">
                <img src="{{ !empty($setting->logo) ? asset($setting->logo) : asset('img/new/Invinaa Logo (1)-Photoroom.png') }}"
                    class="img-fluid" alt="Logo" />

            </h1>
            <!-- <img src="img/logo.png" alt="Logo"> -->
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="fa fa-bars"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav ms-auto py-0">
                <a href="{{ route('web_home') }}"
                    class="nav-item nav-link {{ Route::is('web_home') ? 'active' : '' }}">Home</a>
                <a href="{{ route('about') }}"
                    class="nav-item nav-link {{ Route::is('about') ? 'active' : '' }}">About</a>
                <div class="nav-item dropdown position-static mega-dropdown">
                    <a href="#" class="nav-link" data-bs-toggle="dropdown"><span
                            class="dropdown-toggle">Services</span></a>

                    <div class="dropdown-menu mega-menu p-4 shadow-lg border-0 rounded-3">
                        <div class="row g-4">
                            @foreach ($ourServiceHeaderList as $ourServiceHeaderData)
                                <div class="col-lg-3 col-md-6">
                                    <!-- Service Title -->
                                    <h6 class="mega-title">
                                        {{ $ourServiceHeaderData->title ?? '' }}
                                    </h6>

                                    @php
                                        $ourSubServicesList = \App\Models\OurSubService::where(
                                            'service_id',
                                            $ourServiceHeaderData->id
                                        )
                                            ->where('status', 1)
                                            ->select('id', 'title')
                                            ->orderBy('id', 'desc')
                                            ->get();
                                    @endphp

                                    <!-- Sub Services -->
                                    @foreach ($ourSubServicesList as $ourSubServicesH)
                                        <a href="{{ route('sub_services_details', base64_encode($ourSubServicesH->id)) }}"
                                            class="mega-link">
                                            {{ $ourSubServicesH->title ?? '' }}
                                        </a>
                                    @endforeach
                                </div>
                            @endforeach

                        </div>
                    </div>
                </div>
                <a href="{{ route('blog') }}" class="nav-item nav-link {{ Route::is('blog') ? 'active' : '' }}">Blog</a>
                <a href="{{ route('testimonials') }}"
                    class="nav-item nav-link {{ Route::is('testimonials') ? 'active' : '' }}">Testimonials</a>
                <a href="{{ route('contact') }}"
                    class="nav-item nav-link {{ Route::is('contact') ? 'active' : '' }}">Contact</a>
            </div>
        </div>
    </nav>
</div>
<!-- Navbar & Hero End -->