<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

if ( ! function_exists( 'get_plugin_data' ) ) {
    require_once ABSPATH . 'wp-admin/includes/plugin.php';
}

$plugin_data = get_plugin_data( plugin_dir_path(__FILE__) . 'ptpiano.php' );
$plugin_version = $plugin_data['Version'];
?>
<div class="headsetting">
    <div style="width:5%">       
		<img src="<?php echo esc_url(PTPIAN_PLUGIN_URL . 'PT-piano-icon.png'); ?>" width="50px" />
    </div>
    <div style="width:95%">
        <h2>PT PIANO <span style="color:#eee;font-size:14px">V <?php echo esc_html($plugin_version); ?></span></h2>
    </div>	
</div>
<?php settings_errors(); ?>
<div class="wrapsetting">
    <table width="100%" border="0">
        <tr>
            <td width="69%" valign="top" class="left-area">				
				
                <form method="post" action="options.php">				
                    <?php 
						settings_fields('ptpian_settings_group'); 
						//do_settings_sections('ptpian_settings');						
					 ?>
					
                    <h3 style="background-color:#252424;padding:10px;color:#eee;">Control Options</h3>
                    <table class="form-table">
                        <tr valign="top">
                            <th scope="row">Display Active Note / Chord</th>
                            <td>
                                <input type="checkbox"
                                       id="ptpian_chordtxt_switch"
                                       class="checkbox"
                                       name="ptpian_chordtxt_switch"
                                       value="1"
                                       <?php checked(get_option('ptpian_chordtxt_switch'), 1); ?> />
                                <label for="ptpian_chordtxt_switch" class="toggle"><p>OFF &nbsp;&nbsp; ON</p></label>
                            </td>
                        </tr>
						<tr valign="top">
							<th scope="row">Note Name Display</th>
							<td colspan="2">
								<select id="ptpian_note_display" name="ptpian_note_display">
									<option value="letters" <?php selected(get_option('ptpian_note_display'), 'letters'); ?>>C, D, E...</option>
									<option value="solfege" <?php selected(get_option('ptpian_note_display'), 'solfege'); ?>>Do, Re, Mi...</option>
									<option value="indian" <?php selected(get_option('ptpian_note_display'), 'indian'); ?>>Sa, Re, Ga...</option>
								</select>
								<label>&nbsp;[Choose note naming system]</label>							
							</td>							
						</tr>
                        <tr valign="top">
                            <th scope="row">Chord Display</th>
                            <td>
                                Major
                                <input type="checkbox"
                                       id="ptpian_chordmajor_switch"
                                       class="checkbox"
                                       name="ptpian_chordmajor_switch"
                                       value="1"
                                       <?php checked(get_option('ptpian_chordmajor_switch'), 1); ?> />
                                <label for="ptpian_chordmajor_switch" class="toggle"><p>OFF &nbsp;&nbsp; ON</p></label>
                            </td>
                            <td>
                                Minor
                                <input type="checkbox"
                                       id="ptpian_chordminor_switch"
                                       class="checkbox"
                                       name="ptpian_chordminor_switch"
                                       value="1"
                                       <?php checked(get_option('ptpian_chordminor_switch'), 1); ?> />
                                <label for="ptpian_chordminor_switch" class="toggle"><p>OFF &nbsp;&nbsp; ON</p></label>
                            </td>
                            <td>
                                Dim
                                <input type="checkbox"
                                       id="ptpian_chorddim_switch"
                                       class="checkbox"
                                       name="ptpian_chorddim_switch"
                                       value="1"
                                       <?php checked(get_option('ptpian_chorddim_switch'), 1); ?> />
                                <label for="ptpian_chorddim_switch" class="toggle"><p>OFF &nbsp;&nbsp; ON</p></label>
                            </td>
							<td>
                                Agu
                                <input type="checkbox"
                                       id="ptpian_chordagu_switch"
                                       class="checkbox"
                                       name="ptpian_chordagu_switch"
                                       value="1"
                                       <?php checked(get_option('ptpian_chordagu_switch'), 1); ?> />
                                <label for="ptpian_chordagu_switch" class="toggle"><p>OFF &nbsp;&nbsp; ON</p></label>
                            </td>
                        </tr>
                        <tr valign="top">
                            <th scope="row">Application</th>
                            <td>
                                <input type="color" id="ptpian_bgcolor_control" name="ptpian_bgcolor_control"
                                       value="<?php echo esc_attr(get_option('ptpian_bgcolor_control')); ?>" />
                                <label>&nbsp;[Background]</label>
                            </td>
                            <td>
                                <input type="color" id="ptpian_toggle_control" name="ptpian_toggle_control"
                                       value="<?php echo esc_attr(get_option('ptpian_toggle_control')); ?>" />
                                <label>&nbsp;[Toggle Button]</label>
                            </td>
							<td colspan="2">
                                <input type="color" id="ptpian_select_control" name="ptpian_select_control"
                                       value="<?php echo esc_attr(get_option('ptpian_select_control')); ?>" />
                                <label>&nbsp;[Select Option]</label>
                            </td>
                        </tr>
                    </table>

                    <h3 style="background-color:#252424;padding:10px;color:#eee;">Piano Options</h3>
                    <table class="form-table">
                        <tr valign="top">
                            <th scope="row">Piano Board Theme</th>
                            <td>
                                <ul id="thumbs">
                                    <li><img src="<?php echo esc_url(PTPIAN_PLUGIN_URL . 'theme/thumb0.png'); ?>" data-index="0"></li>
                                    <li><img src="<?php echo esc_url(PTPIAN_PLUGIN_URL . 'theme/thumb1.png'); ?>" data-index="1"></li>
                                    <li><img src="<?php echo esc_url(PTPIAN_PLUGIN_URL . 'theme/thumb2.png'); ?>" data-index="2"></li>
                                    <li><img src="<?php echo esc_url(PTPIAN_PLUGIN_URL . 'theme/thumb3.png'); ?>" data-index="3"></li>
                                </ul>
                                <input type="hidden" id="ptpian_theme" name="ptpian_theme"
                                       value="<?php echo esc_attr(get_option('ptpian_theme')); ?>" />
                            </td>
                        </tr>
                        <tr valign="top">
                            <th scope="row">Piano Key Text Color</th>
                            <td>
                                <input type="color" id="ptpian_txtcolor_piano" name="ptpian_txtcolor_piano"
                                       value="<?php echo esc_attr(get_option('ptpian_txtcolor_piano')); ?>" />
                                <label>&nbsp;[Choose Piano text color]</label>
                            </td>
                        </tr>
                        <tr valign="top">
                            <th scope="row">Piano Mark Highlight Color</th>
                            <td>
                                <input type="color" id="ptpian_markcolor_piano" name="ptpian_markcolor_piano"
                                       value="<?php echo esc_attr(get_option('ptpian_markcolor_piano')); ?>" />
                                <label>&nbsp;[Choose Mark color]</label>
                            </td>
                        </tr>
						<tr valign="top">
							<th scope="row">Set Piano Key Lights Color</th>
							<td>                                
                                <input type="color" id="ptpian_keylights_color" name="ptpian_keylights_color"
                                       value="<?php echo esc_attr(get_option('ptpian_keylights_color')); ?>" />
                                <label>&nbsp;[Choose Piano highlight color]</label>
							</td>
						</tr>

                    </table>
					
					 <h3 style="background-color:#252424;padding:10px;color:#eee;">User Options</h3>
                    <table class="form-table">
                        <tr valign="top">
							<th scope="row">Max Recording Duration (seconds)</th>
							<td>
								<input type="number" name="ptpian_record_duration" value="<?php echo esc_attr(get_option('ptpian_record_duration', 30)); ?>" min="5" max="300" />
								<p class="description">Enter the max duration in seconds for recording (default is 30 seconds).</p>
							</td>
						</tr>

					</table>

                    <div class="center-submit">
                        <?php submit_button(); ?>
                    </div>
                </form>
            </td>

            <td width="1%">&nbsp;</td>

            <td width="30%" valign="top" class="right-sidebar">
                <h3 style="color:#726e6e;">Plugin Description:</h3>
                <p>This plugin is designed for playing and learning the piano.</p>

                <h3 style="color:#726e6e;">How to use?</h3>
                <p>Simply insert the following shortcode where you want the piano to appear:</p>
                <span style="color:#F60;">[PT-Piano]</span>

                <br /><br />Please visit Official Website:
                <a href="https://wordpress.santechidea.net/sti-wp-plugins-ptpiano/" target="_blank">PTPiano</a>
            </td>
        </tr>
    </table>
</div>