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

  {% if messages %}
  <div class="columns m-0">
    <div class="column is-12 px-2 pt-3 pb-0">
      {% for message in messages %}
        <div class="notification {% if message.tags == 'error' %}is-danger{% elif message.tags == 'success' %}is-success{% else %}is-info{% endif %} is-light mb-2">
          <button class="delete close-notification" type="button"></button>
          <strong>{{ message }}</strong>
        </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}
  <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">
                {{ customer.name_family }}
              </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 required 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>
        
              {% include "./_customer_phones.html" with phones_editable=1 %}
            
        
              <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 ss02 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 ss02 " 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 disabled name="notes" class="textarea ss02 an_notes" rows="4" placeholder="یادداشت آزاد">{{ customer.notes }}</textarea>
                </div>
              </div>

              <div class="field column is-12-desktop is-12-mobile m-0">
                <label class="label">لغو بازدید</label>
                <div class="control">
                  <select name="laghv_bazdid" style="width: 100%" class="select" id="LaghvBazdid">
                      <option value="false">خیر</option>
                      <option value="true">بله</option>
                  </select>
                </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 == 'customerAction' %}is-active{% else %} {% endif %} "><a href="{% url 'admin_panel:customerAction' customer.id  %}">اقدامات</a></li>
                    <li class="{% if url_name == 'customerNazar' %}is-active{% else %} {% endif %} "><a href="{% url 'admin_panel:customerNazar' customer.id  %}">نظرسنجی</a></li>
                <li class="{% if url_name == 'customerHesabdari' %}is-active{% else %} {% endif %} "><a href="{% url 'admin_panel:customerHesabdari' customer.id  %}">حسابداری</a></li>
                {% if perms.admin_panel.DelCustomer %}<li class="{% if url_name == 'customerSarresidh' %}is-active{% else %} {% endif %} "><a href="{% url 'admin_panel:customerSarresidh' customer.id  %}">چک و نسیه</a></li>{%  endif %}
                <li id="newFactorOpen" class="{% if url_name == 'customerNew' %}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>
                <li class=""><a href="{% url 'admin_panel:customerAction' customer.id  %}">بازاریابی</a></li>

                {% endwith %}

              </ul>
            </div>

            {% block BodyCustomer1 %}

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


        
    </div>
  </div>

  {% block BodyCustomer2 %}

  {% endblock %}


{% endblock %}
{% block jsEnd %}
<script>

    {% if customer.laghv_bazdid %}
        $("#LaghvBazdid").val('true');
    {% else %}
        $("#LaghvBazdid").val('false');
    {% endif %}
  
  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;
  });

  //مبالغ پرداختی
  let paylist = {
  }

  $(".getPvalue").on("keyup change", function(e) {

    if($(this).val() != '' && $(this).val() != ' '){
      paylist[$(this).attr("name")] = $(this).val();
    }else{
      paylist[$(this).attr("name")] = null
    }
    

    if(["l_checkPrice", "l_nesiye"].includes( $(this).attr("name") ) && $(this).val()>=1){

      $("."+$(this).attr("name")+"_dateTime").removeClass("is-hidden");


    }else{
      $("."+$(this).attr("name")+"_dateTime").addClass("is-hidden");

    }

  });
  //پایان مبالغ پرداختی



//دکمه ثبت فاکتور
  $("#submitFactor").click(function(){

    // اگر دکمه قبلاً غیرفعال شده باشد، دیگر کاری انجام ندهد
    if ($(this).hasClass("is-loading")) {
        return false;
    }

    $("#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() )
    $("#PardakhtHa").val(JSON.stringify(paylist))

    console.log(paylist)

    var sumALL_factor = parseInt($("#sum_all").val());

    var checkOk = true
    if(paylist.l_checkPrice>=1){
      if(paylist.l_checkPriceSarResid>=1){
        checkOk = true
      }else{
        checkOk = false
        alert("خطا: مبلغ یا سررسید چک وارد نشده")
      }
    }

    var nesiyeOk = true
    if(paylist.l_nesiye>=1){
      if(paylist.l_nesiyeSarResid>=1){
        nesiyeOk = true
      }else{
        nesiyeOk = false
        alert("خطا: مبلغ یا سررسید نسیه وارد نشده")
      }
    }

    var sumPardakhti = 0;
    if ( parseInt($("#bestankarGhabl").val()) > 0 ){
      sumPardakhti = parseInt($("#bestankarGhabl").val())
    }else{
      sumPardakhti = 0
    }

    pardakhtiVal = Object.values(paylist).map(Number)
    pardakhtiVal.forEach((currentValue)=>{
      if(currentValue<1000000000){
        sumPardakhti+= currentValue
      }
    })

    if(nesiyeOk && checkOk && !Object.values(paylist).every(o => o === null) ){
      if(sumPardakhti==sumALL_factor){
        
        // --- تغییرات اصلی برای جلوگیری از کلیک مجدد اینجاست ---
        
        var $btn = $("#submitFactor");
        
        // 1. اضافه کردن کلاس لودینگ Bulma و غیرفعال کردن دکمه
        $btn.addClass("is-loading").prop("disabled", true).css("pointer-events", "none");
        
        // 2. فعال کردن لایه تاریک روی صفحه که خودتان ساخته بودید (از کامنت خارج شد)
        $("#disablePage").addClass("is-active");
        
        // 3. ارسال فرم
        $("#subFactor").submit();
        
        // --------------------------------------------------------

      }else{
        console.log(sumPardakhti, " ", sumALL_factor)
        alert("جمع فاکتور با مبالغ پرداختی همخوانی ندارد")
      }
    }else{
      alert("لطفا فرم را کنترل کنید")
    }
  
  });
  //پایان دکمه ثبت فاکتور
  
  $("#categoryS").change(function(){
    var cat_id = $(this).val();
    $("#priceEach").val('');
    $("#priceKol").val('');
    $("#num_prd").val('');
    $("#mojodi").val('');
    if(cat_id !='ojrat' && cat_id !='' && cat_id !=null){
      $("#add_to_list").removeClass("is-hidden");
      $(".ojrat").addClass("is-hidden");
      $("#productFeilds").removeClass("is-hidden");
      filterPrd = all_products.filter(function(data){
        return data['ProductCategory'] == cat_id
      });
      $("#productS").html("");
      filterPrd.forEach(element => {
        $("#productS").append(`
        <div class="column is-12-desktop is-12-mobile m-0 mb-1 pb-0">
            <div class="columns is-mobile is-multiline is-gapless boxPrdborder">
              <div class="column is-12-mobile is-12-desktop prd_name" prd_id="`+element['id']+`">
                <button class="has-text-centeredmb-2 prdName05 btnprd">`+element['product_name']+`</button>
              </div>
              <div class="prdInputBox columns is-mobile is-multiline is-gapless is-hidden">
                <div class="column is-4-mobile is-4-desktop">
                  <div class="field">
                    <label class="label">تعداد</label>
                    <div class="control">
                      <input type="number" value="1" class="input count_prdRQ">
                    </div>
                  </div>
                </div>
                <div class="column is-4-mobile is-4-desktop">
                  <div class="field">
                    <label class="label">قیمت</label>
                    <div class="control">
                      <input disabled type="number" class="input prd_price054" value="`+element['product_price']+`">
                    </div>
                  </div>
                </div>
                <div class="column is-4-mobile is-4-desktop">
                  <div class="field">
                    <label class="label">موجودی</label>
                    <div class="control">
                      <input disabled type="number" class="input mojodi_pbox">
                    </div>
                  </div>
                </div>

                <div class="column is-12-mobile is-12-desktop garantyEsh mt-2">
                  <div class="control">
                    <label class="radio">
                      <input type="radio" value="" name="garantyEsh">
                      هیچ کدام
                    </label>
                    <label class="radio">
                      <input type="radio" value="گارانتی" name="garantyEsh">
                      گارانتی
                    </label>
                    <label class="radio">
                      <input type="radio" value="اشانتیون" name="garantyEsh">
                      اشانتیون
                    </label>
                  </div>
                </div>  

                <div class="column is-12-mobile is-12-desktop garantyEsh mt-2 pt-2">
                      <span class="button is-danger is-pulled-left addEachTolist">اضافه کردن</span>
                      <span class="is-pulled-right pt-2 addedTolist is-hidden">به لیست اضافه شد</span>
                  </div>
                </div>  

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

  $(document).on('click', '.prd_name', function() {
    prd_box = $(this);
    //btnBorderBtm
    $(prd_box).find(".btnprd").addClass("btnBorderBtm");
    var prd_id =$(this).attr('prd_id');
    $.getJSON('/panel/productMojodi/'+prd_id, function(data) {
      $(prd_box).parent().parent().find(".mojodi_pbox").val(data);
    });
    $(prd_box).parent().parent().find(".prdInputBox").removeClass('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);
  }

  $(document).on('click', '.addEachTolist', function() {
    prd_box = $(this).parent().parent().parent();
    var prd_id =$(prd_box).find(".prd_name").attr('prd_id');
    var GrantyEsh = $(prd_box).find("input[type='radio']:checked").val();
    if (!GrantyEsh){
      GrantyEsh = ''
    }
    var count =  parseInt( $(prd_box).find(".count_prdRQ").val() );
    var mojodi_pbox =  parseInt( $(prd_box).find(".mojodi_pbox").val() );
    var prd_price054 =  parseInt( $(prd_box).find(".prd_price054").val() );
    var prdName05 =  $(prd_box).find(".prdName05").html();
    //prdName05
    //mojodi_pbox
    if (count>=1 && count<=mojodi_pbox){
      $(prd_box).find(".addedTolist").removeClass("is-hidden");
      $(prd_box).find(".addEachTolist").addClass("is-hidden");
      $(prd_box).find("input").prop('disabled', true);
      orderList.push({'prd_id': prd_id, 'prd_count': count,
      'priceKol':  parseInt(prd_price054*count), 'product_name': prdName05, 'price':prd_price054,
      'garanty_Esh': GrantyEsh
      });
      buildOrderList();
    }else{
      alert('تعداد معتبر وارد کنید');
    }
    //count_prdRQ
  });

  $("#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',
            leapYearMode: 'astronomical'
        }
    }
  });

  $("#l_checkPriceSarResid").pDatepicker({
    initialValue: false,
    initialValueType: 'en',
    format: 'YYYY/MM/DD',
    autoClose: true,
    calendar:{
        persian: {
            locale: 'fa',
            leapYearMode: 'astronomical'
        }
    },
    onSelect: (unix)=>{
      paylist['l_checkPriceSarResid'] = unix
    }
  });

  $("#l_nesiyeSarResid").pDatepicker({
    initialValue: false,
    initialValueType: 'en',
    format: 'YYYY/MM/DD',
    autoClose: true,
    calendar:{
        persian: {
            locale: 'fa',
            leapYearMode: 'astronomical'
        }
    },
    onSelect: (unix)=>{
      paylist['l_nesiyeSarResid'] = unix
    }
  });

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

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

    // فعال‌سازی دکمه بستن برای پیام‌های سیستم (جدید)
    $(".close-notification").click(function(){
      $(this).parent().fadeOut(300, function() {
        $(this).remove();
      });
    });

    var test = 0;

    $("#enEdit").click(function(){
      $("#formcsEdit").find("input, textarea").prop('disabled', false);
      // فعال کردن دکمه‌های کنترل تلفن
      $("#formcsEdit").find("button.remove-phone-btn, button.add-phone-btn").prop('disabled', false);
      
      $("#enEdit").addClass("is-hidden");
      $("#editCs").removeClass("is-hidden");
    });

    // توابع داینامیک فرم ویرایش
    $(document).on('click', '.add-phone-btn', function() {
        var phoneRow = `
        <div class="field has-addons mt-2 ss02">
          <div class="control" style="width: 35%;">
            <input name="phone_titles" class="input" type="text" placeholder="عنوان">
          </div>
          <div class="control is-expanded">
            <input name="phones" class="input an_phone" type="text" placeholder="شماره تماس جدید">
          </div>
          <div class="control">
            <button type="button" class="button is-danger remove-phone-btn">-</button>
          </div>
        </div>`;
        $("#dynamic-phones-edit").append(phoneRow);
    });

    $(document).on('click', '.remove-phone-btn', function() {
        if ($("#dynamic-phones-edit .has-addons").length > 1) {
            $(this).closest('.field.has-addons').remove();
        } else {
            alert("حداقل یک شماره تماس باید وجود داشته باشد.");
        }
    });

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