{% extends "./baseStore.html" %}
{% load custom_tags %}
{% load static %}

{% block storeBody %}
  <p class="has-text-centered mt-2 mb-2 is-size-5">{{ storeO.store_name }}</p>
  
  <form class="columns m-0 is-multiline is-mobile" method="post">
    {% csrf_token %}
    <div class="field column is-6-desktop is-6-mobile">
      <div class="control">
        <input id="searchQS" value="{{ djsearchQS }}" name="searchQS" class="input is-fullwidth" type="text" placeholder="نام محصول">
      </div>
    </div>

    <div class="field column is-3-desktop is-6-mobile">
      <div class="control">
        <div class="select is-fullwidth">
          <select id="mojodi" name="mojodi">
            <option value="">وضعیت موجودی</option>
            <option value="0">عدم موجودی</option>
            <option value="1">نقطه سفارش</option>
          </select>
        </div>
      </div>
    </div>

    <div class="field column is-3-desktop is-12-mobile">
      <div class="control">
        <input type="submit" class="button is-link is-fullwidth" value="جستجو"/>
      </div>
    </div>
  </form>

  <a class="button is-info mb-3 {% if searchStatus %}{% else %}is-hidden{% endif %}" href="{% url 'admin_panel:store' s_id %}">لغو جستجو و مشاهده همه</a>

  <div class="table-container">
    <table class="table m-auto has-text-centered table is-bordered is-striped is-narrow is-fullwidth mojodiTB">
      <thead>
        <tr>
          <th style="min-width: 200px;">نام محصول</th>
          <th>قیمت</th>
          <th>موجودی فیزیکی</th>
          <th>در انتظار خروج (رزرو)</th>
          <th>در انتظار ورود (در راه)</th>
          <th style="min-width: 100px;">عملیات</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>نام محصول</th>
          <th>قیمت</th>
          <th>موجودی فیزیکی</th>
          <th>در انتظار خروج (رزرو)</th>
          <th>در انتظار ورود (در راه)</th>
          <th>عملیات</th>
        </tr>
      </tfoot>
      <tbody>
        {% for prd in productSum %}
        <tr prd_id="{{ prd.id }}" class="openPrdEdit" p_cat="{{ prd.ProductCategory.id }}">
          <td>
            <a {% if perms.admin_panel.OnlyAnbar %}href="{% url 'admin_panel:operationProduct' s_id prd.id %}"{% endif %}>
              <span class="product_name font-weight-bold">{{ prd.product_name }}</span>
            </a>
          </td>
          
          <td class="product_price">{{ prd.product_price }}</td>
          
          <td class="product_mojodi has-text-weight-bold is-size-6">
            {{ prd.mojodi }}
          </td>

          <td>
            {% if prd.pending_out > 0 %}
              <span class="tag is-warning is-medium" title="ارسال شده به انبار دیگر و منتظر تایید">
                {{ prd.pending_out }} -
              </span>
            {% else %}
              <span class="has-text-grey-light">0</span>
            {% endif %}
          </td>

          <td>
            {% if prd.pending_in > 0 %}
              <span class="tag is-info is-medium" title="ارسال شده به این انبار و منتظر تایید شما">
                {{ prd.pending_in }} +
              </span>
            {% else %}
              <span class="has-text-grey-light">0</span>
            {% endif %}
          </td>
          
          <td>
            {% if perms.admin_panel.ViewStore or perms.admin_panel.OnlyAnbar %}

              {% if not user|has_group:"khadamat" %}
              <span class="Oedit_prd" style="cursor: pointer;"><img style="width: 20px; height: 20px;" src="{% static 'admin_panel/icons/edit.png' %}"></span>
              <span class="delet_prd" style="cursor: pointer;"><img style="width: 20px; height: 20px;" src="{% static 'admin_panel/icons/delet.png' %}"></span>
              {% endif %}
              
              <a href="{% url 'admin_panel:newOperation' s_id prd.id %}">
                <span><img style="width: 20px; height: 20px;" src="{% static 'admin_panel/icons/add.png' %}"></span>
              </a>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div id="edit_prd" class="modal">
    <div class="modal-background close_edit"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">ویرایش محصول</p>
        <button class="delete close_edit" aria-label="close"></button>
      </header>
      <form action="{% url 'admin_panel:productEdit' %}" id="formcsEdit" class="has-background-white brad5" method="post">
        <section class="modal-card-body">
          {% csrf_token %}
          <input id="i_pcode" type="hidden" name="prd_code" value="">

          <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 id="EditnamePrd" required value="" name="namePrd" 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">
                <div class="select is-fullwidth">
                  <select id="Editcategory" name="category" required>
                    <option value=""></option>
                    {% for catg in productCategory %}
                      <option value="{{ catg.id }}">{{ catg.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">
                <input id="Editproduct_price" required value="" name="price" class="input an_name" type="text" placeholder="قیمت">
              </div>
            </div>
          </div>  
        </section>
        <footer class="modal-card-foot">
          <input value="ذخیره" type="submit" class="button is-success">
          <button type="button" class="button close_edit">لغو</button>
        </footer>
      </form>
    </div>
  </div>

  <script>
    {% if not mojodi %}
      var mojodiVar = '';
    {% else %}
      var mojodiVar = {{ mojodi }};
    {% endif %}
    var objpname = null;
      
    $('#mojodi').val(mojodiVar);
    
    $(".delet_prd").click(function(){
      var prd_id = $(this).parent().parent().attr('prd_id');
      if (confirm("از حذف مطمئن هستید؟")) {
        window.location.href = '/panel/product/del/' + prd_id + "/" + "{{ s_id }}";
      }
    });
    
    $(".close_edit").click(function(){
      $("#edit_prd").removeClass('is-active');
    });

    $(".Oedit_prd").click(function(){
      $("#edit_prd").addClass('is-active');
      var prd_id = $(this).parent().parent().attr("prd_id");
      var p_cat = $(this).parent().parent().attr("p_cat");
      objpname = $(this).parent().parent().find('.product_name');
      
      $("#i_pcode").val(prd_id);
      $("#EditnamePrd").val($(this).parent().parent().find('.product_name').text().trim());
      $("#Editproduct_price").val($(this).parent().parent().find('.product_price').text().trim());
      $("#Editcategory").val(p_cat);
    });
  </script>
{% endblock %}