@extends('admin.layout')

@section('title', 'Manajemen Konsumen')

@section('content')
<div class="flex-1 flex flex-col gap-4 w-full">
    <div class="flex justify-between items-center">
        <div>
            <h2 class="font-headline-lg text-3xl font-bold text-on-surface">Manajemen Konsumen</h2>
            <p class="text-sm text-on-surface-variant mt-1">Kelola data pelanggan, riwayat pesanan, dan preferensi layanan.</p>
        </div>
    </div>

    <!-- Stats Bar -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div class="bg-surface-container-lowest p-6 rounded-2xl shadow-sm border border-outline-variant/30">
            <div class="flex justify-between items-start mb-2">
                <span class="text-sm text-on-surface-variant">Total Konsumen</span>
                <span class="material-symbols-outlined text-primary">groups</span>
            </div>
            <p class="text-3xl font-bold font-headline-md">{{ number_format($totalKonsumen, 0, ',', '.') }}</p>
        </div>
        <div class="bg-surface-container-lowest p-6 rounded-2xl shadow-sm border border-outline-variant/30">
            <div class="flex justify-between items-start mb-2">
                <span class="text-sm text-on-surface-variant">Konsumen Aktif</span>
                <span class="material-symbols-outlined text-green-600">local_activity</span>
            </div>
            <p class="text-3xl font-bold font-headline-md">{{ number_format($aktifKonsumen, 0, ',', '.') }}</p>
            <p class="text-xs text-on-surface-variant mt-2">Status akun aktif</p>
        </div>
        <div class="bg-surface-container-lowest p-6 rounded-2xl shadow-sm border border-outline-variant/30">
            <div class="flex justify-between items-start mb-2">
                <span class="text-sm text-on-surface-variant">Konsumen Baru</span>
                <span class="material-symbols-outlined text-tertiary">person_add</span>
            </div>
            <p class="text-3xl font-bold font-headline-md">{{ number_format($baruKonsumen, 0, ',', '.') }}</p>
            <p class="text-xs text-on-surface-variant mt-2">Bergabung 7 hari terakhir</p>
        </div>
        <div class="bg-surface-container-lowest p-6 rounded-2xl shadow-sm border border-outline-variant/30">
            <div class="flex justify-between items-start mb-2">
                <span class="text-sm text-on-surface-variant">Rata-rata Penilaian</span>
                <span class="material-symbols-outlined text-[#E8A838]">star</span>
            </div>
            <p class="text-3xl font-bold font-headline-md">0.0</p>
            <p class="text-xs text-on-surface-variant mt-2">Belum ada data pesanan</p>
        </div>
    </div>

    <!-- Filter Row -->
    <div class="bg-surface-container-lowest p-4 rounded-2xl shadow-sm border border-outline-variant/30 flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div class="flex gap-2 border-b border-outline-variant/30 md:border-none pb-2 md:pb-0 overflow-x-auto w-full md:w-auto custom-scrollbar">
            <a href="{{ request()->fullUrlWithQuery(['status' => null, 'page' => 1]) }}" class="px-4 py-2 rounded-lg {{ !request('status') ? 'bg-surface-variant text-on-surface-variant font-semibold' : 'hover:bg-surface-variant/50 text-on-surface-variant font-medium' }} text-sm transition-colors whitespace-nowrap">Semua</a>
            <a href="{{ request()->fullUrlWithQuery(['status' => 'aktif', 'page' => 1]) }}" class="px-4 py-2 rounded-lg {{ request('status') == 'aktif' ? 'bg-surface-variant text-on-surface-variant font-semibold' : 'hover:bg-surface-variant/50 text-on-surface-variant font-medium' }} text-sm transition-colors whitespace-nowrap">Aktif</a>
            <a href="{{ request()->fullUrlWithQuery(['status' => 'non-aktif', 'page' => 1]) }}" class="px-4 py-2 rounded-lg {{ request('status') == 'non-aktif' ? 'bg-surface-variant text-on-surface-variant font-semibold' : 'hover:bg-surface-variant/50 text-on-surface-variant font-medium' }} text-sm transition-colors whitespace-nowrap">Non-Aktif</a>
        </div>

        <form method="GET" action="{{ route('admin.manajemen-konsumen') }}" class="flex gap-3 flex-wrap md:flex-nowrap w-full md:w-auto">
            @if(request('status'))
            <input type="hidden" name="status" value="{{ request('status') }}">
            @endif
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama, email..." class="bg-surface-container border-none rounded-lg text-sm px-4 py-2 focus:ring-2 focus:ring-primary/20 flex-1 md:flex-none outline-none">
            <select name="sort" onchange="this.form.submit()" class="bg-surface-container border-none rounded-lg text-sm px-8 py-2 focus:ring-2 focus:ring-primary/20 outline-none">
                <option value="terbaru" {{ request('sort') == 'terbaru' ? 'selected' : '' }}>Urutkan: Terbaru</option>
                <option value="terlama" {{ request('sort') == 'terlama' ? 'selected' : '' }}>Urutkan: Terlama</option>
            </select>
            <button type="submit" class="p-2 bg-surface-container rounded-lg hover:bg-outline-variant/20 transition-all">
                <span class="material-symbols-outlined text-[20px]">search</span>
            </button>
        </form>
    </div>

    <!-- Table Card with Horizontal Scroll -->
    <div class="bg-surface-container-lowest border border-outline-variant rounded-2xl shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs whitespace-nowrap min-w-[800px]">
                <thead class="bg-surface-container-low border-b border-outline-variant text-on-surface-variant font-bold text-[11px] uppercase tracking-wider">
                    <tr>
                        <th class="px-5 py-3.5">Nama Konsumen</th>
                        <th class="px-5 py-3.5">Email</th>
                        <th class="px-5 py-3.5">Phone</th>
                        <th class="px-5 py-3.5 text-center">Total Pesanan</th>
                        <th class="px-5 py-3.5 text-right">Nominal Pesanan</th>
                        <th class="px-5 py-3.5 text-right">Wallet</th>
                        <th class="px-5 py-3.5">Status</th>
                        <th class="px-5 py-3.5">Bergabung</th>
                        <th class="px-5 py-3.5">Kota</th>
                        <th class="px-5 py-3.5">Provinsi</th>
                        <th class="px-5 py-3.5 text-center sticky right-0 bg-surface-container-low border-l border-outline-variant">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-outline-variant/60">
                    @forelse($konsumens as $konsumen)
                    <tr class="hover:bg-surface-container-low/50 transition-colors">
                        <td class="px-5 py-3.5">
                            <span class="font-bold text-on-surface text-xs">{{ $konsumen->name }}</span>
                        </td>
                        <td class="px-5 py-3.5 text-on-surface-variant">
                            {{ $konsumen->email ?? '-' }}
                        </td>
                        <td class="px-5 py-3.5 text-on-surface-variant">
                            {{ $konsumen->phone ?? '-' }}
                        </td>
                        <td class="px-5 py-3.5 text-center">
                            <span class="font-bold text-on-surface">{{ number_format(0, 0, ',', '.') }}</span>
                        </td>
                        <td class="px-5 py-3.5 text-primary font-bold text-right">
                            {{ number_format(0, 0, ',', '.') }}
                        </td>
                        <td class="px-5 py-3.5 text-right font-bold text-on-surface">
                            {{ number_format($konsumen->wallet ?? 0, 0, ',', '.') }}
                        </td>
                        <td class="px-5 py-3.5">
                            @if($konsumen->is_active)
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-[#E1F2E8] text-[#1E5128]">Aktif</span>
                            @else
                            <div class="flex flex-col gap-1 items-start">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-rose-100 text-rose-700">Suspended</span>
                                @if($konsumen->suspend_reason)
                                <span class="text-[9px] text-rose-600 truncate max-w-[120px] inline-block" title="{{ $konsumen->suspend_reason }}">{{ $konsumen->suspend_reason }}</span>
                                @endif
                            </div>
                            @endif
                        </td>
                        <td class="px-5 py-3.5 text-on-surface-variant">
                            {{ $konsumen->created_at->format('d/m/Y') }}
                        </td>
                        <td class="px-5 py-3.5 text-on-surface-variant">
                            {{ $konsumen->city ?? '-' }}
                        </td>
                        <td class="px-5 py-3.5 text-on-surface-variant">
                            {{ $konsumen->province ?? '-' }}
                        </td>
                        <td class="px-5 py-3.5 text-center sticky right-0 bg-surface-container-lowest border-l border-outline-variant">
                            <div class="flex items-center justify-center gap-1">
                                <button
                                    type="button"
                                    class="btn-detail p-1.5 rounded-lg text-tertiary hover:bg-tertiary-container/20 transition-colors flex items-center justify-center"
                                    title="Lihat Detail"
                                    data-name="{{ $konsumen->name }}"
                                    data-phone="{{ $konsumen->phone ?? '-' }}"
                                    data-email="{{ $konsumen->email ?? '-' }}"
                                    data-joined="{{ $konsumen->created_at->format('d/m/Y') }}"
                                    data-status="{{ $konsumen->is_active ? 'AKTIF' : 'SUSPENDED' }}"
                                    data-initial="{{ strtoupper(substr($konsumen->name, 0, 2)) }}">
                                    <span class="material-symbols-outlined text-lg">visibility</span>
                                </button>
                                
                                @if($konsumen->is_active)
                                <button type="button" 
                                    class="p-1.5 rounded-lg text-error hover:bg-error-container transition-colors flex items-center justify-center" 
                                    title="Suspend Akun" 
                                    onclick="openSuspendModal({{ $konsumen->id }}, '{{ addslashes($konsumen->name) }}')">
                                    <span class="material-symbols-outlined text-lg">block</span>
                                </button>
                                @else
                                <form method="POST" action="{{ route('konsumen.unsuspend', $konsumen->id) }}" class="inline" onsubmit="return confirm('Yakin ingin mengaktifkan kembali akun {{ addslashes($konsumen->name) }}?')">
                                    @csrf
                                    <button type="submit" class="p-1.5 rounded-lg text-green-600 hover:bg-green-100 transition-colors flex items-center justify-center" title="Aktifkan Kembali">
                                        <span class="material-symbols-outlined text-lg">check_circle</span>
                                    </button>
                                </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="11" class="px-6 py-10 text-center text-on-surface-variant text-xs">
                            Tidak ada data konsumen ditemukan.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if($konsumens->hasPages())
        <div class="px-6 py-4 bg-surface-container-low/30 border-t border-outline-variant/30">
            {{ $konsumens->links() }}
        </div>
        @else
        <div class="px-6 py-4 bg-surface-container-low/30 border-t border-outline-variant/30 flex justify-between items-center">
            <p class="text-xs text-on-surface-variant">Menampilkan {{ $konsumens->count() }} dari {{ $konsumens->total() }} konsumen</p>
        </div>
        @endif
    </div>
</div>
@endsection

@section('scripts')
<!-- Detail Modal (Hidden by default) -->
<div id="consumerDetailModal" class="fixed inset-0 z-50 bg-black/50 hidden flex items-center justify-center backdrop-blur-sm">
    <div class="bg-surface w-full max-w-2xl rounded-2xl shadow-xl border border-outline-variant/30 overflow-hidden">
        <div class="px-6 py-4 border-b border-outline-variant/30 flex justify-between items-center bg-surface-container-low">
            <h3 class="font-headline-md text-lg font-bold">Detail Konsumen</h3>
            <button class="text-on-surface-variant hover:text-error transition-colors" onclick="document.getElementById('consumerDetailModal').classList.add('hidden')">
                <span class="material-symbols-outlined">close</span>
            </button>
        </div>
        <div class="p-6">
            <div class="flex gap-6 mb-6 border-b border-outline-variant/30 pb-6">
                <div id="modalInitial" class="w-20 h-20 bg-primary-container rounded-full flex items-center justify-center text-on-primary-container text-2xl font-bold">--</div>
                <div class="flex-1">
                    <h4 id="modalName" class="text-xl font-bold mb-1">-</h4>
                    <p class="text-sm text-on-surface-variant flex items-center gap-2"><span class="material-symbols-outlined text-[16px]">call</span> <span id="modalPhone">-</span></p>
                    <p class="text-sm text-on-surface-variant flex items-center gap-2 mt-1"><span class="material-symbols-outlined text-[16px]">mail</span> <span id="modalEmail">-</span></p>
                </div>
                <div class="text-right">
                    <span id="modalStatus" class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-bold mb-2 inline-block">AKTIF</span>
                    <p class="text-xs text-on-surface-variant">Bergabung: <span id="modalJoined">-</span></p>
                </div>
            </div>

            <h5 class="font-bold mb-4">Riwayat Pesanan Terakhir</h5>
            <div class="space-y-3">
                <div class="p-3 bg-surface-container-lowest border border-outline-variant/30 rounded-xl flex justify-center items-center">
                    <p class="text-sm text-on-surface-variant py-4">Belum ada data pesanan</p>
                </div>
            </div>
        </div>
        <div class="px-6 py-4 border-t border-outline-variant/30 bg-surface-container-lowest flex justify-end gap-3">
            <button class="px-4 py-2 border border-outline-variant rounded-lg text-sm font-semibold hover:bg-surface-variant/30 transition-colors" onclick="document.getElementById('consumerDetailModal').classList.add('hidden')">Tutup</button>
        </div>
    </div>
</div>

<!-- Suspend Modal -->
<div id="suspendModal" class="fixed inset-0 z-50 bg-black/50 hidden flex items-center justify-center backdrop-blur-sm">
    <div class="bg-surface w-full max-w-md rounded-2xl shadow-xl border border-outline-variant/30 overflow-hidden">
        <div class="px-6 py-4 border-b border-outline-variant/30 flex justify-between items-center bg-rose-50">
            <h3 class="font-headline-md text-lg font-bold text-rose-700">Suspend Akun Konsumen</h3>
            <button class="text-rose-600 hover:text-rose-800 transition-colors" onclick="document.getElementById('suspendModal').classList.add('hidden')">
                <span class="material-symbols-outlined">close</span>
            </button>
        </div>
        <form id="suspendForm" method="POST" action="">
            @csrf
            <div class="p-6">
                <p class="text-sm text-on-surface-variant mb-4">Anda akan menonaktifkan akun konsumen bernama <strong id="suspendConsumerName" class="text-on-surface"></strong>. Silakan masukkan alasan suspend di bawah ini.</p>
                <div class="mb-4">
                    <label class="block text-sm font-semibold text-on-surface mb-2">Alasan Suspend <span class="text-error">*</span></label>
                    <textarea name="suspend_reason" rows="3" required class="w-full bg-surface-container-lowest border border-outline-variant/50 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-rose-500/20 focus:border-rose-500 outline-none resize-none" placeholder="Masukkan alasan..."></textarea>
                </div>
            </div>
            <div class="px-6 py-4 border-t border-outline-variant/30 bg-surface-container-lowest flex justify-end gap-3">
                <button type="button" class="px-4 py-2 border border-outline-variant rounded-lg text-sm font-semibold hover:bg-surface-variant/30 transition-colors" onclick="document.getElementById('suspendModal').classList.add('hidden')">Batal</button>
                <button type="submit" class="px-4 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-lg text-sm font-semibold shadow-sm transition-colors">Suspend Akun</button>
            </div>
        </form>
    </div>
</div>

<script>
    document.querySelectorAll('.btn-detail').forEach(btn => {
        btn.addEventListener('click', function() {
            // Populate data
            document.getElementById('modalName').textContent = this.dataset.name;
            document.getElementById('modalPhone').textContent = this.dataset.phone;
            document.getElementById('modalEmail').textContent = this.dataset.email;
            document.getElementById('modalJoined').textContent = this.dataset.joined;
            document.getElementById('modalInitial').textContent = this.dataset.initial;

            const statusEl = document.getElementById('modalStatus');
            statusEl.textContent = this.dataset.status;
            if (this.dataset.status === 'AKTIF') {
                statusEl.className = 'px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-bold mb-2 inline-block';
            } else {
                statusEl.className = 'px-3 py-1 bg-surface-variant text-on-surface-variant rounded-full text-xs font-bold mb-2 inline-block';
            }

            // Show modal
            document.getElementById('consumerDetailModal').classList.remove('hidden');
        });
    });

    function openSuspendModal(id, name) {
        const form = document.getElementById('suspendForm');
        form.action = `/admin/konsumen/${id}/suspend`;
        document.getElementById('suspendConsumerName').textContent = name;
        document.getElementById('suspendModal').classList.remove('hidden');
    }
</script>
@endsection