{{-- Skeleton Loader CSS --}}
<style>
  .skeleton-wrapper { display: block; padding-top: 90px; }
  .page-content-wrapper { display: none; }
  .skeleton-wrapper.loaded { display: none !important; }
  .page-content-wrapper.loaded { display: block !important; }

  .skeleton-bone {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
  }
  @keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  .sk-text { height: 14px; margin-bottom: 10px; }
  .sk-text-sm { height: 10px; margin-bottom: 8px; }
  .sk-text-lg { height: 22px; margin-bottom: 12px; }
  .sk-text-xl { height: 30px; margin-bottom: 14px; }
  .sk-img { width: 100%; height: 0; padding-bottom: 56%; margin-bottom: 12px; }
  .sk-img-sq { width: 100%; height: 0; padding-bottom: 100%; }
  .sk-badge { width: 80px; height: 24px; margin: 0 auto 15px auto; border-radius: 5px; }
  .sk-circle { width: 40px; height: 40px; border-radius: 50%; }
  .sk-btn { width: 100px; height: 32px; border-radius: 4px; display: inline-block; margin-right: 8px; }
  .sk-card { background: #fff; border: 1px solid #f1f1f1; padding: 12px; margin-bottom: 15px; border-radius: 4px; }
  .sk-sidebar-card { background: #fff; border: 1px solid #f1f1f1; padding: 10px; margin-bottom: 15px; border-radius: 4px; }
  .sk-divider { height: 3px; margin: 15px 0; }
  .sk-tab-header { height: 40px; margin-bottom: 0; border-radius: 4px 4px 0 0; }
  .sk-sidebar-item { display: flex; align-items: flex-start; padding: 8px 5px; border-bottom: 1px solid #f5f5f5; }
  .sk-sidebar-item:last-child { border-bottom: none; }
  .sk-sidebar-text { flex: 1; }
</style>

{{-- Homepage Skeleton --}}
@if(request()->routeIs('frontend.index'))
<div class="skeleton-wrapper" id="skeleton-home">
  <div class="container">
    <div class="row">
      <div class="col-md-9">
        {{-- Hero slider skeleton --}}
        <div class="skeleton-bone sk-img" style="padding-bottom: 42%;"></div>
        {{-- Section title --}}
        <div class="skeleton-bone sk-text-lg" style="width: 150px; margin-top: 20px;"></div>
        <div class="skeleton-bone sk-divider" style="width: 100%;"></div>
        {{-- News grid 3x --}}
        <div class="row" style="margin-top: 10px;">
          @for($i = 0; $i < 3; $i++)
          <div class="col-md-4">
            <div class="skeleton-bone sk-img"></div>
            <div class="skeleton-bone sk-text" style="width: 90%;"></div>
            <div class="skeleton-bone sk-text-sm" style="width: 60%;"></div>
          </div>
          @endfor
        </div>
        {{-- Another section --}}
        <div class="skeleton-bone sk-text-lg" style="width: 130px; margin-top: 25px;"></div>
        <div class="skeleton-bone sk-divider" style="width: 100%;"></div>
        <div class="row" style="margin-top: 10px;">
          @for($i = 0; $i < 3; $i++)
          <div class="col-md-4">
            <div class="skeleton-bone sk-img"></div>
            <div class="skeleton-bone sk-text" style="width: 85%;"></div>
            <div class="skeleton-bone sk-text-sm" style="width: 55%;"></div>
          </div>
          @endfor
        </div>
      </div>
      <div class="col-md-3">
        {{-- Sidebar ad --}}
        <div class="skeleton-bone" style="width: 100%; height: 250px; margin-bottom: 20px;"></div>
        {{-- Sidebar tabs --}}
        <div class="skeleton-bone sk-tab-header"></div>
        <div class="sk-sidebar-card" style="border-top: 0; border-radius: 0 0 4px 4px;">
          @for($i = 0; $i < 6; $i++)
          <div class="sk-sidebar-item">
            <div class="sk-sidebar-text">
              <div class="skeleton-bone sk-text" style="width: {{ rand(70,95) }}%;"></div>
            </div>
          </div>
          @endfor
        </div>
      </div>
    </div>
  </div>
</div>
@endif

{{-- Details Page Skeleton --}}
@if(request()->routeIs('frontend.postBySubcategory.details'))
<div class="skeleton-wrapper" id="skeleton-detail">
  <div class="container hidden-xs">
    <div style="border: 1px solid #f1f1f1; padding: 20px; margin-bottom: 20px;">
      <div class="row">
        <div class="col-md-9 text-center">
          <div class="skeleton-bone sk-badge"></div>
          <div class="skeleton-bone sk-text-xl" style="width: 70%; margin: 0 auto 10px;"></div>
          <div class="skeleton-bone sk-text-lg" style="width: 50%; margin: 0 auto;"></div>
        </div>
        <div class="col-md-3">
          <div class="skeleton-bone sk-text" style="width: 80%;"></div>
          <div class="skeleton-bone sk-text-sm" style="width: 60%;"></div>
          <div style="margin-top: 20px;">
            <div class="skeleton-bone sk-btn"></div>
            <div class="skeleton-bone sk-btn"></div>
            <div class="skeleton-bone sk-btn"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-9">
        <div class="skeleton-bone sk-img" style="padding-bottom: 50%;"></div>
        <div style="padding: 0 8%;">
          @for($i = 0; $i < 8; $i++)
          <div class="skeleton-bone sk-text" style="width: {{ rand(80,100) }}%;"></div>
          @endfor
          <div class="skeleton-bone sk-text" style="width: 45%; margin-top: 15px;"></div>
          @for($i = 0; $i < 5; $i++)
          <div class="skeleton-bone sk-text" style="width: {{ rand(75,100) }}%;"></div>
          @endfor
        </div>
      </div>
      <div class="col-md-3">
        <div class="skeleton-bone" style="width: 100%; height: 250px; margin-bottom: 20px;"></div>
        <div class="skeleton-bone sk-tab-header"></div>
        <div class="sk-sidebar-card" style="border-top: 0; border-radius: 0 0 4px 4px;">
          @for($i = 0; $i < 6; $i++)
          <div class="sk-sidebar-item">
            <div class="sk-sidebar-text">
              <div class="skeleton-bone sk-text" style="width: {{ rand(70,95) }}%;"></div>
            </div>
          </div>
          @endfor
        </div>
      </div>
    </div>
  </div>
  {{-- Mobile detail skeleton --}}
  <div class="container visible-xs" style="padding-top: 20px;">
    <div class="text-center">
      <div class="skeleton-bone sk-badge"></div>
      <div class="skeleton-bone sk-text-xl" style="width: 80%; margin: 0 auto 10px;"></div>
      <div class="skeleton-bone sk-text-lg" style="width: 60%; margin: 0 auto 10px;"></div>
      <div class="skeleton-bone sk-divider"></div>
      <div class="skeleton-bone sk-text-sm" style="width: 40%; margin: 10px auto;"></div>
      <div class="skeleton-bone sk-text-sm" style="width: 55%; margin: 0 auto 15px;"></div>
    </div>
    <div class="skeleton-bone sk-img" style="padding-bottom: 55%; margin-top: 15px;"></div>
    @for($i = 0; $i < 6; $i++)
    <div class="skeleton-bone sk-text" style="width: {{ rand(80,100) }}%;"></div>
    @endfor
  </div>
</div>
@endif

{{-- Category Page Skeleton --}}
@if(request()->routeIs('frontend.category'))
<div class="skeleton-wrapper" id="skeleton-category">
  <div class="container">
    {{-- Category title --}}
    <div class="skeleton-bone sk-text-xl" style="width: 200px; margin-bottom: 20px;"></div>
    <div class="row">
      <div class="col-md-9">
        {{-- Lead story --}}
        <div class="row">
          <div class="col-md-6">
            <div class="skeleton-bone sk-img" style="padding-bottom: 60%;"></div>
          </div>
          <div class="col-md-6">
            <div class="skeleton-bone sk-text-lg" style="width: 90%;"></div>
            <div class="skeleton-bone sk-text" style="width: 100%;"></div>
            <div class="skeleton-bone sk-text" style="width: 80%;"></div>
            <div class="skeleton-bone sk-text-sm" style="width: 40%; margin-top: 10px;"></div>
          </div>
        </div>
        {{-- Grid --}}
        <div class="row" style="margin-top: 20px;">
          @for($i = 0; $i < 6; $i++)
          <div class="col-md-4 col-xs-6">
            <div class="sk-card">
              <div class="skeleton-bone sk-img"></div>
              <div class="skeleton-bone sk-text" style="width: 90%;"></div>
              <div class="skeleton-bone sk-text-sm" style="width: 50%;"></div>
            </div>
          </div>
          @endfor
        </div>
      </div>
      <div class="col-md-3">
        <div class="skeleton-bone" style="width: 100%; height: 250px; margin-bottom: 20px;"></div>
        <div class="skeleton-bone sk-tab-header"></div>
        <div class="sk-sidebar-card" style="border-top: 0; border-radius: 0 0 4px 4px;">
          @for($i = 0; $i < 6; $i++)
          <div class="sk-sidebar-item">
            <div class="sk-sidebar-text">
              <div class="skeleton-bone sk-text" style="width: {{ rand(70,95) }}%;"></div>
            </div>
          </div>
          @endfor
        </div>
      </div>
    </div>
  </div>
</div>
@endif

{{-- Location News Skeleton --}}
@if(request()->routeIs('frontend.location.news'))
<div class="skeleton-wrapper" id="skeleton-location">
  <div class="container">
    <div class="skeleton-bone sk-text" style="width: 300px; margin-bottom: 20px;"></div>
    <div class="row">
      <div class="col-md-9">
        <div class="row">
          @for($i = 0; $i < 6; $i++)
          <div class="col-md-4 col-xs-6">
            <div class="sk-card">
              <div class="skeleton-bone sk-img"></div>
              <div class="skeleton-bone sk-text" style="width: 85%;"></div>
              <div class="skeleton-bone sk-text-sm" style="width: 50%;"></div>
            </div>
          </div>
          @endfor
        </div>
      </div>
      <div class="col-md-3">
        <div class="skeleton-bone sk-tab-header"></div>
        <div class="sk-sidebar-card" style="border-top: 0; border-radius: 0 0 4px 4px;">
          @for($i = 0; $i < 5; $i++)
          <div class="sk-sidebar-item">
            <div class="skeleton-bone" style="width: 60px; height: 45px; margin-right: 10px; flex-shrink: 0;"></div>
            <div class="sk-sidebar-text">
              <div class="skeleton-bone sk-text" style="width: {{ rand(70,95) }}%;"></div>
            </div>
          </div>
          @endfor
        </div>
      </div>
    </div>
  </div>
</div>
@endif

{{-- Latest / Archive Skeleton (9-col grid + 3-col sidebar) --}}
@if(request()->routeIs('frontend.latest') || request()->routeIs('frontend.archive'))
<div class="skeleton-wrapper" id="skeleton-latest">
  <div class="container">
    {{-- Page title --}}
    <div class="skeleton-bone sk-text-xl" style="width: 180px; margin-bottom: 15px;"></div>
    <div class="skeleton-bone sk-divider" style="width: 100%;"></div>
    @if(request()->routeIs('frontend.archive'))
    {{-- Search form skeleton --}}
    <div class="row" style="margin-bottom: 20px;">
      <div class="col-md-5"><div class="skeleton-bone" style="height: 38px;"></div></div>
      <div class="col-md-4"><div class="skeleton-bone" style="height: 38px;"></div></div>
      <div class="col-md-3"><div class="skeleton-bone" style="height: 38px;"></div></div>
    </div>
    @endif
    <div class="row">
      <div class="col-md-9">
        <div class="row">
          @for($i = 0; $i < 9; $i++)
          <div class="col-md-4 col-xs-12" style="margin-bottom: 20px;">
            <div class="sk-card">
              <div class="skeleton-bone sk-img"></div>
              <div class="skeleton-bone sk-text" style="width: 90%;"></div>
              <div class="skeleton-bone sk-text-sm" style="width: 55%;"></div>
            </div>
          </div>
          @endfor
        </div>
      </div>
      <div class="col-md-3 hidden-xs">
        <div class="skeleton-bone sk-tab-header"></div>
        <div class="sk-sidebar-card" style="border-top: 0; border-radius: 0 0 4px 4px;">
          @for($i = 0; $i < 6; $i++)
          <div class="sk-sidebar-item">
            <div class="sk-sidebar-text">
              <div class="skeleton-bone sk-text" style="width: {{ rand(70,95) }}%;"></div>
            </div>
          </div>
          @endfor
        </div>
      </div>
    </div>
  </div>
</div>
@endif

{{-- Videos / Photos Skeleton (9-col grid + 3-col sidebar) --}}
@if(request()->routeIs('frontend.videos') || request()->routeIs('frontend.photos'))
<div class="skeleton-wrapper" id="skeleton-media">
  <div class="container">
    {{-- Page title --}}
    <div class="skeleton-bone sk-text-xl" style="width: 140px; margin-bottom: 15px;"></div>
    <div class="skeleton-bone sk-divider" style="width: 100%;"></div>
    <div class="row">
      <div class="col-md-9">
        <div class="row">
          @for($i = 0; $i < 6; $i++)
          <div class="col-md-4 col-xs-6" style="margin-bottom: 20px;">
            <div class="sk-card">
              <div class="skeleton-bone sk-img" style="padding-bottom: {{ request()->routeIs('frontend.videos') ? '56%' : '75%' }};"></div>
              <div class="skeleton-bone sk-text" style="width: 85%;"></div>
              <div class="skeleton-bone sk-text-sm" style="width: 45%;"></div>
            </div>
          </div>
          @endfor
        </div>
      </div>
      <div class="col-md-3 hidden-xs">
        <div class="skeleton-bone sk-tab-header"></div>
        <div class="sk-sidebar-card" style="border-top: 0; border-radius: 0 0 4px 4px;">
          @for($i = 0; $i < 6; $i++)
          <div class="sk-sidebar-item">
            <div class="sk-sidebar-text">
              <div class="skeleton-bone sk-text" style="width: {{ rand(70,95) }}%;"></div>
            </div>
          </div>
          @endfor
        </div>
      </div>
    </div>
  </div>
</div>
@endif

{{-- Live TV Skeleton (full-width video embed) --}}
@if(request()->routeIs('frontend.live'))
<div class="skeleton-wrapper" id="skeleton-live">
  <div class="container">
    <div class="skeleton-bone sk-text-xl" style="width: 100px; margin-bottom: 15px;"></div>
    <div class="skeleton-bone sk-divider" style="width: 100%;"></div>
    <div class="skeleton-bone" style="width: 100%; padding-bottom: 56%; margin-bottom: 20px;"></div>
  </div>
</div>
@endif

{{-- Dynamic Page Skeleton (full-width text content) --}}
@if(request()->routeIs('dynamic.page'))
<div class="skeleton-wrapper" id="skeleton-page">
  <div class="container">
    <div class="skeleton-bone sk-text-xl" style="width: 200px; margin-bottom: 20px;"></div>
    <div class="skeleton-bone sk-divider" style="width: 100%;"></div>
    @for($i = 0; $i < 12; $i++)
    <div class="skeleton-bone sk-text" style="width: {{ rand(70,100) }}%;"></div>
    @endfor
    <div class="skeleton-bone sk-text" style="width: 45%; margin-top: 15px;"></div>
    @for($i = 0; $i < 6; $i++)
    <div class="skeleton-bone sk-text" style="width: {{ rand(75,100) }}%;"></div>
    @endfor
  </div>
</div>
@endif

{{-- Generic Skeleton (for any other page without a specific skeleton) --}}
@if(!request()->routeIs('frontend.index') && !request()->routeIs('frontend.postBySubcategory.details') && !request()->routeIs('frontend.category') && !request()->routeIs('frontend.location.news') && !request()->routeIs('frontend.latest') && !request()->routeIs('frontend.archive') && !request()->routeIs('frontend.videos') && !request()->routeIs('frontend.photos') && !request()->routeIs('frontend.live') && !request()->routeIs('dynamic.page'))
<div class="skeleton-wrapper" id="skeleton-generic">
  <div class="container">
    <div class="skeleton-bone sk-text-xl" style="width: 250px; margin-bottom: 25px;"></div>
    <div class="row">
      @for($i = 0; $i < 3; $i++)
      <div class="col-md-4">
        <div class="sk-card">
          <div class="skeleton-bone sk-img"></div>
          <div class="skeleton-bone sk-text" style="width: 85%;"></div>
          <div class="skeleton-bone sk-text-sm" style="width: 55%;"></div>
        </div>
      </div>
      @endfor
    </div>
  </div>
</div>
@endif

<script>
// Show skeleton for 0.3s then reveal content
setTimeout(function() {
  var skeletons = document.querySelectorAll('.skeleton-wrapper');
  var contents = document.querySelectorAll('.page-content-wrapper');
  skeletons.forEach(function(el) { el.classList.add('loaded'); });
  contents.forEach(function(el) { el.classList.add('loaded'); });
}, 300);
</script>
