{% extends 'super_admin_templates/base.html' %}
{% set path = "regions" %}
{% set subpath = "taxmaster" %}
{% block content %}
<!-- Content Wrapper. Contains page content -->
<style type="text/css">
  .pagination-page-info {
    padding: .6em;
    padding-left: 0;
    width: 40em;
    margin: .5em;
    margin-left: 0;
    font-size: 12px;
  }

  .pagination-page-info b {
    color: black;
    background: #6aa6ed;
    padding-left: 2px;
    padding: .1em .25em;
    font-size: 150%;
  }
</style>

<style>
  .btn-edit {
    background-color: transparent;
    border: none;
    color: #007bff;
    cursor: pointer;
  }

  .btn-edit:hover {
    text-decoration: underline;
  }
</style>
<style>
  select option:first-child {
    color: #000;
    /* grey for placeholders */
  }

  select:invalid {
    color: #000;
    /* force placeholder to stay grey on load */
  }

  select:valid {
    color: #000;
    /* normal black once a real value is chosen */
  }

  select option {
    color: #000;
    /* fallback color for all other options */
  }

  .centered {
    text-align: center;
  }
</style>


<script>
  function openUpdateModal(taxmaster) {
    // Set the form action URL using the ID
    const updateBankBaseURL = "{{ url_for('tax_master.update_tax_type', taxTypeId='__ID__') }}";
    const formAction = updateBankBaseURL.replace('__ID__', taxmaster.id);
    document.getElementById('updatetaxForm').action = formAction;
    resetFormDataNew('updatetaxForm');
    // Populate the form fields
    document.getElementById('edittaxTypeName').value = taxmaster.taxTypeName || '';
    const taxType = taxmaster.taxType; // Should be "PERCENTAGE" or "FLAT"


    document.getElementById('edittaxTypePercentage').checked = false;
    document.getElementById('edittaxTypeFlat').checked = false;


    if (taxType === "PERCENTAGE") {
      document.getElementById('edittaxTypePercentage').checked = true;
    } else if (taxType === "FLAT") {
      document.getElementById('edittaxTypeFlat').checked = true;
    } else {
      console.warn("Unknown tax type:", taxType);
      const errorElement = document.getElementById('taxType_edit_error');
      if (errorElement) {
        errorElement.textContent = 'Invalid tax type';
      }
    }

    console.log("((((((((((error))))))))))", taxmaster)
    document.getElementById('editprimaryTax').value = taxmaster.primaryTax || '';
    document.getElementById('editsecondaryTax').value = taxmaster.secondaryTax || '';

    // Show the modal
    const modal = new bootstrap.Modal(document.getElementById('editTaxTypeModal'));
    modal.show();
  }
</script>

<!-- Start::app-content -->
<!-- Start::app-content -->
<div class="main-content app-content">
  <div class="container-fluid">
    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
      <h1 class="page-title fw-semibold fs-18 mb-0">Utility Master</h1>
      <div class="ms-md-1 ms-0">
        <nav>
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Tax Master</li>
          </ol>
        </nav>
      </div>
    </div>
    <!-- Page Header Close -->
    <!-- Start::row-1 -->
    <div class="row">
      <div class="col-xl-12">
        <div class="card custom-card">
          <div class="card-header">
            <div class="card-title">
              Tax Master List
            </div>
          </div>

          <div class="card-body">

            <center>
              {% if error %}
              <h2><b>
                  <center style="color:RED">{{ error }}</center>
                </b></h2>
              {% endif %}
            </center>



            <div class="row">
              <div class="col-xl-12">
                <div class="d-flex justify-content-between align-items-center mb-4">
                  <form method="GET" action="{{ url_for('tax_master.tax_types_list')}}"
                    class="row gy-2 gx-3 align-items-center">

                    <div class="col-auto">
                      <input type="text" class="form-control" value="{{search_element}}" name="search_element"
                        id="search_element" placeholder="Search element">
                    </div>
                    <div class="col-auto">
                      <button type="submit" class="btn btn-primary">Search</button>
                    </div>
                    <div class="col-auto">
                      <a href="{{url_for('tax_master.tax_types_list')}}"><button type="button"
                          class="btn btn-warning">Reset</button></a>
                    </div>
                    {% for error in form.search_element.errors %}
                    <span class="text-danger" class="error">{{ error }}</span>
                    {% endfor %}
                  </form>

                  <div class="prism-toggle">
                    {% if 'add' in session.get('taxmasterPermissions', []) %}
                    <button type="button" class="btn btn-primary-light rounded-pill btn-wave" data-bs-toggle="modal"
                      data-bs-target="#addTaxTypeModal">
                      <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create New Tax Type
                    </button>
                    {% endif %}
                  </div>
                </div>
              </div>
            </div>


            <div class="mt-3"></div>
            <div class="table-responsive">
              <table id="datatable-basic" class="table text-nowrap" style="padding-bottom: 200px;">
                <thead class="table-primary">
                  <tr>
                    <th>S.No</th>
                    <th>Tax Type Name</th>
                    <th>Type</th>
                    <th>Primary Tax</th>
                    <th>Secondary Tax</th>
                    {% if 'edit' in session.get('taxmasterPermissions', []) %}
                        <th scope="col">Status</th>
                    {% endif %}
                    {% if 'edit' in session.get('taxmasterPermissions', []) %}
                        <th scope="col">Actions</th>
                    {% elif 'delete' in session.get('taxmasterPermissions', []) %}
                        <th scope="col">Actions</th>
                    {% endif %}
                  </tr>
                </thead>

                <tbody>
                  {% if taxTypesList %}
                  {% for each_tax_type in taxTypesList %}
                  <tr>
                    <td>{{ snoCount + loop.index}}</td>

                    {% if each_tax_type.taxTypeName %}
                    <td>{{each_tax_type.taxTypeName}}</td>
                    {% else %}
                    <td class="centered">-</td>
                    {% endif %}

                    {% if each_tax_type.taxType %}
                    <td>{{each_tax_type.taxType}}</td>
                    {% else %}
                    <td class="centered">-</td>
                    {% endif %}

                    <td>{{each_tax_type.primaryTax}}</td>
                    <td>{{each_tax_type.secondaryTax}}</td>

                    {% if 'edit' in session.get('taxmasterPermissions', []) %}
                    <td>
                      {% if each_tax_type.status == 1 %}
                      <a class="btn btn-sm btn-success"
                        href="{{ url_for('tax_master.update_tax_type_status', taxTypeId=each_tax_type.id,servicePage=servicePage,search_element=search_element) }}"
                        data-requires-location>Active</a>
                      {% else %}
                      <a class="btn btn-sm btn-warning"
                        href="{{ url_for('tax_master.update_tax_type_status',  taxTypeId=each_tax_type.id,servicePage=servicePage,search_element=search_element) }}"
                        data-requires-location>Inactive</a>
                      {% endif %}
                    </td>
                    {% endif %}

                    <td>
                      {% if 'edit' in session.get('taxmasterPermissions', []) %}
                      <a href="javascript:void(0);" onclick='openUpdateModal({
                                "id": "{{ each_tax_type.id }}",
                                "taxTypeName": {{ each_tax_type.taxTypeName | tojson }},
                                "taxType": {{ each_tax_type.taxType | tojson }},
                                "primaryTax": {{ each_tax_type.primaryTax | tojson }},
                                "secondaryTax": {{ each_tax_type.secondaryTax | tojson }},
                            })' class="btn btn-icon btn-sm btn-info-transparent rounded-pill">
                        <i class="ri-edit-line"></i>
                      </a>
                      {% endif %}
                      {% if 'delete' in session.get('taxmasterPermissions', []) %}
                      <a href="javascript:void(0);"
                        onclick="confirmDelete('{{ url_for('tax_master.delete_tax_type', taxTypeId=each_tax_type.id,servicePage=servicePage,search_element=search_element) }}')"><span
                          class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                            class="ri-delete-bin-line"></i></span></a>
                      </a>
                      {% endif %}
                    </td>


                    {% endfor %}
                    {% else %}
                  <tr>
                    <td colspan="12" style="text-align: center;">No Data Found</td>
                  </tr>
                  {% endif %}
                </tbody>
                <div class="flashes">
                  {% with messages = get_flashed_messages(with_categories=true) %}
                  {% if messages %}
                  {% for category, message in messages %}
                  {% if category == "success" %}
                  <h2><b>
                      <center style="color:green">{{ message }}</center>
                    </b></h2>
                  {% elif category == "danger" %}
                  <h2><b>
                      <center style="color:red">{{ message }}</center>
                    </b></h2>
                  {% else %}
                  <h2><b>
                      <center style="color:orange">{{ message }}</center>
                    </b></h2>
                  {% endif %}
                  {% endfor %}
                  {% endif %}
                  {% endwith %}
                </div>
              </table>

            </div>
            <div class="col-sm-12 col-md-12 mt-3">
              <nav aria-label="Page navigation" class="pagination-style-1">
                {% if pagination %}
                {{ pagination.links }}
                {% endif %}
              </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>


<div class="modal fade" id="addTaxTypeModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog  modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title" id="mail-ComposeLabel">Add Tax Type</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form method="POST" action="{{url_for('tax_master.add_tax_type')}}" enctype="multipart/form-data"
          name="add_tax_charges" id="add_tax_charges">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" id="latitude_add" name="latitude">
          <input type="hidden" id="longitude_add" name="longitude">
          <!-- Add your form fields here -->
          <div class="form-group">
            <label for="taxTypeName">Tax Type Name*</label>
            <input type="text" class="form-control" id="taxTypeName" name="taxTypeName"
              pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$"
              title="Tax Type Name contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."
              placeholder="Enter tax type name" required>
            <span id="taxTypeName_error" class="error"></span>
          </div>

          <div class="form-group">
            <label for="taxType">Tax Type*</label><br>
            <input type="radio" id="tax_percentage" name="taxType" value="PERCENTAGE">
            <label for="tax_percentage">Percentage</label>

            <input type="radio" id="tax_flat" name="taxType" value="FLAT">
            <label for="tax_flat">Flat</label><br>


            <span id="taxType_error" class="error"></span>
          </div>

          <div class="form-group">
            <label for="primaryTax">Primary Tax %*</label>
            <input type="text" class="form-control" id="primaryTax" name="primaryTax" pattern="^\d+(\.\d+)?$"
              title="Primary Tax contain only numeric characters" placeholder="Enter primary tax"><br>
            <span id="primaryTax_error" class="error"></span>

          </div>

          <div class="form-group">
            <label for="secondaryTax">Secondary Tax %*</label>
            <input type="text" class="form-control" id="secondaryTax" name="secondaryTax" pattern="^\d+(\.\d+)?$"
              title="Secondary Tax contain only numeric characters" placeholder="Enter secondary tax">
            <span id="secondaryTax_error" class="error"></span>
          </div>


          <!-- Add more form fields as needed -->

          <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="editTaxTypeModal" tabindex="-1" role="dialog" aria-labelledby="editTaxTypeModal"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editTaxTypeModal">Update Tax Type</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form method="POST" name="updatetaxForm" id="updatetaxForm" enctype="multipart/form-data">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" id="latitude_update" name="latitude">
          <input type="hidden" id="longitude_update" name="longitude">
          <div class="form-group">
            <label for="edittaxTypeName">Wallet Name*</label>
            <input type="text" class="form-control" id="edittaxTypeName" name="taxTypeName"
              pattern="^[a-zA-Z0-9\s@#$()+_\-/.]+$"
              title="Tax Type Name contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."
              required>
          </div>
          <span id="taxTypeName_edit_error" class="error"></span>
          <div class="form-group">
            <label for="edittaxType">Type*</label required>
            <br>
            <input type="Radio" id="edittaxTypePercentage" name="taxType" value="PERCENTAGE"> Percentage
            <input type="Radio" id="edittaxTypeFlat" name="taxType" value="FLAT"> Flat



            <span id="taxType_edit_error" class="error"></span>
          </div>

          <div class="form-group">
            <label for="editprimaryTax">Primary Tax %*</label>
            <input type="text" class="form-control" id="editprimaryTax" name="primaryTax" pattern="^\d+(\.\d+)?$"
              title="Primary Tax contain only numeric characters" required>
            <span id="primaryTax_edit_error" class="error"></span>
          </div>

          <div class="form-group">
            <label for="editsecondaryTax">Secondary Tax %*</label>
            <input type="text" class="form-control" id="editsecondaryTax" name="secondaryTax" pattern="^\d+(\.\d+)?$"
              title="Secondary Tax contain only numeric characters" required>
            <span id="secondaryTax_edit_error" class="error"></span>
          </div>

          <!-- Add more edit form fields as needed -->
          <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Update</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>


<script>
  function Deactivate() {
    alert("Do you want to deactivate this role?");
  }

  function Activate() {
    alert("Do you want to activate this role?");
  }

  function confirmDelete(url) {
    if (confirm("Are you sure want to delete?")) {
      window.location.href = url;
    }
  }

  $(function () {
    var activeTab = $('[href=' + location.hash + ']');
    activeTab && activeTab.tab('show');
    alert(activeTab);
  });
</script>




<script type="text/javascript">

  $(document).ready(function () {
    $('#add_tax_charges').validate({
      rules: {
        taxTypeName: {
          required: true,
          minlength: 3,
          maxlength: 75,
        },
        taxType: {
          required: true,
        },
        primaryTax: {
          required: true,
        },
        secondaryTax: {
          required: true,
          minlength: 0,
          maxlength: 10,
        },
      },
      messages: {
        taxTypeName: {
          required: 'Tax type name is required',
          minlength: 'Tax type name is must be greaterthan or equals to 3 charecters',
          maxlength: 'Tax type name is must be lessthan or equals to 75 charecters',
        },
        taxType: {
          required: 'Tax type is required',

        },
        primaryTax: {
          required: 'Primary tax is required',
          minlength: 'Primary tax Name is must be greaterthan or equals to 1',
          maxlength: 'Primary tax must be lessthan or equals to 100',

        },
        secondaryTax: {
          required: 'Secondary tax is required',
          minlength: 'Secondary tax must be greaterthan or equals to 1',
          maxlength: 'Secondary tax must be lessthan or equals to 9999999999',
        },
      },
      errorPlacement: function (error, element) {
        const field = element.attr("name");
        $("#" + field + "_error").text(error.text());
      },
      submitHandler: function (form, event) {
        $('.form_submit').prop('disabled', true);
        $('#newLoadingModel').show();
        event.preventDefault();
        getLocationAndProceed(
          function (lat, lng) {

            $(form).find('input[name="latitude"]').val(lat);
            $(form).find('input[name="longitude"]').val(lng);
            $.ajax({
              url: form.action,
              type: form.method,
              data: $(form).serialize(),
              xhrFields: {
                withCredentials: true   // THIS ensures cookies/session are sent
              },
              success: function (response) {
                if (response.responseStatus == 1 || response.responseStatus == 4) {
                  form.reset();
                  location.reload();
                } else if (response.responseStatus == 0) {
                  $('.form_submit').prop('disabled', false);
                  $('#newLoadingModel').hide();
                  $.each(response.result, function (key, value) {
                    $('#' + key + "_error").text(value)
                  });
                  return false;
                } else if (response.responseStatus == 2) {
                  $('.form_submit').prop('disabled', false);
                  $('#newLoadingModel').hide();
                  $('#errorMessage').text(response.result);
                  return false;
                } else {
                  location.reload();
                }

              },
              error: function (xhr) {
                // You can also reload page after error (e.g. CSRF token mismatch)
                location.reload();
              }
            });
          },
          function () {
            $('.form_submit').prop('disabled', false);
            $('#newLoadingModel').hide();
            alert("Location access is required to proceed. Please enable it in your browser.");
          }
        );
      }
    });
    $('#updatetaxForm').validate({
      rules: {
        taxTypeName: {
          required: true,
          minlength: 3,
          maxlength: 75,
        },
        taxType: {
          required: true,
        },
        primaryTax: {
          required: true,
        },
        secondaryTax: {
          required: true,
          minlength: 0,
          maxlength: 10,
        },
      },
      messages: {
        taxTypeName: {
          required: 'Tax type Name is required',
          minlength: 'Tax type Name is must be greaterthan or equals to 3 charecters',
          maxlength: 'Tax type Name is must be lessthan or equals to 75 charecters',
        },
        taxType: {
          required: 'Tax type is required',

        },
        primaryTax: {
          required: 'Primary tax is required',
          minlength: 'Primary tax Name is must be greaterthan or equals to 1',
          maxlength: 'Primary tax must be lessthan or equals to 100',

        },
        secondaryTax: {
          required: 'Secondary tax is required',
          minlength: 'Secondary tax must be greaterthan or equals to 1',
          maxlength: 'Secondary tax must be lessthan or equals to 9999999999',
        },
      },
      errorPlacement: function (error, element) {
        const field = element.attr("name");
        $("#" + field + "_edit_error").text(error.text());
      },
      submitHandler: function (form, event) {
        $('.form_submit').prop('disabled', true);
        $('#newLoadingModel').show();
        event.preventDefault();
        getLocationAndProceed(
          function (lat, lng) {

            $(form).find('input[name="latitude"]').val(lat);
            $(form).find('input[name="longitude"]').val(lng);
            $.ajax({
              url: form.action,
              type: form.method,
              data: $(form).serialize(),
              xhrFields: {
                withCredentials: true   // THIS ensures cookies/session are sent
              },
              success: function (response) {
                $(".error").text("");

                if (response.responseStatus == 1) {
                  form.reset();
                  location.reload();
                } else if (response.responseStatus == 0) {
                  $('.form_submit').prop('disabled', false);
                  $('#newLoadingModel').hide();
                  $.each(response.result, function (key, value) {
                    $('#' + key + "_edit_error").text(value)
                  });
                  return false;
                } else if (response.responseStatus == 2) {
                  $('.form_submit').prop('disabled', false);
                  $('#newLoadingModel').hide();
                  $('#EditErrorMessage').text(response.result);
                  return false;
                } else {
                  location.reload();
                }
              },
              error: function (xhr) {
                // You can also reload page after error (e.g. CSRF token mismatch)
                location.reload();
              }

            });
          },
          function () {
            $('.form_submit').prop('disabled', false);
            $('#newLoadingModel').hide();
            alert("Location access is required to proceed. Please enable it in your browser.");
          }
        );
      }
    });
  });
</script>
{% endblock %}