<?php

include('views/_header_shop.tpl.php');

if (isset($_GET['msg'])) {
    $msg = htmlentities(strip_tags($_GET['msg']));
}

?>

<style>
    #mmen { display:none; }
    div.spacer { padding-top: 25px; }
    .tinybutton { padding:3px 7px; background:#fff; width:65px;  min-width:65px;
        border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; font-size:12px; }
        
     input.txt { font-size:17px; padding:25px; font-weight:300; }
     input[type="button"], input[type="submit"] { font-size:17px; padding:15px 25px; width: 150px; font-weight:300 !important; }
     
	 .form .txt {
		 background: #f0f0f0; border:0px;
	 }
	 
	 input[type='checkbox'] {
	 	transform: scale(1.5);
		 margin-right:5px;
	 }
	 
	 .form .row-item .lbl {
		 padding-top: 11px; 
	 }
     
/* ###################################################### */
/* ####### The Switch - the box around the slider ####### */
/* ###################################################### */

	.switch {
	  position: relative;
	  display: inline-block;
	  width: 60px !important;
	  height: 32px;
	}

	/* Hide default HTML checkbox */
	.switch input {display:none;}

	/* The slider */
	.sliderr {
	  position: absolute;
	  cursor: pointer;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: #ccc;
	  -webkit-transition: .4s;
	  transition: .4s;
	}

	.sliderr:before {
	  position: absolute;
	  content: "";
	  height: 28px;
	  width: 28px;
	  left: 2px;
	  bottom: 2px;
	  background-color: white;
	  -webkit-transition: .4s;
	  transition: .4s;
	}

	input:checked + .sliderr {
	  background-color: #98cb54;
	}

	input:focus + .sliderr {
	  box-shadow: 0 0 1px #98cb54;
	}

	input:checked + .sliderr:before {
	  -webkit-transform: translateX(28px);
	  -ms-transform: translateX(28px);
	  transform: translateX(28px);
	}

	/* Rounded sliders */
	.sliderr.round {
	  border-radius: 32px; -moz-border-radius: 32px; -webkit-border-radius: 32px;
	}

	.sliderr.round:before {
	  border-radius: 50%;
	  -moz-border-radius: 50%;
	  -webkit-border-radius: 50%;
	  
	}
/* ##################################################### */
/* ##############     The Switch ENDS     ############## */
/* ##################################################### */                
        
 /* ######################################### */
/* ############     MOBILE      ############# */
/* ########################################## */

/* ################################### */
/* ###  Landscape phones and down  ### */
/* ################################### */

    /* @media screen and (max-device-width:  600px), screen and (max-width: 600px) { */
    @media (max-width: 600px) {
    .home-feature-category { margin-top:20px; }
}       
</style>

 <div class="home-feature-category" style="background:none; border:none; padding:0px;">
     <?php if(isset($_GET['msg'])) : ?>
     <div style="background:#cd1000; color:#fff; font-weight:300; height:25px; line-height:25px; margin-top:0px; text-align:center; padding:5px 0;">
         Saved Successfully! <a href="/admin/?square_xp&edit=<?= $squarexproduct['id'] ?>" class="tinybutton">Ok!</a>
     </div>
     <?php endif; ?>

        <div class="container_12 clearfix" style="padding-top:17px;">
            
        <div class="grid_12 marked-category">

		<h1 style="margin:0 0 5px;"><a href="/admin/items">&lsaquo; Back</a> | <?php
        
        if ($squarexproduct) {
            echo "Edit";
			$readonly = "readonly";
        } else {
            echo "Add";
            $def = "static/system/placeholder.jpg";
			$readonly = "";
        }
        
        ?> Square Product</h1>
        
        To hide at all locations, simply put the text hide in @ Loc
        
        <br /><br />
		<div style="height:208px; max-width:208px; overflow:hidden; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border:1px solid #eee">
			<img src="<?= $squarexproduct['images'] ?>"  alt="Img" style="object-fit: cover;"
			onerror="this.src='/static/system/placeholder.jpg'">
		</div>
		<br />
		Filename: <?= $squarexproduct['images'] ?>

        <form method="post" class="form form-profile" enctype="multipart/form-data" style="padding:25px 0px 0px;">
        
            <div class="row-item clearfix" style="padding-bottom:10px;">         
				<label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">Img:</label>
				<div class="val" style="margin-left:0px;">
					<input class="txt" type="file" name="images" >
					<p class="rs description-input"></p>
				</div>	      
            </div>
            <div class="row-item clearfix" style="padding-bottom:10px;">         
                <label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">ID:</label>
                <div class="val" style="margin-left:0px;">
                    <input class="txt" type="text" name="id" value="<?= $squarexproduct['id'] ?>" readonly style="">
                    <p class="rs description-input"></p>
                </div>        
            </div>
			<div class="row-item clearfix" style="padding-bottom:10px;">
				<label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">Cat:</label>
				<div class="val" style="margin-left:0px;">
					<select class="txt" type="text" name="category_id" style="padding:10px; font-size:17px;">
                        <option value="">Select Category</option>
                        <?php

						foreach ($categories as $category) {
							if ($category['square_id'] == $squarexproduct['category_id']) {
                                $selected = 'selected="selected"';
                            } else {
								if ($squarexproduct) {
									$selected = 'disabled';
                            	} else {
									$selected = '';
                            	}
                            }
							echo "<option $selected value='{$category['square_id']}'>{$category['name']}</option>";
                        }

                        ?>                              
                    </select>
                    <p class="rs description-input"></p>
                </div>
            </div>			        
            <div class="row-item clearfix" style="padding-bottom:10px;">         
                <label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">SQID:</label>
                <div class="val" style="margin-left:0px;">
                    <input class="txt" type="text" name="square_id" value="<?= $squarexproduct['square_id'] ?>" readonly style="">
                    <p class="rs description-input"></p>
                </div>        
            </div>
            <div class="row-item clearfix" style="padding-bottom:10px;">         
                <label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">Name:</label>
                <div class="val" style="margin-left:0px;">
                    <input class="txt" type="text" name="name" value="<?= $squarexproduct['name'] ?>" readonly style="">
                    <p class="rs description-input"></p>
                </div>        
            </div>  
            
			<div class="row-item clearfix" style="padding-bottom:10px;">
				<label class="lbl" for="txt_name1" style="text-align:left; width:auto; margin-right:5px;">Descrip:</label>
				<div class="val" style="margin-left:0px;">
					<textarea class="txt" name="description" style="font-size:15px; line-height:22px;"><?= $squarexproduct['description'] ?></textarea>
					<p class="rs description-input"></p>
				</div> 
			</div>     
			
			<!-- /* ##################################################### */ -->
			<!-- /* ##############     IN-STOCK SECTION     ############# */ -->
			<!-- /* ##################################################### */ -->       
				
			<?php
	        
			if ($squarexproduct) {
				echo '<div style="display:block;">';
	        } else {
				echo '<div style="display:none;">';
	        }
	        
	        ?>         
         
            <div class="row-item clearfix" style="padding-bottom:10px;">         
                <label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">@Loc:</label>
                <div class="val" style="margin-left:0px;">
                    <input id="" class="txt" type="text" name="at_locations" value="<?= $squarexproduct['at_locations'] ?>" 
                    readonly style="font-size:12px;">
                   
					<div class="val" style="margin-left:0px;">
                        <span style="color:#ff0000;">Locations this item/variation is carried at</span>
                    </div>
                    <br />
                    
					<div class="rs description-input" style="color:#000; font-style:normal !important;">
                        <span style="font-size:18px;"><strong>IN STOCK AT THESE LOCATIONS</strong></span><br />
                        Note: If no locations are checked, that means <span style="color:#ff0000;">the item is carried at ALL locations.</span>   
                        
                        <?php    
                                 
                                if (strpos($squarexproduct['at_locations'], 'FJQMA3B3NT0B2') !== false) {
                                    $checked_1 = "checked";
                                } else {
                                    $checked_1 = "";
                                }
                                
                                if (strpos($squarexproduct['at_locations'], '5ZXH0WQ6THAH5') !== false) {
                                    $checked_2 = "checked";
                                } else {
                                    $checked_2 = "";
                                }       
                                
                                if (strpos($squarexproduct['at_locations'], '247JV58NPBAQ7') !== false) {
                                    $checked_3 = "checked";
                                } else {
                                    $checked_3 = "";
                                }    
                                                                                                                          
                         ?>                                      
                        <br /><br />
						<div style="font-size:17px; line-height:28px; margin-left:15px; color:#000;">
							<?php foreach($squarexproduct['locations'] as $location) { ?>
								<input  type="checkbox" name="at_locations[]" value="<?= $location['id'] ?>" <?= $checked_1 ?>> In-Stock @
								<strong><?= $location['name'] ?></strong> (<?= $location['id'] ?>)<br />
							<?php } ?>
                            
		                	<!-- ########### SWITCH FIELD STARTS HERE ########### -->
		                	<label class="lbl" for="txt_name1" style="text-align:left; width:auto; margin-right:5px; margin-top:12px; 
		                	font-size:15px;">Out of Stock at ALL Locations?</label>
		                	
		                    <div style="display:inline-block; float:left; width:auto; min-width:150px; height:41px; line-height:41px; 
		                    background:none; padding-top:9px; margin-top:5px;">
		                        <?php 
		                            $is_excluded = !empty($squarexproduct['is_excluded']) ? " checked='checked'" : ""; 
		                            $is_exclude = isset($squarexproduct['is_excluded']) ? 1 : 0;                            
		                        ?>
		                         <label class='switch'>                           
		                           <input class='' id='' data-toggle='toggle' type='checkbox' name="is_excluded"<?= $is_excluded ?> /><span class='sliderr round'></span>
		                         </label>                                          
		                    </div>                         
		                    <div class="clear"></div>         
                    	</div><!-- ENDS THE IN STOCK CHECKBOXES -->
						<div class="clear"></div>
					</div><!-- ENDS THE IN-STOCK SECTION -->
				</div><!-- VAL ENDS -->
			</div><!-- ROW ENDS -->
					
			<br />
					 
            <!-- VARIATIONS -->
			<div class="row-item clearfix levels" style="padding-bottom:0px">
				<span style="font-size:18px;"><strong>MANAGE VARIATIONS</strong></span><br />
				Note: Pricing is in cents, so $1.00 = 100 (so, enter 100)  
				<br /><br />
				
				<div class="val" style="margin-left:0px; background:none">
					<?php
					foreach ($squarexproduct['variations'] as $level) {
						echo '<input class="form txt" name="var_id[]" placeholder="ID" style="width:75px" type="hidden" value="' . $level['id'] . '" />
						<input class="form txt" name="var_itemid[]" placeholder="VarID" style="width:75px" type="hidden" value="' . $level['square_item_variation_id'] . '" />
						<input class="form txt" name="var_name[]" placeholder="Name" style="width:270px" value="' . $level['name'] . '" />
						<input class="form txt" name="var_price_money[]" placeholder="Price" style="width:75px" value="' . $level['price_money'] . '" />
                        <input class="form txt" name="var_sort_order[]" placeholder="Sort#" style="width:75px" value="' . $level['sort_order'] . '" />


						<a href="/admin/?square_xp&edit=' . $squarexproduct['id'] . '&deleteVariation=' . $level['id'] . '">delete</a><br />';
			}
			?>

					<div id="first_level" style="background:none; width:100%;">
						<!--<input class="form txt" name="var_id[]" placeholder="ID" style="width:75px" />-->
						<input class="form txt" name="var_name[]" placeholder="Name" style="width:270px" />
						<input class="form txt" name="var_price_money[]" placeholder="Price" style="width:75px" />
						<input class="form txt" name="var_sort_order[]" placeholder="Sort#" style="width:75px" />
						<br />
					</div>

					<div class="dynamicSection"></div>

					<p class="rs description-input" style="margin-top:10px;">
						<a href='javascript:;' onclick='addLevel()' class='btn-blue btn' 
						style='margin-left:0px;'>+add another Variation</a></p>
				</div>				
			</div>
			<!-- VARIATIONS ENDS -->
			<div class="clear"></div> 
			<br /><br />
					
            <!-- MODIFIER LISTS -->
			<div class="row-item clearfix modifiers" style="background:none; padding-bottom:0px">
				<span style="font-size:18px;"><strong>MANAGE MODIFIERS</strong></span><br />
				These are the Modifier Lists only  
				<br /><br />
				
				<div class="val" style="margin-left:0px; background:none">
					<?php
						foreach ($squarexproduct['modifierlists'] as $modifierlist) {

						echo '<input class="form txt" name="mod_id[]" placeholder="ML ID" style="width:75px" type="hidden" value="' . $modifierlist['id'] . '" />
						<input class="form txt" name="mod_itemid[]" placeholder="Item ID" style="width:75px" type="hidden" value="' . $modifierlist['item_id'] . '" />
						<input class="form txt" name="mod_itemname[]" placeholder="Item Name" style="width:270px" type="hidden" value="' . $modifierlist['item_name'] . '" />
						
						<input class="form txt" name="mod_name[]" placeholder="Name" style="width:270px" value="' . $modifierlist['modifier_list_name'] . '" />
						<input class="form txt" name="mod_sort_order[]" placeholder="Sort#" style="width:75px" value="' . $modifierlist['sort'] . '" />
						<input class="form txt" name="mod_max[]" placeholder="Sort#" style="width:75px" value="' . $modifierlist['max'] . '" />
						<input class="form txt" name="mod_type[]" placeholder="Type" style="width:125px" value="' . $modifierlist['selection_type'] . '" />

						<a href="/admin/?square_xp&edit=' . $squarexproduct['id'] . '&deleteModList=' . $modifierlist['id'] . '">delete</a><br />';
			}
			?>

					<div id="first_modifier" style="background:none; width:100%;">
						<!--<input class="form txt" name="var_id[]" placeholder="ID" style="width:75px" />-->
						<!--<input type="hidden" class="form txt" name="mod_itemname[]" placeholder="Item Name" 
						style="width:270px; background:#ddd" value="<?= $squarexproduct['name'] ?>" readonly />-->
						<input class="form txt" name="mod_name[]" placeholder="Name" style="width:270px" />
						<input class="form txt" name="mod_sort_order[]" placeholder="Sort#" style="width:75px" />
						<input class="form txt" name="mod_max[]" placeholder="Max" style="width:75px" />
						
						<select name="mod_type[]" id="" class="txt" style="background:#f0f0f0; width:125px; font-size:15px">
	           				<option value="">Select Type</option>
	           				<option value="MULTIPLE">MULTIPLE</option>
	           				<option value="SINGLE">SINGLE</option>
	           				               
	       				</select>
						<br />
					</div>

					<div class="dynamicSection"></div>

					<p class="rs description-input" style="margin-top:10px;">
						<a href='javascript:;' onclick='addModifier()' class='btn-blue btn' 
						style='margin-left:0px;'>+add another Modifier</a></p>
						<!--<?php if($squareuser['usertype'] == 'MULTIPLE') echo "selected"; ?>-->
				</div>
			</div>
			<!-- MODIFIER LISTS ENDS -->						
			<div class="clear"></div>              
			</div><!-- END OF THE ENTIRE IN-STOCK SECTION -->           
            <br />
            
            <input type="submit" style="font-weight:300" class="btn btn-black" /> 
            <input type="button" value="Cancel" class="btn btn-black" onclick="location = '/admin/items'" />
            <br /><br />
        </form>

        </div>
    </div>
</div>

<script type="application/javascript" >
    var barCheckBox = document.getElementById('bar').value;
    var clubCheckBox = document.getElementById('club').value;
    var searchBox = document.getElementById('at_locations').value;
    
    function updateAtLocations() {
        if (barCheckBox.checked) {
            searchBox.value += ' Bars';
        } else if (clubCheckBox.checked) {
            searchBox.value += ' Clubs';
        } else {
            searchBox.value = '';
        }
    }
</script>

<script>
	function addLevel()
	{
		$('.levels .dynamicSection').append($('#first_level').html());
	}
	function addModifier()
	{
		$('.modifiers .dynamicSection').append($('#first_modifier').html());
	}	
</script>

<?php

include('views/_footer.tpl.php');

?>