@extends('admin.layouts.app')

@section('title', $agency->name)
@section('page_title', 'Acente Detayları')

@push('styles')
    <style>
        .agency-header {
            background: linear-gradient(135deg, var(--primary-600), var(--primary-800));
            border-radius: var(--radius-xl);
            padding: var(--spacing-2xl);
            color: white;
            margin-bottom: var(--spacing-2xl);
            position: relative;
            overflow: hidden;
        }

        .agency-header::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
            border-radius: 50%;
            transform: translate(50%, -50%);
        }

        .agency-info {
            display: flex;
            align-items: center;
            gap: var(--spacing-xl);
            margin-bottom: var(--spacing-lg);
        }

        .agency-logo {
            width: 80px;
            height: 80px;
            border-radius: var(--radius-xl);
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-lg);
            flex-shrink: 0;
        }

        .agency-logo img {
            width: 60px;
            height: 60px;
            object-fit: contain;
            border-radius: var(--radius-lg);
        }

        .agency-logo .default-logo {
            font-size: 32px;
            color: var(--primary-600);
        }

        .agency-details h1 {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: var(--spacing-sm);
        }

        .agency-meta {
            display: flex;
            align-items: center;
            gap: var(--spacing-lg);
            flex-wrap: wrap;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            font-size: 14px;
            opacity: 0.9;
        }

        .agency-actions {
            display: flex;
            gap: var(--spacing-md);
            margin-top: var(--spacing-lg);
        }

        .info-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: var(--spacing-xl);
            margin-bottom: var(--spacing-2xl);
        }

        .info-card {
            background: white;
            border-radius: var(--radius-xl);
            border: 1px solid var(--gray-200);
            overflow: hidden;
        }

        .info-card-header {
            padding: var(--spacing-xl);
            border-bottom: 1px solid var(--gray-200);
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
        }

        .info-card-icon {
            width: 40px;
            height: 40px;
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
        }

        .info-card-title h3 {
            font-size: 16px;
            font-weight: 600;
            color: var(--gray-900);
            margin: 0;
        }

        .info-card-body {
            padding: var(--spacing-xl);
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-md) 0;
            border-bottom: 1px solid var(--gray-100);
        }

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

        .info-label {
            font-size: 14px;
            color: var(--gray-600);
            font-weight: 500;
        }

        .info-value {
            font-size: 14px;
            color: var(--gray-900);
            font-weight: 600;
            text-align: right;
        }

        .info-value.empty {
            color: var(--gray-400);
            font-style: italic;
        }

        .social-links {
            display: flex;
            gap: var(--spacing-sm);
            margin-top: var(--spacing-md);
        }

        .social-link {
            width: 40px;
            height: 40px;
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: white;
            font-size: 16px;
            transition: all var(--transition-fast);
        }

        .social-link:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .documents-grid {
            display: grid;
            gap: var(--spacing-md);
        }

        .document-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--spacing-md);
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-lg);
            background: var(--gray-50);
        }

        .document-info {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
        }

        .document-icon {
            width: 32px;
            height: 32px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        .document-actions {
            display: flex;
            gap: var(--spacing-sm);
        }

        .users-list {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
        }

        .user-item {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            padding: var(--spacing-md);
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-lg);
            background: var(--gray-50);
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }

        .user-info h4 {
            font-size: 14px;
            font-weight: 600;
            color: var(--gray-900);
            margin: 0 0 2px 0;
        }

        .user-info p {
            font-size: 12px;
            color: var(--gray-600);
            margin: 0;
        }

        .activity-timeline {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-lg);
        }

        .timeline-item {
            display: flex;
            gap: var(--spacing-md);
            position: relative;
        }

        .timeline-marker {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 14px;
            flex-shrink: 0;
        }

        .timeline-content {
            flex: 1;
            min-width: 0;
        }

        .timeline-content h4 {
            font-size: 14px;
            font-weight: 600;
            color: var(--gray-900);
            margin: 0 0 4px 0;
        }

        .timeline-content p {
            font-size: 13px;
            color: var(--gray-600);
            margin: 0 0 4px 0;
        }

        .timeline-time {
            font-size: 11px;
            color: var(--gray-500);
        }

        @media (max-width: 768px) {
            .info-grid {
                grid-template-columns: 1fr;
            }

            .agency-info {
                flex-direction: column;
                text-align: center;
            }

            .agency-meta {
                justify-content: center;
            }
        }
    </style>
@endpush

@section('content')
    <!-- Agency Header -->
    <div class="agency-header">
        <div class="agency-info">
            <div class="agency-logo">
                @if($agency->logo)
                    <img src="{{ Storage::url($agency->logo) }}" alt="{{ $agency->name }}">
                @else
                    <i class="fas fa-building default-logo"></i>
                @endif
            </div>
            <div class="agency-details">
                <h1>{{ $agency->name }}</h1>
                <div class="agency-meta">
                    <div class="meta-item">
                        <i class="fas fa-code"></i>
                        <span>{{ $agency->code }}</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-calendar"></i>
                        <span>{{ $agency->created_at->format('d.m.Y') }} tarihinde oluşturuldu</span>
                    </div>
                    <div class="meta-item">
                        <span
                            class="status-badge {{ $agency->is_active && $agency->is_approved ? 'approved' : ($agency->is_active ? 'pending' : 'rejected') }}">
                            <i class="fas fa-circle"></i>
                            {{ $agency->status_text }}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="agency-actions">
            <a href="{{ route('admin.agencies.edit', $agency) }}" class="btn btn-outline"
               style="color: white; border-color: rgba(255,255,255,0.3);">
                <i class="fas fa-edit me-2"></i>
                Düzenle
            </a>

            @if($agency->is_approved)
                <form action="{{ route('admin.agencies.reject', $agency) }}" method="POST" style="display: inline;">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="btn btn-outline"
                            style="color: white; border-color: rgba(255,255,255,0.3);"
                            onclick="return confirm('Acente onayını geri çekmek istediğinizden emin misiniz?')">
                        <i class="fas fa-times me-2"></i>
                        Onayı Geri Çek
                    </button>
                </form>
            @else
                <form action="{{ route('admin.agencies.approve', $agency) }}" method="POST" style="display: inline;">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="btn btn-outline"
                            style="color: white; border-color: rgba(255,255,255,0.3);">
                        <i class="fas fa-check me-2"></i>
                        Onayla
                    </button>
                </form>
            @endif

            @if($agency->is_active)
                <form action="{{ route('admin.agencies.deactivate', $agency) }}" method="POST" style="display: inline;">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="btn btn-outline"
                            style="color: white; border-color: rgba(255,255,255,0.3);"
                            onclick="return confirm('Acente\'yi pasif hale getirmek istediğinizden emin misiniz?')">
                        <i class="fas fa-pause me-2"></i>
                        Pasif Yap
                    </button>
                </form>
            @else
                <form action="{{ route('admin.agencies.activate', $agency) }}" method="POST" style="display: inline;">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="btn btn-outline"
                            style="color: white; border-color: rgba(255,255,255,0.3);">
                        <i class="fas fa-play me-2"></i>
                        Aktif Yap
                    </button>
                </form>
            @endif
        </div>
    </div>

    <div class="info-grid">
        <!-- Left Column -->
        <div>
            <!-- Basic Information -->
            <div class="info-card mb-4">
                <div class="info-card-header">
                    <div class="info-card-icon bg-gradient-primary">
                        <i class="fas fa-info-circle"></i>
                    </div>
                    <div class="info-card-title">
                        <h3>Temel Bilgiler</h3>
                    </div>
                </div>
                <div class="info-card-body">
                    <div class="info-row">
                        <span class="info-label">Acente Adı</span>
                        <span class="info-value">{{ $agency->name }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Acente Kodu</span>
                        <span class="info-value">{{ $agency->code }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Açıklama</span>
                        <span class="info-value {{ !$agency->description ? 'empty' : '' }}">
                            {{ $agency->description ?? 'Belirtilmemiş' }}
                        </span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">İş Türü</span>
                        <span class="info-value {{ !$agency->business_type ? 'empty' : '' }}">
                            @if($agency->business_type == 'domestic')
                                Yurtiçi
                            @elseif($agency->business_type == 'international')
                                Yurtdışı
                            @elseif($agency->business_type == 'both')
                                Karma
                            @else
                                Belirtilmemiş
                            @endif
                        </span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Komisyon Oranı</span>
                        <span class="info-value">%{{ number_format($agency->commission_rate, 2) }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Slug</span>
                        <span class="info-value">{{ $agency->slug }}</span>
                    </div>
                </div>
            </div>

            <!-- Contact Information -->
            <div class="info-card mb-4">
                <div class="info-card-header">
                    <div class="info-card-icon bg-gradient-success">
                        <i class="fas fa-address-book"></i>
                    </div>
                    <div class="info-card-title">
                        <h3>İletişim Bilgileri</h3>
                    </div>
                </div>
                <div class="info-card-body">
                    <div class="info-row">
                        <span class="info-label">İletişim Kişisi</span>
                        <span class="info-value {{ !$agency->contact_person ? 'empty' : '' }}">
                            {{ $agency->contact_person ?? 'Belirtilmemiş' }}
                        </span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Telefon</span>
                        <span class="info-value {{ !$agency->contact_phone ? 'empty' : '' }}">
                            {{ $agency->contact_phone ?? 'Belirtilmemiş' }}
                        </span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">E-posta</span>
                        <span class="info-value {{ !$agency->contact_email ? 'empty' : '' }}">
                            {{ $agency->contact_email ?? 'Belirtilmemiş' }}
                        </span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Web Sitesi</span>
                        <span class="info-value {{ !$agency->website_url ? 'empty' : '' }}">
                            @if($agency->website_url)
                                <a href="{{ $agency->website_url }}" target="_blank" class="text-primary">
                                    {{ $agency->website_url }}
                                </a>
                            @else
                                Belirtilmemiş
                            @endif
                        </span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Adres</span>
                        <span class="info-value {{ !$agency->contact_address ? 'empty' : '' }}">
                            {{ $agency->contact_address ?? 'Belirtilmemiş' }}
                        </span>
                    </div>

                    @if($agency->facebook_url || $agency->twitter_url || $agency->instagram_url || $agency->youtube_url)
                        <div class="info-row">
                            <span class="info-label">Sosyal Medya</span>
                            <div class="social-links">
                                @if($agency->facebook_url)
                                    <a href="{{ $agency->facebook_url }}" target="_blank" class="social-link"
                                       style="background: #1877f2;">
                                        <i class="fab fa-facebook"></i>
                                    </a>
                                @endif
                                @if($agency->twitter_url)
                                    <a href="{{ $agency->twitter_url }}" target="_blank" class="social-link"
                                       style="background: #1da1f2;">
                                        <i class="fab fa-twitter"></i>
                                    </a>
                                @endif
                                @if($agency->instagram_url)
                                    <a href="{{ $agency->instagram_url }}" target="_blank" class="social-link"
                                       style="background: #e4405f;">
                                        <i class="fab fa-instagram"></i>
                                    </a>
                                @endif
                                @if($agency->youtube_url)
                                    <a href="{{ $agency->youtube_url }}" target="_blank" class="social-link"
                                       style="background: #ff0000;">
                                        <i class="fab fa-youtube"></i>
                                    </a>
                                @endif
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Legal Information & Documents -->
            <div class="info-card">
                <div class="info-card-header">
                    <div class="info-card-icon bg-gradient-warning">
                        <i class="fas fa-file-contract"></i>
                    </div>
                    <div class="info-card-title">
                        <h3>Yasal Bilgiler & Belgeler</h3>
                    </div>
                </div>
                <div class="info-card-body">
                    <div class="info-row">
                        <span class="info-label">Vergi Numarası</span>
                        <span class="info-value {{ !$agency->tax_number ? 'empty' : '' }}">
                            {{ $agency->tax_number ?? 'Belirtilmemiş' }}
                        </span>
                    </div>

                    <div class="documents-grid mt-3">
                        @php
                            $documents = [
                                'tax_certificate' => 'Vergi Levhası',
                                'tursab_certificate' => 'TÜRSAB Belgesi',
                                'tursab_activity_certificate' => 'TÜRSAB Faaliyet Belgesi',
                                'tursab_registry_certificate' => 'TÜRSAB Sicil Belgesi'
                            ];
                        @endphp

                        @foreach($documents as $docKey => $docTitle)
                            <div class="document-item">
                                <div class="document-info">
                                    <div
                                        class="document-icon {{ $agency->{$docKey . '_file'} ? 'bg-success' : 'bg-gray-300' }}">
                                        <i class="fas {{ $agency->{$docKey . '_file'} ? 'fa-check' : 'fa-times' }}"></i>
                                    </div>
                                    <div>
                                        <div class="fw-medium" style="font-size: 14px;">{{ $docTitle }}</div>
                                        <div style="font-size: 12px; color: var(--gray-500);">
                                            {{ $agency->{$docKey . '_file'} ? 'Yüklendi' : 'Yüklenmedi' }}
                                        </div>
                                    </div>
                                </div>
                                @if($agency->{$docKey . '_file'})
                                    <div class="document-actions">
                                        <a href="{{ route('admin.agencies.documents.download', [$agency, $docKey]) }}"
                                           class="btn btn-sm btn-outline" target="_blank">
                                            <i class="fas fa-download"></i>
                                        </a>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Column -->
        <div>
            <!-- Status Information -->
            <div class="info-card mb-4">
                <div class="info-card-header">
                    <div class="info-card-icon bg-gradient-info">
                        <i class="fas fa-toggle-on"></i>
                    </div>
                    <div class="info-card-title">
                        <h3>Durum Bilgileri</h3>
                    </div>
                </div>
                <div class="info-card-body">
                    <div class="info-row">
                        <span class="info-label">Aktif Durumu</span>
                        <span class="info-value">
                            <span class="status-badge {{ $agency->is_active ? 'approved' : 'rejected' }}">
                                <i class="fas fa-circle"></i>
                                {{ $agency->is_active ? 'Aktif' : 'Pasif' }}
                            </span>
                        </span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Onay Durumu</span>
                        <span class="info-value">
                            <span class="status-badge {{ $agency->is_approved ? 'approved' : 'pending' }}">
                                <i class="fas fa-circle"></i>
                                {{ $agency->is_approved ? 'Onaylandı' : 'Onay Bekliyor' }}
                            </span>
                        </span>
                    </div>
                    @if($agency->approved_at)
                        <div class="info-row">
                            <span class="info-label">Onay Tarihi</span>
                            <span class="info-value">{{ $agency->approved_at->format('d.m.Y H:i') }}</span>
                        </div>
                    @endif
                    @if($agency->approver)
                        <div class="info-row">
                            <span class="info-label">Onaylayan</span>
                            <span class="info-value">{{ $agency->approver->full_name }}</span>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Agency Users -->
            <div class="info-card mb-4">
                <div class="info-card-header">
                    <div class="info-card-icon bg-gradient-primary">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="info-card-title">
                        <h3>Kullanıcılar ({{ $agency->users->count() }})</h3>
                    </div>
                </div>
                <div class="info-card-body">
                    @if($agency->users->count() > 0)
                        <div class="users-list">
                            @foreach($agency->users->take(5) as $user)
                                <div class="user-item">
                                    <img
                                        src="https://ui-avatars.com/api/?name={{ $user->full_name }}&background=gradient&color=fff"
                                        alt="{{ $user->full_name }}" class="user-avatar">
                                    <div class="user-info">
                                        <h4>{{ $user->full_name }}</h4>
                                        <p>
                                            @if($user->is_agency_owner)
                                                <span class="badge badge-primary">Sahip</span>
                                            @else
                                                {{ $user->position ?? 'Pozisyon belirtilmemiş' }}
                                            @endif
                                        </p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        @if($agency->users->count() > 5)
                            <div class="text-center mt-3">
                                <a href="{{ route('admin.users.index', ['agency' => $agency->id]) }}"
                                   class="btn btn-sm btn-outline">
                                    Tümünü Gör ({{ $agency->users->count() - 5 }} daha)
                                </a>
                            </div>
                        @endif
                    @else
                        <div class="empty-state">
                            <div class="empty-icon">
                                <i class="fas fa-users"></i>
                            </div>
                            <div class="empty-text">
                                <h4>Henüz kullanıcı yok</h4>
                                <p>Bu acenteye henüz kullanıcı eklenmemiş</p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Activity Timeline -->
            <div class="info-card">
                <div class="info-card-header">
                    <div class="info-card-icon bg-gradient-success">
                        <i class="fas fa-history"></i>
                    </div>
                    <div class="info-card-title">
                        <h3>Son Aktiviteler</h3>
                    </div>
                </div>
                <div class="info-card-body">
                    <div class="activity-timeline">
                        <div class="timeline-item">
                            <div class="timeline-marker bg-primary">
                                <i class="fas fa-plus"></i>
                            </div>
                            <div class="timeline-content">
                                <h4>Acente oluşturuldu</h4>
                                <p>{{ $agency->creator ? $agency->creator->full_name : 'Sistem' }} tarafından
                                    oluşturuldu</p>
                                <div class="timeline-time">{{ $agency->created_at->diffForHumans() }}</div>
                            </div>
                        </div>

                        @if($agency->approved_at)
                            <div class="timeline-item">
                                <div class="timeline-marker bg-success">
                                    <i class="fas fa-check"></i>
                                </div>
                                <div class="timeline-content">
                                    <h4>Acente onaylandı</h4>
                                    <p>{{ $agency->approver ? $agency->approver->full_name : 'Sistem' }} tarafından
                                        onaylandı</p>
                                    <div class="timeline-time">{{ $agency->approved_at->diffForHumans() }}</div>
                                </div>
                            </div>
                        @endif

                        @if($agency->updated_at != $agency->created_at)
                            <div class="timeline-item">
                                <div class="timeline-marker bg-info">
                                    <i class="fas fa-edit"></i>
                                </div>
                                <div class="timeline-content">
                                    <h4>Bilgiler güncellendi</h4>
                                    <p>{{ $agency->updater ? $agency->updater->full_name : 'Sistem' }} tarafından
                                        güncellendi</p>
                                    <div class="timeline-time">{{ $agency->updated_at->diffForHumans() }}</div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection