@extends('layouts.front')
@section('meta')
<title>Live - {{ $gs->title ?? 'Channel 5 Bangla' }}</title>
<meta property="og:title" content="Live - {{ $gs->title ?? 'Channel 5 Bangla' }}" />
<meta property="og:image" content="{{asset('assets/images/'.$gs->og_baner)}}" />
@endsection
@section('contents')

<!-- main div -->
<div class="mainDiv">
<div class="bgWHite">
  <div class="container">
    <div class="row">
      <!-- header -->
      <div class="col-sm-12 col-md-12 marginB20 hidden-xs marginT10">
        <h1 class="desktopCategoryTitle"><span class="titleLeftDesign1"></span> <a href="{{ url('/live') }}"><strong>লাইভ টিভি</strong></a></h1>
      </div>
      <div class="col-sm-12 col-md-12 paddingLR20 xs-paddingL15 marginB10 visible-xs paddingT10">
        <h1 class="sectionTitle displayInline border0 margin0 marginB0"><span class="titleLeftDesign1"></span> <a href="{{ url('/live') }}"><strong>লাইভ টিভি</strong></a></h1>
      </div>

      <div class="col-sm-12 col-md-12">
        @if($gs->is_live_tv == 1)
        <div class="live-player-wrapper">
          <!-- Live badge -->
          <div class="live-player-header">
            <span class="live-badge"><i class="fa fa-circle"></i> LIVE</span>
            <span class="live-channel-name">{{ $gs->title ?? 'Channel 5 Bangla' }}</span>
          </div>
          <!-- Video embed frame -->
          <div class="live-video-frame">
            <div class="live-video-container">
              {!! $gs->live_tv !!}
            </div>
          </div>
          <!-- Bottom bar -->
          <div class="live-player-footer">
            <span class="live-footer-text"><i class="fa fa-tv"></i> সরাসরি সম্প্রচার</span>
          </div>
        </div>
        @else
        <div class="live-player-wrapper">
          <div class="live-player-header">
            <span class="live-badge live-badge-offline"><i class="fa fa-circle"></i> OFFLINE</span>
            <span class="live-channel-name">{{ $gs->title ?? 'Channel 5 Bangla' }}</span>
          </div>
          <div class="live-video-frame">
            <div class="live-offline-placeholder">
              <i class="fa fa-tv" style="font-size: 48px; opacity: 0.3; margin-bottom: 15px;"></i>
              <p><strong>লাইভ সম্প্রচার বর্তমানে বন্ধ আছে</strong></p>
              <p style="font-size: 13px; opacity: 0.7;">অনুগ্রহ করে পরবর্তী সম্প্রচারের জন্য অপেক্ষা করুন</p>
            </div>
          </div>
        </div>
        @endif
      </div>
    </div>
  </div>
</div>
</div>
<!-- main div end -->

<style>
.live-player-wrapper {
  margin-bottom: 30px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  background: #111;
}
.live-player-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
}
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: #e50914;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 3px;
  animation: live-pulse 2s ease-in-out infinite;
}
.live-badge-offline {
  background: #666;
  animation: none;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.live-badge i {
  font-size: 8px;
}
.live-channel-name {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.9;
}
.live-video-frame {
  position: relative;
  width: 100%;
  background: #000;
}
.live-video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.live-video-container iframe,
.live-video-container video,
.live-video-container embed,
.live-video-container object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
}
.live-offline-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: #fff;
  text-align: center;
}
.live-player-footer {
  padding: 8px 16px;
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
  border-top: 1px solid #333;
}
.live-footer-text {
  color: #aaa;
  font-size: 13px;
}
.live-footer-text i {
  margin-right: 6px;
  color: #9b090d;
}
@media (max-width: 768px) {
  .live-player-wrapper {
    margin-left: -15px;
    margin-right: -15px;
    border-radius: 0;
  }
  .live-player-header {
    padding: 8px 12px;
  }
  .live-channel-name {
    font-size: 13px;
  }
}
</style>

@endsection
