{% extends "admin/layout.html" %}

{% block title %}Customer Details - {{ customer.full_name }}{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="admin-page-header fade-in-on-scroll">
    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
        <div>
            <h1>Customer Details</h1>
            <p class="admin-page-subtitle">{{ customer.full_name }}</p>
        </div>
        <div style="display: flex; gap: 1rem;">
            <a href="{{ url_for('admin_customers.edit_customer', customer_id=customer.id) }}" 
               class="admin-btn admin-btn-primary">
                Edit Customer
            </a>
            <a href="{{ url_for('admin_customers.customers') }}" class="admin-btn admin-btn-secondary">
                ← Back to Customers
            </a>
        </div>
    </div>
</div>

<!-- Customer Information -->
<div class="admin-table-section fade-in-on-scroll" style="animation-delay: 0.2s;">
    <h2 style="margin-bottom: 1.5rem; color: var(--text-white);">Personal Information</h2>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
        <div>
            <div style="color: var(--text-gray); font-size: 0.875rem; margin-bottom: 0.5rem;">Full Name</div>
            <div style="color: var(--text-white); font-size: 1.125rem; font-weight: 600;">{{ customer.full_name }}</div>
        </div>
        <div>
            <div style="color: var(--text-gray); font-size: 0.875rem; margin-bottom: 0.5rem;">Mobile</div>
            <div style="color: var(--text-white); font-size: 1.125rem;">{{ customer.mobile }}</div>
        </div>
        <div>
            <div style="color: var(--text-gray); font-size: 0.875rem; margin-bottom: 0.5rem;">Email</div>
            <div style="color: var(--text-white); font-size: 1.125rem;">{{ customer.email }}</div>
        </div>
        <div>
            <div style="color: var(--text-gray); font-size: 0.875rem; margin-bottom: 0.5rem;">Date of Joining</div>
            <div style="color: var(--text-white); font-size: 1.125rem;">{{ customer.created_at.strftime('%d-%m-%Y %H:%M') if customer.created_at else 'N/A' }}</div>
        </div>
        <div>
            <div style="color: var(--text-gray); font-size: 0.875rem; margin-bottom: 0.5rem;">Status</div>
            <div>
                {% if customer.is_active %}
                    <span class="admin-badge admin-badge-success">Active</span>
                {% else %}
                    <span class="admin-badge admin-badge-danger">Inactive</span>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Reset Password Card -->
<div class="admin-table-section fade-in-on-scroll" style="animation-delay: 0.25s;">
    <h2 style="margin-bottom: 1.5rem; color: var(--text-white);">Reset Password</h2>
    <div id="resetPasswordToast" class="flash-messages" style="display: none; margin-bottom: 1rem;"></div>
    <div style="max-width: 400px;">
        <div style="margin-bottom: 1rem;">
            <label for="newPassword" style="display: block; color: var(--text-gray); font-size: 0.875rem; margin-bottom: 0.5rem;">New Password</label>
            <input type="password" id="newPassword" name="new_password" class="admin-input" placeholder="Min 8 characters" autocomplete="new-password" style="width: 100%; padding: 0.5rem 0.75rem;">
        </div>
        <div style="margin-bottom: 1rem;">
            <label for="confirmPassword" style="display: block; color: var(--text-gray); font-size: 0.875rem; margin-bottom: 0.5rem;">Confirm Password</label>
            <input type="password" id="confirmPassword" name="confirm_password" class="admin-input" placeholder="Re-enter password" autocomplete="new-password" style="width: 100%; padding: 0.5rem 0.75rem;">
        </div>
        <button type="button" id="resetPasswordBtn" class="admin-btn admin-btn-primary" disabled>
            Reset Password
        </button>
    </div>
</div>

<!-- Subscriptions -->
<div class="admin-table-section fade-in-on-scroll" style="animation-delay: 0.3s;">
    <h2 style="margin-bottom: 1.5rem; color: var(--text-white);">Subscriptions</h2>
    {% if subscriptions %}
    <div class="table-container">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for subscription in subscriptions %}
                <tr>
                    <td>{{ subscription.product.name if subscription.product else 'N/A' }}</td>
                    <td>{{ subscription.start_date.strftime('%d-%m-%Y') if subscription.start_date else 'N/A' }}</td>
                    <td>{{ subscription.end_date.strftime('%d-%m-%Y') if subscription.end_date else 'N/A' }}</td>
                    <td>
                        {% if subscription.status == 'active' %}
                            <span class="admin-badge admin-badge-success">Active</span>
                        {% elif subscription.status == 'pending' %}
                            <span class="admin-badge admin-badge-warning">Pending</span>
                        {% else %}
                            <span class="admin-badge admin-badge-secondary">{{ subscription.status|upper }}</span>
                        {% endif %}
                    </td>
                    <td>
                        <a href="{{ url_for('admin_subscriptions.subscriptions') }}?subscription_id={{ subscription.id }}" 
                           class="admin-btn admin-btn-secondary admin-btn-sm">
                            View
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="admin-empty-state">
        <p>No subscriptions found for this customer.</p>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
(function() {
    var customerId = {{ customer.id }};
    var customerName = {{ customer.full_name|tojson }};
    var newPasswordEl = document.getElementById('newPassword');
    var confirmPasswordEl = document.getElementById('confirmPassword');
    var resetBtn = document.getElementById('resetPasswordBtn');
    var toastEl = document.getElementById('resetPasswordToast');

    function showToast(message, isSuccess) {
        toastEl.style.display = 'block';
        toastEl.innerHTML = '<div class="alert alert-' + (isSuccess ? 'success' : 'error') + '">' + (message || '') + '</div>';
        setTimeout(function() {
            toastEl.style.display = 'none';
            toastEl.innerHTML = '';
        }, 5000);
    }

    function canSubmit() {
        var newP = (newPasswordEl && newPasswordEl.value) ? newPasswordEl.value : '';
        var confirmP = (confirmPasswordEl && confirmPasswordEl.value) ? confirmPasswordEl.value : '';
        return newP.length >= 8 && newP === confirmP;
    }

    function updateButton() {
        if (resetBtn) resetBtn.disabled = !canSubmit();
    }

    if (newPasswordEl) newPasswordEl.addEventListener('input', updateButton);
    if (confirmPasswordEl) confirmPasswordEl.addEventListener('input', updateButton);

    if (resetBtn) {
        resetBtn.addEventListener('click', function() {
            if (!canSubmit()) return;
            if (!confirm('Reset password for ' + customerName + '? They will need to use the new password to sign in.')) return;

            resetBtn.disabled = true;
            fetch('/admin/customers/' + customerId + '/reset-password', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    new_password: newPasswordEl.value,
                    confirm_password: confirmPasswordEl.value
                })
            })
            .then(function(r) { return r.json().then(function(data) { return { status: r.status, data: data }; }); })
            .then(function(result) {
                if (result.data.success) {
                    showToast(result.data.message || 'Password reset successfully.', true);
                    newPasswordEl.value = '';
                    confirmPasswordEl.value = '';
                } else {
                    showToast(result.data.error || 'Failed to reset password.', false);
                }
            })
            .catch(function() {
                showToast('Something went wrong. Please try again.', false);
            })
            .finally(function() {
                updateButton();
            });
        });
    }
})();
</script>
{% endblock %}