@extends('layouts.app')

@section('title', 'Customer Lookup')

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div>
        <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">Customer Lookup</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-1">Search and manage customer information</p>
    </div>

    <!-- Search Card -->
    <div class="card">
        <div class="flex items-center mb-6">
            <div class="w-14 h-14 rounded-xl bg-blue-600 flex items-center justify-center text-white mr-4">
                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
            </div>
            <div>
                <h3 class="text-xl font-bold text-gray-900 dark:text-white">Search Customer</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Enter username, email, or phone number to find customer details</p>
            </div>
        </div>

        <form action="{{ route('customers.lookup.submit') }}" method="POST" id="searchForm">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="md:col-span-3">
                    <input
                        type="text"
                        name="username"
                        placeholder="Enter username, email, or phone number..."
                        class="w-full px-4 py-3 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500"
                    />
                </div>
                <div>
                    <button type="submit" class="w-full h-full btn btn-primary text-base">
                        <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                        Search Now
                    </button>
                </div>
            </div>
        </form>

        {{-- @if(session('error'))
            <div class="mt-4 bg-red-50 border-l-4 border-red-500 p-4 rounded-lg">
                <div class="flex">
                    <svg class="w-5 h-5 text-red-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <div>
                        <strong class="text-red-800">Error:</strong>
                        <span class="text-red-700">{{ session('error') }}</span>
                    </div>
                </div>
            </div>
        @endif --}}
    </div>

    <!-- Loading Overlay -->
    <div id="loadingOverlay" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
        <div class="bg-white dark:bg-gray-800 rounded-xl p-8 text-center">
            <div class="w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
            <p class="text-gray-700 dark:text-gray-300 font-semibold">Searching customer...</p>
        </div>
    </div>

    <!-- Multiple Users Selection -->
    @if(isset($multipleUsers) && count($multipleUsers) > 0)
    <div class="card">
        <div class="flex items-center mb-6">
            <div class="w-14 h-14 rounded-xl bg-amber-500 flex items-center justify-center text-white mr-4">
                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                </svg>
            </div>
            <div>
                <h3 class="text-xl font-bold text-gray-900 dark:text-white">Multiple Users Found</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                    Found <span class="font-semibold text-amber-600">{{ count($multipleUsers) }}</span> users matching
                    <span class="font-mono bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded">{{ $searchTerm }}</span>
                    ({{ $searchType }})
                </p>
            </div>
        </div>

        <div class="space-y-3">
            @foreach($multipleUsers as $user)
            <form action="{{ route('customers.lookup.select') }}" method="POST" class="user-select-form">
                @csrf
                <input type="hidden" name="pid" value="{{ $user->pid }}">
                <button type="submit" class="w-full text-left p-4 bg-gray-50 dark:bg-gray-700 rounded-xl border-2 border-gray-200 dark:border-gray-600 hover:border-blue-400 dark:hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all group">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-4">
                            <!-- Avatar -->
                            <div class="w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg flex-shrink-0">
                                {{ strtoupper(substr($user->nama ?? 'NA', 0, 2)) }}
                            </div>
                            <!-- User Info -->
                            <div>
                                <div class="flex items-center gap-2 mb-1">
                                    <h4 class="font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">
                                        {{ $user->nama ?? 'N/A' }}
                                    </h4>
                                </div>
                                <div class="flex items-center gap-2 mb-2">
                                    <span class="px-2 py-0.5 text-xs font-mono bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 rounded">
                                        PID: {{ $user->pid }}
                                    </span>
                                    <span class="px-2 py-0.5 text-xs font-mono bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 rounded">
                                        USERNAME: {{ $user->penggunaid }}
                                    </span>
                                </div>
                                <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-gray-500 dark:text-gray-400">
                                    <span class="flex items-center">
                                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                                        </svg>
                                        {{ $user->emel ?? 'N/A' }}
                                    </span>
                                    <span class="flex items-center">
                                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                                        </svg>
                                        {{ $user->nohp ?? 'N/A' }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <!-- Right side badges & arrow -->
                        <div class="flex items-center gap-3">
                            <div class="hidden sm:flex flex-col items-end gap-1">
                                <span class="px-2 py-1 text-xs font-medium rounded-full {{ $user->tarikhtamattempoh >= date('Y-m-d') ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200' : 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200' }}">
                                    {{ $user->tarikhtamattempoh >= date('Y-m-d') ? 'Active' : 'Inactive' }}
                                </span>
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
                                    {{ $user->package_level }}
                                </span>
                            </div>
                            <svg class="w-5 h-5 text-gray-400 group-hover:text-blue-500 group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                            </svg>
                        </div>
                    </div>
                </button>
            </form>
            @endforeach
        </div>

        <div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
            <p class="text-sm text-blue-700 dark:text-blue-300 flex items-center">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                Click on a user card to view their full profile details.
            </p>
        </div>
    </div>
    @endif

    <!-- Customer Profile -->
    @if(isset($nama))
    <div class="card">
        <div class="flex flex-col lg:flex-row lg:justify-between lg:items-start gap-6 mb-6">
            <div class="flex flex-col sm:flex-row items-center sm:items-start gap-6">
                <!-- Profile Avatar -->
                <div class="w-32 h-32 rounded-2xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-4xl font-bold shadow-lg flex-shrink-0 overflow-hidden">
                    @if(!empty($attachmentphoto))
                        <img src="https://corrad.visionice.net/bizapp/upload/profile/{{ $attachmentphoto }}" alt="Profile" class="w-full h-full object-cover">
                    @else
                        <span>{{ strtoupper(substr($nama ?? 'NA', 0, 2)) }}</span>
                    @endif
                </div>

                <!-- Profile Info -->
                <div>
                    <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-3">{{ $nama ?? 'N/A'}}</h2>
                    <div class="flex flex-wrap gap-2 mb-3">
                        <span class="px-3 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full text-sm font-medium">{{ $active ?? 'N/A'}}</span>
                        <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full text-sm font-medium">{{ $pakej ?? 'N/A'}}</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 flex items-center">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"/>
                        </svg>
                        PID: <span class="font-semibold ml-1">{{ $pid ?? 'N/A'}}</span>
                    </p>
                </div>
            </div>

            <!-- List Subscribe Button -->
            <button
                onclick="openSubscriptionModal('{{ $pid ?? '' }}', '{{ $username ?? '' }}')"
                class="btn btn-primary whitespace-nowrap"
            >
                <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                </svg>
                List Subscribe
            </button>
        </div>

        <!-- Contact Information -->
        <div class="mb-8">
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
                <svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                Contact Information
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 transition">
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-blue-600 dark:text-blue-400 mr-3 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                        </svg>
                        <div>
                            <p class="text-xs text-gray-500 dark:text-gray-400 font-medium mb-1">Username</p>
                            <p class="font-semibold text-gray-900 dark:text-white">{{ $username ?? 'N/A'}}</p>
                        </div>
                    </div>
                </div>

                <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 transition">
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-blue-600 dark:text-blue-400 mr-3 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                        </svg>
                        <div>
                            <p class="text-xs text-gray-500 dark:text-gray-400 font-medium mb-1">Company Name</p>
                            <p class="font-semibold text-gray-900 dark:text-white">{{ $namasyarikat ?? 'N/A'}}</p>
                        </div>
                    </div>
                </div>

                <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 transition">
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-blue-600 dark:text-blue-400 mr-3 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                        </svg>
                        <div>
                            <p class="text-xs text-gray-500 dark:text-gray-400 font-medium mb-1">Email Address</p>
                            <p class="font-semibold text-gray-900 dark:text-white">{{ $emel ?? 'N/A'}}</p>
                        </div>
                    </div>
                </div>

                <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 transition">
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-3 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                        </svg>
                        <div>
                            <p class="text-xs text-gray-500 dark:text-gray-400 font-medium mb-1">Phone Number</p>
                            <p class="font-semibold text-gray-900 dark:text-white">{{ $nohp ?? 'N/A'}}</p>
                        </div>
                    </div>
                </div>

                <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 transition md:col-span-2">
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-red-600 dark:text-red-400 mr-3 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                        <div>
                            <p class="text-xs text-gray-500 dark:text-gray-400 font-medium mb-1">Address</p>
                            <p class="font-semibold text-gray-900 dark:text-white">{{ $alamat ?? 'N/A'}}</p>
                        </div>
                    </div>
                </div>

                <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 transition">
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-orange-600 dark:text-orange-400 mr-3 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                        <div>
                            <p class="text-xs text-gray-500 dark:text-gray-400 font-medium mb-1">Joined Date</p>
                            <p class="font-semibold text-gray-900 dark:text-white">{{ $tarikhdaftar ?? 'N/A'}}</p>
                        </div>
                    </div>
                </div>

                <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 transition">
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-blue-600 dark:text-blue-400 mr-3 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                        </svg>
                        <div>
                            <p class="text-xs text-gray-500 dark:text-gray-400 font-medium mb-1">Tarikh Naik Taraf</p>
                            <p class="font-semibold text-gray-900 dark:text-white">{{ $tarikhnaiktaraf ?? 'N/A'}}</p>
                        </div>
                    </div>
                </div>

                <div class="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border-2 border-red-300 dark:border-red-800 hover:bg-red-100 dark:hover:bg-red-900/30 transition md:col-span-2">
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-red-600 dark:text-red-400 mr-3 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        <div class="flex-grow">
                            <p class="text-xs text-gray-500 dark:text-gray-400 font-medium mb-1">Tarikh Tamat</p>
                            <p class="font-bold text-red-600 dark:text-red-400 mb-2">{{ $tarikhtamattempoh ?? 'N/A'}}</p>
                            <div class="bg-orange-50 dark:bg-orange-900/20 border border-orange-300 dark:border-orange-800 rounded p-2">
                                <p class="text-xs text-orange-800 dark:text-orange-200">
                                    <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                                    </svg>
                                    <strong>Perhatian:</strong> Adakah tarikh tamat backdated? Jika ya, pakej user ni dah expired
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Payment Records -->
        <div>
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
                <svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                Senarai Rekod 5 Terakhir
            </h3>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-700">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">#</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Tarikh & Masa</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Payment Method</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Status</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">1</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
                                <svg class="w-4 h-4 inline text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                </svg>
                                06/11/2025 11:12 AM
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">Manual</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">Paid</span>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">2</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
                                <svg class="w-4 h-4 inline text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                </svg>
                                05/11/2025 10:05 PM
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">Manual</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">Paid</span>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">3</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                                <svg class="w-4 h-4 inline text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                </svg>
                                05/11/2025 09:19 PM
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">Manual</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">Paid</span>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">4</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                                <svg class="w-4 h-4 inline text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                </svg>
                                05/11/2025 02:44 PM
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">Manual</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">Paid</span>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">5</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                                <svg class="w-4 h-4 inline text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                </svg>
                                05/11/2025 11:55 AM
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">Manual</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">Paid</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif
</div>

<!-- Tailwind Modal for Subscription History -->
<div id="subscriptionModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
    <div class="bg-white dark:bg-gray-800 rounded-xl max-w-4xl w-full max-h-[90vh] flex flex-col">
        <!-- Modal Header -->
        <div class="bg-blue-600 dark:bg-blue-700 text-white px-6 py-4 rounded-t-xl flex justify-between items-center flex-shrink-0">
            <h3 class="text-xl font-bold flex items-center">
                <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                </svg>
                List Subscription - <span id="modalUsername">Loading...</span>
            </h3>
            <button onclick="closeSubscriptionModal()" class="text-white hover:text-gray-200 transition">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

        <!-- Modal Body -->
        <div class="p-6 overflow-y-auto flex-grow">
            <div id="subscriptionLoading" class="text-center py-12">
                <div class="w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
                <p class="text-gray-600 dark:text-gray-400">Loading subscription history...</p>
            </div>
            <div id="subscriptionContent" class="hidden space-y-3"></div>
            <div id="subscriptionError" class="hidden bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 p-4 rounded-lg">
                <div class="flex">
                    <svg class="w-5 h-5 text-red-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <span id="errorMessage" class="text-red-700 dark:text-red-300">Failed to load subscription history.</span>
                </div>
            </div>
        </div>

        <!-- Modal Footer -->
        <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end flex-shrink-0">
            <button onclick="closeSubscriptionModal()" class="btn btn-secondary">
                Close
            </button>
        </div>
    </div>
</div>

<script>
    document.getElementById('searchForm').addEventListener('submit', function () {
        document.getElementById('loadingOverlay').classList.remove('hidden');
    });

    // Handle loading for user selection forms
    document.querySelectorAll('.user-select-form').forEach(form => {
        form.addEventListener('submit', function () {
            document.getElementById('loadingOverlay').classList.remove('hidden');
        });
    });

    function openSubscriptionModal(pid, username) {
        const modal = document.getElementById('subscriptionModal');
        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';

        document.getElementById('modalUsername').textContent = username || 'N/A';
        document.getElementById('subscriptionLoading').classList.remove('hidden');
        document.getElementById('subscriptionContent').classList.add('hidden');
        document.getElementById('subscriptionError').classList.add('hidden');
        document.getElementById('subscriptionContent').innerHTML = '';

        if (pid) {
            fetch(`{{ url('/customers/subscription-history') }}/${pid}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        renderSubscriptions(data.pakej, data.addon);
                        document.getElementById('subscriptionLoading').classList.add('hidden');
                        document.getElementById('subscriptionContent').classList.remove('hidden');
                    } else {
                        showError(data.message || 'Failed to load subscription history');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showError('Failed to load subscription history. Please try again.');
                });
        } else {
            showError('No PID found for this user');
        }
    }

    function closeSubscriptionModal() {
        const modal = document.getElementById('subscriptionModal');
        modal.classList.add('hidden');
        document.body.style.overflow = 'auto';
    }

    // Close modal on outside click
    document.getElementById('subscriptionModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeSubscriptionModal();
        }
    });

    // Close modal on ESC key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeSubscriptionModal();
        }
    });

    function renderSubscriptions(pakejList, addonList) {
        const container = document.getElementById('subscriptionContent');
        let html = '';

        if (pakejList && pakejList.length > 0) {
            html += '<div class="mb-3"><h6 class="text-sm font-semibold text-gray-700 uppercase">PAKEJ SUBSCRIPTIONS</h6></div>';
            pakejList.forEach((item, index) => {
                const isLatest = index === 0;
                const bgClass = isLatest ? 'bg-green-50 border-green-300 border-2' : 'bg-white border-gray-200 border';
                const badgeClass = isLatest ? 'bg-green-500 text-white' : 'bg-gray-400 text-white';
                const badgeText = isLatest ? 'Current' : 'History';
                const fromPackage = item.frompackage || '~';
                const toPackage = item.topackage || '~';

                html += `
                    <div class="${bgClass} rounded-lg p-4">
                        <div class="flex justify-between items-start">
                            <div class="flex-grow">
                                <h6 class="font-semibold text-gray-900 mb-2">
                                    <span class="text-gray-600 text-sm">from pakej:</span>
                                    <span class="px-2 py-1 bg-orange-100 text-orange-800 text-xs rounded-full">${fromPackage}</span>
                                    <svg class="w-4 h-4 inline text-blue-600 mx-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
                                    <span class="text-gray-600 text-sm">to pakej:</span>
                                    <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">${toPackage}</span>
                                </h6>
                                <p class="text-sm text-gray-600 mb-2">
                                    <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                    tarikh langgan: ${item.logdatetime || 'N/A'}
                                </p>
                                <a href="https://www.bizappay.my/${item.billid || ''}" target="_blank" class="inline-flex items-center px-3 py-1 bg-blue-600 text-white text-xs rounded-lg hover:bg-blue-700">
                                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                                    View Receipt
                                </a>
                            </div>
                            <span class="px-2 py-1 text-xs font-medium rounded-full ${badgeClass}">${badgeText}</span>
                        </div>
                    </div>
                `;
            });
        }

        if (addonList && addonList.length > 0) {
            html += '<div class="mt-6 mb-3"><h6 class="text-sm font-semibold text-gray-700 uppercase">ADDON SUBSCRIPTIONS</h6></div>';
            addonList.forEach((item, index) => {
                const isLatest = index === 0;
                const bgClass = isLatest ? 'bg-blue-50 border-blue-300 border-2' : 'bg-white border-gray-200 border';
                const badgeClass = isLatest ? 'bg-blue-500 text-white' : 'bg-gray-400 text-white';
                const badgeText = isLatest ? 'Latest' : 'History';
                const toPackage = item.topackage || 'N/A';

                html += `
                    <div class="${bgClass} rounded-lg p-4">
                        <div class="flex justify-between items-start">
                            <div class="flex-grow">
                                <h6 class="font-semibold text-gray-900 mb-2">
                                    <svg class="w-5 h-5 inline text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
                                    <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">${toPackage}</span>
                                </h6>
                                <p class="text-sm text-gray-600 mb-2">
                                    <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                    tarikh langgan: ${item.logdatetime || 'N/A'}
                                </p>
                                <a href="https://www.bizappay.my/${item.billid || ''}" target="_blank" class="inline-flex items-center px-3 py-1 bg-blue-600 text-white text-xs rounded-lg hover:bg-blue-700">
                                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                                    View Receipt
                                </a>
                            </div>
                            <span class="px-2 py-1 text-xs font-medium rounded-full ${badgeClass}">${badgeText}</span>
                        </div>
                    </div>
                `;
            });
        }

        if (html === '') {
            html = '<div class="text-center py-8 bg-gray-50 rounded-lg"><p class="text-gray-600">No subscription history found.</p></div>';
        }

        container.innerHTML = html;
    }

    function showError(message) {
        document.getElementById('subscriptionLoading').classList.add('hidden');
        document.getElementById('subscriptionContent').classList.add('hidden');
        document.getElementById('subscriptionError').classList.remove('hidden');
        document.getElementById('errorMessage').textContent = message;
    }
</script>
@endsection