<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<?php 
   $this->db->select('prd_id, checkout_plans_title, checkout_plans_description, checkout_heading, checkout_sub_heading, checkout_video_or_image, checkout_iframe, checkout_iframe, checkout_description, checkout_money_sub_heading, checkout_money_heading, checkout_money_description, checkout_money_image, advance_payment, checkout_head_code');
   $this->db->where('prd_code', $this->session->userdata('checkout_prd'));
   $product = $this->db->get('products')->row();

   $this->db->select('a.*, b.prd_name');
   $this->db->from('product_bonus a');
   $this->db->join('products b', 'b.prd_id = a.bonus_prd_id', 'left');
   $this->db->where('a.bonus_prd_id', $product->prd_id);
   $all_bonus = $this->db->get()->result();
   
   if($product->advance_payment)
   {
   	$amount = $product->advance_payment;
   	$rest = $this->session->userdata('checkout_prd_price') - $product->advance_payment;
      $adv = '(Advance)';
   }
   else
   {
   	$amount = $this->session->userdata('checkout_prd_price');
   	$rest = 0;
      $adv = '';
   }
   ?>
<head><?php echo $product->checkout_head_code; ?></head>
<section class="sptb bg-white mb-5" style="padding-bottom: 0rem;">
   <div class="mt-lg-5"></div>
   <div class="mt-5">
      <div class="pt-5 pb-5">
         <div class="header-text1 mb-0">
            <div class="container">
               <div class="row">
                  <div class="col-xl-12 col-lg-12 col-md-12 mt-lg-5">
                     <div class="text-center">
                        <h1 class=" display-5 font-weight-semibold text-white"><?php echo $product->checkout_heading; ?></h1>
                        <p class=" lead text-white"><?php echo $product->checkout_sub_heading; ?></p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="relative">
      <div class="shape overflow-hidden text-white">
         <svg viewBox="0 0 2880 48" fill="none" xmsns="http://www.w3.org/2000/svg">
            <path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="#F9F9F9"></path>
         </svg>
      </div>
   </div>
   </div>
</section>
<section style="margin-top:50px">
   <div class="container d-flex justify-content-center mt-5">
      <div class="row justify-content-center">
         <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="text-center">
               <div class="border" style="background-color: #000;padding: 10px;padding-bottom: 5px!important;border-radius: 10px;box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;">
                  <?php 
                     $video_id = explode("?v=", $product->checkout_iframe);
                     $video_id = $video_id[1];
                     $thumbnail="http://img.youtube.com/vi/".$video_id."/maxresdefault.jpg";
                  ?>

                  <video id="video-player-005" class="video-player" poster="<?php echo $thumbnail; ?>">
                     <source src="<?php echo file_get_contents(base_url().'home/video?url='.$product->checkout_iframe);?>" type="video/mp4">
                    Your browser does not support the video tag.
                  </video>
               </div>
            </div>
            <script type="text/javascript">
               document.addEventListener("DOMContentLoaded", function() {
                     new Moovie({
                     selector: "#video-player-005",
                  });
               });
            </script>
         </div>
      </div>
   </div>
</section>
<section >
   <div class="container d-flex justify-content-center mt-5">
      <div class="row justify-content-center">
         <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="text-center">
               <button class="btn btntn" onclick="open_model_product()">
               <span class="title">Pay Now  <i style="font-size:23px" class="fa fa-inr" aria-hidden="true"></i><?php echo $amount; ?> <?php echo $adv; ?></span>
               <?php if($rest != 0): ?>
               <i style="display:block;color:#fff;font-size:15px">Rest of ₹<?php echo $rest; ?> After Activation</i>
               <?php endif;?>
               </button>
               <div class="pt-3" style="background-color: rgba(0, 0, 0, 0); margin: 0px auto; border-color: rgb(170, 170, 170);">
                  <span class="fa fa-lock" style="color: rgb(170, 170, 170);"></span>
                  Your order is safe and secure
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
<!-- <section class="sptb bg-white pb-5">
   <div class="container">
   	<div class="row">
   		<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
   			<?php //echo $product->checkout_description; ?>
   		</div>
   	</div>
   </div>
   </section> -->
<section >
   <div class="container d-flex justify-content-center mt-5">
      <div class="row justify-content-center">
         <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="">
               <h1 class="text-center pb-5">Plan Includes</h1>
               <div class="row mt-5">
                  <?php foreach (json_decode($product->checkout_plans_title) as $key => $plans_title):?>
                  <div class="col-sm-4">
                     <div class="kartra_list__item--table">
                        <div class="kartra_icon--large">
                           <span class="kartra_icon__icon fa fa-check" style="color: #BE1502;"></span>
                        </div>
                        <div class="kartra_item_info">
                           <div class="kartra_item_info__headline">
                              <p><strong><?php echo $plans_title; ?></strong></p>
                           </div>
                           <div>
                              <p><?php echo json_decode($product->checkout_plans_description)[$key]; ?></p>
                           </div>
                        </div>
                     </div>
                  </div>
                  <?php endforeach; ?>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
<section >
   <div class="container d-flex justify-content-center mt-5">
      <div class="row justify-content-center">
         <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="text-center">
               <button class="btn btntn" onclick="open_model_product()">
               <span class="title">Pay Now  <i style="font-size:23px" class="fa fa-inr" aria-hidden="true"></i><?php echo $amount; ?> <?php echo $adv; ?></span>
               <?php if($rest != 0): ?>
               <i style="display:block;color:#fff;font-size:15px">Rest of ₹<?php echo $rest; ?> After Activation</i>
               <?php endif;?>
               </button>
               <div class="pt-3" style="background-color: rgba(0, 0, 0, 0); margin: 0px auto; border-color: rgb(170, 170, 170);">
                  <span class="fa fa-lock" style="color: rgb(170, 170, 170);"></span>
                  Your order is safe and secure
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
<?php if($all_bonus): ?>
   <section >
      <div class="container d-flex justify-content-center mt-5 pb-5">
         <div class="row justify-content-center">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
               <div class="">
                  <h1 class="text-center pb-5">Bonus Section</h1>
                  <div class="row mt-5">
                     <?php foreach ($all_bonus as $key => $bonus):?>
                     <div class="col-sm-6">
                        <div class="kartra_list__item--table">
                           <div class="kartra_icon--large" style="width:130px">
                              <img loading="lazy" src="<?php echo base_url() ?><?php echo $bonus->bonus_image ?>" alt="" >
                           </div>
                           <div class="kartra_item_info ps-5">
                              <div>
                                 <p><?php echo $bonus->bonus_description; ?></p>
                              </div>
                           </div>
                        </div>
                     </div>
                     <?php endforeach; ?>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </section>
   <section >
      <div class="container d-flex justify-content-center mt-5">
         <div class="row justify-content-center">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
               <div class="text-center">
                  <button class="btn btntn" onclick="open_model_product()">
                  <span class="title">Pay Now  <i style="font-size:23px" class="fa fa-inr" aria-hidden="true"></i><?php echo $amount; ?> <?php echo $adv; ?></span>
                  <?php if($rest != 0): ?>
                  <i style="display:block;color:#fff;font-size:15px">Rest of ₹<?php echo $rest; ?> After Activation</i>
                  <?php endif;?>
                  </button>
                  <div class="pt-3" style="background-color: rgba(0, 0, 0, 0); margin: 0px auto; border-color: rgb(170, 170, 170);">
                     <span class="fa fa-lock" style="color: rgb(170, 170, 170);"></span>
                     Your order is safe and secure
                  </div>
               </div>
            </div>
         </div>
      </div>
   </section>
<?php endif;?>
<section style="padding-top:30px">
   <div class="container  mt-5">
      <div class="row justify-content-center">
         <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="">
               <h3 class="text-center"><?php echo $product->checkout_money_sub_heading; ?></h3>
               <h1 class="text-center pb-5"><b><?php echo $product->checkout_money_heading; ?></b></h1>
               <div class="row ">
                  <div class="col-sm-5 d-xs-flex justify-content-sm-center image-center">
                     <img loading="lazy" class="float-lg-end" src="<?php echo base_url() ?><?php echo $product->checkout_money_image ?>">
                  </div>
                  <div class="col-sm-5">
                     <p style="font-size:20px"><?php echo $product->checkout_money_description; ?></p>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
<section >
   <div class="container d-flex justify-content-center mt-5">
      <div class="row justify-content-center">
         <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="text-center">
               <button class="btn btntn" onclick="open_model_product()">
               <span class="title">Pay Now  <i style="font-size:23px" class="fa fa-inr" aria-hidden="true"></i><?php echo $amount; ?> <?php echo $adv; ?></span>
               <?php if($rest != 0): ?>
               <i style="display:block;color:#fff;font-size:15px">Rest of ₹<?php echo $rest; ?> After Activation</i>
               <?php endif;?>
               </button>
               <div class="pt-3" style="background-color: rgba(0, 0, 0, 0); margin: 0px auto; border-color: rgb(170, 170, 170);">
                  <span class="fa fa-lock" style="color: rgb(170, 170, 170);"></span>
                  Your order is safe and secure
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
<section class="sptb bg-white pb-5">
   <div class="container">
      <div class="row text-center">
         <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 text-center">
         </div>
      </div>
   </div>
</section>
<div class="modal show" id="open_model" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header" style="border-bottom: none;padding-bottom: 0!important;">
            <button type="button" class="close" onclick="close_model()" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <div class="modal-body" style="padding-top: 0!important;">
            <div style="padding:0px;padding-top: 0!important;padding-bottom:0!important">
               <h6 class="text-center" style="font-weight: 500;">CONGRATS, YOU'RE IN!</h6>
               <h5 class="text-center">You are 50% Completed</h5>
               <div class="row" style="padding-top:20px">
                  <div class="col-md-12">
                     <div class="progress" style="margin-left:15px; margin-right:15px">
                        <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                     </div>
                  </div>
               </div>
               <div class="row" style="padding-top:20px">
                  <div class="col-md-12 mx-0">
                     <?php echo form_open(base_url() . 'home/request_for_product', ['id' => 'msform']); ?>
                     <!-- progressbar -->
                     <ul id="progressbar">
                        <li class="active" id="personal"><strong>Personal</strong></li>
                        <li id="account"><strong>Address</strong></li>
                        <li id="confirm"><strong>Business</strong></li>
                        <li id="payment"><strong>Payment</strong></li>
                     </ul>
                     <!-- fieldsets -->
                     <fieldset>
                        <div class="form-card">
                           <h2 class="fs-title">Personal Information</h2>
                           <input type="text" id="f_name" required name="f_name" placeholder="First Name *" class="mt-5" />
                           <input type="text" id="l_name" required name="l_name" placeholder="Last Name *"/>
                           <input type="email" id="email" required name="email" placeholder="Email Id *"/>
                           <input type="text" id="mobile" required name="mobile" placeholder="Contact No. *"/>
                        </div>
                        <input type="button" onclick="data_saved()" name="next" class="btn next action-button" value="Next Step"/>
                     </fieldset>
                     <fieldset>
                        <div class="form-card">
                           <h2 class="fs-title">Billing Address</h2>
                           <input type="number" required name="pin_code" id="billing_pin_code" placeholder="Pin Code *" class="mt-5" onchange="check_address(this)" />
                           <input name="address" placeholder="Enter Address *" required >
                           <select name="area" required class="list-dt" id="area">
                              <option value="">Select A Area</option>
                           </select>
                           <input name="city" placeholder="Enter City *" required readonly="" class="mt-5" id="city">
                           <input id="state" name="state" placeholder="Enter State *" required readonly="">
                        </div>
                        <input type="button" name="previous" class="btn btn-secondary  previous action-button-previous" value="Previous"/>
                        <input type="button" name="next" class="btn next action-button" value="Next Step"/>
                     </fieldset>
                     <fieldset>
                        <div class="form-card">
                           <h2 class="fs-title">Business Details</h2>
                           <input type="text" required name="business_name" placeholder="Business Name" class="mt-5" />
                           <div class="row">
                              <div class="col-5">
                                 <label class="pay">Do you have domain?*</label>
                                 <select onchange="domain_statuss(this)" name="domain_status" required class="list-dt">
                                    <option value="1">Yes</option>
                                    <option value="0">No</option>
                                 </select>
                              </div>
                              <div class="col-7">
                                 <div id="domain_name">
                                    <label class="pay">Domain Name *</label>
                                    <input type="text" name="domain_name" placeholder="Enter Your Domain Name"/>
                                 </div>
                                 <div id="expected_domain">
                                    <label class="pay">Expected Domain Name *</label>
                                    <input type="text" name="domain_name_expected" placeholder="Enter your Expected Domain Name"/>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <input type="button" name="previous" class="btn btn-secondary previous action-button-previous" value="Previous"/>
                        <input type="button" name="next" class="btn next action-button" value="Next Step"/>
                     </fieldset>
                     <fieldset>
                        <div class="form-card">
                           <h2 class="fs-title">Order summery</h2>
                           <div class="row">
                              <div class="col-12">
                                 <table>
                                    <tr>
                                       <td>Package Name</td>
                                       <th>Package <?php echo $this->session->userdata('checkout_prd_package_id'); ?></th>
                                    </tr>
                                    <tr>
                                       <td>Price</td>
                                       <th>₹ <?php echo $this->session->userdata('checkout_prd_price'); ?></th>
                                    </tr>
                                    <tr>
                                       <td>Adv. Payment</td>
                                       <th>₹ <?php echo $amount ?></th>
                                    </tr>
                                    <tr>
                                       <td>Due Payment</td>
                                       <th>₹ <?php echo $this->session->userdata('checkout_prd_price') - $amount ?></th>
                                    </tr>
                                 </table>
                              </div>
                           </div>
                           <label class="container-check mt-5">Accept <a href="<?php echo base_url() ?>/p/terms-conditions">Terms & Conditions</a>
							  <input type="checkbox" checked="checked" required>
							  <span class="checkmark"></span>
							</label>
                           <input name="prd_id" type="hidden" required="" value="<?php echo $product->prd_id ?>">
                           <input name="price" type="hidden" id="price" >
                           <input name="package_id" type="hidden" value="<?php echo $this->session->userdata('checkout_prd_package_id'); ?>" >
                           <input name="prd_inq_id" type="hidden" id="data_insert_id" >
                        </div>
                        <input type="button" name="previous" class="btn btn-secondary previous action-button-previous" value="Previous"/>
                        <input type="submit" name="make_payment" class="btn action-button" value="Confirm Order"/>
                     </fieldset>
                     <?php echo form_close(); ?>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<style type="text/css">
	.container-check {
  display: block;
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container-check input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container-check:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container-check input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container-check input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container-check .checkmark:after {
  left: 7px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
	.next:hover
	{
		color: #fff!important;
	}
   table, td, th {  
   border: 1px solid #ddd;
   text-align: left;
   }
   table {
   border-collapse: collapse;
   width: 100%;
   }
   th, td {
   padding: 15px;
   }	
   #expected_domain
   {
   display: none;
   }
   #msform {
   text-align: center;
   position: relative;
   margin-top: 20px;
   }
   #msform fieldset .form-card {
   background: white;
   border: 0 none;
   border-radius: 0px;
   box-shadow: none;
   padding: 5px;
   box-sizing: border-box;
   width: 94%;
   margin: 0px 3% 0px 3%;
   /*stacking fieldsets above each other*/
   position: relative;
   }
   #msform fieldset {
   background: white;
   border: 0 none;
   border-radius: 0.5rem;
   box-sizing: border-box;
   width: 100%;
   margin: 0;
   padding-bottom: 0px;
   /*stacking fieldsets above each other*/
   position: relative;
   }
   /*Hide all except first fieldset*/
   #msform fieldset:not(:first-of-type) {
   display: none;
   }
   #msform fieldset .form-card {
   text-align: left;
   color: #9E9E9E;
   }
   #msform input, #msform textarea {
   padding: 0px 8px 4px 8px;
   border: none;
   border-bottom: 1px solid #ccc;
   border-radius: 0px;
   margin-bottom: 25px;
   margin-top: 2px;
   width: 100%;
   box-sizing: border-box;
   font-family: montserrat;
   color: #2C3E50;
   font-size: 16px;
   letter-spacing: 1px;
   }
   #msform input:focus, #msform textarea:focus {
   -moz-box-shadow: none !important;
   -webkit-box-shadow: none !important;
   box-shadow: none !important;
   border: none;
   font-weight: bold;
  
   outline-width: 0;
   }
   /*Blue Buttons*/
   #msform .action-button {
   width: 50%;
   /* background: skyblue; */
   font-weight: bold;
   color: white;
   border: 0 none;
   border-radius: 0px;
   cursor: pointer;
   padding: 10px 5px;
   margin: 10px 5px;
   }
   /* #msform .action-button:hover, #msform .action-button:focus {
   box-shadow: 0 0 0 2px white, 0 0 0 3px skyblue;
   } */
   /*Previous Buttons*/
   #msform .action-button-previous {
   width: 100px;
   /* background: #616161; */
   font-weight: bold;
   color: white;
   border: 0 none;
   border-radius: 0px;
   cursor: pointer;
   padding: 10px 5px;
   margin: 10px 5px;
   }
   #msform .action-button-previous:hover, #msform .action-button-previous:focus {
   box-shadow: 0 0 0 2px white, 0 0 0 3px #616161;
   }
   /*Dropdown List Exp Date*/
   select.list-dt {
   border: none;
   outline: 0;
   border-bottom: 1px solid #ccc;
   padding: 2px 5px 3px 5px;
   margin: 2px;
   width: 100%;
   }
   select.list-dt:focus {
   /* border-bottom: 2px solid skyblue; */
   }
   /*The background card*/
   .card {
   z-index: 0;
   border: none;
   border-radius: 0.5rem;
   position: relative;
   }
   /*FieldSet headings*/
   .fs-title {
   font-size: 25px;
   color: #2C3E50;
   margin-bottom: 10px;
   font-weight: bold;
   text-align: left;
   }
   /*progressbar*/
   #progressbar {
   margin-bottom: 30px;
   overflow: hidden;
   color: lightgrey;
   }
   #progressbar .active {
   color: #000000;
   }
   #progressbar li {
   list-style-type: none;
   font-size: 12px;
   width: 25%;
   float: left;
   position: relative;
   display:inline-block;
   }
   /*Icons in the ProgressBar*/
   #progressbar #account:before {
   font-family: FontAwesome;
   content: "\f2bb";
   }
   #progressbar #personal:before {
   font-family: FontAwesome;
   content: "\f007";
   }
   #progressbar #confirm:before {
   font-family: FontAwesome;
   content: "\f0b1";
   }
   #progressbar #payment:before {
   font-family: FontAwesome;
   content: "\f09d";
   }
   /*ProgressBar before any progress*/
   #progressbar li:before {
   width: 50px;
   height: 50px;
   line-height: 45px;
   display: block;
   font-size: 18px;
   color: #ffffff;
   background: lightgray;
   border-radius: 50%;
   margin: 0 auto 10px auto;
   padding: 2px;
   }
   /*ProgressBar connectors*/
   #progressbar li:after {
   content: '';
   width: 100%;
   height: 2px;
   background: lightgray;
   position: absolute;
   left: 0;
   top: 25px;
   z-index: -1;
   }
   /*Color number of the step and the connector before it*/
   #progressbar li.active:before, #progressbar li.active:after {
   background: <?php echo $visual_setting->color_1; ?>!important;
   }
   .kartra_item_info__headline {
   font-size: 1rem;
   font-weight: 400;
   margin-top: 0px;
   margin-bottom: 6px;
   line-height: 1.2em;
   }
   .kartra_item_info {
   display: table-cell;
   vertical-align: top;
   }
   .kartra_icon--large {
   width: 60px;
   height: 60px;
   font-size: 36px;
   top: 4px;
   }
   .kartra_list__item--table {
   display: table;
   }
   .btntn
   {
   padding-left: 50px;
   padding-right: 50px;
   }
   .btn .title
   {
   font-size: 25px;
   color: #fff;
   font-weight: 700;
   }
   .btn .sub
   {
   display: block;
   font-size: 20px;
   color: #fff;
   }
   iframe {
   width: 640px;
   height: 360px;
   }
   .border
   {
   border: 40px solid #000;
   }
   @media only screen and (max-device-width: 480px) {
   iframe {
   width:100%;
   height: 100%;
   }
   }
   .sst, #back-to-top, #horizontal-navtoggle, .newsletter-new, .footer-main, .horizontalMenu
   {
   display: none!important;
   }
   .horizontal-main
   {
   background-color: #fff;
   padding: 10px 0;
   }
   @media only screen and (max-width: 991px)
   {
   .horizontal-header .smllogo {
   display: inline-block;
   margin-top: 1px;
   }
   .horizontal-header .smllogo img {
   width: 200px;
   }
   .horizontal-main 
   {
   display: none;
   }
   .horizontal-header .smllogo {
   display: inline-block;
   margin-top: 9px;
   margin-left: 0!important;
   }
   .btntn
   {
   padding-left: 15px;
   padding-right: 15px;
   }
   .btn .title
   {
   font-size: 20px;
   }
   .image-center
   {
   text-align: center;
   }
   }
   .desktoplogo {
   padding: 0.75rem 0;
   margin: auto!important;
   /* float: center; */
   width: 200px;
   }
</style>
<script type="text/javascript">
   function check_address(e) {
       let pin_code = e.value;
       $.ajax({
         beforeSend: function() {
           $(".preloader-ajax").show();
           $(".preloader-ajax-bg").show();
         },
         type: "GET",
         dataType:"JSON",
         async: true,
         url: '<?php echo base_url(); ?>home/get_pin_code_details/'+pin_code,
         success: function (data) 
         {
             $('#area').html(data.area);
             $('#city').val(data.city);
             $('#state').val(data.state);
             $(".preloader-ajax").hide();
             $(".preloader-ajax-bg").hide();
         },
         error: function () {
           $(".preloader-ajax").hide();
           $(".preloader-ajax-bg").hide();
         }
       });
   }
   
    function domain_statuss(e) 
   {
       var data = e.value;
       if(data == 1)
       {
           $('#domain_name').show();
           $('#expected_domain').hide();
       }
       else
       {
           $('#domain_name').hide();
           $('#expected_domain').show();
       }
   }
   	function open_model_product() {
      	$('#price').val(<?php echo $amount; ?>)
      	$('#open_model').modal('show');
    }
    function data_saved() 
    {
    	var current_fs, next_fs, previous_fs; //fieldsets

    	var f_name 	= $('#f_name').val();
    	var l_name 	= $('#l_name').val();
    	var email 	= $('#email').val();
    	var mobile 	= $('#mobile').val();
    	var prd_id 	= "<?php echo $product->prd_id; ?>";
    	if(f_name == '')
    	{
    		swal('error', "Please Enter First Name", 'error');
    		return false;
    	}
    	if(l_name == '')
    	{
    		swal('error', "Please Enter Last Name", 'error');
    		return false;
    	}
    	if(email == '')
    	{
    		swal('error', "Please Enter Email ID", 'error');
    		return false;
    	}
    	if(mobile == '')
    	{
    		swal('error', "Please Enter Mobile No", 'error');
    		return false;
    	}
    	$.ajax({
	        type: "POST",
	        data:{
	         	f_name:f_name, l_name:l_name, email:email, mobile:mobile, prd_id:prd_id
	        },
	        url: '<?php echo base_url(); ?>home/data_saved_for_first_pay',
	        success: function (data) 
	        {
	        	$('#data_insert_id').val(data);
	        },
       });
    }

   $(document).ready(function(){
       
   var current_fs, next_fs, previous_fs; //fieldsets
   var opacity;
   
   $(".next").click(function(){
       
       current_fs = $(this).parent();
       next_fs = $(this).parent().next();
       
       //Add Class Active
       $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
       
       //show the next fieldset
       next_fs.show(); 
       //hide the current fieldset with style
       current_fs.animate({opacity: 0}, {
           step: function(now) {
               // for making fielset appear animation
               opacity = 1 - now;
   
               current_fs.css({
                   'display': 'none',
                   'position': 'relative'
               });
               next_fs.css({'opacity': opacity});
           }, 
           duration: 600
       });
   });
   
   $(".previous").click(function(){
       
       current_fs = $(this).parent();
       previous_fs = $(this).parent().prev();
       
       //Remove class active
       $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
       
       //show the previous fieldset
       previous_fs.show();
   
       //hide the current fieldset with style
       current_fs.animate({opacity: 0}, {
           step: function(now) {
               // for making fielset appear animation
               opacity = 1 - now;
   
               current_fs.css({
                   'display': 'none',
                   'position': 'relative'
               });
               previous_fs.css({'opacity': opacity});
           }, 
           duration: 600
       });
   });
   
       
   });
</script>
<script type="text/javascript">
    $(window).on('load', function() {
        $('#myModal_alert').modal('show');
    });
</script>
<div id="myModal_alert" class="modal fade">
   <div class="modal-dialog modal-confirm">
      <div class="modal-content">
         <div class="modal-header">
            <div class="icon-box">
               <i class="material-icons">&#xE86B;</i>
               <i class="material-icons">&#xE86B;</i>
               <i class="material-icons">&#xE645;</i>
            </div>
               
         </div>
         <div class="modal-body text-center">
            <h4>You are buying now Standerd Licence no customization is allowed.</h4> 
            <p>Yes I'm confortable with your readymade features</p>
            <button class="btn btn-primary" data-bs-dismiss="modal" >Continue to Buy</button>
         </div>
      </div>
   </div>
</div> 
<style>
   .modal-confirm {  
   color: #8e8e8e;
   width: 450px;
}
.modal-confirm .modal-content {
   padding: 20px;
   border-radius: 5px;     
   border: none;
}
.modal-confirm .modal-header {
   border-bottom: none;   
   position: relative;
   justify-content: center;
   border-radius: 5px 5px 0 0;
}
.modal-confirm h4 {
   color: #545557;
   text-align: center;
   font-size: 30px;
   margin: 0 0 25px;
}
.modal-confirm .form-control, .modal-confirm .btn {
   min-height: 40px;
   border-radius: 3px; 
}
.modal-confirm .close {
   background: #c0c3c8;
   position: absolute;
   top: 15px;
   right: 15px;
   color: #fff;
   text-shadow: none;
   opacity: 0.5;
   width: 30px;
   height: 30px;
   padding: 0;
   border-radius: 20px;
   font-size: 16px;
}
.modal-confirm .close:hover {
   opacity: 0.8;
}
.modal-confirm .icon-box {
   color: #f95858;      
   display: inline-block;
   z-index: 9;
   text-align: center;
   position: relative;
   transform: scale(1.5);
}
.modal-confirm .icon-box i:first-child {
   font-size: 100px;
}
.modal-confirm .icon-box i:nth-child(2) {
   font-size: 138px;
   position: absolute;
   left: -19px;
   top: -23px;
   font-weight: bold;
   color: #fff;
}
.modal-confirm .icon-box i:last-child {
   font-size: 26px;
   position: absolute;
   left: 0;
   right: 0;
   margin: 0 auto;
   top: 44px;
}
.modal-confirm .btn {
   color: #fff;
   border-radius: 4px;
   background: #eeb711;
   text-decoration: none;
   transition: all 0.4s;
   line-height: normal;
   border-radius: 3px;
   margin: 30px 0 20px;
   padding: 6px 20px;
   min-width: 150px;
   border: none;
}
.modal-confirm .btn:hover, .modal-confirm .btn:focus {
   background: #eda645;
   outline: none;
}
.trigger-btn {
   display: inline-block;
   margin: 100px auto;
}
   </style>