

  <main id="main" class="main">

    <section class="section">
      <div class="row">
        <div class="col-lg-12">

          <div class="card">
              <div class="card-header mb-4">
                <div class="row">
                  <div class="col-sm-6">
                    <h4 class="text-dark"><?= $title; ?></h4>
                  </div>
                  <div class="col-sm-6" style="text-align: right;">
                    <button class="btn btn-success rounded add-btn" type="button" onclick="add()"><i class="bi bi-plus"></i> Add <?= $title; ?></button>
                  </div>
                 </div>

            </div>
            <div class="card-body">
              <!-- Table with stripped rows -->
              <div class="table-responsive" id="tb">
                    </div>
              <!-- End Table with stripped rows -->

            </div>
          </div>

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

  </main><!-- End #main -->
   <!-- Add Modal -->
        <div class="modal fade modal-bookmark" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add <?= $title; ?></h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <form class="row g-3" id="add-form">
                  <div class="col-md-6">
                    <label class="form-label">Offering Category</label>
                    <select name="offering_category_id" class="form-control" id="offering_category_id">
                        <option value="">Select</option>
                        <?php foreach($offering_categories as $offering_category){ ?>
                          <option value="<?= $offering_category['id']; ?>"><?= $offering_category['name']; ?></option>
                        <?php } ?>
                    </select>                   
                  </div>
                  <div class="col-md-6">
                    <label class="form-label">Name</label>
                    <input type="text" class="form-control" id="name" name="name">
                  </div>
                  <div class="col-md-6">
                    <label class="form-label">Hourly Rate (INR)</label>
                    <input type="number" step="any" class="form-control" id="inr_hourly_rate" name="inr_hourly_rate">
                  </div>
                  <div class="col-md-6">
                    <label class="form-label">Hourly Rate (USD)</label>
                    <input type="number" step="any" class="form-control" id="usd_hourly_rate" name="usd_hourly_rate">
                  </div>
                  <div class="col-12">
                    <label class="form-label">Details</label>
                    <textarea class="form-control" id="details" name="details"></textarea>
                  </div>
                  <div class="text-left">
                    <button type="submit" class="btn btn-primary">Save</button>
                    <button type="reset" class="btn btn-danger">Reset</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>

      <!-- Edit Modal -->
      <div class="modal fade modal-bookmark" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add <?= $title; ?></h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <form class="row g-3" id="edit-form">
                    <div class="col-md-6">
                      <label class="form-label">Offering Category</label>
                      <select name="offering_category_id" class="form-control" id="e_offering_category_id">
                          <option value="">Select</option>
                          <?php foreach($offering_categories as $offering_category){ ?>
                            <option value="<?= $offering_category['id']; ?>"><?= $offering_category['name']; ?></option>
                          <?php } ?>
                      </select>                   
                    </div>
                    <div class="col-md-6">
                      <label class="form-label">Name</label>
                      <input type="text" class="form-control" id="e_name" name="name">
                    </div>
                    <div class="col-md-6">
                      <label class="form-label">Hourly Rate (INR)</label>
                      <input type="number" step="any" class="form-control" id="e_inr_hourly_rate" name="inr_hourly_rate">
                    </div>
                    <div class="col-md-6">
                      <label class="form-label">Hourly Rate (USD)</label>
                      <input type="number" step="any" class="form-control" id="e_usd_hourly_rate" name="usd_hourly_rate">
                    </div>
                    <div class="col-12">
                      <label class="form-label">Details</label>
                      <textarea class="form-control" id="e_details" name="details"></textarea>
                    </div>
                    <div class="text-left">
                      <input type="hidden" id="e_id" name="id">
                      <button type="submit" class="btn btn-primary">Save</button>
                      <button type="reset" class="btn btn-danger">Reset</button>
                    </div>
                </form>
              </div>
            </div>
          </div>
        </div>

<script>
  function add()
  {
    $('#addModal').modal('toggle'); 
    $('#add-form')[0].reset();
  }
$(document).ready(function(){  
$("#tb").html('<div class="text-center"><img src="loader.gif"></div>')
  $('#addModal').modal({
           backdrop: 'static',
           keyboard: false
    })
    $('#editModal').modal({
           backdrop: 'static',
           keyboard: false
    })
  $('#tb').load('<?= base_url('offering/viewOffering'); ?>');
});


$("#add-form").submit(function(e){
  e.preventDefault();
  disableButton();
  $.ajax({
      url: "<?php echo base_url('offering/addOffering'); ?>",
      method: "POST",
      data:  new FormData(this),
      cache: false,
      contentType: false,
      processData: false,
      dataType:'json',
      success:function(res){
        enableButton();
        if(res.return)
        {
          $('#addModal').modal('toggle'); 
          $('#add-form')[0].reset();
          $('#tb').load('<?= base_url('offering/viewOffering'); ?>');
          toastr.success(res.msg);
        }
        else
        {
          toastr.error(res.msg);
        }
        
      }
  });
})

function editData(id)
{
  $.ajax({
      url: "<?= base_url('offering/editOffering'); ?>",
      method: "POST",
        dataType: 'json',
      data: {
          id:id
      },
      success:function(res){
          $("#e_id").val(res.id);
          $("#e_offering_category_id").val(res.offering_category_id);
          $("#e_name").val(res.name);
          $("#e_inr_hourly_rate").val(res.inr_hourly_rate);
          $("#e_usd_hourly_rate").val(res.usd_hourly_rate);
          $("#e_details").val(res.details);
      }
  });
};
$("#edit-form").submit(function(e){
  e.preventDefault();
  disableButton();
  $.ajax({
      url: "<?php echo base_url('offering/updateOffering'); ?>",
      method: "POST",
      data:  new FormData(this),
      cache: false,
      contentType: false,
      processData: false,
      dataType:'json',
      success:function(res){
        enableButton();
        if(res.return)
        {
          $('#editModal').modal('toggle'); 
          $('#edit-form')[0].reset();
          $('#tb').load('<?= base_url('offering/viewOffering'); ?>');
          toastr.success(res.msg);
        }
        else
        {
          toastr.error(res.msg);
        }
        
      }
  });
})

</script>
