<script src="<?php echo base_url();?>ckeditor/ckeditor.js"></script>
      <section class="content-header">
      <h1>

        CMS 

      </h1>

      <ol class="breadcrumb">

        <li><a href="<?php echo base_url();?>"><i class="fa fa-dashboard"></i> Home</a></li>

        <li><a href="<?php echo base_url('admin/cms');?>">CMS</a></li>

        <li class="active"> Add</li>

      </ol>

    </section>

    

    <section class="content">

      <div class="row">

      <?php echo $this->utility->showMsg();?>

        <div class="col-md-12">

        <div class="loader" style="display:none;"><img src='<?php echo base_url();?>assets/images/loading.gif' alt='loading' /></div>

          <!-- Horizontal Form -->

          <div class="box box-info">

            <div class="box-header with-border">

              <h3 class="box-title">Add </h3>

            </div>

            <!-- /.box-header -->

            <!-- form start -->

            <form id="add_frm" name="add_frm" class="form-horizontal" method="post" action="" enctype="multipart/form-data">

              <div class="box-body">
                <div class="form-group" style="display:none;">

                  <label class="col-sm-2 control-label">Language</label>

                  <div class="col-sm-6">

                    <select name="language" class="form-control">
                      <?php if(!empty($language)){
                            foreach($language as $row){?>
                              <option value="<?php echo $row['id']; ?>" ><?php echo $row['name']; ?></option>
                          <?php } } ?>   
                    </select>
                  </div>

                </div>

                <div class="form-group" >

                  <label class="col-sm-2 control-label">Menu Section</label>

                  <div class="col-sm-6">

                    <select name="secton_id" class="form-control">
                      <option value="1">INSIGHTS</option> 
                      <option value="2">COMMUNITY</option> 
                      <option value="3">SHOP</option> 
                      <option value="4">ABOUT US</option> 
                    </select>
                  </div>

                </div>

                <div class="form-group">

                  <label class="col-sm-2 control-label">Title</label>

                  <div class="col-sm-6">

                    <input type="text" class="form-control" id="title" name="title" value="" placeholder="Please enter title">

                  </div>

                </div>
                <div class="form-group">

                  <label class="col-sm-2 control-label">Content</label>

                  <div class="col-sm-10">
                    <textarea name="content" class="form-control"></textarea>
                  <script>
                           CKEDITOR.replace( 'content',{
                                    filebrowserBrowseUrl : '/castle/fileman/index.html',
                                    filebrowserImageBrowseUrl : '/castle/fileman/index.html?type=image',
                                    removeDialogTabs: 'link:upload;image:upload'
                            });
                        </script> 
                  </div>

                </div>
                </div>
                
                <div class="form-group">
                  <label class="col-sm-2 control-label">Preview Image</label>
                    <div class="col-sm-6">
                      <input type="file" name="previewImage" value="Upload" class="form-control">
                    </div>
                </div> 
                <p>(If want to show image dont fill video else fill video dont upload image)</p>
                <div style="background-color:#ccc; border: 1px solid;">  
                  <div class="form-group">
                    <label class="col-sm-2 control-label">Page Image</label>
                      <div class="col-sm-6">
                        <input type="file" name="pageImage" value="Upload" class="form-control">
                      </div>
                  </div> 
                  <div class="form-group">
                    <label class="col-sm-2 control-label">Page Video Url</label>
                      <div class="col-sm-6">
                        <input type="text" name="pageVideo" class="form-control">
                      </div>
                  </div> 
                </div>  
                <h2>Page Section</h2>
                <!--content-->
                <div class="total_content">
                  <div class="pageContent" style="background-color:#ccc; border: 1px solid;">
                    <div class="form-group">
                      <label class="col-sm-2 control-label">Section Title</label>
                      <div class="col-sm-8">
                        <input type="text" name="section_title[]" value="" class="form-control">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-2 control-label">Section Content</label>
                      <div class="col-sm-8">
                        <textarea name="section_content[]" class="form-control"></textarea>
                      </div>
                    </div>
                    <p>(If want to show image dont fill video else fill video dont upload image)</p>
                    <div class="form-group">
                      <label class="col-sm-2 control-label">Section Image</label>
                       <div class="col-sm-8">
                          <input type="file" name="section_image[]" value="Upload" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-2 control-label">Section Video Url</label>
                        <div class="col-sm-6">
                          <input type="text" name="section_video[]" class="form-control">
                        </div>
                    </div>
                  </div>
                </div>  
                <div class="resultContent"></div>
                <span class="add"><i class="fa fa-plus" aria-hidden="true"></i></span> 
                  <span class="remove"><i class="fa fa-minus" aria-hidden="true"></i></span> 
                <!--content-->


              <div class="box-footer">

                <button type="button" onclick="return_back()"class="btn btn-default  margin-left  " >Cancel</button>

                <input type="submit" class="btn btn-info " value="Add" id="add">

              </div>

              <input type="hidden" name="frmSecurity" value="<?php echo $this->utility->getSecurity();?>"/>

              <!-- /.box-footer -->

            </form>

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

    </section>

    <style type="text/css">

    .loader{

      position: fixed;

      left: 0;

      top: 0;

      right: 0;

      bottom: 0;

      width: 100%;

      height: 100%;

      background-color: rgba(0, 0, 0, 0.60);

      z-index: 9999;

      text-align: center;

    }

    .loader img{

      z-index: 99999;

      margin-top: 10%;

    }

    </style>

   <script type='text/javascript'>
      $("#add_frm").validate({
        rules: {
          secton_id:{
            required: true,
          },
          title: {
            required: true,
          },
          content:{
            required:true
          },
          previewImage:{
            required:true
          }
        }
      });
    </script>

   <script type="text/javascript">
    function return_back()
    {
      var back_url='<?php echo base_url()?>admin/cms';
      window.location=back_url;
    }
    $(document).ready(function(){
      $('.add').click(function(){
        $('.resultContent').append($('.total_content').html());
      })
      $('.remove').click(function(){
        $('.resultContent').children().last().remove();
      })
    })
   </script>