<?php $this->load->view("common/header"); ?>
<!-- end: HEAD -->

<style type="text/css">
  .table>thead:first-child>tr:first-child>th,
  .table>thead:first-child>tr:first-child>td,
  .table-striped thead tr.primary:nth-child(2n+1) th {
    background-color: #428bca;
    border-color: #357ebd;
    border-top: 1px solid #357ebd;
    color: white;
    text-align: center;
  }
</style>
<!-- end: CSS REQUIRED FOR THIS PAGE ONLY -->
<!-- end: HEAD -->
<!-- start: BODY -->

<body>
  <!-- start: HEADER -->
  <div class="navbar navbar-inverse navbar-fixed-top">
    <!-- start: TOP NAVIGATION CONTAINER -->
    <div class="container">
      <div class="navbar-header">
        <!-- start: RESPONSIVE MENU TOGGLER -->
        <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button"> <span class="clip-list-2"></span> </button>
        <!-- end: RESPONSIVE MENU TOGGLER -->
        <!-- start: LOGO -->
        <?php $this->load->view("common/logo"); ?>
        <!-- end: LOGO -->
      </div>
      <div class="navbar-tools">
        <!-- start: TOP NAVIGATION MENU -->
        <?php $this->load->view("common/notifications.php"); ?>
        <!-- end: TOP NAVIGATION MENU -->
      </div>
    </div>
    <!-- end: TOP NAVIGATION CONTAINER -->
  </div>
  <!-- end: HEADER -->
  <!-- start: MAIN CONTAINER -->
  <div class="main-container">
    <div class="navbar-content">
      <!-- start: SIDEBAR -->
      <?php $this->load->view("common/navigation"); ?>
      <!-- end: SIDEBAR -->
    </div>
    <!-- start: PAGE -->
    <div class="main-content">
      <!-- end: SPANEL CONFIGURATION MODAL FORM -->
      <div class="container">
        <!-- start: PAGE HEADER -->
        <div class="row">
          <div class="col-sm-12">
            <!-- start: PAGE TITLE & BREADCRUMB -->
            <ol class="breadcrumb">
              <li> <a href="<?php echo base_url('dashboard'); ?>"> Dashboard </a> </li>
              <li> <a href="#"> Loan </a> </li>
              <li class="active"> Loan Payments </li>
              <li class="search-box">
                <form class="sidebar-search">
                  <div class="form-group">
                    <input type="text" placeholder="Start Searching...">
                    <button class="submit"> <i class="clip-search-3"></i> </button>
                  </div>
                </form>
              </li>
            </ol>
            <div class="page-header">
              <h3>Loan Payments</h3>
            </div>

            <!--<p>Please use the table below to navigate or filter the results. </p>-->
          </div>
        </div>
        <!-- end: PAGE HEADER -->
        <!-- start: PAGE CONTENT 
                    <!-- start grid -->
        <div class="row">
          <div class="col-md-12">

            <!------------------------------------------------------------------------->
            <div class="col-md-12">

              <div id="loanFormMessage"></div>

              <form role="form" class="form-horizontal" id="update_issue_loan_form" action="#" method="post">
                <div class="modal-header">

                  <div class="modal-body">
                    <div id="error"></div>
                    <div class="row">
                      <div class="col-md-12">
                        <div class="col-md-5">

                          <div class="form-group">
                            <label>Loan No * </label>
                            <select id="loan_id" class="form-control search-select" name="loan_id">
                              <option value="">- Select Loan -</option>
                              <?php foreach ($loan_details as $row) {
                                if ($row['is_closed'] == 0) {
                                  $st = ' [ ongoing ] ';
                                } else {
                                  $st = ' [ closed ] ';
                                }
                                $select = (isset($loan_id) && $loan_id == $row['loan_id']) ? 'selected' : '';
                              ?>
                                <option <?= $select; ?> value="<?php echo $row['loan_id']; ?>"> <?php echo $row['loan_ref'] . " [ Rs.  " . $row['loan_tot_amount'] . " ]  - " . $row['cus_name'] . " - " . $row['cus_nic'] . " " . $st; ?></option>
                              <?php } ?>
                            </select>

                          </div>

                          <!-- ← New Excel Upload Field -->
                          <div class="form-group">
                            <label>Upload Collection Excel File</label>
                            <input type="file" name="collection_excel" id="collection_excel"
                              accept=".xlsx,.xls" class="form-control">
                            <small class="text-muted">Expected format: starts from row 16, columns A=No, B=Date, C=Amount</small>
                          </div>


                        </div>



                      </div>
                    </div>
                    <!--col-md-12-->
                  </div>
                  <div class="modal-footer">
                    <div class="col-md-3">
                      <input type="button" name="update" value="Add Payment(s)"
                        class="btn btn-primary" id="update"
                        onClick="submit_update_pay_loan_form()">
                      <input type="reset" value="Reset" class="btn btn-danger">
                    </div>
                  </div>
              </form>
              <hr>
            </div>

            <!-------------------------------------------------------------------------------->
            <!-- start: DYNAMIC TABLE PANEL -->
            <div class="panel panel-default">
              <div class="panel-heading"> <i class="fa fa-external-link-square"></i>
                <div class="panel-tools" style="top:2px;">
                  <!--<button class="btn btn-blue dropdown-toggle" data-toggle="dropdown">
													<i class="clip-list-5"></i> Create New Loan
												</button>-->
                  <ul class="dropdown-menu dropdown-light pull-right">
                  </ul>
                </div>
              </div>
            </div>

          </div>
          <!-- end: DYNAMIC TABLE PANEL -->
        </div>
      </div>
    </div>

    <!-- end grid -->

  </div>
  <!-- end: PAGE -->
  </div>
  <!-- end: MAIN CONTAINER -->
  <!-- start: FOOTER -->
  <div class="footer clearfix">
    <div class="footer-inner"> <?php echo date("Y"); ?> © beanstalk Loan Management System </div>
    <div class="footer-items"> <span class="go-top"><i class="clip-chevron-up"></i></span> </div>
  </div>
  <!-- end: FOOTER -->
  <!-- start: RIGHT SIDEBAR -->
  <!-- end: RIGHT SIDEBAR -->
  <div id="event-management" class="modal fade" tabindex="-1" data-width="760" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button>
          <h4 class="modal-title">Event Management</h4>
        </div>
        <div class="modal-body"></div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-light-grey"> Close </button>
          <button type="button" class="btn btn-danger remove-event no-display"> <i class='fa fa-trash-o'></i> Delete Event </button>
          <button type='submit' class='btn btn-success save-event'> <i class='fa fa-check'></i> Save </button>
        </div>
      </div>
    </div>
  </div>

  <!-- start ajax model -->
  <div id="ajax-modal" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" style="display: none;"></div>
  <!-- end ajax model -->

  <!-- start: MAIN JAVASCRIPTS -->
  <?php $this->load->view("common/footer"); ?>
  <!-- end: MAIN JAVASCRIPTS -->
  <script src="<?php echo asset_url(); ?>js/jquery-ui.js"></script>
  <script src="<?php echo asset_url(); ?>js/moment-with-locales.js"></script>
  <script src="<?php echo asset_url(); ?>/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
  <script type="text/javascript" src="<?php echo asset_url(); ?>js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="<?php echo asset_url(); ?>js/dataTables.bootstrap.min.js"></script>
  <script type="text/javascript" src="<?php echo base_url('thems/js/bootbox.min.js'); ?>"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>



  <script>

    function submit_update_pay_loan_form() {

    var formData = new FormData(document.getElementById('update_issue_loan_form'));

    $.ajax({
        url: "<?= base_url('excel_read/add_payment'); ?>",   // ← adjust route
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        dataType: "json",
        beforeSend: function() {
            $("#update").prop("disabled", true).val("Processing...");
        },
        success: function(res) {
            if (res.status === 'success') {
                Swal.fire({
                    icon: 'success',
                    title: 'Done!',
                    text: res.message,
                    timer: 2500
                });
                // Optional: reload table / clear form
                resetLoanForm();
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: res.message || 'Something went wrong.'
                });
            }
        },
        error: function() {
            Swal.fire('Error', 'Server communication failed.', 'error');
        },
        complete: function() {
            $("#update").prop("disabled", false).val("Add Payment");
        }
    });
}

    function resetLoanForm() {
      // Reset normal inputs
      $("#update_issue_loan_form")[0].reset();

      // Reset select2 dropdown (important)
      $("#loan_id").val('').trigger('change');

      // Reset file input manually
      $("#collection_excel").val('');

      // Clear error messages (if any)
      $("#error").html('');
    }
    jQuery(document).ready(function() {


    });
  </script>
</body>
<!-- end: BODY -->

</html>