{% 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>
                <li ><a>وضعیت</a></li>
                <li id="newFactorOpen"><a href="{% url 'admin_panel:customer' customer.id  %}">ایجاد فاکتور</a></li>
                <li id="FactorHaOpen"><a href="{% url 'admin_panel:customerFactors' customer.id  %}">فاکتورها </a></li>
              </ul>
            </div>

            <div id="newFactor" class="column is-12-mobile is-12-desktop ">
              <h1 class="has-text-centered has-text-weight-bold	">شماره فاکتور {{ factorO.id }}</h1>
              <div class="columns is-multiline is-mobile">

                <div class="field column is-4-desktop is-12-mobile m-0">
                  <label class="label">نام شخص</label>
                  <div class="control">
                    <input disabled value="{{ customer.name_family }}" name="installDate"  id="persianDateP" class="input" type="text" placeholder="مثل: 1400/06/01">
                  </div>
                </div>

                <div class="field column is-4-desktop is-12-mobile m-0">
                  <label class="label">تاریخ فاکتور</label>
                  <div class="control">
                    <input id="FpayDate" value="{{ factorO.create_date | toJalali }}"  id="persianDateP" class="input" type="text" placeholder="مثل: 1400/06/01">
                  </div>
                </div>


                <div class="table-container column is-12-desktop is-12-mobile m-0">
                  <table class="table m-auto has-text-centered table is-bordered is-striped is-narrow is-fullwidth mojodiTB ">
                    <thead>
                      <tr>
                        <th style="min-width: 300px;">نام محصول</th>
                        <th style="min-width: 100px;">قیمت واحد</th>
                        <th style="min-width: 100px;">قیمت کل</th>
                        <th>تعداد</th>
                        <th>بابت</th>
                        <th  style="min-width: 50px;">عملیات</th>
                      </tr>
                    </thead>
                    <tfoot>
                      <tr>
                        <th>نام محصول</th>
                        <th>قیمت واحد</th>
                        <th>قیمت کل</th>
                        <th>تعداد</th>
                        <th>بابت</th>
                        <th>عملیات</th>
                      </tr>
                    </tfoot>
                    <tbody id="listPrds">
                      {% for iteam in fiteam %}
                      <tr class="IteamPrd">
                        <td>
                            <span class="product_name">{{ iteam.product_name  }}</span>
                            <span class="product_id is-hidden"></span>
                        </td>
                        <td class="product_price">{{ iteam.product.product_price }}</td>
                        <td class="product_price">{{ iteam.amount }}</td>
                        <td class="product_count" >{{ iteam.num }}</td>
                        <td class="product_count" >{{ iteam.garantyEsh }}</td>
                        
                          <td>
              
                            <span>*</span>
              
                          </td>          
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>

                <div class="field column is-4-desktop is-12-mobile m-0">
                  <label class="label">جمع فاکتور</label>
                  <div class="control">
                    <input value="{{ factorO.amount }}" disabled name="price" id="sum_all" class="input" type="text" placeholder="">
                  </div>
                </div>

                <div class="field column is-4-desktop is-12-mobile m-0">
                  <label class="label">نحوه پرداخت</label>
                  <div class="control">

                    <div class="select" style="width: 100%;">
                      <select id="FpayType" required style="width: 100%;">
                        <option></option>
                        <option value="naghd">نقد</option>
                        <option value="cardToCard">کارت به کارت</option>
                        <option value="kartKhan">کارت خوان</option>
                        <option value="nesiye">نیسیه</option>
                        <option value="check">چک</option>
                      </select>
                    </div>

                  </div>
                </div>

                <div class="field column is-4-desktop is-12-mobile m-0" id="sarresidFild01">
                  <label class="label">سررسید</label>
                  <div class="control">
                    <input value="{% if factorO.deadline %} {{ factorO.deadline | toJalali }} {% endif %}" name="sarResidDateSL" 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">
                    <textarea id="Fdesc" class="textarea" placeholder="بابت؟">
                      {{ factorO.desc }}
                    </textarea></div>
                </div>

                <div class="field column is-12-desktop is-12-mobile m-0">
                  {% if perms.admin_panel.DelFactor %}
                  <span class="button is-danger" id="btnDelfactor09">حذف فاکتور و اصلاح انبار</span>
                  {% endif %}
                </div>


              </div>
            </div>
            <div id="bazdidha" class="column is-12-mobile is-12-desktop is-hidden">

            </div>
            <div id="statusha" class="column is-12-mobile is-12-desktop is-hidden">
              <div class="columns">
                <div class="column is-12-mobile is-4-desktop">
                  <p>بدهی</p>
                  <p>3.589.000</p>
                </div> 
                
                <div class="column is-12-mobile is-4-desktop">
                  <p>آخرین بازدید</p>
                  <p>1400/06/04</p>
                </div> 

                <div class="column is-12-mobile is-4-desktop">
                  <p>بدهی</p>
                  <p>3.589.000</p>
                </div>
              </div>
            </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>

  <div class="modal" id="disablePage">
    <div class="modal-background"></div>
  </div>


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

  $("#submitFactor").click(function(){
    $("#disablePage").addClass("is-active");
    $("#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 });
    
    $("#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");
  });
  
  $("#btnDelfactor09").click(function(){
    var cDelok = confirm("باحذف فاکتور موجودی انبار نیز اصلاح میشود و تغییر می کند آیا مطمئن هستید؟")
    if(cDelok){
      window.location.href = "/panel/customer/{{ customer.id }}/factor/{{ factorO.id }}/del";
    }
  });



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