<?php
  if (isset($_GET['source'])) {
        highlight_file($_SERVER['SCRIPT_FILENAME']);
        exit;
  }
?>
<html>
<head>
<title>PHP and Web Forms</title>
    
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="theme-color" content="#B5C7DD" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="../css/reset.css">
        <link rel="stylesheet" href="../css/mandy.css">
        <link rel="stylesheet" href="../css/form.css">

<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
</head>
<body>
    
<h2 class="pad-top">    
    
<?php   # need this to be able to view source in the below anchor tag
  $urlPath=dirname($_SERVER['SCRIPT_URL']).'/'; 
  $labsPath=$urlPath.'labs/'; 
?>     

    <a href="../index.php">CS 130A</a> → Lab 6
<a href="<?=$urlPath?>color.php?source" target="labs">Source code</a>

</h2>   

    
<?php 
 //  obtains the value from the names of text and bg from the form from index.php and sets the variables $text and $bg to these predefinted color values
    
$text = $_POST['text'];
$bg = $_POST['bg']; 

 //  if the color values of $text and $bg are both NULL OR the button of name="submit" and value of "Reset" is pressed then the values of $text and $bg will be set to the default states below
   
if($text == NULL && $bg == NULL || $_POST['submit'] == "Reset")
    {$text = "blank";
     $bg = "na";}
   
   #    the functions below alter the inline php short echo string values inside the html forms
 //  for every color value obtained from $text = $_POST['text'], set $txt_color to a class value and id value of "color-text" specified as the color in css    
# AND
 //  set $clr_t_c (color_text_checked, depending on color value) to "checked" such that the corrsponding radio button for that color value remains checked when the form is submitted. The defualt value (hidden default checked radio button input only acessible by the reset button) maintains the appearance of the unaltered appearance by appending a dummy css class of "blank".
     
switch($text) 
    {
 case 'red':
   $txt_color = "red-txt";
    $re_t_c = "checked";
 break;
 case 'yellow':
   $txt_color = "yel-txt";
        $ye_t_c = "checked";
 break;
 case 'green':
   $txt_color = "grn-txt";
        $gr_t_c = "checked";
 break;
case 'blue':
   $txt_color = "blu-txt";
        $bu_t_c = "checked";
 break;
 case 'black':
   $txt_color = "blk-txt";
        $bk_t_c = "checked";
 break;
        
 case 'blank':
   $txt_color = "blank";
        $no_t_c = "checked";
 break;
        
 default:
    $txt_color = "blank";
    }  
   
   #   the functions below alter the inline php short echo string values inside the html forms
 //  for every color value obtained from bg = $_POST['bg'], set $bg_color to a class value of "color-bg" specified as the background color in css  
# AND
 //  set $clr_b_c (color_background_checked, depending on color value) to "checked" such that the corrsponding radio button for that color value remains checked when the form is submitted. The defualt value (hidden default checked radio button input only acessible by the reset button) maintains the appearance of the unaltered appearance by appending a dummy css class of "na".
   
switch($bg) 
    {
 case 'white':
   $bg_color = "wht-bg";
    $wh_b_c = "checked";
 break;
 case 'yellow':
   $bg_color = "yel-bg";
    $ye_b_c = "checked";        
 break;
 case 'grey':
   $bg_color = "gry-bg";
    $gr_b_c = "checked";
 break;
case 'blue':
   $bg_color = "blu-bg";
    $bu_b_c = "checked";
 break;
 case 'black':
   $bg_color = "blk-bg";
    $bk_b_c = "checked";
 break;
 case 'na':
   $bk_color = "na";
        $no_b_c = "checked";
 break;        
        
 default:
    $bg_color = "na";
    }   
 
   $err = " ";  # the $err error message is normally default defined to be a string of a spacebar inside the <h2> tag and turns into a css styled ERROR string value when the below if condition is met
   
 //  if the string color value of $text matches $bg exactly, the below error message appears inside the <p> tag via short echo notation of $blurb, and regardless of what value $text and $bg was, set them to the css class values that result in black text and white background
   # $err is now also chaged to a value that appends an all caps red ERROR inside <h2>
   
if ($text == $bg)  
    
    {
    $blurb = "Unfortunately, the color of the background and text being both <span class=\"$txt_color fancy\">$text</span> 
    would make this section unreadable, so please try another combination.";
    
    $txt_color = "blk-txt";
    $bg_color = "wht-bg"; 
    
    $err = "<span class=\"track\" id=\"red-txt\">ERROR</span>";
    }
    
 //  if $text is not the same color value as $bg then the default $blurb that matches the content within the index.php <p> is echoed
   
else 
    {$blurb = "Anything written within these dashed lines will turn into the colors chosen below. Spaghetti is tasty. <br />Do NOT pick the same background and text color.";}    
 
//  below, various short echo php tags are used to insert strings to modify the html form to append css classes and ids to style the content within the <section> as well as to modify the radio buttons to be checked appropriately
?>    
   
    
    <section class="<?=$txt_color?> <?=$bg_color?>">
<h4 class="<?=$txt_color?> <?=$bg_color?>">Color Picker &nbsp; &nbsp; &nbsp; &nbsp; <?=$err?></h4>
    <p class="nudge in" id="<?=$txt_color?>"><?=$blurb?></p>

 <form action="color.php" method=post name="render" id="render"> 
<div class="flex-column">
<div class="nudge">  

<label for="text">Text Color: </label> <br />   
    <label><input type="radio" name="text" value="red" id="red-txt" <?=$re_t_c?> /> Red </label><br />
    <label><input type="radio" name="text" value="yellow" id="yel-txt" <?=$ye_t_c?>/> Yellow </label><br />
    <label><input type="radio" name="text" value="green" id="grn-txt" <?=$gr_t_c?>/> Green </label><br />
    <label><input type="radio" name="text" value="blue" id="blu-txt" <?=$bu_t_c?>/> Blue </label><br />
    <label><input type="radio" name="text" value="black" id="blk-txt" <?=$bk_t_c?>/> Black </label>
    
     <label class="invis"><input type="radio" name="text" value="blank" id="no-txt" <?=$no_t_c?>/> None </label>
 
</div>   

<div class="nudge"> 
    
<label for="bg">Background Color: </label>    <br />
    <label><input type="radio" name="bg" value="white" id="wht-bg" <?=$wh_b_c?> /> White </label><br />
    <label><input type="radio" name="bg" value="yellow" id="yel-bg" <?=$ye_b_c?> /> Yellow </label><br />
    <label><input type="radio" name="bg" value="grey" id="gry-bg" <?=$gr_b_c?> /> Grey </label><br />
    <label><input type="radio" name="bg" value="blue" id="blu-bg" <?=$bu_b_c?> /> Blue </label><br />
    <label><input type="radio" name="bg" value="black" id="blk-bg" <?=$bk_b_c?> /> Black </label>   
    
    <label class="invis"><input type="radio" name="bg" value="na" id="no-bg" <?=$no_b_c?>/> None </label>    
    
</div>
 </div>    
<div class="pad-top flex-center">     
<!--     Reset button here doesn't actually reset but brings you back to the original index page with the form-->    
<input type="submit" formaction="color.php" name ="submit" value="Reset" class="button">     
     
<input type="submit" name="submit" value="Submit" class="space button">
</div>     
      
</form>
       
</section>        
   
    <p class="hide">
    this is a blank paragraph to do nothing but take up space and ensure the formatting works
    </p>
    <div class="stretch"></div>
</body>
</html>