@extends('admin.layouts.app')

@section('title', 'Astrologers')

@section('content')
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-xl font-bold text-white tracking-tight">Registered Astrologers</h1>
            <p class="text-xs text-slate-500 mt-1">Manage and monitor astrologer accounts and activities.</p>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-[#101828] border border-white/5 rounded-xl p-4 mb-6">
        <form action="{{ route('admin.astrologers.index') }}" method="GET" class="flex flex-wrap items-center gap-4">
            <div class="flex-1 min-w-[200px] relative">
                <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500"></i>
                <input type="text" name="search" value="{{ request('search') }}"
                    placeholder="Search by name, email or mobile..."
                    class="w-full pl-10 pr-4 py-2 bg-white/5 border border-white/10 rounded-lg text-xs text-white focus:outline-none focus:border-yellow-500/50">
            </div>
            
            <select name="enrollment" class="bg-white/5 border border-white/10 rounded-lg text-xs text-white px-4 py-2 focus:outline-none focus:border-yellow-500/50">
                <option value="">All Enrollment</option>
                <option value="paid" {{ request('enrollment') == 'paid' ? 'selected' : '' }}>Paid</option>
                <option value="unpaid" {{ request('enrollment') == 'unpaid' ? 'selected' : '' }}>Unpaid</option>
            </select>

            <select name="status" class="bg-white/5 border border-white/10 rounded-lg text-xs text-white px-4 py-2 focus:outline-none focus:border-yellow-500/50">
                <option value="">All Status</option>
                <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
            </select>

            <button type="submit" class="bg-yellow-500 hover:bg-yellow-400 text-slate-900 px-6 py-2 rounded-lg text-xs font-bold transition-all">
                Filter
            </button>
            
            @if(request()->anyFilled(['search', 'enrollment', 'status']))
                <a href="{{ route('admin.astrologers.index') }}" class="text-xs text-slate-500 hover:text-white transition-colors">
                    Reset
                </a>
            @endif
        </form>
    </div>

    @if(session('success'))
        <div
            class="bg-green-500/10 border border-green-500/20 text-green-500 px-4 py-2.5 rounded-lg mb-6 text-xs font-medium flex items-center gap-2">
            <i data-lucide="check-circle" class="w-3.5 h-3.5"></i>
            {{ session('success') }}
        </div>
    @endif

    <div class="bg-[#101828] border border-white/5 rounded-xl overflow-hidden shadow-sm">
        <table class="w-full text-left">
            <thead>
                <tr class="bg-white/[0.02] border-b border-white/5">
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">Astrologer
                    </th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">Contact</th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">Enrollment</th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">Status</th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">Joined</th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider text-right">
                        Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-white/5">
                @forelse($astrologers as $astrologer)
                    <tr class="hover:bg-white/[0.01] transition-colors group">
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-3">
                                <div
                                    class="w-8 h-8 rounded-full bg-slate-800 flex items-center justify-center text-indigo-400 border border-white/5 overflow-hidden">
                                    @if($astrologer->astrologerDetail && $astrologer->astrologerDetail->profile_pic)
                                        <img src="{{ asset('storage/' . $astrologer->astrologerDetail->profile_pic) }}"
                                            class="w-full h-full object-cover">
                                    @else
                                        <i data-lucide="user" class="w-4 h-4"></i>
                                    @endif
                                </div>
                                <div>
                                    <p class="text-xs font-semibold text-white">{{ $astrologer->name }}</p>
                                    <p class="text-[10px] text-slate-500">{{ $astrologer->email }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 text-xs text-slate-400">
                            {{ $astrologer->astrologerDetail->mobile ?? $astrologer->mobile ?? 'N/A' }}
                        </td>
                        <td class="px-6 py-4">
                            @if($astrologer->astrologerDetail && $astrologer->astrologerDetail->is_enrollment_paid)
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase bg-emerald-500/10 text-emerald-400">
                                    Paid
                                </span>
                            @else
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase bg-amber-500/10 text-amber-500">
                                    Unpaid
                                </span>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            <span
                                class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase {{ $astrologer->is_active ? 'bg-green-500/10 text-green-400' : 'bg-red-500/10 text-red-400' }}">
                                {{ $astrologer->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-[10px] text-slate-500">
                            {{ $astrologer->created_at->format('M d, Y') }}
                        </td>
                        <td class="px-6 py-4 text-right">
                            <div class="flex justify-end gap-2">
                                <a href="{{ route('admin.astrologers.show', $astrologer->id) }}"
                                    class="p-1.5 text-slate-400 hover:text-white hover:bg-white/10 rounded-md transition-all"
                                    title="View Details">
                                    <i data-lucide="eye" class="w-3.5 h-3.5"></i>
                                </a>

                                <form action="{{ route('admin.astrologers.toggle-status', $astrologer->id) }}" method="POST">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit"
                                        class="p-1.5 {{ $astrologer->is_active ? 'text-amber-400 hover:bg-amber-500/10' : 'text-green-400 hover:bg-green-500/10' }} rounded-md transition-all"
                                        title="{{ $astrologer->is_active ? 'Deactivate' : 'Activate' }}">
                                        <i data-lucide="{{ $astrologer->is_active ? 'user-x' : 'user-check' }}"
                                            class="w-3.5 h-3.5"></i>
                                    </button>
                                </form>

                                <button type="button"
                                    onclick="if(confirm('Force password change on next login?')) document.getElementById('force-pw-{{ $astrologer->id }}').submit()"
                                    class="p-1.5 text-indigo-400 hover:bg-indigo-500/10 rounded-md transition-all"
                                    title="Force Password Change">
                                    <i data-lucide="key" class="w-3.5 h-3.5"></i>
                                </button>
                                <form id="force-pw-{{ $astrologer->id }}"
                                    action="{{ route('admin.astrologers.force-password-change', $astrologer->id) }}"
                                    method="POST" class="hidden">
                                    @csrf
                                    @method('PATCH')
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-6 py-12 text-center text-slate-500">
                            <div class="flex flex-col items-center gap-2">
                                <i data-lucide="users" class="w-8 h-8 opacity-20"></i>
                                <p class="text-xs">No astrologers registered yet.</p>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-6">
        {{ $astrologers->links() }}
    </div>
@endsection