@extends('layouts.admin')

@section('title', 'Premium Subscription Management')

@section('content')
<div class="p-6 space-y-8 bg-gray-50 min-h-screen">

    <!-- Header -->
    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-6">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Mintana Plus</h1>
            <p class="text-gray-500">Premium Subscription Control Panel</p>
        </div>
        <span class="mt-2 sm:mt-0 px-4 py-1 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 text-white text-sm font-semibold">
            ADMIN
        </span>
    </div>

    <!-- Statistics with Currency Switch -->
    <div class="flex justify-end mb-4 space-x-2">
        <label class="text-sm font-medium text-gray-600">Currency:</label>
        <select id="currencySwitcherStats" class="border border-gray-300 rounded-lg px-2 py-1 focus:ring-2 focus:ring-blue-500">
            <option value="GBP" selected>GBP (£)</option>
            <option value="NGN">NGN (₦)</option>
        </select>
    </div>

    @php
        $activeAmount = $subscriptions->where('status','active')->sum('fee');
        $expiredCount = $subscriptions->where('status','expired')->count();
        $pendingAmount = $subscriptions->where('status','pending')->sum('fee');
        $revenueAmount = $subscriptions->sum('fee');
    @endphp

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-white rounded-2xl shadow p-6 border-l-4 border-green-500">
            <p class="text-sm text-gray-500">Active Premium</p>
            <p class="text-3xl font-bold text-green-600">
                <span class="stat-value" data-gbp="{{ $activeAmount }}" data-ngn="{{ $activeAmount * 950 }}">£{{ number_format($activeAmount,2) }}</span>
            </p>
        </div>
        <div class="bg-white rounded-2xl shadow p-6 border-l-4 border-red-500">
            <p class="text-sm text-gray-500">Expired</p>
            <p class="text-3xl font-bold text-red-600">
                <span class="stat-value" data-gbp="{{ $expiredCount }}" data-ngn="{{ $expiredCount }}">£{{ $expiredCount }}</span>
            </p>
        </div>
        <div class="bg-white rounded-2xl shadow p-6 border-l-4 border-yellow-500">
            <p class="text-sm text-gray-500">Pending Payments</p>
            <p class="text-3xl font-bold text-yellow-600">
                <span class="stat-value" data-gbp="{{ $pendingAmount }}" data-ngn="{{ $pendingAmount * 950 }}">£{{ number_format($pendingAmount,2) }}</span>
            </p>
        </div>
        <div class="bg-white rounded-2xl shadow p-6 border-l-4 border-blue-500">
            <p class="text-sm text-gray-500">Total Revenue</p>
            <p class="text-3xl font-bold text-blue-600">
                <span class="stat-value" data-gbp="{{ $revenueAmount }}" data-ngn="{{ $revenueAmount * 950 }}">£{{ number_format($revenueAmount,2) }}</span>
            </p>
        </div>
    </div>

    <!-- Customer Search -->
    <div class="mb-4 mt-6">
        <input id="customerSearch" placeholder="Search customer..." class="w-full sm:w-72 border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500">
    </div>

    <!-- Desktop Table -->
    <div class="hidden md:block bg-white rounded-2xl shadow overflow-x-auto">
        <table class="min-w-[700px] w-full text-sm border-collapse" id="subscriptionTable">
            <thead class="bg-gray-100 text-gray-600 uppercase text-xs">
                <tr>
                    <th class="p-4 text-left">Customer</th>
                    <th class="p-4">Phone</th>
                    <th class="p-4">Plan</th>
                    <th class="p-4">Status</th>
                    <th class="p-4">Fee</th>
                    <th class="p-4">Expires</th>
                    <th class="p-4">Action</th>
                </tr>
            </thead>
            <tbody>
            @foreach($subscriptions as $sub)
                <tr class="border-t hover:bg-gray-50 subscription-row">
                    <td class="p-4 font-medium customer-name">{{ $sub->user->name }}</td>
                    <td class="p-4">{{ $sub->user->phone }}</td>
                    <td class="p-4">{{ ucfirst($sub->plan) }}</td>
                    <td class="p-4">
                        <span class="px-3 py-1 text-xs rounded-full font-semibold
                            {{ $sub->status=='active' ? 'bg-green-100 text-green-700' : ($sub->status=='pending' ? 'bg-yellow-100 text-yellow-700' : 'bg-red-100 text-red-700') }}">
                            {{ ucfirst($sub->status) }}
                        </span>
                    </td>
                    <td class="p-4 font-semibold">
                        <span class="subscription-fee" data-gbp="{{ $sub->fee }}" data-ngn="{{ $sub->fee * 950 }}">
                            £{{ $sub->fee }}
                        </span>
                    </td>
                    <td class="p-4">
                        @if($sub->expires_at && \Illuminate\Support\Carbon::parse($sub->expires_at)->isPast())
                            <span class="text-red-600 font-semibold">Expired</span>
                        @elseif($sub->expires_at)
                            {{ \Illuminate\Support\Carbon::parse($sub->expires_at)->format('M d, Y') }}
                        @else
                            N/A
                        @endif
                    </td>
                    <td class="p-4">
                        <a href="{{ route('admin.customers.show', $sub->user->id) }}" 
                           class="px-3 py-1 bg-blue-600 text-white text-xs rounded-full hover:bg-blue-700 transition">
                           View Customer
                        </a>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>

        <div class="p-4">
            {{ $subscriptions->links() }}
        </div>
    </div>

    <!-- Mobile Cards -->
    <div class="md:hidden space-y-4">
        @foreach($subscriptions as $sub)
            <div class="bg-white rounded-xl shadow p-4 subscription-row">
                <div class="flex justify-between items-center mb-2">
                    <h3 class="font-semibold text-lg customer-name">{{ $sub->user->name }}</h3>
                    <span class="text-xs px-2 py-1 rounded-full font-semibold
                        {{ $sub->status=='active' ? 'bg-green-100 text-green-700' : ($sub->status=='pending' ? 'bg-yellow-100 text-yellow-700' : 'bg-red-100 text-red-700') }}">
                        {{ ucfirst($sub->status) }}
                    </span>
                </div>

                <div class="text-sm text-gray-600 mb-2 space-y-1">
                    <p><span class="font-semibold">Phone:</span> {{ $sub->user->phone }}</p>
                    <p><span class="font-semibold">Plan:</span> {{ ucfirst($sub->plan) }}</p>
                    <p><span class="font-semibold">Fee:</span> <span class="subscription-fee" data-gbp="{{ $sub->fee }}" data-ngn="{{ $sub->fee * 950 }}">£{{ $sub->fee }}</span></p>
                    <p><span class="font-semibold">Expires:</span> 
                        @if($sub->expires_at && \Illuminate\Support\Carbon::parse($sub->expires_at)->isPast())
                            <span class="text-red-600 font-semibold">Expired</span>
                        @elseif($sub->expires_at)
                            {{ \Illuminate\Support\Carbon::parse($sub->expires_at)->format('M d, Y') }}
                        @else
                            N/A
                        @endif
                    </p>
                </div>

                <a href="{{ route('admin.customers.show', $sub->user->id) }}" 
                   class="block text-center mt-2 px-3 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition">
                   View Customer
                </a>
            </div>
        @endforeach
    </div>

    <!-- Manual Activation -->
    <div class="bg-white rounded-2xl shadow mt-6">
        <div class="border-b px-6 py-4">
            <h2 class="font-semibold">Manually Activate Premium</h2>
            <p class="text-sm text-gray-500">Send payment link or instantly assign a plan</p>
        </div>

        <form class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6" action="{{ route('admin.subscriptions.activate') }}" method="POST">
            @csrf

            <div>
                <label class="block text-sm font-medium text-gray-600">Customer</label>
                <select name="user_id" class="w-full border border-gray-300 rounded-lg px-4 py-2 mt-1 focus:ring-2 focus:ring-blue-500" required>
                    <option value="">Choose customer</option>
                    @foreach($customers as $customer)
                        <option value="{{ $customer->id }}">{{ $customer->name }} - {{ $customer->phone }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-600">Plan</label>
                <select name="plan" class="w-full border border-gray-300 rounded-lg px-4 py-2 mt-1 focus:ring-2 focus:ring-blue-500" required>
                    @foreach($plans as $plan)
                        <option value="{{ $plan->id }}">{{ ucfirst($plan->name) }} (£{{ $plan->price }})</option>
                    @endforeach
                </select>
            </div>

            <div class="md:col-span-2 text-right">
                <button class="px-6 py-2 bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-xl shadow hover:opacity-90 transition">
                    Send Payment Link
                </button>
            </div>
        </form>
    </div>

</div>

<script>
// Stats currency switch
document.getElementById('currencySwitcherStats').addEventListener('change', function() {
    const currency = this.value;
    document.querySelectorAll('.stat-value').forEach(el => {
        const gbp = el.dataset.gbp;
        const ngn = el.dataset.ngn;
        el.textContent = currency === 'GBP' ? '£' + parseFloat(gbp).toLocaleString() : '₦' + parseFloat(ngn).toLocaleString();
    });
});

// Currency converter for table/cards
document.getElementById('currencySwitcher').addEventListener('change', function() {
    const currency = this.value;
    document.querySelectorAll('.subscription-fee').forEach(el => {
        const gbp = el.dataset.gbp;
        const ngn = el.dataset.ngn;
        el.textContent = currency === 'GBP' ? '£' + parseFloat(gbp).toFixed(2) : '₦' + parseFloat(ngn).toFixed(0);
    });
});

// Customer search
document.getElementById('customerSearch').addEventListener('input', function() {
    const query = this.value.toLowerCase();
    document.querySelectorAll('.subscription-row').forEach(row => {
        const name = row.querySelector('.customer-name').textContent.toLowerCase();
        row.style.display = name.includes(query) ? '' : 'none';
    });
});
</script>
@endsection