

<script>
  const familiesArr = <%- familiesObj %>;
  const selectedStudentId = "<%= studentId || '' %>";

  const $studentId = $('#student_id');
  const RECURRING_LIMITS = {
    daily: <%= parseInt(process.env.RECUR_DAILY_LIMIT || 6) %>,
    weekly: <%= parseInt(process.env.RECUR_WEEKLY_LIMIT || 12) %>,
    monthly: <%= parseInt(process.env.RECUR_MONTHLY_LIMIT || 15) %>,
    yearly: <%= parseInt(process.env.RECUR_YEARLY_LIMIT || 24) %>
  };
</script>

<script>
  async function selectCard(card, type) {
    $('.transaction-card').removeClass('selected');
    $(card).addClass('selected');
    $('#transaction_type').val(type);
    $("#transactionHeading").text(type + " Transaction");

    //clear validation errors
    clearValidationErrors('#payment-refund-form');
    clearValidationErrors('#charges-discount-form');

    // Reset all form fields before switching
    resetForm('#payment-refund-form',type);
    resetForm('#charges-discount-form',type);

    if (type === 'Payment' || type === 'Refund') {
      $('#payment-refund-form').show();
      $('#charges-discount-form').hide();
    } else {
      $('#payment-refund-form').hide();
      $('#charges-discount-form').show();
    }

    if($('#unpaidInvoices').length > 0){
      setTimeout(async function() {
        await initUnpaidInvoicesTable($('#familySelect').val());
      }, 100);
    }
    
  }

  function clearValidationErrors(formSelector) {
    const $form = $(formSelector);
    $form.find('span.help-block.text-danger').remove();
    $form.find('.is-invalid').removeClass('is-invalid');
  }

  // Utility: reset form fields
  function resetForm(formSelector,transType) {
    const $form = $(formSelector);
    $form.find('input[type="text"], input[type="number"], input[type="date"], input[type="hidden"], textarea').val('');
    $form.find('input[type="checkbox"], input[type="radio"]').prop('checked', false);
    
    $form.find('select').val('').trigger('change');
    
    $form.find('input.daterangepicker').val('');

    $form.find('.repeat_until_wrap, #recurringOptions').hide();
  }

  // Function to toggle Repeat until based on Repeat indefinitely
  function toggleRepeatUntil() {
    if ($('#repeat_indefinitely').is(':checked')) {
      $('#repeat_until').closest('.repeat_until_wrap').show();
    } else {
      $('#repeat_until').closest('.repeat_until_wrap').show();
    }
  }

  function toggleRepeatOn() {
    const frequency = $('input.repeat-frequency:checked').val();
    if (frequency === 'daily') {
      $('#repeat_on').show();
      $('#repeat_on').find('.repeat_on_checkbox').prop('checked',true);
      // $('#repeat_indefinitely').closest('.repeat_indefinitely_wrap').show();
      $('#monthlyRepeatOptions').hide();
      $('#repeat_until').closest('.repeat_until_wrap').show();
    } else if (frequency === 'monthly') {
      $('#repeat_on').hide();
      $('#repeat_on').find('.repeat_on_checkbox').prop('checked',false);
      $('#monthlyRepeatOptions').show();
      // $('#repeat_indefinitely').closest('.repeat_indefinitely_wrap').show();
    } else {
      $('#repeat_on').hide();
      $('#repeat_on').find('.repeat_on_checkbox').prop('checked',false);
      $('#monthlyRepeatOptions').hide();
      // $('#repeat_indefinitely').closest('.repeat_indefinitely_wrap').show();
      toggleRepeatUntil();
    }
  }

  async function initUnpaidInvoicesTable(studentId) {
    // Destroy if already initialized
    if ($.fn.DataTable.isDataTable('#unpaidInvoices')) {
      $('#unpaidInvoices').DataTable().destroy();
      $('#unpaidInvoices tbody').empty();
    }
    if($('#transaction_type').val() != 'Payment'){
      $('#selected-unpaid-invoices').hide();
      return;
    }

    let totalAmount = 0;
    const table = $('#unpaidInvoices').DataTable({
      processing: true,
      serverSide: true,
      ordering: true,
      responsive: false,
      // scrollX: true,
      autoWidth: false,
      dom: 't',
      ajax: {
        url: '/families-invoices/get-unpaid-invoices',
        type: 'POST',
        data: { studentId: studentId },
        dataSrc: function (json) {
          if (json.results && json.results.invoices.length > 0) {
            $('#selected-unpaid-invoices').show();

            // attach currency to each invoice row
            json.results.invoices.forEach(inv => {
              inv.currency = json.results.currency;
            });
            
            return json.results.invoices;
          } else {
            $('#selected-unpaid-invoices').hide();
            return []; // no data
          }
        }
      },
      columns: [
        {
          data: null,
          orderable: false,
          render: function(data, type, row){ 
            return `<input class="text-center unpaid-invoice" name="selected_invoices[]" data-amount="${row.invoice_amount}" value="${row._id}" type="checkbox" />`;
          },
          className: "text-center"
        },
        {
          data: "date",
          orderable: true,
          render: (data, type, row) =>
            `${new Date(row.date).toLocaleDateString("en-GB")}<br>
            ${new Date(row.date_range.start).toLocaleDateString("en-GB")} -
            ${new Date(row.date_range.end).toLocaleDateString("en-GB")}`
        },
        { data: "invoice_number",orderable: true },
        {
          data: "invoice_amount",
          orderable: true,
          render: function (data, type, row, meta) {
            return `${row.currency ? row.currency.symbol : ''}${data}`;
          }
        }
      ],
      drawCallback: function () {
        // Re-bind checkbox change every time table redraws
        $('.unpaid-invoice').off('change').on('change', function () {
          recomputeTotal();
        });
      },
      order: [[1, 'desc']],
    });

  }

  // Function to recalc based on checked invoices
  function recomputeTotal() {
    totalAmount = 0;
    $('.unpaid-invoice:checked').each(function () {
      totalAmount += parseFloat($(this).data('amount')) || 0;
    });
    $('#payment_refund_amount').val(totalAmount);
    if(totalAmount > 0){
      $('#payment_refund_amount').attr('readonly',true);
    }else{
       $('#payment_refund_amount').removeAttr('readonly');
    }
  }

  $(function () {

    $('#payment_refund_date, #charges_discount_date').daterangepicker({
        singleDatePicker: true,
        showDropdowns: true,
        locale: { format: 'DD-MM-YYYY' }
    });

    // Force input value update on apply
    $('#payment_refund_date, #charges_discount_date').on('apply.daterangepicker', function(ev, picker) {
      $(this).val(picker.startDate.format('DD-MM-YYYY'));
    });

    if($('.transaction-card').length > 0){
      const firstCard = $('.transaction-card').first();
      selectCard(firstCard[0], 'Payment');
    }

    $('.select2').select2({ width: '100%' });

    $(document).on('click', function (e) {
      if (!$(e.target).closest('.category-dropdown').length) {
        $('.drop-options').slideUp();
      }
    });
    
    // Show/hide recurring section
    $('#recurring').on('change', function () {
      if ($(this).is(':checked')) {
        $('#recurringOptions').slideDown();
      } else {
        $('#recurringOptions').slideUp();
      }
    }); 

    // Trigger toggle when frequency changes
    $('input.repeat-frequency').on('change', function () {
      toggleRepeatOn();
    });    
    
    $('#repeat_indefinitely').on('change', function () {
      toggleRepeatUntil();
    });

    $('#familySelect').on('change', async function () {
      let selectedId = selectedStudentId || $(this).val();
      
      const student = familiesArr.find(f => f._id === selectedId || f._id?.$oid === selectedId);
      $studentId.empty().append('<option value="">Select...</option>');
      
      if (student) {
        if(selectedStudentId){
          $(this).val(selectedStudentId);
        }
        $studentId.append(`<option value="${student._id}">${student.studentName}</option>`);

        const contactDropdown = $('#emailRecipient');
        contactDropdown.empty().append('<option value="">Select...</option>');
        let emailExist = false;
        if (Array.isArray(student.contacts)) {
          student.contacts.forEach(contact => {
            if (contact.email) {
              let fullName = contact.first_name ? `${contact.first_name} ${contact.last_name}`: contact.company_name;
              emailExist = true;
              contactDropdown.append(`<option value="${contact.email}" data-contact-user-id="${contact._id}">${fullName + ' ('+ contact.email +')' || contact.email}</option>`);
            }
          });
        }
        if(emailExist){
          if($('#sendReceipt').prop('checked')){
            $('#emailDetails').slideDown();
          }
          $('#send-receipt-wrapper').slideDown();
        }else{
          $('#emailDetails').slideUp();
          $('#send-receipt-wrapper').slideUp();
          $('#sendReceipt').prop('checked', false);
        }
        await initUnpaidInvoicesTable(selectedId);
        
      }else{
        $studentId.empty().append('<option>No students found</option>');
      }
    });

    $(document).on('change','#emailRecipient', function(event){
      let contactId = $(this).find('option:selected').attr('data-contact-user-id');
      let $form = $(this).parents('form');
      if(contactId){
        $form.find('#emailRecipient').append('<input type="hidden" name="contact_user_id" id="contact_user_id" value="'+contactId+'" />');
      }else{
        $form.find('#contact_user_id').remove();
      }
    });

    // Select/Deselect All
    $(document).on('change', '#select_all', function () {
      let isChecked = $(this).is(':checked');
      $('#unpaidInvoices tbody input[type="checkbox"]').prop('checked', isChecked);
      recomputeTotal();
    });

    // Sync Select All if individual row changes
    $(document).on('change', '#unpaidInvoices tbody input[type="checkbox"]', function () {
      let total = $('#unpaidInvoices tbody input[type="checkbox"]').length;
      let checked = $('#unpaidInvoices tbody input[type="checkbox"]:checked').length;

      $('#select_all').prop('checked', total === checked);
    });

    let selectedStudentId = '<%= studentId %>';

    if(selectedStudentId){
      $('#familySelect').val(selectedStudentId).trigger('change');
      $('#family-dropdown').hide();
    }

    // Toggle email details on checkbox
    $('#sendReceipt').on('change', function () {
      if ($(this).is(':checked')) {
        if($('#familySelect').val() == "" || $('#student_id').val() == ""){
          $('#emailDetails').slideDown();
        }
        else{
          $('#emailDetails').slideDown();
        }
      } else {
        $('#emailDetails').slideUp();
      }
    });


        // Toggle SMS details on checkbox
    // $('#sendSMSReceipt').on('change', function () {
    //   if ($(this).is(':checked')) {
    //     if($('#familySelect').val() == "" || $('#student_id').val() == ""){
    //       $('#smsDetails').slideUp();
    //     } else {
    //       $('#smsDetails').slideDown();
    //     }
    //   } else {
    //     $('#smsDetails').slideUp();
    //   }
    // });

    // Populate SMS recipient when family changes
    // $('#familySelect').on('change', function () {
    //   const selectedId = $(this).val();
    //   const student = familiesArr.find(f => f._id === selectedId || f._id?.$oid === selectedId);

    //   const smsDropdown = $('#smsRecipient');
    //   smsDropdown.empty().append('<option value="">Select...</option>');

    //   let phoneExist = false;
    //   if (student && Array.isArray(student.contacts)) {
    //     student.contacts.forEach(contact => {
    //       if (contact.phone) {
    //         phoneExist = true;
    //         smsDropdown.append(`<option value="${contact.phone}" data-contact-user-id="${contact._id}">${contact.full_name + ' ('+ contact.phone +')' || contact.phone}</option>`);
    //       }
    //     });
    //   }

    //   if (phoneExist) {
    //     if($('#sendSMSReceipt').prop('checked')){
    //       $('#smsDetails').slideDown();
    //     }
    //     $('#send-sms-wrapper').slideDown();
    //   } else {
    //     $('#smsDetails').slideUp();
    //     $('#send-sms-wrapper').slideUp();
    //     $('#sendSMSReceipt').prop('checked', false);
    //   }
    // });

    // Handle hidden input for selected SMS contact user
    // $(document).on('change','#smsRecipient', function(event){
    //   let contactId = $(this).find('option:selected').attr('data-contact-user-id');
    //   let $form = $(this).parents('form');
    //   if(contactId){
    //     $form.find('#smsRecipient').append('<input type="hidden" name="sms_contact_user_id" id="sms_contact_user_id" value="'+contactId+'" />');
    //   } else {
    //     $form.find('#sms_contact_user_id').remove();
    //   }
    // });


    const $select = $('#category-select');

    // Initialize select2 with custom markup
    $select.select2({
      placeholder: 'Optional',
      allowClear: true,
      dropdownParent: $('body'),
      language: {
        noResults: function () {
          return `
            <div class="px-2 py-1">
              <button class="btn btn-sm btn-link w-100 text-start" id="triggerAddCategory">
                <i class="fa fa-plus text-primary me-1"></i> Add new category
              </button>
              <div id="addCategoryForm" style="display: none;" class="mt-2">
                <input type="text" class="form-control" id="newCategoryInput" placeholder="Enter category name" />
                <div class="d-flex justify-content-between mt-2">
                  <button class="btn btn-sm btn-success" id="saveCategoryBtn">Save</button>
                  <button class="btn btn-sm btn-secondary" id="cancelCategoryBtn">Cancel</button>
                </div>
              </div>
            </div>
          `;
        }
      },
      escapeMarkup: function (markup) {
        return markup;
      }
    });

    // Event binding on dropdown open
    $select.on('select2:open', function () {
      const $results = $('.select2-results');

      // Prevent duplicate bindings
      $results.off('click', '#triggerAddCategory');
      $results.off('click', '#cancelCategoryBtn');
      $results.off('click', '#saveCategoryBtn');

      // Show form
      $results.on('click', '#triggerAddCategory', function (e) {
        e.stopPropagation();
        $('#addCategoryForm').slideDown();
      });

      // Hide form
      $results.on('click', '#cancelCategoryBtn', function (e) {
        e.stopPropagation();
        $(document).find('#newCategoryInput .text-danger').remove();
        $('#addCategoryForm').slideUp();
      });

      // Save new category
      $results.on('click', '#saveCategoryBtn', function (e) {
        e.stopPropagation();
        $(document).find('#newCategoryInput .text-danger').remove();
        const name = $('#newCategoryInput').val().trim();
        if (!name) return alert('Please enter a name');

        $.ajax({
          url: '/families-invoices/categories/store',
          method: 'POST',
          data: { name },
          success: function (res) {
            if (res.success && res.category) {
              const newOption = new Option(res.category.name, res.category._id, true, true);
              $select.append(newOption).trigger('change');
              $select.select2('close');
            } else {
              alert(res.error || 'Failed to add category');
            }
          },
          error: function (response) {
            if (response.responseJSON && response.responseJSON.errors) {
              response.responseJSON.errors.forEach(err => {
                $(document).find('#newCategoryInput').after(`<div class="text-danger">${err.msg}</div>`);
              });
            } else {
              alert("Something went wrong.");
            }
          }
        });
          
      });
    });

     function calculateMaxDate(frequency, startDate) {
    return moment(startDate, 'DD-MM-YYYY').add(RECURRING_LIMITS[frequency], 'months').format('YYYY-MM-DD');
  }

  function updateRepeatUntilDate() {
    const frequency = $('input.repeat-frequency:checked').val();
    const startDate = $('#payment-refund-form').is(':visible') ? $('#payment_refund_date').val() : $('#charges_discount_date').val();
    

     // For daily frequency, check if at least one day is selected
  if (frequency === 'daily') {
    const selectedDays = $('.repeat_on_checkbox:checked').length;
    if (selectedDays === 0) {
      console.log('No days selected for daily recurrence');
      $('#repeat_until').val(''); // Clear the date if no days selected
      return;
    }
  }

    if (frequency && startDate) {
    const maxDate = calculateMaxDate(frequency, startDate);
    // Always update the repeat until date when days change
    $('#repeat_until').val(maxDate);
    validateDate();
  }
  }

  function validateDate() {
  const frequency = $('input.repeat-frequency:checked').val();
  const startDate = $('#payment-refund-form').is(':visible') ? $('#payment_refund_date').val() : $('#charges_discount_date').val();
  const selectedDate = $('#repeat_until').val();
  
  if (frequency && startDate && selectedDate) {
    const maxDate = calculateMaxDate(frequency, startDate);
    if (moment(selectedDate).isAfter(maxDate)) {
      $('#maxAllowedDate').text(moment(maxDate).format('DD-MM-YYYY'));
      $('#repeatUntilWarning').show();
      $('#repeat_until').data('max-date', maxDate);
    } else {
      $('#repeatUntilWarning').hide();
      $('#repeat_until').removeData('max-date');
    }
  }
}

   $('#payment_refund_date, #charges_discount_date').on('apply.daterangepicker', updateRepeatUntilDate);
  $('input.repeat-frequency').on('change', updateRepeatUntilDate);
  $('#recurring').on('change', updateRepeatUntilDate);
  $('#repeat_until').on('change', validateDate);
  });
</script>


<script>
  $(document).ready(function () {
    $('#add-transaction-form').submit(function (e) {
      e.preventDefault();
      $('#submit_form').attr('disabled',true);
      $(document).find("span.text-danger").remove();

        const maxDate = $('#repeat_until').data('max-date');
        if (maxDate) $('#repeat_until').val(maxDate);

      const formData = $(this).serialize();
      
      const url = $(this).attr('action');

      $.ajax({
        type: "POST",
        url: url,
        data: formData,
        success: function (response) {
          // console.log('response',response);
          if (response.success === true) {
            window.location = response.redirectUrl;
          }
        },
        error: function (response) {
          if (response.responseJSON?.errors) {
              $.each(response.responseJSON.errors, function (field_name, error) {
                const $field = $(`[id=${error.param}]`);
                
                if ($field.hasClass('select2-hidden-accessible')) {
                    $field.next('.select2').after(`<span class="help-block text-danger">${error.msg}</span>`);
                } else {
                    $field.after(`<span class="help-block text-danger">${error.msg}</span>`);
                }
            });
          }
        },
        complete: function(response){
          $('#submit_form').attr('disabled',false);
        }
      });
    });
    
  });
</script>