@extends('agency.layouts.app')

@section('title', $tour->name . ' - SEO ve Meta Bilgileri')
@section('page_title', 'SEO ve Meta Bilgileri')

@php
    $breadcrumbs = [
        ['title' => 'Ana Sayfa', 'url' => route('agency.dashboard')],
        ['title' => 'Kültür Turları', 'url' => route('agency.products.kultur-turlari.index')],
        ['title' => $tour->name, 'url' => route('agency.products.kultur-turlari.show', $tour)],
        ['title' => 'SEO', 'url' => '']
    ];
@endphp

@push('styles')
    <style>
        .seo-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .tour-header {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            color: white;
            padding: 2rem;
            border-radius: var(--radius-xl);
            margin-bottom: 2rem;
        }

        .tour-header-content h1 {
            font-size: 1.75rem;
            font-weight: 700;
            margin: 0 0 0.5rem 0;
        }

        .tour-header-meta {
            display: flex;
            gap: 1.5rem;
            font-size: 0.9rem;
            opacity: 0.95;
        }

        .tabs-container {
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-xl);
            overflow: hidden;
            margin-bottom: 2rem;
        }

        .nav-tabs {
            background: var(--gray-50);
            border-bottom: 1px solid var(--gray-200);
            padding: 0 1rem;
            margin: 0;
        }

        .nav-tabs .nav-link {
            border: none;
            border-radius: 0;
            color: var(--gray-600);
            font-weight: 500;
            padding: 1rem 1.5rem;
            position: relative;
            transition: var(--transition);
        }

        .nav-tabs .nav-link:hover {
            color: var(--primary-color);
            background: transparent;
            border-color: transparent;
        }

        .nav-tabs .nav-link.active {
            color: var(--primary-color);
            background: transparent;
            border-color: transparent;
            font-weight: 600;
        }

        .nav-tabs .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--primary-color);
            border-radius: 3px 3px 0 0;
        }

        .tab-content {
            padding: 2rem;
        }

        .form-section {
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-lg);
            padding: 2rem;
            margin-bottom: 2rem;
        }

        .section-header {
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid var(--gray-200);
        }

        .section-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--gray-900);
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .section-icon {
            color: var(--primary-color);
            font-size: 1.5rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group:last-child {
            margin-bottom: 0;
        }

        .form-label {
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: 0.5rem;
            display: block;
        }

        .form-text {
            font-size: 0.875rem;
            color: var(--gray-600);
            margin-top: 0.25rem;
        }

        .tags-input {
            position: relative;
        }

        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            padding: 0.5rem;
            border: 1px solid var(--gray-300);
            border-radius: var(--radius-md);
            min-height: 60px;
            background: var(--gray-50);
            margin-bottom: 0.5rem;
        }

        .tag-item {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--primary-color);
            color: white;
            padding: 0.375rem 0.75rem;
            border-radius: var(--radius-md);
            font-size: 0.875rem;
            font-weight: 500;
        }

        .tag-remove {
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            padding: 0;
            font-size: 0.875rem;
            opacity: 0.8;
            transition: opacity 0.2s;
        }

        .tag-remove:hover {
            opacity: 1;
        }

        .save-status {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            padding: 1rem 1.5rem;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            font-weight: 600;
            z-index: 1000;
        }

        .save-status.saved {
            background: var(--success-color);
            color: white;
        }

        .save-status.saving {
            background: var(--warning-color);
            color: white;
        }

        .save-status.error {
            background: var(--danger-color);
            color: white;
        }

        .character-count {
            font-size: 0.875rem;
            color: var(--gray-600);
            text-align: right;
            margin-top: 0.25rem;
        }

        .character-count.warning {
            color: var(--warning-color);
        }

        .character-count.danger {
            color: var(--danger-color);
        }
    </style>
@endpush

@section('content')
    <div class="seo-container">
        <!-- Tour Header -->
        <div class="tour-header">
            <div class="tour-header-content">
                <h1>{{ $tour->name }}</h1>
                <div class="tour-header-meta">
                    <span><i class="fas fa-code me-1"></i> {{ $tour->code }}</span>
                    <span><i class="fas fa-map-marker-alt me-1"></i> {{ $tour->departureCity->city ?? 'N/A' }}</span>
                    <span><i class="fas fa-calendar me-1"></i> {{ $tour->days }} Gün / {{ $tour->nights }} Gece</span>
                </div>
            </div>
        </div>

        <!-- Tabs Container -->
        <div class="tabs-container">
            <!-- Tab Navigation -->
            @include('agency.products.kultur-turlari._nav', ['active' => 'seo'])

            <!-- Tab Content -->
            <div class="tab-content">
                <!-- SEO Form -->
                <form action="{{ route('agency.products.kultur-turlari.update-seo', $tour) }}" method="POST" id="seoForm">
            @csrf
            @method('PUT')

            <div class="form-section">
                <div class="section-header">
                    <h3 class="section-title">
                        <i class="fas fa-search section-icon"></i>
                        SEO ve Meta Bilgileri
                    </h3>
                </div>

                <div class="form-group">
                    <label class="form-label">Meta Başlık</label>
                    <input type="text" name="meta_title" class="form-control" id="metaTitle"
                           value="{{ old('meta_title', $tour->meta_title) }}"
                           placeholder="Arama motorları için başlık" maxlength="60">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="form-text">Maksimum 60 karakter. Boş bırakırsanız tur adı kullanılır</div>
                        <div class="character-count" id="metaTitleCount">0/60</div>
                    </div>
                    @error('meta_title')
                    <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label class="form-label">Meta Açıklama</label>
                    <textarea name="meta_description" class="form-control" rows="3" id="metaDescription"
                              placeholder="Arama sonuçlarında görünecek açıklama" maxlength="160">{{ old('meta_description', $tour->meta_description) }}</textarea>
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="form-text">Maksimum 160 karakter. Boş bırakırsanız kısa açıklama kullanılır</div>
                        <div class="character-count" id="metaDescCount">0/160</div>
                    </div>
                    @error('meta_description')
                    <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label class="form-label">Meta Anahtar Kelimeler</label>
                    <input type="text" name="meta_keywords" class="form-control"
                           value="{{ old('meta_keywords', $tour->meta_keywords) }}"
                           placeholder="kültür turu, istanbul, türkiye, gezi">
                    <div class="form-text">Virgülle ayrılmış anahtar kelimeler</div>
                    @error('meta_keywords')
                    <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label class="form-label">Etiketler (Tags)</label>
                    <div class="tags-input">
                        <div class="tags-container" id="tagsContainer">
                            @if($tour->tags)
                                @foreach($tour->tags as $tag)
                                    <span class="tag-item">
                                        {{ $tag }}
                                        <button type="button" class="tag-remove" onclick="removeTag(this)">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </span>
                                @endforeach
                            @endif
                        </div>
                        <input type="text" id="tagInput" class="form-control"
                               placeholder="Etiket yazıp Enter'a basın">
                        <input type="hidden" name="tags" id="tagsHidden"
                               value="{{ old('tags', is_array($tour->tags) ? implode(',', $tour->tags) : '') }}">
                    </div>
                    <div class="form-text">Enter tuşuna basarak etiket ekleyin</div>
                    @error('tags')
                    <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="d-flex gap-2 justify-content-end">
                <a href="{{ route('agency.products.kultur-turlari.general', $tour) }}" class="btn btn-outline-secondary">
                    <i class="fas fa-times me-2"></i>
                    İptal
                </a>
                <button type="submit" class="btn btn-primary" id="saveBtn">
                    <i class="fas fa-save me-2"></i>
                    Kaydet
                </button>
            </div>
                </form>
            </div>
        </div>
    </div>

    <div class="save-status" id="saveStatus" style="display: none;"></div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Character counters
            const metaTitle = document.getElementById('metaTitle');
            const metaTitleCount = document.getElementById('metaTitleCount');
            const metaDescription = document.getElementById('metaDescription');
            const metaDescCount = document.getElementById('metaDescCount');

            function updateCharCount(input, counter, max) {
                const count = input.value.length;
                counter.textContent = `${count}/${max}`;
                counter.classList.remove('warning', 'danger');
                if (count > max * 0.9) {
                    counter.classList.add('danger');
                } else if (count > max * 0.75) {
                    counter.classList.add('warning');
                }
            }

            if (metaTitle) {
                updateCharCount(metaTitle, metaTitleCount, 60);
                metaTitle.addEventListener('input', () => updateCharCount(metaTitle, metaTitleCount, 60));
            }

            if (metaDescription) {
                updateCharCount(metaDescription, metaDescCount, 160);
                metaDescription.addEventListener('input', () => updateCharCount(metaDescription, metaDescCount, 160));
            }

            // Tags functionality
            const tagInput = document.getElementById('tagInput');
            const tagsContainer = document.getElementById('tagsContainer');
            const tagsHidden = document.getElementById('tagsHidden');

            function addTag(tagText) {
                tagText = tagText.trim();
                if (tagText === '') return;

                const tagItem = document.createElement('span');
                tagItem.className = 'tag-item';
                tagItem.innerHTML = `
                    ${tagText}
                    <button type="button" class="tag-remove" onclick="removeTag(this)">
                        <i class="fas fa-times"></i>
                    </button>
                `;
                tagsContainer.appendChild(tagItem);

                updateTagsHidden();
                tagInput.value = '';
            }

            function updateTagsHidden() {
                const tags = Array.from(tagsContainer.querySelectorAll('.tag-item')).map(tag => {
                    return tag.textContent.trim();
                });
                tagsHidden.value = tags.join(',');
            }

            window.removeTag = function(button) {
                button.closest('.tag-item').remove();
                updateTagsHidden();
            };

            if (tagInput) {
                tagInput.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        addTag(this.value);
                    }
                });
            }

            // Form submission
            const form = document.getElementById('seoForm');
            const saveBtn = document.getElementById('saveBtn');
            const saveStatus = document.getElementById('saveStatus');

            form.addEventListener('submit', function(e) {
                saveStatus.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Kaydediliyor...';
                saveStatus.className = 'save-status saving';
                saveStatus.style.display = 'block';
                saveBtn.disabled = true;
                saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Kaydediliyor...';
            });
        });
    </script>
@endpush