{% include 'header.twig' %}
<style>
  body {
    background-image: url('app/views/Simplify/image/Background.png');
    background-repeat: repeat;
    background-size: cover;
    font-family: 'Segoe UI', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
  }
  
  .wrapper-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    overflow: hidden;
  }
  
  .note {
    background: #0e79e3;
    border-radius: 15px;
    padding: 15px;
    border-left: 4px solid #333;
    margin: 20px 0;
    font-weight: bold;
  }
  
  .btn-primary {
    background-color: #333;
    border-color: #333;
    padding: 10px 15px;
    font-weight: bold;
  }
  
  .btn-primary:hover {
    background-color: #555;
    border-color: #555;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  .form-control {
    border-radius: 4px;
    padding: 10px;
    border: 1px solid #ddd;
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
  
  th {
    background-color: #333;
    color: white;
  }
  
  tr:hover {
    background-color: #f5f5f5;
  }
  
  .whatsapp-support {
    background: #25D366;
    color: white;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
    text-align: center;
  }
  
  .whatsapp-link {
    display: inline-block;
    background: white;
    color: #25D366;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 10px;
  }
  
  @media (max-width: 768px) {
    .wrapper-content {
      padding: 10px;
    }
    
    th, td {
      padding: 8px 10px;
    }
  }
</style>

<div class="wrapper-content">
  <div class="wrapper-content__header"></div>
  <div class="wrapper-content__body">
    <div id="block_93">
      <div class="add-funds__form">
        <div class="container">
          <div class="row">
            {% if contentText %}
              <div class="col-lg-12 mt-2">
                <div class="card mb-2">
                  {{ contentText }}
                </div>
              </div>
            {% endif %}

            <div class="col-lg">
              <div class="component_form_group component_card component_radio_button">
                <div class="component_card">
                  <div class="card mt-2 mb-2">
              <div class="note"><b>Manual Ödəniş (Yoxlanışla)</b></div>

    <table class="bank-table">
      <thead>
        <tr>
          <th>Bank Adı</th>
          <th>Kart Nömrəsi</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Bank 1</td>
          <td>0000 0000 0000 0000</td>
        </tr>
        <tr>
          <td>Bank 2</td>
          <td>0000 0000 0000 0000</td>
        </tr>
        <tr>
          <td>Bank 3</td>
          <td>0000 0000 0000 0000</td>
        </tr>
      </tbody>
    </table>

    <div class="note">
      <strong>Diqqətlə oxuyun:</strong>
      Bu kartlara ödəniş edərək çeki bizə göndərin. Minumum ödəniş 1 azn-dir.<br/>
      <br/><b>
        Kartdan Karta Köçürmə Edərək Balans Artır<br/>
        20 azn və yuxarı Balans artırmalarda + 5% Bonus
      </b>
    </div>

    <div class="whatsapp-support">
      <h2>WhatsApp Dəstək Mərkəzi</h2>
      <p>
        Ödəniş etdikdən sonra aşağıdak WhatsApp dəstək mərkəzinə göndərin:
      </p>
      <a href="https://wa.me/994000000000" class="whatsapp-link" target="_blank">WhatsApp Dəstək Mərkəzi</a>
      <div class="whatsapp-info">
        <p><b>Qeyd:</b><br/>
        Balansınıza ödənişin əlavə olunması normalda 5-15 dəqiqə ərzində həyata keçirilir. Gece vaxtı bu zaman bir az uzana bilər. Məlumatınız olsun.
        </p>
        <p>
          <strong>İstifadəçi adınızı tapmaq üçün:</strong><br/>
          Yuxarı sol tərəfə tıklayıb, üç xətə (hamburger menyu) basıb, "Hesabım" bölməsinə keçid edərək istifadəçi adınızı öyrənə bilərsiniz.
        </p>
      </div>
    </div>

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    
    <div id="formSubmitResponseMessage"></div>
    <div id="formSubmitResponseContent"></div>
    <div class="note"><b>Ödəniş Əməliyyatları</b></div>

    <div class="col-lg mt-2">
      <div class="component_content_card component_content_button component_content_headers">
        <div class="table-wr table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th>ID</th>
                <th>Tarix</th>
                <th>Növü</th>
                <th>Məbləğ</th>
              </tr>
            </thead>
            <tbody>
              {% for payment in payments %}
                <tr>
                  <td>{{ payment['id'] }}</td>
                  <td>{{ payment['date'] }}</td>
                  <td>{{ payment['name'] }}</td>
                  <td>{{ payment['amount'] }}</td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

{% include 'footer.twig' %}

<script>
  var paymentMethods = {{ site["paymentMethodsJSON"] }};
</script>

<script>
  const addfundsRoute = "/addfunds";
  function addfundsInit() {
    var addfundsForm = $("#addfundsForm");
    var fields = $("#addfunds_fields");
    var selectedMethod = $("#payment_method").val();
    var instructions = paymentMethods[selectedMethod][0].instructions;
    
    $.ajax({
      url: addfundsRoute,
      data: "action=getForm&selectedMethod=" + selectedMethod,
      type: "POST",
      success: function (json) {
        if (json.success == true) {
          if (instructions.length > 0) {
            var methodInstruction = '<div class="form-group"><label class="control-label">Instructions</label><div class="panel-body border-solid border-rounded">' + instructions + '</div></div>';
          } else {
            var methodInstruction = "";
          } 
          fields.html(methodInstruction + json.content);
          extraFeeInit(selectedMethod);
        }
      }
    });
  }

  function extraFeeInit(method) {
    var fee = parseFloat(paymentMethods[method][0].fee).toFixed(2);
    var fields = $("#fee_fields");
    if (fee > 0) {
      fields.html('<div class="form-group"><label class="control-label">Ekstra Qazanç</label><input type="text" class="form-control" id="methodExtraFee" disabled value="0.00"/></div><div class="form-group"><label class="control-label">Toplam Məbləğ</label><input type="text" id="totalAmount" class="form-control" disabled value="0.00" /></div>');
    }
  }

  function preparePrice(t) {
    n = 2;
    var r = (t = $.trim(t.toString().replace(",", "."))).split(".");
    return void 0 !== r[1] && (r[1] = r[1].replace(/0+$/g, ""), r[1].length > n && (n = 2 < r[1].length ? 2 : r[1].length)),
    1e3 <= (t =( t = parseFloat(t)).toFixed(n)) && (t = t.toString().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, "$1" + "")),
    t = t.toString().replace(/\.(\d+)$/g, "." + "$1");
    return t.toFixed(n)
  }

  $(document).ready(function () {
    $(document).on("keyup", "#paymentAmount", function () {
      var selectedMethod = $("#payment_method").val();
      var amount = parseFloat($(this).val());
      var feePercentage = parseFloat(paymentMethods[selectedMethod][0].fee);
      var feeInput = $("#methodExtraFee");
      var totalAmountInput = $("#totalAmount");
      var fee = amount * (feePercentage / 100);
      feeInput.val(preparePrice(fee));
      totalAmountInput.val(preparePrice(amount + fee));
    });
    addfundsInit();
  });

  $("#payment_method").change(function () {
    addfundsInit();
  });

  $("#addfundsForm").submit(function (e) {
    e.preventDefault();
    var data = $(this).serialize();
    $.ajax({
      url: addfundsRoute,
      data: data,
      type: "POST",
      success: function (json) {
        if (json.success == true) {
          var msgDiv = $("#formSubmitResponseMessage");
          msgDiv.html('<div class="alert alert-success alert-dismissible fade show mt-2" role="alert">' + json.message + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>');
          var contentDiv = $("#formSubmitResponseContent");
          contentDiv.html(json.content);
        } else {
          var msgDiv = $("#formSubmitResponseMessage");
          msgDiv.html('<div class="alert alert-danger alert-dismissible fade show mt-2" role="alert">' + json.message + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>');
        }
      }
    });
  });
</script>