@extends('layouts.admin')
@section('title', $template->exists ? 'Hashtag Şablonunu Düzenle' : 'Yeni Hashtag Şablonu')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.hashtags.index') }}">Hashtag Şablonları</a></li>
    <li class="breadcrumb-item active">{{ $template->exists ? 'Düzenle' : 'Yeni' }}</li>
@endsection
@section('content')
<div class="row justify-content-center">
    <div class="col-lg-7">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">{{ $template->exists ? 'Şablonu Düzenle' : 'Yeni Hashtag Şablonu' }}</h5>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-sm btn-outline-info" onclick="showPreview()">
                        <i class="bi bi-eye me-1"></i>Önizle
                    </button>
                </div>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ $template->exists ? route('admin.hashtags.update', $template) : route('admin.hashtags.store') }}">
                    @csrf
                    @if($template->exists) @method('PUT') @endif

                    <div class="mb-3">
                        <label for="name" class="form-label">Şablon Adı <span class="text-danger">*</span></label>
                        <input type="text" id="name" name="name" class="form-control @error('name') is-invalid @enderror"
                               value="{{ old('name', $template->name) }}" placeholder="örn: Komik Videolar, Spor İçerikleri" required>
                        @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="mb-3">
                        <label for="category" class="form-label">Kategori</label>
                        <input type="text" id="category" name="category" class="form-control @error('category') is-invalid @enderror"
                               value="{{ old('category', $template->category) }}" placeholder="örn: komik, spor, bilgi (isteğe bağlı)">
                        @error('category') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        <div class="form-text">Şablonları gruplandırmak için kullanılır.</div>
                    </div>

                    <div class="mb-3">
                        <label for="hashtags" class="form-label">Hashtag'ler <span class="text-danger">*</span></label>
                        <textarea id="hashtags" name="hashtags" class="form-control @error('hashtags') is-invalid @enderror"
                                  rows="6" placeholder="#fyp #viral #keşfet #trend ..." required>{{ old('hashtags', $template->hashtags) }}</textarea>
                        @error('hashtags') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        <div class="form-text">Virgülle veya boşlukla ayırarak yazabilirsiniz. # işareti kullanabilirsiniz (otomatik temizlenir).</div>
                    </div>

                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input type="checkbox" id="is_default" name="is_default" class="form-check-input"
                                   value="1" {{ old('is_default', $template->is_default) ? 'checked' : '' }}>
                            <label for="is_default" class="form-check-label">Varsayılan şablon olarak işaretle</label>
                        </div>
                        <div class="form-text">Varsayılan şablonlar, video düzenleme sayfasında otomatik seçili gelir.</div>
                    </div>

                    <!-- Anlık önizleme bölümü -->
                    <div id="previewCard" class="card bg-dark border-secondary mb-4 d-none">
                        <div class="card-header d-flex justify-content-between align-items-center py-2">
                            <small class="text-muted"><i class="bi bi-eye me-1"></i>Önizleme</small>
                            <button type="button" class="btn-close btn-close-white" onclick="hidePreview()"></button>
                        </div>
                        <div class="card-body py-2">
                            <div class="d-flex flex-wrap gap-1" id="previewTags"></div>
                            <small class="text-muted mt-2 d-block" id="previewCount"></small>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mt-4">
                        <a href="{{ route('admin.hashtags.index') }}" class="btn btn-outline-light">
                            <i class="bi bi-arrow-left me-1"></i> Listeye Dön
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg me-1"></i> {{ $template->exists ? 'Güncelle' : 'Kaydet' }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const textarea = document.getElementById('hashtags');
const previewCard = document.getElementById('previewCard');
const previewTags = document.getElementById('previewTags');
const previewCount = document.getElementById('previewCount');

// Anlık önizleme
textarea.addEventListener('input', updatePreview);

function parseHashtags(text) {
    return text.split(/[,\s\n]+/)
        .map(t => t.trim())
        .filter(t => t.length > 0)
        .map(t => t.replace(/^#+/, '')) // baştaki # kaldır
        .filter((v, i, a) => a.indexOf(v) === i); // tekrarları kaldır
}

function updatePreview() {
    const tags = parseHashtags(textarea.value);
    previewTags.innerHTML = tags.map(t =>
        `<span style="background:rgba(13,202,240,0.1);color:#0dcaf0;padding:2px 10px;border-radius:20px;font-size:0.8rem;display:inline-block;margin:2px;">#${t}</span>`
    ).join('');
    previewCount.textContent = tags.length + ' benzersiz hashtag';
}

function showPreview() {
    updatePreview();
    previewCard.classList.remove('d-none');
}

function hidePreview() {
    previewCard.classList.add('d-none');
}

// Sayfa yüklendiğinde önizlemeyi göster
if (textarea.value.trim()) {
    updatePreview();
}
</script>
@endpush