{% include 'header.twig' %}

<style>


.main-panel .index-announcement {
    float: left;
    width: 100%;
    border-radius: 10px;
}
.main-panel .index-announcement .index-announcement-title {
    float: left;
    width: 100%;
    margin-top: 0;
    font-weight: 600;
    color: #000000;
    margin-bottom: 1px;
    background: #ffffff;
    padding: 20px 30px;
    border-radius: 10px 10px 0 0;
}
.main-panel .index-announcement .index-announcement-bell {
    float: left;
    width: 50%;
    padding-right: 43px;
    text-align: right;
    margin-top: -20px;
    }
    
.main-panel .index-announcement .index-announcement-content {
    float: left;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 470px;
    padding: 0 30px;
    background: #ffffff;
    border-radius: 0 0 10px 10px;
}
.main-panel .index-announcement ul {
    float: left;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 0;
    border-left: 4px solid #eff0ff;
    padding-left: 30px;
}
.main-panel .index-announcement ul li {
    list-style: none;
    float: left;
    width: 100%;
    position: relative;
    margin-bottom: 45px;
    box-shadow: 1px 5px 19px 0 rgb(0 0 0 / 22%);
    padding: 20px;
    border-radius: 0 0 6px 6px;
}
.main-panel .index-announcement ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
}
.main-panel .index-announcement ul li .icon {
    position: absolute;
    left: -52px;
    top: 48px;
    width: 40px;
    height: 40px;
    padding: 7px 0;
    text-align: center;
    background: #eff0ff;
    font-size: 16px;
    border-radius: 3px;
    box-shadow: 1px 5px 19px 0 rgba(255,255,255,0.05);
}
.main-panel .index-announcement ul li .time {
    float: left;
    color: #8c909a;
    border-radius: 3px;
    margin-top: 8px;
}
.main-panel .index-announcement ul li .time i {
    margin-right: 5px;
}
.main-panel .index-announcement ul li .t-instagram {
    color: #f40083;
    border-color: #f40083;
}
.main-panel .index-announcement ul li .service {
    float: left;
    width: 100%;
    color: #48494c;
    font-weight: 600;
    margin-top: 10px;
}
.main-panel .index-announcement ul li .desc {
    float: left;
    width: 100%;
    color: #8c909a;
    margin-top: 5px;
}
.main-panel .index-announcement ul li .title {
    float: right;
    color: #8c909a;
    padding: 5px 10px;
    border: 1px solid #8c909a;
    border-radius: 3px;
    width: 90px;
    text-align: center;
    position: relative;
}
.main-panel .index-announcement ul li .t-instagram {
    color: #f40083;
    border-color: #f40083;
}
.main-panel .index-announcement ul li .icon img {
    max-width: 60%;
}
.w .index-announcement-title {
    float: left;
    width: 100%;
    margin-top: 0px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 12px;
    background: #ffffff;
    padding: 20px 30px;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid #f33694;
}


</style>
  
  
  
  
  
                        



      <div class="col-sm-8">
          <div class="row">
            <div class="col-sm-12">
              <div class="media">

  


    {% if error %}
      <div class="alert alert-dismissible alert-danger">
        {{ errorText }}
      </div>
    {% endif %}

    {% if data["order"]["success"] == 1 %}
      <div class="alert alert-dismissible alert-success">
          <strong> {{ lang["neworder.success.id"] }}: </strong> {{ data['order']['id'] }} <br>
          <strong> {{ lang["neworder.success.service"] }}: </strong> {{ data['order']['service'] }} <br>
          <strong> {{ lang["neworder.success.link"] }}: </strong> {{ data['order']['link'] }} <br>
          <strong> {{ lang["neworder.success.quantity"] }}: </strong> {{ data['order']['quantity'] }} <br>
          <strong> {{ lang["neworder.success.link"] }}: </strong> {{ data['order']['price'] }} <br>
          <strong> {{ lang["neworder.success.balance"] }}: </strong>{{ data['order']['balance'] }} <br>
      </div>
    {% endif %}
    {% if data["order"]["success"] == 2 %}
      <div class="alert alert-dismissible alert-success">
         <strong> {{ lang["neworder.success.id"] }}: </strong> {{ data['order']['id'] }} <br>
         <strong> {{ lang["neworder.success.service"] }}: </strong> {{ data['order']['service'] }} <br>
         <strong> {{ lang["neworder.success.username"] }}: </strong> {{ data['order']['link'] }} <br>
         <strong> {{ lang["neworder.success.quantity"] }}: </strong> {{ data['order']['min'] }} - {{ data['order']['max'] }} <br>
         <strong> {{ lang["neworder.success.posts"] }}: </strong> {{ data['order']['posts'] }} <br>
         <strong> {{ lang["neworder.success.delay"] }}: </strong>{{ data['order']['delay'] }} <br>
       </div>
    {% endif %}

      <div class="well">

         <form method="post" action="">
<div class="component_button_forms">
            <div class="form-group">
              <label for="orderform-category" class="control-label">{{ lang["neworder.category"] }}</label>
              <select class="form-control" id="neworder_category" name="categories" data-select="true" data-select-search="true" data-select-search-placeholder="Search" data-select-container="#select-category-container" tabindex="-1" aria-hidden="true">
{{ category_html_simplify }}
</select>
</div>

             
            </div>
            <div class="form-group">
              <label for="orderform-service" class="control-label">{{ lang["neworder.service"] }}</label>
              <select class="form-control" id="neworder_services" name="services" data-select="true" data-select-search="true" data-select-search-placeholder="Search" data-select-container="#select-service-container" tabindex="-1" aria-hidden="true"><option value="1">No services found in this category</option>
</select>
            </div>





            <div id="neworder_fields"></div>


<div class="form-group" id="charge_div">
              <label for="charge" class="control-label">{{ lang["neworder.charge"] }}</label>
              <input type="text" class="form-control" id="charge" readonly>
            </div>




          
          <button type="submit" class="btn btn-primary">{{ lang["neworder.button"] }}</button>
</form>
      </div>
    </div>
  </div>
</div>
</div></div>

    
        {% if contentText %}
<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <div class="well ">
{{ contentText }}
</div>
</div>
</div></div>
{% endif %}
<script>
$(document).ready(function(){

  /* Katogeriye ait servisleri Ã§ek */
  category_detail();
  $("#neworder_category").change(function(){
    category_detail();
  });
  /* Katogeriye ait servisleri Ã§ek */
  /* Servise ait verileri Ã§ek */
  $("#neworder_services").change(function(){
    service_detail();
  });
  /* Servise ait verileri Ã§ek */
  /* SipariÅŸ miktarÄ± deÄŸiÅŸince fiyat hesapla */
  $(document).on('keyup', '#order_quantity', function() {
    var service   = $("#neworder_services").val();
    var quantity  = $("#neworder_quantity").val();
    var runs      = $("#dripfeed-runs").val();
      if( $("#dripfeedcheckbox").prop('checked') ){
        var dripfeed  = "var";
      }else{
        var dripfeed  = "bos";
      }
    $.post('ajax_data',{action:'service_price',service:service,quantity:quantity,dripfeed:dripfeed,runs:runs}, function(data){
        $("#charge").val(data.price);
        $("#dripfeed-totalquantity").val(data.totalQuantity);
    }, 'json');
  });
  $(document).on('keyup', '#dripfeed-runs', function() {
    var service   = $("#neworder_services").val();
    var quantity  = $("#neworder_quantity").val();
    var runs      = $("#dripfeed-runs").val();
      if( $("#dripfeedcheckbox").prop('checked') ){
        var dripfeed  = "var";
      }else{
        var dripfeed  = "bos";
      }
    $.post('ajax_data',{action:'service_price',service:service,quantity:quantity,dripfeed:dripfeed,runs:runs}, function(data){
        $("#charge").val(data.price);
        $("#dripfeed-totalquantity").val(data.totalQuantity);
    }, 'json');
  });
  $(document).on('keyup', '#neworder_comment', function() {
    comment_charge();
  });
  /* SipariÅŸ miktarÄ± deÄŸiÅŸince fiyat hesapla */
  /* Dripfeed deÄŸiÅŸtir */
  $(document).on('change', '#dripfeedcheckbox', function() {
    var dripfeed = $(this).prop('checked');
    if( dripfeed ){
      $("#dripfeed-options").removeClass();
      dripfeed_charge();
    }else{
      $("#dripfeed-options").addClass('hidden');
      dripfeed_charge();
    }
  });
  /* Dripfeed deÄŸiÅŸtir */
});

function category_detail(){
  var category_now = $("#neworder_category").val();
  $.post('ajax_data',{action:'services_list',category:category_now}, function(data){
      $("#neworder_services").html(data.services);
      service_detail();
  }, 'json');
}

function service_detail(){
  var service_now = $("#neworder_services").val();
  $.post('ajax_data',{action:'service_detail',service:service_now}, function(data){
      if( data.empty == 1 ){
        $("#charge_div").hide();
      }else{
        $("#charge_div").show();
        $("#neworder_fields").html(data.details);
        $("#charge").val(data.price);
      }
      $(".datetime").datepicker({
         format: "dd/mm/yyyy",
         language: "tr",
         startDate: new Date(),
       }).on('change', function(ev){
         $(".datetime").datepicker('hide');
       });
      $("#clearExpiry").click(function(){
           $("#expiryDate").val('');
       });
       var dripfeed = $("#dripfeedcheckbox").prop('checked');
       if( dripfeed ){
         $("#dripfeed-options").removeClass();
       }
       comment_charge();
        if( $("#dripfeedcheckbox").prop('checked') ){
          dripfeed_charge();
        }
          if( data.sub ){
            $("#charge_div").hide();
          }else{
            $("#charge_div").show();
          }
  }, 'json');
}

function comment_charge(){
  var service   = $("#neworder_services").val();
  var comments  = $("#neworder_comment").val();
    if( comments ){
      $.post('ajax_data',{action:'service_price',service:service,comments:comments}, function(data){
          $("#neworder_quantity").val(data.commentsCount);
          $("#charge").val(data.price);
      }, 'json');
    }
}

function dripfeed_charge(){
  var service     = $("#neworder_services").val();
  var quantity    = $("#neworder_quantity").val();
  var runs        = $("#dripfeed-runs").val();
    if( $("#dripfeedcheckbox").prop('checked') ){
      var dripfeed  = "var";
    }else{
      var dripfeed  = "bos";
    }
  $.post('ajax_data',{action:'service_detail',service:service,quantity:quantity,dripfeed:dripfeed,runs:runs}, function(data){
      $("#charge").val(data.price);
  }, 'json');
}

</script>
{% include 'footer.twig' %}
