@extends('layouts.admin')

@section('title', 'CRM & Manajemen Klien')
@section('page_title', 'CRM & Manajemen Klien')

@section('admin_content')
<div>
    <!-- Page Header -->
    <div class="ax-page-head" style="margin-bottom:var(--ax-space-6);">
        <div class="ax-page-head__row">
            <div>
                <h1 class="ax-page-head__title font-heading" style="font-size:2rem;">CRM &amp; Direktori Klien</h1>
                <p class="ax-page-head__subtitle">Pantau perjalanan calon pengantin, follow up draf belum bayar via WhatsApp, dan kelola akun klien.</p>
            </div>
            <div style="display:flex; gap:8px;">
                <a href="{{ route('admin.crm') }}" class="ax-btn ax-btn--secondary">
                    <i data-lucide="rotate-cw" style="width:14px;height:14px;"></i>
                    <span class="ax-btn__label">Segarkan Data</span>
                </a>
            </div>
        </div>
    </div>

    @if(session('success'))
        <div style="margin-bottom: var(--ax-space-4); padding: 12px 16px; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); color: #15803d; border-radius: var(--ax-radius-md); font-size: var(--ax-text-xs); font-weight: 600; display: flex; align-items: center; gap: 8px;">
            <i data-lucide="check-circle" style="width:16px; height:16px;"></i>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    @if(session('info'))
        <div style="margin-bottom: var(--ax-space-4); padding: 12px 16px; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); color: #1d4ed8; border-radius: var(--ax-radius-md); font-size: var(--ax-text-xs); font-weight: 600; display: flex; align-items: center; gap: 8px;">
            <i data-lucide="info" style="width:16px; height:16px;"></i>
            <span>{{ session('info') }}</span>
        </div>
    @endif

    <!-- 4 KPI Metrics Cards -->
    <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap:var(--ax-space-4); margin-bottom:var(--ax-space-6);">
        <!-- Card 1: Total Klien -->
        <div class="ax-card">
            <div class="ax-card__body" style="padding:16px;">
                <div class="ax-kpi">
                    <div class="ax-kpi__top">
                        <span class="ax-kpi__icon ax-kpi__icon--c1"><i data-lucide="users" style="width:18px;height:18px;"></i></span>
                        <span class="ax-kpi__label">Total Klien Terdaftar</span>
                    </div>
                    <div class="ax-kpi__value" style="font-size:1.75rem; font-weight:700; color:var(--ax-text-strong); margin-top:8px;">
                        {{ number_format($totalClients) }}
                    </div>
                    <div class="ax-kpi__caption" style="font-size:11px; color:var(--ax-text-muted); margin-top:4px;">
                        Pengguna akun mempelai
                    </div>
                </div>
            </div>
        </div>

        <!-- Card 2: Draf Belum Bayar (Leads) -->
        <div class="ax-card">
            <div class="ax-card__body" style="padding:16px;">
                <div class="ax-kpi">
                    <div class="ax-kpi__top">
                        <span class="ax-kpi__icon ax-kpi__icon--c2"><i data-lucide="file-edit" style="width:18px;height:18px;"></i></span>
                        <span class="ax-kpi__label">Draf Belum Bayar</span>
                    </div>
                    <div class="ax-kpi__value" style="font-size:1.75rem; font-weight:700; color:#d97706; margin-top:8px;">
                        {{ number_format($totalDraft) }}
                    </div>
                    <div class="ax-kpi__caption" style="font-size:11px; color:var(--ax-text-muted); margin-top:4px;">
                        Potensi follow-up WhatsApp
                    </div>
                </div>
            </div>
        </div>

        <!-- Card 3: Menunggu Pembayaran -->
        <div class="ax-card">
            <div class="ax-card__body" style="padding:16px;">
                <div class="ax-kpi">
                    <div class="ax-kpi__top">
                        <span class="ax-kpi__icon ax-kpi__icon--c3"><i data-lucide="clock" style="width:18px;height:18px;"></i></span>
                        <span class="ax-kpi__label">Menunggu Pembayaran</span>
                    </div>
                    <div class="ax-kpi__value" style="font-size:1.75rem; font-weight:700; color:#2563eb; margin-top:8px;">
                        {{ number_format($totalPending) }}
                    </div>
                    <div class="ax-kpi__caption" style="font-size:11px; color:var(--ax-text-muted); margin-top:4px;">
                        Order checkout pending
                    </div>
                </div>
            </div>
        </div>

        <!-- Card 4: Klien Aktif -->
        <div class="ax-card">
            <div class="ax-card__body" style="padding:16px;">
                <div class="ax-kpi">
                    <div class="ax-kpi__top">
                        <span class="ax-kpi__icon ax-kpi__icon--c4"><i data-lucide="shield-check" style="width:18px;height:18px;"></i></span>
                        <span class="ax-kpi__label">Klien Aktif (Paid)</span>
                    </div>
                    <div class="ax-kpi__value" style="font-size:1.75rem; font-weight:700; color:#16a34a; margin-top:8px;">
                        {{ number_format($totalActive) }}
                    </div>
                    <div class="ax-kpi__caption" style="font-size:11px; color:var(--ax-text-muted); margin-top:4px;">
                        Total Omzet: Rp {{ number_format($totalRevenue, 0, ',', '.') }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main CRM Table Card -->
    <section class="ax-card">
        <div class="ax-card__header" style="display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px;">
            <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Direktori &amp; Pipeline</span>
                <h3 class="ax-card__title">Daftar Klien Mempelai</h3>
            </div>

            <!-- Search Form -->
            <form action="{{ route('admin.crm') }}" method="GET" style="display:flex; gap:8px; width:100%; max-width:320px;">
                @if(request('status'))
                    <input type="hidden" name="status" value="{{ request('status') }}">
                @endif
                <input type="text" name="search" value="{{ $search ?? '' }}" placeholder="Cari nama, email, WA, slug..." style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                <button type="submit" class="ax-btn ax-btn--primary" style="padding:8px 12px;">
                    <i data-lucide="search" style="width:14px;height:14px;"></i>
                </button>
                @if(!empty($search))
                    <a href="{{ route('admin.crm', ['status' => $status]) }}" class="ax-btn ax-btn--secondary" style="padding:8px 12px;" title="Reset Pencarian">
                        <i data-lucide="x" style="width:14px;height:14px;"></i>
                    </a>
                @endif
            </form>
        </div>

        <!-- Segment Filter Tabs -->
        <div style="padding:0 var(--ax-space-4); border-bottom:1px solid var(--ax-border); display:flex; gap:8px; overflow-x:auto;">
            @php
                $segments = [
                    'all' => ['label' => 'Semua Klien', 'count' => $totalClients],
                    'draft' => ['label' => 'Draf Belum Bayar', 'count' => $totalDraft],
                    'pending' => ['label' => 'Menunggu Bayar', 'count' => $totalPending],
                    'active' => ['label' => 'Klien Aktif', 'count' => $totalActive],
                    'unverified' => ['label' => 'Email Belum Verif', 'count' => $totalUnverified],
                    'expiring' => ['label' => 'Segera Habis (<30h)', 'count' => null],
                    'expired' => ['label' => 'Kedaluwarsa', 'count' => null],
                ];
            @endphp
            @foreach($segments as $key => $seg)
                @php $isActive = $status === $key; @endphp
                <a href="{{ route('admin.crm', array_merge(request()->except(['page']), ['status' => $key])) }}"
                   style="padding:12px 14px; font-size:var(--ax-text-xs); font-weight:600; text-decoration:none; white-space:nowrap; border-bottom:2px solid {{ $isActive ? 'var(--jk-deepsage)' : 'transparent' }}; color: {{ $isActive ? 'var(--jk-deepsage)' : 'var(--ax-text-muted)' }}; transition:all 0.2s; display:flex; align-items:center; gap:6px;">
                    <span>{{ $seg['label'] }}</span>
                    @if($seg['count'] !== null)
                        <span style="background:{{ $isActive ? 'rgba(83, 107, 91, 0.15)' : 'var(--ax-surface-subtle)' }}; padding:2px 6px; border-radius:9999px; font-size:10px;">{{ $seg['count'] }}</span>
                    @endif
                </a>
            @endforeach
        </div>

        <!-- Table View -->
        <div class="ax-card__body" style="padding:0; overflow-x:auto;">
            <table class="ax-table" style="width:100%; border-collapse:collapse; font-size:var(--ax-text-xs);">
                <thead>
                    <tr style="border-bottom:1px solid var(--ax-border); background:var(--ax-surface-subtle); text-align:left;">
                        <th style="padding:12px 16px; font-weight:700; color:var(--ax-text-strong);">Klien &amp; Kontak</th>
                        <th style="padding:12px 16px; font-weight:700; color:var(--ax-text-strong);">Status Email</th>
                        <th style="padding:12px 16px; font-weight:700; color:var(--ax-text-strong);">Undangan &amp; Pasangan</th>
                        <th style="padding:12px 16px; font-weight:700; color:var(--ax-text-strong);">Paket &amp; Status</th>
                        <th style="padding:12px 16px; font-weight:700; color:var(--ax-text-strong);">Tanggal Bergabung</th>
                        <th style="padding:12px 16px; font-weight:700; color:var(--ax-text-strong); text-align:right;">Aksi Cepat</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($clients as $c)
                        @php
                            $inv = $c->invitations->first();
                            $cleanPhone = preg_replace('/[^0-9]/', '', $c->phone ?? '');
                            if (str_starts_with($cleanPhone, '0')) {
                                $cleanPhone = '62' . substr($cleanPhone, 1);
                            } elseif (!str_starts_with($cleanPhone, '62') && !empty($cleanPhone)) {
                                $cleanPhone = '62' . $cleanPhone;
                            }
                            $waGreeting = "Halo Kak {$c->name}, salam dari Janoer Koening. Apakah ada yang bisa kami bantu seputar undangan pernikahan digital Kakak?";
                        @endphp
                        <tr style="border-bottom:1px solid var(--ax-border); transition:background 0.15s;">
                            <!-- Klien & Kontak -->
                            <td style="padding:14px 16px;">
                                <div style="display:flex; align-items:center; gap:10px;">
                                    <div style="width:34px; height:34px; border-radius:9999px; background:rgba(83, 107, 91, 0.12); color:var(--jk-deepsage); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; shrink:0;">
                                        {{ strtoupper(substr($c->name, 0, 1)) }}
                                    </div>
                                    <div>
                                        <a href="{{ route('admin.crm.show', $c->id) }}" style="font-weight:700; color:var(--ax-text-strong); text-decoration:none; display:block;">
                                            {{ $c->name }}
                                        </a>
                                        <div style="font-size:11px; color:var(--ax-text-muted); display:flex; align-items:center; gap:6px; margin-top:2px;">
                                            <span>{{ $c->email }}</span>
                                            @if($cleanPhone)
                                                <span>•</span>
                                                <span>{{ $c->phone }}</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </td>

                            <!-- Status Email -->
                            <td style="padding:14px 16px;">
                                @if($c->hasVerifiedEmail())
                                    <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-bold bg-emerald-100 text-emerald-800">
                                        <i data-lucide="check" style="width:12px;height:12px;"></i>
                                        Verified
                                    </span>
                                @else
                                    <div style="display:flex; align-items:center; gap:6px;">
                                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-bold bg-amber-100 text-amber-800">
                                            <i data-lucide="alert-circle" style="width:12px;height:12px;"></i>
                                            Belum Verif
                                        </span>
                                        <form action="{{ route('admin.crm.manual-verify', $c->id) }}" method="POST" style="margin:0;">
                                            @csrf
                                            <button type="submit" title="Verifikasi Email Secara Manual" style="background:none; border:none; padding:4px; color:var(--ax-text-muted); cursor:pointer;" onclick="return confirm('Verifikasi email klien ini secara manual?')">
                                                <i data-lucide="user-check" style="width:14px;height:14px; color:#15803d;"></i>
                                            </button>
                                        </form>
                                    </div>
                                @endif
                            </td>

                            <!-- Undangan & Pasangan -->
                            <td style="padding:14px 16px;">
                                @if($inv)
                                    <div>
                                        <strong style="color:var(--ax-text-strong); display:block;">
                                            {{ $inv->groom_nickname && $inv->bride_nickname ? $inv->groom_nickname . ' & ' . $inv->bride_nickname : $inv->title }}
                                        </strong>
                                        <div style="font-size:11px; color:var(--ax-text-muted); margin-top:2px; display:flex; align-items:center; gap:4px;">
                                            <span>/u/{{ $inv->slug }}</span>
                                            <a href="{{ route('invitation.public', $inv->slug) }}" target="_blank" title="Lihat Undangan Publik" style="color:var(--jk-deepsage);">
                                                <i data-lucide="external-link" style="width:11px;height:11px;"></i>
                                            </a>
                                        </div>
                                    </div>
                                @else
                                    <span style="color:var(--ax-text-muted); font-style:italic;">Belum buat undangan</span>
                                @endif
                            </td>

                            <!-- Paket & Status -->
                            <td style="padding:14px 16px;">
                                @if($inv && $inv->is_paid)
                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-100 text-emerald-800 uppercase">
                                        PAID / PUBLISHED
                                    </span>
                                    @if($inv->template)
                                        <span style="font-size:11px; color:var(--ax-text-muted); display:block; margin-top:2px;">
                                            Tier: {{ ucfirst($inv->template->package_tier ?? 'Simple') }}
                                        </span>
                                    @endif
                                @elseif($inv)
                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-amber-100 text-amber-800 uppercase">
                                        DRAFT / UNPAID
                                    </span>
                                @else
                                    <span style="color:var(--ax-text-muted); font-size:11px;">-</span>
                                @endif
                            </td>

                            <!-- Tanggal Bergabung -->
                            <td style="padding:14px 16px; color:var(--ax-text-muted);">
                                <div>{{ $c->created_at->format('d M Y') }}</div>
                                <div style="font-size:10px;">{{ $c->created_at->diffForHumans() }}</div>
                            </td>

                            <!-- Aksi Cepat -->
                            <td style="padding:14px 16px; text-align:right;">
                                <div style="display:inline-flex; align-items:center; gap:6px;">
                                    <!-- 1-Click WhatsApp Direct -->
                                    @if($cleanPhone)
                                        <a href="https://wa.me/{{ $cleanPhone }}?text={{ urlencode($waGreeting) }}"
                                           target="_blank"
                                           class="ax-btn ax-btn--secondary"
                                           style="padding:6px 10px; background:#25D366; color:#ffffff; border-color:#25D366;"
                                           title="Chat WhatsApp Klien">
                                            <i data-lucide="message-circle" style="width:13px;height:13px;"></i>
                                            <span style="font-size:11px; font-weight:700;">WA</span>
                                        </a>
                                    @endif

                                    <!-- Detail 360 -->
                                    <a href="{{ route('admin.crm.show', $c->id) }}"
                                       class="ax-btn ax-btn--secondary"
                                       style="padding:6px 10px;"
                                       title="Lihat Profil 360 Klien">
                                        <i data-lucide="eye" style="width:13px;height:13px;"></i>
                                        <span style="font-size:11px;">Detail</span>
                                    </a>

                                    <!-- Impersonate Mode -->
                                    <form action="{{ route('admin.crm.impersonate', $c->id) }}" method="POST" style="margin:0;">
                                        @csrf
                                        <button type="submit"
                                                class="ax-btn ax-btn--secondary"
                                                style="padding:6px 8px;"
                                                title="Login sebagai Klien (Bantuan Teknis)"
                                                onclick="return confirm('Buka dashboard sebagai klien {{ $c->name }}?')">
                                            <i data-lucide="log-in" style="width:13px;height:13px;"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" style="padding:36px; text-align:center; color:var(--ax-text-muted);">
                                <i data-lucide="inbox" style="width:32px; height:32px; margin:0 auto 8px auto; display:block; opacity:0.5;"></i>
                                <span style="font-weight:600;">Tidak ada data klien yang sesuai dengan filter atau pencarian.</span>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if($clients->hasPages())
            <div style="padding:14px 16px; border-top:1px solid var(--ax-border); display:flex; justify-content:space-between; align-items:center;">
                <div style="font-size:11px; color:var(--ax-text-muted);">
                    Menampilkan {{ $clients->firstItem() }} - {{ $clients->lastItem() }} dari {{ $clients->total() }} klien
                </div>
                <div>
                    {{ $clients->links() }}
                </div>
            </div>
        @endif
    </section>
</div>
@endsection