<?php
if (!defined('ABSPATH'))
    exit;
if (!current_user_can('manage_options')) {
    wp_die(__('You do not have sufficient permissions to access this page.'));
}
$styleid = (int) $_GET['styleid'];
global $wpdb;
$bullet_list = $wpdb->prefix . 'team_bullet_list_ultimate_list';
$bullet_name = $wpdb->prefix . 'team_bullet_list_ultimate_style';
$title = '';
$details = '';
$icon = '';
$itemid = '';
if (!empty($_POST['submit']) && $_POST['submit'] == 'submit') {
    $title = sanitize_text_field(htmlspecialchars($_POST['blu-title']));
    $details = sanitize_text_field(htmlspecialchars($_POST['blu-details']));
    $icon = sanitize_text_field(htmlspecialchars($_POST['blu-icon']));
    if ($_POST['item-id'] == '') {
        $wpdb->query($wpdb->prepare("INSERT INTO {$bullet_list} (title, files, icon, styleid) VALUES ( %s, %s, %s, %d)", array($title, $details, $icon, $styleid)));
    }
    if ((int) $_POST['item-id'] != '' && is_numeric($_POST['item-id'])) {
        $item_id = (int) $_POST['item-id'];
        $data = $wpdb->update("$bullet_list", array("title" => $title, "files" => $details, "icon" => $icon), array('id' => $item_id), array('%s', '%s', '%s'), array('%d'));
    }
}
if (!empty($_POST['edit']) && is_numeric($_POST['item-id'])) {
    $item_id = (int) $_POST['item-id'];
    $data = $wpdb->get_row($wpdb->prepare("SELECT * FROM $bullet_list WHERE id = %d ", $item_id), ARRAY_A);
    $title = sanitize_text_field(htmlspecialchars($data['title']));
    $details = sanitize_text_field(htmlspecialchars($data['files']));
    $icon = sanitize_text_field(htmlspecialchars($data['icon']));
    $itemid = $data['id'];
    echo '<script type="text/javascript"> jQuery(document).ready(function () { setTimeout(function() {
  jQuery("#blu-admin-model-item-data").modal("show");
}, 500);  });</script>';
}
if (!empty($_POST['delete']) && is_numeric($_POST['item-id'])) {
    $item_id = (int) $_POST['item-id'];
    $wpdb->query($wpdb->prepare("DELETE FROM {$bullet_list} WHERE id = %d ", $item_id));
}
if (!empty($_POST['data-submit']) && $_POST['data-submit'] == 'Save') {
    $data = ' heading-font-size |' . sanitize_text_field($_POST['heading-font-size']) . '|heading-font-color|' . sanitize_text_field($_POST['heading-font-color']) . '|heading-font-background-color |' . sanitize_text_field($_POST['heading-font-background-color']) . '| heading-background-color |' . sanitize_text_field($_POST['heading-background-color']) . '| Details-font-color |' . sanitize_text_field($_POST['Details-font-color']) . '| Details-font-size |' . sanitize_text_field($_POST['Details-font-size']) . '| heading-width |' . sanitize_text_field($_POST['heading-width']) . '|content-padding-top |' . sanitize_text_field($_POST['content-padding-top']) . '| content-padding-right |' . sanitize_text_field($_POST['content-padding-right']) . '| content-padding-bottom |' . sanitize_text_field($_POST['content-padding-bottom']) . '| content-padding-left|' . sanitize_text_field($_POST['content-padding-left']) . '| heading-Border-radius |' . sanitize_text_field($_POST['heading-Border-radius']) . '| heading-font-familly |' . sanitize_text_field($_POST['heading-font-familly']) . '|heading-bottom|' . sanitize_text_field($_POST['heading-bottom']) . '|heading-font-weight|' . sanitize_text_field($_POST['heading-font-weight']) . '|content-font-weight|' . sanitize_text_field($_POST['content-font-weight']) . '|blu-image-upload-url|' . sanitize_text_field($_POST['blu-image-upload-url']) . '| heading-max-width |' . sanitize_text_field($_POST['heading-max-width']) . '|heading-icon-background-color|' . sanitize_text_field($_POST['heading-icon-background-color']) . '|icon-color|' . sanitize_text_field($_POST['icon-color']) . '|heading-details-font-familly|' . sanitize_text_field($_POST['heading-details-font-familly']) . '|';
    $data = sanitize_text_field($data);
    $wpdb->query($wpdb->prepare("UPDATE $bullet_name SET css = %s WHERE id = %d", $data, $styleid));
}
$listdata = $wpdb->get_results($wpdb->prepare("SELECT * FROM $bullet_list WHERE styleid = %d ORDER by id ASC ", $styleid), ARRAY_A);
$styledata = $wpdb->get_row($wpdb->prepare("SELECT * FROM $bullet_name WHERE id = %d ", $styleid), ARRAY_A);
$styledata = $styledata['css'];
$styledata = explode('|', $styledata);
?>
<div class="wrap">
    <?php blu_promote_free();
    ?>
    <div class="blu-admin-wrapper">
        <div class="blu-admin-style-left">
            <div class="blu-admin-style-left-head">
                <span>Custom Settings</span>
                <div class="blu-admin-style-left-button">
                    <button type="button" class="btn btn-success btn-lg" id="blu-admin-model-item" data-toggle="modal" data-target="#blu-admin-model-item-data">Add New Item</button>
                </div>
                <div class="blu-admin-shortcode">
                    <div class="col-lg-3">
                        <div class="blu-admin-shortcode-head">
                            Shortcode for posts/pages/plugins
                        </div>
                        <div class="blu-admin-shortcode-body">
                            Copy & paste the shortcode directly into any WordPress post or page.
                        </div>
                        <div class="blu-admin-shortcode-code">
                            <input type="text" class="form-control" onclick="this.setSelectionRange(0, this.value.length)" value="[blu_ultimate_ayan id=&quot;<?php echo $styleid; ?>&quot;]">
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="blu-admin-shortcode-head">
                            Shortcode for templates/themes
                        </div>
                        <div class="blu-admin-shortcode-body">
                            Copy & paste this code into a template file to include the slideshow within your theme.
                        </div>
                        <div class="blu-admin-shortcode-code">
                            <input type="text" class="form-control" onclick="this.setSelectionRange(0, this.value.length)" value="&lt;?php echo do_shortcode(&#039;[blu_ultimate_ayan  id=&quot;<?php echo $styleid; ?>&quot;]&#039;); ?&gt;">
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="blu-admin-shortcode-head">
                            Shortcode for Visual Composer
                        </div>
                        <div class="blu-admin-shortcode-body">
                            Copy & paste this id into a visual composer into content tabs id.
                        </div>
                        <div class="blu-admin-shortcode-code">
                            <input type="text" class="form-control" onclick="this.setSelectionRange(0, this.value.length)" value="<?php echo $styleid; ?>">
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="blu-admin-shortcode-head">
                            If you have any difficulties in using the options
                        </div>
                        <div class="blu-admin-shortcode-body">
                            See our Video tutorials on youtube Video  <a href="#" target="_blank">Video Link</a>.</br>
                            See our user manual's on Oxilab Development  <a href="#" target="_blank">User Manual</a>.
                        </div>
                    </div>

                </div>
            </div>
            <div class="blu-admin-style-templete">

                <style>
                    .blu-styleid-<?php echo $styleid; ?>{
                        width: 100%;
                        height: auto;
                        float: left;
                    }
                    .blu-styleid-<?php echo $styleid; ?>-content{
                        width: 100%;
                        height: auto;
                        position: relative;
                    }
                    .blu-styleid-<?php echo $styleid; ?>-content-square{
                        width: 100%;
                        height: auto;
                        position: relative;
                        max-width: <?php echo $styledata[35]; ?>px;
                        margin: 0 auto;
                    }
                    .blu-styleid-<?php echo $styleid; ?>-content-square:after{
                        padding-bottom: 100%;
                        display: block;
                        content: "";
                    }
                    .blu-styleid-<?php echo $styleid; ?>-content-square-absulate{
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top:0;

                    }
                    .blu-styleid-<?php echo $styleid; ?>-content-image-seting{
                        width: 100%;
                        height:auto;
                        position: relative;
                    }
                    .blu-styleid-<?php echo $styleid; ?>-content-image-seting-absulate{
                        position: absolute;
                        height: auto;
                        top: -468px;
                        right: -21px;
                        display: none;

                    }
                    .blu-styleid-<?php echo $styleid; ?>-content-square-absulate-img{
                        width: 100%;
                        height: 100%;
                    }
                    .blu-styleid-<?php echo $styleid; ?>-content-absulate-col-3{
                        width: <?php echo $styledata[13]; ?>%;
                        float: left;
                        height: auto;
                        margin:2%;
                        background-color:<?php echo $styledata[5]; ?>;
                        position: relative;
                        padding: <?php echo $styledata[15]; ?>px <?php echo $styledata[17]; ?>px <?php echo $styledata[19]; ?>px <?php echo $styledata[21]; ?>px;
                    }
                    .blu-styleid-<?php echo $styleid; ?>-content-absulate{
                        width: 100%;
                        border-radius:<?php echo $styledata[23]; ?>px;
                        position: absolute;
                        bottom:<?php echo $styledata[27]; ?>px;
                        background-color:<?php echo $styledata[7]; ?> ;
                        box-shadow: 0 0 5px 0;
                    }


                    .blu-styleid-<?php echo $styleid; ?>-content-absulate-col-3-absulate{
                        position: absolute;
                        height: auto;
                        top: -22px;
                        right: -5px;
                        display: none;


                    }
                    .blu-styleid-<?php echo $styleid; ?>-content-absulate-col-3-top{
                        width: 50px;
                        line-height: 50px;
                        height: auto;
                        border-radius: 100%;
                        margin: 4% auto;
                        background-color: <?php echo $styledata[37]; ?>;
                        color:#fff;
                        text-align: center;
                        font-size: 24px;
                        position: relative;
                    }
                    .blu-styleid-<?php echo $styleid; ?>-content-absulate-col-3-top-absulate{
                        position: absolute;
                        height: auto;
                        top: -17px;
                        right: -32px;
                        display: none;

                    }
                    .blu-styleid-<?php echo $styleid; ?>-content-absulate-col-3-down{
                        width: 100%;
                        height: auto;

                    }
                    .blu-styleid-<?php echo $styleid; ?>-content-absulate-col-3-down-title{
                        width: 100%;
                        height: auto;
                        line-height: 20px;
                        font-weight: bold;
                        text-align: center;

                    }
                    .blu-styleid-<?php echo $styleid; ?>-content-absulate-col-3-down-title h2{
                        font-size: 24px;
                        color: #14d176;
                        font-weight:900;
                        text-transform: uppercase;
                        font-family: <?php echo blu_list_font_familly_charecter($styledata[25]); ?>;

                    }

                    .blu-styleid-<?php echo $styleid; ?>-content-absulate-col-3-down-details{
                        width: 100%;
                        height: auto;
                        text-align: center;
                        margin: 5% 0;
                    }
                    .blu-styleid-<?php echo $styleid; ?>-content-absulate-col-3-down-details p{
                        font-size: 18px;
                        color:  #14d176;
                        font-weight: 300;
                        line-height: 22px;
                        font-family: <?php echo blu_list_font_familly_charecter($styledata[41]); ?>;

                    }
                    .blu-styleid-<?php echo $styleid; ?>-content-absulate-col-3-down-absulate-edit{
                        margin-right: 1px; 
                        display: inline-block;
                    }
                    .blu-styleid-<?php echo $styleid; ?>-content-absulate-col-3-down-absulate-delete{
                        margin-right: 1px; 
                        display: inline-block;
                    }
                    .blu-styleid-<?php echo $styleid; ?>-content-absulate-col-3-down-absulate-seting{
                        margin-right: 1px; 
                        display: inline-block;
                    }
                    .blu-styleid-<?php echo $styleid; ?>-content-absulate-col-3:hover .blu-styleid-<?php echo $styleid; ?>-content-absulate-col-3-absulate {
                        display: block;
                    }
                    .blu-styleid-<?php echo $styleid; ?>-content-square-absulate:hover  .blu-styleid-<?php echo $styleid; ?>-content-image-seting-absulate{
                        display: block;
                    }
                    .blu-styleid-<?php echo $styleid; ?>-content-absulate-col-3:hover  .blu-styleid-<?php echo $styleid; ?>-content-absulate-col-3-top-absulate{
                        display: block;
                    }
                    @media only screen and (max-width: 600px) {
                        .blu-styleid-<?php echo $styleid; ?> {
                            display: block;
                        }
                        .blu-styleid-<?php echo $styleid; ?>-content-absulate-col-3-down{
                            display: block;
                        }
                    }

                </style>;

                <?php
                if ($styledata[33] != '') {
                    $styledataimage = $styledata[33];
                } elseif ($styledata[33] == '') {
                    $styledataimage = plugins_url('image/centered.png', __FILE__);
                }
                echo '<div class="blu-styleid-' . $styleid . '">
                    <div class="blu-styleid-' . $styleid . '-content">
                        <div class="blu-styleid-' . $styleid . '-content-square admin-image-setting">
                            <div class="blu-styleid-' . $styleid . '-content-square-absulate">
                                    <img class="blu-styleid-' . $styleid . '-content-square-absulate-img" src="' . $styledataimage . '"/>
                                        <div class="blu-styleid-' . $styleid . '-content-image-seting">
                                             <div class="blu-styleid-' . $styleid . '-content-image-seting-absulate">
                                                 <div class="blu-image-seeting">
                                            <input type="hidden" name="item-id" value="' . $value['id'] . '">
                                                <button class="btn btn-primary btn-xs" type="submit" value="setting"  name="setting"><i class="fa fa-cog" aria-hidden="true"></i></button>
                                                 </div>
                                              </div>
                                        </div>
                                </div>
                      
                        </div>
                        <div class="blu-styleid-' . $styleid . '-content-absulate admin-model-setting">';
                foreach ($listdata as $value) {
                    echo '<div class="blu-styleid-' . $value['styleid'] . '-content-absulate-col-3 admin-setting">
                                <div class="blu-styleid-' . $value['styleid'] . '-content-absulate-col-3-top admin-setting-icon">
                                     <i class="fa ' . $value['icon'] . '" aria-hidden="true"></i>
                                         <div class="blu-styleid-' . $value['styleid'] . '-content-absulate-col-3-top-absulate">
                                             <div class="blu-styleid-' . $value['styleid'] . '-content-absulate-col-3-down-absulate-seting">
                                       <div class="blu-icon-seeting">
                                            <input type="hidden" name="item-id" value="' . $value['id'] . '">
                                            <button class="btn btn-primary btn-xs" type="submit" value="setting"  name="setting"><i class="fa fa-cog" aria-hidden="true"></i></button>
                                        </div>
                                    </div>
                                         </div>
                                 </div>
                                <div class="blu-styleid-' . $value['styleid'] . '-content-absulate-col-3-down">

                                    <div class="blu-styleid-' . $value['styleid'] . '-content-absulate-col-3-down-title heding-font-size">
                                       <h2>' . $value['title'] . '</h2>
                                    </div>
                                    <div class="blu-styleid-' . $value['styleid'] . '-content-absulate-col-3-down-details admin-details-setting">
                                        <p> ' . $value['files'] . '</p>
                                    </div>                                 
                                </div>
                                <div class="blu-styleid-' . $value['styleid'] . '-content-absulate-col-3-absulate">
                                    <div class="blu-styleid-' . $value['styleid'] . '-content-absulate-col-3-down-absulate-seting">
                                       <div class="blu-admin-seeting">
                                            <input type="hidden" name="item-id" value="' . $value['id'] . '">
                                            <button class="btn btn-primary btn-xs" type="submit" value="setting"  name="setting"><i class="fa fa-cog" aria-hidden="true"></i></button>
                                        </div>
                                    </div>
                                    <div class="blu-styleid-' . $value['styleid'] . '-content-absulate-col-3-down-absulate-edit">
                                        <form method="post">
                                            <input type="hidden" name="item-id" value="' . $value['id'] . '">
                                            <button class="btn btn-primary btn-xs" type="submit" value="edit" name="edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button>
                                        </form>
                                    </div>
                                    <div class="blu-styleid-' . $value['styleid'] . '-content-absulate-col-3-down-absulate-delete">
                                        <form method="post">
                                            <input type="hidden" name="item-id" value="' . $value['id'] . '">
                                            <button class="btn btn-danger btn-xs" type="submit" value="delete" name="delete"><i class="fa fa-trash" aria-hidden="true"></i></button>  
                                        </form>
                                    </div>
                                </div>
                            </div>';
                }

                echo '</div>
        </div>
    </div>';
                ?>

            </div>
        </div>
    </div>
    <form method="post">
        <div class="modal fade blu-draggable" id="blu-edit-heading" data-backdrop="false" >
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Edit Icon</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group row form-group-sm">
                            <label for="heading-font-size" class="col-sm-6 col-form-label" title="ami Data Paici">Title Font Size </label>
                            <div class="col-sm-6 nopadding">
                                <input class="form-control" type="number" value="<?php echo $styledata[1]; ?>" id="heading-font-size" name="heading-font-size">
                            </div>
                        </div>
                        <div class="form-group row form-group-sm">
                            <label for="heading-font-color" class="col-sm-6 control-label">Title Color <a  data-toggle="tooltip" class="tooltipLink" data-original-title="Tooltip text goes here"><span class="glyphicon glyphicon-info-sign"></span></a></label>
                            <div class="col-sm-6 nopadding">
                                <input type="text" class="form-control blu-vendor-color" id="heading-font-color" name="heading-font-color" value="<?php echo $styledata[3]; ?>">
                            </div>
                        </div>
                        <div class="form-group row form-group-sm">
                            <label for="heading-background-color" class="col-sm-6 control-label">Font Background  <a  data-toggle="tooltip" class="tooltipLink" data-original-title="Tooltip text goes here"><span class="glyphicon glyphicon-info-sign"></span></a></label>
                            <div class="col-sm-6 nopadding">
                                <input type="text" class="form-control blu-vendor-color" id="heading-background-color" name="heading-font-background-color" value="<?php echo $styledata[5]; ?>">
                            </div>
                        </div>
                        <div class="form-group row form-group-sm">
                            <label for="heading-background-color" class="col-sm-6 control-label">Background  <a  data-toggle="tooltip" class="tooltipLink" data-original-title="Tooltip text goes here"><span class="glyphicon glyphicon-info-sign"></span></a></label>
                            <div class="col-sm-6 nopadding">
                                <input type="text" class="form-control blu-vendor-color" id="heading-background-color-font" name="heading-background-color" value="<?php echo $styledata[7]; ?>">
                            </div>
                        </div>
                        <div class="form-group row form-group-sm">
                            <label for="content-font-color" class="col-sm-6 control-label">Details Color <a  data-toggle="tooltip" class="tooltipLink" data-original-title="Tooltip text goes here"><span class="glyphicon glyphicon-info-sign"></span></a></label>
                            <div class="col-sm-6 nopadding">
                                <input type="text" class="form-control blu-vendor-color" id="Details-font-color" name="Details-font-color" value="<?php echo $styledata[9]; ?>">
                            </div>
                        </div>
                        <div class="form-group row form-group-sm">
                            <label for="content-font-size" class="col-sm-6 col-form-label" title="ami Data Paici">Details Font Size </label>
                            <div class="col-sm-6 nopadding">
                                <input class="form-control" type="number" value="<?php echo $styledata[11]; ?>" id="Details-font-size" name="Details-font-size">
                            </div>
                        </div>
                        <div class="form-group row form-group-sm">
                            <label for="heading-width" class="col-sm-6 col-form-label" title="ami Data Paici">Width <a  title="Font Size On PIxcel"><span class="glyphicon glyphicon-info-sign"></span></a></label>
                            <div class="col-sm-6 nopadding">
                                <input class="form-control" type="number" value="<?php echo $styledata[13]; ?>" id="heading-width" name="heading-width">
                            </div>
                        </div>
                        <div class="form-group row form-group-sm">
                            <label for="content-padding-top" class="col-sm-4 col-form-label" title="ami Data Paici">Padding <a  title="Font Size On PIxcel"><span class="glyphicon glyphicon-info-sign"></span></a></label>
                            <div class="col-sm-2 nopadding2">
                                <input class="form-control" type="number" value="<?php echo $styledata[15]; ?>" id="heading-padding-top" name="content-padding-top">
                            </div>
                            <div class="col-sm-2 nopadding2">
                                <input class="form-control" type="number" value="<?php echo $styledata[17]; ?>" id="heading-padding-right" name="content-padding-right">
                            </div>
                            <div class="col-sm-2 nopadding2">
                                <input class="form-control" type="number" value="<?php echo $styledata[19]; ?>" id="heading-padding-bottom" name="content-padding-bottom">
                            </div>
                            <div class="col-sm-2 nopadding2">
                                <input class="form-control" type="number" value="<?php echo $styledata[21]; ?>" id="heading-padding-left" name="content-padding-left">
                            </div>
                        </div>
                        <div class="form-group row form-group-sm">
                            <label for="heading-Border-radius" class="col-sm-6 col-form-label" title="ami Data Paici">Border Radius <a  title="Font Size On PIxcel"><span class="glyphicon glyphicon-info-sign"></span></a></label>
                            <div class="col-sm-6 nopadding">
                                <input class="form-control" type="number" value="<?php echo $styledata[23]; ?>" id="heading-Border-radius" name="heading-Border-radius">
                            </div>
                        </div>
                        <div class="form-group row form-group-sm">
                            <label for="heading-font-familly" class="col-sm-6 col-form-label" data-toggle="tooltip" data-placement="top" title="Choose Your Title Preferred font, Based on Google Font">Title Font Family </label>
                            <div class="col-sm-6 nopadding">
                                <input class="form-control" type="text" name="heading-font-familly" id="heading-font-familly" value="<?php echo $styledata[25]; ?>">
                            </div>
                        </div>
                        <div class="form-group row form-group-sm">
                            <label for="heading-font-familly" class="col-sm-6 col-form-label" data-toggle="tooltip" data-placement="top" title="Choose Your Title Preferred font, Based on Google Font">Details Font Family </label>
                            <div class="col-sm-6 nopadding">
                                <input class="form-control" type="text" name="heading-details-font-familly" id="heading-details-font-familly" value="<?php echo $styledata[41]; ?>">
                            </div>
                        </div>
                        <div class="form-group row form-group-sm">
                            <label for="heading-bottom" class="col-sm-6 col-form-label" title="ami Data Paici">Bottom <a  title="bottom Size On PIxcel"><span class="glyphicon glyphicon-info-sign"></span></a></label>
                            <div class="col-sm-6 nopadding">
                                <input class="form-control" type="number" value="<?php echo $styledata[27]; ?>" id="heading-bottom" name="heading-bottom">
                            </div>
                        </div>
                        <div class="form-group row form-group-sm">
                            <label for="heading-font-weight" class="col-sm-6 col-form-label" data-toggle="tooltip" data-placement="top" title="Customize Your Title Font Weight, Based on CSS Weight" >Tittle Font Weight </label>
                            <div class="col-sm-6 nopadding">
                                <select class="form-control" id="heading-font-weight" name="heading-font-weight">
                                    <option value="100" <?php
                                    if ($styledata[29] == '100') {
                                        echo 'selected';
                                    }
                                    ?>>100</option>
                                    <option value="200" <?php
                                    if ($styledata[29] == '200') {
                                        echo 'selected';
                                    }
                                    ?>>200</option>
                                    <option value="300" <?php
                                    if ($styledata[29] == '300') {
                                        echo 'selected';
                                    }
                                    ?>>300</option>
                                    <option value="400" <?php
                                    if ($styledata[29] == '400') {
                                        echo 'selected';
                                    }
                                    ?>>400</option>
                                    <option value="500" <?php
                                    if ($styledata[29] == '500') {
                                        echo 'selected';
                                    }
                                    ?>>500</option>
                                    <option value="600" <?php
                                    if ($styledata[29] == '600') {
                                        echo 'selected';
                                    }
                                    ?>>600</option>
                                    <option value="700" <?php
                                    if ($styledata[29] == '700') {
                                        echo 'selected';
                                    }
                                    ?>>700</option>
                                    <option value="800" <?php
                                    if ($styledata[29] == '800') {
                                        echo 'selected';
                                    }
                                    ?>>800</option>
                                    <option value="900" <?php
                                    if ($styledata[29] == '900') {
                                        echo 'selected';
                                    }
                                    ?>>900</option>
                                    <option value="normal" <?php
                                    if ($styledata[29] == 'normal') {
                                        echo 'selected';
                                    }
                                    ?>>Normal</option>
                                    <option value="bold" <?php
                                    if ($styledata[29] == 'bold') {
                                        echo 'selected';
                                    }
                                    ?>>Bold</option>
                                    <option value="lighter" <?php
                                    if ($styledata[29] == 'lighter') {
                                        echo 'selected';
                                    }
                                    ?>>Lighter</option>
                                    <option value="initial" <?php
                                    if ($styledata[29] == 'initial') {
                                        echo 'selected';
                                    }
                                    ?>>Initial</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row form-group-sm">
                            <label for="content-font-weight" class="col-sm-6 col-form-label" data-toggle="tooltip" data-placement="top" title="Use border Radius to Generate Round Content as Top, Bottom. Based on Pixel ">Details Font Weight </label>
                            <div class="col-sm-6 nopadding">
                                <select class="form-control" id="content-font-weight" name="content-font-weight">
                                    <option value="100" <?php
                                    if ($styledata[31] == '100') {
                                        echo 'selected';
                                    }
                                    ?>>100</option>
                                    <option value="200" <?php
                                    if ($styledata[31] == '200') {
                                        echo 'selected';
                                    }
                                    ?>>200</option>
                                    <option value="300" <?php
                                    if ($styledata[31] == '300') {
                                        echo 'selected';
                                    }
                                    ?>>300</option>
                                    <option value="400" <?php
                                    if ($styledata[31] == '400') {
                                        echo 'selected';
                                    }
                                    ?>>400</option>
                                    <option value="500" <?php
                                    if ($styledata[31] == '500') {
                                        echo 'selected';
                                    }
                                    ?>>500</option>
                                    <option value="600" <?php
                                    if ($styledata[31] == '600') {
                                        echo 'selected';
                                    }
                                    ?>>600</option>
                                    <option value="700" <?php
                                    if ($styledata[31] == '700') {
                                        echo 'selected';
                                    }
                                    ?>>700</option>
                                    <option value="800" <?php
                                    if ($styledata[31] == '800') {
                                        echo 'selected';
                                    }
                                    ?>>800</option>
                                    <option value="900" <?php
                                    if ($styledata[31] == '900') {
                                        echo 'selected';
                                    }
                                    ?>>900</option>
                                    <option value="normal" <?php
                                    if ($styledata[31] == 'normal') {
                                        echo 'selected';
                                    }
                                    ?>>Normal</option>
                                    <option value="bold" <?php
                                    if ($styledata[31] == 'bold') {
                                        echo 'selected';
                                    }
                                    ?>>Bold</option>
                                    <option value="lighter" <?php
                                    if ($styledata[31] == 'lighter') {
                                        echo 'selected';
                                    }
                                    ?>>Lighter</option>
                                    <option value="initial" <?php
                                    if ($styledata[31] == 'initial') {
                                        echo 'selected';
                                    }
                                    ?>>Initial</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <input type="submit" class="btn btn-primary" name="data-submit" value="Save">
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade blu-draggable" id="blu-edit-image" data-backdrop="false" >
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Edit Icon</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group row form-group-sm">
                            <label for="heading- Profile-Picture" class="col-sm-6 col-form-label" data-toggle="tooltip" data-placement="top" title="Choose Your  Profile Picture"> Profile Picture </label>
                            <div class="col-sm-6 nopadding">
                                <input type="text" class="form-control" placeholder="Paste Url" id="blu-image-upload-url" name="blu-image-upload-url" value="<?php echo $styledataimage ?>">
                            </div>
                            <div class="col-xs-1">
                                <button type="button" class="btn btn-primary" id="blu-image-upload-button">Upload Image</button>
                            </div>
                        </div>
                        <div class="form-group row form-group-sm">
                            <label for="heading-max-width" class="col-sm-6 col-form-label" title="put max width">Max-Width <a  title="Font Size On PIxcel"><span class="glyphicon glyphicon-info-sign"></span></a></label>
                            <div class="col-sm-6 nopadding">
                                <input class="form-control" type="number" value="<?php echo $styledata[35]; ?>" id="heading-max-width" name="heading-max-width">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <input type="submit" class="btn btn-primary" name="data-submit" value="Save">
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade blu-draggable" id="blu-edit-icon" data-backdrop="false" >
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Edit Icon</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group row form-group-sm">
                            <label for="heading-background-color" class="col-sm-6 control-label">icon Background  <a  data-toggle="tooltip" class="tooltipLink" data-original-title="Tooltip text goes here"><span class="glyphicon glyphicon-info-sign"></span></a></label>
                            <div class="col-sm-6 nopadding">
                                <input type="text" class="form-control blu-vendor-color" id="heading-icon-background-color" name="heading-icon-background-color" value="<?php echo $styledata[37]; ?>">
                            </div>
                        </div>
                        <div class="form-group row form-group-sm">
                            <label for="content-icon-color" class="col-sm-6 control-label">icon Color <a  data-toggle="tooltip" class="tooltipLink" data-original-title="Tooltip text goes here"><span class="glyphicon glyphicon-info-sign"></span></a></label>
                            <div class="col-sm-6 nopadding">
                                <input type="text" class="form-control blu-vendor-color" id="icon-color" name="icon-color" value="<?php echo $styledata[39]; ?>">
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <input type="submit" class="btn btn-primary" name="data-submit" value="Save">
                    </div>
                </div>
            </div>
        </div>

    </form>
     <script type="text/javascript">
        jQuery(".blu-admin-seeting").click(function () {
            alert("Please at first upgrade your style if you not get pro version then css not save.");
        });
        jQuery(".blu-image-seeting").click(function () {
            alert("Please at first upgrade your style if you not get pro version then css not save.");
        });
        jQuery(".blu-icon-seeting").click(function () {
            alert("Please at first upgrade your style if you not get pro version then css not save.");
        });
    </script>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery(".blu-admin-seeting").click(function () {
                jQuery("#blu-edit-heading").modal("show");
            });
            jQuery(".blu-image-seeting").click(function () {
                jQuery("#blu-edit-image").modal("show");
            });
            jQuery(".blu-icon-seeting").click(function () {
                jQuery("#blu-edit-icon").modal("show");
            });
            jQuery("#heading-font-size").on("change", function () {
                var idvalue = jQuery('#heading-font-size').val() + 'px';
                jQuery(".heding-font-size h2").css("font-size", idvalue);

            });
            jQuery("#heading-font-color").on("change", function () {
                var idvalue = jQuery('#heading-font-color').val();
                jQuery(".heding-font-size h2").not('.active').css("color", idvalue);
            });
            jQuery("#heading-background-color").on("change", function () {
                var idvalue = jQuery('#heading-background-color').val();
                jQuery(".admin-setting").not('.active').css("background-color", idvalue);
            });
            jQuery("#heading-background-color-font").on("change", function () {
                var idvalue = jQuery('#heading-background-color-font').val();
                jQuery(".admin-model-setting").not('.active').css("background-color", idvalue);
            });
            jQuery("#Details-font-color").on("change", function () {
                var idvalue = jQuery('#Details-font-color').val();
                jQuery(".admin-details-setting p").css("color", idvalue);
            });
            jQuery("#Details-font-size").on("change", function () {
                var idvalue = jQuery('#Details-font-size').val() + 'px';
                jQuery(".admin-details-setting p").css("font-size", idvalue);
            });
            jQuery("#heading-width").on("change", function () {
                var idvalue = jQuery('#heading-width').val() + '%';
                jQuery(".admin-setting").css("width", idvalue);
            });
            jQuery("#heading-padding-top").on("change", function () {
                var idvalue = jQuery('#heading-padding-top').val() + 'px';
                jQuery(".admin-setting").css("padding-top", idvalue);
            });
            jQuery("#heading-padding-right").on("change", function () {
                var idvalue = jQuery('#heading-padding-right').val() + 'px';
                jQuery(".admin-setting").css("padding-right", idvalue);
            });
            jQuery("#heading-padding-bottom").on("change", function () {
                var idvalue = jQuery('#heading-padding-bottom').val() + 'px';
                jQuery(".admin-setting").css("padding-bottom", idvalue);
            });
            jQuery("#heading-padding-left").on("change", function () {
                var idvalue = jQuery('#heading-padding-left').val() + 'px';
                jQuery(".admin-setting").css("padding-left", idvalue);
            });
            jQuery("#heading-Border-radius").on("change", function () {
                var idvalue = jQuery('#heading-Border-radius').val() + 'px';
                jQuery(".admin-model-setting").css("border-radius", idvalue);
            });
            jQuery('#heading-font-familly').fontselect().change(function () {
                var font = jQuery(this).val().replace(/\+/g, ' ');
                font = font.split(':');
                jQuery("<style type='text/css'> .heding-font-size h2{ font-family:" + font[0] + ";} </style>").appendTo(".heding-font-size");
            });
            jQuery('#heading-details-font-familly').fontselect().change(function () {
                var font = jQuery(this).val().replace(/\+/g, ' ');
                font = font.split(':');
                jQuery("<style type='text/css'> .admin-details-setting p{ font-family:" + font[0] + ";} </style>").appendTo(".admin-details-setting");
            });
            jQuery("#heading-bottom").on("change", function () {
                var idvalue = jQuery('#heading-bottom').val() + 'px';
                jQuery(".admin-model-setting").css("bottom", idvalue);
            });
            jQuery("#heading-font-weight").on("change", function () {
                var idvalue = jQuery('#heading-font-weight').val();
                jQuery("<style type='text/css'> .heding-font-size h2{ font-weight:" + idvalue + ";} </style>").appendTo(".heding-font-size h2");
            });
            jQuery("#content-font-weight").on("change", function () {
                var idvalue = jQuery('#content-font-weight').val();
                jQuery("<style type='text/css'> .admin-details-setting p{ font-weight:" + idvalue + ";} </style>").appendTo(".admin-details-setting p");
            });
            jQuery("#heading-max-width").on("change", function () {
                var idvalue = jQuery('#heading-max-width').val() + '%';
                jQuery(".admin-image-setting").css("max-width", idvalue);
            });
            jQuery("#heading-icon-background-color").on("change", function () {
                var idvalue = jQuery('#heading-icon-background-color').val();
                jQuery(".admin-setting-icon").not('.active').css("background-color", idvalue);
            });
            jQuery("#icon-color").on("change", function () {
                var idvalue = jQuery('#icon-color').val();
                jQuery(".admin-setting-icon").css("color", idvalue);
            });

        });
    </script>
    <div id="blu-admin-model-item-data" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <form method="POST">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Items Add or Edit</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="ctu-title">Title</label>
                            <input type="text "class="form-control" id="blu-title" name="blu-title" value="<?php echo $title ?>">
                        </div>
                        <div class="form-group">
                            <label for="ctu-details">Details:</label>
                            <textarea class="form-control" rows="4" id="blu-details" name="blu-details"><?php echo $details ?></textarea>
                        </div>
                        <div class="form-group">
                            <label for="blu-icon">icon</label>
                            <input type="text "class="form-control" id="blu-icon" name="blu-icon" value="<?php echo $icon ?>">
                            <small class="form-text text-muted">Add or Modify Your Tabs Icon.</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" id="item-id" name="item-id" value="<?php echo $itemid ?>">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <input type="submit" class="btn btn-primary" id="item-submit" name="submit" value="submit">
                    </div>
                </div>
            </form>

        </div>
    </div>

</div>
