{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Manage Reseller Suspension" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Manage Reseller Suspension" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Suspend a reseller and every hosting account it owns, or restore access to the entire reseller account chain." %}</div>
        </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>
        <a href="{% url 'listreseller' %}">{% translate "Resellers" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "Suspend or Unsuspend" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card">
        <div class="mb-4">
            <div class="eenos-panel-title">{% translate "Reseller Suspension Management" %}</div>
            <div class="eenos-panel-subtitle">{% translate "Select a reseller account to change its suspension status." %}</div>
        </div>
        <div class="eenos-notice eenos-notice-warning mb-4">
            <div class="eenos-notice-icon">
                <i data-lucide="triangle-alert"></i>
            </div>
            <div class="eenos-notice-content">
                <div class="eenos-notice-title">{% translate "Owned hosting accounts are included" %}</div>
                <div class="eenos-notice-text">{% translate "Suspending a reseller also suspends every hosting account it owns. Unsuspending the reseller restores access to those accounts." %}</div>
            </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 "Subaccounts" %}</th>
                    <th>{% translate "Hosting Plan" %}</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="actionModal"
         tabindex="-1"
         aria-labelledby="actionModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title d-flex align-items-center gap-2"
                            id="actionModalLabel">
                            <span id="actionHeaderIcon"><i data-lucide="user-lock"></i></span><span id="actionHeading"></span>
                        </h5>
                        <div id="actionSubtitle" class="text-muted small mt-1"></div>
                    </div>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3 mb-4">
                        <div class="col-12 col-sm-7">
                            <div class="eenos-modal-info h-100">
                                <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 id="actionUser" class="eenos-modal-info-value"></div>
                                    <a id="actionDomain" class="small fw-medium text-decoration-none" target="_blank" rel="noopener noreferrer"></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-5">
                            <div class="eenos-modal-info h-100">
                                <div class="eenos-modal-info-icon"><i data-lucide="users"></i></div>
                                <div class="eenos-modal-info-content">
                                    <div class="eenos-modal-info-label">{% translate "Owned Accounts" %}</div>
                                    <div id="actionAccountCount" class="eenos-modal-info-value">0</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="actionNotice" class="eenos-notice">
                        <div class="eenos-notice-icon">
                            <span id="actionNoticeIcon"><i data-lucide="triangle-alert"></i></span>
                        </div>
                        <div class="eenos-notice-content">
                            <div id="noticeTitle" class="eenos-notice-title"></div>
                            <div id="noticeText" class="eenos-notice-text"></div>
                        </div>
                    </div>
                    <div id="reasonGroup" class="mt-4 d-none">
                        <label for="suspendReason" class="form-label">{% translate "Reason for suspension" %}</label>
                        <input type="text"
                               id="suspendReason"
                               class="form-control"
                               autocomplete="off"
                               placeholder="{% translate 'Enter the reason for suspension' %}">
                        <div class="invalid-feedback">{% translate "Please enter a reason for suspension." %}</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm" id="actionConfirm"></button><button type="button"
                            class="btn btn-outline-secondary btn-sm"
                            data-bs-dismiss="modal"><i data-lucide="x"></i>{% translate "Cancel" %}</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="formSuspendReason"><input type="hidden" name="user" id="formSuspendUser">
    </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="formUnsuspendUser">
    </form>
{% endblock %}
{% block extra_js %}
    <script>
$(function(){const esc=v=>$("<div>").text(v==null?"":v).html();const table=$("#eenos-data-table").DataTable({responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},processing:true,pageLength:25,lengthMenu:[[10,25,50,100,-1],[10,25,50,100,"{% translate 'All' %}"]],ajax:{url:"{% url 'hosting_reseller_data' %}",type:"GET",dataSrc:"data"},order:[[0,"asc"]],columns:[{data:"username",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:esc(d||"-")},{data:"direct_account_count",className:"text-center"},{data:"package",render:(d,t)=>t==="display"?esc(d||"-"):d},{data:"contact_email",className:"text-nowrap",render:(d,t)=>t!=="display"?d:(d?'<a class="link-secondary" href="mailto:'+esc(d)+'">'+esc(d)+'</a>':'-')},{data:"status",responsivePriority:3,render:(d,t)=>t!=="display"?d:(d==="suspended"?'<span class="eenos-status text-warning"><i data-lucide="pause-circle"></i> {% translate "Suspended" %}</span>':'<span class="eenos-status text-success"><i data-lucide="circle-check"></i> {% translate "Active" %}</span>')},{data:null,orderable:false,searchable:false,className:"text-end",responsivePriority:1,render:function(d,t,r){if(t!=="display")return"";const a=r.status==="suspended"?"unsuspend":"suspend",s=a==="suspend"?"warning":"success",i=a==="suspend"?"user-lock":"user-check",l=a==="suspend"?"{% translate 'Suspend Reseller' %}":"{% translate 'Unsuspend Reseller' %}";return '<div class="eenos-dt-actions"><button type="button" class="btn btn-sm btn-outline-'+s+' action-reseller" data-action="'+a+'" data-user="'+esc(r.username)+'" data-domain="'+esc(r.domain||"")+'" data-count="'+esc(r.direct_account_count||0)+'" title="'+l+'"><i data-lucide="'+i+'"></i></button></div>';}}],language:{processing:'{% translate "Loading..." %}',emptyTable:"{% translate 'No reseller accounts have been configured.' %}",zeroRecords:"{% translate 'No matching reseller accounts found.' %}"},drawCallback:()=>{if(typeof lucide!=="undefined")lucide.createIcons();}});table.on("responsive-display",()=>{if(typeof lucide!=="undefined")lucide.createIcons();});const modal=bootstrap.Modal.getOrCreateInstance(document.getElementById("actionModal"));let user="",action="";$(document).on("click",".action-reseller",function(){user=$(this).data("user");action=$(this).data("action");const s=action==="suspend",domain=$(this).data("domain")||"";$("#actionUser").text(user);$("#actionDomain").text(domain||"—").attr("href",domain?"https://"+domain:"");$("#actionAccountCount").text($(this).data("count")||0);$("#actionHeaderIcon").html('<i data-lucide="'+(s?'user-lock':'user-check')+'"></i>');$("#actionNoticeIcon").html('<i data-lucide="'+(s?'triangle-alert':'circle-check')+'"></i>');$("#actionHeading").text(s?"{% translate 'Suspend Reseller' %}":"{% translate 'Unsuspend Reseller' %}");$("#actionSubtitle").text(s?"{% translate 'Suspend this reseller and every hosting account it owns.' %}":"{% translate 'Restore access to this reseller and its owned hosting accounts.' %}");$("#noticeTitle").text(s?"{% translate 'All owned accounts will be suspended' %}":"{% translate 'All owned accounts will be restored' %}");$("#noticeText").text(s?"{% translate 'The reseller and every hosting account it owns will become unavailable until the reseller is unsuspended.' %}":"{% translate 'The reseller and its owned hosting accounts will be returned to active status.' %}");$("#actionNotice").attr("class","eenos-notice "+(s?"eenos-notice-warning":"eenos-notice-info"));$("#reasonGroup").toggleClass("d-none",!s);$("#suspendReason").val("").removeClass("is-invalid");$("#actionConfirm").attr("class","btn btn-sm "+(s?"btn-warning":"btn-success")).html('<i data-lucide="'+(s?'user-lock':'user-check')+'"></i>'+(s?"{% translate 'Suspend Reseller' %}":"{% translate 'Unsuspend Reseller' %}"));if(typeof lucide!=="undefined")lucide.createIcons();modal.show();});$("#actionConfirm").on("click",function(){if(action==="suspend"){const reason=$("#suspendReason").val().trim();if(!reason){$("#suspendReason").addClass("is-invalid").trigger("focus");return;}$("#formSuspendReason").val(reason);$("#formSuspendUser").val(user);$("#suspendForm").trigger("submit");}else{$("#formUnsuspendUser").val(user);$("#unsuspendForm").trigger("submit");}});});
    </script>
{% endblock %}