@extends('admin.layouts.app')
@section('title', 'Plan Ekle')
@section('page-title', 'Plan Ekle')

@push('styles')
<style>
.perk-label {
    display:flex; align-items:flex-start; gap:10px;
    padding:10px 12px; border-radius:var(--radius-sm);
    border:1px solid var(--border);
    background:var(--surface2);
    cursor:pointer; transition:border-color .12s, background .12s;
}
.perk-label:hover { border-color:var(--border2); background:rgba(255,255,255,.04); }
.perk-label:has(input:checked) { border-color:var(--accent); background:var(--accent-dim); }
.perk-category { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--accent-lt); margin-bottom:10px; }
</style>
@endpush

@section('content')

<div class="mb-4">
    <a href="{{ route('admin.plans.index') }}" class="btn btn-secondary btn-sm">
        <i class="bi bi-arrow-left"></i> Planlara Dön
    </a>
</div>

<div class="row justify-content-center">
<div class="col-xl-8 col-lg-9">
    <form method="POST" action="{{ route('admin.plans.store') }}">
        @csrf

        {{-- Temel --}}
        <div class="card mb-3">
            <div class="card-header">
                <i class="bi bi-star" style="color:var(--warning)"></i>
                <h6>Plan Bilgileri</h6>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">Plan Adı <span style="color:var(--danger)">*</span></label>
                    <input type="text" name="name" class="form-control" value="{{ old('name') }}" placeholder="Aylık Premium" required>
                </div>
                <div class="mb-4">
                    <label class="form-label">Açıklama</label>
                    <textarea name="description" class="form-control" rows="2" placeholder="Plan hakkında kısa açıklama...">{{ old('description') }}</textarea>
                </div>
                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">Fiyat (₺) <span style="color:var(--danger)">*</span></label>
                        <input type="number" name="price" class="form-control" step="0.01" value="{{ old('price','0') }}" required>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Süre (gün) <span style="color:var(--danger)">*</span></label>
                        <input type="number" name="duration_days" class="form-control" value="{{ old('duration_days',30) }}" required>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Deneme Süresi (gün)</label>
                        <input type="number" name="trial_days" class="form-control" value="{{ old('trial_days',0) }}" min="0">
                        <div class="form-text">0 = deneme yok</div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Sıralama</label>
                        <input type="number" name="sort_order" class="form-control" value="{{ old('sort_order',0) }}">
                    </div>
                </div>
                <hr style="border-color:rgba(255,255,255,.07);margin:18px 0">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Satın Alma Linki</label>
                        <input type="url" name="purchase_link" class="form-control" placeholder="https://..." value="{{ old('purchase_link') }}">
                        <div class="form-text">Kullanıcı "Satın Al" butonuna tıklayınca buraya yönlendirilir.</div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Rozet Etiketi</label>
                        <input type="text" name="badge_label" class="form-control" placeholder="EN POPÜLER" value="{{ old('badge_label') }}" maxlength="32">
                        <div class="form-text">Plan kartının üstüne çıkar. Boş = rozet yok.</div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Vurgu Rengi</label>
                        <input type="text" name="accent_color" class="form-control" placeholder="cyan / pink / gold" value="{{ old('accent_color') }}" maxlength="16">
                        <div class="form-text">cyan, pink veya gold</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Özellikler --}}
        <div class="card mb-3">
            <div class="card-header">
                <i class="bi bi-list-check" style="color:var(--success)"></i>
                <h6>Görünür Özellikler</h6>
                <span style="font-size:12px;color:var(--text2)">— Premium sayfasında listeler</span>
            </div>
            <div class="card-body">
                <div id="features-wrap" class="d-flex flex-column gap-2">
                    <div class="input-group">
                        <input type="text" name="features[]" class="form-control" placeholder="Reklamsız izleme">
                        <button type="button" class="btn btn-success btn-sm" onclick="addFeature()"><i class="bi bi-plus-lg"></i></button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Perkler --}}
        <div class="card mb-3">
            <div class="card-header">
                <i class="bi bi-key" style="color:var(--accent-lt)"></i>
                <h6>Premium Özellikler (Perk'ler)</h6>
            </div>
            <div class="card-body">
                <div style="font-size:13px;color:var(--text2);margin-bottom:16px">
                    Bu planda hangi premium özelliklerin aktif olacağını seçin.
                </div>
                @foreach($allPerks as $category => $perks)
                <div class="mb-4">
                    <div class="perk-category">{{ $category }}</div>
                    <div class="row g-2">
                        @foreach($perks as $key => $meta)
                        <div class="col-md-6">
                            <label class="perk-label">
                                <input type="checkbox" name="perks[]" value="{{ $key }}" class="form-check-input mt-0 flex-shrink-0"
                                    {{ in_array($key, old('perks',[])) ? 'checked' : '' }}>
                                <div>
                                    <div style="font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px">
                                        <i class="bi {{ $meta['icon'] }}" style="color:var(--accent-lt);font-size:13px"></i>
                                        {{ $meta['name'] }}
                                    </div>
                                    <div style="font-size:12px;color:var(--text2);margin-top:2px">{{ $meta['description'] }}</div>
                                </div>
                            </label>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        {{-- Görünürlük --}}
        <div class="card mb-4">
            <div class="card-header">
                <i class="bi bi-eye" style="color:var(--info)"></i>
                <h6>Görünürlük Ayarları</h6>
            </div>
            <div class="card-body">
                <div class="row g-3 mb-3">
                    <div class="col-md-6">
                        <div class="d-flex align-items-center justify-content-between p-3 rounded" style="background:var(--surface2);border:1px solid var(--border)">
                            <div>
                                <div style="font-size:13.5px;font-weight:600;color:var(--text)">Aktif</div>
                                <div style="font-size:12px;color:var(--text2)">Plan kullanılabilir durumda</div>
                            </div>
                            <div class="form-check form-switch mb-0">
                                <input class="form-check-input" type="checkbox" name="is_active" value="1" id="is_active" role="switch" checked>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-center justify-content-between p-3 rounded" style="background:var(--surface2);border:1px solid var(--border)">
                            <div>
                                <div style="font-size:13.5px;font-weight:600;color:var(--text)">Herkese Görünür</div>
                                <div style="font-size:12px;color:var(--text2)">Premium sayfasında listele</div>
                            </div>
                            <div class="form-check form-switch mb-0">
                                <input class="form-check-input" type="checkbox" name="is_public" value="1" id="is_public" role="switch" checked>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <label class="form-label">Görünürlük Bitiş Tarihi <span style="color:var(--text2);font-size:11px">(opsiyonel)</span></label>
                    <input type="datetime-local" name="visible_until" class="form-control" value="{{ old('visible_until') }}">
                    <div class="form-text">Bu tarihten sonra plan otomatik kaldırılır. Boş = süresiz.</div>
                </div>
            </div>
        </div>

        <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary flex-grow-1 btn-lg">
                <i class="bi bi-plus-circle"></i> Plan Ekle
            </button>
            <a href="{{ route('admin.plans.index') }}" class="btn btn-secondary">İptal</a>
        </div>
    </form>
</div>
</div>

@endsection

@push('scripts')
<script>
function addFeature() {
    const wrap = document.getElementById('features-wrap');
    const div = document.createElement('div');
    div.className = 'input-group';
    div.innerHTML = `<input type="text" name="features[]" class="form-control" placeholder="Özellik...">
        <button type="button" class="btn btn-outline-danger" onclick="this.parentElement.remove()"><i class="bi bi-dash-lg"></i></button>`;
    wrap.appendChild(div);
}
</script>
@endpush