{% extends "base.html" %}
{% load i18n static %}
{% block title %}{% translate "Reseller Accounts" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Reseller Accounts" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Manage reseller accounts, resource allocations, owned accounts, and reseller panel access." %}</div>
        </div>
        <div class="d-grid col-12 col-sm-auto">
            <a href="{% url 'createuser' %}" class="btn btn-primary btn-sm text-nowrap"><i data-lucide="plus"></i>{% translate "Create Account" %}</a>
        </div>
    </div>
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span>
        <span>{% translate "Hosting" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span>
        <span>{% translate "Resellers" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "List Resellers" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card">
        <div class="mb-4">
            <div class="eenos-panel-title">{% translate "Available Reseller Accounts" %}</div>
            <div class="eenos-panel-subtitle">{% translate "Review account usage and manage reseller-chain operations." %}</div>
        </div>
        <table id="eenos-data-table" class="table table-sm table-hover align-middle mb-0">
            <thead><tr><th>{% translate "User" %}</th><th>{% translate "Domain" %}</th><th>{% translate "Direct Accounts" %}</th><th>{% translate "Total Accounts" %}</th><th>{% translate "Hosting Plan" %}</th><th>{% translate "Reseller Limit" %}</th><th>{% translate "Reseller Quota" %}</th><th>{% translate "Reseller Bandwidth" %}</th><th>{% translate "Shared IPv4" %}</th><th>{% translate "Shared IPv6" %}</th><th>{% translate "Contact Email" %}</th><th>{% translate "Status" %}</th><th class="text-end">{% translate "Action" %}</th></tr></thead>
        </table>
    </div>
    <div class="modal fade" id="accountActionModal" tabindex="-1" aria-labelledby="accountActionTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered"><div class="modal-content">
            <div class="modal-header"><div><h2 class="modal-title fs-5 d-flex align-items-center gap-2" id="accountActionTitle"><i data-lucide="triangle-alert"></i><span id="accountActionHeading"></span></h2><div class="text-muted small mt-1" id="accountActionSubtitle"></div></div><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button></div>
            <div class="modal-body">
                <div class="eenos-modal-info mb-4"><div class="eenos-modal-info-icon"><i data-lucide="user-round-cog"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Reseller Account" %}</div><div class="eenos-modal-info-value" id="accountActionUser"></div></div></div>
                <div class="eenos-notice" id="accountActionNotice"><div class="eenos-notice-icon"><i data-lucide="triangle-alert"></i></div><div class="eenos-notice-content"><div class="eenos-notice-title" id="accountActionNoticeTitle"></div><div class="eenos-notice-text" id="accountActionNoticeText"></div></div></div>
                <div class="mt-4 d-none" id="suspendReasonGroup"><label for="suspendReason" class="form-label">{% translate "Reason for suspension" %}</label><input type="text" id="suspendReason" class="form-control" autocomplete="off" required><div class="invalid-feedback">{% translate "Please enter a suspension reason." %}</div></div>
            </div>
            <div class="modal-footer"><button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal"><i data-lucide="x"></i>{% translate "Cancel" %}</button><button type="button" class="btn btn-sm" id="accountActionConfirm"></button></div>
        </div></div>
    </div>
    <form method="post" id="suspendForm" class="d-none">{% csrf_token %}<input type="hidden" name="suspend_account" value="yes"><input type="hidden" name="reason" id="suspendFormReason"><input type="hidden" name="user" id="suspendFormUser"></form>
    <form method="post" id="unsuspendForm" class="d-none">{% csrf_token %}<input type="hidden" name="unsuspend_account" value="yes"><input type="hidden" name="user" id="unsuspendFormUser"></form>
    <form method="post" id="terminateForm" class="d-none">{% csrf_token %}<input type="hidden" name="terminate_account" value="yes"><input type="hidden" name="user" id="terminateFormUser"></form>
{% endblock %}
{% block extra_js %}
    <script>
$(function(){
const esc=value=>$('<div>').text(value==null?'':value).html();
const limit=(value,unit)=>String(value||'').toLowerCase()==='unlimited'?'<span class="badge eenos-badge-neutral p-1" role="img" title="{% translate "Unlimited" %}" aria-label="{% translate "Unlimited" %}"><i data-lucide="infinity" width="14" height="14"></i></span>':esc(value||0)+(unit||'');
const subUrl="{% url 'resellersubview' user='__user__' %}",nsUrl="{% url 'resellerns_edit' user='__user__' %}";
const table=$('#eenos-data-table').DataTable({responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},processing:true,pageLength:25,lengthMenu:[[25,50,100,-1],[25,50,100,"{% translate 'All' %}"]],ajax:{url:"{% url 'hosting_reseller_data' %}",dataSrc:'data'},order:[[0,'asc']],columns:[
{data:'username',width:'170px',className:'text-nowrap',responsivePriority:1,render:(d,t)=>t==='display'?'<span class="fw-semibold">'+esc(d||'—')+'</span>':d},
{data:'domain',responsivePriority:2,render:(d,t)=>t==='display'&&d?'<a href="https://'+esc(d)+'" target="_blank" rel="noopener noreferrer">'+esc(d)+'</a>':d||'—'},
{data:'direct_account_count',className:'text-center',responsivePriority:6},{data:'account_usage',className:'text-center',responsivePriority:5},
{data:'package',responsivePriority:4,render:(d,t)=>t==='display'?'<span class="badge eenos-badge-neutral">'+esc(d||'—')+'</span>':d},
{data:'account_limit',className:'text-center text-nowrap',responsivePriority:7,render:(d,t)=>t==='display'?limit(d):d},
{data:null,className:'text-center text-nowrap',responsivePriority:8,render:(d,t,r)=>t==='display'?esc(r.quota_usage||0)+' MB / '+limit(r.quota_limit,' MB'):r.quota_usage},
{data:null,className:'text-center text-nowrap',responsivePriority:9,render:(d,t,r)=>t==='display'?esc(r.bandwidth_usage||0)+' MB / '+limit(r.bandwidth_limit,' MB'):r.bandwidth_usage},
{data:'shared_ipv4',className:'none',render:(d,t)=>t==='display'?esc(d||'—'):d},{data:'shared_ipv6',className:'none',render:(d,t)=>t==='display'?esc(d||'—'):d},{data:'contact_email',className:'none',render:(d,t)=>t==='display'&&d?'<a class="link-secondary" href="mailto:'+esc(d)+'">'+esc(d)+'</a>':d||'—'},
{data:'status',width:'115px',responsivePriority:3,render:(d,t)=>t!=='display'?d:(d==='suspended'?'<span class="eenos-status text-warning"><i data-lucide="pause-circle"></i><span>{% translate "Suspended" %}</span></span>':'<span class="eenos-status text-success"><i data-lucide="circle-check"></i><span>{% translate "Active" %}</span></span>')},
{data:null,orderable:false,searchable:false,className:'none',responsivePriority:100,render:function(d,t,r){if(t!=='display')return'';const user=encodeURIComponent(r.username),safe=esc(r.username);let actions='<div class="eenos-dt-actions d-flex flex-wrap gap-2 justify-content-end"><a class="btn btn-sm btn-outline-primary" href="'+subUrl.replace('__user__',user)+'" title="{% translate "View Subaccounts" %}"><i data-lucide="users"></i></a><a class="btn btn-sm btn-outline-secondary" href="'+nsUrl.replace('__user__',user)+'" title="{% translate "Change Nameservers" %}"><i data-lucide="network"></i></a>';actions+=r.status==='suspended'?'<button type="button" class="btn btn-sm btn-outline-success reseller-action" data-action="unsuspend" data-user="'+safe+'" title="{% translate "Unsuspend Reseller" %}"><i data-lucide="user-check"></i></button>':'<button type="button" class="btn btn-sm btn-outline-warning reseller-action" data-action="suspend" data-user="'+safe+'" title="{% translate "Suspend Reseller" %}"><i data-lucide="user-lock"></i></button>';return actions+'<button type="button" class="btn btn-sm btn-outline-danger reseller-action" data-action="terminate" data-user="'+safe+'" title="{% translate "Terminate Reseller" %}"><i data-lucide="trash-2"></i></button></div>'}}
],language:{processing:'{% translate "Loading..." %}',emptyTable:"{% translate 'No reseller accounts have been configured.' %}",zeroRecords:"{% translate 'No matching reseller accounts found.' %}"},drawCallback:()=>lucide.createIcons()});
table.on('responsive-display',()=>lucide.createIcons());
const modal=bootstrap.Modal.getOrCreateInstance(document.getElementById('accountActionModal'));let selectedAction='',selectedUser='';const content={suspend:{heading:"{% translate 'Suspend Reseller' %}",subtitle:"{% translate 'Temporarily disable the reseller and its owned accounts.' %}",title:"{% translate 'Owned accounts will also be suspended' %}",text:"{% translate 'This operation affects the reseller and every hosting account it owns.' %}",button:"{% translate 'Suspend Reseller' %}",style:'btn-warning',notice:'eenos-notice-warning'},unsuspend:{heading:"{% translate 'Unsuspend Reseller' %}",subtitle:"{% translate 'Restore the reseller and its owned accounts.' %}",title:"{% translate 'Restore owned accounts' %}",text:"{% translate 'All hosting accounts owned by this reseller will also be unsuspended.' %}",button:"{% translate 'Unsuspend Reseller' %}",style:'btn-success',notice:'eenos-notice-info'},terminate:{heading:"{% translate 'Terminate Reseller' %}",subtitle:"{% translate 'Permanently remove the reseller and its owned accounts.' %}",title:"{% translate 'Permanent action' %}",text:"{% translate 'The reseller and all owned accounts will be permanently removed. This cannot be undone.' %}",button:"{% translate 'Terminate Reseller' %}",style:'btn-danger',notice:'eenos-notice-danger'}};
$(document).on('click','.reseller-action',function(){selectedAction=$(this).data('action');selectedUser=$(this).data('user');const item=content[selectedAction];$('#accountActionUser').text(selectedUser);$('#accountActionHeading').text(item.heading);$('#accountActionSubtitle').text(item.subtitle);$('#accountActionNoticeTitle').text(item.title);$('#accountActionNoticeText').text(item.text);$('#accountActionNotice').attr('class','eenos-notice '+item.notice);$('#accountActionConfirm').attr('class','btn btn-sm '+item.style).text(item.button);$('#suspendReasonGroup').toggleClass('d-none',selectedAction!=='suspend');$('#suspendReason').val('').removeClass('is-invalid');modal.show();lucide.createIcons()});
$('#accountActionConfirm').on('click',function(){if(selectedAction==='suspend'){const reason=$('#suspendReason').val().trim();if(!reason){$('#suspendReason').addClass('is-invalid').trigger('focus');return}$('#suspendFormReason').val(reason);$('#suspendFormUser').val(selectedUser);$('#suspendForm').trigger('submit')}else if(selectedAction==='unsuspend'){$('#unsuspendFormUser').val(selectedUser);$('#unsuspendForm').trigger('submit')}else{$('#terminateFormUser').val(selectedUser);$('#terminateForm').trigger('submit')}});
});
    </script>
{% endblock %}