<!doctype html>
<html lang="bn">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" sizes="32x32" href="{{asset('assets/images/'.$gs->favicon)}}">
  <meta name="theme-color" content="#9b090d">
  <meta name="msapplication-TileColor" content="#9b090d">
  <meta name="msapplication-navbutton-color" content="#9b090d">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="#9b090d">

  @yield('meta')
  <title>{{ $gs->title }}</title>

  <link rel="preload" href="{{asset('frontend/fonts/ShurjoWeb_400.woff2')}}" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="{{asset('frontend/fonts/ShurjoWeb_700.woff2')}}" as="font" type="font/woff2" crossorigin>
  <style>
    @font-face {
      font-family: "Shurjo";
      font-display: swap;
      font-style: normal;
      font-weight: 400;
      src: url("{{asset('frontend/fonts/ShurjoWeb_400.woff2')}}") format('woff2'),
           url("{{asset('frontend/fonts/ShurjoWeb_400.woff')}}") format("woff");
    }
    @font-face {
      font-family: "Shurjo";
      font-display: swap;
      font-style: normal;
      font-weight: 700;
      src: url("{{asset('frontend/fonts/ShurjoWeb_700.woff2')}}") format('woff2'),
           url("{{asset('frontend/fonts/ShurjoWeb_700.woff')}}") format("woff");
    }
  </style>
  <!-- [Instrument Sans — English font] -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap">
  <link rel="stylesheet" type="text/css" href="{{asset('frontend/vendors/bootstrap3.7/css/bootstrap.min.css')}}">
  <link rel="stylesheet" type="text/css" href="{{asset('frontend/vendors/datepicker/bootstrap-datepicker.min.css')}}">
  <link rel="stylesheet" type="text/css" href="{{asset('frontend/vendors/fontawesome6/css/fontawesome.css')}}">
  <link rel="stylesheet" type="text/css" href="{{asset('frontend/vendors/fontawesome6/css/brands.css')}}">
  <link rel="stylesheet" type="text/css" href="{{asset('frontend/vendors/fontawesome6/css/solid.css')}}">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@latest/css/iconoir.css">
  <link rel="stylesheet" href="{{asset('frontend/vendors/flex-gallery/flexslider.css')}}" type="text/css" media="screen" />
  <link rel="stylesheet" type="text/css" href="{{asset('frontend/vendors/custom/custom.css')}}">
  <link rel="stylesheet" href="{{asset('frontend/vendors/custom/translated.css')}}" lang="en">

  {!!$gs->adsense_code!!}
  {!!$gs->search_console!!}
  {!! $seo->google_analytics !!}

  <!--sharethis-->
  <script src='https://platform-api.sharethis.com/js/sharethis.js#property=5e3fe478ea3c1a0012ed0983&product=inline-share-buttons' async='async'></script>

  <style>
    /* Fix ad banner image overflow */
    .text-center img, .w970 img, .w300 img, .w320 img, .w728 img,
    .marginCenter img, ins img, .marginB20 img[alt="ad728"],
    div[class*="margin"] > img, .col-md-12 > .marginB20 img {
      max-width: 100% !important;
      height: auto !important;
    }
    .w970, .w300, .w320, .w728, .marginB20:has(> img) {
      overflow: hidden;
      max-width: 100%;
    }
    /* Catch all ad images that might overflow */
    img[width="728"], img[width="970"], img[width="300"], img[width="468"],
    img[alt*="ad"], img[title*="ad"] {
      max-width: 100% !important;
      height: auto !important;
    }
    /* Space below fixed header for content */
    body { padding-top: 20px; }
    .text-left.stickyLogo { margin-left: -10px !important; }

    /* Mobile footer logo */
    @media (max-width: 767px) {
      .mobileFooter img {
        max-width: 40% !important;
        height: auto !important;
        margin: -20px;
      }
    }

    /* Mobile header logo alignment */
    .mobileHeader .xsLogo {
      height: 65px;
      margin-left: -10px;
      margin-top: -5px;
      margin-bottom: -5px;
    }
    /* Force flex on mobile header (visible-xs sets display:block !important) */
    @media (max-width: 767px) {
      .mobileHeader {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 100% !important;
        padding: 8px 15px !important;
      }
    }

    /* Modern Live button */
    .live-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #c0101a;
      color: #fff !important;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.5px;
      padding: 0 14px;
      height: 34px;
      border-radius: 4px;
      text-decoration: none !important;
      text-transform: uppercase;
      transition: all 0.3s ease;
      margin-right: 2px;
    }
    .live-btn:hover {
      background: #e01020;
      box-shadow: 0 0 12px rgba(192, 16, 26, 0.5);
      color: #fff !important;
    }
    .live-btn .live-dot {
      width: 8px;
      height: 8px;
      background: #fff;
      border-radius: 50%;
      display: inline-block;
      animation: livePulse 1.2s ease-in-out infinite;
    }
    @keyframes livePulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.6); opacity: 0.4; }
    }
    /* Header action icons */
    .header-icon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 4px;
      background: rgba(255,255,255,0.15);
      color: #fff;
      cursor: pointer;
      transition: all 0.25s ease;
      margin-left: 2px;
      border: none;
      text-decoration: none !important;
    }
    .header-icon-btn:hover {
      background: rgba(255,255,255,0.3);
      color: #fff;
    }
    .header-icon-btn svg {
      color: #fff;
    }

    /* Detail page action buttons */
    .detail-action-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 18px;
      font-size: 13px;
      font-weight: 600;
      color: #9b090d;
      background: #fff;
      border: 1.5px solid #9b090d;
      border-radius: 4px;
      text-decoration: none !important;
      margin-right: 8px;
      margin-bottom: 8px;
      transition: all 0.2s ease;
    }
    .detail-action-btn:hover {
      background: #9b090d;
      color: #fff;
    }
    .detail-action-btn i {
      font-size: 14px;
    }
  </style>
  @yield('styles')
</head>

<body class="google-anno-skip">

  <!-- Header Part -->
  @include('partial.front.header')
  <!-- Header Part End -->

  <!-- Skeleton Loaders -->
  @include('partial.front.skeleton')

  <!-- Content of each page -->
  <div class="page-content-wrapper">
    @yield('contents')
  </div>
  <!-- Content of each page end -->

  <!-- Footer -->
  @include('partial.front.footer')
  <!-- Footer End -->

  <div id="fb-root"></div>

  <script src="{{asset('frontend/vendors/jquery/jquery-3.7.1.min.js')}}"></script>
  <script src="{{asset('frontend/vendors/bootstrap3.7/js/bootstrap.min.js')}}"></script>

  <!-- sidebar mobile -->
  <script type="text/javascript">
    function openNav(){
      document.getElementById("mySidepanel").style.width = "250px";
    }
    function closeNav(){
      document.getElementById("mySidepanel").style.width = "0";
    }
  </script>

  <!-- megamenu -->
  <script type="text/javascript">
    $('.allMenu').click(function(){
      $('.megaMenu').toggle(100);
      $('.allMenu').toggle();
    });
    $('.allMenu1').click(function(){
      $('.megaMenu').toggle(100);
      $('.allMenu').toggle();
    });
  </script>

  <!-- go to top -->
  <script type="text/javascript">
    $(window).scroll(function(){
      if ($(window).scrollTop() > 300) {
        $('.go-to-top').show();
      }else{
        $('.go-to-top').hide();
      }
    });
    function gotop(){
      var scrollStep = -window.scrollY / 300,
      scrollInterval = setInterval(function () {
        if (window.scrollY != 0) {
          window.scrollBy(0, scrollStep);
        } else clearInterval(scrollInterval);
      }, 2);
    }
  </script>

  <!-- jquery onscroll image loader -->
  <script src="{{asset('frontend/vendors/loadscroll/jQuery.loadScroll.js')}}"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $('img').loadScroll();
    });
  </script>

  <!-- FlexSlider -->
  <script defer src="{{asset('frontend/vendors/flex-gallery/jquery.flexslider.js')}}"></script>
  <script type="text/javascript">
    $(function(){});
    $(window).on('load', function(){
      $('.flexslider').flexslider({
        controlNav: false,
        animation: "slide",
        animationLoop: false,
        directionNav: true,
        itemWidth: 320,
        itemMargin: 20,
        pausePlay: true,
        nextText: '<i class="iconoir-nav-arrow-right"></i>',
        prevText: '<i class="iconoir-nav-arrow-left"></i>',
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
      $('.flexslider3').flexslider({
        controlNav: false,
        animation: "slide",
        animationLoop: false,
        directionNav: true,
        itemWidth: 240,
        itemMargin: 15,
        pausePlay: true,
        nextText: '<i class="iconoir-nav-arrow-right"></i>',
        prevText: '<i class="iconoir-nav-arrow-left"></i>',
        start: function(slider){
          $('body').removeClass('loading');
          $('.flexslider3MainDiv').css('visibility', 'visible');
          $('.flexslider3MainDiv').css('height', 'auto');
        }
      });
    });
  </script>

  <!-- device wise div remove -->
  <script type="text/javascript">
    var width = $(window).width();
    if(width >= 768){
      $('.visible-xs').remove();
    }
    if(width <= 767){
      $('.hidden-xs').remove();
    }
  </script>

  <!-- latest/popular tab caret -->
  <script type="text/javascript">
    $('.latestNav').click(function(){
      $('.latestCaret').show();
      $('.highestCaret').hide();
    });
    $('.highestNav').click(function(){
      $('.highestCaret').show();
      $('.latestCaret').hide();
    });
  </script>

  <!-- dropdown hover -->
  <script type="text/javascript">
    $(function(){
      $('.dropdown').hover(function() {
        $(this).addClass('open');
      },
      function() {
        $(this).removeClass('open');
      });
    });
  </script>

  <!-- convert english to bangla -->
  <script type="text/javascript">
    function englishToBangla(val) {
      var EnlishToBanglaNumber = {'PM': 'পিএম', 'AM': 'এএম', '0': '০', '1': '১', '2': '২', '3': '৩', '4': '৪', '5': '৫', '6': '৬', '7': '৭', '8': '৮', '9': '৯', 'Sat': 'শনিবার', 'Sun': 'রবিবার', 'Mon': 'সোমবার', 'Tue': 'মঙ্গলবার', 'Wed': 'বুধবার', 'Thu': 'বৃহস্পতিবার', 'Fri': 'শুক্রবার', 'Jan': 'জানুয়ারি', 'Feb': 'ফেব্রুয়ারি', 'Mar': 'মার্চ', 'Apr': 'এপ্রিল', 'May': 'মে', 'Jun': 'জুন', 'Jul': 'জুলাই', 'Aug': 'আগস্ট', 'Sep': 'সেপ্টেম্বর', 'Oct': 'অক্টোবর', 'Nov': 'নভেম্বর', 'Dec': 'ডিসেম্বর'};
      String.prototype.getDigitBanglaFromEnglish = function() {
        var retStr = this;
        for (var x in EnlishToBanglaNumber) {
          retStr = retStr.replace(new RegExp(x, 'g'), EnlishToBanglaNumber[x]);
        }
        return retStr;
      };
      var english_number = '' + val;
      var bangla_converted_number = english_number.getDigitBanglaFromEnglish();
      return bangla_converted_number;
    }
    // Set footer year in Bangla
    var todaysYear = englishToBangla(new Date().getFullYear());
    $('.todaysYear').html(todaysYear);
  </script>

  <!-- desktop ajax load latest news -->
  <script type="text/javascript">
    var width = $(window).width();
    if(width >= 769){
      $('.latestNewsLoaderDiv').show();
      var url2 = '{{ url("/ajax/load/latestnews/10/0/0") }}';
      $.get(url2, function(data){
        if(data != ''){
          $('.latestNewsLoaderDiv').hide();
          $.each(data, function(key, value){
            var row = $('<div class="media positionRelative paddingLR5"><div class="media-body"><h4 class="margin0 marginL5 hoverBlue title12">'+value.fullheadline+'</h4></div><a aria-label="'+value.headline+'" href="'+value.url+'" class="linkOverlay"></a></div>');
            $('.ajaxLatestNewsDivDesktop').append(row);
          });
        }
      });
    }
  </script>

  <!-- desktop ajax load popular news -->
  <script type="text/javascript">
    var width = $(window).width();
    if(width >= 769){
      $('.popularNewsLoaderDiv').show();
      var url2 = '{{ url("/ajax/load/popularnews/10/0") }}';
      $.get(url2, function(data){
        if(data != ''){
          $('.popularNewsLoaderDiv').hide();
          $.each(data, function(key, value){
            var number = englishToBangla(parseInt(key)+1);
            var row = $('<div class="media positionRelative paddingR5"><div class="media-left paddingR5"><div class="popularCount">'+number+'</div></div><div class="media-body"><h4 class="margin0 marginL5 hoverBlue title12">'+value.title+'</h4></div><a aria-label="'+value.title+'" href="'+value.link+'" class="linkOverlay"></a></div>');
            $('.ajaxPopularNewsDivDesktop').append(row);
          });
        }
      });
    }
  </script>

  <!-- desktop ajax load menubar categories -->
  <script type="text/javascript">
    $('.desktopClickLoadMenubarCategories').click(function(){
      var url = '{{ url("/ajax/load/menubarcategories") }}';
      $.get(url, function(data){
        if(data != ''){
          $('.desktopLoadMenubarCategories').empty();
          // Collect slugs already visible in the main menu
          var mainMenuSlugs = [];
          $('.headerMenu ul li a').each(function(){
            var href = $(this).attr('href');
            if(href){
              var slug = href.replace(/^.*\//, '').replace(/\.html$/, '');
              if(slug) mainMenuSlugs.push(slug);
            }
          });
          $.each(data, function(key, value){
            // Skip categories already in the main menu
            if(mainMenuSlugs.indexOf(value.title) !== -1) return true;
            var row = $('<div class="col-md-2 paddingL0"><div class="paddingT7 paddingB5 borderC7L1 text-center marginB15"><a class="title11 textDecorationNone colorWhite hoverAsh" aria-label="'+value.display_name+'" href="{{ url("/") }}/'+value.title+'">'+value.display_name+'</a></div></div>');
            $('.desktopLoadMenubarCategories').append(row);
          });
        }
      });
    });
  </script>
  <!-- mobile ajax load latest news -->
  <script type="text/javascript">
    var width = $(window).width();
    if(width <= 767){
      $.get('{{ url("/ajax/load/latestnews/10/0/0") }}', function(data){
        if(data != ''){
          $('.ajaxLatestNewsDivMobile .latestNewsLoaderDiv').hide();
          $.each(data, function(key, value){
            var row = $('<div class="media positionRelative paddingLR5"><div class="media-body"><h4 class="margin0 marginL5 hoverBlue title12">'+value.fullheadline+'</h4></div><a aria-label="'+value.headline+'" href="'+value.url+'" class="linkOverlay"></a></div>');
            $('.ajaxLatestNewsDivMobile').append(row);
          });
        }
      });
    }
  </script>

  <!-- mobile ajax load popular news -->
  <script type="text/javascript">
    var width = $(window).width();
    if(width <= 767){
      $.get('{{ url("/ajax/load/popularnews/10/0") }}', function(data){
        if(data != ''){
          $('.ajaxPopularNewsDivMobile .popularNewsLoaderDiv').hide();
          $.each(data, function(key, value){
            var number = englishToBangla(parseInt(key)+1);
            var row = $('<div class="media positionRelative paddingR5"><div class="media-left paddingR5"><div class="popularCount">'+number+'</div></div><div class="media-body"><h4 class="margin0 marginL5 hoverBlue title12">'+value.title+'</h4></div><a aria-label="'+value.title+'" href="'+value.link+'" class="linkOverlay"></a></div>');
            $('.ajaxPopularNewsDivMobile').append(row);
          });
        }
      });
    }
  </script>

  <!-- division/district/upazila cascade -->
  <script type="text/javascript">
    $(document).on("change", ".selectDivision", function(){
      $('.selectDistrict').html('<option value="">জেলা</option>');
      $('.selectUpazila').html('<option value="">উপজেলা</option>');
      var divisionId = $(this).val();
      if(divisionId) {
        $.get('/get-districts-by-division/' + divisionId, function(data){
          $('.selectDistrict').html(data);
        });
      }
    });
    $(document).on("change", ".selectDistrict", function(){
      $('.selectUpazila').html('<option value="">উপজেলা</option>');
      var districtId = $(this).val();
      if(districtId) {
        $.get('/get-upazilas-by-district/' + districtId, function(data){
          $('.selectUpazila').html(data);
        });
      }
    });
    $(document).on("click", ".clickSearchButton", function(){
      var divisionId = $('.selectDivision').val();
      var districtId = $('.selectDistrict').val();
      var upazilaId = $('.selectUpazila').val();
      var params = [];
      if(divisionId) params.push('division_id=' + divisionId);
      if(districtId) params.push('district_id=' + districtId);
      if(upazilaId) params.push('upazila_id=' + upazilaId);
      if(params.length > 0) {
        window.location.href = '/location-news?' + params.join('&');
      } else {
        $('.searchMessageDiv').show();
      }
    });
  </script>

  @yield('scripts')

</body>
</html>
