{% extends 'root.html' %}
{% load static %}
    {% block content %}
<!-- Main content -->
    <style>
    .content{
      padding: 20px;
    }
    </style>


<section class="content">
    <div class="row">
  <div class="col-xs-12">
  <div class="box">

  <div class="box-header with-border">

  <h2>User Role</h2>
  </div>
  <div class="box-body">
    <table id="example1" class="table table-bordered">
        
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span></button>
                    </div>
                    
                      <form class="form-horizontal" method="POST" action="{% url 'customers' %}">
                        {% csrf_token %}
                       
                        <div class="modal-body">
                            {% for field in form  %}
                            <div class="form-group has-feedback">
                                <span class="text-danger">{{field.errors}}</span>
                                {{field.label_tag}}
                                {{field}}
                            </div>
                            {% endfor %}
          
                    </div>
                    <div class="modal-footer">
                      <a href="{% url 'roles' %}"><button type="button" class="btn btn-default btn-flat pull-left" data-dismiss="modal"><i class="fa fa-close"></i> Close</button></a>
                      <button type="submit" class="btn btn-primary btn-flat" name="add"><i class="fa fa-save"></i> Save</button>
                    </div>
                  </form>
              
          </div>
    </table>
  </div>
  </div>
  </div>
  </div>
  </section>

  <!-- Button trigger modal -->
      
    {% endblock content %}



    {% block modal %}
    <!-- Modal -->


    <div class="modal fade" id="addnew">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"><b>User Role</b></h4>
              </div>
              <div class="modal-body">
                <form class="form-horizontal" method="POST" action="{% url 'customers' %}">
                  {% csrf_token %}
                 
                  <div class="modal-body">
                      {% for field in form  %}
                      <div class="form-group has-feedback">
                          <span class="text-danger">{{field.errors}}</span>
                          {{field.label_tag}}
                          {{field}}
                      </div>
                      {% endfor %}
    
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default btn-flat pull-left" data-dismiss="modal"><i class="fa fa-close close_edit"></i> Close</button>
                <button type="submit" class="btn btn-primary btn-flat" name="add"><i class="fa fa-save"></i> Save</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>




    # Edit Modal
    <div class="modal fade" id="edit">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"><b>Edit User Role</b></h4>
              </div>
              <div class="modal-body">
                <form class="form-horizontal" method="POST" action="{% url 'updateRoles' %}">
                  {% csrf_token %}
                  <input type="hidden" class="id" name="id">
                  <input type="text" class="form-control name" name="name" id="name">
                  
                  
                  <div class="">
                    <h3>Administration</h3>
                   <label class=""> Company Location </label> <input type="checkbox" name="company_location" id="company_location" class="company_location">
                   <label class=""> Company Profile </label> <input type="checkbox" name="company_profile" id="company_profile" class="company_profile">
                   <label class=""> Product Category </label> <input type="checkbox" name="product_category" id="product_category" class="product_category">
                   <label class=""> Product </label> <input type="checkbox" name="products" id="products" class="products">
                   <label class=""> Product Prices </label> <input type="checkbox" name="product_prices" id="product_prices" class="product_prices">
                   <label class=""> Product Stock </label> <input type="checkbox" name="product_stocks" id="product_stocks" class="product_stocks">
                   <label class=""> Customer </label> <input type="checkbox" name="customers" id="customers" class="customers">
                   <label class=""> Supplier </label> <input type="checkbox" name="suppliers" id="suppliers" class="suppliers">
                   <label class=""> Role </label> <input type="checkbox" name="role" id="role" class="role">
                   <label class=""> Bank Account </label> <input type="checkbox" name="bank_accounts" id="bank_accounts" class="bank_accounts">
                   <label class=""> Users </label> <input type="checkbox" name="users" id="users" class="users">
                  </div>
  
                  
                  <div class="">
                    <h3>Reference</h3>
                   <label class=""> Package </label> <input type="checkbox" name="package" id="package" class="package">
                   <label class=""> Expense Type </label> <input type="checkbox" name="expense_type" id="expense_type" class="expense_type">
                   <label class=""> Bank </label> <input type="checkbox" name="bank" id="bank" class="bank">
                   <label class=""> Payment Mode </label> <input type="checkbox" name="payment_method" id="payment_method" class="payment_method">
                   <label class=""> Bank Transaction Type </label> <input type="checkbox" name="bank_transaction_type" id="bank_transaction_type" class="bank_transaction_type">
                  </div>


                  <div class="">
                    <h3>Transaction</h3>
                   <label class=""> Cash Sale </label> <input type="checkbox" name="cash_sale" id="cash_sale" class="cash_sale">
                   <label class=""> Credit Sale </label> <input type="checkbox" name="credit_sale" id="credit_sale" class="credit_sale">
                   <label class=""> Stock Purchase </label> <input type="checkbox" name="stock_purchase" id="stock_purchase" class="stock_purchase">
                   <label class=""> Stock Transfer </label> <input type="checkbox" name="stock_transfer" id="stock_transfer" class="stock_transfer">
                   <label class=""> Wholesale </label> <input type="checkbox" name="wholesale" id="wholesale" class="wholesale">
                   <label class=""> Protocol </label> <input type="checkbox" name="protocol" id="protocol" class="protocol">
                   <label class=""> Expense </label> <input type="checkbox" name="expense" id="expense" class="expense">
                   <label class=""> Bank Transaction </label> <input type="checkbox" name="bank_transaction" id="bank_transaction" class="bank_transaction">
                   <label class=""> Can Reprint  Receipt </label> <input type="checkbox" name="can_print_sales" id="can_print_sales" class="can_print_sales">
                   <label class=""> Can Return Sale </label> <input type="checkbox" name="can_return_sales" id="can_return_sales" class="can_return_sales">
                  </div>


                  <div class="">
                    <h3>Transaction Payment</h3>
                   <label class=""> Credit Sale Payment </label> <input type="checkbox" name="credit_sale_payment" id="credit_sale_payment" class="credit_sale_payment">
                   <label class=""> Stock Purchase Payment </label> <input type="checkbox" name="stock_purchase_payment" id="stock_purchase_payment" class="stock_purchase_payment">
                  </div>


                  <div class="">
                    <h3>Transaction Return</h3>
                   <label class=""> Sale Return </label> <input type="checkbox" name="sale_return" id="sale_return" class="sale_return">
                   <label class=""> Stock Purchase Return </label> <input type="checkbox" name="stock_purchase_return" id="stock_purchase_return" class="stock_purchase_return">
                   <label class=""> Stock Transfer Return </label> <input type="checkbox" name="stock_transfer_return" id="stock_transfer_return" class="stock_transfer_return">
                   <label class=""> Protocol Return </label> <input type="checkbox" name="protocol_return" id="protocol_return" class="protocol_return">
                  </div>

                  


                  <div class="">
                    <h3>Transaction Update</h3>
                   <label class=""> Stock Purchase Update</label> <input type="checkbox" name="stock_purchase_update" id="stock_purchase_update" class="stock_purchase_update">
                   <label class=""> Sale Update </label> <input type="checkbox" name="sale_update" id="sale_update" class="sale_update">
                  </div>



                  <div class="">
                    <h3>Reports</h3>
                   <label class=""> Sale Report </label> <input type="checkbox" name="sale_report" id="sale_report" class="sale_report">
                   <label class=""> Sale Summary Report </label> <input type="checkbox" name="sale_summary_report" id="sale_summary_report" class="sale_summary_report">
                   <label class=""> Customer Account Report </label> <input type="checkbox" name="customer_account_report" id="customer_account_report" class="customer_account_report">
                   <br><label class=""> Customer Statement Report </label> <input type="checkbox" name="customer_statement_report" id="customer_statement_report" class="customer_statement_report">
                   <label class=""> supplier Account Report </label> <input type="checkbox" name="supplier_account_report" id="supplier_account_report" class="supplier_account_report">
                   <label class=""> Supplier Statement Report </label> <input type="checkbox" name="supplier_statement_report" id="supplier_statement_report" class="supplier_statement_report">
                   <br><label class=""> Product Sale Report </label> <input type="checkbox" name="product_sale_report" id="product_sale_report" class="product_sale_report">
                   <label class=""> Stock Value Report </label> <input type="checkbox" name="stock_value_report" id="stock_value_report" class="stock_value_report">
                   <label class=""> Stock Control Report </label> <input type="checkbox" name="stock_control_report" id="stock_control_report" class="stock_control_report">
                   <br><label class=""> Stock Purchase Report </label> <input type="checkbox" name="stock_purchase_report" id="stock_purchase_report" class="stock_purchase_report">
                   <label class=""> Stock Transfer Report </label> <input type="checkbox" name="stock_transfer_report" id="stock_transfer_report" class="stock_transfer_report">
                   <label class=""> Protocol Report </label> <input type="checkbox" name="protocol_report" id="protocol_report" class="protocol_report">
                   <br><label class=""> Product Purchase Report </label> <input type="checkbox" name="product_purchase_report" id="product_purchase_report" class="product_purchase_report">
                   <label class=""> Transaction Return Report </label> <input type="checkbox" name="transaction_return_report" id="transaction_return_report" class="transaction_return_report">
                   <label class=""> User Activity Report </label> <input type="checkbox" name="user_activity_report" id="user_activity_report" class="user_activity_report">
                   <br><label class=""> Expense Report </label> <input type="checkbox" name="expenses_report" id="expenses_report" class="expenses_report">
                   <label class=""> Bank Transactional Report </label> <input type="checkbox" name="bank_transaction_report" id="bank_transaction_report" class="bank_transaction_report">
                   <label class=""> Customer Performance Report </label> <input type="checkbox" name="customer_performance_report" id="customer_performance_report" class="customer_performance_report">
                   <label class=""> Stock Control Summary Report </label> <input type="checkbox" name="stock_control_summary_report" id="stock_control_summary_report" class="stock_control_summary_report">
                  </div>
  
                  
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default btn-flat pull-left" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
                <button type="submit" class="btn btn-success btn-flat" name="edit"><i class="fa fa-check-square-o"></i> Update</button>
                </form>
          </div>
        </div>
      </div>
    </div>
    



    # Delete Modal
    <div class="modal fade" id="delete">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"><b>Confirm Deletion</b></h4>
              </div>
              <div class="modal-body">
                <form class="form-horizontal" method="POST" action="{% url 'deleteRole' %}">
                  <input type="hidden" class="id" name="id">
                  {% csrf_token %}
                  <div class="text-center">
                      <p>DELETE ROLE</p>
                     <h4 class="bold role"></h4>
                  </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default btn-flat pull-left" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
                <button type="submit" class="btn btn-danger btn-flat" name="delete"><i class="fa fa-trash"></i> Delete</button>
                </form>
              </div>
          </div>
      </div>
    </div>
    
    
    {% endblock modal %}




    {% block script %}
    <script>
      $(function() {
        $(document).on('click', '.edit', function(e) {
            e.preventDefault();
            $('#edit').modal('show');
            var id = $(this).data('id');
            getRow(id);
        });
  

        $(document).on('click', '.delete', function(e) {
            e.preventDefault();
            $('#delete').modal('show');
            var id = $(this).data('id');
            getRow(id);
        });
  
    });


    $(document).on('click', '.close_edit', function(e) {
        e.preventDefault();
        alert('close');
        url = "{% url 'roles' %}";
        window.open(url, '_self');
    });


    function getRow(id) {
        $.ajax({
            type: 'GET',
            url: "{% url 'viewRolesById' %}",
            data: {
                id: id
            },
            dataType: 'json',
            success: function(response) {
                $('.id').val(response.id);
                console.log(response.id);
                $('.name').val(response.name);
                $('.company_location').val(response.company_location);
                $('.company_profile').val(response.company_profile);
                $('.product_category').val(response.product_category);
                $('.product').val(response.product);
                $('.product_prices').val(response.product_prices);
                $('.product_stocks').val(response.product_stocks);
                $('.customers').val(response.customers);
                $('.suppliers').val(response.suppliers);
                $('.role').val(response.role);
                $('.bank_accounts').val(response.bank_accounts);
                $('.users').val(response.users);

                $('.package').val(response.package);
                $('.expense_type').val(response.expense_type);
                $('.bank').val(response.bank);
                $('.payment_method').val(response.payment_method);
                $('.bank_transaction_type').val(response.bank_transaction_type);
                
                $('.cash_sale').val(response.cash_sale);
                $('.credit_sale').val(response.credit_sale);
                $('.stock_purchase').val(response.stock_purchase);
                $('.stock_transfer').val(response.stock_transfer);
                $('.wholesale').val(response.wholesale);
                $('.protocol').val(response.protocol);
                $('.expense').val(response.expense);
                $('.bank_transaction').val(response.bank_transaction);
                $('.can_print_sales').val(response.can_print_sales);
                $('.can_return_sales').val(response.can_return_sales);

                $('.credit_sale_payment').val(response.credit_sale_payment);
                $('.stock_purchase_payment').val(response.stock_purchase_payment);

                $('.sale_return').val(response.sale_return);
                $('.stock_purchase_return').val(response.stock_purchase_return);
                $('.stock_transfer_return').val(response.stock_transfer_return);
                $('.protocol_return').val(response.protocol_return);

                $('.stock_purchase_update').val(response.stock_purchase_update);
                $('.sale_update').val(response.sale_update);

                
                $('.sale_report').val(response.sale_report);
                $('.sale_summary_report').val(response.sale_summary_report);
                $('.customer_account_report').val(response.customer_account_report);
                $('.supplier_account_report').val(response.supplier_account_report);
                $('.supplier_statement_report').val(response.supplier_statement_report);
                $('.product_sale_report').val(response.product_sale_report);
                $('.stock_value_report').val(response.stock_value_report);
                $('.stock_control_report').val(response.stock_control_report);
                $('.stock_purchase_report').val(response.stock_purchase_report);
                $('.stock_transfer_report').val(response.stock_transfer_report);
                $('.protocol_report').val(response.protocol_report);
                $('.product_purchase_report').val(response.product_purchase_report);
                $('.transaction_return_report').val(response.transaction_return_report);
                $('.user_activity_report').val(response.user_activity_report);
                $('.expenses_report').val(response.expenses_report);
                $('.bank_transaction_report').val(response.bank_transaction_report);
                $('.customer_performance_report').val(response.customer_performance_report);
                $('.stock_control_summary_report').val(response.stock_control_summary_report);
                
              
              if (response.company_location == true) {
                $('#company_location').prop('checked', true);
              }

              if (response.company_profile == true) {
                $('#company_profile').prop('checked', true);
              }

              if (response.product_category == true) {
                $('#product_category').prop('checked', true);
              }

              if (response.product == true) {
                $('#product').prop('checked', true);
              }

              if (response.product_prices == true) {
                $('#product_prices').prop('checked', true);
              }

              if (response.product_stocks == true) {
                $('#product_stocks').prop('checked', true);
              }

              if (response.customers == true) {
                $('#customers').prop('checked', true);
              }

              if (response.suppliers == true) {
                $('#suppliers').prop('checked', true);
              }

              if (response.role == true) {
                $('#role').prop('checked', true);
              }

              if (response.bank_accounts == true) {
                $('#bank_accounts').prop('checked', true);
              }

              if (response.users == true) {
                $('#users').prop('checked', true);
              }

              if (response.package == true) {
                $('#package').prop('checked', true);
              }

              if (response.expense_type == true) {
                $('#expense_type').prop('checked', true);
              }

              if (response.bank == true) {
                $('#bank').prop('checked', true);
              }

              if (response.payment_method == true) {
                $('#payment_method').prop('checked', true);
              }

              if (response.bank_transaction_type == true) {
                $('#bank_transaction_type').prop('checked', true);
              }


               
              if (response.cash_sale == true) {
                $('#cash_sale').prop('checked', true);
              } 

              if (response.credit_sale == true) {
                $('#credit_sale').prop('checked', true);
              }

              if (response.stock_purchase == true) {
                $('#stock_purchase').prop('checked', true);
              }

              if (response.stock_transfer == true) {

                $('#stock_transfer').prop('checked', true);
              }

              if (response.wholesale == true) {
                $('#wholesale').prop('checked', true);
              }

              if (response.protocol == true) {
                $('#protocol').prop('checked', true);
              }

              if (response.expense == true) {
                $('#expense').prop('checked', true);
              }

              if (response.bank_transaction == true) {
                $('#bank_transaction').prop('checked', true);
              }

              if (response.can_print_sales == true) {
                $('#can_print_sales').prop('checked', true);
              }

              if (response.can_return_sales == true) {
                $('#can_return_sales').prop('checked', true);
              }

              if (response.credit_sale_payment == true) {
                $('#credit_sale_payment').prop('checked', true);
              }

              if (response.stock_purchase_payment == true) {
                $('#stock_purchase_payment').prop('checked', true);
              }

              if (response.sale_return == true) {
                $('#sale_return').prop('checked', true);
              }

              if (response.stock_purchase_return == true) {
                $('#stock_purchase_return').prop('checked', true);
              }

              if (response.stock_transfer_return == true) {
                $('#stock_transfer_return').prop('checked', true);
              }

              if (response.protocol_return == true) {
                $('#protocol_return').prop('checked', true);
              }

              if (response.stock_purchase_update == true) {
                $('#stock_purchase_update').prop('checked', true);
              }

              if (response.sale_update == true) {
                $('#sale_update').prop('checked', true);
              }

              if (response.sale_report == true) {
                $('#sale_report').prop('checked', true);
              }

              if (response.sale_summary_report == true) {
                $('#sale_summary_report').prop('checked', true);
              }

              if (response.customer_account_report == true) {
                $('#customer_account_report').prop('checked', true);
              }

              if (response.supplier_account_report == true) {
                $('#supplier_account_report').prop('checked', true);
              }

              if (response.supplier_statement_report == true) {
                $('#supplier_statement_report').prop('checked', true);
              }

              if (response.product_sale_report == true) {
                $('#product_sale_report').prop('checked', true);
              }

              if (response.stock_value_report == true) {
                $('#stock_value_report').prop('checked', true);
              }

              if (response.stock_control_report == true) {
                $('#stock_control_report').prop('checked', true);
              }

              if (response.stock_purchase_report == true) {
                $('#stock_purchase_report').prop('checked', true);
              }

              if (response.stock_transfer_report == true) {
                $('#stock_transfer_report').prop('checked', true);
              }

              if (response.protocol_report == true) {
                $('#protocol_report').prop('checked', true);
              }

              if (response.product_purchase_report == true) {
                $('#product_purchase_report').prop('checked', true);
              }

              if (response.transaction_return_report == true) {
                $('#transaction_return_report').prop('checked', true);
              }

              if (response.user_activity_report == true) {
                $('#user_activity_report').prop('checked', true);
              }

              if (response.expenses_report == true) {
                $('#expenses_report').prop('checked', true);
              }

              if (response.bank_transaction_report == true) {
                $('#bank_transaction_report').prop('checked', true);
              }

              if (response.customer_performance_report == true) {
                $('#customer_performance_report').prop('checked', true);
              }

              if (response.stock_control_summary_report == true) {
                $('#stock_control_summary_report').prop('checked', true);
              }


              
  
                console.log(response);
            }
        });
    }

    </script>
    {% endblock script %}