@extends('layout.dashboard')

@section('content')
@php
  $gs   = \App\Models\GeneralSetting::first();
  $p    = '#2563EB';
  $bg   = '#F0F9FF';

  $banner        = $gs->banner ?? null;
  $facebookLink  = $gs->facebook_link  ?? '#';
  $youtubeLink   = $gs->youtube_link   ?? '#';
  $telegramLink  = $gs->telegram_link  ?? '#';
  $whatsappLink  = $gs->whatsapp_link  ?? '#';
  $projectTelegramLinks = $projectTelegramLinks ?? [];

  $u = Auth::user();
  $adminMsg = $u ? trim($u->admin_message ?? '') : '';

  $pendingActivation = false;
  if($u && (int)($u->is_active ?? 0) === 0){
    $pendingActivation = \App\Models\ActivationRequest::where('user_id', $u->id)
      ->where('status', 'pending')
      ->exists();
  }
@endphp

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>

<style>
:root{
  --p: {{ $p }};
  --bg: {{ $bg }};
}
body{background:var(--bg);font-family:'Hind Siliguri',sans-serif;}

.main-shell{padding:8px 6px 78px;max-width:600px;margin:0 auto;}

.blue-ring{
  border:2px solid rgba(37,99,235,.55);
  box-shadow:0 0 0 3px rgba(37,99,235,.10);
}

.hero-banner{border-radius:22px;overflow:hidden;margin-bottom:14px;background:#fff;}
.cyber-card{background:#fff;border-radius:26px;margin-bottom:14px;overflow:hidden;}

.card-head{
  padding:14px 16px;display:flex;align-items:center;gap:12px;
  border-bottom:1px solid #f1f5f9;
}
.card-head i{
  font-size:18px;color:var(--p);
  background:#eff6ff;width:38px;height:38px;
  display:grid;place-items:center;border-radius:12px;
}
.card-head h2{font-size:16px;font-weight:800;margin:0;}

.social-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  padding:16px 12px;
}
.social-item{text-decoration:none;text-align:center;}
.icon-circle{
  width:52px;height:52px;margin:0 auto 7px;
  border-radius:16px;display:grid;place-items:center;
  font-size:22px;background:#fff;
}
.social-name{font-size:11px;font-weight:800;color:#475569;line-height:1.1;}

/* Slim look for "আমাদের কমিউনিটি" card only */
.community-card{
  border-radius:20px;
}
.community-card .card-head{
  padding:10px 12px;
  gap:8px;
}
.community-card .card-head i{
  width:30px;
  height:30px;
  font-size:14px;
  border-radius:10px;
}
.community-card .card-head h2{
  font-size:14px;
}
.community-card .social-grid{
  gap:5px;
  padding:10px 8px 12px;
}
.community-card .icon-circle{
  width:48px;
  height:48px;
  margin:0 auto 4px;
  border-radius:14px;
  font-size:21px;
}
.community-card .social-name{
  font-size:10px;
}

.project-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  padding:16px 12px;
}
.project-item{
  text-align:center;
}
.project-box{
  text-decoration:none;
  text-align:center;
  padding:8px 4px;
  display:block;
}
.project-icon-wrap{
  width:56px;height:56px;margin:0 auto 8px;
  border-radius:18px;display:grid;place-items:center;
  font-size:24px;background:#fff;
}
.project-icon-wrap i{color:var(--p);}
.project-title{
  font-size:11.5px;
  font-weight:800;
  color:#334155;
  line-height:1.15;
  word-break:break-word;
}

.referral-box{padding:16px 14px 12px;}
.ref-link-field{
  background:#fff;border-radius:14px;padding:12px;
  font-size:12px;font-weight:800;color:var(--p);
  text-align:center;margin-bottom:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ref-btns{display:flex;gap:12px;justify-content:center;}
.btn-action{
  height:50px;width:50px;border-radius:16px;
  border:none;color:#fff;font-size:20px;
  display:flex;align-items:center;justify-content:center;
}
.btn-copy{background:#1D4ED8;}
.btn-share{background:#2563EB;}

.notice-card{
  background:#121a2b;
  border-radius:22px;
  padding:14px 16px;
  margin-bottom:14px;
  border:2px solid #facc15;
  box-shadow:0 12px 26px rgba(2,6,23,.25);
}
.notice-row{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}
.notice-content{
  flex:1;
  min-width:200px;
  text-align:center;
}
.notice-title{
  font-weight:900;
  color:#facc15;
  font-size:15px;
  margin:0;
  letter-spacing:.2px;
}
.notice-text{
  margin:6px 0 0;
  color:#e2e8f0;
  font-weight:700;
  font-size:12.5px;
  line-height:1.45;
}
.notice-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:12px;
  background:#facc15;
  color:#0b1220;
  text-decoration:none;
  font-weight:900;
  border:2px solid rgba(250,204,21,.65);
  box-shadow:0 10px 18px rgba(250,204,21,.18);
  min-width:140px;
  white-space:nowrap;
}
.notice-btn:active{transform:scale(.99);}
@media (max-width: 520px){
  .notice-row{flex-direction:column;align-items:stretch;}
  .notice-btn{width:100%;justify-content:center;}
}

.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.45);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.modal-card{
  background:#fff;
  width:100%;
  max-width:360px;
  border-radius:22px;
  padding:22px;
  text-align:center;
  position:relative;
}
.modal-close{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(37,99,235,.25);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.modal-close i{color:var(--p);font-size:16px;}
.modal-btn{
  background:var(--p);
  color:#fff;
  border:none;
  padding:12px;
  width:100%;
  border-radius:12px;
  font-weight:800;
  margin-top:14px;
}

@media (max-width:420px){
  .main-shell{padding:8px 6px 74px;max-width:600px;}
  .social-grid{gap:8px;padding:14px 10px;}
  .project-grid{gap:8px;padding:14px 10px;}
  .icon-circle{width:48px;height:48px;border-radius:15px;font-size:20px;margin-bottom:6px;}
  .social-name{font-size:10.5px;}
  .project-icon-wrap{width:52px;height:52px;border-radius:16px;font-size:22px;margin-bottom:7px;}
  .project-title{font-size:10.8px;}

  .community-card .card-head{padding:8px 10px;gap:6px;}
  .community-card .card-head i{width:24px;height:24px;font-size:12px;border-radius:8px;}
  .community-card .card-head h2{font-size:12px;}
  .community-card .social-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
    padding:8px 5px 9px;
  }
  .community-card .icon-circle{
    width:38px;height:38px;border-radius:11px;font-size:17px;margin:0 auto 2px;
  }
  .community-card .social-name{font-size:8.5px;line-height:1;white-space:nowrap;}
}
@media (max-width:360px){
  .social-grid{gap:7px;}
  .project-grid{gap:7px;}
  .icon-circle{width:46px;height:46px;font-size:19px;}
  .project-icon-wrap{width:50px;height:50px;font-size:21px;}
  .project-title{font-size:10.5px;}
}
@media (max-width:380px){
  .social-grid,.project-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .card-head h2{font-size:14px;}
  .community-card .social-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}
</style>

<div class="main-shell">

  @if(!empty($banner))
    <div class="hero-banner blue-ring">
      <img src="{{ asset(ltrim($banner, '/')) }}" style="width:100%;">
    </div>
  @endif

  <div class="cyber-card blue-ring community-card">
    <div class="card-head">
      <i class="fas fa-users"></i>
      <h2>আমাদের কমিউনিটি</h2>
    </div>
    <div class="social-grid">
      <a href="{{ $facebookLink }}" class="social-item">
        <div class="icon-circle blue-ring"><i class="fab fa-facebook-f"></i></div>
        <div class="social-name">ফেসবুক</div>
      </a>
      <a href="{{ $youtubeLink }}" class="social-item">
        <div class="icon-circle blue-ring"><i class="fab fa-youtube"></i></div>
        <div class="social-name">ইউটিউব</div>
      </a>
      <a href="{{ $telegramLink }}" class="social-item">
        <div class="icon-circle blue-ring"><i class="fab fa-telegram-plane"></i></div>
        <div class="social-name">টেলিগ্রাম</div>
      </a>
      <a href="{{ $whatsappLink }}" class="social-item">
        <div class="icon-circle blue-ring"><i class="fab fa-whatsapp"></i></div>
        <div class="social-name">হোয়াটসঅ্যাপ</div>
      </a>
    </div>
  </div>

  @if($u && (int)($u->is_active ?? 0) === 0)
    <div class="notice-card blue-ring">
      <div class="notice-row">
        <div class="notice-content">
          @if($pendingActivation)
            <div class="notice-title">আপনার এক্টিভেশন রিকোয়েস্ট গ্রহণ করা হয়েছে</div>
            <div class="notice-text">অনুগ্রহ করে অনুমোদনের জন্য অপেক্ষা করুন।</div>
          @else
            <div class="notice-title">একাউন্ট ভেরিফাই করুন!</div>
            <div class="notice-text">কাজ শুরু করতে ভেরিফাই প্রয়োজন।</div>
          @endif
        </div>
        @if(!$pendingActivation)
          <a class="notice-btn" href="{{ route('activation.form') }}">VERIFY NOW</a>
        @endif
      </div>
    </div>
  @endif

  <div class="cyber-card blue-ring">
    <div class="card-head">
      <i class="fas fa-layer-group"></i>
      <h2>অফিসিয়াল প্রজেক্টসমূহ</h2>
    </div>

    <div class="project-grid">
      @foreach($projects as $p)
        @php
          $state = 'open'; $t = ''; $m = ''; $tg = ''; $cta = '';

          $userRef = strtolower(trim((string)($u->referral_code ?? '')));
          $isBlockedReferral = $userRef !== '' && in_array($userRef, $p->blockedRefArray(), true);

          if(!$p->is_active){
            $state = 'popup';
            $t = $p->off_popup_title;
            $m = $p->off_popup_message;
            $tg = trim((string) ($projectTelegramLinks[$p->id] ?? ''));
            if($tg === ''){
              $tg = trim((string) $telegramLink);
            }
            if($tg === '#'){
              $tg = '';
            }
          } elseif($isBlockedReferral){
            $state = 'popup';
            $t = $p->blocked_popup_title ?: 'Access restricted';
            $m = $p->blocked_popup_message ?: 'আপনার রেফার কোডের জন্য এই প্রজেক্টটি সীমাবদ্ধ।';
          }
        @endphp

        <div class="project-item">
          <a href="{{ $state=='open' ? $p->link : 'javascript:void(0)' }}"
             class="project-box"
             onclick="if('{{ $state }}'=='popup') showNotice(@json($t), @json($m), @json($tg), @json($cta))">
            <div class="project-icon-wrap blue-ring">
              <i class="{{ $p->icon }}"></i>
            </div>
            <div class="project-title">{{ $p->title }}</div>
          </a>
        </div>
      @endforeach
    </div>
  </div>

  @if($u && $u->referral_code)
  <div class="cyber-card blue-ring">
    <div class="card-head">
      <i class="fas fa-gift"></i>
      <h2>রেফার করে আয় করুন</h2>
    </div>

    <div class="referral-box">
      <div class="ref-link-field blue-ring" id="refLink">
        {{ url('/register?ref=' . $u->referral_code) }}
      </div>
      <div class="ref-btns">
        <button class="btn-action btn-copy" onclick="copyRef()" type="button">
          <i class="fas fa-copy"></i>
        </button>
        <button class="btn-action btn-share" onclick="shareRef()" type="button">
          <i class="fas fa-share-nodes"></i>
        </button>
      </div>
    </div>
  </div>
  @endif

</div>

<div id="noticeModal" class="modal-overlay" style="display:none;">
  <div class="modal-card blue-ring">
    <button class="modal-close" type="button" onclick="closeNotice()"><i class="fa-solid fa-xmark"></i></button>
    <h3 id="noticeTitle" style="font-weight:900;"></h3>
    <p id="noticeMsg" style="margin-top:10px;color:#475569;"></p>
    <a id="noticeTelegramBtn" class="modal-btn" target="_blank" rel="noopener"
       style="display:none;background:#0284c7;">
      <i id="noticeActionIcon" class="fa-brands fa-telegram me-1"></i>
      <span id="noticeActionText">Telegram Update</span>
    </a>
    <button class="modal-btn" onclick="closeNotice()">ঠিক আছে</button>
  </div>
</div>

@if(!empty($adminMsg))
<div id="adminMsgModal" class="modal-overlay">
  <div class="modal-card blue-ring">
    <button class="modal-close" type="button" onclick="closeAdminMsg(true)"><i class="fa-solid fa-xmark"></i></button>
    <h3 style="font-weight:900;">এডমিন মেসেজ</h3>
    <p style="margin-top:10px;color:#475569;white-space:pre-line;">{{ $adminMsg }}</p>

    <form method="POST" action="{{ route('user.dismissMessage') }}" class="mt-3">
      @csrf
      @method('DELETE')
      <button class="modal-btn" type="submit">বুঝেছি</button>
    </form>
  </div>
</div>
@endif

<script>
function showNotice(title,msg,telegramUrl,actionLabel){
  document.getElementById('noticeTitle').innerText = title || 'সতর্কবার্তা';
  document.getElementById('noticeMsg').innerText = msg || 'এই মুহূর্তে উপলব্ধ নয়';
  const tgBtn = document.getElementById('noticeTelegramBtn');
  const actionText = document.getElementById('noticeActionText');
  const actionIcon = document.getElementById('noticeActionIcon');
  const link = (telegramUrl || '').trim();
  const label = (actionLabel || '').trim();
  if(tgBtn){
    if(link && link !== '#'){
      tgBtn.href = link;
      tgBtn.style.display = 'inline-flex';
      tgBtn.style.justifyContent = 'center';
      tgBtn.style.alignItems = 'center';
      if(actionText){
        actionText.innerText = label !== '' ? label : 'Telegram Update';
      }
      if(actionIcon){
        if(label !== ''){
          actionIcon.className = 'fa-solid fa-circle-check me-1';
          tgBtn.style.background = '#2563eb';
        }else{
          actionIcon.className = 'fa-brands fa-telegram me-1';
          tgBtn.style.background = '#0284c7';
        }
      }
    }else{
      tgBtn.removeAttribute('href');
      tgBtn.style.display = 'none';
    }
  }
  document.getElementById('noticeModal').style.display='flex';
}
function closeNotice(){
  document.getElementById('noticeModal').style.display='none';
}
function closeAdminMsg(justClose){
  const m=document.getElementById('adminMsgModal');
  if(m) m.style.display='none';
}
function copyRef(){
  const link=document.getElementById('refLink')?.innerText?.trim();
  if(!link)return;
  navigator.clipboard.writeText(link);
  alert('রেফার লিংক কপি হয়েছে!');
}
function shareRef(){
  const link=document.getElementById('refLink')?.innerText?.trim();
  if(!link)return;
  if(navigator.share){
    navigator.share({title:'আমাদের সাথে যোগ দিন',url:link});
  }else{copyRef();}
}
</script>

@endsection
