@extends('layouts.performance')

@section('title', 'Performans Raporu')

@section('perf-content')
@php
    use App\Support\EvaluationHelper;
@endphp

<div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
    <div>
        <h1 class="h4 mb-1">Performans Raporu</h1>
        <p class="text-muted mb-0">1. Amir %60 + 2. Amir %40 ağırlığıyla performans notlarını görüntüleyin.</p>
        <div class="d-flex flex-wrap align-items-center gap-2 mt-2">
            <span class="badge bg-primary-subtle text-primary">Soru sayısı: set bazlı</span>
            <span class="text-muted small">Toplam {{ $totalRows }} kayıt</span>
        </div>
    </div>
    <div class="d-flex flex-wrap gap-2">
        <a href="{{ $exportUrl }}" class="btn btn-primary" target="_blank" rel="noopener">Excel Aktar</a>
    </div>
</div>

<div class="card">
    <div class="card-body p-0">
        <div class="p-3 border-bottom">
            <form method="get" action="{{ route('admin.reports.index') }}" class="filter-bar filter-bar-compact d-flex flex-wrap gap-2 align-items-center">
                <div class="filter-dropdown" data-filter="period">
                    <button type="button" class="form-control filter-dropdown-toggle" aria-haspopup="listbox" aria-expanded="false">
                        {{ $periodLabel !== '' ? $periodLabel : 'Tüm dönemler' }}
                    </button>
                    <input type="hidden" name="period_id" value="{{ $periodFilter > 0 ? $periodFilter : '' }}">
                    <div class="filter-dropdown-panel">
                        <input type="text" class="form-control filter-dropdown-search" placeholder="Ara..." autocomplete="off">
                        <div class="filter-dropdown-list" role="listbox">
                            <button type="button" class="filter-dropdown-option {{ $periodFilter === 0 ? 'is-selected' : '' }}" data-value="">
                                Tüm dönemler
                            </button>
                            @foreach ($periods as $period)
                                <button type="button"
                                        class="filter-dropdown-option {{ $periodFilter === (int) $period->id ? 'is-selected' : '' }}"
                                        data-value="{{ (int) $period->id }}">
                                    {{ $period->name }}
                                </button>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="filter-dropdown" data-filter="dept">
                    <button type="button" class="form-control filter-dropdown-toggle" aria-haspopup="listbox" aria-expanded="false">
                        {{ $deptFilter !== '' ? $deptFilter : 'Tüm departmanlar' }}
                    </button>
                    <input type="hidden" name="dept" value="{{ $deptFilter }}">
                    <div class="filter-dropdown-panel">
                        <input type="text" class="form-control filter-dropdown-search" placeholder="Ara..." autocomplete="off">
                        <div class="filter-dropdown-list" role="listbox">
                            <button type="button" class="filter-dropdown-option {{ $deptFilter === '' ? 'is-selected' : '' }}" data-value="">
                                Tüm departmanlar
                            </button>
                            @foreach ($deptOptions as $dept)
                                <button type="button"
                                        class="filter-dropdown-option {{ $deptFilter === (string) $dept ? 'is-selected' : '' }}"
                                        data-value="{{ $dept }}">
                                    {{ $dept }}
                                </button>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="filter-dropdown" data-filter="company">
                    <button type="button" class="form-control filter-dropdown-toggle" aria-haspopup="listbox" aria-expanded="false">
                        {{ $companyFilter !== '' ? $companyFilter : 'Tüm firmalar' }}
                    </button>
                    <input type="hidden" name="company" value="{{ $companyFilter }}">
                    <div class="filter-dropdown-panel">
                        <input type="text" class="form-control filter-dropdown-search" placeholder="Ara..." autocomplete="off">
                        <div class="filter-dropdown-list" role="listbox">
                            <button type="button" class="filter-dropdown-option {{ $companyFilter === '' ? 'is-selected' : '' }}" data-value="">
                                Tüm firmalar
                            </button>
                            @foreach ($companyOptions as $company)
                                <button type="button"
                                        class="filter-dropdown-option {{ $companyFilter === (string) $company ? 'is-selected' : '' }}"
                                        data-value="{{ $company }}">
                                    {{ $company }}
                                </button>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="filter-dropdown" data-filter="center">
                    <button type="button" class="form-control filter-dropdown-toggle" aria-haspopup="listbox" aria-expanded="false">
                        {{ $centerFilterLabel !== '' ? $centerFilterLabel : 'Tüm merkezler' }}
                    </button>
                    <input type="hidden" name="center_id" value="{{ $centerFilter > 0 ? $centerFilter : '' }}">
                    <div class="filter-dropdown-panel">
                        <input type="text" class="form-control filter-dropdown-search" placeholder="Ara..." autocomplete="off">
                        <div class="filter-dropdown-list" role="listbox">
                            <button type="button" class="filter-dropdown-option {{ $centerFilter === 0 ? 'is-selected' : '' }}" data-value="">
                                Tüm merkezler
                            </button>
                            @foreach ($centerOptions as $center)
                                @php
                                    $centerLabel = trim((string) $center->center_no);
                                    $centerLabel = $centerLabel !== '' ? $centerLabel . ' - ' . (string) $center->name : (string) $center->name;
                                @endphp
                                <button type="button"
                                        class="filter-dropdown-option {{ $centerFilter === (int) $center->id ? 'is-selected' : '' }}"
                                        data-value="{{ (int) $center->id }}">
                                    {{ $centerLabel }}
                                </button>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="filter-dropdown" data-filter="status">
                    <button type="button" class="form-control filter-dropdown-toggle" aria-haspopup="listbox" aria-expanded="false">
                        @if ($statusFilter === 'not_started')
                            Başlamadı
                        @elseif ($statusFilter === 'draft')
                            Taslak
                        @elseif ($statusFilter === 'submitted')
                            Yapıldı
                        @else
                            Durum
                        @endif
                    </button>
                    <input type="hidden" name="status" value="{{ $statusFilter }}">
                    <div class="filter-dropdown-panel">
                        <input type="text" class="form-control filter-dropdown-search" placeholder="Ara..." autocomplete="off">
                        <div class="filter-dropdown-list" role="listbox">
                            <button type="button" class="filter-dropdown-option {{ $statusFilter === '' ? 'is-selected' : '' }}" data-value="">
                                Durum
                            </button>
                            <button type="button" class="filter-dropdown-option {{ $statusFilter === 'not_started' ? 'is-selected' : '' }}" data-value="not_started">
                                Başlamadı
                            </button>
                            <button type="button" class="filter-dropdown-option {{ $statusFilter === 'draft' ? 'is-selected' : '' }}" data-value="draft">
                                Taslak
                            </button>
                            <button type="button" class="filter-dropdown-option {{ $statusFilter === 'submitted' ? 'is-selected' : '' }}" data-value="submitted">
                                Yapıldı
                            </button>
                        </div>
                    </div>
                </div>
                <input type="text"
                       name="q"
                       class="form-control"
                       placeholder="Ara: dönem, firma, personel, amir"
                       value="{{ $search }}">
                <button type="submit" class="btn btn-outline-primary">Filtrele</button>
                @if ($search !== '' || $periodFilter > 0 || $deptFilter !== '' || $companyFilter !== '' || $centerFilter > 0 || $statusFilter !== '')
                    <a href="{{ route('admin.reports.index') }}" class="btn btn-outline-secondary">Temizle</a>
                @endif
            </form>
        </div>

        <div class="table-responsive">
            <table class="table align-middle table-hover mb-0">
                <thead class="table-light">
                <tr>
                    <th>Dönem</th>
                    <th>Personel</th>
                    <th>Sorumluluk Merkezi</th>
                    <th>1. Amir</th>
                    <th>2. Amir</th>
                    <th>1.Amir Ortalama</th>
                    <th>2.Amir Ortalama</th>
                    <th>Genel Ortalama</th>
                    <th>Seviye</th>
                    <th>Durum</th>
                </tr>
                </thead>
                <tbody>
                @foreach ($rows as $row)
                    @php
                        $statusE2Label = $row->has_evaluator2 ? EvaluationHelper::statusLabel((string) $row->status_e2) : 'Yok';
                        $statusE1 = (string) $row->status_e1;
                        $statusE2 = $row->has_evaluator2 ? (string) $row->status_e2 : '';
                        $rowStatusClass = '';
                        if ($row->has_evaluator2) {
                            if ($statusE1 === 'submitted' && $statusE2 === 'submitted') {
                                $rowStatusClass = 'report-status-done';
                            } elseif ($statusE1 === 'submitted' && $statusE2 === 'not_started') {
                                $rowStatusClass = 'report-status-mixed';
                            } elseif ($statusE1 === 'not_started' && $statusE2 === 'not_started') {
                                $rowStatusClass = 'report-status-pending';
                            }
                        } elseif ($statusE1 === 'submitted') {
                            $rowStatusClass = 'report-status-done-noe2';
                        }
                        $detailUrl = route('admin.reports.detail', ['id' => $row->id, 'return_to' => $returnTo]);
                        $detailUrl1 = $detailUrl . '#answers-e1';
                        $detailUrl2 = $detailUrl . '#answers-e2';
                    @endphp
                    <tr class="{{ $rowStatusClass }}">
                        <td>{{ $row->period_name }}</td>
                        <td>{{ $row->employee_name }}</td>
                        <td>{{ $row->center_label }}</td>
                        <td>{{ $row->evaluator1_name }}</td>
                        <td>{{ $row->evaluator2_name }}</td>
                        <td>
                            @if ($row->avg1 !== null)
                                <a href="{{ $detailUrl1 }}" class="text-decoration-none">
                                    {{ number_format($row->avg1, 2, '.', '') }}
                                </a>
                            @else
                                -
                            @endif
                        </td>
                        <td>
                            @if ($row->avg2 !== null)
                                <a href="{{ $detailUrl2 }}" class="text-decoration-none">
                                    {{ number_format($row->avg2, 2, '.', '') }}
                                </a>
                            @else
                                -
                            @endif
                        </td>
                        <td>
                            @if ($row->final_score !== null)
                                <a href="{{ $detailUrl }}" class="text-decoration-none">
                                    {{ number_format($row->final_score, 2, '.', '') }}
                                </a>
                            @else
                                -
                            @endif
                        </td>
                        <td>
                            @if ($row->final_score !== null)
                                <span class="score-level {{ $row->grade['class'] }}">{{ $row->grade['label'] }}</span>
                            @else
                                -
                            @endif
                        </td>
                        <td>{{ EvaluationHelper::statusLabel((string) $row->status_e1) }} / {{ $statusE2Label }}</td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>

        @if ($totalPages > 1)
            <div class="border-top p-3">
                <nav>
                    <ul class="pagination justify-content-end mb-0">
                        @for ($i = 1; $i <= $totalPages; $i++)
                            @php
                                $pageParams = request()->query();
                                $pageParams['page'] = $i;
                            @endphp
                            <li class="page-item {{ $i === $page ? 'active' : '' }}">
                                <a class="page-link" href="{{ route('admin.reports.index', $pageParams) }}">{{ $i }}</a>
                            </li>
                        @endfor
                    </ul>
                </nav>
            </div>
        @endif
    </div>
</div>

<script>
  document.querySelectorAll('.filter-dropdown').forEach((dropdown) => {
    const toggle = dropdown.querySelector('.filter-dropdown-toggle');
    const search = dropdown.querySelector('.filter-dropdown-search');
    const options = Array.from(dropdown.querySelectorAll('.filter-dropdown-option'));
    const hidden = dropdown.querySelector('input[type="hidden"]');

    const closeDropdown = () => {
      dropdown.classList.remove('open');
      toggle.setAttribute('aria-expanded', 'false');
    };

    const filterOptions = (query) => {
      const needle = query.trim().toLowerCase();
      options.forEach((option) => {
        const text = option.textContent.toLowerCase();
        option.hidden = needle !== '' && !text.includes(needle);
      });
    };

    toggle.addEventListener('click', (event) => {
      event.preventDefault();
      const isOpen = dropdown.classList.toggle('open');
      toggle.setAttribute('aria-expanded', String(isOpen));
      if (isOpen) {
        search.value = '';
        filterOptions('');
        search.focus();
      }
    });

    options.forEach((option) => {
      option.addEventListener('click', () => {
        options.forEach((item) => item.classList.remove('is-selected'));
        option.classList.add('is-selected');
        hidden.value = option.dataset.value || '';
        toggle.textContent = option.textContent.trim() || toggle.textContent;
        closeDropdown();
      });
    });

    search.addEventListener('input', () => {
      filterOptions(search.value);
    });

    document.addEventListener('click', (event) => {
      if (!dropdown.contains(event.target)) {
        closeDropdown();
      }
    });
  });
</script>
@endsection