@extends('layouts.app')

@section('title', 'Satış Ekibi Listesi')

@section('content')
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
        <h6 class="fw-semibold mb-0">Satış Ekibi Listesi</h6>
        <ul class="d-flex align-items-center gap-2">
            <li class="fw-medium">
                <a href="{{ route('dashboard') }}" class="d-flex align-items-center gap-1 hover-text-primary">
                    <iconify-icon icon="solar:home-smile-angle-outline" class="icon text-lg"></iconify-icon>
                    Ana Sayfa
                </a>
            </li>
            <li>-</li>
            <li class="fw-medium">Satışçılar</li>
        </ul>
    </div>

    <div class="kmc-filters">
        <div class="kmc-filters__search">
            <iconify-icon icon="solar:magnifer-outline" class="kmc-filters__search-icon"></iconify-icon>
            <input type="text" id="searchInput" class="kmc-filters__search-input" placeholder="Satışçı ara...">
        </div>

        <div class="kmc-filters__group">
            <!-- Departman Dropdown -->
            <div class="kmc-dropdown" id="departmanDropdown">
                <button type="button" class="kmc-dropdown__trigger">
                    <iconify-icon icon="solar:users-group-rounded-outline" class="kmc-dropdown__icon"></iconify-icon>
                    <span class="kmc-dropdown__text" id="departmanText">Tüm Departmanlar</span>
                    <iconify-icon icon="solar:alt-arrow-down-outline" class="kmc-dropdown__arrow"></iconify-icon>
                </button>
                <div class="kmc-dropdown__menu">
                    <div class="kmc-dropdown__item kmc-dropdown__item--active" data-value="all">
                        <iconify-icon icon="solar:users-group-rounded-bold" class="kmc-dropdown__item-icon"></iconify-icon>
                        <span>Tüm Departmanlar</span>
                        <iconify-icon icon="solar:check-circle-bold" class="kmc-dropdown__check"></iconify-icon>
                    </div>
                    <div class="kmc-dropdown__item" data-value="satisci">
                        <iconify-icon icon="solar:user-bold" class="kmc-dropdown__item-icon"></iconify-icon>
                        <span>Satış Ekibi</span>
                        <iconify-icon icon="solar:check-circle-bold" class="kmc-dropdown__check"></iconify-icon>
                    </div>
                    <div class="kmc-dropdown__item" data-value="produktor">
                        <iconify-icon icon="solar:briefcase-bold" class="kmc-dropdown__item-icon"></iconify-icon>
                        <span>Prodüktörler</span>
                        <iconify-icon icon="solar:check-circle-bold" class="kmc-dropdown__check"></iconify-icon>
                    </div>
                </div>
            </div>

            <!-- Sıralama Dropdown -->
            <div class="kmc-dropdown" id="siralamaDropdown">
                <button type="button" class="kmc-dropdown__trigger">
                    <iconify-icon icon="solar:sort-outline" class="kmc-dropdown__icon"></iconify-icon>
                    <span class="kmc-dropdown__text" id="siralamaText">İsme Göre</span>
                    <iconify-icon icon="solar:alt-arrow-down-outline" class="kmc-dropdown__arrow"></iconify-icon>
                </button>
                <div class="kmc-dropdown__menu">
                    <div class="kmc-dropdown__item kmc-dropdown__item--active" data-value="isim">
                        <iconify-icon icon="solar:sort-by-alphabet-bold" class="kmc-dropdown__item-icon"></iconify-icon>
                        <span>İsme Göre (A-Z)</span>
                        <iconify-icon icon="solar:check-circle-bold" class="kmc-dropdown__check"></iconify-icon>
                    </div>
                    <div class="kmc-dropdown__item" data-value="skor-desc">
                        <iconify-icon icon="solar:arrow-down-bold" class="kmc-dropdown__item-icon"></iconify-icon>
                        <span>Skor (Yüksek → Düşük)</span>
                        <iconify-icon icon="solar:check-circle-bold" class="kmc-dropdown__check"></iconify-icon>
                    </div>
                    <div class="kmc-dropdown__item" data-value="skor-asc">
                        <iconify-icon icon="solar:arrow-up-bold" class="kmc-dropdown__item-icon"></iconify-icon>
                        <span>Skor (Düşük → Yüksek)</span>
                        <iconify-icon icon="solar:check-circle-bold" class="kmc-dropdown__check"></iconify-icon>
                    </div>
                </div>
            </div>

            <!-- Export Dropdown -->
            <div class="kmc-dropdown kmc-dropdown--primary" id="exportDropdown">
                <button type="button" class="kmc-dropdown__trigger">
                    <iconify-icon icon="solar:file-download-outline" class="kmc-dropdown__icon"></iconify-icon>
                    <span class="kmc-dropdown__text">Dışa Aktar</span>
                    <iconify-icon icon="solar:alt-arrow-down-outline" class="kmc-dropdown__arrow"></iconify-icon>
                </button>
                <div class="kmc-dropdown__menu kmc-dropdown__menu--right">
                    <a class="kmc-dropdown__item" href="{{ route('export.satiscilar.excel', ['yil' => $yil, 'ay' => $ay]) }}">
                        <iconify-icon icon="vscode-icons:file-type-excel" class="kmc-dropdown__item-icon"></iconify-icon>
                        <span>Excel (.xlsx)</span>
                    </a>
                    <a class="kmc-dropdown__item" href="{{ route('export.satiscilar.pdf', ['yil' => $yil, 'ay' => $ay]) }}">
                        <iconify-icon icon="vscode-icons:file-type-pdf2" class="kmc-dropdown__item-icon"></iconify-icon>
                        <span>PDF (.pdf)</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row gy-4">
        @foreach($satiscilar as $satisci)
            <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="card radius-12 border-0 h-100 shadow-sm salesperson-card">
                    <div class="card-body p-20">
                        <div class="d-flex align-items-start justify-content-between mb-20">
                            <div>
                                <h6 class="text-lg fw-bold mb-4">{{ $satisci['ad_soyad'] }}</h6>
                                <span class="text-secondary-light text-sm d-flex align-items-center gap-1">
                                    <iconify-icon icon="solar:user-outline"></iconify-icon>
                                    {{ ucfirst($satisci['pozisyon']) }}
                                </span>
                            </div>
                            <div class="score-circle-container">
                                <div class="score-circle {{ $satisci['renk'] }}">
                                    <span class="score-value">{{ $satisci['ai_skoru'] }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="row g-2 mb-20">
                            <div class="col-6">
                                <div class="bg-neutral-50 radius-8 p-12 text-center h-100">
                                    <span class="text-xs text-secondary-light d-block mb-4">Aylık Hedef</span>
                                    <span
                                        class="text-sm fw-bold text-primary-light">₺{{ number_format($satisci['aylik_hedef'], 0, ',', '.') }}</span>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="bg-neutral-50 radius-8 p-12 text-center h-100">
                                    <span class="text-xs text-secondary-light d-block mb-4">Yıllık Hedef</span>
                                    <span
                                        class="text-sm fw-bold text-primary-light">₺{{ number_format($satisci['yillik_hedef'], 0, ',', '.') }}</span>
                                </div>
                            </div>
                        </div>

                        <div
                            class="d-flex align-items-center justify-content-center gap-2 mb-20 bg-neutral-50 radius-8 py-8 px-12">
                            <iconify-icon icon="solar:calendar-outline" class="text-secondary-light"></iconify-icon>
                            <span class="text-xs text-secondary-light">İşe Başlama:
                                {{ date('d.m.Y', strtotime($satisci['ise_baslama_tarihi'])) }}</span>
                        </div>

                        <a href="{{ route('satiscilar.show', $satisci['id']) }}"
                            class="btn btn-primary-600 w-100 radius-8 py-12 d-flex align-items-center justify-content-center gap-2">
                            <iconify-icon icon="solar:chart-outline" class="text-xl"></iconify-icon>
                            Detaylı Performans
                        </a>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    @push('styles')
        <style>
            /* ===== FILTERS BAR ===== */
            .kmc-filters {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: var(--space-4);
                padding: var(--space-4) var(--space-5);
                background: var(--bg-secondary);
                border: 1px solid var(--border-primary);
                border-radius: var(--radius-xl);
                margin-bottom: var(--space-6);
                flex-wrap: wrap;
            }

            .kmc-filters__search {
                position: relative;
                flex: 1;
                min-width: 200px;
                max-width: 350px;
            }

            .kmc-filters__search-icon {
                position: absolute;
                left: var(--space-4);
                top: 50%;
                transform: translateY(-50%);
                font-size: 20px;
                color: var(--text-tertiary);
                pointer-events: none;
            }

            .kmc-filters__search-input {
                width: 100%;
                padding: var(--space-3) var(--space-4) var(--space-3) var(--space-12);
                background: var(--bg-tertiary);
                border: 1px solid var(--border-primary);
                border-radius: var(--radius-lg);
                font-size: var(--text-sm);
                color: var(--text-primary);
                transition: all var(--duration-fast) var(--ease-out);
            }

            .kmc-filters__search-input:focus {
                outline: none;
                border-color: var(--color-primary-500);
                box-shadow: 0 0 0 3px rgba(72, 127, 255, 0.1);
            }

            .kmc-filters__search-input::placeholder {
                color: var(--text-tertiary);
            }

            .kmc-filters__group {
                display: flex;
                align-items: center;
                gap: var(--space-3);
                flex-wrap: wrap;
            }

            /* ===== CUSTOM DROPDOWN ===== */
            .kmc-dropdown {
                position: relative;
            }

            .kmc-dropdown__trigger {
                display: flex;
                align-items: center;
                gap: var(--space-2);
                padding: var(--space-3) var(--space-4);
                background: var(--bg-tertiary);
                border: 1px solid var(--border-primary);
                border-radius: var(--radius-lg);
                font-size: var(--text-sm);
                font-weight: var(--font-medium);
                color: var(--text-primary);
                cursor: pointer;
                transition: all var(--duration-fast) var(--ease-out);
                white-space: nowrap;
            }

            .kmc-dropdown__trigger:hover {
                border-color: var(--color-primary-400);
                background: var(--bg-secondary);
            }

            .kmc-dropdown__icon {
                font-size: 18px;
                color: var(--text-secondary);
            }

            .kmc-dropdown__arrow {
                font-size: 14px;
                color: var(--text-tertiary);
                transition: transform var(--duration-fast) var(--ease-out);
            }

            .kmc-dropdown--open .kmc-dropdown__arrow {
                transform: rotate(180deg);
            }

            .kmc-dropdown__menu {
                position: absolute;
                top: calc(100% + 8px);
                left: 0;
                min-width: 220px;
                background: var(--bg-secondary);
                border: 1px solid var(--border-primary);
                border-radius: var(--radius-lg);
                box-shadow: var(--shadow-xl);
                opacity: 0;
                visibility: hidden;
                transform: translateY(-10px);
                transition: all var(--duration-fast) var(--ease-out);
                z-index: 100;
                overflow: hidden;
            }

            .kmc-dropdown__menu--right {
                left: auto;
                right: 0;
            }

            .kmc-dropdown--open .kmc-dropdown__menu {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }

            .kmc-dropdown__item {
                display: flex;
                align-items: center;
                gap: var(--space-3);
                padding: var(--space-3) var(--space-4);
                color: var(--text-primary);
                font-size: var(--text-sm);
                font-weight: var(--font-medium);
                text-decoration: none;
                cursor: pointer;
                transition: all var(--duration-fast) var(--ease-out);
            }

            .kmc-dropdown__item:hover {
                background: var(--bg-tertiary);
            }

            .kmc-dropdown__item-icon {
                font-size: 18px;
                color: var(--text-secondary);
            }

            .kmc-dropdown__item:hover .kmc-dropdown__item-icon {
                color: var(--color-primary-500);
            }

            .kmc-dropdown__check {
                margin-left: auto;
                font-size: 16px;
                color: var(--color-primary-500);
                opacity: 0;
                transition: opacity var(--duration-fast) var(--ease-out);
            }

            .kmc-dropdown__item--active {
                background: rgba(72, 127, 255, 0.08);
            }

            .kmc-dropdown__item--active .kmc-dropdown__item-icon {
                color: var(--color-primary-500);
            }

            .kmc-dropdown__item--active .kmc-dropdown__check {
                opacity: 1;
            }

            /* Primary Dropdown (Export) */
            .kmc-dropdown--primary .kmc-dropdown__trigger {
                background: var(--color-primary-500);
                border-color: var(--color-primary-500);
                color: white;
            }

            .kmc-dropdown--primary .kmc-dropdown__trigger:hover {
                background: var(--color-primary-600);
                border-color: var(--color-primary-600);
            }

            .kmc-dropdown--primary .kmc-dropdown__icon,
            .kmc-dropdown--primary .kmc-dropdown__arrow,
            .kmc-dropdown--primary .kmc-dropdown__text {
                color: white;
                background: transparent;
            }

            /* ===== SALESPERSON CARDS ===== */
            .salesperson-card {
                transition: transform 0.2s, box-shadow 0.2s;
            }

            .salesperson-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
            }

            .score-circle-container {
                width: 60px;
                height: 60px;
                position: relative;
            }

            .score-circle {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                border: 4px solid #eee;
            }

            .score-circle.yesil {
                border-color: #10b981;
                background-color: rgba(16, 185, 129, 0.1);
                color: #10b981;
            }

            .score-circle.sari {
                border-color: #f59e0b;
                background-color: rgba(245, 158, 11, 0.1);
                color: #f59e0b;
            }

            .score-circle.kirmizi {
                border-color: #ef4444;
                background-color: rgba(239, 68, 68, 0.1);
                color: #ef4444;
            }

            .score-value {
                font-size: 14px;
                font-weight: 800;
            }

            /* ===== RESPONSIVE ===== */
            @media (max-width: 768px) {
                .kmc-filters {
                    flex-direction: column;
                    align-items: stretch;
                }

                .kmc-filters__search {
                    max-width: 100%;
                }

                .kmc-filters__group {
                    justify-content: stretch;
                }

                .kmc-dropdown {
                    flex: 1;
                }

                .kmc-dropdown__trigger {
                    width: 100%;
                    justify-content: center;
                }

                .kmc-dropdown__menu {
                    width: 100%;
                }
            }
        </style>
    @endpush

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Dropdown functionality
                const dropdowns = document.querySelectorAll('.kmc-dropdown');

                dropdowns.forEach(dropdown => {
                    const trigger = dropdown.querySelector('.kmc-dropdown__trigger');
                    const menu = dropdown.querySelector('.kmc-dropdown__menu');
                    const items = dropdown.querySelectorAll('.kmc-dropdown__item');
                    const textEl = dropdown.querySelector('.kmc-dropdown__text');

                    // Toggle dropdown on trigger click
                    trigger.addEventListener('click', function(e) {
                        e.stopPropagation();
                        // Close other dropdowns
                        dropdowns.forEach(d => {
                            if (d !== dropdown) d.classList.remove('kmc-dropdown--open');
                        });
                        dropdown.classList.toggle('kmc-dropdown--open');
                    });

                    // Prevent menu clicks from closing dropdown immediately
                    menu.addEventListener('click', function(e) {
                        e.stopPropagation();
                    });

                    items.forEach(item => {
                        item.addEventListener('click', function(e) {
                            // For link items (like export), let them navigate
                            if (item.tagName === 'A') {
                                // Close dropdown after a tiny delay to allow navigation
                                setTimeout(() => {
                                    dropdown.classList.remove('kmc-dropdown--open');
                                }, 100);
                                return;
                            }

                            // For regular items, handle selection
                            e.preventDefault();

                            // Update active state
                            items.forEach(i => i.classList.remove('kmc-dropdown__item--active'));
                            item.classList.add('kmc-dropdown__item--active');

                            // Update trigger text
                            if (textEl) {
                                textEl.textContent = item.querySelector('span').textContent;
                            }

                            // Close dropdown
                            dropdown.classList.remove('kmc-dropdown--open');

                            // Trigger filtering/sorting
                            const value = item.dataset.value;
                            if (dropdown.id === 'departmanDropdown') {
                                filterByDepartman(value);
                            } else if (dropdown.id === 'siralamaDropdown') {
                                sortCards(value);
                            }
                        });
                    });
                });

                // Close dropdowns when clicking outside
                document.addEventListener('click', function() {
                    dropdowns.forEach(d => d.classList.remove('kmc-dropdown--open'));
                });

                // Search functionality
                const searchInput = document.getElementById('searchInput');
                const cards = document.querySelectorAll('.salesperson-card');

                if (searchInput) {
                    searchInput.addEventListener('input', function() {
                        const query = this.value.toLowerCase().trim();

                        cards.forEach(card => {
                            const name = card.querySelector('h6').textContent.toLowerCase();
                            const container = card.closest('.col-xxl-3');

                            if (name.includes(query)) {
                                container.style.display = '';
                            } else {
                                container.style.display = 'none';
                            }
                        });
                    });
                }

                // Filter by department
                function filterByDepartman(value) {
                    cards.forEach(card => {
                        const pozisyon = card.querySelector('.text-secondary-light span, .text-secondary-light').textContent.toLowerCase();
                        const container = card.closest('.col-xxl-3');

                        if (value === 'all') {
                            container.style.display = '';
                        } else if (value === 'satisci' && pozisyon.includes('satış')) {
                            container.style.display = '';
                        } else if (value === 'produktor' && pozisyon.includes('prodüktör')) {
                            container.style.display = '';
                        } else {
                            container.style.display = value === 'all' ? '' : 'none';
                        }
                    });
                }

                // Sort cards
                function sortCards(value) {
                    const container = document.querySelector('.row.gy-4');
                    const cardContainers = Array.from(container.querySelectorAll('.col-xxl-3'));

                    cardContainers.sort((a, b) => {
                        const cardA = a.querySelector('.salesperson-card');
                        const cardB = b.querySelector('.salesperson-card');

                        if (value === 'isim') {
                            const nameA = cardA.querySelector('h6').textContent.toLowerCase();
                            const nameB = cardB.querySelector('h6').textContent.toLowerCase();
                            return nameA.localeCompare(nameB, 'tr');
                        } else {
                            const scoreA = parseInt(cardA.querySelector('.score-value').textContent) || 0;
                            const scoreB = parseInt(cardB.querySelector('.score-value').textContent) || 0;

                            if (value === 'skor-desc') {
                                return scoreB - scoreA;
                            } else {
                                return scoreA - scoreB;
                            }
                        }
                    });

                    cardContainers.forEach(card => container.appendChild(card));
                }
            });
        </script>
    @endpush
@endsection