@extends('admin.layouts.app')

@section('title', 'Acenteler')
@section('page_title', 'Acenteler')

@push('styles')
    <link rel="stylesheet" href="{{asset('assets/admin/css/index.css')}}">
@endpush

@section('content')
    <div class="container-fluid">
        <!-- Stats Row -->
        <div class="row mb-4">
            <div class="col-md-3 mb-3">
                <div class="card text-white" style="background: linear-gradient(45deg, #667eea, #764ba2);">
                    <div class="card-body text-center">
                        <h3>{{ $agencies->total() }}</h3>
                        <p class="mb-0">Toplam Acente</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="card text-white" style="background: linear-gradient(45deg, #56ab2f, #a8e6cf);">
                    <div class="card-body text-center">
                        <h3>{{ $agencies->where('is_active', true)->where('is_approved', true)->count() }}</h3>
                        <p class="mb-0">Aktif Acente</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="card text-white" style="background: linear-gradient(45deg, #f093fb, #f5576c);">
                    <div class="card-body text-center">
                        <h3>{{ $agencies->where('is_active', true)->where('is_approved', false)->count() }}</h3>
                        <p class="mb-0">Onay Bekleyen</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="card text-white" style="background: linear-gradient(45deg, #ff9a9e, #fecfef);">
                    <div class="card-body text-center">
                        <h3>{{ $agencies->where('is_active', false)->count() }}</h3>
                        <p class="mb-0">Pasif Acente</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-building me-2"></i>Acente Yönetimi
                </h5>
                <a href="{{ route('admin.agencies.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>Yeni Acente
                </a>
            </div>

            <div class="card-body">
                <!-- Filters -->
                <div class="row mb-3">
                    <div class="col-md-8">
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-outline-primary active filter-btn" data-filter="all">
                                Tümü
                            </button>
                            <button type="button" class="btn btn-outline-success filter-btn" data-filter="active">
                                Aktif
                            </button>
                            <button type="button" class="btn btn-outline-warning filter-btn" data-filter="pending">
                                Onay Bekleyen
                            </button>
                            <button type="button" class="btn btn-outline-danger filter-btn" data-filter="inactive">
                                Pasif
                            </button>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <input type="text" class="form-control" placeholder="Acente ara..." id="searchInput">
                    </div>
                </div>

                <!-- Agencies List -->
                <div class="row">
                    @forelse($agencies as $agency)
                        <div class="col-lg-4 col-md-6 mb-4 agency-item"
                             data-status="{{ $agency->is_active && $agency->is_approved ? 'active' : ($agency->is_active && !$agency->is_approved ? 'pending' : 'inactive') }}"
                             data-name="{{ strtolower($agency->name) }}">
                            <div class="card h-100">
                                <div class="card-body">
                                    <div class="d-flex align-items-start mb-3">
                                        <div class="me-3">
                                            @if($agency->logo)
                                                <img src="{{ Storage::url($agency->logo) }}"
                                                     alt="{{ $agency->name }}"
                                                     class="rounded"
                                                     style="width: 50px; height: 50px; object-fit: cover;">
                                            @else
                                                <div
                                                    class="bg-primary text-white rounded d-flex align-items-center justify-content-center"
                                                    style="width: 50px; height: 50px; font-weight: bold;">
                                                    {{ strtoupper(substr($agency->name, 0, 2)) }}
                                                </div>
                                            @endif
                                        </div>
                                        <div class="flex-grow-1">
                                            <h6 class="card-title mb-1">{{ $agency->name }}</h6>
                                            <small class="text-muted">{{ $agency->code }}</small>
                                            <br>
                                            <span class="badge bg-{{ $agency->status_color }} mt-1">
                                        {{ $agency->status_text }}
                                    </span>
                                        </div>
                                        <div class="dropdown">
                                            <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="dropdown">
                                                <i class="fas fa-ellipsis-v"></i>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li>
                                                    <a class="dropdown-item"
                                                       href="{{ route('admin.agencies.show', $agency) }}">
                                                        <i class="fas fa-eye me-2"></i>Görüntüle
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item"
                                                       href="{{ route('admin.agencies.edit', $agency) }}">
                                                        <i class="fas fa-edit me-2"></i>Düzenle
                                                    </a>
                                                </li>
                                                @if(!$agency->is_approved && $agency->is_active)
                                                    <li>
                                                        <form action="{{ route('admin.agencies.approve', $agency) }}"
                                                              method="POST" class="d-inline">
                                                            @csrf
                                                            @method('PATCH')
                                                            <button type="submit" class="dropdown-item text-success">
                                                                <i class="fas fa-check me-2"></i>Onayla
                                                            </button>
                                                        </form>
                                                    </li>
                                                @endif
                                                @if($agency->is_active)
                                                    <li>
                                                        <form action="{{ route('admin.agencies.deactivate', $agency) }}"
                                                              method="POST" class="d-inline">
                                                            @csrf
                                                            @method('PATCH')
                                                            <button type="submit" class="dropdown-item text-warning">
                                                                <i class="fas fa-pause me-2"></i>Pasif Yap
                                                            </button>
                                                        </form>
                                                    </li>
                                                @else
                                                    <li>
                                                        <form action="{{ route('admin.agencies.activate', $agency) }}"
                                                              method="POST" class="d-inline">
                                                            @csrf
                                                            @method('PATCH')
                                                            <button type="submit" class="dropdown-item text-success">
                                                                <i class="fas fa-play me-2"></i>Aktif Yap
                                                            </button>
                                                        </form>
                                                    </li>
                                                @endif
                                                <li>
                                                    <hr class="dropdown-divider">
                                                </li>
                                                <li>
                                                    <form action="{{ route('admin.agencies.destroy', $agency) }}"
                                                          method="POST"
                                                          onsubmit="return confirm('Bu acenteyi silmek istediğinizden emin misiniz?')">
                                                        @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>

                                    @if($agency->contact_person || $agency->contact_email || $agency->contact_phone)
                                        <div class="mb-3">
                                            @if($agency->contact_person)
                                                <div class="mb-1">
                                                    <small class="text-muted">
                                                        <i class="fas fa-user me-1"></i>{{ $agency->contact_person }}
                                                    </small>
                                                </div>
                                            @endif
                                            @if($agency->contact_email)
                                                <div class="mb-1">
                                                    <small class="text-muted">
                                                        <i class="fas fa-envelope me-1"></i>{{ $agency->contact_email }}
                                                    </small>
                                                </div>
                                            @endif
                                            @if($agency->contact_phone)
                                                <div class="mb-1">
                                                    <small class="text-muted">
                                                        <i class="fas fa-phone me-1"></i>{{ $agency->contact_phone }}
                                                    </small>
                                                </div>
                                            @endif
                                        </div>
                                    @endif

                                    <div class="row text-center border-top pt-2">
                                        <div class="col-4">
                                            <strong class="text-primary">{{ $agency->users_count ?? 0 }}</strong>
                                            <br>
                                            <small class="text-muted">Kullanıcı</small>
                                        </div>
                                        <div class="col-4">
                                            <strong class="text-success">%{{ $agency->commission_rate }}</strong>
                                            <br>
                                            <small class="text-muted">Komisyon</small>
                                        </div>
                                        <div class="col-4">
                                            <strong
                                                class="text-info">{{ $agency->created_at->diffForHumans() }}</strong>
                                            <br>
                                            <small class="text-muted">Kayıt</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="col-12">
                            <div class="text-center py-5">
                                <i class="fas fa-building fa-3x text-muted mb-3"></i>
                                <h5 class="text-muted">Henüz acente bulunmuyor</h5>
                                <p class="text-muted">İlk acentenizi eklemek için "Yeni Acente" butonuna tıklayın.</p>
                                <a href="{{ route('admin.agencies.create') }}" class="btn btn-primary">
                                    <i class="fas fa-plus me-2"></i>Yeni Acente Ekle
                                </a>
                            </div>
                        </div>
                    @endforelse
                </div>

                @if($agencies->hasPages())
                    <div class="d-flex justify-content-center mt-4">
                        {{ $agencies->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const filterButtons = document.querySelectorAll('.filter-btn');
            const agencyItems = document.querySelectorAll('.agency-item');
            const searchInput = document.getElementById('searchInput');

            // Filter functionality
            filterButtons.forEach(button => {
                button.addEventListener('click', function () {
                    const filter = this.dataset.filter;

                    filterButtons.forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');

                    agencyItems.forEach(item => {
                        const status = item.dataset.status;
                        if (filter === 'all' || status === filter) {
                            item.style.display = 'block';
                        } else {
                            item.style.display = 'none';
                        }
                    });
                });
            });

            // Search functionality
            searchInput.addEventListener('input', function () {
                const searchTerm = this.value.toLowerCase();

                agencyItems.forEach(item => {
                    const name = item.dataset.name;
                    if (name.includes(searchTerm)) {
                        item.style.display = 'block';
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
        });
    </script>
@endsection