<?php
session_start();

if($_SESSION['loginuser']!='admin'){
	header("location:index.php");
}
include_once"config.php";

$query = mysqli_query($con,"select *  from custome_page  where id = 5");
$d = mysqli_fetch_array($query);

$chart_title = isset($d['chart_title'])?$d['chart_title']:null;
$Area_title = isset($d['Area_title'])?$d['Area_title']:null;
$Special_title = isset($d['Special_title'])?$d['Special_title']:null;
$natianilty_title = isset($d['natianilty_title'])?$d['natianilty_title']:null;
$category_nat_title = isset($d['category_nat_title'])?$d['category_nat_title']:null;
$margint = isset($d['marginst'])?$d['marginst']:null;
$marginb = isset($d['marginb'])?$d['marginb']:null;
$Theme_color = isset($d['Theme_color'])?$d['Theme_color']:'#17A2B8';
$Sequence_theme = isset($d['Sequence_theme'])?$d['Sequence_theme']:null;
$text_color = isset($d['text_color'])?$d['text_color']:'#ffffff';
$l = explode(',',$Sequence_theme);
$try = isset($_SESSION['try'])?$_SESSION['try']:null;

?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Twitter -->
    <meta name="twitter:site" content="@themepixels">
    <meta name="twitter:creator" content="@themepixels">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Starlight">
    <meta name="twitter:description" content="Premium Quality and Responsive UI for Dashboard.">
    <meta name="twitter:image" content="http://themepixels.me/starlight/img/starlight-social.png">

    <!-- Facebook -->
    <meta property="og:url" content="http://themepixels.me/starlight">
    <meta property="og:title" content="Starlight">
    <meta property="og:description" content="Premium Quality and Responsive UI for Dashboard.">

    <meta property="og:image" content="http://themepixels.me/starlight/img/starlight-social.png">
    <meta property="og:image:secure_url" content="http://themepixels.me/starlight/img/starlight-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="600">

    <!-- Meta -->
    <meta name="description" content="Premium Quality and Responsive UI for Dashboard.">
    <meta name="author" content="ThemePixels">

  <title> :: SMS DataTable ::</title>

    <!-- vendor css -->
    <link href="lib/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="lib/Ionicons/css/ionicons.css" rel="stylesheet">
    <link href="lib/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet">
    <link href="lib/highlightjs/github.css" rel="stylesheet">
    <link href="lib/select2/css/select2.min.css" rel="stylesheet">

    <link href="lib/datatables/jquery.dataTables.css" rel="stylesheet">
    <!-- Starlight CSS -->
    <link rel="stylesheet" href="css/starlight.css">
	
	 <link href="lib/spectrum/spectrum.css" rel="stylesheet">
	
  </head>

  <body>

    <!-- ########## START: LEFT PANEL ########## -->
    <?php include_once"menu.php"; ?>
    <!-- ########## END: LEFT PANEL ########## -->

    <!-- ########## START: HEAD PANEL ########## -->
    <?php include_once"header.php"; ?>
    <!-- ########## END: HEAD PANEL ########## -->

    <!-- ########## START: RIGHT PANEL ########## -->
    
    <!-- ########## END: RIGHT PANEL ########## --->

    <!-- ########## START: MAIN PANEL ########## -->
    <div class="sl-mainpanel">
      <nav class="breadcrumb sl-breadcrumb">
        <a class="breadcrumb-item" href="index.html">SMS DATABASE </a>
       
        <span class="breadcrumb-item active">Theme Design</span>
      </nav>

      <div class="sl-pagebody" id="add-area">
        <div class="sl-page-title">
          <h5>Theme Design</h5>
         
		 </div><!-- sl-page-title -->
<?php if($try == 1){success_insert();}elseif($try == 2){update();}elseif($try == 3){ deleted();}elseif($try == 4){ tryagain();} unset($_SESSION['try']); ?>
        <div class="card pd-20 pd-sm-40">
          <h6 class="card-body-title">Theme Design</h6>
		  <p class="mg-b-20 mg-sm-b-30"></p>
          <!--<p class="mg-b-20 mg-sm-b-30">A form with a label on top of each form control.</p>-->
		  
		
			
			
<form method="post" action="query/design.php" data-parsley-validate >


  <div class="card pd-20 pd-sm-10 form-layout form-layout-4">
            
              <div class="row">
                <label class="col-sm-4 form-control-label">Theme Color: <span class="tx-danger">*</span></label>
                <div class="col-sm-8 mg-t-10 mg-sm-t-0">
                    <input type="text" id="colorpicker" name="Theme_color" required class="form-control" value="<?= $Theme_color; ?>">
                </div>
              </div><!-- row -->
              <div class="row mg-t-20 ">
                <label class="col-sm-4 form-control-label ">Font Color: <span class="tx-danger">*</span></label>
                <div class="col-sm-8 mg-t-10 mg-sm-t-0 fontcolorpicker">
                  <input type="text"  class="form-control " name="text_color" id="fontcolorpicker" value="<?= $text_color; ?>" required>
                </div>
              </div>
              <div class="row mg-t-20">
                <label class="col-sm-4 form-control-label">Top Heading: <span class="tx-danger">*</span></label>
                <div class="col-sm-8 mg-t-10 mg-sm-t-0">
                 <input class="form-control col-6" type="text"  name="chart_title" value="<?= $chart_title;?>" placeholder="Enter Percent Of Area" required>
                </div>
              </div>
              <div class="row mg-t-20">
                <label class="col-sm-4 form-control-label">Area Heading: <span class="tx-danger">*</span></label>
                <div class="col-sm-8 mg-t-10 mg-sm-t-0">
                   <input class="form-control" type="text"   name="Area_title" value="<?= $Area_title;?>" placeholder="Enter Percent Of Area" required>
                </div>
              </div>
			   <div class="row mg-t-20">
                <label class="col-sm-4 form-control-label">Nationality Heading: <span class="tx-danger">*</span></label>
                <div class="col-sm-8 mg-t-10 mg-sm-t-0">
                    <input class="form-control" type="text"   name="natianilty_title" value="<?= $natianilty_title;?>" placeholder="Enter Percent Of Area" required>
              
                </div>
              </div>
			  
			   <div class="row mg-t-20">
                <label class="col-sm-4 form-control-label">Special Categories Heading:<span class="tx-danger">*</span></label>
                <div class="col-sm-8 mg-t-10 mg-sm-t-0">
                  <input class="form-control" type="text"   name="Special_title" value="<?= $Special_title;?>" placeholder="Enter Percent Of Area" required>
                </div>
              </div>
			   <div class="row mg-t-20">
                <label class="col-sm-4 form-control-label">Special Categories with Emirate Heading: <span class="tx-danger">*</span></label>
                <div class="col-sm-8 mg-t-10 mg-sm-t-0">
                   <input class="form-control" type="text"   name="category_nat_title" value="<?= $category_nat_title;?>" placeholder="Enter Percent Of Area" required>
                </div>
              </div>
			  
				  
              
              
               <div class="row mg-t-20">
                <label class="col-sm-4 form-control-label">Margin for pdf or print: <span class="tx-danger">*</span></label>
                <div class="col-sm-2 mg-t-10 mg-sm-t-0">Top Margin
                   <input class="form-control" type="text" onkeyup="this.value=this.value.replace(/[^\d]/,'')"   name="marginst" value="<?= $margint;?>" maxlength="3" required>
                </div>
				 <div class="col-sm-2 mg-t-10 mg-sm-t-0">Bottom margin
                   <input class="form-control" ttype="text" onkeyup="this.value=this.value.replace(/[^\d]/,'')"   name="marginb" value="<?= $marginb; ?>" maxlength="3" required>
                </div>
				
				
				
              </div>
              
			  <div class="row mg-t-20">
                <label class="col-sm-4 form-control-label">Set Sequence : <span class="tx-danger">*</span></label>
                <div class="col-sm-2 mg-t-10 mg-sm-t-0">Area
                   <input class="form-control" type="text" onkeyup="this.value=this.value.replace(/[^\d]/,'')"   name="Sequence[]" value="<?= trim($l[0]);?>" maxlength="1" required>
                </div>
				 <div class="col-sm-2 mg-t-10 mg-sm-t-0">Nationality
                   <input class="form-control" ttype="text" onkeyup="this.value=this.value.replace(/[^\d]/,'')"   name="Sequence[]" value="<?= trim($l[1]);?>" maxlength="1" required>
                </div>
				 <div class="col-sm-2 mg-t-10 mg-sm-t-0">Special Categories
                   <input class="form-control" type="text" onkeyup="this.value=this.value.replace(/[^\d]/,'')"   name="Sequence[]" value="<?= trim($l[2]); ?>" maxlength="1" required>
                </div>
				<div class="col-sm-2 mg-t-10 mg-sm-t-0">Categories with Emirate
                   <input class="form-control" type="text" onkeyup="this.value=this.value.replace(/[^\d]/,'')"  name="Sequence[]" value="<?= trim($l[3]);?>" maxlength="1" required>
                </div>
              </div>
			
            </div><!-- card -->
		
           

            <div class="form-layout-footer">
       
			<input type="submit" name="update" class="btn btn-info mg-r-5" value="Update">
			
              <button class="btn btn-secondary">Cancel</button>
            </div><!-- form-layout-footer -->
          
		  </form>
		  
		  
		  
        </div><!-- card -->

        
      </div><!-- sl-pagebody -->
	  
	  
	  
     
    </div><!-- sl-mainpanel -->
    <!-- ########## END: MAIN PANEL ########## -->

    <script src="lib/jquery/jquery.js"></script>
    <script src="lib/popper.js/popper.js"></script>
    <script src="lib/bootstrap/bootstrap.js"></script>
    <script src="lib/jquery-ui/jquery-ui.js"></script>
    <script src="lib/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
    <script src="lib/highlightjs/highlight.pack.js"></script>
    <script src="lib/select2/js/select2.min.js"></script>
	
	
    <script src="lib/datatables/jquery.dataTables.js"></script>
    <script src="lib/datatables-responsive/dataTables.responsive.js"></script>
<script src="lib/spectrum/spectrum.js"></script>
    <script src="js/starlight.js"></script>
    <script>
      $(function(){
        'use strict';

        $('.select2').select2({
          minimumResultsForSearch: Infinity
        });
      })
    </script>
	 <script>
      $(function(){
        'use strict';

        $('#datatable1').DataTable({
          responsive: true,
          language: {
            searchPlaceholder: 'Search...',
            sSearch: '',
            lengthMenu: '_MENU_ items/page',
          }
        });

        $('#datatable2').DataTable({
          bLengthChange: false,
          searching: false,
          responsive: true
        });

        // Select2
        $('.dataTables_length select').select2({ minimumResultsForSearch: Infinity });

      });
    </script>
	
	<script src="lib/parsleyjs/parsley.js"></script>
	
	
	 <script>
      $(function(){
$("#colorpicker").change(function(){
	var color = $(".sp-preview-inner").css('backgroundColor');
	$("#colorpicker").val(color);
});

$("#fontcolorpicker").change(function(){
	// $(".sp-preview-inner").css('backgroundColor');
	var colors = $('.fontcolorpicker').children('.sp-replacer').children('.sp-preview').children('.sp-preview-inner').css('backgroundColor');
	$("#fontcolorpicker").val(colors);
});
        'use strict';


        // Color picker
        $('#colorpicker').spectrum({
			mode: 'rgb',
          color: '<?= $Theme_color; ?>'
        });

		 // Color picker
        $('#fontcolorpicker').spectrum({
          color: '<?= $text_color; ?>'
        });

       

   

      });
    </script>
  </body>
</html>
