

<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;">
                <a class="btn btn-success rounded add-btn" href="<?= base_url('calculation-list') ?>" target="_blank"> View Calculations</a>
              </div>
             </div>

        </div>
        <div class="card-body">
          <form class="row g-3" id="add-form">
            <?php if($this->session->userdata('usertype') !== 'staff'){ ?>
            <div class="col-md-12">
              <label class="form-label">Staff</label>
              <select name="staff_id" class="form-control" id="staff_id">
                  <option value="">Select</option>
                  <?php foreach($staffs as $staff){ ?>
                    <option value="<?= $staff['id']; ?>"><?= $staff['fullname']; ?></option>
                  <?php } ?>
              </select>                   
            </div>
            <?php } ?>
            <div class="col-md-2">
              <label class="form-label">Currency</label>
              <select name="currency[]" class="form-control" id="currency" required>
                  <option value="">Select</option>
                  <option value="INR">INR</option>
                  <option value="USD">USD</option>
              </select>                   
            </div>
            <div class="col-md-3">
              <label class="form-label">Offering</label>
              <select name="offering_id[]" class="form-control" id="offering_id" required>
                  <option value="">Select</option>
                  <?php foreach($offerings as $offering){ ?>
                    <option value="<?= $offering['id']; ?>"><?= $offering['name']; ?></option>
                  <?php } ?>
              </select>                   
            </div>
            <div class="col-md-2">
              <label class="form-label">No. of hours</label>
              <input type="number" id="no_of_hours" name="no_of_hours[]" class="form-control" required>                  
            </div>
            <div class="col-md-4">
              <label class="form-label">Type</label>
              <div class="col-lg-12">
                <div class="element-type grp-btns" data-bs-toggle="buttons">
                  <label class="btn btn-light">
                    <input type="radio" name="type_1" value="Regular" required> Regular
                  </label>
                  <label class="btn btn-light">
                    <input type="radio" name="type_1" value="Premium"> Premium
                  </label>
                  <label class="btn btn-light">
                    <input type="radio" name="type_1" value="High Ticket"> High Ticket
                  </label>
                </div>
              </div>     
            </div>
            <div id="checkpoint_newinput"></div>
            <div class="text-left">
              <button type="submit" class="btn btn-primary">Calculate</button>
              <button id="checkpointRowAdder" type="button" class="btn btn-secondary">
                  <i class="bi bi-plus"></i> Add Offering
              </button>
            </div>
          </form>
        </div>
      </div>

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

</main><!-- End #main -->
<!-- Calculation Modal -->
<div class="modal fade modal-bookmark" id="viewCalculationModal" 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">Calculation</h5>
        <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div>
        <table class="table table-striped table-hover">
            <thead>
              <tr>
                  <th>Offering</th>
                  <th>Currency</th>
                  <th>Ticket Type</th>
                  <th>No. of hours</th>
                  <th>Price</th>
              </tr>
            </thead>
            <tbody id="calculation-details">
              
            </tbody>
        </table>
        </div>
      </div>
    </div>
  </div>
</div>



<script>
$(document).ready(function(){  
$('#viewCalculationModal').modal({
       backdrop: 'static',
       keyboard: false
})
});

$("#add-form").submit(function(e){
e.preventDefault();
// disableButton();
$.ajax({
  url: "<?php echo base_url('calculator/calculatePricing'); ?>",
  method: "POST",
  data:  new FormData(this),
  cache: false,
  contentType: false,
  processData: false,
  success:function(res){
    enableButton();
      $('#viewCalculationModal').modal('toggle'); 
      $('#calculation-details').html(res);
      $('#add-form')[0].reset();
    
  }
});
})

</script>


<script>
        $(document).ready(function(){
        var i = 1;

        $("#checkpointRowAdder").click(function () {
            i++;
            var newRowAdd = `
                <div class="row checkpoint-add-row g-2 mt-2">
                    <div class="col-md-2">
                      <label class="form-label">Currency</label>
                      <select name="currency[]" class="form-control" id="currency" required>
                          <option value="">Select</option>
                          <option value="INR">INR</option>
                          <option value="USD">USD</option>
                      </select>                   
                    </div>
                    <div class="col-md-3">
                      <label class="form-label">Offering</label>
                      <select name="offering_id[]" class="form-control" id="offering_id" required>
                          <option value="">Select</option>
                          <?php foreach($offerings as $offering){ ?>
                            <option value="<?= $offering['id']; ?>"><?= $offering['name']; ?></option>
                          <?php } ?>
                      </select>                   
                    </div>
                    <div class="col-md-2">
                      <label class="form-label">No. of hours</label>
                      <input type="number" id="no_of_hours" name="no_of_hours[]" class="form-control" required>                  
                    </div>
                    <div class="col-md-4">
                      <label class="form-label">Type</label>
                      <div class="col-lg-12">
                        <div class="element-type grp-btns" data-bs-toggle="buttons">
                          <label class="btn btn-light">
                            <input type="radio" name="type_${i}" value="Regular" required> Regular
                          </label>
                          <label class="btn btn-light">
                            <input type="radio" name="type_${i}" value="Premium"> Premium
                          </label>
                          <label class="btn btn-light">
                            <input type="radio" name="type_${i}" value="High Ticket"> High Ticket
                          </label>
                        </div>
                      </div>     
                    </div>
                </div>`;

                $('#checkpoint_newinput').append(newRowAdd);
            });

            // Event delegation for dynamically added delete buttons
            $("body").on("click", ".checkpointDeleteRow", function () {
                $(this).parents(".checkpoint-add-row").remove();
            });
        });
      </script>
