<?php
$redirect_url = user_url('plans');
$form_attributes = array('class' => 'form actionForm', 'data-redirect' => $redirect_url, 'method' => "POST");
$form_hidden = [
  'id'   => @$item->id,
];
$class_element = app_config('template')['form']['class_element'];
$class_element_editor = app_config('template')['form']['class_element_editor'];
$class_element_select = app_config('template')['form']['class_element_select'];

// ইনপুট ফিল্ডকে স্লিম ও সাধারণ করার জন্য কাস্টম ক্লাস ডিফাইন
$custom_input_class = $class_element . " rounded-2 custom-simple-input";

$general_elements = [
  [
    'label'      => form_label('Plan Name', '', ['class' => 'text-secondary small fw-medium mb-1']),
    'element'    => form_input(['name' => 'name', 'value' => @$item->name, 'type' => 'text', 'readonly' => 'readonly', 'class' => $custom_input_class, 'style' => 'height: 38px; font-size: 13px; border: 1px solid #e2e8f0; background-color: #f8fafc !important; color: #334155; font-weight: 600;']),
    'class_main' => "col-md-12 col-sm-12 mb-2",
  ],
  [
    'label'      => form_label('Plan Price', '', ['class' => 'text-secondary small fw-medium mb-1']),
    'element'    => form_input(['name' => 'price', 'value' => @$item->final_price, 'type' => 'text', 'readonly' => 'readonly', 'class' => $custom_input_class, 'style' => 'height: 38px; font-size: 14px; border: 1px solid #e2e8f0; background-color: #f8fafc !important; color: #0f172a; font-weight: 700;']),
    'class_main' => "col-md-12 col-sm-12 mb-2",
  ],
];

$data['modal_title'] = 'Buy this Plan';
?>

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700&display=swap" rel="stylesheet">

<style type="text/css">
  /* শ্যাডো এবং জটিল বর্ডার ছাড়া একদম ফ্ল্যাট মোডাল গাইডলাইন */
  .modal-content {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
  }

  /* কুপন সেকশন - ডিসপ্লে ফিক্স */
  .coupon {
    display: none !important;
  }
  .coupon.show-coupon {
    display: block !important;
  }
  
  .coupon-input-group {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    background-color: #f8fafc;
  }
  .coupon-code {
    border: none !important;
    height: 36px;
    font-size: 13px !important;
    background-color: #f8fafc !important;
  }
  .coupon-code:focus {
    box-shadow: none !important;
  }
  #apply-coupon-btn {
    border: none !important;
    border-radius: 0 !important;
    font-size: 13px;
    height: 36px;
    padding: 0 16px !important;
  }

  /* কুপন লিঙ্ক বাটন */
  .coupon-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 500;
    color: #64748b;
    margin-top: 8px;
  }
  .coupon-btn span {
    font-weight: 600;
    text-decoration: underline;
  }
  .coupon-btn:hover span {
    color: #3b82f6 !important;
  }

  /* অ্যাকশন বাটন ফিক্স (ভারী গ্লো ছাড়া স্লিম বাটন) */
  .modal-footer {
    border-top: none !important;
    padding: 0 24px 20px 24px !important;
  }
  .modal-footer .btn {
    width: 100% !important;
    border-radius: 6px !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    box-shadow: none !important;
  }
</style>

<?= view('layouts/common/modal/modal_top', $data); ?>

<?php echo form_open('', $form_attributes, $form_hidden); ?>
<div class="modal-body px-4 pt-3 pb-2">
  <div class="row">
    <?php echo render_elements_form($general_elements); ?>

    <div class="col-12 coupon">
      <div class="input-group mt-1 coupon-input-group">
        <input type="text" name="coupon" class="form-control coupon-code" placeholder="Enter coupon code">
        <button class="btn btn-primary d-flex align-items-center justify-content-center" type="button" id="apply-coupon-btn">
          <i class="fa-regular fa-square-caret-right fs-5"></i>
        </button>
      </div>
      <span id="coupon-result" class="text-danger small fw-semibold mt-1 d-block" style="font-size: 11px;"></span>
    </div>
  </div>

  <div class="coupon-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" style="vertical-align: middle;"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
    Have a coupon? <span class="text-primary">Click to enter your code</span>
  </div>
</div>

<div class="modal-footer px-4 pb-4">
  <?= modal_buttons2('BUY NOW'); ?>
</div>

<?php echo form_close(); ?>
<?= view('layouts/common/modal/modal_bottom', $data); ?>

<script type="text/javascript">
  $(document).ready(function() {
    $(".coupon-btn").unbind('click').click(function(e) {
      if ($(".coupon").hasClass('show-coupon')) {
        $(".coupon").slideUp(150, function() {
          $(this).removeClass('show-coupon');
        });
      } else {
        $(".coupon").addClass('show-coupon').hide().slideDown(150);
      }
    });
    
    $('#apply-coupon-btn').unbind('click').click(function() {
      var coupon = $('.coupon-code').val(),
        id = "<?= $item->id ?>";

      $.ajax({
        url: '<?= user_url('buy-plan/apply_coupon'); ?>',
        type: 'POST',
        data: {
          token: token,
          coupon: coupon,
          id: id
        },
        success: function(response) {
          response = JSON.parse(response);
          if (response.status == 'success') {
            $("#apply-coupon-btn").addClass('d-none');
            $('.coupon-code').attr('readonly', true);
            $('#coupon-result').removeClass('text-danger').addClass('text-success');
          }
          notify(response.message, response.status);
          $('#coupon-result').html(response.message);
        }
      });
    });
  });
</script>
