<?php

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

?>
<style type="text/css">
.form-profile {
    padding-top: 10px;
	padding-bottom:20px;
	padding-left:2%;
	padding-right:2%;
    width: 96%;
	background:#fff;
	border:0px solid #ddd;
	margin-bottom:25px;
}
.form .row-item {
    padding-bottom: 15px;
}
input.datepicker {
	width:auto;
}
#footer { padding-top:0; }
.main-footer { display:none; }
h1 { font-family: 'Open Sans',Montserrat-Light,sans-serif; font-weight:300; text-shadow:0px 1px 0px rgba(255,255,255,.3);
margin: 7px 0px; }

/******************************************************************************/ 
@media screen and (max-device-width:  480px), screen and (max-width:  480px) {
	.form-profile {
		padding-top: 0px;
	}	
}
</style>

 <div class="" style="background:#ddd; border:none;">
        <div class="container_12 clearfix">

		<h1><?php

		if ($row) {
			$type = "edit=" . $row['id'];
			echo "Edit";
		} else {
			$type = "add";
			echo "Add";
		}

		?> THIN<strong>APP</strong> Slide</h1>

		<form method="post" class="form form-profile">
            <div class="row-item clearfix images">
                <label class="lbl" for="txt_name1">Images:</label>

                <div class="val">
                    <div>
                        <div class="fileUpload" rel="/admin/?featured_accounts&upload">
                            <span>Upload</span>
                            <input type="file" class="upload" data-type="image" />
                        </div>
                        <span class="maxsize">(max size: 10MB)</span>
                        <div style="clear:both"></div>
                    </div>

                <?php if ($row) : ?>
                    <span>Desktop Image: </span><br />
					<img src='/<?= $row['image'] ?>' style='margin:5px 0; margin-right:8px; width:300px' /><a href='?featured_accounts&edit=<?= $row['id'] ?>&deleteFile=image'>delete</a><br />

                    <?php if ($row['image_mobile']) : ?>
                    <span>Mobile Image: </span><br />
					<img src='/<?= $row['image_mobile'] ?>' style='margin:5px 0; margin-right:8px; width:300px' /><a href='?featured_accounts&edit=<?= $row['id'] ?>&deleteFile=image_mobile'>delete</a>
                    <?php endif; ?>
                <?php endif; ?>
                </div>
            </div>

            <div class="row-item clearfix levels" style="padding-bottom:0px;">
                <div class="val">
                    <div class="dynamicSection"></div>
                </div>
            </div>

            <div class="row-item clearfix">
                <label class="lbl" for="txt_location">Slider Group:</label>
                <div class="val">
                    <?php
                    $sel_appintro = $row['slider_group'] && $row['slider_group'] == "App Intro" ? " selected='selected'" : "";
                    $sel_featured = $row['slider_group'] && $row['slider_group'] == "Featured" ? " selected='selected'" : "";
                    ?>
                    <select class="txt" name="slider_group">
                        <option<?= $sel_appintro ?> value="App Intro">App Intro</option>
                        <option<?= $sel_featured ?> value="Featured">Featured</option>
                    </select>
                    <p class="rs description-input">Select which Slider this Slide
                        should be added to.</p>
                </div>
            </div>
            <div class="row-item clearfix">
                <label class="lbl" for="txt_location">Slider Title:</label>
                <div class="val">
                    <input class="txt" type="text" name="title"
                        value="<?= $row['title']; ?>" placeholder="Enter a Title">
                    <p class="rs description-input">Add a Title to the Slider</p>
					<br />
					<script src="/static/js/jscolor.js"></script>
					Title Color: <input class="jscolor txt" type="text" value="<?= $row['titlecolor']; ?>" name="titlecolor"
					placeholder="Pick a color" style="width:75px;">
                </div>
            </div>
			
            <div class="row-item clearfix">
                <label class="lbl" for="txt_location">Slider Richtext:</label>
                <div class="val">
                    <textarea class="ckeditor" name="content" style="min-height:250px;"><?= $row['content'] ?></textarea>
                    <p class="rs description-input">Add content to the Slider &nbsp;<a href="#" title="If you have a lot of content, we recommend using a tablet or desktop for a better textarea experience"><img src="/static/images/info-icon.png" alt="i" /></a></p>
                </div>
            </div>

            <div class="row-item clearfix">
                <label class="lbl" for="txt_location">Slider Embed HTML:</label>
                <div class="val">
                    <textarea class="txt full-width" style="width:100%;" name="embed_html"><?= $row['embed_html'] ?></textarea>
                    <p class="rs description-input">Add HTML, embed/paste forms, iframes, Video embeds, etc.</p>
                </div>
            </div>
            <div class="row-item clearfix">
                <label class="lbl" for="txt_location">Video Embed HTML:</label>
                <div class="val">
                    <textarea class="txt full-width" style="width:100%;" name="video"><?= $row['video'] ?></textarea>
                    <p class="rs description-input">Video embeds, etc.</p>
                </div>
            </div>			
            <div class="row-item clearfix">
                <label class="lbl" for="txt_location">Notes (Hidden):</label>
                <div class="val">
                    <textarea class="txt full-width" style="width:100%;" name="notes"><?= $row['notes'] ?></textarea>
                    <p class="rs description-input">Only you can see this. Tip: Save HTML elements you create/style here.</p>
                </div>
            </div>			
            <div class="row-item clearfix">
                <label class="lbl" for="txt_location">Sort Order:</label>
                <div class="val">
                    <input class="txt" type="text" name="ord"
                        value="<?= $row['ord']; ?>" placeholder="Enter Sort Order">
                    <p class="rs description-input">Use this to sort the Slides</p>
                </div>
            </div>		
            <div class="row-item clearfix">
                <label class="lbl" for="txt_location">Action Button Title:</label>
                <div class="val">
                    <input class="txt" type="text" name="btntitle"
                        value="<?= $row['btntitle']; ?>" placeholder="Enter a Title">
                    <p class="rs description-input">Text on the button</p>
                </div>
            </div>
            <div class="row-item clearfix">
                <label class="lbl" for="txt_location">Action Button URL:</label>
                <div class="val">
                    <input class="txt" type="text" name="btnurl"
                        value="<?= $row['btnurl']; ?>" placeholder="Enter a URL">
                    <p class="rs description-input">http://yourlink.com</p>
                </div>
            </div>			
            <div class="row-item clearfix">
                <label class="lbl" for="txt_location">Additional Options:</label>
                <div class="val">
                    <?php
                    $check_1 = $row['enable_feature_1'] ? " checked" : "";
                    $check_2 = $row['enable_feature_2'] ? " checked" : "";
                    $check_3 = $row['enable_feature_3'] ? " checked" : "";
					$check_4 = $row['enable_feature_4'] ? " checked" : "";
					$check_5 = $row['enable_feature_5'] ? " checked" : "";

                    if (!empty($row['countdown_until'])) {
                        // need to reformat the date
                        list ($y, $m, $dt) = explode("-", $row['countdown_until']);
                        list ($d, $t)      = explode(" ", $dt);
                        list ($h, $i)      = explode(":", $t);

                        $row['countdown_until'] = "{$m}/{$d}/{$y} {$h}:{$i}";
                    }
                    ?>
                    <label><input<?= $check_1 ?> type="checkbox"
                            name="enable_feature_1" />&nbsp; Enable Countdown</label>
                    <input type="text" name="countdown_until"
                           class="datepicker"
                           value="<?= $row['countdown_until']; ?>"
                           placeholder="<?= date('m/d/Y H:i') ?>" />
                    <br />
                    <label><input<?= $check_2 ?> type="checkbox" name="enable_feature_2" />&nbsp; Enable Full Screen Video (Desktop only*)</label><br />
                    <label><input<?= $check_3 ?> type="checkbox" name="enable_feature_3" />&nbsp; Remove Overlay Texture</label><br />
					<label><input<?= $check_4 ?> type="checkbox" name="enable_feature_4" />&nbsp; Enable Action Button (re: above)</label><br />
					<label><input<?= $check_5 ?> type="checkbox" name="enable_feature_5" />&nbsp; Enable Register/Login Buttons</label><br />
					<br />
					Add a Dark Overlay<br /><br />
					<input type="text" class="txt" id="rangeValue" size="1" style="width:45px;" value="<?= $row['overlay']; ?>"> 
					<label><input id="slider1" type="range" min="1" max="100" step="1" value="<?= $row['overlay']; ?>" 
					onchange="printValue('slider1','rangeValue')" name="overlay" />&nbsp; Light <i class="fa fa-arrow-right"></i> Dark</label>
                </div>
            </div>
            <input class="btn btn-blue" type="submit" /> <input class="btn btn-black" type="button" value="Cancel" onclick="location = '/admin/'" />
			<br /><br />
			<span style="color:#ccc;">*<a href="/contact">Contact us</a> to learn more about full-screen mobile, etc.</span>
		</form>
	</div>
</div>

<script type="text/javascript">
images = 1;
function addImage() {
    images++;
    $('.images .dynamicSection').append("<input type='file' name='image_" + images + "' /><br />");
}

$(document).ready(function()
{
    $(".datepicker").datetimepicker({
        format: 'm/d/Y H:i',
        formatDate: 'm/d/Y',
        formatTime: 'H:i',
        datepicker: true,
        timepicker: true,
        timepickerScrollbar: false,
        step: 30
    });
});

// Range Slider 
    function printValue(sliderID, textbox) {
        var x = document.getElementById(textbox);
        var y = document.getElementById(sliderID);
        x.value = y.value;
    }

    window.onload = function() { printValue('slider1', 'rangeValue'); }
		
</script>

<?php

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

?>

<link rel="stylesheet" href="/static/css/jquery.datetimepicker.css"/>
<script src='/static/js/jquery.datetimepicker.js'></script>
<script src="/3rdparty/ckeditoradv/ckeditor.js"></script>