@extends('layouts.admin')

@section('title', 'Görüşmeler')
@section('page-title', 'Görüşmeler')
@section('page-subtitle', 'Planlanan, tamamlanan ve iptal edilen görüşmeler')

@section('content')
<div class="mt-4 space-y-4">

    {{-- Üst Bar --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 px-4 py-3 flex items-center justify-between">
        <div class="flex items-center gap-2">
            <div class="flex rounded-lg border border-gray-200 overflow-hidden">
                <span class="bg-primary text-white px-3 py-2 text-sm font-medium flex items-center gap-1.5 cursor-default">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
                    Liste
                </span>
                <a href="{{ route('admin.gorusmeler.calendar') }}"
                   class="bg-white text-gray-600 px-3 py-2 text-sm hover:bg-gray-50 transition-colors flex items-center gap-1.5 border-l border-gray-200">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    Takvim
                </a>
            </div>
        </div>
        <div class="flex items-center gap-2">
            @role('super-admin')
            <button id="btnGorusmeci"
                    class="border border-gray-200 text-gray-600 px-3 py-2 rounded-lg text-sm hover:bg-gray-50 transition-colors flex items-center gap-1.5">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg>
                Görüşmeci Ekle
            </button>
            @endrole
            <a href="{{ route('admin.gorusmeler.create') }}"
               class="bg-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-orange-600 transition-colors flex items-center gap-1.5">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                Yeni Görüşme
            </a>
        </div>
    </div>

    {{-- İstatistik Kartları --}}
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
        <a href="{{ route('admin.gorusmeler.index', ['tab' => 'active']) }}"
           class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 flex items-center gap-3 hover:shadow-md transition-shadow"
           style="{{ $tab === 'active' ? 'outline:2px solid #60a5fa; outline-offset:0;' : '' }}">
            <div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            </div>
            <div>
                <p class="text-2xl font-bold text-gray-800">{{ $stats['scheduled'] + $stats['rescheduled'] }}</p>
                <p class="text-xs text-gray-500">Aktif Görüşme</p>
            </div>
        </a>
        <a href="{{ route('admin.gorusmeler.index', ['tab' => 'rescheduled']) }}"
           class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 flex items-center gap-3 hover:shadow-md transition-shadow"
           style="{{ $tab === 'rescheduled' ? 'outline:2px solid #fbbf24; outline-offset:0;' : '' }}">
            <div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
            </div>
            <div>
                <p class="text-2xl font-bold text-gray-800">{{ $stats['rescheduled'] }}</p>
                <p class="text-xs text-gray-500">Yeniden Planlandı</p>
            </div>
        </a>
        <a href="{{ route('admin.gorusmeler.index', ['tab' => 'completed']) }}"
           class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 flex items-center gap-3 hover:shadow-md transition-shadow"
           style="{{ $tab === 'completed' ? 'outline:2px solid #4ade80; outline-offset:0;' : '' }}">
            <div class="w-10 h-10 rounded-lg bg-green-50 flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            <div>
                <p class="text-2xl font-bold text-gray-800">{{ $stats['completed'] }}</p>
                <p class="text-xs text-gray-500">Tamamlandı</p>
            </div>
        </a>
        <a href="{{ route('admin.gorusmeler.index', ['tab' => 'cancelled']) }}"
           class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 flex items-center gap-3 hover:shadow-md transition-shadow"
           style="{{ $tab === 'cancelled' ? 'outline:2px solid #f87171; outline-offset:0;' : '' }}">
            <div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            <div>
                <p class="text-2xl font-bold text-gray-800">{{ $stats['cancelled'] }}</p>
                <p class="text-xs text-gray-500">İptal Edildi</p>
            </div>
        </a>
    </div>

    {{-- Filtre + Sekmeler --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        {{-- Sekme Başlıkları --}}
        <div class="flex border-b border-gray-100">
            <a href="{{ route('admin.gorusmeler.index', array_merge(request()->except('tab', 'active_page', 'completed_page', 'cancelled_page'), ['tab' => 'active'])) }}"
               class="px-5 py-3 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 {{ $tab === 'active' ? '' : 'border-transparent text-gray-500 hover:text-gray-700' }}"
               style="{{ $tab === 'active' ? 'border-color:#3b82f6; color:#2563eb;' : '' }}">
                <span class="w-2 h-2 rounded-full bg-blue-400 inline-block"></span>
                Aktif
                <span class="text-xs bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded-full">{{ $stats['scheduled'] + $stats['rescheduled'] }}</span>
            </a>
            <a href="{{ route('admin.gorusmeler.index', array_merge(request()->except('tab', 'active_page', 'completed_page', 'cancelled_page', 'rescheduled_page'), ['tab' => 'rescheduled'])) }}"
               class="px-5 py-3 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 {{ $tab === 'rescheduled' ? '' : 'border-transparent text-gray-500 hover:text-gray-700' }}"
               style="{{ $tab === 'rescheduled' ? 'border-color:#f59e0b; color:#d97706;' : '' }}">
                <span class="w-2 h-2 rounded-full bg-amber-400 inline-block"></span>
                Yeniden Planlandı
                <span class="text-xs bg-amber-50 text-amber-600 px-1.5 py-0.5 rounded-full">{{ $stats['rescheduled'] }}</span>
            </a>
            <a href="{{ route('admin.gorusmeler.index', array_merge(request()->except('tab', 'active_page', 'completed_page', 'cancelled_page'), ['tab' => 'completed'])) }}"
               class="px-5 py-3 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 {{ $tab === 'completed' ? '' : 'border-transparent text-gray-500 hover:text-gray-700' }}"
               style="{{ $tab === 'completed' ? 'border-color:#22c55e; color:#16a34a;' : '' }}">
                <span class="w-2 h-2 rounded-full bg-green-400 inline-block"></span>
                Tamamlandı
                <span class="text-xs bg-green-50 text-green-600 px-1.5 py-0.5 rounded-full">{{ $stats['completed'] }}</span>
            </a>
            <a href="{{ route('admin.gorusmeler.index', array_merge(request()->except('tab', 'active_page', 'completed_page', 'cancelled_page', 'rescheduled_page'), ['tab' => 'cancelled'])) }}"
               class="px-5 py-3 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 {{ $tab === 'cancelled' ? '' : 'border-transparent text-gray-500 hover:text-gray-700' }}"
               style="{{ $tab === 'cancelled' ? 'border-color:#ef4444; color:#dc2626;' : '' }}">
                <span class="w-2 h-2 rounded-full bg-red-400 inline-block"></span>
                İptal Edilenler
                <span class="text-xs bg-red-50 text-red-600 px-1.5 py-0.5 rounded-full">{{ $stats['cancelled'] }}</span>
            </a>

            {{-- Filtre (sağa yaslanmış) --}}
            <div class="ml-auto flex items-center gap-2 px-4">
                <form id="filterForm" method="GET" class="flex items-center gap-2">
                    <input type="hidden" name="tab" value="{{ $tab }}">
                    <select id="filterInterviewer" name="interviewer_id"
                            class="border border-gray-200 rounded-lg px-2 py-1.5 text-xs focus:outline-none focus:ring-1 focus:ring-orange-400 text-gray-600">
                        <option value="">Tüm Görüşmeciler</option>
                        @foreach($interviewers as $interviewer)
                        <option value="{{ $interviewer->id }}" {{ request('interviewer_id') == $interviewer->id ? 'selected' : '' }}>
                            {{ $interviewer->name }}
                        </option>
                        @endforeach
                    </select>
                    <input type="date" id="filterDateFrom" name="date_from" value="{{ request('date_from') }}"
                           class="border border-gray-200 rounded-lg px-2 py-1.5 text-xs focus:outline-none focus:ring-1 focus:ring-orange-400 text-gray-600">
                    <input type="date" id="filterDateTo" name="date_to" value="{{ request('date_to') }}"
                           class="border border-gray-200 rounded-lg px-2 py-1.5 text-xs focus:outline-none focus:ring-1 focus:ring-orange-400 text-gray-600">
                    @if(request()->hasAny(['interviewer_id', 'date_from', 'date_to']))
                    <a href="{{ route('admin.gorusmeler.index', ['tab' => $tab]) }}"
                       class="text-xs text-gray-400 hover:text-gray-600 px-1">✕ Temizle</a>
                    @endif
                </form>
            </div>
        </div>

        {{-- Tablo İçeriği --}}
        @php
            $currentList = match($tab) {
                'completed'   => $completedInterviews,
                'rescheduled' => $rescheduledInterviews,
                'cancelled'   => $cancelledInterviews,
                default       => $activeInterviews,
            };
        @endphp

        @if($currentList->isEmpty())
        <div class="text-center py-16 text-gray-400">
            <svg class="w-12 h-12 mx-auto mb-3 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            <p class="text-sm">Bu sekmede görüşme bulunamadı.</p>
        </div>
        @else
        <table class="w-full text-sm">
            <thead class="bg-gray-50 border-b border-gray-100">
                <tr>
                    <th class="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide w-1"></th>
                    <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Görüşme</th>
                    <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Başvuran</th>
                    <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Tarih & Saat</th>
                    <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Görüşmeci</th>
                    <th class="text-center px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Durum</th>
                    <th class="text-center px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide" style="width:148px; min-width:148px;">İşlemler</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100" id="interviewTableBody">
                @foreach($currentList as $interview)
                @php
                    $statusColors = [
                        'scheduled'   => ['bar' => 'bg-blue-400',   'badge' => 'bg-blue-100 text-blue-700'],
                        'rescheduled' => ['bar' => 'bg-amber-400',  'badge' => 'bg-amber-100 text-amber-700'],
                        'completed'   => ['bar' => 'bg-green-500',  'badge' => 'bg-green-100 text-green-700'],
                        'cancelled'   => ['bar' => 'bg-red-400',    'badge' => 'bg-red-100 text-red-700'],
                    ];
                    $sc = $statusColors[$interview->status] ?? ['bar' => 'bg-gray-300', 'badge' => 'bg-gray-100 text-gray-600'];
                    $barColor = match($tab) {
                        'active'      => 'bg-blue-400',
                        'rescheduled' => 'bg-amber-400',
                        'completed'   => 'bg-green-500',
                        'cancelled'   => 'bg-red-400',
                        default       => $sc['bar'],
                    };
                    $isToday    = $interview->scheduled_at->isToday();
                    $isTomorrow = $interview->scheduled_at->isTomorrow();
                    $isPast     = $interview->scheduled_at->isPast() && in_array($interview->status, ['scheduled', 'rescheduled']);
                @endphp
                <tr class="{{ $isPast ? 'bg-red-50/60 hover:bg-red-50' : 'hover:bg-gray-50/60' }} transition-colors interview-row border-b border-gray-100"
                    data-id="{{ $interview->id }}"
                    data-detail="{{ route('admin.gorusmeler.show', $interview) }}"
                    data-edit="{{ route('admin.gorusmeler.edit', $interview) }}"
                    data-update="{{ route('admin.gorusmeler.update', $interview) }}"
                    data-title="{{ $interview->title }}"
                    data-scheduled="{{ $interview->scheduled_at->format('Y-m-d\TH:i') }}"
                    data-duration="{{ $interview->duration_minutes }}"
                    data-location="{{ $interview->location }}"
                    data-meeting-link="{{ $interview->meeting_link }}"
                    data-notes="{{ $interview->notes }}"
                    data-interviewer="{{ $interview->interviewer_id }}">
                    {{-- Sol renkli durum çizgisi --}}
                    <td class="pl-2 pr-0 py-0 w-1">
                        <div class="w-1.5 h-14 rounded-full {{ $barColor }}"></div>
                    </td>
                    <td class="px-4 py-4">
                        <p class="font-medium text-gray-800">{{ $interview->title }}</p>
                        @if($interview->location)
                        <p class="text-xs text-gray-400 mt-0.5">📍 {{ $interview->location }}</p>
                        @elseif($interview->meeting_link)
                        <p class="text-xs text-gray-400 mt-0.5">🔗 Online</p>
                        @endif
                    </td>
                    <td class="px-4 py-4">
                        <p class="font-medium text-gray-700">{{ $interview->application?->full_name ?? $interview->candidate_name ?? '—' }}</p>
                        <p class="text-xs text-gray-400">{{ $interview->jobPosting?->title ?? ($interview->application ? 'Genel Başvuru' : 'Manuel Görüşme') }}</p>
                    </td>
                    <td class="px-4 py-4">
                        <div class="flex items-start gap-2">
                            <div>
                                <p class="text-base font-bold text-gray-900 leading-tight">{{ $interview->scheduled_at->format('H:i') }}</p>
                                <p class="text-xs font-semibold text-gray-600 mt-0.5">{{ $interview->scheduled_at->format('d.m.Y') }}</p>
                                <p class="text-xs text-gray-400">{{ $interview->duration_minutes }} dk</p>
                            </div>
                            <div class="flex flex-col gap-1 mt-0.5">
                                @if($isPast)
                                <span class="text-xs bg-red-50 text-red-500 px-1.5 py-0.5 rounded-full border border-red-100 font-semibold" title="Tarihi geçmiş">⚠️ Geçti</span>
                                @elseif($isToday)
                                <span class="text-xs bg-orange-50 text-orange-600 px-1.5 py-0.5 rounded-full border border-orange-100 font-semibold">Bugün</span>
                                @elseif($isTomorrow)
                                <span class="text-xs bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded-full border border-blue-100 font-semibold">Yarın</span>
                                @endif
                            </div>
                        </div>
                    </td>
                    <td class="px-4 py-4 text-gray-600 text-sm">
                        {{ $interview->interviewer->name ?? '—' }}
                    </td>
                    <td class="px-4 py-4 text-center">
                        <span class="text-xs px-2.5 py-1 rounded-full font-medium {{ $sc['badge'] }}">
                            {{ $interview->status_label }}
                        </span>
                    </td>
                    <td class="px-5 py-4">
                        <div class="flex items-center justify-center gap-1">
                            <a href="{{ route('admin.gorusmeler.show', $interview) }}"
                               title="Detay"
                               class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                            </a>
                            <a href="{{ route('admin.gorusmeler.edit', $interview) }}"
                               title="Düzenle"
                               class="w-8 h-8 flex items-center justify-center rounded-lg bg-orange-50 text-orange-600 hover:bg-orange-100 transition-colors">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                            </a>
                            @if($tab === 'active')
                            <button type="button"
                                    title="Tamamlandı olarak işaretle"
                                    data-action="complete"
                                    class="w-8 h-8 flex items-center justify-center rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition-colors">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            </button>
                            <button type="button"
                                    title="İptal Et"
                                    data-action="cancel"
                                    class="w-8 h-8 flex items-center justify-center rounded-lg bg-red-50 text-red-500 hover:bg-red-100 transition-colors">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                            </button>
                            @else
                            <div class="w-8 h-8 flex-shrink-0"></div>
                            <div class="w-8 h-8 flex-shrink-0"></div>
                            @endif
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        <div class="px-5 py-4 border-t border-gray-100">
            {{ $currentList->withQueryString()->links() }}
        </div>
        @endif
    </div>

</div>

{{-- Sağ Tık Menüsü --}}
<div id="rowContextMenu" style="position:fixed; z-index:9999; background:white; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.12); min-width:170px; padding:4px 0; display:none;">
    <a id="ctxRowDetail" href="#" style="display:flex; align-items:center; gap:8px; width:100%; padding:9px 14px; font-size:0.8rem; color:#374151; text-decoration:none;">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
        Detay
    </a>
    <a id="ctxRowEdit" href="#" style="display:flex; align-items:center; gap:8px; width:100%; padding:9px 14px; font-size:0.8rem; color:#374151; text-decoration:none;">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
        Düzenle
    </a>
    <div style="height:1px; background:#f3f4f6; margin:4px 0;"></div>
    <button id="ctxRowComplete" data-ctx-action="completed" style="display:flex; align-items:center; gap:8px; width:100%; padding:9px 14px; font-size:0.8rem; color:#16a34a; background:none; border:none; cursor:pointer; text-align:left; font-weight:500;">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
        Görüşme Yapıldı
    </button>
    <button id="ctxRowReschedule" data-ctx-action="rescheduled" style="display:flex; align-items:center; gap:8px; width:100%; padding:9px 14px; font-size:0.8rem; color:#d97706; background:none; border:none; cursor:pointer; text-align:left; font-weight:500;">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
        Yeniden Planla
    </button>
    <button id="ctxRowCancel" data-ctx-action="cancelled" style="display:flex; align-items:center; gap:8px; width:100%; padding:9px 14px; font-size:0.8rem; color:#dc2626; background:none; border:none; cursor:pointer; text-align:left; font-weight:500;">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
        İptal Et
    </button>
</div>

{{-- Hızlı Durum Güncelleme Form --}}
<form id="listQuickStatusForm" method="POST" style="display:none">
    @csrf
    @method('PUT')
    <input type="hidden" name="status"           id="lqStatus">
    <input type="hidden" name="title"            id="lqTitle">
    <input type="hidden" name="scheduled_at"     id="lqScheduledAt">
    <input type="hidden" name="duration_minutes" id="lqDuration">
    <input type="hidden" name="location"         id="lqLocation">
    <input type="hidden" name="meeting_link"     id="lqMeetingLink">
    <input type="hidden" name="notes"            id="lqNotes">
    <input type="hidden" name="interviewer_id"   id="lqInterviewerId">
</form>

{{-- Yeniden Planla Modal --}}
<div id="rescheduleModal" style="display:none; position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,0.35); align-items:center; justify-content:center;">
    <div style="background:white; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,0.18); width:100%; max-width:400px; margin:0 16px; padding:24px;">
        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
            <h3 style="font-size:1rem; font-weight:600; color:#1f2937; margin:0;">Yeniden Planla</h3>
            <button id="btnCloseReschedule" style="background:none; border:none; cursor:pointer; color:#9ca3af; font-size:1.2rem; line-height:1; padding:2px 6px;">&times;</button>
        </div>
        <div style="margin-bottom:14px;">
            <label style="display:block; font-size:0.78rem; font-weight:500; color:#374151; margin-bottom:5px;">Yeni Tarih & Saat</label>
            <input type="datetime-local" id="rescheduleDateTime"
                   style="width:100%; border:1px solid #d1d5db; border-radius:8px; padding:8px 10px; font-size:0.875rem; color:#1f2937; outline:none; box-sizing:border-box;">
        </div>
        <div style="display:flex; gap:8px; justify-content:flex-end; margin-top:20px;">
            <button id="btnCancelReschedule"
                    style="padding:8px 16px; border:1px solid #e5e7eb; border-radius:8px; background:white; color:#6b7280; font-size:0.875rem; cursor:pointer;">
                İptal
            </button>
            <button id="btnConfirmReschedule"
                    style="padding:8px 18px; border:none; border-radius:8px; background:#f59e0b; color:white; font-size:0.875rem; font-weight:600; cursor:pointer;">
                Kaydet
            </button>
        </div>
    </div>
</div>

{{-- Görüşmeci Ekle Modal --}}
@role('super-admin')
@include('admin.gorusmeler._gorusmeci_modal', ['allUsers' => $allUsers])
@endrole

@if(session('success'))
<div id="toast-success" class="fixed bottom-5 right-5 z-50 bg-green-500 text-white px-5 py-3 rounded-xl shadow-lg text-sm font-medium flex items-center gap-2">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
    {{ session('success') }}
</div>
<script nonce="{{ app('csp-nonce') }}">setTimeout(function(){ var t = document.getElementById('toast-success'); if(t) t.remove(); }, 3500);</script>
@endif

@if(session('error'))
<div id="toast-error" class="fixed bottom-5 right-5 z-50 bg-red-500 text-white px-5 py-3 rounded-xl shadow-lg text-sm font-medium flex items-center gap-2">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
    {{ session('error') }}
</div>
<script nonce="{{ app('csp-nonce') }}">setTimeout(function(){ var t = document.getElementById('toast-error'); if(t) t.remove(); }, 3500);</script>
@endif

<script nonce="{{ app('csp-nonce') }}">
(function () {
    var ctxRowData   = null;
    var rescheduleData = null;
    var ctxMenu      = document.getElementById('rowContextMenu');

    // ── Filtre formu: select ve date input değişince otomatik gönder ──────────
    var filterInterviewer = document.getElementById('filterInterviewer');
    var filterDateFrom    = document.getElementById('filterDateFrom');
    var filterDateTo      = document.getElementById('filterDateTo');
    var filterForm        = document.getElementById('filterForm');

    if (filterInterviewer) {
        filterInterviewer.addEventListener('change', function () { filterForm.submit(); });
    }
    if (filterDateFrom) {
        filterDateFrom.addEventListener('change', function () { filterForm.submit(); });
    }
    if (filterDateTo) {
        filterDateTo.addEventListener('change', function () { filterForm.submit(); });
    }

    // ── Görüşmeci Ekle butonu ─────────────────────────────────────────────────
    var btnGorusmeci = document.getElementById('btnGorusmeci');
    if (btnGorusmeci) {
        btnGorusmeci.addEventListener('click', function () {
            openGorusmeciModal();
        });
    }

    // ── Satır işlem butonları (Tamamla / İptal) ───────────────────────────────
    document.querySelectorAll('.interview-row').forEach(function (row) {
        // Tamamla butonu
        var btnComplete = row.querySelector('[data-action="complete"]');
        if (btnComplete) {
            btnComplete.addEventListener('click', function (e) {
                e.stopPropagation();
                quickStatus(row, 'completed');
            });
        }

        // İptal butonu
        var btnCancel = row.querySelector('[data-action="cancel"]');
        if (btnCancel) {
            btnCancel.addEventListener('click', function (e) {
                e.stopPropagation();
                quickStatus(row, 'cancelled');
            });
        }

        // Sağ tık menüsü
        row.addEventListener('contextmenu', function (e) {
            e.preventDefault();
            ctxRowData = {
                id:          row.dataset.id,
                detail:      row.dataset.detail,
                edit:        row.dataset.edit,
                update:      row.dataset.update,
                title:       row.dataset.title,
                scheduledAt: row.dataset.scheduled,
                duration:    row.dataset.duration,
                location:    row.dataset.location,
                meetingLink: row.dataset.meetingLink,
                notes:       row.dataset.notes,
                interviewer: row.dataset.interviewer,
            };
            document.getElementById('ctxRowDetail').href = ctxRowData.detail;
            document.getElementById('ctxRowEdit').href   = ctxRowData.edit;

            var menuW = 180, menuH = 200;
            var x = e.clientX, y = e.clientY;
            if (x + menuW > window.innerWidth)  x = x - menuW;
            if (y + menuH > window.innerHeight) y = y - menuH;
            ctxMenu.style.left    = x + 'px';
            ctxMenu.style.top     = y + 'px';
            ctxMenu.style.display = 'block';
        });
    });

    // ── Sağ tık menüsü butonları ──────────────────────────────────────────────
    document.querySelectorAll('[data-ctx-action]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var action = btn.getAttribute('data-ctx-action');
            ctxMenu.style.display = 'none';
            if (!ctxRowData) return;
            if (action === 'rescheduled') {
                openRescheduleModal(ctxRowData);
            } else {
                submitListStatus(ctxRowData, action);
            }
        });
    });

    // Menüyü kapat
    document.addEventListener('click', function () { ctxMenu.style.display = 'none'; });
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') {
            ctxMenu.style.display = 'none';
            closeRescheduleModal();
        }
    });

    // ── Yeniden Planla Modal ──────────────────────────────────────────────────
    var rescheduleModal   = document.getElementById('rescheduleModal');
    var btnCloseReschedule   = document.getElementById('btnCloseReschedule');
    var btnCancelReschedule  = document.getElementById('btnCancelReschedule');
    var btnConfirmReschedule = document.getElementById('btnConfirmReschedule');

    if (btnCloseReschedule) {
        btnCloseReschedule.addEventListener('click', closeRescheduleModal);
    }
    if (btnCancelReschedule) {
        btnCancelReschedule.addEventListener('click', closeRescheduleModal);
    }
    if (btnConfirmReschedule) {
        btnConfirmReschedule.addEventListener('click', confirmReschedule);
    }
    if (rescheduleModal) {
        rescheduleModal.addEventListener('click', function (e) {
            if (e.target === rescheduleModal) closeRescheduleModal();
        });
    }

    // ── Yardımcı fonksiyonlar ─────────────────────────────────────────────────
    function quickStatus(row, status) {
        var data = {
            id:          row.dataset.id,
            update:      row.dataset.update,
            title:       row.dataset.title,
            scheduledAt: row.dataset.scheduled,
            duration:    row.dataset.duration,
            location:    row.dataset.location,
            meetingLink: row.dataset.meetingLink,
            notes:       row.dataset.notes,
            interviewer: row.dataset.interviewer,
        };
        if (status === 'rescheduled') {
            openRescheduleModal(data);
        } else {
            submitListStatus(data, status);
        }
    }

    function openRescheduleModal(data) {
        rescheduleData = data;
        document.getElementById('rescheduleDateTime').value = data.scheduledAt || '';
        rescheduleModal.style.display = 'flex';
    }

    function closeRescheduleModal() {
        rescheduleModal.style.display = 'none';
        rescheduleData = null;
    }

    function confirmReschedule() {
        if (!rescheduleData) return;
        var newDateTime = document.getElementById('rescheduleDateTime').value;
        if (!newDateTime) {
            alert('Lütfen bir tarih ve saat seçin.');
            return;
        }
        var data = Object.assign({}, rescheduleData, { scheduledAt: newDateTime });
        closeRescheduleModal();
        submitListStatus(data, 'rescheduled');
    }

    function submitListStatus(data, status) {
        var form = document.getElementById('listQuickStatusForm');
        form.action = data.update;
        document.getElementById('lqStatus').value        = status;
        document.getElementById('lqTitle').value         = data.title;
        document.getElementById('lqScheduledAt').value   = data.scheduledAt;
        document.getElementById('lqDuration').value      = data.duration;
        document.getElementById('lqLocation').value      = data.location || '';
        document.getElementById('lqMeetingLink').value   = data.meetingLink || '';
        document.getElementById('lqNotes').value         = data.notes || '';
        document.getElementById('lqInterviewerId').value = data.interviewer || '';
        form.submit();
    }
})();
</script>
@endsection