<div class="row">
    <div class="col-lg-12">
    <div class="card mb-1">
        <div class="card-body">
                        <p class="text-center">
                        <span class="badge badge-dark">Woocommerce</span> -
                        <span class="badge badge-dark">Magento</span> - 
                        <span class="badge badge-dark">Prestashop</span> -
                        <span class="badge badge-dark">OpenCart</span> -
                        <span class="badge badge-dark">Shopify</span> -
                        <span class="badge badge-dark">BigCommerce</span> -
                        <span class="badge badge-dark">OsCommerce</span> -
                        <span class="badge badge-dark">ZenCart</span> -
                        <span class="badge badge-dark">Xcart</span> - 
                        <span class="badge badge-secondary">laravel</span> -
                        <span class="badge badge-secondary">Codeigniter</span> -
                        <span class="badge badge-secondary">CakePHP</span> -
                        <span class="badge badge-secondary">Symfony</span> -
                        <span class="badge badge-secondary">Yii</span> -
                        <span class="badge badge-secondary">FuelPHP</span> -
                        <span class="badge badge-secondary">PHPixie</span> -
                        <span class="badge badge-secondary">Slim</span> -
                        <span class="badge badge-secondary">Custom PHP</span><br>
                        <div class="alert alert-primary mt-2 text-center">Support Any Online Cms Stores & Any Custom Stores From Any Framework! <strong>Your store is not on the list? Contact us now and we will integrate for you!</strong></div>
                        </p>
            </div>
        </div>
    </div>
</div>


<div class="row mt-2">
	<div class="col-lg-12">
                <div class="steps">
                  <div class="step">
                    <div class="step-header">
                      <div class="header">Step 1 -Add A Program</div>
                    </div>
                    <div class="step-content one bg-white">
                        
                        <div class="row">
                            <div class="col-lg-7">
                                <h5 class="text-primary">How to add a program?</h5>
                                <ul class="p-0 m-0">
                                    <li>On the left menu, Go to  <b>MarketingTools <span class="text-primary">&raquo;</span> Add Program</b></li>
                                    <li>Press on <b>"Add New"</b> and to create your new program</li>
                                    <li>Set your Program Name. You can choose any name you want, better to type a short name(maximum two words).</li>
                                    <li>Under <b>"Sale Settings"</b> choose your sale type, set the commission value and set to enabled</li>
                                    <li>Under <b>"Click Settings"</b> set the number of clicks and the commission per click and set to enabled</li>
                                    <li>Press on <b>"Save"</b> fo saving your program and go to <b>"Add Banner"</b> on the next step.</li>
                                </ul>
                                 <h5  class="text-primary">Do you have more stores that you want to track?</h5> 
                                 <p>You can do that with the same script! Our script can control unlimited sites/stores tracking.
                                    Just create a new program for every site and that's All you need to do.</p>
                                 <button class="btn btn-primary next-step-btn">Next</button>
                            </div>
                            <div class="col-lg-5">
                                <a href="" target="popup" onclick="window.open('<?= base_url('/assets/vertical/assets/images/guide/c_prog_1.png') ?>','popup','width=1300,height=656'); return false;" title="click here to see the full sized image">
                                <img class="img-fluid thumb" src="<?= base_url('/assets/vertical/assets/images/guide/c_prog_1.png') ?>"></a>
                            </div>
                        </div>
                    </div>
                    
                  </div>
                  <div class="step minimized">
                    <div class="step-header">
                      <div class="header">Step 2 - Add A Banner</div>
                      <div class="subheader">After you added your first program, now you will need to add a banner.</div>
                    </div>
                    <div class="step-content two bg-white">
                         <h5 class="text-primary">How to add a banner?</h5>
                         <ul class="p-0 m-0">
                            <li>On the left menu, Go to  <b>MarketingTools <span class="text-primary">&raquo;</span> Add Banner</b></li>
                            <li>Press on <b>"Add New"</b>, to create your new banner.</li>
                            <li>Choose the correct tool type for your banner.</li>
                            <li>Set your banner Name. You can choose any name you want, better to type a short name(maximum two words).</li>
                            <li>Set your target link where your users will land on.</li>
                            <li>Choose your banner category. You can leave blank.</li>
                            <li>Add a Featured Image that will be shown as your banner icon.</li>
                            <li>Add your banner image. You can upload multiple images. (Important! Banner image must be added, for the banner to work.]</li>
                            <li>You can allow "Afflow for affiliate" to access the banner or choose from the list of which affiliates will be able to use the banner and share it.</li>
                            <li>Press on <b>"Save"</b> for saving your program and go to <b>"Add Banner"</b> on the next step.</li>
                         </ul>
                         <h5  class="text-primary">Do you have more stores that you want to track?</h5> 
                         <p>You can do that with the same script! Our script can control unlimited sites/stores tracking.
                            Just create a new program for every site and that's All you need to do.</p>
                            <button class="btn btn-primary next-step-btn">Next</button>
                    </div>
                  </div>
                  <div class="step minimized">
                    <div class="step-header">
                      <div class="header">Step 3 - Integrate The Code On Your Site</div>
                      <div class="subheader">The last step is to integrate the tracking code on your site/store.</div>
                    </div>
                    <div class="step-content three bg-white">
                        <h5 class="text-primary">How to add The tracking code?</h5>
                        <ul class="p-0 m-0">
                            <li>On the left menu, Go to  <b>MarketingTools <span class="text-primary">&raquo;</span> Add banner</b></li>
                            <li>Press on <b>"Website code"</b> and a popup will be open for you.</li>
                            <li>Choose the correct tracking code for your banner action. for example, if the banner is to track sales, then choose the sale integration code and do the instructions that you see in the tracking code area</li>
                            <li>After you integrate the code in the correct place on your site/store, you can log in as an affiliate and test your integration.</li>
                        </ul>
                        <h5  class="text-primary">Do you have more stores that you want to track?</h5> 
                        <p>You can do that with the same script! Our script can control unlimited sites/stores tracking.
                            Just create a new program for every site and that's All you need to do.</p>
                        <button class="btn btn-primary close-step-btn">Finish Integration!</button>
                    </div>
                  </div>
                </div>
	</div>
</div>

<style>
    :root {
  --background-color: #FFFFFF;
  --primary-color: #E66A53;
}

*{
  box-sizing: border-box;
}

.steps {
  width: 100%;
  box-shadow: 0px 10px 15px -5px rgba(0, 0, 0, 0.3);
  background-color: #FFF;
  padding: 24px 0;
  position: relative;
  margin: auto;
}

.steps::before {
  content: '';
  position: absolute;
  top: 0;
  height: 24px;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.2);
  left: calc(50px / 2);
  z-index: 1;
}

.steps::after {
  content: '';
  position: absolute;
  height: 13px;
  width: 13px;
  background-color: var(--primary-color);
  box-shadow: 0px 0px 5px 0px var(--primary-color);
  border-radius: 15px;
  left: calc(50px / 2);
  bottom: 24px;
  transform: translateX(-45%);
  z-index: 2;
}

.step {
  padding: 0 20px 24px 50px;
  position: relative;
  transition: all 0.4s ease-in-out;
  background-color: #FFF;
}

.step::before {
  content: '';
  position: absolute;
  height: 13px;
  width: 13px;
  background-color: rgb(198, 198, 198);
  border-radius: 15px;
  left: calc(50px / 2);
  transform: translateX(-45%);
  z-index: 2;
}

.step::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 1px;
  background-color: rgb(198, 198, 198);
  left: calc(50px / 2);
  top: 0;
  z-index: 1;
}

.step.minimized {
  background-color: #FFF;
  transition: background-color 0.3s ease-in-out;
  cursor: pointer;
}

.subheader {
  user-select: none;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
}

.step-content {
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  position: relative;
}

.step.minimized > .step-content {
  height: 0px;
}

.step-content.one {
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  margin-top: 10px;
  padding-left:20px;
}

.step-content.two {
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  margin-top: 10px;
}

.step-content.three {
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  margin-top: 10px;
}


/*.next-btn {*/
/*  position: absolute;*/
/*  top: 90%;*/
/*  left: 90%;*/
/*  border: 0;*/
/*  padding: 10px 20px;*/
/*  border-radius: 4px;*/
/*  background-color: red;*/
/*  box-shadow: 0 5px 10px -3px rgba(0, 0, 0, 0.3);*/
/*  color: #FFF;*/
/*  transition: background-color 0.3s ease-in-out;*/
/*  cursor: pointer;*/
/*  transform: translate(-50%, -50%);*/
/*}*/


.next-btn {
  position: absolute;
  border: 0;
  top:95%;
  left: 5%;
  border-radius: 4px;
  background-color: red;
  box-shadow: 0 5px 10px -3px rgba(0, 0, 0, 0.3);
  color: #FFF;
  transition: background-color 0.3s ease-in-out;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.close-btn {
  position: absolute;
  top: 90%;
  left: 90%;
  border: 0;
  padding: 10px 20px;
  border-radius: 4px;
  background-color: rgb(255, 0, 255);
  box-shadow: 0 5px 10px -3px rgba(0, 0, 0, 0.3);
  color: #FFF;
  transition: background-color 0.3s ease-in-out;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

/* Irrelevant styling things */
.close-btn:hover {
  background-color: rgba(255, 0, 255, 0.6);
}

.close-btn:focus {
  outline: 0;
}

.next-btn:hover {
  background-color: rgba(255, 0, 0, 0.6);
}

.next-btn:focus {
  outline: 0;
}

.step.minimized:hover {
  background-color: rgba(0, 0, 0, 0.06);
}
</style>

<script>
    let curOpen;

$(document).ready(function() {
  curOpen = $('.step')[0];
  
  $('.next-step-btn').on('click', function() {
    let cur = $(this).closest('.step');
    let next = $(cur).next();
    $(cur).addClass('minimized');
    setTimeout(function() {
      $(next).removeClass('minimized');
      curOpen = $(next);
    }, 400);
  });
  
  $('.close-step-btn').on('click', function() {
    let cur = $(this).closest('.step');
    $(cur).addClass('minimized');
    curOpen = null;
  });
  
  $('.step .step-content').on('click' ,function(e) {
    e.stopPropagation();
  });
  
  $('.step').on('click', function() {
    if (!$(this).hasClass("minimized")) {
      curOpen = null;
      $(this).addClass('minimized');
    }
    else {
      let next = $(this);
      if (curOpen === null) {
        curOpen = next;
        $(curOpen).removeClass('minimized');
      }
      else {
        $(curOpen).addClass('minimized');
        setTimeout(function() {
          $(next).removeClass('minimized');
          curOpen = $(next);
        }, 300);
      }
    }
  });
})
</script>
