{% 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 %}
                {% if perms.admin_panel.ViewCustomer %}
                  <span class="button is-success" id="enEdit">ویرایش</span>
                  <input class="button is-danger is-hidden" id="editCs" value="ثبت" type="submit">
                {% endif %}
              </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" class="is-active"><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	">ایجاد فاکتور جدید</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">

                    <div class="select" style="width: 100%;">
                      <select id="FactorType" id="FactorType" required style="width: 100%;">
                        <option></option>
                        <option value="Khadamat">خدمات</option>
                        <option value="Nasb">نصب</option>
                      </select>
                    </div>

                  </div>
                </div>

                <div class="field column is-4-desktop is-12-mobile m-0">
                  <label class="label">تاریخ فاکتور</label>
                  <div class="control">
                    <input disabled id="FpayDate" value=""  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">
                      
                    </tbody>
                  </table>
                </div>


                
                <div class="field column is-12-desktop is-12-mobile m-0">
                  <span class="button is-danger" id="btnAdd09">+</span>
                </div>

                <div class="field column is-4-desktop is-12-mobile m-0">
                  <label class="label">جمع فاکتور</label>
                  <div class="control">
                    <input disabled name="price" id="sum_all" class="input" type="text" placeholder="525.000">
                  </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" 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 is-hidden" id="sarresidFild01">
                  <label class="label">سررسید</label>
                  <div class="control">
                    <input name="sarResidDateSL" id="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="بابت؟"></textarea>                  </div>
                </div>

                <div class="field column is-12-desktop is-12-mobile m-0">
                  <span id="submitFactor" class="button is-danger" id="btnAdd09">ثبت فاکتور</span>
                </div>

                <form id="subFactor" class="is-hidden" method="post" action="{% url 'admin_panel:newFactor' customer.id %}">
                  {% csrf_token %}
                  <input required id="prdsList" type="text" name="prdsList">
                  <input id="sarResidDate" type="text" name="sarResidDate">
                  <input required id="payType" type="text" name="payType">
                  <input required id="FactorDate" type="text" name="FactorDate">
                  <input id="FactorDesc" type="text" name="FactorDesc">
                  <input type="submit">
                </form>

              </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 %}
                <option value="ojrat">اجرت</option>
              </select>
            </div>

          </div>
        </div>

        <div id="productFeilds">

          <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">
              <div class="select" style="width: 100%;">
                <select name="GrantyEsh" id="GrantyEsh" style="width: 100%;">
                  <option value=" ">هیچ کدام</option>
                  <option value="گارانتی">گارانتی</option>
                  <option value="اشانتیون">اشانتیون</option>
                </select>
              </div>
            </div>
          </div>
        </div>

        <div class="field column is-12-desktop is-12-mobile m-0 ojrat is-hidden">
          <label class="label">شرح و توضیحات</label>
          <div class="control">
            <input name="ojratDS"  id="ojratDS" 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="number" 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-danger is-hidden">
              افزودن و بستن
            </span>
            <span id="add_to_listNew" class="button is-success is-hidden">
              افزودن و جدید
            </span>
            <span id="add_ojrat" class="button is-fullwidth is-success ojrat 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'
  $.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() )
    $("#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');
    }else{
      $("#sarresidFild01").addClass('is-hidden');
    }
  });

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