<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>
<?php if ( !isset($_GET['user_nonce']) || !wp_verify_nonce(sanitize_text_field(wp_unslash($_GET['user_nonce'])), 'Copuloo') ) {} ?>
<div class="wrap modern-admin-header">
    <div class="header-container">
        <h1 class="header-title">Copuloo Admin Settings</h1>
        <div class="header-actions">
            <a href="<?php echo esc_url(admin_url('admin.php?page=' . 'copuloo_') . "dashboard"); ?>" class="button button-primary">Dashboard</a>
            <a href="<?php echo esc_url(admin_url('admin.php?page=' . 'copuloo_') . "setup"); ?>" class="button button-secondary">Settings</a>
        </div>
    </div>
    <div class="tab-container">
        <div class="tab-nav">
            <a href="<?php echo esc_url(admin_url('admin.php?page=' . 'copuloo_') . "setup"); ?>" 
               class="tab-button <?php if ($current_page == 'setup') { echo 'active'; } ?>">Settings</a>
            <a href="<?php echo esc_url(admin_url('admin.php?page=' . 'copuloo_') . "info"); ?>" 
               class="tab-button <?php echo $current_page === 'info' ? 'active' : ''; ?><?php echo $current_page === 'availability' ? 'active' : ''; ?>">Info</a>
            <a href="<?php echo esc_url(admin_url('admin.php?page=' . 'copuloo_') . "activenumbers"); ?>" 
               class="tab-button <?php echo $current_page === 'activenumbers' ? 'active' : ''; ?><?php echo $current_page === 'add' ? 'active' : ''; ?><?php echo $current_page === 'remove' ? 'active' : ''; ?>">Active Numbers</a>
            <a href="<?php echo esc_url(admin_url('admin.php?page=' . 'copuloo_') . "released"); ?>" 
               class="tab-button <?php echo $current_page === 'released' ? 'active' : ''; ?>">Released Numbers</a>
            <a href="<?php echo esc_url(admin_url('admin.php?page=' . 'copuloo_') . "license"); ?>"
               class="tab-button <?php echo $current_page === 'license' ? 'active' : ''; ?>">License</a>
        </div>
    </div>

    <?php // Sub-tab menu for specific tabs (setup and additional settings)
    if ($current_page == 'setup') : ?>
        <div class="subtab-container">
            <div class="subtab-nav">
                <a href="<?php echo esc_url(admin_url('admin.php?page=' . 'copuloo_') . "setup"); ?>" 
                   class="subtab-button <?php if ($current_page == 'setup' && !isset($_GET['tabpage'])) { echo 'active'; } ?>">API Keys</a>
                <a href="<?php echo esc_url(admin_url('admin.php?page=' . 'copuloo_') . "setup&tabpage=additional"); ?>"
                   class="subtab-button <?php if ($current_page == 'setup' && isset($_GET['tabpage']) && sanitize_text_field(wp_unslash($_GET['tabpage']) == 'additional')) { echo 'active'; } ?>">Settings</a>
            </div>
        </div>
    <?php endif; ?>
    <?php // Sub-tab menu for specific tabs (Active Numbers)
    if ($current_page == 'activenumbers' || $current_page == 'add' || $current_page == 'remove') : ?>
        <div class="subtab-container">
            <div class="subtab-nav">
                <a href="<?php echo esc_url(admin_url('admin.php?page=' . 'copuloo_') . "activenumbers"); ?>" 
                   class="subtab-button <?php if ($current_page == 'activenumbers') { echo 'active'; } ?>">Active Numbers</a>
                <a href="<?php echo esc_url(admin_url('admin.php?page=' . 'copuloo_') . "add"); ?>"
                   class="subtab-button <?php if ($current_page == 'add') { echo 'active'; } ?>">Add Number</a>
                <a href="<?php echo esc_url(admin_url('admin.php?page=' . 'copuloo_') . "remove"); ?>"
                   class="subtab-button <?php if ($current_page == 'remove') { echo 'active'; } ?>">Remove Number</a>
            </div>
        </div>
    <?php endif; ?>
    <?php // Sub-tab menu for specific tabs (Information)
    if ($current_page == 'info' || $current_page == 'availability') : ?>
        <div class="subtab-container">
            <div class="subtab-nav">
                <a href="<?php echo esc_url(admin_url('admin.php?page=' . 'copuloo_') . "info"); ?>" 
                   class="subtab-button <?php if ($current_page == 'info' && !isset($_GET['tabpage'])) { echo 'active'; } ?>">Information</a>
                <a href="<?php echo esc_url(admin_url('admin.php?page=' . 'copuloo_') . "info&tabpage=additional"); ?>"
                   class="subtab-button <?php if ($current_page == 'info' && isset($_GET['tabpage']) && sanitize_text_field(wp_unslash($_GET['tabpage']) == 'additional')) { echo 'active'; } ?>">Number Availability</a>
            </div>
        </div>
    <?php endif; ?>
</div>

<style>
    .copuloo-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    font-size: 14px;
    line-height: 1.5;
}

.copuloo-notice-success {
    background: #e6ffed;
    border-left: 4px solid #2ecc71;
    color: #1e293b;
}

.copuloo-notice-error {
    background: #ffe6e6;
    border-left: 4px solid #e74c3c;
    color: #1e293b;
}

.copuloo-notice-info {
    background: #e8f3ff;               /* soft light blue */
    border-left: 4px solid #3b82f6;    /* medium blue border */
    color: #1e293b;                    /* your standard text color */
}

.copuloo-notice-dismiss {
    background: none;
    border: none;
    color: #64748b;
    font-size: 14px;
    cursor: pointer;
    padding: 0 8px;
}

.copuloo-notice-dismiss:hover {
    color: #1e293b;
}
.copuloo-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.spinner-border {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: text-bottom;
  border: 0.15em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}

.spinner-border-sm {
  width: 0.8rem;
  height: 0.8rem;
  border-width: 0.12em;
}

@keyframes spinner-border {
  to { transform: rotate(360deg); }
}
.copuloo-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 20px;
}
.copuloo-form-group input[type="text"],
.copuloo-form-group input[type="email"],
.copuloo-form-group input[type="password"],
.copuloo-form-group input[type="number"],
.copuloo-form-group input[type="url"],
.copuloo-form-group input[type="tel"] {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #f8fafc;
    color: #1e293b;
    transition: all 0.2s ease;
    appearance: none;
}
.copuloo-form-group input:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.2);
    background: #ffffff;
}
.copuloo-form-group input:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}
.copuloo-form-group input::placeholder {
    color: #94a3b8;
}
.copuloo-list {
        font-size: 14px;
        color: #64748b;
        margin: 0 0 16px;
        padding-left: 20px;
        line-height: 1.6;
    }

    .copuloo-list li {
        margin-bottom: 8px;
    }
.copuloo-input-group select {
        width: 100%;
        box-sizing: border-box; 
        padding: 10px 12px;
        font-size: 14px;
        border: 1px solid #cbd5e1;
        border-radius: 4px;
        background: #f8fafc;
        transition: all 0.2s ease;
        appearance: none;
        background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"%3e%3cpolyline points="6,9 12,15 18,9"%3e%3c/polyline%3e%3c/svg%3e');
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 16px;
        padding-right: 40px;
    }
    .copuloo-label {
        font-size: 14px;
        font-weight: 500;
        color: #1e293b;
        margin-bottom: 4px;
    }
    .copuloo-input-group select:focus {
        outline: none;
        border-color: #2271b1;
        box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.2);
    }
    .copuloo-input {
        width: 100%;
        padding: 10px 12px;
        font-size: 14px;
        border: 1px solid #cbd5e1;
        border-radius: 4px;
        background: #f8fafc;
        transition: all 0.2s ease;
    }

    .copuloo-input:focus {
        outline: none;
        border-color: #2271b1;
        box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.2);
    }

    .copuloo-input-group {
        width: 100%;
    }
    .copuloo-help-text {
        font-size: 13px;
        color: #94a3b8;
        margin: 8px 0 0;
        font-style: italic;
        line-height: 1.4;
    }
    .copuloo-link {
        color: #2271b1;
        text-decoration: none;
        font-weight: 500;
    }

    .copuloo-link:hover {
        color: #1e5a8d;
        text-decoration: underline;
    }
    .copuloo-help-text strong {
        color: #e74c3c; /* Red for warning emphasis */
    }
    .copuloo-form {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .copuloo-form-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .copuloo-card {
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        padding: 24px;
        margin-bottom: 20px;
        border: 1px solid #e2e8f0;
    }
    .copuloo-card p {
        font-size: 14px;
        color: #64748b;
        margin: 0 0 12px;
        line-height: 1.5;
    }
    .copuloo-admin-wrap {
        max-width: 800px;
        margin: 20px auto;
        padding: 0 20px;
    }
    .copuloo-subtitle {
        font-size: 18px;
        font-weight: 500;
        color: #1e293b;
        margin: 16px 0 8px;
        line-height: 1.3;
    }

    .copuloo-description {
        font-size: 14px;
        color: #64748b;
        margin: 0 0 16px;
        line-height: 1.5;
    }
    .copuloo-page-title {
        font-size: 28px;
        font-weight: 600;
        color: #1e293b;
        margin: 0 0 20px;
        line-height: 1.2;
    }
    .copuloo-table-container {
        overflow-x: auto;
        margin-bottom: 24px;
    }
    .copuloo-title {
        font-size: 22px;
        font-weight: 600;
        color: #1e293b;
        margin: 0 0 12px;
        line-height: 1.3;
    }
    .copuloo-table {
        width: 100%;
        border-collapse: collapse;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        font-size: 14px;
        color: #1e293b;
    }

    .copuloo-table th,
    .copuloo-table td {
        padding: 12px 16px;
        text-align: left;
        border-bottom: 1px solid #e2e8f0;
        vertical-align: middle;
    }

    .copuloo-table th {
        background: #f8fafc;
        font-weight: 600;
        color: #1e293b;
    }

    .copuloo-table tr:last-child td {
        border-bottom: none;
    }

    .copuloo-table tr:nth-child(even) {
        background: #f8fafc;
    }
    .copuloo-table th.actions,
    .copuloo-table td.actions {
        text-align: right;
        white-space: nowrap;
    }
    .copuloo-badge {
        display: inline-block;
        padding: 4px 8px;
        font-size: 12px;
        font-weight: 500;
        border-radius: 4px;
        line-height: 1.2;
    }

    .copuloo-badge-success {
        background: #e6ffed;
        color: #2ecc71;
    }

    .copuloo-badge-danger {
        background: #ffe6e6;
        color: #e74c3c;
    }
    .modern-admin-header {
        background: linear-gradient(135deg, #ffffff, #f8fafc);
        border-bottom: 1px solid #e2e8f0;
        padding: 20px 20px 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
    }

    .header-title {
        font-size: 24px;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
        line-height: 1.2;
    }

    .header-actions {
        display: flex;
        gap: 10px;
        padding-right: 10px;
    }

    .copuloo-button {
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 500;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s ease;
        border: none;
        display: inline-block;
    }

    .copuloo-button-primary {
        background: #2271b1;
        color: #ffffff;
    }

    .copuloo-button-primary:hover {
        background: #1e5a8d;
    }

    .copuloo-button-secondary {
        background: #f1f5f9;
        border: 1px solid #cbd5e1;
        color: #1e293b;
    }

    .copuloo-button-secondary:hover {
        background: #e2e8f0;
        border-color: #94a3b8;
    }

    .copuloo-button-danger {
    background: #e74c3c;       /* red */
    color: #ffffff;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-block;
    }

    .copuloo-button-danger:hover {
        background: #c0392b;       /* darker red */
    }

    .tab-container {
        display: flex;
        justify-content: center;
        padding: 10px 0;
        border-top: 1px solid #e2e8f0;
        margin-top: 15px;
    }

    .tab-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 20px;
        padding: 0;
        background: #f1f5f9;
        border-radius: 6px;
        
    }

    .tab-button {
        background: none;
        border: none;
        padding: 8px 16px;
        font-size: 14px;
        font-weight: 500;
        color: #64748b;
        border-radius: 4px;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .tab-button:hover {
        background: #e2e8f0;
        color: #1e293b;
    }

    .tab-button.active {
        background: #ffffff;
        color: #2271b1;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .subtab-container {
        display: flex;
        justify-content: center;
        padding: 10px 0;
    }

    .subtab-nav {
        display: flex;
        gap: 6px;
        background: #f8fafc;
        padding: 4px;
        border-radius: 6px;
    }

    .subtab-button {
        background: none;
        border: none;
        padding: 6px 12px;
        font-size: 14px;
        font-weight: 500;
        color: #64748b;
        border-radius: 4px;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .subtab-button:hover {
        background: #e2e8f0;
        color: #1e293b;
    }

    .subtab-button.active {
        background: #ffffff;
        color: #2271b1;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    @media (max-width: 782px) {
        .header-container {
            flex-direction: column;
            align-items: flex-start;
            gap: 15px;
        }

        .header-actions {
            width: 100%;
            justify-content: flex-start;
        }

        .tab-container, .subtab-container {
            padding: 10px 20px;
        }

        .tab-nav, .subtab-nav {
            width: 100%;
            justify-content: center;
        }

        .tab-button, .subtab-button {
            flex: 1;
            text-align: center;
        }
    }
</style>
<script>
    // Minimal JavaScript for dismissing notices
    document.addEventListener('DOMContentLoaded', function() {
        const dismissButtons = document.querySelectorAll('.copuloo-notice-dismiss');
        dismissButtons.forEach(button => {
            button.addEventListener('click', function() {
                this.parentElement.style.display = 'none';
            });
        });
    });
</script>