<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>
<div class="dialbunny-admin-wrap">
    <div class="dialbunny-card">
        <h2 class="dialbunny-title">Additional Setup</h2>
        <p>This settings page is dedicated to additional, optional setup and configuration to help you customize and enhance your DialBunny experience.</p>
    </div>

    <div class="dialbunny-card">
        <h2 class="dialbunny-title">Requesting Phone Numbers</h2>
        <p class="dialbunny-description">Who can request phone numbers from the DialBunny dashboard:</p>
        <form action="<?php echo esc_url( admin_url('admin-post.php') ); ?>" method="post" class="dialbunny-form">
            <?php wp_nonce_field( 'DialBunny', 'user_nonce' ); ?>
            <input type="hidden" name="action" value="dialbunny_additional_setup">
            <div class="dialbunny-form-group">
                <label for="dialbunny_user_can_request_number" class="dialbunny-label">Permission Level</label>
                <select name="dialbunny_user_can_request_number" id="dialbunny_user_can_request_number" class="dialbunny-select">
                    <option value="true" <?php if (get_option('dialbunny_user_can_request_number') == true) { echo 'selected'; } ?>>Anyone can request</option>
                    <option value="false" <?php if (get_option('dialbunny_user_can_request_number') == false) { echo 'selected'; } ?>>Only administrators</option>
                </select>
                <p class="dialbunny-help-text">Administrators will always be able to manually add and remove phone numbers from the admin pages.</p>
            </div>
            <button type="submit" class="dialbunny-button dialbunny-button-primary">Save Settings</button>
        </form>
    </div>
</div>

<style>
    .dialbunny-admin-wrap {
        max-width: 800px;
        margin: 20px auto;
        padding: 0 20px;
    }

    .dialbunny-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;
    }

    .dialbunny-title {
        font-size: 22px;
        font-weight: 600;
        color: #1e293b;
        margin: 0 0 12px;
        line-height: 1.3;
    }

    .dialbunny-description {
        font-size: 14px;
        color: #64748b;
        margin: 0 0 16px;
        line-height: 1.5;
    }

    .dialbunny-card p:not(.dialbunny-help-text) {
        font-size: 14px;
        color: #64748b;
        margin: 0 0 16px;
        line-height: 1.5;
    }

    .dialbunny-form {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .dialbunny-form-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .dialbunny-label {
        font-size: 14px;
        font-weight: 500;
        color: #1e293b;
        margin-bottom: 4px;
    }

    .dialbunny-select {
        width: 100%;
        max-width: 400px;
        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;
    }

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

    .dialbunny-help-text {
        font-size: 13px;
        color: #94a3b8;
        margin: 8px 0 0;
        font-style: italic;
        line-height: 1.4;
    }

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

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

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

    @media (max-width: 782px) {
        .dialbunny-admin-wrap {
            padding: 0 10px;
        }

        .dialbunny-card {
            padding: 16px;
        }

        .dialbunny-select {
            max-width: 100%;
        }
    }
</style>
