{% 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-12-desktop is-12-mobile m-0">
                <label class="label">تلفن همراه</label>
                <div class="control">
                  <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">
                </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">
                  <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 ><a>وضعیت</a></li>
                <li id="newFactorOpen" class="{% if url_name == 'customer' %}is-active{% else %} {% endif %} "><a href="{% url 'admin_panel:customer' 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>

            <div id="factorha" class="column is-12-mobile is-12-desktop">
              <span class="button mb-3 is-info is-hidden">ایجاد فاکتور</span>

              {% for factor in factorha %}
              <a href="{% url 'admin_panel:customerFactor' customer.id factor.id %}">
              <div class="columns m-0 mb-4 is-multiline is-mobile has-text-centered {% if factor.pay_status %}{{ factor.pay_status }}{% endif %}">

                <div class="column is-4-mobile is-4-desktop">
                  {{ factor.create_date | toJalali }}
                </div>
                <div class="column is-4-mobile is-4-desktop">
                  {{ factor.user.first_name }} {{ factor.user.last_name }}
                </div>
                <div class="column is-4-mobile is-4-desktop">
                  {{ factor.amount }}
                </div>
              </div>
              </a>
              {% endfor %}

            </div>
        
          </div>
        </div>


        
    </div>
  </div>

  <div id="addNewIteam" class="modal ">
    <div class="modal-background closeNewIteam"></div>
    <div class="modal-content">
      <div class="">
        <div class="field column is-12-desktop is-12-mobile m-0">
          <label class="label">دسته محصول</label>
          <div class="control">

            <div class="select" style="width: 100%;">
              <select id="categoryS" style="width: 100%;">
                <option></option>
                {% for cat in categorys %}
                <option value="{{ cat.id }}">{{ cat.category_name }}</option>
                {% endfor %}
              </select>
            </div>

          </div>
        </div>

        <div class="field column is-12-desktop is-12-mobile m-0">
          <label class="label">نوع محصول</label>
          <div class="control">

            <div class="select" style="width: 100%;">
              <select id="productS" style="width: 100%;">
                <option></option>
              </select>
            </div>

          </div>
        </div>

        <div class="field column is-12-desktop is-12-mobile m-0">
          <label class="label">موجودی فعلی انبار</label>
          <div class="control">
            <input disabled  id="mojodi" class="input" type="number" placeholder="لطفا صبرکنید">
          </div>
        </div>

        <div class="field column is-12-desktop is-12-mobile m-0">
          <label class="label">تعداد</label>
          <div class="control">
            <input name=""  id="num_prd" class="input" type="number" placeholder="">
          </div>
        </div>

        <div class="field column is-12-desktop is-12-mobile m-0">
          <label class="label">قیمت هر عدد</label>
          <div class="control">
            <input name=""  id="priceEach" class="input" 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 name=""  id="priceKol" class="input" type="text" placeholder="">
          </div>
        </div>

        <div class="field column is-12-desktop is-12-mobile m-0">
          <p class="control">
            <span id="add_to_list" class="button is-fullwidth is-success is-hidden">
              افزودن
            </span>
            <span id="msg_mojodi" class="is-hidden">
              تعداد یا موجودی نامعتبر است
            </span>
          </p>
        </div>
      </div>
    </div>
    <button class="modal-close is-large closeNewIteam" aria-label="close"></button>
  </div>



{% endblock %}
{% block jsEnd %}
<script>
  var orderList = [];
  var all_products = 'null'

  $("#submitFactor").click(function(){
    $("#prdsList").val(JSON.stringify(orderList));
    $("#sarresid").val( $("#FpayTime").val() )
    $("#payType").val( $("#FpayType").val() )
    $("#FactorDate").val( $("#FpayDate").val() )
    $("#FactorDesc").val( $("#Fdesc").val() )
    $("#subFactor").submit();
  });
  $("#categoryS").change(function(){
    var cat_id = $(this).val();
    $("#priceEach").val('');
    $("#priceKol").val('');
    $("#num_prd").val('');
    $("#mojodi").val('');
    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>")
    });
  });

  $("#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");
    }
  });

  $("#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 });
    
    console.log(orderList)
    $("#priceEach").val('');
    $("#priceKol").val('');
    $("#num_prd").val('');
    $("#productS").val('');
    $("#categoryS").val('');
    sum_all=0;
    $("#listPrds").html('');
    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>

              <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);
    
  });

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


  $("#newFactorOpen").click(function(){
    $("#FactorHaOpen").removeClass('is-active');
    $(this).addClass('is-active');
    $("#newFactor").removeClass("is-hidden");
    $("#factorha").addClass("is-hidden");
  });

  $("#FactorHaOpen").click(function(){
    $("#newFactorOpen").removeClass('is-active');
    $(this).addClass('is-active');
    $("#newFactor").addClass("is-hidden");
    $("#factorha").removeClass("is-hidden");
  });

  $(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>

              <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 %}