{% extends 'hospital/base.html' %}
{% load static %}
{% load i18n %}

{% block sidebar.credentials %} class="active" {% endblock %}

{% block content %}
    <div class="content">
        <div class="row">
            <div class="col-sm-8">
                <h4 class="page-title">{% trans "Hospital Credentials" %}</h4>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{% trans "API Credentials" %}</h4>
                    </div>
                    <div class="card-body">
                        <div class="row mb-4">
                            <div class="col-md-12">
                                <div class="alert alert-info">
                                    <i class="fa fa-info-circle"></i> 
                                    {% trans "Keep your API credentials secure. Do not share them publicly." %}
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label><strong>{% trans "Hospital Name" %}</strong></label>
                                    <input type="text" class="form-control" value="{{ hospital.name }}" readonly>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label><strong>{% trans "Hospital Code" %}</strong></label>
                                    <input type="text" class="form-control" value="{{ hospital.hospital_code }}" readonly>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label><strong>{% trans "API Key" %}</strong></label>
                                    <div class="input-group">
                                        <input type="text" id="api-key" class="form-control" value="{{ hospital.api_key }}" readonly>
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('api-key')">
                                                <i class="fa fa-copy"></i> {% trans "Copy" %}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label><strong>{% trans "API Secret" %}</strong></label>
                                    <div class="input-group">
                                        <input type="password" id="api-secret" class="form-control" value="{{ hospital.api_secret }}" readonly>
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-secondary" type="button" onclick="togglePasswordVisibility('api-secret')">
                                                <i class="fa fa-eye"></i> {% trans "Show" %}
                                            </button>
                                            <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('api-secret')">
                                                <i class="fa fa-copy"></i> {% trans "Copy" %}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-12">
                                <form method="post" action="{% url 'panel-hospital-regenerate-credentials' %}" onsubmit="return confirm('{% trans "Are you sure you want to regenerate your API credentials? This will invalidate your current credentials." %}');">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-danger">
                                        <i class="fa fa-refresh"></i> {% trans "Regenerate Credentials" %}
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{% trans "Contact Information" %}</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label><strong>{% trans "Contact Email" %}</strong></label>
                                    <input type="text" class="form-control" value="{{ hospital.contact_email }}" readonly>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label><strong>{% trans "Contact Phone" %}</strong></label>
                                    <input type="text" class="form-control" value="{{ hospital.contact_phone }}" readonly>
                                </div>
                            </div>
                        </div>
                        
                        {% if hospital.contact_person %}
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label><strong>{% trans "Contact Person" %}</strong></label>
                                    <input type="text" class="form-control" value="{{ hospital.contact_person }}" readonly>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                        
                        {% if hospital.address %}
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label><strong>{% trans "Address" %}</strong></label>
                                    <textarea class="form-control" rows="3" readonly>{{ hospital.address }}</textarea>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label><strong>{% trans "Account Created" %}</strong></label>
                                    <input type="text" class="form-control" value="{{ hospital.created_at|date:'Y-m-d H:i' }}" readonly>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label><strong>{% trans "Status" %}</strong></label>
                                    <input type="text" class="form-control" value="{% if hospital.is_active %}{% trans 'Active' %}{% else %}{% trans 'Inactive' %}{% endif %}" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{% trans "Promotion Code & Discount" %}</h4>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info">
                            <i class="fa fa-info-circle"></i> 
                            {% trans "This promotion code and discount group are automatically created for your hospital and can be used for special offers." %}
                        </div>
                        
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label><strong>{% trans "Promotion Code" %}</strong></label>
                                    <div class="input-group">
                                        <input type="text" id="promotion-code" class="form-control" value="{{ hospital.hospital_code }}_PROMOTION" readonly>
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('promotion-code')">
                                                <i class="fa fa-copy"></i> {% trans "Copy" %}
                                            </button>
                                        </div>
                                    </div>
                                    <small class="form-text text-muted">{% trans "Use this code for discount campaigns and user registration tracking" %}</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label><strong>{% trans "ZiLuck Group Name" %}</strong></label>
                                    <input type="text" class="form-control" value="{{ hospital.hospital_code }}_PROMOTION" readonly>
                                    <small class="form-text text-muted">{% trans "Users who use this promotion code are automatically added to this group" %}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block footer.add_script %}
<script>
function copyToClipboard(elementId) {
    var copyText = document.getElementById(elementId);
    copyText.select();
    copyText.setSelectionRange(0, 99999);
    document.execCommand("copy");
    alert("Copied to clipboard!");
}

function togglePasswordVisibility(elementId) {
    var x = document.getElementById(elementId);
    if (x.type === "password") {
        x.type = "text";
    } else {
        x.type = "password";
    }
}
</script>
{% endblock %}