@extends('frontend.layouts.app')
@section('title', $plan->name . ' — Ödeme | Animexe')

@push('styles')
<style>
.ck-wrap{max-width:860px;margin:40px auto;padding:0 16px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:640px){.ck-wrap{grid-template-columns:1fr}}
.ck-plan{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:28px}
.ck-plan-name{font-size:1.4rem;font-weight:800;color:#00f5ff;margin-bottom:6px}
.ck-plan-price{font-size:2.4rem;font-weight:900;margin:12px 0 4px}
.ck-plan-dur{color:rgba(255,255,255,.45);font-size:.85rem;margin-bottom:20px}
.ck-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.ck-features li{color:rgba(255,255,255,.7);font-size:.88rem;display:flex;align-items:center;gap:8px}
.ck-features li i{color:#00f5ff;font-size:.9rem}
.ck-form{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:28px}
.ck-form h2{font-size:1rem;font-weight:700;margin-bottom:20px;color:rgba(255,255,255,.85)}
.ck-field{margin-bottom:16px}
.ck-field label{display:block;font-size:.78rem;color:rgba(255,255,255,.5);margin-bottom:5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.ck-field input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:10px 14px;color:#fff;font-size:.9rem;outline:none;transition:border-color .15s;box-sizing:border-box}
.ck-field input:focus{border-color:rgba(0,245,255,.4)}
.ck-field input::placeholder{color:rgba(255,255,255,.25)}
.ck-field small{display:block;font-size:.73rem;color:rgba(255,255,255,.3);margin-top:4px}
.ck-submit{width:100%;padding:13px;background:linear-gradient(135deg,#00f5ff,#b84dff);border:none;border-radius:10px;color:#fff;font-weight:800;font-size:1rem;cursor:pointer;margin-top:6px;transition:opacity .15s}
.ck-submit:hover{opacity:.9}
.ck-secure{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:14px;font-size:.75rem;color:rgba(255,255,255,.3)}
.ck-back{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.4);font-size:.82rem;margin-bottom:24px;text-decoration:none}
.ck-back:hover{color:rgba(255,255,255,.7)}
.ck-err{background:rgba(255,60,60,.12);border:1px solid rgba(255,60,60,.3);border-radius:8px;padding:10px 14px;color:#ff6b6b;font-size:.85rem;margin-bottom:16px}
</style>
@endpush

@section('content')
<div class="ck-wrap">
    <div>
        <a href="{{ route('premium.plans') }}" class="ck-back"><i class="bi bi-arrow-left"></i> Planlara dön</a>
        <div class="ck-plan">
            <div class="ck-plan-name">{{ $plan->name }}</div>
            <div class="ck-plan-price"><span style="font-size:1.2rem;font-weight:400">₺</span>{{ number_format($plan->price, 0) }}</div>
            <div class="ck-plan-dur">{{ $plan->duration_days }} günlük premium üyelik</div>
            @if(($plan->trial_days ?? 0) > 0)
            <div style="display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;background:rgba(0,245,255,.1);border:1px solid rgba(0,245,255,.25);color:#00f5ff;font-size:.75rem;font-weight:700;margin-bottom:16px">
                <i class="bi bi-gift-fill"></i> İlk {{ $plan->trial_days }} gün ücretsiz
            </div>
            @endif
            @if(!empty($plan->features))
            <ul class="ck-features">
                @foreach($plan->features as $feat)
                <li><i class="bi bi-check2-circle"></i> {{ $feat }}</li>
                @endforeach
            </ul>
            @endif
        </div>
    </div>

    <div class="ck-form">
        <h2><i class="bi bi-person-fill me-2"></i>Fatura Bilgileri</h2>

        @if($errors->has('general'))
        <div class="ck-err"><i class="bi bi-exclamation-circle me-1"></i>{{ $errors->first('general') }}</div>
        @endif

        <form method="POST" action="{{ route('checkout.initialize', $plan) }}">
            @csrf
            <div class="ck-field">
                <label>Ad Soyad *</label>
                <input type="text" name="full_name" value="{{ old('full_name', auth()->user()->name) }}" placeholder="Adınız Soyadınız" required>
                @error('full_name')<span style="color:#ff6b6b;font-size:.75rem">{{ $message }}</span>@enderror
            </div>
            <div class="ck-field">
                <label>E-posta</label>
                <input type="text" value="{{ auth()->user()->email }}" disabled style="opacity:.5;cursor:not-allowed">
            </div>
            <div class="ck-field">
                <label>Telefon *</label>
                <input type="tel" name="phone" value="{{ old('phone') }}" placeholder="05XX XXX XX XX" required>
                @error('phone')<span style="color:#ff6b6b;font-size:.75rem">{{ $message }}</span>@enderror
            </div>
            <div class="ck-field">
                <label>İl *</label>
                <input type="text" name="city" value="{{ old('city') }}" placeholder="İstanbul" required>
                @error('city')<span style="color:#ff6b6b;font-size:.75rem">{{ $message }}</span>@enderror
            </div>
            <div class="ck-field">
                <label>Adres *</label>
                <input type="text" name="address" value="{{ old('address') }}" placeholder="Mahalle, sokak, bina no..." required>
                @error('address')<span style="color:#ff6b6b;font-size:.75rem">{{ $message }}</span>@enderror
            </div>
            <div class="ck-field">
                <label>TC Kimlik No <span style="color:rgba(255,255,255,.3)">(isteğe bağlı)</span></label>
                <input type="text" name="identity_no" value="{{ old('identity_no') }}" placeholder="11 haneli TC no" maxlength="11" inputmode="numeric">
                <small>iyzico güvenlik doğrulaması için istenir</small>
                @error('identity_no')<span style="color:#ff6b6b;font-size:.75rem">{{ $message }}</span>@enderror
            </div>
            <button type="submit" class="ck-submit">
                <i class="bi bi-credit-card-fill me-2"></i>Ödemeye Geç — ₺{{ number_format($plan->price, 0) }}
            </button>
        </form>
        <div class="ck-secure">
            <i class="bi bi-shield-check" style="color:#00f5ff"></i>
            iyzico altyapısıyla güvenli ödeme
        </div>
    </div>
</div>
@endsection