@php
       $ads_top = get_ads('all_page', 'header');
       $ads_middle = get_ads('all_page', 'header_middle');

   @endphp
   <div class="text-center m-2 ads ads_top">
       @if (isset($ads_top) && $ads_top->type == 1)
           <img style="max-height: 100px" src="{{ asset($ads_top->image) }}" alt="">
       @endif

       @if (isset($ads_top) && $ads_top->type == 2)
           {!! $ads_top->ad_code !!}
       @endif
   </div>
   @include('asian.global.search-modal')
   @include('asian.layouts.header-information')
   <div class="main-header sticky-header">
       <section class="main--logo--section">
           <div class="container">
               <div class="row main--header--info">
                   <div class="col-md-7 mobile-hide">
                       <div class="scroll--menu--here">
                           <div class="top--bar--left--section">
                               <ul class="list-inline" style="float: left; margin-bottom: -39px; margin-left: -9px;">
                                   <li class="list-inline-item"><span><i class="fa fa-map-marker"
                                               aria-hidden="true"></i></span> ঢাকা</li>
                                   <li class="list-inline-item">|</li>
                                   <li class="list-inline-item"><span><i class="fa fa-calendar-minus-o"
                                               aria-hidden="true"></i></span>
                                       {{ banglaDateTime() }}
                            {{ now()->format('l jS F Y b h:i:s') }} ({{ Date('d-M-Y') }})
                                   </li>
                                   <li class="list-inline-item"><span><i class="fa fa-sun-o"
                                               aria-hidden="true"></i></span>
                                       - ৩৩° সে: </li>
                               </ul>
                           </div>
                       </div>
                   </div>
                   <div class="col-md-5"></div>
               </div>
               <div class="row main--header--section">
                   <div class="col-md-2 col-sm-12 col-xs-12">
                       <div class="lefe--logo">
                           <a href="{{ url('/') }}">
                               @php
                                   $asian = setting();
                               @endphp

                               @if (!empty($asian->header_logo))
                                   <img style="    border: 2px solid #b30000;
    position: relative;
    top: 34px;
    z-index: 999999;
    box-shadow: 2px 1px 11px 2px #ffffff;"
                                       width="100px"
                                       src="{{ $asian->header_logo }}"
                                       alt="Asian Tv logo">
                               @else
                                   <img style="border: 4px solid green"
                                       src="{{ asset('asian') }}/img/logo_asian_online.png" alt="">
                               @endif
                           </a>
                       </div>
                   </div>

                   <div class="col-md-7">

                       @if ($ads_middle)
                           <div class="middle--logo top-ads top-temp-height mt-1 ads ads_middle"
                               style="text-align: center">
                               @if ($ads_middle->type == 1)
                                   <a href="{{ $ads_middle->link ?? '#' }}" target="_blank" style="background: none">
                                       <img class=""
                                           style="width: 100%; height: auto; margin: 0 auto;margin-top:15px"
                                           src="{{ asset($ads_middle->image) }}" alt="">
                                   </a>
                               @endif

                               @if ($ads_middle->type == 2)
                                   {!! $ads_middle->ad_code !!}
                               @endif

                           </div>
                       @endif
                   </div>

                   <div class="col-md-3 col-sm-12 col-xs-12 d-none d-sm-block">
                       <div class="right--logo"style="position: absolute; margin-left: 0px">
                           <ul class="list-inline ">
                               <li class="list-inline-item">
                                   <div class="social-icon twitter" style="background: #001f3f">
                                       <button data-toggle="modal"
                                           style="background: unset; border: unset; color: lemonchiffon;"
                                           data-target="{{ Route::currentRouteName() == 'asian.search_ai' ? '' : '.bd-example-modal-lg' }}"
                                           title=""><i class="fa fa-search" aria-hidden="true"></i></button>
                                       {{--                                    <a  title="" data-toggle="modal" data-target=".bd-example-modal-lg"><i class="fa fa-search" aria-hidden="true"></i></a> --}}
                                       {{--                                    <a href="{{ route('asian.search_ai') }} " title="" target="_blank"><i class="fa fa-search" aria-hidden="true"></i></a> --}}
                                   </div>
                               </li>
                               <li class="list-inline-item">
                                   <div class="social-icon facebook">
                                       <a href="{{ $asian->facebook ? $asian->facebook : 'https://www.facebook.com/' }} "
                                           title="" target="_blank"><i class="fa fa-facebook"
                                               aria-hidden="true"></i></a>
                                   </div>
                               </li>
                               <li class="list-inline-item">
                                   <div class="social-icon youtube">
                                       <a href="{{ $asian->youtube ? $asian->youtube : 'https://www.youtube.com/' }}"
                                           title="" target="_blank"><i class="fa fa-youtube-play"
                                               aria-hidden="true"></i></a>
                                   </div>
                               </li>
                               {{-- <li class="list-inline-item">
                                   <div class="social-icon twitter">
                                       <a href="{{ $asian->twitter ? $asian->twitter : 'https://www.twitter.com/' }} "
                                           title="" target="_blank"><i class="fa fa-twitter"
                                               aria-hidden="true"></i></a>
                                   </div>
                               </li>
                               <li class="list-inline-item">
                                   <div class="social-icon twitter" style="background: #001f3f">
                                       <a href="{{ $asian->apple ? $asian->apple : '#' }} " title=""
                                           target="_blank"><i class="fa fa-apple" aria-hidden="true"></i></a>
                                   </div>
                               </li> --}}
                               <li class="list-inline-item">
                                   <div class="social-icon android" style="background: green">
                                       <a href="https://play.google.com/store/apps/details?id=com.asiantv.asian_online"
                                           title="" target="_blank"><i class="fa fa-android"
                                               aria-hidden="true"></i></a>
                                   </div>
                               </li>

                               <li class="list-inline-item">
                                   <div class="social-icon live-tv"
                                       style="background: red; position: relative; width: 40px; height: 40px;">
                                       <a href="{{ route('tv.live') }}" title="Live TV" target="_blank">
                                           <i class="fa fa-television" aria-hidden="true"></i>
                                           <span class="pulse"></span>
                                           <span class="live-text">LIVE</span>
                                       </a>
                                   </div>
                               </li>

                               <style>
                                   .social-icon.live-tv {
                                       position: relative;
                                       width: 40px;
                                       height: 40px;
                                       border-radius: 50%;
                                       display: flex;
                                       align-items: center;
                                       justify-content: center;
                                       color: white;
                                       overflow: visible;
                                   }

                                   .social-icon.live-tv i {
                                       font-size: 18px;
                                       z-index: 2;
                                       position: relative;
                                   }

                                   /* Pulsing effect */
                                   .social-icon.live-tv .pulse {
                                       position: absolute;
                                       top: 50%;
                                       left: 50%;
                                       width: 100%;
                                       height: 100%;
                                       background: rgba(255, 0, 0, 0.6);
                                       border-radius: 50%;
                                       transform: translate(-50%, -50%);
                                       z-index: 1;
                                       animation: pulse 1.5s infinite;
                                   }

                                   /* LIVE text badge */
                                   .social-icon.live-tv .live-text {
                                       position: absolute;
                                       top: 11px;
                                       font-size: 6px;
                                       font-weight: bold;
                                       /* background: white; */
                                       color: #ffffff;
                                       padding: 1px 4px;
                                       border-radius: 3px;
                                       z-index: 3;
                                       font-weight: bold !important;
                                   }

                                   .live-text {
                                       font-weight: 500 !important;

                                   }

                                   @keyframes pulse {
                                       0% {
                                           transform: translate(-50%, -50%) scale(1);
                                           opacity: 1;
                                       }

                                       70% {
                                           transform: translate(-50%, -50%) scale(1.6);
                                           opacity: 0;
                                       }

                                       100% {
                                           transform: translate(-50%, -50%) scale(1);
                                           opacity: 0;
                                       }
                                   }
                               </style>


                           </ul>

                       </div>
                   </div>
               </div>
           </div>
       </section>
       @include('asian.layouts.menu')
   </div>
   <style>
       .sticky-header {
           position: sticky;
           top: 0;
           z-index: 99999;
           background: white;
           transition: all 0.3s ease;
       }

       .icon-sticky {
           top: -20;
       }

       .sticky-active .lefe--logo img {
           width: 80px !important;
           transition: all 0.3s ease;
           margin-top: -30px
       }

       .sticky-active .list-inline {
           top: -7px !important;
           position: unset;
           transition: all 0.3s ease;
       }

       .list-inline {
           opacity: 2;
           transition: opacity 0.5s ease;
       }

       @media (max-width: 767px) {
           .ads_top {
               display: none !important;
           }
       }
   </style>
   <script>
       window.onload = function() {
           window.scrollTo(0, 0);
       };
       document.addEventListener("DOMContentLoaded", function() {
           const header = document.querySelector(".main-header");
           const placeholder = document.createElement("div");
           const ads = document.querySelectorAll(".ads"); // select all ad containers

           placeholder.style.height = header.offsetHeight + "px";
           placeholder.style.display = "none";
           header.parentNode.insertBefore(placeholder, header);

           window.addEventListener("scroll", function() {
               if (window.scrollY > header.offsetHeight) {
                   if (!header.classList.contains("sticky-active")) {
                       header.classList.add("sticky-active");
                       placeholder.style.display = "block";
                       ads.forEach(ad => ad.style.display = "none"); // hide ads
                   }
               } else {
                   if (header.classList.contains("sticky-active")) {
                       header.classList.remove("sticky-active");
                       placeholder.style.display = "none";
                       ads.forEach(ad => ad.style.display = "block"); // show ads
                   }
               }
           });
       });
   </script>