{% extends "./base.html" %}
{% load custom_tags %}
{% load static %}
{% block bodyPage %}

  <div class="">
    <div class="columns m-0">
        <div class="column is-12-mobile is-4-desktop">
          <form action="{% url 'admin_panel:customerEdit' customer.id %}" id="formcsEdit" class="has-background-white brad5" method="post">
            {% csrf_token %}
            <div class="buttons m-0 level p-2 is-hidden-tablet">
              <p class="level-item">محمد جواد فصاحت</p>
              <span id="showUserDT" class="button level-item">مشاهده مشخصات</span>
            </div>
            <div id="userDT" class="is-hidden-mobile">
              <div class="field column is-12-desktop is-12-mobile m-0">
                <label class="label">نام ونام خانوادگی</label>
                <div class="control">
                  <input disabled value="{{ customer.name_family }}" name="an_name" class="input an_name" type="text" placeholder="نام نام خانوادگی">
                </div>
              </div>
        
              <div class="field column is-12-desktop is-12-mobile m-0">
                <label class="label">آدرس</label>
                <div class="control">
                  <input disabled name="an_address" value="{{ customer.address }}" class="input an_address" type="text" placeholder="آدرس کامل">
                </div>
              </div>
        
              <div class="field column is-9-desktop is-9-mobile m-0">
                <label class="label">تلفن همراه</label>
                <div class="control">
                  {% if perms.admin_panel.ViewStore %}
                  <input disabled value="{{ customer.phone1 }}" name="phone1" id="phone-1" class="input an_phone" type="text" placeholder="تلفن 1">
                  <input disabled value="{{ customer.phone2 }}" name="phone2" id="phone-2" class="input an_phone" type="text" placeholder="تلفن 2">
                  <input disabled value="{{ customer.phone3 }}" name="phone3" id="phone-3" class="input an_phone" type="text" placeholder="تلفن 3">
                  {% else %}
                  <p class="pb-4">
                    <a href="tel:{% if customer.phone1|first in '0' %}{{ customer.phone1 }}{% else %}0{{ customer.phone1 }}{% endif %}">{{ customer.phone1 }}</a>
                  </p>
                  <p class="pb-4">
                    <a href="tel:0{% if customer.phone2|first in '0' %}{{ customer.phone2 }}{% else %}0{{ customer.phone2 }}{% endif %}">{{ customer.phone2 }}</a>
                  </p>
                  <p class="pb-4">
                    <a href="tel:0{% if customer.phone3|first in '0' %}{{ customer.phone3 }}{% else %}0{{ customer.phone3 }}{% endif %}">{{ customer.phone3 }}</a>
                  </p>
                  {% endif %}
                </div>
              </div>
            
        
              <div class="field column is-12-desktop is-12-mobile m-0">
                <label class="label">تاریخ نصب</label>
                <div class="control">
                  <input disabled name="installDate" value="{{ customer.installDate | toJalali }}" id="persianDateP" class="input installDate" type="text" placeholder="مثل: 1400/06/01">
                </div>
              </div>
      
              <div class="field column is-12-desktop is-12-mobile m-0">
                <label class="label">کدشناسایی</label>
                <div class="control">
                  <input disabled value="{{ customer.idCode }}" name="idnCode" class="input idnCode" type="text" placeholder="">
                </div>
              </div>
      
              <div class="field column is-12-desktop is-12-mobile m-0">
                {% if perms.admin_panel.DelCustomer %}
                <span class="button is-danger" id="del_customer">حذف مشتری</span>
                {% endif %}
                
                  <span class="button is-success" id="enEdit">ویرایش</span>
                  <input class="button is-danger is-hidden" id="editCs" value="ثبت" type="submit">
                
              </div>
            </div>  
          </form>
        </div>

        <div class="column is-12-mobile is-8-desktop">
          <div class="has-background-white brad5">
            <div class="tabs is-centered m-0">
              <ul>
                {% with url_name=request.resolver_match.url_name %}
                <li class="{% if url_name == 'customerHesabdari' %}is-active{% else %} {% endif %} "><a href="{% url 'admin_panel:customerHesabdari' customer.id  %}">اقدامات</a></li>
                <li class="{% if url_name == 'customerHesabdari' %}is-active{% else %} {% endif %} "><a href="{% url 'admin_panel:customerHesabdari' customer.id  %}">حسابداری</a></li>
                <li id="newFactorOpen" class="{% if url_name == 'customer' %}is-active{% else %} {% endif %} "><a href="{% url 'admin_panel:customerNew' customer.id  %}">ایجاد فاکتور</a></li>
                <li id="FactorHaOpen" class="{% if url_name == 'customerFactors' %}is-active{% else %} {% endif %} "><a href="{% url 'admin_panel:customerFactors' customer.id  %}">فاکتورها </a></li>
                {% endwith %}

              </ul>
            </div>

            {% block BodyCustomer1 %}

            {% endblock %}
        
          </div>
        </div>


        
    </div>
  </div>

  {% block BodyCustomer2 %}

  {% endblock %}


{% endblock %}
{% block jsEnd %}
<script>
  
  var orderList = [];
  var all_products = 'null'
  $.getJSON('{% url 'admin_panel:productsJson' %}', function(data) {
    jsonParseData = JSON.parse(data);
    console.log(jsonParseData)
    mapJson = jsonParseData.map(function(data){
      var tmp = data['fields']
      tmp['id']=data['pk']
      return tmp
    });
    all_products = mapJson;
  }); 

  $("#submitFactor").click(function(){
    $("#disablePage").addClass("is-active");
    $("#prdsList").val(JSON.stringify(orderList));
    $("#sarResidDate").val( $("#sarResidDateSL").val() )
    $("#payType").val( $("#FpayType").val() )
    $("#FactorDate").val( $("#FpayDate").val() )
    $("#FactorDesc").val( $("#Fdesc").val() )
    $("#FactorPardakhti").val( $("#pardakhtiVal").val() )
    $("#subFactor").submit();
  });
  $("#categoryS").change(function(){
    var cat_id = $(this).val();
    $("#priceEach").val('');
    $("#priceKol").val('');
    $("#num_prd").val('');
    $("#mojodi").val('');
    if(cat_id !='ojrat'){
      $(".ojrat").addClass("is-hidden");
      $("#productFeilds").removeClass("is-hidden");
      filterPrd = all_products.filter(function(data){
        return data['ProductCategory'] == cat_id
      });
      $("#productS").html("<option></option>");
      filterPrd.forEach(element => {
        $("#productS").append("<option value='"+element.id+"'>"+element['product_name']+"</option>")
      });
    } else {
      //if Ojrat
      $(".ojrat").removeClass("is-hidden");
      $("#add_to_list").addClass('is-hidden');
      $("#productFeilds").addClass("is-hidden");
    }
  });

  $("#productS").change(function(){
    $("#priceEach").val('');
    $("#priceKol").val('');
    $("#num_prd").val('');
    $("#mojodi").val('');
    var prd_id = $(this).val();
    //check Mojodi
    $.getJSON('/panel/productMojodi/'+prd_id, function(data) {
      $("#mojodi").val(data);
    });

    sl_prd = filterPrd.find(function(el){
      return el.id == prd_id;
    });
    $("#priceEach").val(sl_prd.product_price)
  });

  $("#num_prd").on('keyup change',function(){
    var num_prd = parseInt($("#num_prd").val());
    var mojodi = parseInt($("#mojodi").val());
    if(num_prd>=1 && mojodi>=num_prd){
      $("#priceKol").val(parseInt(sl_prd.product_price) * parseInt($("#num_prd").val()));
      $("#add_to_list").removeClass("is-hidden");
      $("#msg_mojodi").addClass("is-hidden");
    }else{
      $("#priceKol").val('');
      $("#add_to_list").addClass("is-hidden");
      $("#msg_mojodi").removeClass("is-hidden");
    }
  });

  var buildOrderList = function () {
    sum_all=0;
    $("#listPrds").html('');
    orderList.forEach(element => {
      if(element.garanty_Esh == " " || element.garanty_Esh == "" || element.garanty_Esh == null){
        sum_all+=parseInt(element.priceKol);
      }
      var trStr = `
      <tr class="IteamPrd">
          <td >
              <span class="product_name">`+element.product_name+`</span>
              <span class="product_id is-hidden">`+element.prd_id+`</span>
          </td>
          <td class="product_price">`+element.price+`</td>
          <td class="product_price">`+element.priceKol+`</td>
          <td class="product_count" >`+element.prd_count+`</td>
          <td class="product_count" >`+element.garanty_Esh+`</td>
          
            <td>

              <span class="delet_prd" del_prd_id='`+element.prd_id+`'><img  style="width: 20px; height: 20px;" src="{% static 'admin_panel/icons/delet.png' %}"></span>

            </td>          
      </tr>`
      $("#listPrds").append(trStr);
    });
    $('#sum_all').val(sum_all);
  }
  $("#add_ojrat").click(function(){
    $("#addNewIteam").removeClass("is-active");
    orderList.push({'prd_id': 9999, 'prd_count': 1,
     'priceKol':  parseInt($("#priceKol").val() ), 'product_name': $("#ojratDS").val() , 'price': parseInt($("#priceKol").val() ),
    'garanty_Esh': ''
    });

    buildOrderList();

  });

  $("#add_to_list").click(function(){
    $("#addNewIteam").removeClass("is-active");
    orderList.push({'prd_id': sl_prd.id, 'prd_count': parseInt($("#num_prd").val()),
     'priceKol':  parseInt($("#priceKol").val() ), 'product_name': sl_prd.product_name, 'price':sl_prd.product_price,
    'garanty_Esh': $("#GrantyEsh").val()
    });
    
    //console.log(orderList)
    $("#priceEach").val('');
    $("#priceKol").val('');
    $("#num_prd").val('');
    $("#productS").val('');
    $("#categoryS").val('');
    $("#GrantyEsh").val('');

    buildOrderList();

    
  });

  $("#del_customer").click(function(){
    if(confirm("با حذف مشتری، تمام سوابق، فاکتورها و اطلاعات از سیستم حذف میشود، مطمئن هستید؟")){
      window.location.href = "/panel/customer/{{ customer.id }}/del";
    }
  });

  $(".closeNewIteam").click(function(){
    $("#addNewIteam").removeClass("is-active");
  });
  $("#btnAdd09").click(function(){
    $("#addNewIteam").addClass("is-active");
  });

  $("#FpayType").change(function(){
    var FpayType=$(this).val();
    if(FpayType == 'nesiye' || FpayType == 'check'){
      $("#sarresidFild01").removeClass('is-hidden');
      $("#pardakhti").removeClass('is-hidden');
    }else{
      $("#sarresidFild01").addClass('is-hidden');
      $("#pardakhti").addClass('is-hidden');
      $("#pardakhtiVal").val('');
    }
  });

  $("#sarResidDateSL").pDatepicker({
    initialValue: false,
    initialValueType: 'en',
    format: 'YYYY/MM/DD',
    autoClose: true,
    calendar:{
        persian: {
            locale: 'fa'
        }
    }
  });

  $("#FpayDate").pDatepicker({
    initialValue: true,
    initialValueType: 'en',
    format: 'YYYY/MM/DD',
    autoClose: true,
    calendar:{
        persian: {
            locale: 'fa'
        }
    }
  });

  $(document).on('click', '.delet_prd', function() {
    var d_p_id = parseInt( $(this).attr('del_prd_id') );
    orderList = orderList.filter(function(element){
      if(element.prd_id != d_p_id ){
        return element;
      }
    });
    $("#listPrds").html('');
    sum_all=0;
    orderList.forEach(element => {
      sum_all+=parseInt(element.priceKol);
      var trStr = `
      <tr class="IteamPrd">
          <td >
              <span class="product_name">`+element.product_name+`</span>
              <span class="product_id is-hidden">`+element.prd_id+`</span>
          </td>
          <td class="product_price">`+element.price+`</td>
          <td class="product_price">`+element.priceKol+`</td>
          <td class="product_count" >`+element.prd_count+`</td>
          <td class="product_count" >`+element.garanty_Esh+`</td>
          
            <td>

              <span class="delet_prd" del_prd_id=`+element.prd_id+`><img style="width: 20px; height: 20px;" src="{% static 'admin_panel/icons/delet.png' %}"></span>

            </td>          
      </tr>`
      $("#listPrds").append(trStr);
    });
    $('#sum_all').val(sum_all);


  });
  

$(document).ready(function() {

    var test = 0

    $("#enEdit").click(function(){
      $("#formcsEdit").find("input").prop('disabled', false);
      $("#enEdit").addClass("is-hidden");
      $("#editCs").removeClass("is-hidden");
    });

    $("#showUserDT").click(function(){
        if( $(this).html()=='مشاهده مشخصات' ){
          $(this).html('مخفی کردن');
          $("#userDT").removeClass("is-hidden-mobile");
        }else{
          $(this).html('مشاهده مشخصات');
          $("#userDT").addClass("is-hidden-mobile");
        }
        
    });
    $(".closeSearch").click(function(){
      $(".SearchBox").removeClass("is-active")
    });
    $(".closeAddUser").click(function(){
        $(".addNewUser").removeClass("is-active");
        $(".addNewUser").find('.an_name').val('');
        $(".addNewUser").find('.an_address').val('');
        $(".addNewUser").find('#phone-1').val('');
        $(".addNewUser").find('#phone-2').val('');
        $(".addNewUser").find('#phone-3').val('');
        $(".addNewUser").find('.installDate').val('');
    });
    
    $(".openRow").click(function(){
        var id = $(this).parent().parent().find('.fid').val().trim();
        var name = $(this).parent().parent().find('.name').text().trim();
        var lastview = $(this).parent().parent().find('.lastview').text().trim();
        var installDate = $(this).parent().parent().find('.installDate').text().trim();
        var mobile_1 = $(this).parent().parent().find('.mobile_1').text().trim();
        var mobile_2 = $(this).parent().parent().find('.mobile_2').text().trim();
        var mobile_3 = $(this).parent().parent().find('.mobile_3').text().trim();
        var idCode = $(this).parent().parent().find('.mobile_3').text().trim();
        
        var address = $(this).parent().parent().find('.address').text().trim();
        //alert(id)
        $(".mEdit1").find('.fid').val(id);
        $(".mEdit1").find('.uv_name').val(name);
        $(".mEdit1").find('.uv_installDate').val(installDate);
        $(".mEdit1").find('#phone-1').val(mobile_1);
        $(".mEdit1").find('#phone-2').val(mobile_2);
        $(".mEdit1").find('#phone-3').val(mobile_3);
        $(".mEdit1").find('.uv_address').val(address);

        //$("#bedehiStatus").val('وضعیت')

        $(".mEdit1").addClass("is-active")
    });
    $("#addNewUser").click(function(){
      $(".addNewUser").addClass("is-active")
    });
    $("#openSearchBox").click(function(){
      $(".SearchBox").addClass("is-active")
    });
    $("#bedehiCN01").click(function(){
      var factorId = $(this).parent().parent().find(".fid").val();
      if ($("#bedehiStatus").val() == "tasfiye"){
        alert("send To server to tasfiye");
        $("tbody").find('.fidv-'+factorId).parent().parent().remove();
        $(".mEdit1").removeClass("is-active");
      }
    });
} );
  </script>
{% endblock %}