@extends('layouts.admin')

@section('title', 'Your subscribers - Centipid ISP CRM')
@section('breadcrumb_parent', 'CUSTOMERS')
@section('breadcrumb_current', 'Subscribers')

@section('content')
<div class="space-y-6">
    <!-- Title & Action Bar -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-extrabold text-white tracking-tight">Your <span class="text-orange-500">subscribers.</span></h1>
            <p class="text-xs text-slate-400 mt-1">
                <span class="font-bold text-white">{{ $allUsersCount }} users</span> on the network &bull; 
                <span class="text-orange-500 font-bold">{{ $atRiskCount }} at risk</span> of not renewing.
            </p>
        </div>
        <div class="flex items-center gap-3">
            <button onclick="alert('Compensate credit workflow initiated.')" class="flex items-center gap-2 bg-[#1c1c1f] hover:bg-[#26262a] text-slate-300 font-semibold text-xs px-4 py-2.5 rounded-xl border border-[#2a2a2e] transition-all">
                <i data-lucide="gift" class="w-4 h-4 text-orange-500"></i>
                <span>Compensate</span>
            </button>
            <button onclick="openAddSubscriberModal()" class="flex items-center gap-2 btn-orange font-bold text-xs px-4 py-2.5 rounded-xl shadow-lg shadow-orange-500/20">
                <i data-lucide="plus" class="w-4 h-4"></i>
                <span>Add user</span>
            </button>
        </div>
    </div>

    <!-- Subscriber KPI Cards Grid -->
    <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
        <div class="custom-card p-4 rounded-2xl">
            <p class="text-[10px] font-extrabold uppercase tracking-widest text-slate-400">All users</p>
            <p class="text-2xl font-extrabold text-white mt-1">{{ $allUsersCount }}</p>
            <p class="text-[11px] text-slate-500 mt-1">across the network</p>
        </div>

        <div class="custom-card p-4 rounded-2xl">
            <p class="text-[10px] font-extrabold uppercase tracking-widest text-slate-400">Expiring in 7 days</p>
            <p class="text-2xl font-extrabold text-orange-500 mt-1">{{ $expiringIn7DaysCount }}</p>
            <p class="text-[11px] text-slate-500 mt-1">ending in next week</p>
        </div>

        <div class="custom-card p-4 rounded-2xl">
            <p class="text-[10px] font-extrabold uppercase tracking-widest text-slate-400">Online</p>
            <p class="text-2xl font-extrabold text-emerald-400 mt-1">{{ $onlineCount }}</p>
            <p class="text-[11px] text-slate-500 mt-1">connected right now</p>
        </div>

        <div class="custom-card p-4 rounded-2xl">
            <p class="text-[10px] font-extrabold uppercase tracking-widest text-slate-400">New this week</p>
            <p class="text-2xl font-extrabold text-white mt-1">{{ $newThisWeekCount }}</p>
            <p class="text-[11px] text-slate-500 mt-1">first joined in last 7 days</p>
        </div>

        <div class="custom-card p-4 rounded-2xl">
            <p class="text-[10px] font-extrabold uppercase tracking-widest text-slate-400">At risk</p>
            <p class="text-2xl font-extrabold text-amber-400 mt-1">{{ $atRiskCount }}</p>
            <p class="text-[11px] text-slate-500 mt-1">no session in 30+ days</p>
        </div>
    </div>

    <!-- Filter Tabs & Search Bar -->
    <div class="flex flex-col md:flex-row gap-4 items-center justify-between">
        @php $selectedType = request('type', 'All'); @endphp
        <div class="flex items-center gap-1 bg-[#161618] p-1 rounded-xl border border-[#2a2a2e]">
            <a href="{{ route('admin.subscribers.index', ['type' => 'All']) }}" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all {{ $selectedType === 'All' ? 'bg-[#2a2a2e] text-white' : 'text-slate-400 hover:text-white' }}">
                All <span class="text-[10px] opacity-70">{{ $allUsersCount }}</span>
            </a>
            <a href="{{ route('admin.subscribers.index', ['type' => 'Hotspot']) }}" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all {{ $selectedType === 'Hotspot' ? 'bg-[#2a2a2e] text-white' : 'text-slate-400 hover:text-white' }}">
                Hotspot <span class="text-[10px] opacity-70">{{ $hotspotCount }}</span>
            </a>
            <a href="{{ route('admin.subscribers.index', ['type' => 'PPPoE']) }}" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all {{ $selectedType === 'PPPoE' ? 'bg-[#2a2a2e] text-white' : 'text-slate-400 hover:text-white' }}">
                PPPoE <span class="text-[10px] opacity-70">{{ $pppoeCount }}</span>
            </a>
            <a href="{{ route('admin.subscribers.index', ['type' => 'Binding']) }}" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all {{ $selectedType === 'Binding' ? 'bg-[#2a2a2e] text-white' : 'text-slate-400 hover:text-white' }}">
                Bindings <span class="text-[10px] opacity-70">{{ $bindingsCount }}</span>
            </a>
        </div>

        <form action="{{ route('admin.subscribers.index') }}" method="GET" class="flex items-center gap-2 w-full md:w-auto">
            <input type="hidden" name="type" value="{{ $selectedType }}">
            <div class="relative w-80">
                <i data-lucide="search" class="w-4 h-4 absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-500"></i>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search name, email, phone, MAC..." class="w-full bg-[#161618] border border-[#2a2a2e] text-slate-200 text-xs rounded-xl pl-10 pr-4 py-2 focus:outline-none focus:border-orange-500">
            </div>
            <button type="submit" class="bg-[#1c1c1f] text-slate-300 px-4 py-2 rounded-xl text-xs font-semibold border border-[#2a2a2e]">Search</button>
        </form>
    </div>

    <!-- Data Table matching reference layout -->
    <div class="custom-card rounded-2xl overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs text-slate-300">
                <thead class="bg-[#1c1c1f] text-slate-400 uppercase text-[10px] font-extrabold tracking-wider border-b border-[#2a2a2e]">
                    <tr>
                        <th class="py-3.5 px-6">CONTACT</th>
                        <th class="py-3.5 px-6">PHONE & EMAIL</th>
                        <th class="py-3.5 px-6">PLAN</th>
                        <th class="py-3.5 px-6">EXPIRY</th>
                        <th class="py-3.5 px-6">LAST ONLINE</th>
                        <th class="py-3.5 px-6">NAS</th>
                        <th class="py-3.5 px-6 text-right">ACTIONS</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-[#2a2a2e] font-medium">
                    @forelse($subscribers as $sub)
                        <tr class="hover:bg-[#1f1f23] transition-colors">
                            <td class="py-4 px-6">
                                <div class="flex items-center gap-3">
                                    <div class="w-8 h-8 rounded-full bg-[#27272a] text-orange-500 flex items-center justify-center font-extrabold text-xs">
                                        {{ strtoupper(substr($sub->name, 0, 2)) }}
                                    </div>
                                    <div>
                                        <p class="text-xs font-bold text-white">{{ $sub->name }}</p>
                                        <p class="text-[10px] text-slate-500 font-mono">{{ $sub->username }} &bull; <span class="text-orange-400 font-semibold">{{ $sub->type }}</span></p>
                                    </div>
                                </div>
                            </td>
                            <td class="py-4 px-6">
                                <p class="text-xs text-slate-200">{{ $sub->phone }}</p>
                                <p class="text-[11px] text-slate-500">{{ $sub->email ?? 'N/A' }}</p>
                            </td>
                            <td class="py-4 px-6">
                                <p class="text-xs font-bold text-white">{{ $sub->plan_name }}</p>
                                <p class="text-[11px] text-emerald-400 font-bold">Rs {{ number_format($sub->plan_price, 2) }}</p>
                            </td>
                            <td class="py-4 px-6">
                                <span class="font-mono text-slate-300">{{ $sub->expiry_date->format('M d, Y') }}</span>
                                @if($sub->expiry_date->isPast())
                                    <span class="block text-[10px] text-rose-400 font-bold">Expired</span>
                                @else
                                    <span class="block text-[10px] text-emerald-400 font-bold">{{ $sub->expiry_date->diffForHumans() }}</span>
                                @endif
                            </td>
                            <td class="py-4 px-6 text-slate-400 font-mono text-[11px]">
                                {{ $sub->last_online ? $sub->last_online->diffForHumans() : 'Never' }}
                            </td>
                            <td class="py-4 px-6">
                                <span class="inline-block px-2.5 py-1 rounded bg-[#222226] text-[10px] font-mono text-slate-400 border border-[#2a2a2e]">
                                    {{ $sub->nas_router ?? 'Core-CCR1036' }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-right">
                                <form action="{{ route('admin.subscribers.destroy', $sub) }}" method="POST" onsubmit="return confirm('Delete subscriber {{ $sub->name }}?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-1.5 rounded-lg bg-[#222226] text-slate-400 hover:text-rose-400 transition-colors">
                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="py-12 text-center text-slate-500">
                                <i data-lucide="user-x" class="w-10 h-10 mx-auto text-slate-600 mb-2"></i>
                                <p class="text-xs">No subscribers found matching criteria.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="p-4 border-t border-[#2a2a2e]">
            {{ $subscribers->links() }}
        </div>
    </div>
</div>

<!-- Modal: Add New Subscriber -->
<div id="addSubscriberModal" class="fixed inset-0 z-[9999] hidden bg-black/80 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="custom-panel rounded-2xl max-w-lg w-full p-6 shadow-2xl space-y-4">
        <div class="flex items-center justify-between border-b border-[#2a2a2e] pb-3">
            <h3 class="text-base font-bold text-white flex items-center gap-2">
                <i data-lucide="user-plus" class="w-5 h-5 text-orange-500"></i>
                <span>Add Subscriber</span>
            </h3>
            <button onclick="closeAddSubscriberModal()" class="text-slate-400 hover:text-white">&times;</button>
        </div>

        <form action="{{ route('admin.subscribers.store') }}" method="POST" class="space-y-4">
            @csrf
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Full Name *</label>
                    <input type="text" name="name" required class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Phone Number *</label>
                    <input type="text" name="phone" required class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Service Type *</label>
                    <select name="type" required class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
                        <option value="PPPoE">PPPoE</option>
                        <option value="Hotspot">Hotspot</option>
                        <option value="Binding">Binding</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Select Internet Plan *</label>
                    <select name="plan_name" required class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
                        @foreach($plans as $p)
                            <option value="{{ $p->name }}">{{ $p->name }} &bull; Rs {{ $p->price }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Username / Account ID</label>
                    <input type="text" name="username" placeholder="Auto-generated if blank" class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Expiry Date *</label>
                    <input type="date" name="expiry_date" value="{{ date('Y-m-d', strtotime('+30 days')) }}" required class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
                </div>
            </div>

            <div class="flex items-center justify-end gap-3 pt-3 border-t border-[#2a2a2e]">
                <button type="button" onclick="closeAddSubscriberModal()" class="px-4 py-2 text-xs font-semibold text-slate-400 hover:text-white">Cancel</button>
                <button type="submit" class="btn-orange text-xs px-5 py-2.5 rounded-xl">Provision Subscriber</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function openAddSubscriberModal() {
        document.getElementById('addSubscriberModal').classList.remove('hidden');
    }
    function closeAddSubscriberModal() {
        document.getElementById('addSubscriberModal').classList.add('hidden');
    }
</script>
@endpush
