<?php $CI =& get_instance(); ?>
<div class="sales_item_modal">
   <div class="modal fade in" id="sales_item" tabindex='-1'>
      <div class="modal-dialog modal-sm">
         <div class="modal-content">
            <div class="modal-header bg-primary" style="padding: 10px 15px;">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true" style="color:#fff;">&times;</span></button>
               <h4 class="modal-title"><i class="fa fa-edit"></i> Edit Item</h4>
            </div>
            <div class="modal-body" style="padding: 12px;">
               <!-- Item Name -->
               <div style="background:#e3f2fd; padding:8px 10px; border-radius:4px; margin-bottom:12px;">
                  <i class="fa fa-cube text-primary"></i> <strong id='popup_item_name' style="font-size:13px;"></strong>
               </div>

               <!-- Tax Settings -->
               <div class="row">
                  <div class="col-xs-6" style="padding-right:5px;">
                     <div class="form-group" style="margin-bottom:10px;">
                        <label style="font-size:11px; margin-bottom:3px;"><i class="fa fa-calculator"></i> Tax Type</label>
                        <select class="form-control input-sm" id="popup_tax_type" name="popup_tax_id">
                           <option value="Exclusive">Exclusive</option>
                           <option value="Inclusive">Inclusive</option>
                        </select>
                     </div>
                  </div>
                  <div class="col-xs-6" style="padding-left:5px;">
                     <div class="form-group" style="margin-bottom:10px;">
                        <label style="font-size:11px; margin-bottom:3px;"><i class="fa fa-percent"></i> Tax Rate</label>
                        <select class="form-control input-sm" id="popup_tax_id" name="popup_tax_id">
                           <?php
                           $query2="select * from db_tax where status=1 and store_id=".get_current_store_id();
                           $q2=$this->db->query($query2);
                           if($q2->num_rows()>0) {
                              echo '<option value="">-Select-</option>';
                              foreach($q2->result() as $res1) {
                                 echo "<option data-tax='".$res1->tax."' data-tax-value='".$res1->tax_name."' value='".$res1->id."'>".$res1->tax_name."</option>";
                              }
                           } else {
                              echo '<option value="">No Tax</option>';
                           }
                           ?>
                        </select>
                     </div>
                  </div>
               </div>

               <!-- Discount Settings -->
               <div style="background:#fff3e0; padding:12px; border-radius:4px; margin-bottom:12px;">
                  <div style="margin-bottom:10px;">
                     <i class="fa fa-tag text-warning"></i> <strong style="font-size:12px;">Item Discount</strong>
                  </div>
                  <div class="row" style="margin-left: 0; margin-right: 0;">
                     <div class="col-xs-12" style="padding-left: 0; padding-right: 0;">
                        <div class="form-group" style="margin-bottom: 12px;">
                           <label style="font-size:11px; margin-bottom: 8px; font-weight: 600; display: block; min-height: 18px; line-height: 1.4;">Type</label>
                           <select class="form-control input-sm" id="item_discount_type" name="item_discount_type" style="height: 36px; font-size: 13px; padding: 6px 12px; width: 100%;">
                              <option value='Percentage' selected>% Percent</option>
                              <option value='Fixed'>Fixed (<?= $CI->currency() ?>)</option>
                           </select>
                        </div>
                     </div>
                     <div class="col-xs-12" style="padding-left: 0; padding-right: 0;">
                        <div class="form-group" style="margin-bottom: 0;">
                           <label style="font-size:11px; margin-bottom: 8px; font-weight: 600; display: block; min-height: 18px; line-height: 1.4;">Value</label>
                           <div class="input-group input-group-sm" style="display: flex; width: 100%;">
                              <span class="input-group-addon" id="discount_addon" style="height: 36px; line-height: 24px; padding: 6px 12px; font-size: 13px; min-width: 50px; text-align: center; background-color: #3498db; color: #fff; border-color: #3498db; display: flex; align-items: center; justify-content: center;">%</span>
                              <input type="text" class="form-control text-right" id="item_discount_input" name="item_discount_input" placeholder="0" value="0" onkeyup="click_this(event,'.set_options')" style="height: 36px; font-size: 13px; padding: 6px 12px; flex: 1;">
                           </div>
                        </div>
                     </div>
                  </div>
               </div>

               <!-- Notes -->
               <div class="form-group" style="margin-bottom:0;">
                  <label style="font-size:11px; margin-bottom:3px;"><i class="fa fa-comment"></i> Notes</label>
                  <textarea class="form-control input-sm" id="popup_description" placeholder="Optional..." rows="2" style="resize:none;"></textarea>
               </div>
            </div>
            <div class="modal-footer" style="padding:10px 12px; background:#f5f5f5;">
               <input type="hidden" id="popup_row_id">
               <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
                  <i class="fa fa-times"></i> Cancel
               </button>
               <button type="button" onclick="set_info()" class="btn btn-success btn-sm set_options">
                  <i class="fa fa-check"></i> Apply
               </button>
            </div>
         </div>
      </div>
   </div>
</div>

<script>
$(document).ready(function() {
   // Update discount addon when type changes
   $('#item_discount_type').on('change', function() {
      var type = $(this).val();
      var addonText = type == 'Percentage' ? '%' : '<?= $CI->currency() ?>';
      $('#discount_addon').text(addonText);
      
      // Update addon styling for currency
      if(type == 'Fixed') {
         $('#discount_addon').css({
            'background-color': '#3498db',
            'color': '#fff',
            'border-color': '#3498db'
         });
      } else {
         $('#discount_addon').css({
            'background-color': '#3498db',
            'color': '#fff',
            'border-color': '#3498db'
         });
      }
   });
   
   // Initialize on modal show
   $('#sales_item').on('shown.bs.modal', function() {
      var currentType = $('#item_discount_type').val();
      var addonText = currentType == 'Percentage' ? '%' : '<?= $CI->currency() ?>';
      $('#discount_addon').text(addonText);
   });
});
</script>
