@extends('agency.layouts.app')

@section('title', 'Günübirlik Turlar')
@section('page_title', 'Günübirlik Turlar')

@php
    $breadcrumbs = [
        ['title' => 'Ana Sayfa', 'url' => route('agency.dashboard')],
        ['title' => 'Ürünler', 'url' => '#'],
        ['title' => 'Günübirlik 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">Günübirlik Turlar</h1>
                <p class="text-muted mb-0">Günübirlik turlarınızı yönetin</p>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('agency.products.gunubirlik-turlar.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus"></i> Yeni Günübirlik Tur
                </a>
            </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.gunubirlik-turlar.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?->image_url)
                                    <img src="{{ $tour->coverImage->thumbnail_url ?: $tour->coverImage->image_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

                                @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

                                <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>

                                <div class="tour-price">
                                    {{ number_format($tour->adult_price, 0) }} {{ $tour->currency }}
                                </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>
                                        {{ substr($tour->start_time, 0, 5) }} - {{ substr($tour->end_time, 0, 5) }}
                                    </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.gunubirlik-turlar.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.gunubirlik-turlar.general', $tour) }}"
                                           class="btn btn-sm btn-outline-secondary" title="Düzenle">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                    </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 btn-outline-danger"
                                                onclick="deleteTour({{ $tour->id }})" title="Sil">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <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-sun"></i>
                </div>
                <h4>Henüz günübirlik tur bulunmuyor</h4>
                <p class="mb-3">İlk günübirlik turunuzu oluşturarak başlayın</p>
                <a href="{{ route('agency.products.gunubirlik-turlar.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus"></i> İlk Günübirlik Turu Oluştur
                </a>
            </div>
        @endif
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            window.toggleStatus = function (tourId) {
                fetch(`/agency/products/gunubirlik-turlar/${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.deleteTour = function (tourId) {
                if (confirm('Bu turu silmek istediğinizden emin misiniz? Bu işlem geri alınamaz.')) {
                    fetch(`/agency/products/gunubirlik-turlar/${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();
                            }
                        });
                }
            };

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