<link rel="stylesheet" href="<?php echo admin_css() ?>plugins/bs-stepper/css/bs-stepper.min.css">
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
   <!-- Content Header (Page header) -->
   <section class="content-header">
      <div class="container-fluid">
         <div class="row mb-2">
            <div class="col-sm-6">
               <h1>Edit Ebook Page</h1>
            </div>
            <div class="col-sm-6">
               <ol class="breadcrumb float-sm-right">
                  <li class="breadcrumb-item"><a href="<?php echo admin_url() ?>admin">Home</a></li>
                  <li class="breadcrumb-item active">Edit Ebook Page</li>
               </ol>
            </div>
         </div>
      </div>
      <!-- /.container-fluid -->
   </section>
   <!-- Main content -->
   <section class="content">
      <div class="container-fluid">
         <!--  EXAMPLE -->
         <div class="card card-default">
            <!-- /.card-header -->
            <div class="card-body">
               <div class="card-body p-0">
                  <?php echo form_open_multipart(base_url().'admin/ebook/update_page/'.$page->page_id);?>
                  <div class="bs-stepper linear">
                     <div class="" role="tablist">
                        <!-- your steps here -->
                        <div class="row">
                           <div class="col-6 col-md-3">
                              <div class="step active" data-target="#basic-part">
                                 <button type="button" class="step-trigger" role="tab" aria-controls="logins-part" id="logins-part-trigger" aria-selected="true">
                                 <span class="bs-stepper-circle">1</span>
                                 <span class="bs-stepper-label">Basic</span>
                                 </button>
                              </div>
                           </div>
                           <div class="col-6 col-md-3">
                              <div class="line"></div>
                              <div class="step" data-target="#media">
                                 <button type="button" class="step-trigger" role="tab" aria-controls="information-part" aria-selected="false" disabled="disabled">
                                 <span class="bs-stepper-circle">2</span>
                                 <span class="bs-stepper-label">Media</span>
                                 </button>
                              </div>
                           </div>
                           <div class="col-6 col-md-3">
                              <div class="line"></div>
                              <div class="step" data-target="#shiping-part">
                                 <button type="button" class="step-trigger" role="tab" aria-controls="information-part" aria-selected="false" disabled="disabled">
                                 <span class="bs-stepper-circle">2</span>
                                 <span class="bs-stepper-label">Page Video</span>
                                 </button>
                              </div>
                           </div>
                           
                           <div class="col-6 col-md-3">
                              <div class="line"></div>
                              <div class="step" data-target="#heading-part">
                                 <button type="button" class="step-trigger" role="tab" aria-controls="information-part" aria-selected="false" disabled="disabled">
                                 <span class="bs-stepper-circle">2</span>
                                 <span class="bs-stepper-label">Page Heading</span>
                                 </button>
                              </div>
                           </div>
                           
                           <div class="col-6 col-md-3">
                              <div class="line"></div>
                              <div class="step" data-target="#seo">
                                 <button type="button" class="step-trigger" role="tab" aria-controls="information-part" aria-selected="false" disabled="disabled">
                                 <span class="bs-stepper-circle">6</span>
                                 <span class="bs-stepper-label">SEO</span>
                                 </button>
                              </div>
                           </div>
                           <div class="col-6 col-md-3">
                              <div class="line"></div>
                              <div class="step" data-target="#finish">
                                 <button type="button" class="step-trigger" role="tab" aria-controls="information-part" aria-selected="false" disabled="disabled">
                                 <span class="bs-stepper-circle">7</span>
                                 <span class="bs-stepper-label">Finish</span>
                                 </button>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="bs-stepper-content">
                        <!-- your steps content here -->
                        <div id="basic-part" class="content active dstepper-block" role="tabpanel" aria-labelledby="logins-part-trigger">
                           <div class="row justify-content-center">
                              <div class="col-xl-12">
                                 
                                 
                                 <div class="form-group row mb-3">
                                    <label class="col-md-2 col-form-label">Page Title<span class="required">*</span> </label>
                                    <div class="col-md-10">
                                       <input type="text" class="form-control" name = "page_title" placeholder="<?php echo get_phrase('enter_page_title'); ?>" readonly value="<?php echo $page->page_title; ?>">
                                    </div>
                                 </div>
                                 <div class="form-group row mb-3">
                                    <label class="col-md-2 col-form-label">Page Heading<span class="required">*</span> </label>
                                    <div class="col-md-10">
                                       <input type="text" class="form-control" name="page_heading" placeholder="Enter Page Heading" required="" value="<?php echo $page->page_heading; ?>">
                                    </div>
                                 </div>
                                 <div class="form-group row mb-3">
                                    <label class="col-md-2 col-form-label">Page Expire Time<span class="required">*</span> </label>
                                    <div class="col-md-10">
                                       <input type="number" class="form-control" name="page_exp_time" placeholder="Enter Page Expire Time (Ex. 10)" required="" value="<?php echo $page->page_exp_time; ?>">
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <button type="button" class="btn btn-primary" onclick="stepper.next()">Next</button>
                        </div>
                        <!-- end col -->
                     </div>

                     <div id="media" class="content" role="tabpanel" aria-labelledby="information-part-trigger">
                        <div class="row justify-content-center">
                           
                           <div class="col-xl-12">
                              <div class="form-group row mb-3">
                                 <label class="col-md-2 col-form-label" ><?php echo get_phrase('page_overview_url'); ?> <span class="required">*</span></label>
                                 <div class="col-md-10">
                                    <input type="text" class="form-control" required name="page_video" placeholder="E.g: https://www.youtube.com/watch?v=oBtf8Yglw2w" value="<?php echo $page->page_video; ?>">
                                 </div>
                              </div>
                           </div>
                           
                        </div>
                        <!-- end row -->
                        <button type="button" class="btn btn-primary" onclick="stepper.previous()">Previous</button>
                        <button type="button" class="btn btn-primary" onclick="stepper.next()">Next</button>
                     </div>

                     <div id="shiping-part" class="content" role="tabpanel" aria-labelledby="information-part-trigger">
                        <div class="row justify-content-center">
                           <div class="col-xl-12">
                              <div class="form-group row mb-3">
                                 <label class="col-md-2 col-form-label" for="outcomes"><?php echo get_phrase('page_testimonials_video'); ?></label>
                                 <div class="col-md-10">
                                    <div id = "requirement_area">
                                      <?php if (count(json_decode($page->page_testimonials_video)) > 0): ?>
                                            <?php
                                            $counter = 0;
                                            foreach (json_decode($page->page_testimonials_video) as $requirement):?>
                                            <?php if ($counter == 0):
                                                $counter++; ?>
                                                <div class="d-flex mt-2">
                                                    <div class="flex-grow-1 px-3">
                                                        <div class="form-group">
                                                            <input type="text" class="form-control" name="page_testimonials_video[]" id="requirements" placeholder="<?php echo get_phrase('page_testimonials_video'); ?>" value="<?php echo $requirement; ?>">
                                                        </div>
                                                    </div>
                                                    <div class="">
                                                        <button type="button" class="btn btn-success btn-sm" style="" name="button" onclick="appendRequirement()"> <i class="fa fa-plus"></i> </button>
                                                    </div>
                                                </div>
                                            <?php else: ?>
                                                <div class="d-flex mt-2">
                                                    <div class="flex-grow-1 px-3">
                                                        <div class="form-group">
                                                            <input type="text" class="form-control" name="page_testimonials_video[]" id="requirements" placeholder="<?php echo get_phrase('page_testimonials_video'); ?>" value="<?php echo $requirement; ?>">
                                                        </div>
                                                    </div>
                                                    <div class="">
                                                        <button type="button" class="btn btn-danger btn-sm" style="margin-top: 0px;" name="button" onclick="removeRequirement(this)"> <i class="fa fa-minus"></i> </button>
                                                    </div>
                                                </div>
                                            <?php endif; ?>
                                        <?php endforeach; ?>
                                      <?php else: ?>
                                        <div class="d-flex mt-2">
                                            <div class="flex-grow-1 px-3">
                                                <div class="form-group">
                                                    <input type="text" class="form-control" name="page_testimonials_video[]" id="requirements" placeholder="<?php echo get_phrase('page_testimonials_video'); ?>">
                                                </div>
                                            </div>
                                            <div class="">
                                                <button type="button" class="btn btn-success btn-sm" style="" name="button" onclick="appendRequirement()"> <i class="fa fa-plus"></i> </button>
                                            </div>
                                        </div>
                                      <?php endif; ?>
                                    </div>
                                    <div id = "blank_requirement_field">
                                        <div class="d-flex mt-2">
                                            <div class="flex-grow-1 px-3">
                                                <div class="form-group">
                                                    <input type="text" class="form-control" name="requirements[]" id="requirements" placeholder="<?php echo get_phrase('provide_requirements'); ?>">
                                                </div>
                                            </div>
                                            <div class="">
                                                <button type="button" class="btn btn-danger btn-sm" style="margin-top: 0px;" name="button" onclick="removeRequirement(this)"> <i class="fa fa-minus"></i> </button>
                                            </div>
                                        </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <button type="button" class="btn btn-primary" onclick="stepper.previous()">Previous</button>
                        <button type="button" class="btn btn-primary" onclick="stepper.next()">Next</button>
                     </div>
                     
                     <div id="heading-part" class="content" role="tabpanel" aria-labelledby="heading-part-trigger">
                        <div class="row justify-content-center">

                           <div class="col-xl-12">
                              <div class="form-group row mb-3">
                                 <label class="col-md-2 col-form-label" for="website_keywords">Page Close Heading</label>
                                 <div class="col-md-10">
                                    <input type="text" class="form-control " name="upsell_close_heading" placeholder="Enter Page Close Heading" value="<?php echo $page->upsell_close_heading; ?>"/>
                                 </div>
                              </div>
                           </div>

                           <div class="col-xl-12">
                              <div class="form-group row mb-3">
                                 <label class="col-md-2 col-form-label" for="website_keywords">Page Close Sub Heading</label>
                                 <div class="col-md-10">
                                    <input type="text" class="form-control " name="upsell_close_sub_heading" placeholder="Enter Page Close Sub Heading" value="<?php echo $page->upsell_close_sub_heading; ?>"/>
                                 </div>
                              </div>
                           </div>

                           <div class="col-xl-12">
                              <div class="form-group row mb-3">
                                 <label class="col-md-2 col-form-label" for="website_keywords">Page Offer Heading</label>
                                 <div class="col-md-10">
                                    <input type="text" class="form-control " name="upsell_offer_title" placeholder="Enter Page Offer Heading" value="<?php echo $page->upsell_offer_title; ?>"/>
                                 </div>
                              </div>
                           </div>

                           <div class="col-xl-12">
                              <div class="form-group row mb-3">
                                 <label class="col-md-2 col-form-label" for="website_keywords">Page Main Btn Heading</label>
                                 <div class="col-md-10">
                                    <input type="text" class="form-control " name="upsell_main_btn_heading" placeholder="Enter Page Main Button Heading" value="<?php echo $page->upsell_main_btn_heading; ?>"/>
                                 </div>
                              </div>
                           </div>

                           <div class="col-xl-12">
                              <div class="form-group row mb-3">
                                 <label class="col-md-2 col-form-label" for="website_keywords">Page Main Btn Sub Heading</label>
                                 <div class="col-md-10">
                                    <input type="text" class="form-control " name="upsell_main_btn_sub_heading" placeholder="Enter Page Main Button Sub Heading" value="<?php echo $page->upsell_main_btn_sub_heading; ?>"/>
                                 </div>
                              </div>
                           </div>

                           <div class="col-xl-12">
                              <div class="form-group row mb-3">
                                 <label class="col-md-2 col-form-label" for="website_keywords">Page Sub Btn Heading</label>
                                 <div class="col-md-10">
                                    <input type="text" class="form-control " name="upsell_sub_btn_heading" placeholder="Enter Page Sub Button Heading" value="<?php echo $page->upsell_sub_btn_heading; ?>"/>
                                 </div>
                              </div>
                           </div>

                           <div class="col-xl-12">
                              <div class="form-group row mb-3">
                                 <label class="col-md-2 col-form-label" for="website_keywords">Page Sub Btn Sub Heading</label>
                                 <div class="col-md-10">
                                    <input type="text" class="form-control " name="upsell_sub_btn_sub_heading" placeholder="Enter Page Sub Button Sub Heading" value="<?php echo $page->upsell_sub_btn_sub_heading; ?>"/>
                                 </div>
                              </div>
                           </div>

                           <div class="col-xl-12">
                              <div class="form-group row mb-3">
                                 <label class="col-md-2 col-form-label" for="website_keywords">Page Client Section Heading</label>
                                 <div class="col-md-10">
                                    <input type="text" class="form-control " name="upsell_client_heading" placeholder="Enter Page Client Section Heading" value="<?php echo $page->upsell_client_heading; ?>"/>
                                 </div>
                              </div>
                           </div>

                           <div class="col-xl-12">
                              <div class="form-group row mb-3">
                                 <label class="col-md-2 col-form-label" for="website_keywords">Page Vip Pass Heading</label>
                                 <div class="col-md-10">
                                    <input type="text" class="form-control " name="upsell_vip_pass_heading" placeholder="Enter Page Vip Pass Heading" value="<?php echo $page->upsell_vip_pass_heading; ?>"/>
                                 </div>
                              </div>
                           </div>

                        </div>
                        <!-- end row -->
                        <button type="button" class="btn btn-primary" onclick="stepper.previous()">Previous</button>
                        <button type="button" class="btn btn-primary" onclick="stepper.next()">Next</button>
                     </div>
                     
                     <div id="seo" class="content" role="tabpanel" aria-labelledby="information-part-trigger">
                        <div class="row justify-content-center">
                           <div class="col-xl-12">
                              <div class="form-group row mb-3">
                                 <label class="col-md-2 col-form-label" for="website_keywords"><?php echo get_phrase('meta_keywords'); ?></label>
                                 <div class="col-md-10">
                                    <input type="text" class="form-control bootstrap-tag-input" id = "meta_keywords" name="page_meta_keywords" data-role="tagsinput" style="width: 100%;" placeholder="<?php echo get_phrase('write_a_keyword_comma_saparate'); ?>" value="<?php echo $page->page_meta_keywords; ?>">
                                 </div>
                              </div>
                           </div>
                           <!-- end col -->
                           <div class="col-xl-12">
                              <div class="form-group row mb-3">
                                 <label class="col-md-2 col-form-label" for="meta_description"><?php echo get_phrase('meta_description'); ?></label>
                                 <div class="col-md-10">
                                    <textarea name="page_meta_description" class="form-control"><?php echo $page->page_meta_description; ?></textarea>
                                 </div>
                              </div>
                           </div>

                           <div class="col-xl-12">
                              <div class="form-group row mb-3">
                                 <label class="col-md-2 col-form-label" for="meta_description"><?php echo get_phrase('page_head_code'); ?></label>
                                 <div class="col-md-10">
                                    <textarea name="page_head_code" class="form-control"><?php echo $page->page_head_code; ?></textarea>
                                 </div>
                              </div>
                           </div>
                           <!-- end col -->
                        </div>
                        <!-- end row -->
                        <button type="button" class="btn btn-primary" onclick="stepper.previous()">Previous</button>
                        <button type="button" class="btn btn-primary" onclick="stepper.next()">Next</button>
                     </div>
                     <div id="finish" class="content" role="tabpanel" aria-labelledby="information-part-trigger">
                        <div class="row">
                           <div class="col-12">
                              <div class="text-center">
                                 <h2 class="mt-0"><i class="mdi mdi-check-all"></i></h2>
                                 <h3 class="mt-0"><?php echo get_phrase("thank_you"); ?> !</h3>
                                 <p class="w-75 mb-2 mx-auto"><?php echo get_phrase('you_are_just_one_click_away'); ?></p>
                                 <div class="mb-3 mt-3">
                                    <button type="submit" class="btn btn-primary text-center" ><?php echo get_phrase('submit'); ?></button>
                                 </div>
                              </div>
                           </div>
                           <!-- end col -->
                        </div>
                        <!-- end row -->
                        <input type="hidden" name="added_by" value="<?php echo user()->id ?>"  >
                        <button type="button" class="btn btn-primary" onclick="stepper.previous()">Previous</button>
                     </div>
                  </div>
               </div>
            </div>
            <?php echo form_close(); ?>
         </div>
      </div>
   </section>
   <!-- /.content -->
</div>
</section>
<style type="text/css">
</style>
<script src="<?php echo admin_css() ?>plugins/bs-stepper/js/bs-stepper.min.js"></script>
<script type="text/javascript">
   // BS-Stepper Init
   document.addEventListener('DOMContentLoaded', function () {
    window.stepper = new Stepper(document.querySelector('.bs-stepper'))
   });
</script>
<script type="text/javascript">
   $(document).ready(function() {
     $('#category').change(function() {
         var category_id = $('#category').val();
         if (category_id != '') {
             $.ajax({
                 url: "<?php echo base_url();?>admin/category/fetch_all_sub_category",
                 method: "POST",
                 data: {
                     category_id: category_id
                 },
                 success: function(data) {
                     $('#sub_category').html(data);
                 }
             });
         } else {
             $('#sub_category').html('<option value="">Select</option>');
             $('#child_sub_category').html('<option value="">Select Child Sub Category</option>');
         }
     });
   });
   var blank_outcome = jQuery('#blank_outcome_field').html();
   var blank_requirement = jQuery('#blank_requirement_field').html();
   jQuery(document).ready(function() {
   jQuery('#blank_outcome_field').hide();
   jQuery('#blank_requirement_field').hide();
   });
   function appendOutcome() {
   jQuery('#outcomes_area').append(blank_outcome);
   }
   function removeOutcome(outcomeElem) {
   jQuery(outcomeElem).parent().parent().remove();
   }
   
   function appendRequirement() {
   jQuery('#requirement_area').append(blank_requirement);
   }
   function removeRequirement(requirementElem) {
   jQuery(requirementElem).parent().parent().remove();
   }
   
   function priceChecked(elem){
   if (jQuery('#discountCheckbox').is(':checked')) {
   
     jQuery('#discountCheckbox').prop( "checked", false );
   }else {
   
     jQuery('#discountCheckbox').prop( "checked", true );
   }
   }
   
   function topCourseChecked(elem){
   if (jQuery('#isTopCourseCheckbox').is(':checked')) {
   
     jQuery('#isTopCourseCheckbox').prop( "checked", false );
   }else {
   
     jQuery('#isTopCourseCheckbox').prop( "checked", true );
   }
   }
   
   function isFreeCourseChecked(elem) {
   
   if (jQuery('#'+elem.id).is(':checked')) {
     $('#price').prop('required',false);
   }else {
     $('#price').prop('required',true);
   }
   }
   
   function calculateDiscountPercentage(discounted_price) {
   if (discounted_price > 0) {
     var actualPrice = jQuery('#price').val();
     if ( actualPrice > 0) {
       var reducedPrice = actualPrice - discounted_price;
       var discountedPercentage = (reducedPrice / actualPrice) * 100;
       if (discountedPercentage > 0) {
         jQuery('#discounted_percentage').text(discountedPercentage.toFixed(2)+'%');
   
       }else {
         jQuery('#discounted_percentage').text('<?php echo '0%'; ?>');
       }
     }
   }
   }
   
   function calculateDiscountPercentage_1(discounted_price) {
     if (discounted_price > 0) {
       var actualPrice = jQuery('#price_1').val();
       if ( actualPrice > 0) {
         var reducedPrice = actualPrice - discounted_price;
         var discountedPercentage = (reducedPrice / actualPrice) * 100;
         if (discountedPercentage > 0) {
           jQuery('#discounted_percentage_1').text(discountedPercentage.toFixed(2)+'%');
   
         }else {
           jQuery('#discounted_percentage_1').text('<?php echo '0%'; ?>');
         }
       }
     }
   }
   
</script>
<style media="screen">
   body {
   overflow-x: hidden;
   }
</style>