{% extends "base.html" %}

{% block title %}Business Account Created - AsapLoads POS{% endblock %}

{% block content %}
<div class="container">
    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-primary">Business Account Created Successfully</h6>
            <div>
                <button onclick="printCredentials()" class="btn btn-sm btn-outline-secondary me-2">
                    <i class="fas fa-print"></i> Print
                </button>
                <a href="{% url 'license_list' %}" class="btn btn-sm btn-outline-primary">
                    <i class="fas fa-arrow-left"></i> Back to Licenses
                </a>
            </div>
        </div>
        <div class="card-body" id="credential-details">
            <div class="row mb-4">
                <div class="col-md-12">
                    <div class="alert alert-success">
                        <i class="fas fa-check-circle me-2"></i> 
                        Business account has been created successfully! Please share these credentials with the business admin.
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6">
                    <div class="card mb-4">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0"><i class="fas fa-building me-2"></i> Business Details</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="fw-bold">Business Name:</label>
                                <p>{{ branch_name }}</p>
                            </div>
                            <div class="mb-3">
                                <label class="fw-bold">Address:</label>
                                <p>{{ branch_address }}</p>
                            </div>
                            <div class="mb-3">
                                <label class="fw-bold">Email:</label>
                                <p>{{ branch_email }}</p>
                            </div>
                            <div class="mb-3">
                                <label class="fw-bold">Phone:</label>
                                <p>{{ branch_phone }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="card mb-4">
                        <div class="card-header bg-info text-white">
                            <h5 class="mb-0"><i class="fas fa-key me-2"></i> License Information</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="fw-bold">License Key:</label>
                                <div class="input-group">
                                    <input type="text" id="licenseKey" value="{{ license_key }}" class="form-control bg-light" readonly>
                                    <button class="btn btn-outline-secondary" type="button" onclick="copyLicenseKey()">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </div>
                                <small class="text-muted">Share this license key with the business admin</small>
                            </div>
                            <div class="mb-3">
                                <label class="fw-bold">Issue Date:</label>
                                <p>{{ issue_date }}</p>
                            </div>
                            <div class="mb-3">
                                <label class="fw-bold">Expiry Date:</label>
                                <p>{{ expiry_date }}</p>
                            </div>
                            <div class="mb-3">
                                <label class="fw-bold">Duration:</label>
                                <p>{{ duration }} days</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-12">
                    <div class="card mb-4">
                        <div class="card-header bg-warning text-dark">
                            <h5 class="mb-0"><i class="fas fa-user-shield me-2"></i> Admin Account Credentials</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="fw-bold">Admin Name:</label>
                                        <p>{{ admin_name }}</p>
                                    </div>
                                    <div class="mb-3">
                                        <label class="fw-bold">Email:</label>
                                        <p>{{ admin_email }}</p>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="fw-bold">Temporary Password:</label>
                                        <div class="input-group">
                                            <input type="text" id="passwordField" value="{{ admin_password }}" class="form-control bg-light" readonly>
                                            <button class="btn btn-outline-secondary" type="button" onclick="copyPassword()">
                                                <i class="fas fa-copy"></i>
                                            </button>
                                        </div>
                                        <small class="text-muted">The admin can change this after first login</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="alert alert-info">
                <h6><i class="fas fa-info-circle me-2"></i> Instructions for Business Admin:</h6>
                <ol>
                    <li>Go to the login page at <strong>{{ site_url }}</strong></li>
                    <li>Log in using the email and temporary password provided above</li>
                    <li>After login, you will be prompted to enter your license key</li>
                    <li>Enter the license key exactly as shown above</li>
                    <li>Complete your business profile setup when prompted</li>
                    <li>Change your password from the profile section for security</li>
                </ol>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function copyLicenseKey() {
    var licenseKey = document.getElementById("licenseKey");
    licenseKey.select();
    document.execCommand("copy");
    alert("License key copied to clipboard!");
}

function copyPassword() {
    var passwordField = document.getElementById("passwordField");
    passwordField.select();
    document.execCommand("copy");
    alert("Password copied to clipboard!");
}

function printCredentials() {
    var printContents = document.getElementById("credential-details").innerHTML;
    var originalContents = document.body.innerHTML;
    
    document.body.innerHTML = `
        <div style="padding: 20px;">
            <h2 style="text-align: center; margin-bottom: 20px;">AsapLoads POS - Business Account Credentials</h2>
            ${printContents}
        </div>
    `;
    
    window.print();
    document.body.innerHTML = originalContents;
    location.reload();
}
</script>
{% endblock %}