@extends('frontend.layouts.app')
@section('title', 'Aktivasyon Kodu Gir — Animexe Premium')
@push('styles')
<style>
#pg{background:#06060d;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:80px 20px 60px}
.act-card{
  width:100%;max-width:480px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);
  border-radius:24px;padding:44px 40px 40px;position:relative;overflow:hidden;
}
.act-card::before{
  content:'';position:absolute;top:-80px;left:50%;transform:translateX(-50%);
  width:280px;height:200px;border-radius:50%;
  background:radial-gradient(rgba(0,245,255,.1),transparent 70%);
  pointer-events:none;
}
.act-icon{
  width:64px;height:64px;border-radius:18px;margin:0 auto 20px;
  background:linear-gradient(135deg,rgba(0,245,255,.15),rgba(184,77,255,.12));
  border:1px solid rgba(0,245,255,.2);
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:#00f5ff;
  position:relative;z-index:1;
}
.act-title{font-size:1.4rem;font-weight:900;color:#fff;text-align:center;margin-bottom:6px;position:relative;z-index:1}
.act-sub{font-size:.85rem;color:rgba(255,255,255,.4);text-align:center;margin-bottom:32px;line-height:1.6;position:relative;z-index:1}
.act-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.4);margin-bottom:8px}
.act-input{
  width:100%;background:rgba(255,255,255,.06);border:1.5px solid rgba(0,245,255,.2);
  border-radius:14px;padding:16px 20px;color:#fff;font-size:1.1rem;font-weight:800;
  letter-spacing:.18em;text-align:center;text-transform:uppercase;outline:none;
  font-family:inherit;transition:border-color .2s,box-shadow .2s;box-sizing:border-box;
}
.act-input::placeholder{letter-spacing:.05em;font-weight:400;text-transform:none;font-size:.9rem;color:rgba(255,255,255,.25)}
.act-input:focus{border-color:#00f5ff;box-shadow:0 0 0 4px rgba(0,245,255,.1)}
.act-input.is-invalid{border-color:#ff2d7d!important;box-shadow:0 0 0 4px rgba(255,45,125,.1)!important}
.act-error{
  display:flex;align-items:center;gap:7px;
  padding:11px 14px;border-radius:10px;margin-top:10px;
  background:rgba(255,45,125,.08);border:1px solid rgba(255,45,125,.2);
  font-size:.82rem;color:#ff2d7d;font-weight:600;
}
.act-btn{
  width:100%;padding:15px;border-radius:14px;border:none;cursor:pointer;font-family:inherit;
  font-size:.95rem;font-weight:800;letter-spacing:.03em;margin-top:18px;
  background:linear-gradient(135deg,#00f5ff 0%,#0080ff 60%,#b84dff 100%);
  color:#06060d;box-shadow:0 0 30px rgba(0,245,255,.2),0 6px 20px rgba(0,0,0,.4);
  transition:transform .15s,box-shadow .15s;
}
.act-btn:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(0,245,255,.35),0 8px 28px rgba(0,0,0,.5)}
.act-divider{display:flex;align-items:center;gap:12px;margin:22px 0;color:rgba(255,255,255,.18);font-size:.75rem}
.act-divider::before,.act-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.08)}
.act-back{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);color:rgba(255,255,255,.5);
  font-size:.84rem;font-weight:700;text-decoration:none;transition:all .15s;
}
.act-back:hover{border-color:rgba(255,255,255,.2);color:#fff;background:rgba(255,255,255,.08)}
.act-hint{
  margin-top:20px;padding:12px 16px;border-radius:10px;
  background:rgba(0,245,255,.04);border:1px solid rgba(0,245,255,.1);
  font-size:.76rem;color:rgba(255,255,255,.35);line-height:1.55;text-align:center;
}
.act-hint strong{color:rgba(0,245,255,.7)}
</style>
@endpush

@section('content')
<div id="pg">
  <div class="act-card">
    <div class="act-icon"><i class="bi bi-key-fill"></i></div>
    <h1 class="act-title">Aktivasyon Kodu Gir</h1>
    <p class="act-sub">Satın alma sonrası aldığın kodu girerek Premium üyeliğini hemen aktifleştir.</p>

    @guest
    <div style="text-align:center;padding:8px 0 16px">
      <a href="{{ route('frontend.login') }}?next={{ urlencode(route('premium.activate')) }}"
         style="display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:12px;background:linear-gradient(135deg,#00f5ff,#b84dff);color:#06060d;font-weight:800;font-size:.9rem;text-decoration:none">
        <i class="bi bi-box-arrow-in-right"></i> Giriş Yap
      </a>
      <div style="margin-top:12px;font-size:.78rem;color:rgba(255,255,255,.3)">
        Hesabın yoksa <a href="{{ route('frontend.register') }}" style="color:#00f5ff;font-weight:700">kayıt ol</a>
      </div>
    </div>
    @else
    <form method="POST" action="{{ route('premium.activate.redeem') }}">
      @csrf
      <div class="act-label">Aktivasyon Kodu</div>
      <input type="text" name="code" id="act-inp"
             class="act-input {{ $errors->has('code') ? 'is-invalid' : '' }}"
             placeholder="XXXX-XXXX-XXXX"
             value="{{ old('code') }}"
             maxlength="32" autocomplete="off" autocapitalize="characters" spellcheck="false"
             autofocus>
      @if($errors->has('code'))
      <div class="act-error"><i class="bi bi-exclamation-circle-fill"></i> {{ $errors->first('code') }}</div>
      @endif
      <button type="submit" class="act-btn">
        <i class="bi bi-lightning-charge-fill me-1"></i> Aktifleştir
      </button>
    </form>

    <div class="act-hint">
      Kod formatı: <strong>XXXX-XXXX-XXXX</strong> (büyük harf + tire)<br>
      Kodu doğru girdiğinden emin ol. Büyük/küçük harf fark etmez.
    </div>
    @endguest

    <div class="act-divider">veya</div>
    <a href="{{ route('premium.plans') }}" class="act-back">
      <i class="bi bi-arrow-left"></i> Premium Planlarına Dön
    </a>
  </div>
</div>

@auth
<script>
(function(){
  const inp = document.getElementById('act-inp');
  if(!inp) return;
  inp.addEventListener('input', function(){
    let v = this.value.replace(/[^A-Za-z0-9]/g,'').toUpperCase();
    const parts = v.match(/.{1,4}/g) || [];
    this.value = parts.join('-').slice(0, 14);
  });
})();
</script>
@endauth
@endsection