@extends('agency.layouts.app')

@section('title', $customer->full_name . ' – Aktiviteler')
@section('page_title', 'Aktiviteler')

@push('styles')
     <style>
          :root {
               --cp: #6366f1;
               --cp-light: #eef2ff;
               --cs: #10b981;
               --cw: #f59e0b;
               --cd: #ef4444;
               --text-main: #0f172a;
               --text-muted: #64748b;
               --border: #f1f5f9;
          }

          /* ── Üst stat kartları */
          .stat-row {
               display: grid;
               grid-template-columns: repeat(5, 1fr);
               gap: 1rem;
               margin-bottom: 1.5rem;
          }

          @media(max-width:900px) {
               .stat-row {
                    grid-template-columns: repeat(3, 1fr);
               }
          }

          @media(max-width:580px) {
               .stat-row {
                    grid-template-columns: repeat(2, 1fr);
               }
          }

          .stat-card {
               background: #fff;
               border-radius: 14px;
               border: 1px solid var(--border);
               padding: 1rem 1.25rem;
               display: flex;
               align-items: center;
               gap: .85rem;
               box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
               transition: box-shadow .15s;
          }

          .stat-card:hover {
               box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
          }

          .stat-icon {
               width: 40px;
               height: 40px;
               border-radius: 10px;
               display: flex;
               align-items: center;
               justify-content: center;
               font-size: 16px;
               flex-shrink: 0;
          }

          .stat-val {
               font-size: 1.35rem;
               font-weight: 800;
               color: var(--text-main);
               line-height: 1;
          }

          .stat-lbl {
               font-size: .72rem;
               color: var(--text-muted);
               font-weight: 500;
               margin-top: 2px;
          }

          /* ── Toolbar */
          .toolbar {
               background: #fff;
               border-radius: 14px;
               border: 1px solid var(--border);
               padding: 1rem 1.25rem;
               margin-bottom: 1rem;
               display: flex;
               gap: .75rem;
               flex-wrap: wrap;
               align-items: center;
               box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
          }

          .tb-select {
               border: 1px solid #e2e8f0;
               border-radius: 10px;
               padding: .42rem .85rem;
               font-size: .82rem;
               color: var(--text-main);
               background: #f8fafc;
               outline: none;
               cursor: pointer;
               transition: border .15s;
          }

          .tb-select:focus {
               border-color: var(--cp);
          }

          .tb-select:hover {
               border-color: #c7d2fe;
          }

          /* ── Timeline */
          .timeline-wrap {
               position: relative;
          }

          .timeline-wrap::before {
               content: '';
               position: absolute;
               left: 24px;
               top: 0;
               bottom: 0;
               width: 2px;
               background: linear-gradient(to bottom, var(--cp), transparent);
          }

          .tl-item {
               display: flex;
               gap: 1rem;
               margin-bottom: 1.25rem;
               position: relative;
               animation: fadeUp .3s ease both;
          }

          @keyframes fadeUp {
               from {
                    opacity: 0;
                    transform: translateY(8px);
               }

               to {
                    opacity: 1;
                    transform: none;
               }
          }

          .tl-dot {
               width: 48px;
               height: 48px;
               border-radius: 50%;
               display: flex;
               align-items: center;
               justify-content: center;
               font-size: 16px;
               flex-shrink: 0;
               z-index: 1;
               border: 3px solid #fff;
               box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
          }

          .tl-dot.call {
               background: #dbeafe;
               color: #2563eb;
          }

          .tl-dot.email {
               background: #fce7f3;
               color: #db2777;
          }

          .tl-dot.meeting {
               background: #d1fae5;
               color: #059669;
          }

          .tl-dot.booking {
               background: #ede9fe;
               color: #7c3aed;
          }

          .tl-dot.complaint {
               background: #fee2e2;
               color: #dc2626;
          }

          .tl-dot.note {
               background: #fef3c7;
               color: #d97706;
          }

          .tl-dot.sms {
               background: #e0f2fe;
               color: #0284c7;
          }

          .tl-dot.whatsapp {
               background: #dcfce7;
               color: #16a34a;
          }

          .tl-dot.task {
               background: #f1f5f9;
               color: #64748b;
          }

          .tl-body {
               flex: 1;
               background: #fff;
               border-radius: 14px;
               border: 1px solid var(--border);
               padding: 1rem 1.25rem;
               box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
               transition: box-shadow .15s;
               min-width: 0;
          }

          .tl-body:hover {
               box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
          }

          .tl-head {
               display: flex;
               justify-content: space-between;
               align-items: flex-start;
               gap: .5rem;
               flex-wrap: wrap;
               margin-bottom: .5rem;
          }

          .tl-type-badge {
               font-size: .72rem;
               font-weight: 700;
               text-transform: uppercase;
               letter-spacing: .4px;
               padding: 3px 9px;
               border-radius: 20px;
          }

          .tl-time {
               font-size: .75rem;
               color: #94a3b8;
          }

          .tl-subject {
               font-weight: 700;
               font-size: .9rem;
               color: var(--text-main);
               margin-bottom: 4px;
          }

          .tl-desc {
               font-size: .82rem;
               color: #475569;
          }

          .pill {
               display: inline-flex;
               align-items: center;
               padding: 2px 8px;
               border-radius: 20px;
               font-size: .7rem;
               font-weight: 600;
          }

          .pill.pending {
               background: #fef3c7;
               color: #92400e;
          }

          .pill.in_progress {
               background: #dbeafe;
               color: #1d4ed8;
          }

          .pill.completed {
               background: #d1fae5;
               color: #065f46;
          }

          .pill.cancelled {
               background: #fee2e2;
               color: #991b1b;
          }

          .pill.deferred {
               background: #f1f5f9;
               color: #475569;
          }

          .pr-low {
               background: #f1f5f9;
               color: #64748b;
          }

          .pr-normal {
               background: #e0f2fe;
               color: #0369a1;
          }

          .pr-high {
               background: #fef3c7;
               color: #b45309;
          }

          .pr-urgent {
               background: #fee2e2;
               color: #dc2626;
          }

          .tl-footer {
               display: flex;
               gap: .75rem;
               flex-wrap: wrap;
               margin-top: .75rem;
               border-top: 1px solid #f8fafc;
               padding-top: .6rem;
          }

          .tl-meta {
               font-size: .72rem;
               color: #94a3b8;
               display: flex;
               align-items: center;
               gap: 4px;
          }

          .act-btn {
               padding: 4px 10px;
               border-radius: 8px;
               border: none;
               font-size: .76rem;
               font-weight: 600;
               cursor: pointer;
               text-decoration: none;
               transition: all .15s;
          }

          .act-btn.edit {
               background: var(--cp-light);
               color: var(--cp);
          }

          .act-btn.delete {
               background: #fee2e2;
               color: #dc2626;
          }

          .act-btn.complete {
               background: #d1fae5;
               color: #059669;
          }

          /* ── Empty state */
          .empty-state {
               text-align: center;
               padding: 3rem;
               color: #94a3b8;
          }

          .empty-state i {
               font-size: 3rem;
               margin-bottom: 1rem;
               display: block;
          }

          /* ── Pagination */
          .pagination {
               margin-top: 1.25rem;
          }
     </style>
@endpush

@section('content')
     <div class="container-fluid">

          {{-- Breadcrumb --}}
          <div class="d-flex align-items-center gap-2 mb-3" style="font-size:.83rem;color:#94a3b8">
               <a href="{{ route('agency.customers.index') }}" style="color:#6366f1;text-decoration:none;font-weight:600">
                    <i class="fas fa-users me-1"></i>Müşteriler
               </a>
               <i class="fas fa-chevron-right" style="font-size:10px"></i>
               <a href="{{ route('agency.customers.show', $customer) }}"
                    style="color:#6366f1;text-decoration:none;font-weight:600">
                    {{ $customer->full_name }}
               </a>
               <i class="fas fa-chevron-right" style="font-size:10px"></i>
               <span style="color:var(--text-main);font-weight:600">Aktiviteler</span>
          </div>

          {{-- Flash --}}
          @if(session('success'))
               <div class="alert alert-success border-0 shadow-sm mb-3" style="border-radius:12px;font-size:.85rem">
                    <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
               </div>
          @endif
          @if(session('error'))
               <div class="alert alert-danger border-0 shadow-sm mb-3" style="border-radius:12px;font-size:.85rem">
                    <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
               </div>
          @endif

          {{-- Üst başlık + buton --}}
          <div class="d-flex justify-content-between align-items-center mb-3 gap-2 flex-wrap">
               <div>
                    <h5 style="font-weight:800;color:var(--text-main);margin:0">{{ $customer->full_name }} – Aktiviteler</h5>
                    <div style="font-size:.8rem;color:var(--text-muted)">Toplam {{ $stats['total'] }} kayıt</div>
               </div>
               <a href="{{ route('agency.customers.activities.create', $customer) }}" class="btn text-white"
                    style="background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:12px;padding:.6rem 1.5rem;font-weight:600;box-shadow:0 4px 12px rgba(99,102,241,.35)">
                    <i class="fas fa-plus me-2"></i>Yeni Aktivite
               </a>
          </div>

          {{-- Stat kartları --}}
          <div class="stat-row">
               <div class="stat-card">
                    <div class="stat-icon" style="background:#eef2ff;color:#6366f1"><i class="fas fa-list"></i></div>
                    <div>
                         <div class="stat-val">{{ $stats['total'] }}</div>
                         <div class="stat-lbl">Toplam</div>
                    </div>
               </div>
               <div class="stat-card">
                    <div class="stat-icon" style="background:#fef3c7;color:#f59e0b"><i class="fas fa-clock"></i></div>
                    <div>
                         <div class="stat-val">{{ $stats['pending'] }}</div>
                         <div class="stat-lbl">Bekleyen</div>
                    </div>
               </div>
               <div class="stat-card">
                    <div class="stat-icon" style="background:#fee2e2;color:#ef4444"><i
                              class="fas fa-exclamation-triangle"></i></div>
                    <div>
                         <div class="stat-val">{{ $stats['overdue'] }}</div>
                         <div class="stat-lbl">Gecikmiş</div>
                    </div>
               </div>
               <div class="stat-card">
                    <div class="stat-icon" style="background:#ede9fe;color:#8b5cf6"><i class="fas fa-flag"></i></div>
                    <div>
                         <div class="stat-val">{{ $stats['follow_up'] }}</div>
                         <div class="stat-lbl">Takip</div>
                    </div>
               </div>
               <div class="stat-card">
                    <div class="stat-icon" style="background:#d1fae5;color:#10b981"><i class="fas fa-check-circle"></i></div>
                    <div>
                         <div class="stat-val">{{ $stats['completed'] }}</div>
                         <div class="stat-lbl">Tamamlanan</div>
                    </div>
               </div>
          </div>

          {{-- Filtre toolbar --}}
          <form method="GET" action="{{ route('agency.customers.activities.index', $customer) }}">
               <div class="toolbar">
                    <select name="type" class="tb-select" onchange="this.form.submit()">
                         <option value="">— Tür —</option>
                         @foreach(['call' => '📞 Telefon', 'email' => '✉️ E-posta', 'meeting' => '🤝 Toplantı', 'booking' => '📋 Rezervasyon', 'complaint' => '😠 Şikayet', 'note' => '📝 Not', 'sms' => '💬 SMS', 'whatsapp' => '💚 WhatsApp', 'task' => '✅ Görev'] as $v => $l)
                              <option value="{{ $v }}" {{ request('type') == $v ? 'selected' : '' }}>{{ $l }}</option>
                         @endforeach
                    </select>

                    <select name="status" class="tb-select" onchange="this.form.submit()">
                         <option value="">— Durum —</option>
                         @foreach(['pending' => 'Beklemede', 'in_progress' => 'Devam Ediyor', 'completed' => 'Tamamlandı', 'cancelled' => 'İptal', 'deferred' => 'Ertelendi'] as $v => $l)
                              <option value="{{ $v }}" {{ request('status') == $v ? 'selected' : '' }}>{{ $l }}</option>
                         @endforeach
                    </select>

                    <select name="priority" class="tb-select" onchange="this.form.submit()">
                         <option value="">— Öncelik —</option>
                         @foreach(['low' => 'Düşük', 'normal' => 'Normal', 'high' => 'Yüksek', 'urgent' => 'Acil'] as $v => $l)
                              <option value="{{ $v }}" {{ request('priority') == $v ? 'selected' : '' }}>{{ $l }}</option>
                         @endforeach
                    </select>

                    <input type="date" name="date_from" value="{{ request('date_from') }}" class="tb-select"
                         placeholder="Başlangıç">
                    <input type="date" name="date_to" value="{{ request('date_to') }}" class="tb-select" placeholder="Bitiş">

                    @if(request()->hasAny(['type', 'status', 'priority', 'date_from', 'date_to']))
                         <a href="{{ route('agency.customers.activities.index', $customer) }}"
                              style="font-size:.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:4px;margin-left:auto">
                              <i class="fas fa-times"></i> Filtreleri Temizle
                         </a>
                    @endif
               </div>
          </form>

          {{-- Timeline --}}
          @if($activities->isEmpty())
               <div class="empty-state">
                    <i class="fas fa-stream" style="color:#c7d2fe"></i>
                    <p style="font-size:.95rem;font-weight:600">Henüz aktivite yok</p>
                    <a href="{{ route('agency.customers.activities.create', $customer) }}" class="btn text-white"
                         style="background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:10px;margin-top:.5rem">
                         İlk Aktiviteyi Ekle
                    </a>
               </div>
          @else
               <div class="timeline-wrap">
                    @foreach($activities as $i => $act)
                         @php
                              $dotMap = ['call' => 'call', 'email' => 'email', 'meeting' => 'meeting', 'booking' => 'booking', 'complaint' => 'complaint', 'note' => 'note', 'sms' => 'sms', 'whatsapp' => 'whatsapp', 'task' => 'task'];
                              $iconMap = ['call' => 'fas fa-phone', 'email' => 'fas fa-envelope', 'meeting' => 'fas fa-people-group', 'booking' => 'fas fa-calendar-check', 'complaint' => 'fas fa-exclamation-circle', 'note' => 'fas fa-sticky-note', 'sms' => 'fas fa-sms', 'whatsapp' => 'fab fa-whatsapp', 'task' => 'fas fa-tasks'];
                              $badgeMap = ['call' => 'background:#dbeafe;color:#2563eb', 'email' => 'background:#fce7f3;color:#db2777', 'meeting' => 'background:#d1fae5;color:#059669', 'booking' => 'background:#ede9fe;color:#7c3aed', 'complaint' => 'background:#fee2e2;color:#dc2626', 'note' => 'background:#fef3c7;color:#d97706', 'sms' => 'background:#e0f2fe;color:#0284c7', 'whatsapp' => 'background:#dcfce7;color:#16a34a', 'task' => 'background:#f1f5f9;color:#64748b'];
                              $dot = $dotMap[$act->activity_type] ?? 'task';
                              $icon = $iconMap[$act->activity_type] ?? 'fas fa-circle';
                              $badge = $badgeMap[$act->activity_type] ?? 'background:#f1f5f9;color:#64748b';
                             @endphp
                         <div class="tl-item" style="animation-delay:{{ $i * 0.04 }}s">
                              <div class="tl-dot {{ $dot }}"><i class="{{ $icon }}"></i></div>
                              <div class="tl-body">
                                   <div class="tl-head">
                                        <div class="d-flex align-items-center gap-2 flex-wrap">
                                             <span class="tl-type-badge" style="{{ $badge }}">{{ $act->activity_type_label }}</span>
                                             <span class="pill {{ $act->status }}">{{ $act->status_label }}</span>
                                             <span class="pill pr-{{ $act->priority }}"
                                                  style="font-size:.68rem">{{ $act->priority_label }}</span>
                                             @if($act->is_important)
                                                  <span style="color:#f59e0b;font-size:.8rem" title="Önemli"><i
                                                            class="fas fa-star"></i></span>
                                             @endif
                                             @if($act->isOverdue())
                                                  <span class="pill" style="background:#fee2e2;color:#dc2626"><i
                                                            class="fas fa-exclamation-triangle me-1"></i>Gecikmiş</span>
                                             @endif
                                        </div>
                                        <span class="tl-time">{{ $act->activity_date?->format('d.m.Y H:i') }}</span>
                                   </div>

                                   @if($act->subject)
                                        <div class="tl-subject">{{ $act->subject }}</div>
                                   @endif
                                   @if($act->description)
                                        <div class="tl-desc">{{ Str::limit($act->description, 160) }}</div>
                                   @endif

                                   <div class="tl-footer">
                                        @if($act->performedBy)
                                             <span class="tl-meta"><i class="fas fa-user"></i> {{ $act->performedBy->first_name }}</span>
                                        @endif
                                        @if($act->assignedTo)
                                             <span class="tl-meta"><i class="fas fa-user-tie"></i> {{ $act->assignedTo->first_name }}</span>
                                        @endif
                                        @if($act->duration_minutes)
                                             <span class="tl-meta"><i class="fas fa-clock"></i> {{ $act->duration_minutes }} dk</span>
                                        @endif
                                        @if($act->requires_follow_up && $act->follow_up_date)
                                             <span class="tl-meta" style="color:#f59e0b"><i class="fas fa-flag"></i> Takip:
                                                  {{ $act->follow_up_date->format('d.m.Y') }}</span>
                                        @endif

                                        <div class="ms-auto d-flex gap-1 flex-wrap">
                                             <a href="{{ route('agency.customers.activities.show', [$customer, $act]) }}"
                                                  class="act-btn" style="background:#f8fafc;color:#475569">
                                                  <i class="fas fa-eye"></i>
                                             </a>
                                             <a href="{{ route('agency.customers.activities.edit', [$customer, $act]) }}"
                                                  class="act-btn edit">
                                                  <i class="fas fa-pen"></i>
                                             </a>
                                             @if(!$act->isCompleted())
                                                  <button class="act-btn complete" onclick="completeActivity({{ $act->id }}, this)"
                                                       title="Tamamlandı olarak işaretle">
                                                       <i class="fas fa-check"></i>
                                                  </button>
                                             @endif
                                             <form method="POST"
                                                  action="{{ route('agency.customers.activities.destroy', [$customer, $act]) }}"
                                                  onsubmit="return confirm('Bu aktiviteyi silmek istediğinize emin misiniz?')"
                                                  style="display:inline">
                                                  @csrf @method('DELETE')
                                                  <button type="submit" class="act-btn delete"><i class="fas fa-trash"></i></button>
                                             </form>
                                        </div>
                                   </div>
                              </div>
                         </div>
                    @endforeach
               </div>

               {{-- Sayfalama --}}
               <div class="d-flex justify-content-center mt-3">
                    {{ $activities->links() }}
               </div>
          @endif

     </div>
@endsection

@push('scripts')
     <script>
          function completeActivity(id, btn) {
               btn.disabled = true;
               btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
               fetch(`{{ url('agency/customers/' . $customer->id . '/activities') }}/${id}/complete`, {
                    method: 'POST',
                    headers: {
                         'X-CSRF-TOKEN': '{{ csrf_token() }}',
                         'Content-Type': 'application/json',
                    }
               })
                    .then(r => r.json())
                    .then(data => {
                         if (data.success) {
                              // Tamamlandı pillini ekle ve butonu kaldır
                              btn.closest('.tl-footer').querySelector('.pill').outerHTML =
                                   '<span class="pill completed">Tamamlandı</span>';
                              btn.remove();
                         }
                    })
                    .catch(() => { btn.disabled = false; btn.innerHTML = '<i class="fas fa-check"></i>'; });
          }
     </script>
@endpush