@extends('agency.layouts.app')

@section('title', $definition->name)

@section('page_title', $definition->name)

@php
    $breadcrumbs = [
        ['title' => 'Dashboard', 'url' => route('agency.dashboard')],
        ['title' => 'Tanımlar', 'url' => route('agency.definitions.index')],
        ['title' => $definition->definitionType->display_name, 'url' => route('agency.definitions.index', ['type' => $definition->definition_type_id])],
        ['title' => $definition->name, 'url' => '']
    ];
@endphp

@push('styles')
    <style>
        .definition-header {
            background: linear-gradient(135deg, var(--primary-color)10, var(--primary-light)05);
            border: 1px solid var(--primary-color)20;
            border-radius: var(--radius-xl);
            padding: 2rem;
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }

        .definition-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
        }

        .definition-image {
            width: 120px;
            height: 120px;
            border-radius: var(--radius-xl);
            object-fit: cover;
            border: 3px solid white;
            box-shadow: var(--shadow-lg);
        }

        .definition-image-placeholder {
            width: 120px;
            height: 120px;
            border-radius: var(--radius-xl);
            background: var(--gray-200);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gray-500);
            font-size: 2.5rem;
            border: 3px solid white;
            box-shadow: var(--shadow-lg);
        }

        .definition-title {
            font-size: 2rem;
            font-weight: 700;
            color: var(--gray-900);
            margin-bottom: 0.5rem;
        }

        .definition-type {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--primary-color);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: var(--radius-lg);
            font-weight: 600;
            font-size: 0.9rem;
        }

        .status-badges {
            display: flex;
            gap: 0.5rem;
            margin-top: 1rem;
        }

        .info-section {
            background: white;
            border-radius: var(--radius-xl);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            border: 1px solid var(--gray-200);
            box-shadow: var(--shadow-sm);
        }

        .info-section-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--gray-200);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .properties-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
        }

        .property-item {
            background: var(--gray-50);
            border-radius: var(--radius-lg);
            padding: 1rem;
            border-left: 4px solid var(--primary-color);
            transition: all 0.3s ease;
        }

        .property-item:hover {
            background: var(--primary-color)05;
            transform: translateY(-2px);
        }

        .property-label {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--gray-600);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0.25rem;
        }

        .property-value {
            font-size: 1rem;
            font-weight: 500;
            color: var(--gray-900);
            word-break: break-word;
        }

        .property-value.boolean {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .property-value.boolean.true {
            color: var(--success-color);
        }

        .property-value.boolean.false {
            color: var(--danger-color);
        }

        .action-buttons {
            background: white;
            border-radius: var(--radius-xl);
            padding: 1.5rem;
            border: 1px solid var(--gray-200);
            box-shadow: var(--shadow-sm);
            position: sticky;
            top: calc(var(--header-height) + 1rem);
        }

        .meta-info {
            background: var(--gray-50);
            border-radius: var(--radius-lg);
            padding: 1rem;
            font-size: 0.9rem;
            color: var(--gray-600);
        }

        .meta-info-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            border-bottom: 1px solid var(--gray-200);
        }

        .meta-info-item:last-child {
            border-bottom: none;
        }

        .meta-info-label {
            font-weight: 500;
        }

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

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

@section('content')
    <div class="container-fluid">
        <!-- Definition Header -->
        <div class="definition-header">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <div class="d-flex align-items-start gap-3">
                        @if($definition->image)
                            <img src="{{ asset('storage/' . $definition->image) }}"
                                 alt="{{ $definition->name }}"
                                 class="definition-image">
                        @else
                            <div class="definition-image-placeholder">
                                <i class="{{ $definition->definitionType->icon ?? 'fas fa-image' }}"></i>
                            </div>
                        @endif

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

                            <h1 class="definition-title">{{ $definition->name }}</h1>

                            @if($definition->description)
                                <p class="text-muted mb-0" style="font-size: 1.1rem;">
                                    {{ $definition->description }}
                                </p>
                            @endif

                            <div class="status-badges">
                            <span class="badge {{ $definition->is_active ? 'bg-success' : 'bg-secondary' }} fs-6">
                                <i class="fas fa-{{ $definition->is_active ? 'check' : 'pause' }} me-1"></i>
                                {{ $definition->is_active ? 'Aktif' : 'Pasif' }}
                            </span>

                                @if($definition->is_featured)
                                    <span class="badge bg-warning fs-6">
                                    <i class="fas fa-star me-1"></i>
                                    Öne Çıkan
                                </span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 text-end">
                    <div class="d-flex gap-2 justify-content-end">
                        <a href="{{ route('agency.definitions.edit', $definition) }}"
                           class="btn btn-primary">
                            <i class="fas fa-edit me-2"></i>Düzenle
                        </a>

                        <div class="btn-group" role="group">
                            <button class="btn btn-outline-secondary 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 class="row">
            <div class="col-lg-8">
                <!-- Properties -->
                @if($definition->values->count() > 0)
                    <div class="info-section">
                        <h3 class="info-section-title">
                            <i class="fas fa-list-ul"></i>
                            {{ $definition->definitionType->display_name }} Özellikleri
                        </h3>

                        <div class="properties-grid">
                            @foreach($definition->values as $value)
                                <div class="property-item">
                                    <div class="property-label">{{ $value->definitionAttribute->display_name }}</div>
                                    <div class="property-value {{ $value->definitionAttribute->field_type === 'boolean' ? 'boolean ' . ($value->value ? 'true' : 'false') : '' }}">
                                        @if($value->definitionAttribute->field_type === 'boolean')
                                            <i class="fas fa-{{ $value->value ? 'check-circle' : 'times-circle' }}"></i>
                                            {{ $value->value ? 'Evet' : 'Hayır' }}
                                        @elseif($value->definitionAttribute->field_type === 'date' && $value->value)
                                            <i class="fas fa-calendar me-1"></i>
                                            {{ \Carbon\Carbon::parse($value->value)->format('d.m.Y') }}
                                        @elseif($value->definitionAttribute->field_type === 'number' && is_numeric($value->value))
                                            <i class="fas fa-calculator me-1"></i>
                                            {{ number_format($value->value, 2) }}
                                        @else
                                            {{ $value->formatted_value }}
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @else
                    <div class="info-section">
                        <div class="empty-state">
                            <i class="fas fa-list-ul"></i>
                            <h5>Özellik Bulunmuyor</h5>
                            <p class="mb-0">Bu tanım için henüz özellik tanımlanmamış.</p>
                        </div>
                    </div>
                @endif

                <!-- Additional Information -->
                @if($definition->description)
                    <div class="info-section">
                        <h3 class="info-section-title">
                            <i class="fas fa-info-circle"></i>
                            Detaylı Açıklama
                        </h3>
                        <p class="mb-0" style="line-height: 1.6;">{{ $definition->description }}</p>
                    </div>
                @endif
            </div>

            <div class="col-lg-4">
                <!-- Action Buttons -->
                <div class="action-buttons">
                    <h5 class="mb-3">İşlemler</h5>

                    <div class="d-grid gap-2 mb-3">
                        <a href="{{ route('agency.definitions.edit', $definition) }}"
                           class="btn btn-primary">
                            <i class="fas fa-edit me-2"></i>Düzenle
                        </a>

                        <button type="button" class="btn btn-outline-{{ $definition->is_active ? 'warning' : 'success' }}"
                                onclick="toggleStatus('{{ route('agency.definitions.toggle-active', $definition) }}')">
                            <i class="fas fa-{{ $definition->is_active ? 'pause' : 'play' }} me-2"></i>
                            {{ $definition->is_active ? 'Pasifleştir' : 'Aktifleştir' }}
                        </button>

                        <button type="button" class="btn btn-outline-{{ $definition->is_featured ? 'secondary' : 'warning' }}"
                                onclick="toggleStatus('{{ route('agency.definitions.toggle-featured', $definition) }}')">
                            <i class="fas fa-star me-2"></i>
                            {{ $definition->is_featured ? 'Öne Çıkarmayı Kaldır' : 'Öne Çıkar' }}
                        </button>
                    </div>

                    <hr>

                    <div class="d-grid gap-2">
                        <a href="{{ route('agency.definitions.index', ['type' => $definition->definition_type_id]) }}"
                           class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left me-2"></i>
                            {{ $definition->definitionType->display_name }} Listesi
                        </a>

                        <a href="{{ route('agency.definitions.index') }}"
                           class="btn btn-outline-secondary">
                            <i class="fas fa-list me-2"></i>
                            Tüm Tanımlar
                        </a>

                        <button type="button" class="btn btn-outline-danger"
                                onclick="deleteDefinition('{{ route('agency.definitions.destroy', $definition) }}')">
                            <i class="fas fa-trash me-2"></i>Sil
                        </button>
                    </div>
                </div>

                <!-- Meta Information -->
                <div class="info-section">
                    <h5 class="info-section-title">
                        <i class="fas fa-info"></i>
                        Bilgiler
                    </h5>

                    <div class="meta-info">
                        <div class="meta-info-item">
                            <span class="meta-info-label">Kategori:</span>
                            <span>{{ $definition->definitionType->display_name }}</span>
                        </div>

                        <div class="meta-info-item">
                            <span class="meta-info-label">Durum:</span>
                            <span class="badge {{ $definition->is_active ? 'bg-success' : 'bg-secondary' }}">
                            {{ $definition->is_active ? 'Aktif' : 'Pasif' }}
                        </span>
                        </div>

                        @if($definition->is_featured)
                            <div class="meta-info-item">
                                <span class="meta-info-label">Öne Çıkan:</span>
                                <span class="badge bg-warning">Evet</span>
                            </div>
                        @endif

                        <div class="meta-info-item">
                            <span class="meta-info-label">Sıralama:</span>
                            <span>{{ $definition->sort_order }}</span>
                        </div>

                        <div class="meta-info-item">
                            <span class="meta-info-label">Oluşturulma:</span>
                            <span>{{ $definition->created_at->format('d.m.Y H:i') }}</span>
                        </div>

                        @if($definition->updated_at != $definition->created_at)
                            <div class="meta-info-item">
                                <span class="meta-info-label">Güncelleme:</span>
                                <span>{{ $definition->updated_at->format('d.m.Y H:i') }}</span>
                            </div>
                        @endif

                        @if($definition->creator)
                            <div class="meta-info-item">
                                <span class="meta-info-label">Oluşturan:</span>
                                <span>{{ $definition->creator->full_name }}</span>
                            </div>
                        @endif

                        @if($definition->updater && $definition->updated_at != $definition->created_at)
                            <div class="meta-info-item">
                                <span class="meta-info-label">Güncelleyen:</span>
                                <span>{{ $definition->updater->full_name }}</span>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function toggleStatus(url) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = url;

            const csrfToken = document.createElement('input');
            csrfToken.type = 'hidden';
            csrfToken.name = '_token';
            csrfToken.value = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            const methodField = document.createElement('input');
            methodField.type = 'hidden';
            methodField.name = '_method';
            methodField.value = 'PATCH';

            form.appendChild(csrfToken);
            form.appendChild(methodField);
            document.body.appendChild(form);
            form.submit();
        }

        function deleteDefinition(url) {
            if (confirm('Bu tanımı silmek istediğinize emin misiniz? Bu işlem geri alınamaz.')) {
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = url;

                const csrfToken = document.createElement('input');
                csrfToken.type = 'hidden';
                csrfToken.name = '_token';
                csrfToken.value = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

                const methodField = document.createElement('input');
                methodField.type = 'hidden';
                methodField.name = '_method';
                methodField.value = 'DELETE';

                form.appendChild(csrfToken);
                form.appendChild(methodField);
                document.body.appendChild(form);
                form.submit();
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Delete confirmation for dropdown
            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();
                    }
                });
            });
        });
    </script>
@endpush