@extends('agency.layouts.app')

@section('title', 'Kültür Turları')
@section('page_title', 'Kültür Turları')

@php
    $breadcrumbs = [
        ['title' => 'Ana Sayfa', 'url' => route('agency.dashboard')],
        ['title' => 'Ürünler', 'url' => '#'],
        ['title' => 'Kültür Turları', 'url' => '']
    ];
@endphp

@push('styles')
    <style>
        .tour-card {
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-xl);
            transition: all 0.3s ease;
            overflow: hidden;
            background: white;
        }

        .tour-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
            border-color: var(--primary-color);
        }

        .tour-image {
            height: 200px;
            background: linear-gradient(135deg, var(--gray-200), var(--gray-300));
            position: relative;
            overflow: hidden;
        }

        .tour-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .tour-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            padding: 4px 8px;
            border-radius: var(--radius-md);
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .tour-status {
            position: absolute;
            top: 12px;
            left: 12px;
            padding: 4px 8px;
            border-radius: var(--radius-md);
            font-size: 11px;
            font-weight: 600;
        }

        .tour-price {
            position: absolute;
            bottom: 12px;
            right: 12px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 6px 10px;
            border-radius: var(--radius-md);
            font-weight: 600;
            font-size: 14px;
        }

        .tour-content {
            padding: 1.5rem;
        }

        .tour-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--gray-900);
            margin-bottom: 0.5rem;
            line-height: 1.3;
        }

        .tour-description {
            color: var(--gray-600);
            font-size: 13px;
            line-height: 1.4;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .tour-meta {
            display: flex;
            align-items: center;
            justify-content: between;
            gap: 1rem;
            margin-bottom: 1rem;
            font-size: 12px;
            color: var(--gray-500);
        }

        .tour-meta-item {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .tour-actions {
            display: flex;
            gap: 0.5rem;
            align-items: center;
            justify-content: space-between;
        }

        .bulk-actions {
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-lg);
            padding: 1rem;
            margin-bottom: 1.5rem;
            display: none;
        }

        .bulk-actions.show {
            display: block;
        }

        .filters-card {
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .empty-state {
            text-align: center;
            padding: 3rem 1rem;
            color: var(--gray-500);
        }

        .empty-state-icon {
            font-size: 48px;
            color: var(--gray-300);
            margin-bottom: 1rem;
        }

        .stats-overview {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .stat-card {
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-lg);
            padding: 1.25rem;
            text-align: center;
        }

        .stat-number {
            font-size: 24px;
            font-weight: 800;
            color: var(--gray-900);
            margin-bottom: 0.25rem;
        }

        .stat-label {
            font-size: 13px;
            color: var(--gray-600);
            font-weight: 500;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid">
        <!-- Stats Overview -->
        <div class="stats-overview">
            <div class="stat-card">
                <div class="stat-number">{{ $tours->total() }}</div>
                <div class="stat-label">Toplam Tur</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ $tours->where('is_active', true)->count() }}</div>
                <div class="stat-label">Aktif Turlar</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ $tours->where('is_public', true)->count() }}</div>
                <div class="stat-label">Yayında</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ $tours->where('is_featured', true)->count() }}</div>
                <div class="stat-label">Öne Çıkan</div>
            </div>
        </div>

        <!-- Page Header -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h1 class="h3 mb-1">Kültür Turları</h1>
                <p class="text-muted mb-0">Kültür turlarınızı yönetin</p>
            </div>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-outline-secondary" id="bulkActionsToggle" disabled>
                    <i class="fas fa-tasks"></i> Toplu İşlemler
                </button>
                <a href="{{ route('agency.products.kultur-turlari.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus"></i> Yeni Kültür Turu
                </a>
            </div>
        </div>

        <!-- Bulk Actions -->
        <div class="bulk-actions" id="bulkActions">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <span id="selectedCount">0</span> tur seçildi
                </div>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-sm btn-outline-success" onclick="bulkAction('active')">
                        <i class="fas fa-check"></i> Aktif Et
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-warning" onclick="bulkAction('inactive')">
                        <i class="fas fa-pause"></i> Pasif Et
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="bulkAction('delete')">
                        <i class="fas fa-trash"></i> Sil
                    </button>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="filters-card">
            <form method="GET" id="filtersForm">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">Arama</label>
                        <div class="input-group">
                            <input type="text" class="form-control" name="search" value="{{ request('search') }}"
                                   placeholder="Tur adı, kod...">
                            <button type="submit" class="btn btn-outline-secondary">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Durum</label>
                        <select name="status" class="form-select">
                            <option value="">Tümü</option>
                            <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Aktif</option>
                            <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Pasif
                            </option>
                            <option value="published" {{ request('status') === 'published' ? 'selected' : '' }}>
                                Yayında
                            </option>
                            <option value="draft" {{ request('status') === 'draft' ? 'selected' : '' }}>Taslak</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Kategori</label>
                        <select name="category" class="form-select">
                            <option value="">Tümü</option>
                            @foreach($categories as $category)
                                <option
                                    value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Tur Tipi</label>
                        <select name="tour_type" class="form-select">
                            <option value="">Tümü</option>
                            <option value="domestic" {{ request('tour_type') === 'domestic' ? 'selected' : '' }}>İç
                                Turizm
                            </option>
                            <option
                                value="international" {{ request('tour_type') === 'international' ? 'selected' : '' }}>
                                Dış Turizm
                            </option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Sıralama</label>
                        <select name="sort" class="form-select">
                            <option value="created_at" {{ request('sort') === 'created_at' ? 'selected' : '' }}>
                                Oluşturma Tarihi
                            </option>
                            <option value="name" {{ request('sort') === 'name' ? 'selected' : '' }}>Tur Adı</option>
                            <option value="view_count" {{ request('sort') === 'view_count' ? 'selected' : '' }}>
                                Görüntülenme
                            </option>
                            <option value="booking_count" {{ request('sort') === 'booking_count' ? 'selected' : '' }}>
                                Rezervasyon
                            </option>
                        </select>
                    </div>
                    <div class="col-md-1">
                        <label class="form-label">Yön</label>
                        <select name="dir" class="form-select">
                            <option value="desc" {{ request('dir') === 'desc' ? 'selected' : '' }}>↓</option>
                            <option value="asc" {{ request('dir') === 'asc' ? 'selected' : '' }}>↑</option>
                        </select>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary btn-sm">
                            <i class="fas fa-filter"></i> Filtrele
                        </button>
                        <a href="{{ route('agency.products.kultur-turlari.index') }}" class="btn btn-outline-secondary btn-sm">
                            <i class="fas fa-times"></i> Temizle
                        </a>
                    </div>
                </div>
            </form>
        </div>

        <!-- Tours Grid -->
        @if($tours->count() > 0)
            <div class="row g-4">
                @foreach($tours as $tour)
                    <div class="col-xl-3 col-lg-4 col-md-6">
                        <div class="tour-card">
                            <div class="tour-image">
                                @if($tour->coverImage?->galleryImage)
                                    <img src="{{ $tour->coverImage->galleryImage->thumbnail_url }}"
                                         alt="{{ $tour->name }}">
                                @else
                                    <div class="d-flex align-items-center justify-content-center h-100">
                                        <i class="fas fa-image text-muted" style="font-size: 2rem;"></i>
                                    </div>
                                @endif

                                <!-- Tour Status -->
                                @if($tour->is_featured)
                                    <span class="tour-badge bg-warning text-dark">Öne Çıkan</span>
                                @elseif($tour->is_bestseller)
                                    <span class="tour-badge bg-success text-white">En Çok Satan</span>
                                @elseif($tour->is_new)
                                    <span class="tour-badge bg-info text-white">Yeni</span>
                                @endif

                                <!-- Status -->
                                <span class="tour-status
                                @if($tour->is_active && $tour->is_public) bg-success text-white
                                @elseif($tour->is_active && !$tour->is_public) bg-warning text-dark
                                @else bg-danger text-white
                                @endif">
                                @if($tour->is_active && $tour->is_public)
                                        Yayında
                                    @elseif($tour->is_active && !$tour->is_public)
                                        Taslak
                                    @else
                                        Pasif
                                    @endif
                            </span>

                                <!-- Price -->
                                @if($tour->defaultPricing)
                                    <div class="tour-price">
                                        {{ number_format($tour->defaultPricing->adult_price, 0) }} {{ $tour->defaultPricing->currency }}
                                    </div>
                                @endif

                                <!-- Checkbox for bulk actions -->
                                <div class="position-absolute" style="top: 12px; left: 50px;">
                                    <input type="checkbox" class="form-check-input tour-checkbox"
                                           value="{{ $tour->id }}" style="display: none;">
                                </div>
                            </div>

                            <div class="tour-content">
                                <h5 class="tour-title">{{ $tour->name }}</h5>

                                <p class="tour-description">
                                    {{ Str::limit($tour->short_description ?: $tour->description, 100) }}
                                </p>

                                <div class="tour-meta">
                                    <div class="tour-meta-item">
                                        <i class="fas fa-map-marker-alt"></i>
                                        {{ $tour->departureCity->city ?? 'Belirtilmemiş' }}
                                    </div>
                                    <div class="tour-meta-item">
                                        <i class="fas fa-clock"></i>
                                        {{ $tour->duration }} {{ $tour->duration_type === 'days' ? 'Gün' : 'Saat' }}
                                    </div>
                                    <div class="tour-meta-item">
                                        <i class="fas fa-eye"></i>
                                        {{ $tour->view_count }}
                                    </div>
                                </div>

                                <div class="tour-actions">
                                    <div class="d-flex gap-1">
                                        <a href="{{ route('agency.products.kultur-turlari.show', $tour) }}"
                                           class="btn btn-sm btn-outline-primary" title="Görüntüle">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('agency.products.kultur-turlari.general', $tour) }}"
                                           class="btn btn-sm btn-outline-secondary" title="Düzenle">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <button type="button" class="btn btn-sm btn-outline-info"
                                                onclick="duplicateTour({{ $tour->id }})" title="Kopyala">
                                            <i class="fas fa-copy"></i>
                                        </button>
                                    </div>

                                    <div class="d-flex gap-1">
                                        <button type="button"
                                                class="btn btn-sm {{ $tour->is_active ? 'btn-outline-warning' : 'btn-outline-success' }}"
                                                onclick="toggleStatus({{ $tour->id }})" title="Durum Değiştir">
                                            <i class="fas {{ $tour->is_active ? 'fa-pause' : 'fa-play' }}"></i>
                                        </button>
                                        <button type="button"
                                                class="btn btn-sm {{ $tour->is_public ? 'btn-outline-secondary' : 'btn-outline-primary' }}"
                                                onclick="togglePublish({{ $tour->id }})" title="Yayın Durumu">
                                            <i class="fas {{ $tour->is_public ? 'fa-eye-slash' : 'fa-globe' }}"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-danger"
                                                onclick="deleteTour({{ $tour->id }})" title="Sil">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Pagination -->
            <div class="d-flex justify-content-center mt-4">
                {{ $tours->links() }}
            </div>
        @else
            <div class="empty-state">
                <div class="empty-state-icon">
                    <i class="fas fa-landmark"></i>
                </div>
                <h4>Henüz kültür turu bulunmuyor</h4>
                <p class="mb-3">İlk kültür turunuzu oluşturarak başlayın</p>
                <a href="{{ route('agency.products.kultur-turlari.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus"></i> İlk Kültür Turunu Oluştur
                </a>
            </div>
        @endif
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Bulk actions functionality
            const bulkToggle = document.getElementById('bulkActionsToggle');
            const bulkActions = document.getElementById('bulkActions');
            const checkboxes = document.querySelectorAll('.tour-checkbox');
            const selectedCount = document.getElementById('selectedCount');

            // Toggle bulk actions mode
            bulkToggle.addEventListener('click', function () {
                const isActive = bulkActions.classList.contains('show');

                if (isActive) {
                    // Disable bulk mode
                    bulkActions.classList.remove('show');
                    checkboxes.forEach(cb => {
                        cb.style.display = 'none';
                        cb.checked = false;
                    });
                    bulkToggle.textContent = ' Toplu İşlemler';
                    bulkToggle.disabled = true;
                    updateSelectedCount();
                } else {
                    // Enable bulk mode
                    bulkActions.classList.add('show');
                    checkboxes.forEach(cb => cb.style.display = 'block');
                    bulkToggle.innerHTML = '<i class="fas fa-times"></i> İptal Et';
                    bulkToggle.disabled = false;
                }
            });

            // Handle checkbox changes
            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function () {
                    updateSelectedCount();
                    bulkToggle.disabled = getSelectedTours().length === 0;
                });
            });

            function updateSelectedCount() {
                const selected = getSelectedTours();
                selectedCount.textContent = selected.length;
            }

            function getSelectedTours() {
                return Array.from(checkboxes).filter(cb => cb.checked).map(cb => cb.value);
            }

            // Global functions for tour actions
            window.toggleStatus = function (tourId) {
                fetch(`/agency/products/kultur-turlari/${tourId}/toggle-status`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Content-Type': 'application/json'
                    }
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            location.reload();
                        }
                    });
            };

            window.togglePublish = function (tourId) {
                fetch(`/agency/products/kultur-turlari/${tourId}/publish`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Content-Type': 'application/json'
                    }
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            location.reload();
                        }
                    });
            };

            window.duplicateTour = function (tourId) {
                if (confirm('Bu turu kopyalamak istediğinizden emin misiniz?')) {
                    fetch(`/agency/products/kultur-turlari/${tourId}/duplicate`, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                            'Content-Type': 'application/json'
                        }
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                window.location.href = data.redirect;
                            }
                        });
                }
            };

            window.deleteTour = function (tourId) {
                if (confirm('Bu turu silmek istediğinizden emin misiniz? Bu işlem geri alınamaz.')) {
                    fetch(`/agency/products/kultur-turlari/${tourId}`, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                            'Content-Type': 'application/json'
                        }
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                location.reload();
                            }
                        });
                }
            };

            window.bulkAction = function (action) {
                const selected = getSelectedTours();
                if (selected.length === 0) return;

                let confirmText = '';
                let endpoint = '';

                switch (action) {
                    case 'active':
                        confirmText = `${selected.length} turu aktif etmek istediğinizden emin misiniz?`;
                        endpoint = '/agency/products/kultur-turlari/bulk-status';
                        break;
                    case 'inactive':
                        confirmText = `${selected.length} turu pasif etmek istediğinizden emin misiniz?`;
                        endpoint = '/agency/products/kultur-turlari/bulk-status';
                        break;
                    case 'delete':
                        confirmText = `${selected.length} turu silmek istediğinizden emin misiniz? Bu işlem geri alınamaz.`;
                        endpoint = '/agency/products/kultur-turlari/bulk-delete';
                        break;
                }

                if (confirm(confirmText)) {
                    const data = {tours: selected};
                    if (action !== 'delete') {
                        data.status = action;
                    }

                    fetch(endpoint, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(data)
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                location.reload();
                            }
                        });
                }
            };

            // Auto-submit form on filter change
            document.querySelectorAll('select[name]').forEach(select => {
                select.addEventListener('change', function () {
                    document.getElementById('filtersForm').submit();
                });
            });
        });
    </script>
@endpush