@php
// 1. Database Queries
$category = DB::table('categories')->orderBy('id', 'ASC')->get();
$seo = DB::table('seos')->first();
$social = DB::table('socials')->first();
$horizontal1 = DB::table('ads')->where('type', 2)->first();
$setting = DB::table('settings')->first();

// 2. The function (Defined once)
if (!function_exists('bn_date')) {
    function bn_date($str) {
        $en_num = array('1','2','3','4','5','6','7','8','9','0');
        $bn_num = array('১','২','৩','৪','৫','৬','৭','৮','৯','০');
        $str = str_replace($en_num, $bn_num, $str);

        $en_months = array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
        $en_months_short = array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
        $bn_months = array('জানুয়ারী', 'ফেব্রুয়ারী', 'মার্চ', 'এপ্রিল', 'মে', 'জুন', 'জুলাই', 'আগস্ট', 'সেপ্টেম্বর', 'অক্টোবর', 'নভেম্বর', 'ডিসেম্বর');
        $str = str_replace($en_months, $bn_months, $str);
        $str = str_replace($en_months_short, $bn_months, $str);

        $en_days = array('Saturday','Sunday','Monday','Tuesday','Wednesday','Thursday','Friday');
        $en_days_short = array('Sat','Sun','Mon','Tue','Wed','Thu','Fri');
        $bn_days = array('শনিবার','রবিবার','সোমবার','মঙ্গলবার','বুধবার','বৃহস্পতিবার','শুক্রবার');
        $str = str_replace($en_days, $bn_days, $str);
        $str = str_replace($en_days_short, $bn_days, $str);

        $en_time = array('am', 'pm');
        $bn_time = array('পূর্বাহ্ন', 'অপরাহ্ন');
        $str = str_replace($en_time, $bn_time, $str);

        return $str;
    }
}
@endphp


<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="{{ $seo->meta_author ??'' }}">
    <meta name="keyword" content="{{ $seo->meta_keyword ??''}}">
    <meta name="description" content="{{ $seo->meta_description ??''}}">
    <meta name="google-verification" content="{{ $seo->google_verification ??''}}">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @yield('meta')

    <title>{{ $seo->meta_title ?? 'BD Crime Watch' }}</title>

    <link rel="icon" href="{{ asset($setting->favicon ??'') }}">
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="{{ asset('bootstrap-5.3.5/dist/css/bootstrap.min.css') }}">

<script src="{{ asset('bootstrap-5.3.5/dist/js/bootstrap.bundle.min.js') }}"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    
    <link rel="stylesheet" href="{{ asset('public/frontend/css/archive-stylefe9d.css?ver=4.7.3') }}">
    <link rel="stylesheet" href="{{ asset('public/frontend/css/responsivefe9d.css?ver=4.7.3') }}">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" async></script>
    <style>
        body { background-color: #f8f9fa; font-size: 17px; font-family: 'SolaimanLipiNormal', sans-serif; }
        .main_wbsite { background-color: #ffffff; box-shadow: 0 0 20px #ddd; padding: 15px; }
        
        /* Navbar Customization */
        .menu_bottom { background: #363636; border-bottom: 3px solid #9A1515; }
        .nav-link { color: #fff !important; border-right: 1px solid #444; padding: 10px 15px !important; }
        .nav-link:hover, .nav-link.active { background: #9A1515; }
        .dropdown-menu { background: #363636; border: none; }
        .dropdown-item { color: #fff; border-bottom: 1px solid #444; }
        .dropdown-item:hover { background: #9A1515; color: #fff; }

        /* Scrollers & Headers */
        .top-hdr-border { font-size: 14px; }
        .bannar-bs4 { background: #fdfdfd; border: 1px solid #eee; border-radius: 8px; }
        
        /* Social Icons */
        .top-hdr-social ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; justify-content: flex-end; }
        .top-hdr-social a { color: #fff; font-size: 18px; }

        .scrollToTop {
            width: 45px; height: 45px; background: #363636; color: #fff;
            position: fixed; right: 20px; bottom: 20px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center; cursor: pointer; display: none; z-index: 1000;
        }

        .footer { background-color: #2D2D2D; color: #fff; padding: 40px 0; }
        .footer a { color: #ccc; text-decoration: none; }
        .footer a:hover { color: #fff; }
        .footer-list { list-style: none; padding: 0; }




    /* Scroll To Top Button */
    #backToTop {
      width: 50px;
      height: 50px;
      position: fixed;
      bottom: 30px;
      right: 30px;
      display: none; /* hidden initially */
      justify-content: center;
      align-items: center;
      background-color: #343a40; /* dark btn color */
      color: #fff;
      border-radius: 50%;
      z-index: 9999;
      cursor: pointer;
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
      transition: background 0.3s, transform 0.3s;
    }

    #backToTop:hover {
      background-color: #495057;
      transform: scale(1.1);
    }

    #backToTop i {
      font-size: 20px;
    }

    /* Just for demo: make page tall */
    body {
      height: 2000px;
      padding: 20px;
    }

    </style>
</head>

<body>

<div class="container main_wbsite my-3">
    <header class="row align-items-center mb-3">
        <div class="col-lg-3 col-md-4 text-center text-md-start mb-3 mb-md-0">
            <a href="{{ URL::to('/') }}">
                <img src="{{ asset($setting->logo ?? '') }}" alt="Logo" class="img-fluid" style="height: 100px;">
            </a>
        </div>
        <div class="col-lg-9 col-md-8">
            <div class="row bg-dark text-white py-2 px-3 rounded-top align-items-center top-hdr-border">
                <div class="col-lg-5 text-center text-lg-start mb-2 mb-lg-0">
                    <i class="far fa-clock"></i> <span id="Clock"></span> | <br>
                    <span id="date-today"></span> বঙ্গাব্দ | 
                   {{-- Now call the date --}}
<span>{{ bn_date(date('l, d F Y')) }}</span>
                </div>
                <div class="col-lg-4 mb-2 mb-lg-0">
                    <form class="d-flex" method="get" action="{{ URL::to('/') }}">
                        <input class="form-control form-control-sm me-2" type="text" placeholder="খুজুন.." name="s">
                        <button class="btn btn-sm btn-danger" type="submit">খুজুন</button>
                    </form>
                </div>
                <div class="col-lg-3">
                    <div class="top-hdr-social">
                        <ul>
                            <li><a href="{{ $social->facebook ?? '#'}}" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
                            <li><a href="{{ $social->twitter ?? '#'}}" target="_blank"><i class="fab fa-twitter"></i></a></li>
                            <li><a href="{{ $social->linkedin ?? '#'}}" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
                            <li><a href="{{ $social->youtube ?? '#'}}" target="_blank"><i class="fab fa-youtube"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="bannar-bs4 p-3 mt-2 shadow-sm text-center">
                <p class="mb-0 small">
                    <strong>www.bdcrimewatch.com</strong> : একটি রাজনৈতিক প্রভাবমুক্ত, অবানিজ্যিক, সমাজসেবা মূলক উদ্যোগ।
                    <br> আপনার আশেপাশে ঘটে যাওয়া অনিয়ম, অসঙ্গতি ও অপরাধের তথ্য দিতে যোগাযোগ করুন।
                </p>
            </div>
        </div>
    </header>

  
<nav class="navbar navbar-expand-lg menu_bottom p-0 mb-3 shadow-sm border-bottom">
    <div class="container-fluid">
        <button class="navbar-toggler bg-light my-2" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="mainNav">
            <ul class="navbar-nav me-auto d-flex flex-wrap">
                <li class="nav-item">
                    <a class="nav-link active" href="{{ URL::to('/') }}">
                        <i class="fa fa-home"></i> প্রচ্ছদ
                    </a>
                </li>

                @foreach($category as $row)
                    @php 
                        $subcategory = DB::table('subcategories')->where('category_id', $row->id)->get(); 
                    @endphp
                    
                    <li class="nav-item {{ $subcategory->count() ? 'dropdown' : '' }}">
                        <a class="nav-link {{ $subcategory->count() ? 'dropdown-toggle' : '' }}" 
                           href="{{ URL::to('post/'.$row->id.'/'.$row->category_bn) }}" 
                           @if($subcategory->count()) 
                               id="navbarDropdown{{ $row->id }}" 
                               role="button" 
                               data-bs-toggle="dropdown" 
                               aria-expanded="false" 
                           @endif>
                            {{ $row->category_bn }}
                        </a>

                        @if($subcategory->count())
                            <ul class="dropdown-menu shadow" aria-labelledby="navbarDropdown{{ $row->id }}">
                                @foreach($subcategory as $sub)
                                    <li>
                                        <a class="dropdown-item" href="{{ URL::to('posts/'.$sub->id.'/'.$sub->subcategory_bn) }}">
                                            {{ $sub->subcategory_bn }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
</nav>




    <main>
        @yield('content')
    </main>

    <footer class="footer mt-5 rounded">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center mb-4">
                    <p class="mb-0">অফিস : {{$setting->address_bn ??''}} | মোবাইল: {{ $setting->phone_bn ??''}} | ইমেইল: {{ $setting->email ??''}}</p>
                </div>
                <div class="col-md-7">
                    <div class="row">
                        @foreach($category->chunk(4) as $chunk)
                            <div class="col-4">
                                <ul class="footer-list">
                                    @foreach($chunk as $row)
                                        <li><a href="{{ URL::to('post/'.$row->id.'/'.$row->category_bn) }}"><i class="fa fa-angle-right"></i> {{ $row->category_bn }}</a></li>
                                    @endforeach
                                </ul>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-md-5 text-center text-md-end">
                    <a href="{{ URL::to('/') }}">
                        <img src="{{ asset($setting->mobilelogo ?? '') }}" alt="Logo" class="img-fluid mb-3" style="max-height: 60px;">
                    </a>
                    <div class="mt-2">
                        <ul class="list-inline small">
                            <li class="list-inline-item"><a href="{{ URL::to('/family') }}">ম্যানেজমেন্ট</a></li>
                            <li class="list-inline-item">|</li>
                            <li class="list-inline-item"><a href="{{ URL::to('/all_staffs') }}">আমাদের পরিবার</a></li>
                            <li class="list-inline-item">|</li>
                            <li class="list-inline-item"><a href="{{ URL::to('/about') }}">আমাদের সম্পর্কে</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <div class="bg-dark text-white py-3 mt-3 rounded-bottom text-center small">
        <p class="mb-1">© সকল কিছুর স্বত্বাধিকারঃ {{ $seo->meta_title ?? '' }} | অনুমতি ছাড়া কপি করা দণ্ডনীয় অপরাধ</p>
        <p class="mb-0">কারিগরী সহযোগিতায়: <a href="https://www.dhakasupplier2.com/" class="text-warning text-decoration-none" target="_blank">DHAKA SUPPLIER</a></p>
    </div>

     <div id="backToTop" class="d-flex">    <i class="fa fa-arrow-up" title="goto top"></i>  </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://bangla.plus/scripts/bangladatetoday.min.js"></script>
<script>dateToday('date-today', 'bangla');</script>

<script>
    // Real-time Clock in Bangla
    function displayTime() {
        const timeNow = new Date();
        let hh = timeNow.getHours();
        let mm = timeNow.getMinutes();
        let ss = timeNow.getSeconds();
        let session = "AM";
        
        if(hh == 0) hh = 12;
        if(hh > 12) { hh = hh - 12; session = "PM"; }
        
        hh = (hh < 10) ? "0" + hh : hh;
        mm = (mm < 10) ? "0" + mm : mm;
        ss = (ss < 10) ? "0" + ss : ss;
        
        let time = hh + ":" + mm + ":" + ss + " " + session;
        let chars = {'1':'১','2':'২','3':'৩','4':'৪','5':'৫','6':'৬','7':'৭','8':'৮','9':'৯','0':'০','A':'এ','P':'পি','M':'এম'};
        let res = time.replace(/[1234567890AMP]/g, m => chars[m]);
        document.getElementById("Clock").innerText = res;
    }
    setInterval(displayTime, 1000);
    displayTime();

    // Scroll to Top
    $(window).scroll(function() {
        if ($(this).scrollTop() > 200) { $('#backToTop').fadeIn(); } 
        else { $('#backToTop').fadeOut(); }
    });
    $('#backToTop').click(function() {
        $('html, body').animate({scrollTop: 0}, 600);
        return false;
    });
</script>

  <script>
    const backToTop = document.getElementById('backToTop');

    // Show or hide button based on scroll
    window.addEventListener('scroll', () => {
      backToTop.style.display = window.scrollY > 200 ? 'flex' : 'none';
    });

    // Smooth scroll to top on click
    backToTop.addEventListener('click', () => {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  </script>
</body>
</html>