{% include 'header.twig' %}

<style>
/* === ADVANCED PREMIUM STYLING === */
@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.status-pulse-active {
    animation: pulse-green 2s infinite;
    border-radius: 50px;
}
.ns-badge {
    background: #0f172a; 
    color: #38bdf8; 
    font-size: 14px; 
    padding: 8px 16px; 
    margin-right: 8px; 
    border: 1px solid #38bdf8; 
    border-radius: 6px;
    box-shadow: 0 0 12px rgba(56,189,248,0.15);
    display: inline-block;
}
.wa-renew-btn {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: white !important;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(37,211,102,0.25);
    transition: all 0.3s ease;
    white-space: nowrap;
}
.wa-renew-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(37,211,102,0.35);
}
</style>

<div class="wrapper-content__body">
    <div class="appContent">
        <div class="hiddenTitle">
            <div id="appTt">Child Panel</div>
            <div id="appTx">We're the best!</div>
        </div>

        <section class="dashboard-head-wrapper">
            <div class="container-fluid">
                <div class="dashboard-head card-border">
                    <div class="dhead-body">
                        <h2 class="title">Rent a Child Panel</h2>
                        <p class="text">
                            We charge {{site_base_currency_symbol}}{{" "}}{{site["childpanel_price"]}}/month for a child panel.<br>
                            Special discounts are available if you spend more than 1000/month.
                        </p>
                    </div>
                    <div class="dhead-img-wrapper">
                        <img src="https://cdn.mypanel.link/6f7slz/hjd38x9quo3byspn.png" class="dhead-img" alt="Panel">
                    </div>
                </div>
            </div>
        </section>

        <section>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-4 mb-4 mb-lg-0">
                        <div class="card">
                            {% if error %}
                            <div class="alert alert-dismissible alert-danger">
                                <button type="button" class="close" data-dismiss="alert">×</button>
                                {{ errorText }}
                            </div>
                            {% endif %} 

                            {% if data["childpanel"]["success"] == 1 or data["childpanel"]["success"] == 2 %}
                            <div class="alert alert-dismissible alert-success" style="background-color: #f0fdf4; border: 1px solid #bbf7d0; border-left: 4px solid #22c55e; color: #166534; margin:15px;">
                                <strong> Order Id: </strong> #{{ data['childpanel']['id'] }} <br>
                                <strong> Domain: </strong> {{ data['childpanel']['link'] }} <br>
                                <strong> Duration: </strong> {{ data['childpanel']['quantity'] }} Month(s)<br>
                                <strong> Charge: </strong> {{ data['childpanel']['price'] }} <br>
                            </div>
                            {% endif %}
                            
                            <div class="card-header">
                                <div class="row align-items-center">
                                    <div class="col-md-12">
                                        <h3 class="card-title mb-2">Set Your Nameservers</h3>
                                    </div>
                                    <div class="col-md-12 mt-2 mb-2">
                                        <span class="ns-badge"><i class="fa fa-server text-info"></i> ns1.alixdeal.shop</span>
                                        <span class="ns-badge"><i class="fa fa-server text-info"></i> ns2.alixdeal.shop</span>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body">
                                <form action="/child-panels" method="post">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="control-label">Domain</label>
                                                <input type="text" class="form-control" name="panel_domain" placeholder="example.com" required>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="control-label">Currency</label>
                                                <select class="form-control" name="panel_currency" required>
                                                    {{ child_panel_currencies }}
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="control-label">Plan Duration</label>
                                                <select class="form-control" name="panel_months" id="panel_months" onchange="calculatePrice()" required>
                                                    <option value="1">1 Month</option>
                                                    <option value="2">2 Months</option>
                                                    <option value="3">3 Months</option>
                                                    <option value="6">6 Months</option>
                                                    <option value="12">1 Year (12 Months)</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="control-label">Admin username</label>
                                                <input type="text" class="form-control" name="admin_username" required>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="control-label">Admin password</label>
                                                <input type="password" class="form-control" name="admin_password" required>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="control-label">Confirm password</label>
                                                <input type="password" class="form-control" name="admin_confirm_password" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">Total Price</label>
                                        <input type="text" class="form-control" id="price" value="{{site_base_currency_symbol}} {{site["childpanel_price"]}}" readonly style="font-weight:bold; color:#10b981; font-size:16px;">
                                    </div>
                                    <button type="submit" class="btn btn-primary btn-100">Submit order</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-lg-8">
                        <div class="card">
                            <div class="card-header border-bottom">
                                <h3 class="card-title">Your Child Panels History</h3>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-striped table-hover" style="margin-bottom: 0;">
                                        <thead style="background-color: #f8f9fa;">
                                            <tr>
                                                <th>ID</th>
                                                <th>Domain</th>
                                                <th>Plan</th>
                                                <th>Status</th>
                                                <th>Expiry & Time</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% if data['panel_logs'] %}
                                                {% for log in data['panel_logs'] %}
                                                <tr>
                                                    <td style="vertical-align: middle; font-weight:600;">#{{ log.id }}</td>
                                                    <td style="vertical-align: middle;">
                                                        <strong class="text-primary">{{ log.domain }}</strong><br>
                                                        <small class="text-muted">User: {{ log.child_panel_username }}</small>
                                                    </td>
                                                    <td style="vertical-align: middle;">
                                                        <div style="font-weight:bold;">{{ log.charged_amount }} {{ log.child_panel_currency }}</div>
                                                        <small class="text-muted">{{ log.duration_months }} Month(s)</small>
                                                    </td>
                                                    <td style="vertical-align: middle;">
                                                        {% if log.child_panel_status == 'Pending' %}
                                                            <span class="badge" style="background:#f59e0b; color:#fff; padding:6px 10px;">Pending</span>
                                                        {% elseif log.child_panel_status == 'Active' %}
                                                            <span class="badge status-pulse-active" style="background:#10b981; color:#fff; padding:6px 10px;">Active</span>
                                                        {% else %}
                                                            <span class="badge" style="background:#ef4444; color:#fff; padding:6px 10px;">{{ log.child_panel_status }}</span>
                                                        {% endif %}
                                                    </td>
                                                    
                                                    <td style="vertical-align: middle;">
                                                        <div class="font-weight-bold" style="color: #374151; font-size: 13px;"><i class="fa fa-calendar-alt text-muted"></i> {{ log.renewal_date|date("d M Y") }}</div>
                                                        <div class="countdown-timer mt-1" data-expiry="{{ log.renewal_date }}">
                                                            <span class="badge" style="background:#9ca3af;">Calculating...</span>
                                                        </div>
                                                    </td>

                                                    <td style="vertical-align: middle;">
                                                        <a href="https://wa.me/918273147063?text=Hello%20AlixDeal,%20Mujhe%20apna%20Child%20Panel%20Renew%20karana%20hai!%0A%0A*👉%20Domain:*%20{{ log.domain }}%0A*👤%20Username:*%20{{ log.child_panel_username }}%0A*💰%20Price:*%20{{ log.charged_amount }}%20{{ log.child_panel_currency }}%0A*📅%20Expiry:*%20{{ log.renewal_date|date('d M Y') }}" target="_blank" class="btn btn-sm wa-renew-btn">
                                                            <i class="fab fa-whatsapp" style="font-size:15px;"></i> Renew via WA
                                                        </a>
                                                    </td>
                                                </tr>
                                                {% endfor %}
                                            {% else %}
                                                <tr>
                                                    <td colspan="6" class="text-center text-muted py-5">
                                                        <i class="fa fa-server fa-3x mb-3" style="color:#cbd5e1;"></i><br>
                                                        No child panels found. Your orders will appear here.
                                                    </td>
                                                </tr>
                                            {% endif %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </div>
</div>

<script>
function calculatePrice() {
    let basePrice = {{ site["childpanel_price"] }};
    let months = parseInt(document.getElementById("panel_months").value);
    let total = basePrice * months;
    document.getElementById("price").value = "{{ site_base_currency_symbol }} " + total.toFixed(2);
}

document.addEventListener('DOMContentLoaded', function() {
    const timers = document.querySelectorAll('.countdown-timer');
    timers.forEach(timer => {
        const expiryDateStr = timer.getAttribute('data-expiry');
        const expiry = new Date(expiryDateStr + 'T23:59:59');
        const now = new Date();
        
        const diffTime = expiry - now;
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

        if (diffDays < 0) {
            timer.innerHTML = '<span class="badge" style="background:#ef4444; color:#fff; font-size:11px;"><i class="fa fa-exclamation-circle"></i> Expired</span>';
        } else if (diffDays === 0) {
            timer.innerHTML = '<span class="badge" style="background:#f97316; color:#fff; font-size:11px;"><i class="fa fa-clock"></i> Expires Today!</span>';
        } else {
            let badgeColor = diffDays > 7 ? '#10b981' : '#f59e0b';
            timer.innerHTML = `<span class="badge" style="background:${badgeColor}; color:#fff; font-size:11px;"><i class="fa fa-clock"></i> ${diffDays} Days Left</span>`;
        }
    });
});
</script>

{% include 'footer.twig' %}