@extends('layouts.admin')
@section('title', 'Hashtag Şablonları')
@section('breadcrumb')
    <li class="breadcrumb-item active">Hashtag Şablonları</li>
@endsection
@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h4 mb-1"><i class="bi bi-hash me-2 text-info"></i>Hashtag Şablonları</h1>
        <p class="text-muted small mb-0">Video açıklamalarında tek tıkla kullanabileceğin hashtag grupları</p>
    </div>
    @can('manager')
    <a href="{{ route('admin.hashtags.create') }}" class="btn btn-primary">
        <i class="bi bi-plus-lg me-1"></i> Yeni Şablon
    </a>
    @endcan
</div>

<!-- Kategori filtreleri -->
@if($categories->isNotEmpty())
<div class="d-flex flex-wrap gap-2 mb-3">
    <a href="{{ route('admin.hashtags.index') }}" class="badge bg-secondary text-decoration-none {{ !request('category') ? 'opacity-100' : 'opacity-50' }}" style="font-size:0.8rem;padding:8px 14px;">
        Tümü
    </a>
    @foreach($categories as $cat)
    <a href="{{ route('admin.hashtags.index', ['category' => $cat]) }}" class="badge text-decoration-none {{ request('category') == $cat ? 'bg-primary opacity-100' : 'bg-dark opacity-50' }}" style="font-size:0.8rem;padding:8px 14px;">
        #{{ $cat }}
    </a>
    @endforeach
</div>
@endif

<div class="row g-3">
    @forelse($templates as $template)
    <div class="col-lg-4 col-md-6">
        <div class="card h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div>
                        <h6 class="mb-1 fw-semibold">{{ $template->name }}</h6>
                        @if($template->category)
                            <span class="badge bg-info">{{ $template->category }}</span>
                        @endif
                        @if($template->is_default)
                            <span class="badge bg-warning"><i class="bi bi-star-fill me-1"></i>Varsayılan</span>
                        @endif
                    </div>
                    <div class="dropdown">
                        <button class="btn btn-sm btn-outline-light border-0" data-bs-toggle="dropdown">
                            <i class="bi bi-three-dots-vertical"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#" onclick="copyHashtags('{{ $template->hashtags }}')"><i class="bi bi-clipboard me-2"></i>Kopyala</a></li>
                            @can('manager')
                            <li><a class="dropdown-item" href="{{ route('admin.hashtags.edit', $template) }}"><i class="bi bi-pencil me-2"></i>Düzenle</a></li>
                            @endcan
                            @can('delete-resource')
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <form action="{{ route('admin.hashtags.destroy', $template) }}" method="POST" onsubmit="return confirm('Bu şablonu silmek istediğinize emin misiniz?')">
                                    @csrf @method('DELETE')
                                    <button class="dropdown-item text-danger"><i class="bi bi-trash me-2"></i>Sil</button>
                                </form>
                            </li>
                            @endcan
                        </ul>
                    </div>
                </div>
                <div class="hashtag-cloud p-2 rounded" style="background:#0f1117;max-height:120px;overflow-y:auto;">
                    @foreach($template->hashtag_array as $tag)
                        <span class="badge bg-primary bg-opacity-25 text-info me-1 mb-1" style="font-size:0.75rem;">#{{ $tag }}</span>
                    @endforeach
                </div>
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <small class="text-muted">{{ $template->hashtag_array|count }} hashtag</small>
                    <button class="btn btn-sm btn-outline-light" onclick="copyHashtags('{{ $template->hashtags }}')">
                        <i class="bi bi-clipboard me-1"></i> Kopyala
                    </button>
                </div>
            </div>
        </div>
    </div>
    @empty
    <div class="col-12">
        <div class="empty-state">
            <i class="bi bi-hash"></i>
            <h5>Henüz hashtag şablonu yok</h5>
            <p class="text-muted small">Sık kullandığınız hashtag gruplarını şablon olarak kaydedin, tek tıkla kullanın.</p>
            @can('manager')
            <a href="{{ route('admin.hashtags.create') }}" class="btn btn-primary mt-2">
                <i class="bi bi-plus-lg me-1"></i> İlk Şablonu Oluştur
            </a>
            @endcan
        </div>
    </div>
    @endforelse
</div>

<div class="mt-4">
    {{ $templates->links() }}
</div>
@endsection

@push('scripts')
<script>
function copyHashtags(text) {
    navigator.clipboard.writeText(text).then(() => {
        // Basit toast bildirimi
        const toast = document.createElement('div');
        toast.className = 'position-fixed bottom-0 end-0 m-3 alert alert-success py-2 px-3';
        toast.style.zIndex = '9999';
        toast.innerHTML = '<i class="bi bi-check-circle me-2"></i>Hashtag\'ler kopyalandı!';
        document.body.appendChild(toast);
        setTimeout(() => toast.remove(), 2000);
    });
}
</script>
@endpush