@extends('layouts.shared.admin-data-listing')

@section('title', 'Subscribers')
@section('shortDesc', 'Manage subscriber information and their subscription details.')

@section('data')
<div class="table-responsive">
    <table class="table table-hover align-middle">
        <thead>
            <tr>
                <th>#</th>
                <th>User</th>
                <th>Plan</th>
                <th>Status</th>
                <th>Start Date</th>
                <th>Expires</th>
                <th>Days Remaining</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($subscriptions as $subscription)
            <tr>
                <td>{{ $loop->iteration }}</td>
                <td>
                    <strong>{{ $subscription->user->name ?? 'N/A' }}</strong>
                    <br>
                    <small class="text-muted">{{ $subscription->user->email ?? 'N/A' }}</small>
                </td>
                <td>
                    <span class="badge bg-primary">{{ $subscription->plan->name ?? 'N/A' }}</span>
                </td>
                <td>
                    @if ($subscription->status === 'active')
                    <span class="badge bg-success">Active</span>
                    @elseif ($subscription->status === 'expired')
                    <span class="badge bg-danger">Expired</span>
                    @elseif ($subscription->status === 'cancelled')
                    <span class="badge bg-secondary">Cancelled</span>
                    @else
                    <span class="badge bg-warning">{{ ucfirst($subscription->status) }}</span>
                    @endif
                </td>
                <td>
                    {{ $subscription->starts_at ? $subscription->starts_at->format('M d, Y') : 'N/A' }}
                </td>
                <td>
                    {{ $subscription->expires_at ? $subscription->expires_at->format('M d, Y') : 'N/A' }}
                </td>
                <td>
                    @if ($subscription->expires_at)
                    @php
                    $daysRemaining = now()->diffInDays($subscription->expires_at, false);
                    @endphp
                    @if ($daysRemaining > 0)
                    <span class="badge bg-info">{{ $daysRemaining }} days</span>
                    @else
                    <span class="badge bg-danger">Expired</span>
                    @endif
                    @else
                    <span class="text-muted">-</span>
                    @endif
                </td>
                <td>
                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-outline-info" data-bs-toggle="modal"
                            data-bs-target="#viewSubscriptionModal"
                            onclick="loadSubscriptionData({{ json_encode($subscription) }})">
                            <i class="fas fa-eye"></i> View
                        </button>
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="8" class="text-center text-muted py-4">
                    No subscribers yet.
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

<!-- Pagination -->
@if ($subscriptions->hasPages())
<div class="d-flex justify-content-center mt-4">
    {{ $subscriptions->links('pagination::bootstrap-5') }}
</div>
@endif
</div>
</div>
</div>

<!-- View Subscription Modal -->
<div class="modal fade" id="viewSubscriptionModal" tabindex="-1" aria-labelledby="viewSubscriptionLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewSubscriptionLabel">Subscription Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-4">
                    <div class="col-md-6">
                        <h6 class="text-muted">User Information</h6>
                        <p class="mb-1"><strong>Name:</strong> <span id="detail_user_name">-</span></p>
                        <p class="mb-1"><strong>Email:</strong> <span id="detail_user_email">-</span></p>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-muted">Subscription Information</h6>
                        <p class="mb-1"><strong>Plan:</strong> <span id="detail_plan_name">-</span></p>
                        <p class="mb-1"><strong>Status:</strong> <span id="detail_status">-</span></p>
                    </div>
                </div>

                <div class="row mb-4">
                    <div class="col-md-6">
                        <h6 class="text-muted">Plan Details</h6>
                        <p class="mb-1"><strong>Price:</strong> <span id="detail_plan_price">-</span></p>
                        <p class="mb-1"><strong>Duration:</strong> <span id="detail_plan_duration">-</span></p>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-muted">Dates</h6>
                        <p class="mb-1"><strong>Started:</strong> <span id="detail_starts_at">-</span></p>
                        <p class="mb-1"><strong>Expires:</strong> <span id="detail_expires_at">-</span></p>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <h6 class="text-muted">Payment History</h6>
                        <div id="payment_history" class="table-responsive">
                            <!-- Will be populated by JavaScript -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    function loadSubscriptionData(subscription) {
        // User info
        document.getElementById('detail_user_name').textContent = subscription.user?.name || 'N/A';
        document.getElementById('detail_user_email').textContent = subscription.user?.email || 'N/A';

        // Subscription info
        document.getElementById('detail_plan_name').textContent = subscription.plan?.name || 'N/A';
        document.getElementById('detail_status').innerHTML = getStatusBadge(subscription.status);

        // Plan details
        document.getElementById('detail_plan_price').textContent = 'KES ' + (subscription.plan?.price ? parseFloat(subscription.plan.price).toLocaleString() : 'N/A');
        document.getElementById('detail_plan_duration').textContent = (subscription.plan?.duration_days || 0) + ' days';

        // Dates
        if (subscription.starts_at) {
            const startDate = new Date(subscription.starts_at);
            document.getElementById('detail_starts_at').textContent = startDate.toLocaleDateString('en-US', {
                year: 'numeric',
                month: 'short',
                day: 'numeric'
            });
        } else {
            document.getElementById('detail_starts_at').textContent = 'N/A';
        }

        if (subscription.expires_at) {
            const expireDate = new Date(subscription.expires_at);
            document.getElementById('detail_expires_at').textContent = expireDate.toLocaleDateString('en-US', {
                year: 'numeric',
                month: 'short',
                day: 'numeric'
            });
        } else {
            document.getElementById('detail_expires_at').textContent = 'N/A';
        }
    }

    function getStatusBadge(status) {
        const badges = {
            'active': '<span class="badge bg-success">Active</span>',
            'expired': '<span class="badge bg-danger">Expired</span>',
            'cancelled': '<span class="badge bg-secondary">Cancelled</span>'
        };
        return badges[status] || '<span class="badge bg-warning">' + status.charAt(0).toUpperCase() + status.slice(1) + '</span>';
    }
</script>
@endpush

@endsection