@extends('agency.layouts.app')

@section('title', 'Aktivite Detayı – ' . $customer->full_name)
@section('page_title', 'Aktivite Detayı')

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

          .detail-wrap {
               display: grid;
               grid-template-columns: 1fr 340px;
               gap: 1.5rem;
               align-items: start;
          }

          @media(max-width:1000px) {
               .detail-wrap {
                    grid-template-columns: 1fr;
               }
          }

          .det-card {
               background: #fff;
               border-radius: 16px;
               border: 1px solid var(--border);
               box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
               margin-bottom: 1.25rem;
               overflow: hidden;
          }

          .det-header {
               padding: 1.25rem 1.5rem;
               border-bottom: 1px solid var(--border);
               display: flex;
               align-items: center;
               gap: .85rem;
          }

          .det-body {
               padding: 1.5rem;
          }

          /* Hero */
          .activity-hero {
               background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 60%, #06b6d4 100%);
               padding: 2rem;
               border-radius: 16px;
               color: #fff;
               margin-bottom: 1.5rem;
               position: relative;
               overflow: hidden;
          }

          .activity-hero::before {
               content: '';
               position: absolute;
               top: -40px;
               right: -40px;
               width: 180px;
               height: 180px;
               background: rgba(255, 255, 255, .07);
               border-radius: 50%;
          }

          .activity-hero::after {
               content: '';
               position: absolute;
               bottom: -30px;
               left: -20px;
               width: 120px;
               height: 120px;
               background: rgba(255, 255, 255, .05);
               border-radius: 50%;
          }

          .hero-type {
               display: inline-flex;
               align-items: center;
               gap: .5rem;
               font-size: .8rem;
               font-weight: 700;
               background: rgba(255, 255, 255, .2);
               padding: 4px 12px;
               border-radius: 20px;
               margin-bottom: .75rem;
          }

          .hero-subject {
               font-size: 1.35rem;
               font-weight: 800;
               margin-bottom: .4rem;
               line-height: 1.3;
          }

          .hero-meta {
               font-size: .82rem;
               opacity: .8;
               display: flex;
               gap: 1.25rem;
               flex-wrap: wrap;
          }

          .pill {
               display: inline-flex;
               align-items: center;
               padding: 3px 10px;
               border-radius: 20px;
               font-size: .73rem;
               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;
          }

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

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

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

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

          .info-grid {
               display: grid;
               grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
               gap: 1rem;
          }

          .info-item {}

          .ii-label {
               font-size: .72rem;
               font-weight: 600;
               color: #94a3b8;
               text-transform: uppercase;
               letter-spacing: .4px;
               margin-bottom: 4px;
          }

          .ii-val {
               font-size: .88rem;
               color: var(--text-main);
               font-weight: 500;
          }

          .note-box {
               background: #f8fafc;
               border: 1px solid var(--border);
               border-radius: 12px;
               padding: 1rem;
               font-size: .85rem;
               color: #475569;
               white-space: pre-wrap;
          }

          .side-action {
               width: 100%;
               border: none;
               border-radius: 12px;
               padding: .75rem 1rem;
               font-size: .84rem;
               font-weight: 600;
               cursor: pointer;
               display: flex;
               align-items: center;
               gap: .75rem;
               margin-bottom: .6rem;
               text-decoration: none;
               transition: all .15s;
          }

          .side-action:hover {
               filter: brightness(.95);
               transform: translateX(2px);
          }

          .side-action.edit {
               background: var(--cp-light);
               color: var(--cp);
          }

          .side-action.delete {
               background: #fee2e2;
               color: #dc2626;
          }

          .side-action.complete {
               background: #d1fae5;
               color: #059669;
          }

          .side-action.back {
               background: #f1f5f9;
               color: #475569;
          }
     </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>
               <a href="{{ route('agency.customers.activities.index', $customer) }}"
                    style="color:#6366f1;text-decoration:none;font-weight:600">Aktiviteler</a>
               <i class="fas fa-chevron-right" style="font-size:10px"></i>
               <span style="color:#0f172a;font-weight:600">Detay</span>
          </div>

          @php
               $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'];
               $icon = $iconMap[$activity->activity_type] ?? 'fas fa-circle';
          @endphp

          <div class="detail-wrap">

               {{-- SOL –– Ana içerik --}}
               <div>

                    {{-- Hero --}}
                    <div class="activity-hero">
                         <div class="hero-type">
                              <i class="{{ $icon }}"></i> {{ $activity->activity_type_label }}
                         </div>
                         <div class="hero-subject">{{ $activity->subject ?: '(Konu belirtilmemiş)' }}</div>
                         <div class="hero-meta">
                              <span><i
                                        class="fas fa-calendar me-1"></i>{{ $activity->activity_date?->format('d.m.Y H:i') }}</span>
                              @if($activity->performedBy)
                                   <span><i class="fas fa-user me-1"></i>{{ $activity->performedBy->full_name }}</span>
                              @endif
                              @if($activity->duration_minutes)
                                   <span><i class="fas fa-clock me-1"></i>{{ $activity->duration_minutes }} dk</span>
                              @endif
                         </div>
                         <div class="mt-3 d-flex gap-2 flex-wrap">
                              <span class="pill {{ $activity->status }}">{{ $activity->status_label }}</span>
                              <span class="pill pr-{{ $activity->priority }}">{{ $activity->priority_label }}</span>
                              @if($activity->is_important)
                                   <span class="pill" style="background:#fef3c7;color:#b45309"><i
                                             class="fas fa-star me-1"></i>Önemli</span>
                              @endif
                              @if($activity->isOverdue())
                                   <span class="pill" style="background:#fee2e2;color:#dc2626"><i
                                             class="fas fa-exclamation-triangle me-1"></i>Gecikmiş</span>
                              @endif
                              @if($activity->is_private)
                                   <span class="pill" style="background:rgba(255,255,255,.2);color:#fff"><i
                                             class="fas fa-lock me-1"></i>Gizli</span>
                              @endif
                         </div>
                    </div>

                    {{-- Detaylar --}}
                    <div class="det-card">
                         <div class="det-header">
                              <span style="font-size:.88rem;font-weight:700;color:var(--text-main)"><i
                                        class="fas fa-info-circle me-2" style="color:#6366f1"></i>Aktivite Detayları</span>
                         </div>
                         <div class="det-body">
                              @if($activity->description)
                                   <div class="mb-4">
                                        <div class="ii-label mb-2">Açıklama</div>
                                        <div class="note-box">{{ $activity->description }}</div>
                                   </div>
                              @endif

                              <div class="info-grid">
                                   <div class="info-item">
                                        <div class="ii-label">Yön</div>
                                        <div class="ii-val">
                                             @if($activity->direction === 'inbound') 📥 Gelen
                                             @elseif($activity->direction === 'outbound') 📤 Giden
                                             @else —
                                             @endif
                                        </div>
                                   </div>
                                   <div class="info-item">
                                        <div class="ii-label">İletişim Kanalı</div>
                                        <div class="ii-val">
                                             {{ $activity->contact_method ? ucfirst($activity->contact_method) : '—' }}</div>
                                   </div>
                                   <div class="info-item">
                                        <div class="ii-label">Sonuç</div>
                                        <div class="ii-val">
                                             @if($activity->outcome === 'successful') ✅ Başarılı
                                             @elseif($activity->outcome === 'unsuccessful') ❌ Başarısız
                                             @elseif($activity->outcome === 'follow_up_required') 🔄 Takip Gerekli
                                             @elseif($activity->outcome === 'no_answer') 📵 Cevap Yok
                                             @else —
                                             @endif
                                        </div>
                                   </div>
                                   <div class="info-item">
                                        <div class="ii-label">Atanan Temsilci</div>
                                        <div class="ii-val">{{ $activity->assignedTo?->full_name ?: '—' }}</div>
                                   </div>
                                   <div class="info-item">
                                        <div class="ii-label">Aktivite Tarihi</div>
                                        <div class="ii-val">{{ $activity->activity_date?->format('d.m.Y H:i') ?: '—' }}</div>
                                   </div>
                                   <div class="info-item">
                                        <div class="ii-label">Planlanan Tarih</div>
                                        <div class="ii-val">{{ $activity->scheduled_date?->format('d.m.Y H:i') ?: '—' }}
                                        </div>
                                   </div>
                                   <div class="info-item">
                                        <div class="ii-label">Son Tarih</div>
                                        <div class="ii-val"
                                             style="{{ $activity->isOverdue() ? 'color:#dc2626;font-weight:700' : '' }}">
                                             {{ $activity->due_date?->format('d.m.Y H:i') ?: '—' }}
                                        </div>
                                   </div>
                                   <div class="info-item">
                                        <div class="ii-label">Tamamlanma</div>
                                        <div class="ii-val">{{ $activity->completed_date?->format('d.m.Y H:i') ?: '—' }}
                                        </div>
                                   </div>
                                   @if($activity->requires_follow_up)
                                        <div class="info-item">
                                             <div class="ii-label">Takip Tarihi</div>
                                             <div class="ii-val" style="color:#f59e0b;font-weight:600">
                                                  <i
                                                       class="fas fa-flag me-1"></i>{{ $activity->follow_up_date?->format('d.m.Y') ?: '—' }}
                                             </div>
                                        </div>
                                   @endif
                              </div>

                              @if($activity->result || $activity->next_steps)
                                   <hr style="border-color:#f1f5f9;margin:1.25rem 0">
                                   <div class="info-grid">
                                        @if($activity->result)
                                             <div class="info-item" style="grid-column:span 2">
                                                  <div class="ii-label mb-2">Sonuç</div>
                                                  <div class="note-box">{{ $activity->result }}</div>
                                             </div>
                                        @endif
                                        @if($activity->next_steps)
                                             <div class="info-item" style="grid-column:span 2">
                                                  <div class="ii-label mb-2">Sonraki Adımlar</div>
                                                  <div class="note-box">{{ $activity->next_steps }}</div>
                                             </div>
                                        @endif
                                   </div>
                              @endif
                         </div>
                    </div>

                    {{-- Şikayet Detayları --}}
                    @if($activity->isComplaint())
                         <div class="det-card">
                              <div class="det-header">
                                   <span style="font-size:.88rem;font-weight:700;color:#dc2626"><i
                                             class="fas fa-exclamation-circle me-2"></i>Şikayet Detayları</span>
                              </div>
                              <div class="det-body">
                                   <div class="info-grid">
                                        <div class="info-item">
                                             <div class="ii-label">Kategori</div>
                                             <div class="ii-val">{{ $activity->complaint_category ?: '—' }}</div>
                                        </div>
                                        <div class="info-item">
                                             <div class="ii-label">Şiddet</div>
                                             <div class="ii-val">{{ $activity->complaint_severity_label }}</div>
                                        </div>
                                        @if($activity->resolved_at)
                                             <div class="info-item">
                                                  <div class="ii-label">Çözüm Tarihi</div>
                                                  <div class="ii-val">{{ $activity->resolved_at->format('d.m.Y H:i') }}</div>
                                             </div>
                                        @endif
                                        @if($activity->resolvedBy)
                                             <div class="info-item">
                                                  <div class="ii-label">Çözen</div>
                                                  <div class="ii-val">{{ $activity->resolvedBy->full_name }}</div>
                                             </div>
                                        @endif
                                   </div>
                                   @if($activity->resolution)
                                        <div class="mt-3">
                                             <div class="ii-label mb-2">Çözüm Açıklaması</div>
                                             <div class="note-box">{{ $activity->resolution }}</div>
                                        </div>
                                   @endif
                              </div>
                         </div>
                    @endif

                    {{-- Notlar --}}
                    @if($activity->internal_notes || $activity->customer_notes)
                         <div class="det-card">
                              <div class="det-header">
                                   <span style="font-size:.88rem;font-weight:700;color:var(--text-main)"><i
                                             class="fas fa-sticky-note me-2" style="color:#f59e0b"></i>Notlar</span>
                              </div>
                              <div class="det-body">
                                   @if($activity->internal_notes)
                                        <div class="mb-3">
                                             <div class="ii-label mb-2"><i class="fas fa-lock me-1"></i>Dahili Notlar</div>
                                             <div class="note-box" style="background:#fffbeb;border-color:#fde68a">
                                                  {{ $activity->internal_notes }}</div>
                                        </div>
                                   @endif
                                   @if($activity->customer_notes)
                                        <div>
                                             <div class="ii-label mb-2"><i class="fas fa-user me-1"></i>Müşteri Notları</div>
                                             <div class="note-box">{{ $activity->customer_notes }}</div>
                                        </div>
                                   @endif
                              </div>
                         </div>
                    @endif

               </div>

               {{-- SAĞ –– Sidebar --}}
               <div>

                    {{-- Hızlı Eylemler --}}
                    <div class="det-card">
                         <div class="det-header">
                              <span style="font-size:.88rem;font-weight:700;color:var(--text-main)"><i
                                        class="fas fa-bolt me-2" style="color:#f59e0b"></i>Hızlı Eylemler</span>
                         </div>
                         <div class="det-body">
                              <a href="{{ route('agency.customers.activities.edit', [$customer, $activity]) }}"
                                   class="side-action edit">
                                   <i class="fas fa-pen-to-square"></i> Düzenle
                              </a>
                              @if(!$activity->isCompleted())
                                   <button class="side-action complete" onclick="completeActivity()">
                                        <i class="fas fa-check-circle"></i> Tamamlandı İşaretle
                                   </button>
                              @endif
                              @if($activity->isComplaint() && $activity->status !== 'completed')
                                   <button class="side-action" style="background:#ede9fe;color:#7c3aed" onclick="openResolve()">
                                        <i class="fas fa-handshake"></i> Şikayeti Çöz
                                   </button>
                              @endif
                              <a href="{{ route('agency.customers.activities.index', $customer) }}" class="side-action back">
                                   <i class="fas fa-arrow-left"></i> Listeye Dön
                              </a>
                              <form method="POST"
                                   action="{{ route('agency.customers.activities.destroy', [$customer, $activity]) }}"
                                   onsubmit="return confirm('Bu aktiviteyi silmek istediğinize emin misiniz?')">
                                   @csrf @method('DELETE')
                                   <button type="submit" class="side-action delete">
                                        <i class="fas fa-trash"></i> Aktiviteyi Sil
                                   </button>
                              </form>
                         </div>
                    </div>

                    {{-- Audit Bilgisi --}}
                    <div class="det-card">
                         <div class="det-header">
                              <span style="font-size:.88rem;font-weight:700;color:var(--text-main)"><i
                                        class="fas fa-history me-2" style="color:#94a3b8"></i>Kayıt Bilgisi</span>
                         </div>
                         <div class="det-body">
                              <div class="info-grid" style="grid-template-columns:1fr">
                                   <div class="info-item">
                                        <div class="ii-label">Oluşturan</div>
                                        <div class="ii-val">{{ $activity->creator?->full_name ?: '—' }}</div>
                                   </div>
                                   <div class="info-item">
                                        <div class="ii-label">Oluşturulma</div>
                                        <div class="ii-val">{{ $activity->created_at->format('d.m.Y H:i') }}</div>
                                   </div>
                                   <div class="info-item">
                                        <div class="ii-label">Son Güncelleme</div>
                                        <div class="ii-val">{{ $activity->updated_at->diffForHumans() }}</div>
                                   </div>
                              </div>
                         </div>
                    </div>

               </div>
          </div>

          {{-- Şikayet Çöz Modal --}}
          @if($activity->isComplaint())
               <div id="resolveModal"
                    style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;display:none;align-items:center;justify-content:center">
                    <div
                         style="background:#fff;border-radius:20px;padding:2rem;width:100%;max-width:480px;box-shadow:0 20px 60px rgba(0,0,0,.2)">
                         <h6 style="font-weight:800;margin-bottom:1rem">Şikayeti Çöze Kavuştur</h6>
                         <textarea id="resolutionText" class="w-100"
                              style="border:1.5px solid #e2e8f0;border-radius:10px;padding:.75rem;font-size:.87rem;outline:none;resize:vertical"
                              rows="5" placeholder="Çözüm açıklamasını yazın…"></textarea>
                         <div class="d-flex justify-content-end gap-2 mt-3">
                              <button onclick="closeResolve()" class="btn btn-outline-secondary"
                                   style="border-radius:10px">İptal</button>
                              <button onclick="submitResolve()" class="btn text-white"
                                   style="background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:10px">Kaydet</button>
                         </div>
                    </div>
               </div>
          @endif

     </div>
@endsection

@push('scripts')
     <script>
          function completeActivity() {
               if (!confirm('Bu aktiviteyi tamamlandı olarak işaretlemek istiyor musunuz?')) return;
               fetch('{{ route("agency.customers.activities.complete", [$customer, $activity]) }}', {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
               }).then(r => r.json()).then(d => { if (d.success) location.reload(); });
          }

          @if($activity->isComplaint())
               function openResolve() { document.getElementById('resolveModal').style.display = 'flex'; }
               function closeResolve() { document.getElementById('resolveModal').style.display = 'none'; }
               function submitResolve() {
                    const res = document.getElementById('resolutionText').value.trim();
                    if (!res) { alert('Lütfen bir çözüm açıklaması yazın.'); return; }
                    fetch('{{ route("agency.customers.activities.resolve", [$customer, $activity]) }}', {
                         method: 'POST',
                         headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' },
                         body: JSON.stringify({ resolution: res })
                    }).then(r => r.json()).then(d => { if (d.success) location.reload(); });
               }
          @endif
     </script>
@endpush