<?php if( ! defined( 'ABSPATH' ) ) exit; ?>

<form action="<?php echo esc_attr( $_SERVER['REQUEST_URI'] ); ?>" method="POST" class="cookie-form">
    <div class="form-section">
        <h2>General Settings</h2>
        <div class="input-group">
            <label for="title" class="label">Title</label>
            <input type="text" name="title" id="title" class="input-field" value="<?php echo $titles; ?>" data-validation="required">
        </div>
        
        <div class="input-group">
            <label for="content" class="label">Content</label>
            <textarea name="content" id="content" class="textarea-field" rows="5" data-validation="required"><?php echo $content; ?></textarea>
        </div>

        <div class="input-group">
            <label for="button" class="label">Button Text</label>
            <input type="text" name="button" id="button" class="input-field" value="<?php echo $button; ?>" data-validation="required">
        </div>

        <div class="input-group">
            <label for="linkText" class="label">Link Text</label>
            <input type="text" name="linkText" id="linkText" class="input-field" value="<?php echo $linkText; ?>" data-validation="required">  
        </div>

        <div class="input-group">
            <label for="link" class="label">Link</label>
            <input type="text" name="link" id="link" class="input-field" value="<?php echo $link; ?>" data-validation="required">  
        </div>
	    <div class="input-group image-group">
                    <div class="radio-buttons">
                         <div class="image-option">
				         <input type="radio" name="image" class="image-input" value="<?php echo esc_attr( $icon ); ?>" id="image1-input">
				         <img src="<?php echo $icon; ?>" class="image-cookies" />
				    </div>
				     <div class="image-option">
				            <input type="radio" name="image" class="image-input" value="<?php echo esc_attr( $icon1 ); ?>" id="image2-input">
				            <img src="<?php echo $icon1; ?>" class="image-cookies" />
				    </div>
				     <div class="image-option">
				             <input type="radio" name="image" class="image-input" value="<?php echo esc_attr( $icon2 ); ?>" id="image3-input">
				             <img src="<?php echo $icon2; ?>" class="image-cookies" />
				    </div>
				     <div class="image-option">
				             <input type="radio" name="image" class="image-input" value="<?php echo esc_attr( $icon3 ); ?>" id="image4-input">
				             <img src="<?php echo $icon3; ?>" class="image-cookies" />
				    </div>
				     <div class="image-option">
				             <input type="radio" name="image" class="image-input" value="<?php echo esc_attr( $icon4 ); ?>" id="image5-input">
				             <img src="<?php echo $icon4; ?>" class="image-cookies" />
				    </div>
			    </div>			
			</div>	    
		</div>
		<p></p>
		<div class="form-section color-settings">
              <div class="input-group">
				<label class="label">Background</label>
				<input type="color" name="background" class="title-color-input" value="<?php echo $background; ?>" id="title-color-input">
			</div>
			<div class="input-group">
				<label class="label">Border Container</label>
				<input type="color" name="borderContainer" class="title-color-input" value="<?php echo $borderContainer; ?>" id="title-color-input">
			</div>
			<div class="input-group">
				<label class="label">Title Color</label>
				<input type="color" name="titleColor" class="title-color-input" value="<?php echo $titleColor; ?>" id="title-color-input">
			</div>
			<div class="input-group">
				<label class="label">Content Color</label>
				<input type="color" name="contentColor" class="content-color-input" value="<?php echo $contentColor; ?>" id="title1-color-input">
			</div>
			<div class="input-group">
				<label class="label">Link Color</label>
				<input type="color" name="linkColor" class="content-color-input" value="<?php echo $linkColor; ?>" id="title1-color-input">
			</div>
			<div class="input-group">
			    <label class="label">Button Background</label>
			    <input type="color" name="buttonBackground" class="boton-color-input" value="<?php echo $buttonBackground; ?>" id="title2-color-input">
			</div>
			<div class="input-group">
			    <label class="label">Button Color</label>
			    <input type="color" name="botonColor" class="boton-color-input" value="<?php echo $buttonColor; ?>" id="title2-color-input">
			</div>
			<div class="input-group">
			    <label class="label">Button Hover</label>
			    <input type="color" name="botonHover" class="boton-color-input" value="<?php echo $botonHover; ?>" id="title2-color-input">	
			</div>	    
		</div>
		<p></p>
		<div>
			<button type="submit" name="save" id="btnForm" class="button">Saves Changes</button>
		</div>
	</form>
	<script type="text/javascript">
	     image =  document.getElementById("image1-input").value;
	     image1 = document.getElementById("image2-input").value;
	     image2 = document.getElementById("image3-input").value;
	     image3 = document.getElementById("image4-input").value;
	     image4 = document.getElementById("image5-input").value;
	     imageCookie = "<?php echo $image; ?>";
	    if (image === imageCookie) {
		       document.querySelector('#image1-input').checked = true;
		}else if(image1 === imageCookie){
			document.querySelector('#image2-input').checked = true;
		}else if(image2 === imageCookie){
			document.querySelector('#image3-input').checked = true;
		}else if(image3 === imageCookie){
			document.querySelector('#image4-input').checked = true;
		}else if(image4 === imageCookie){
			document.querySelector('#image5-input').checked = true;
			}
	</script>
<?php 
     include_once( $cookies_dir . 'includes/register.php' ); 
?>