@extends('frontend.layouts.app')
@section('title', 'Zaman Kapsüllerim | Animexe')
@push('styles')
<style>
.cap-hero{padding-top:calc(var(--nav-h) + 40px);padding-bottom:32px;text-align:center;background:radial-gradient(ellipse at 50% 0%,rgba(100,80,255,.12) 0%,transparent 70%)}
.cap-hero h1{font-size:2rem;font-weight:900;margin-bottom:8px}
.cap-hero h1 span{color:#a78bfa}
.cap-hero p{color:rgba(255,255,255,.4);font-size:.9rem}
.cap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding:0 0 60px}
.cap-card{border-radius:16px;padding:20px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.cap-card.locked{background:linear-gradient(135deg,rgba(20,18,40,.9),rgba(10,8,22,.9))}
.cap-card.unlocked{background:linear-gradient(135deg,rgba(100,80,255,.12),rgba(60,40,180,.08));border-color:rgba(167,139,250,.25)}
.cap-card.opened{background:linear-gradient(135deg,rgba(0,200,100,.06),rgba(0,160,80,.04));border-color:rgba(0,200,100,.2)}
.cap-lock-icon{font-size:2rem;margin-bottom:10px;display:block}
.cap-anime{font-size:.72rem;font-weight:700;color:rgba(167,139,250,.8);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
.cap-date{font-size:.78rem;color:rgba(255,255,255,.35);margin-bottom:14px}
.cap-locked-msg{font-size:.82rem;color:rgba(255,255,255,.25);text-align:center;padding:16px 0}
.cap-message{font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.8);background:rgba(255,255,255,.04);border-radius:10px;padding:14px;border-left:3px solid #a78bfa;font-style:italic}
.cap-open-btn{width:100%;margin-top:14px;padding:10px;border-radius:10px;border:none;background:rgba(167,139,250,.2);color:#a78bfa;font-weight:700;font-size:.88rem;cursor:pointer;font-family:inherit;transition:background .15s}
.cap-open-btn:hover{background:rgba(167,139,250,.35)}
.cap-tag{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.65rem;font-weight:700;margin-bottom:10px}
.cap-tag.locked{background:rgba(255,255,255,.06);color:rgba(255,255,255,.3)}
.cap-tag.unlocked{background:rgba(167,139,250,.12);color:#a78bfa}
.cap-tag.opened{background:rgba(0,200,100,.1);color:#00c864}

.cap-countdown{font-size:.78rem;color:rgba(255,255,255,.3);margin-top:8px;text-align:center}
</style>
@endpush
@section('content')
<div style="max-width:1100px;margin:0 auto;padding:0 20px">

  <div class="cap-hero">
    <h1>⏳ Zaman <span>Kapsüllerim</span></h1>
    <p>Geçmiş benliğinden gelen mesajlar.</p>
  </div>

  @if($capsules->isEmpty())
  <div style="text-align:center;padding:80px 20px;color:rgba(255,255,255,.25)">
    <i class="bi bi-hourglass" style="font-size:3rem;display:block;margin-bottom:16px"></i>
    Henüz kapsül oluşturmadın.<br>
    <small style="font-size:.8rem">Bir anime sayfasından ilk kez izlerken kapsül bırakabilirsin.</small>
  </div>
  @else
  <div class="cap-grid">
    @foreach($capsules as $cap)
    <div class="cap-card {{ $cap['opened'] ? 'opened' : ($cap['unlocked'] ? 'unlocked' : 'locked') }}" id="cap-{{ $cap['id'] }}">
      <span class="cap-lock-icon">{{ $cap['opened'] ? '📭' : ($cap['unlocked'] ? '🔓' : '🔒') }}</span>
      <span class="cap-tag {{ $cap['opened'] ? 'opened' : ($cap['unlocked'] ? 'unlocked' : 'locked') }}">
        {{ $cap['opened'] ? 'Açıldı' : ($cap['unlocked'] ? 'Açılabilir' : 'Kilitli') }}
      </span>
      <div class="cap-anime">
        <a href="{{ $cap['anime_url'] }}" style="color:inherit;text-decoration:none">{{ $cap['anime'] }}</a>
      </div>
      <div class="cap-date">
        <i class="bi bi-calendar3"></i>
        Oluşturuldu: {{ $cap['created_at'] }} · Açılış: {{ $cap['unlock_at'] }}
      </div>

      @if($cap['opened'] || $cap['unlocked'])
        @if($cap['message'])
        <div class="cap-message">{{ $cap['message'] }}</div>
        @else
        <button class="cap-open-btn" onclick="openCapsule({{ $cap['id'] }}, this)">
          <i class="bi bi-envelope-open"></i> Kapsülü Aç
        </button>
        @endif
      @else
      <div class="cap-locked-msg">
        <i class="bi bi-lock"></i><br>
        Bu kapsül {{ $cap['unlock_at'] }} tarihinde açılacak
      </div>
      @endif
    </div>
    @endforeach
  </div>
  @endif

</div>
@endsection
@push('scripts')
<script>
const CSRF = document.querySelector('meta[name="csrf-token"]')?.content ?? '';

async function openCapsule(id, btn) {
    btn.disabled = true;
    btn.textContent = 'Açılıyor...';
    const r = await fetch(`/kapsul/${id}/ac`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
        body: JSON.stringify({}),
    });
    const d = await r.json();
    if (d.ok) {
        const card = document.getElementById('cap-' + id);
        btn.remove();
        const msg = document.createElement('div');
        msg.className = 'cap-message';
        msg.textContent = d.message;
        card.appendChild(msg);
        card.classList.remove('unlocked');
        card.classList.add('opened');
        card.querySelector('.cap-lock-icon').textContent = '📭';
        const tag = card.querySelector('.cap-tag');
        tag.textContent = 'Açıldı';
        tag.className = 'cap-tag opened';
    } else {
        btn.disabled = false;
        btn.textContent = 'Kapsülü Aç';
        if (window.showToast) showToast(d.error || 'Hata oluştu.', 'error');
        else alert(d.error || 'Hata oluştu.');
    }
}
</script>
@endpush