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

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

$ptpian_plugin_data = get_plugin_data( plugin_dir_path(__FILE__) . 'ptpiano.php' );
$ptpian_plugin_version = $ptpian_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 class="settingversion">V <?php echo esc_html($ptpian_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');						
				 ?>			
				
				<h2 class="nav-tab-wrapper">
					<a href="#general" class="nav-tab nav-tab-active" data-tab="general">General Settings</a>
					<a href="#songs" class="nav-tab" data-tab="songs">Song Manager</a>
				</h2>				
				<div id="tab-general" class="ptpian-tab active">
					
						
						<h3 class="plugin-setting-heading">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 class="plugin-setting-heading">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 class="plugin-setting-heading">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>
				<div id="tab-songs" class="ptpian-tab" style="display:none;">

					<h3 class="plugin-setting-heading">Song Manager</h3>

					<table class="form-table" id="ptpian-song-table">
						<thead>
							<tr>
								<th>Song Name</th>
								<th>Scale</th>
								<th>Notes</th>
								<th>Action</th>
							</tr>
						</thead>
						<tbody>
							<?php
							$ptpian_songs = get_option('ptpian_songs_data', []);

							if (!empty($ptpian_songs)) :
								foreach ($ptpian_songs as $ptpian_index => $ptpian_song) :
							?>
							<tr>
								<td>
									<input type="text" 
										name="ptpian_songs_data[<?php echo esc_attr((int)$ptpian_index); ?>][name]" 
										value="<?php echo esc_attr($ptpian_song['name'] ?? ''); ?>">
								</td>

								<td>
									<input type="text" 
										style="width:100px;" 
										name="ptpian_songs_data[<?php echo esc_attr((int)$ptpian_index); ?>][scale]" 
										value="<?php echo esc_attr($ptpian_song['scale'] ?? ''); ?>">
								</td>								

								<td>
									<textarea 
										name="ptpian_songs_data[<?php echo esc_attr((int)$ptpian_index); ?>][notes]" 
										placeholder="C4,E4,G4"><?php echo esc_textarea($ptpian_song['notes'] ?? ''); ?></textarea>
								</td>

								<td>
									<button type="button" class="button remove-row">✖</button>
								</td>
							</tr>
							<?php 
								endforeach; 
							endif; 
							?>

							<tr class="add-song-row">
								<td colspan="4" style="text-align:right;">
									<button type="button" class="button button-primary" id="add-song">+ Add Song</button>
								</td>
							</tr>
						</tbody>
					</table>				

				</div>
				<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 /><p>For detailed documentation, new features, and future updates of the PT Piano plugin, please visit our official page:</p><br />
                <a href="https://wordpress.santechidea.net/sti-wp-plugins-ptpiano/" 
				   target="_blank" 
				   class="visit-ptpiano-button">
				   PT Piano Updates
				</a>
				<br /><br />
				<p>Please don’t forget to leave us a review. Your feedback helps us improve!</p><br />
				 <a href="https://wordpress.org/support/plugin/ptpiano/reviews/" 
				   target="_blank" 
				   class="visit-ptpiano-button">
				   Leave a Review
				</a>
            </td>
        </tr>
    </table>
</div>