@extends('agency.layouts.app')

@section('title', 'Tanımlar')

@section('page_title', 'Tanımlar')

@php
    $breadcrumbs = [
        ['title' => 'Dashboard', 'url' => route('agency.dashboard')],
        ['title' => 'Tanımlar', 'url' => '']
    ];
@endphp

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

        .definition-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
        }

        .definition-image {
            width: 100%;
            height: 120px;
            object-fit: cover;
            background: var(--gray-100);
        }

        .definition-type-badge {
            position: absolute;
            top: 0.75rem;
            right: 0.75rem;
            background: var(--primary-color);
            color: white;
            padding: 0.25rem 0.5rem;
            border-radius: var(--radius-md);
            font-size: 11px;
            font-weight: 600;
        }

        .filter-tabs {
            border-bottom: 2px solid var(--gray-200);
            margin-bottom: 2rem;
        }

        .filter-tab {
            background: none;
            border: none;
            padding: 0.75rem 1.5rem;
            color: var(--gray-600);
            font-weight: 500;
            border-bottom: 2px solid transparent;
            transition: all 0.3s ease;
        }

        .filter-tab.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
        }

        .filter-tab:hover:not(.active) {
            color: var(--gray-900);
        }

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

        .stat-item {
            text-align: center;
        }

        .stat-number {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.25rem;
        }

        .stat-label {
            font-size: 0.875rem;
            opacity: 0.9;
        }

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

        .empty-state i {
            font-size: 3rem;
            margin-bottom: 1rem;
            color: var(--gray-400);
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid">
        <!-- Header Actions -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h2 class="h4 mb-1">Tanımlarım</h2>
                <p class="text-muted mb-0">Acentenize ait tanımları yönetin</p>
            </div>
            <div class="d-flex gap-2">
                @if($types->isNotEmpty())
                    <div class="dropdown">
                        <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
                            <i class="fas fa-plus me-2"></i>Yeni Tanım
                        </button>
                        <ul class="dropdown-menu">
                            @foreach($types as $type)
                                <li>
                                    <a class="dropdown-item"
                                       href="{{ route('agency.definitions.create', ['type' => $type->id]) }}">
                                        <i class="{{ $type->icon ?? 'fas fa-circle' }} me-2"></i>
                                        {{ $type->display_name }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
        </div>

        <!-- Quick Stats -->
        @if($definitions->total() > 0)
            <div class="quick-stats">
                <div class="row">
                    <div class="col-md-3">
                        <div class="stat-item">
                            <div class="stat-number">{{ $definitions->total() }}</div>
                            <div class="stat-label">Toplam Tanım</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-item">
                            <div class="stat-number">{{ $definitions->where('is_active', true)->count() }}</div>
                            <div class="stat-label">Aktif</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-item">
                            <div class="stat-number">{{ $definitions->where('is_featured', true)->count() }}</div>
                            <div class="stat-label">Öne Çıkan</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-item">
                            <div class="stat-number">{{ $types->count() }}</div>
                            <div class="stat-label">Kategori</div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- Filters and Search -->
        <div class="card mb-4">
            <div class="card-body">
                <form method="GET" class="row g-3">
                    <!-- Type Filter -->
                    <div class="col-md-3">
                        <label class="form-label">Kategori</label>
                        <select name="type" class="form-select">
                            <option value="">Tüm Kategoriler</option>
                            @foreach($types as $type)
                                <option value="{{ $type->id }}" {{ request('type') == $type->id ? 'selected' : '' }}>
                                    {{ $type->display_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Status Filter -->
                    <div class="col-md-3">
                        <label class="form-label">Durum</label>
                        <select name="status" class="form-select">
                            <option value="">Tüm Durumlar</option>
                            <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Aktif</option>
                            <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Pasif
                            </option>
                        </select>
                    </div>

                    <!-- Search -->
                    <div class="col-md-4">
                        <label class="form-label">Arama</label>
                        <input type="text" name="search" class="form-control" placeholder="Tanım adı..."
                               value="{{ request('search') }}">
                    </div>

                    <!-- Actions -->
                    <div class="col-md-2">
                        <label class="form-label">&nbsp;</label>
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-outline-primary">
                                <i class="fas fa-search"></i> Filtrele
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Definitions Grid -->
        @if($definitions->count() > 0)
            <div class="row">
                @foreach($definitions as $definition)
                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="definition-card card h-100">
                            <div class="position-relative">
                                @if($definition->image)
                                    <img src="{{ asset('storage/' . $definition->image) }}"
                                         alt="{{ $definition->name }}"
                                         class="definition-image">
                                @else
                                    <div class="definition-image d-flex align-items-center justify-content-center">
                                        <i class="{{ $definition->definitionType->icon ?? 'fas fa-image' }} text-muted"
                                           style="font-size: 2rem;"></i>
                                    </div>
                                @endif

                                <div class="definition-type-badge">
                                    <i class="{{ $definition->definitionType->icon ?? 'fas fa-circle' }} me-1"></i>
                                    {{ $definition->definitionType->display_name }}
                                </div>

                                @if($definition->is_featured)
                                    <div class="position-absolute top-0 start-0 m-2">
                                    <span class="badge bg-warning">
                                        <i class="fas fa-star"></i> Öne Çıkan
                                    </span>
                                    </div>
                                @endif
                            </div>

                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <h5 class="card-title h6 mb-0">{{ $definition->name }}</h5>
                                    <span class="badge {{ $definition->is_active ? 'bg-success' : 'bg-secondary' }}">
                                    {{ $definition->is_active ? 'Aktif' : 'Pasif' }}
                                </span>
                                </div>

                                @if($definition->description)
                                    <p class="card-text text-muted small mb-3">
                                        {{ Str::limit($definition->description, 100) }}
                                    </p>
                                @endif

                                <!-- Dynamic Properties -->
                                @if($definition->values->count() > 0)
                                    <div class="mb-3">
                                        @foreach($definition->values->take(3) as $value)
                                            <div class="d-flex justify-content-between py-1 border-bottom border-light">
                                                <small
                                                        class="text-muted">{{ $value->definitionAttribute->display_name }}
                                                    :</small>
                                                <small class="fw-medium">{{ $value->formatted_value }}</small>
                                            </div>
                                        @endforeach
                                        @if($definition->values->count() > 3)
                                            <small class="text-muted">+{{ $definition->values->count() - 3 }} özellik
                                                daha</small>
                                        @endif
                                    </div>
                                @endif

                                <div class="d-flex justify-content-between align-items-center mt-auto">
                                    <small class="text-muted">
                                        {{ $definition->created_at->diffForHumans() }}
                                    </small>

                                    <div class="btn-group" role="group">
                                        <a href="{{ route('agency.definitions.show', $definition) }}"
                                           class="btn btn-outline-primary btn-sm">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('agency.definitions.edit', $definition) }}"
                                           class="btn btn-outline-secondary btn-sm">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <div class="btn-group" role="group">
                                            <button class="btn btn-outline-secondary btn-sm dropdown-toggle"
                                                    data-bs-toggle="dropdown">
                                                <i class="fas fa-ellipsis-v"></i>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <form method="POST"
                                                          action="{{ route('agency.definitions.toggle-active', $definition) }}"
                                                          class="d-inline">
                                                        @csrf
                                                        @method('PATCH')
                                                        <button type="submit" class="dropdown-item">
                                                            <i class="fas fa-{{ $definition->is_active ? 'pause' : 'play' }} me-2"></i>
                                                            {{ $definition->is_active ? 'Pasifleştir' : 'Aktifleştir' }}
                                                        </button>
                                                    </form>
                                                </li>
                                                <li>
                                                    <form method="POST"
                                                          action="{{ route('agency.definitions.toggle-featured', $definition) }}"
                                                          class="d-inline">
                                                        @csrf
                                                        @method('PATCH')
                                                        <button type="submit" class="dropdown-item">
                                                            <i class="fas fa-star me-2"></i>
                                                            {{ $definition->is_featured ? 'Öne Çıkarmayı Kaldır' : 'Öne Çıkar' }}
                                                        </button>
                                                    </form>
                                                </li>
                                                <li>
                                                    <hr class="dropdown-divider">
                                                </li>
                                                <li>
                                                    <form method="POST"
                                                          action="{{ route('agency.definitions.destroy', $definition) }}"
                                                          class="d-inline delete-form">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="dropdown-item text-danger">
                                                            <i class="fas fa-trash me-2"></i>Sil
                                                        </button>
                                                    </form>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Pagination -->
            <div class="d-flex justify-content-center">
                {{ $definitions->appends(request()->query())->links() }}
            </div>
        @else
            <!-- Empty State -->
            <div class="empty-state">
                <i class="fas fa-tags"></i>
                <h4>Henüz tanım bulunmuyor</h4>
                <p class="mb-4">Acenteniz için yeni tanımlar oluşturmaya başlayın.</p>

                @if($types->isNotEmpty())
                    <div class="dropdown">
                        <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
                            <i class="fas fa-plus me-2"></i>İlk Tanımı Oluştur
                        </button>
                        <ul class="dropdown-menu">
                            @foreach($types as $type)
                                <li>
                                    <a class="dropdown-item"
                                       href="{{ route('agency.definitions.create', ['type' => $type->id]) }}">
                                        <i class="{{ $type->icon ?? 'fas fa-circle' }} me-2"></i>
                                        {{ $type->display_name }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @else
                    <p class="text-muted">Henüz tanım kategorisi bulunmuyor.</p>
                @endif
            </div>
        @endif
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Delete confirmation
            document.querySelectorAll('.delete-form').forEach(form => {
                form.addEventListener('submit', function (e) {
                    e.preventDefault();

                    if (confirm('Bu tanımı silmek istediğinize emin misiniz? Bu işlem geri alınamaz.')) {
                        this.submit();
                    }
                });
            });

            // Auto-submit filter form on select change
            document.querySelectorAll('select[name="type"], select[name="status"]').forEach(select => {
                select.addEventListener('change', function () {
                    this.closest('form').submit();
                });
            });

            // Search debounce
            const searchInput = document.querySelector('input[name="search"]');
            if (searchInput) {
                let searchTimeout;
                searchInput.addEventListener('input', function () {
                    clearTimeout(searchTimeout);
                    searchTimeout = setTimeout(() => {
                        this.closest('form').submit();
                    }, 500);
                });
            }
        });
    </script>
@endpush