<div class="row">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#">شئون العاملين</a></li>
            <li><a href="employeesreport.php?do=show">تقرير موظف </a></li>
            <li class="active">اضافة</li>
        </ol>
        <div class="panel panel-default panel-m">
            <div class="panel-heading">
                <h3 class="panel-title">اضافة</h3>
            </div>
            <div class="panel-body"> {literal}
                <form class="nameToBeChecked form-horizontal" role="form" action="employeesreport.php?do=add"
                      method="post" enctype="multipart/form-data" id="spform">
                    {/literal}

                    <!-- =================================================   -->
                   <div class="form-group">
                        <label class="col-lg-2 control-label">الموظف</label>
                         <div class="col-lg-4">
                            <span>
                        <select name="employee_name" class=" select2" required data-placeholder="اختر الموظف" class="select2 wdt100" >
                             <option value="-1">اختر الموظف</option>
                            {foreach $showData as $data}
                                <option value="{$data.id}">{$data.name}</option>
                            {/foreach}
                        </select>
                        </span>
                        </div>
                    </div>
                   <div class="form-group">
                        <label class="col-lg-2 control-label">اختر سنة :</label>
                        <div  class="col-lg-4">
                            <input type="text" name="year" id="yearOnlyPicker" class="form-control" value="{$currentYear}" readonly>
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        </div>
                    </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">اساسي</label>
                            <div class="col-lg-4">
                                <span id="sprytextfield2">
                                    <input name="basic_salary" id="basic_salary" type="number" class="calc-input form-control " />
                                    
                            </div>
                        </div>
                        <div class="form-group">
                      <label class="col-lg-2 control-label">غلاء معيشة</label>
                        <div class="col-lg-4">
                            <input name="cost_of_living" id="cost_of_living" type="number" class="calc-input form-control"  />
                        </div>
                        </div>
                        <div class="form-group">
                      <label class="col-lg-2 control-label">علاوة اجتماعية</label>
                        <div class="col-lg-4">
                            <input name="social_allowance" id="social_allowance" type="number" class="calc-input form-control" />
                            
                        </div>
                    </div>
                        <div class="form-group">
                      <label class="col-lg-2 control-label">بدل تمثيل</label>
                        <div class="col-lg-4">
                            <input name="representation" id="representation" type="number" class="calc-input form-control" />
                              
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label" style="font-weight: bold;">منحة شهرية</label>
                        <div class="col-lg-4">
                            <input name="monthly_grant" id="monthly_grant" type="number"  class="calc-input form-control" style=" font-weight: bold;" />
                            
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label" style="font-weight: bold;">حافز اثابة</label>
                        <div class="col-lg-4">
                            <input name="incentive" id="incentive" type="number" class="calc-input form-control" style=" font-weight: bold;" />
                             
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label" style="font-weight: bold;">بدل ارشيف</label>
                        <div class="col-lg-4">
                            <input name="archive_allowance" id="archive_allowance" type="number" class="calc-input form-control" style=" font-weight: bold;" />
                           
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label" style="font-weight: bold;">الاجمالي</label>
                        <div class="col-lg-4">
                            <input name="total_salary" id="total_salary" type="number" class="form-control" style="background: #e9ecef; font-weight: bold;" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label" style="font-weight: bold;">اجمالي حصة الجمعية</label>
                        <div class="col-lg-4">
                            <input  name="association_share" id="association_share" type="number" readonly class="form-control" style="background: #e9ecef; font-weight: bold;" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label" style="font-weight: bold;">اجمالي حصة العامل</label>
                        <div class="col-lg-4">
                            <input  name="employee_share" id="employee_share" type="number" readonly class="form-control" style="background: #e9ecef; font-weight: bold;" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label" style="font-weight: bold;">الاجمالي</label>
                        <div class="col-lg-4">
                            <input name="total_with_rep" id="total_with_rep" type="number"  class="form-control" />
                        </div>
                    </div>

                       <div class="form-group">
                           <label class="col-lg-2 control-label">اجمالي علاوات سابقة</label>
                        <div class="col-lg-4">
                            <input name="prev_allowances" id="prev_allowances" type="number" class="calc-input form-control"  />
                        </div>
                    </div>
                      <div class="form-group">
                           <label class="col-lg-2 control-label">علاوات سابقة حتي 2013</label>
                        <div class="col-lg-4">
                            <input name="prev_allowances_2013" id="prev_allowances_2013" type="number" class="calc-input form-control"  />
                        </div>
                    </div>
                         <div class="form-group">
                           <label class="col-lg-2 control-label">الصافي</label>
                        <div class="col-lg-4">
                            <input name="net_salary" id="net_salary" type="number" class="calc-input form-control"  />
                        </div>
                    </div>
                    <label>الدمغة :</label>
                      
                      <div class="form-group">
                           <label class="col-lg-2 control-label">الصافي</label>
                        <div class="col-lg-4">
                            <input name="final_net" id="final_net" type="number" class="calc-input form-control"  />
                        </div>
                    </div>
                    <div class="form-group">
                           <label class="col-lg-2 control-label">حصة العامل</label>
                        <div class="col-lg-4"  id="workers-container">
                            <div class="worker-row" style="margin-bottom: 10px;">
                                <input name="final_employee_share"  type="number" class="form-control "  />
                            </div>
                            <div class="worker-row" style="margin-bottom: 10px;">
                                <input name="final_after_deduction"  type="number" class="form-control "  />
                            </div>
                            <div class="worker-row" style="margin-bottom: 10px;">
                                <input name="stamp_bracket_1"  type="number" class="form-control "  />
                            </div>
                            <div class="worker-row" style="margin-bottom: 10px;">
                                <input name="stamp_bracket_2"  type="number" class="form-control "  />
                            </div>
                            <div class="worker-row" style="margin-bottom: 10px;">
                                <input name="stamp_bracket_3"  type="number" class="form-control "  />
                            </div>
                            <div class="worker-row" style="margin-bottom: 10px;">
                                <input name="stamp_bracket_4" type="number" class="form-control "  />
                            </div>
                            <div class="worker-row" style="margin-bottom: 10px;">
                                <input name="stamp_bracket_5"  type="number" class="form-control "  />
                            </div>
                        </div>
                    </div>
                     
                    <div class="form-group">
                           <label class="col-lg-2 control-label">نسبة الدمغة</label>
                        <div class="col-lg-4" id="percentage-container">
                            <div class="percentage-row" style="margin-bottom: 10px;">
                                <input name="stamp_1"  type="number" class="percentage-input form-control" />
                            </div>
                            <div class="percentage-row" style="margin-bottom: 10px;">
                                <input name="stamp_2"  type="number" class="percentage-input form-control" />
                            </div>
                            <div class="percentage-row" style="margin-bottom: 10px;">
                                <input name="stamp_3"  type="number" class="percentage-input form-control" />
                            </div>
                            <div class="percentage-row" style="margin-bottom: 10px;">
                                <input name="stamp_4"  type="number" class="percentage-input form-control" />
                            </div>
                            <div class="percentage-row" style="margin-bottom: 10px;">
                                <input name="stamp_5"  type="number" class="percentage-input form-control" />
                            </div>
                        </div>
                        
                    </div>
                    <div class="form-group">
                           <label class="col-lg-2 control-label">الدمغة</label>
                        <div class="col-lg-4">
                            <input name="stamp_total" id="stamp_total" type="number" class="calc-input form-control"  />
                        </div>
                    </div>
                     
                    <label> الضرائب :</label>
                  
                    <div class="form-group">
                           <label class="col-lg-2 control-label">اجمالي الاجر السنوي</label>
                        <div class="col-lg-4">
                            <input name="tax_basic_annual" id="tax_basic_annual" type="number" class="calc-input form-control" readonly  />
                        </div>
                    </div>
                      <div class="form-group">
                           <label class="col-lg-2 control-label">الحوافز</label>
                        <div class="col-lg-4">
                            <input name="incentives" id="incentives" type="number" class="calc-input form-control"  />
                        </div>
                    </div>
                       <div class="form-group">
                           <label class="col-lg-2 control-label">اجمالي الحوافز السنوية</label>
                        <div class="col-lg-4">
                            <input name="tax_incentives_annual" id="tax_incentives_annual" type="number" class="calc-input form-control" readonly  />
                        </div>
                    </div>
                    <div class="form-group">
                           <label class="col-lg-2 control-label">منصرف عاملين</label>
                        <div class="col-lg-4">
                            <input name="tax_disbursed" id="tax_disbursed" type="number" class="calc-input form-control"  />
                        </div>
                    </div>
                      <div class="form-group">
                           <label class="col-lg-2 control-label"> الاجمالي</label>
                        <div class="col-lg-4">
                            <input name="tax_gross_annual" id="tax_gross_annual" type="number" class="calc-input form-control" readonly  />
                        </div>
                    </div>
                    <div class="form-group">
                           <label class="col-lg-2 control-label">ص.خ</label>
                        <div class="col-lg-4">
                            <input name="skh" id="skh" type="number" class="calc-input form-control"  />
                        </div>
                    </div>
                      <div class="form-group">
                           <label class="col-lg-2 control-label">  ص.خ سنوية</label>
                        <div class="col-lg-4">
                            <input name="tax_health_insurance" id="tax_health_insurance" type="number" class="calc-input form-control" readonly  />
                        </div>
                    </div>
                     <div class="form-group">
                           <label class="col-lg-2 control-label">الدمغة السنوية</label>
                        <div class="col-lg-4">
                            <input name="tax_stamp_annual" readonly id="tax_stamp_annual" type="number" class="calc-input form-control"  />
                        </div>
                    </div>
                     <div class="form-group">
                           <label class="col-lg-2 control-label">حصة العامل السنوية</label>
                        <div class="col-lg-4">
                            <input name="tax_employee_share_annual" id="tax_employee_share_annual" readonly type="number" class="calc-input form-control"  />
                        </div>
                    </div>
                     <div class="form-group">
                           <label class="col-lg-2 control-label">ع.س.سابقة اجمالية</label>
                        <div class="col-lg-4">
                            <input name="tax_prev_allowances_annual" id="tax_prev_allowances_annual" readonly type="number" class="calc-input form-control"  />
                        </div>
                    </div>
                   <div class="form-group">
                           <label class="col-lg-2 control-label">ص.خ منصرف</label>
                        <div class="col-lg-4">
                            <input name="tax_health_disbursed" id="tax_health_disbursed" type="number" class="calc-input form-control"  />
                        </div>
                    </div>
                   <div class="form-group">
                           <label class="col-lg-2 control-label">دمغة منصرف</label>
                        <div class="col-lg-4">
                            <input name="tax_stamp_disbursed" id="tax_stamp_disbursed" type="number" class="calc-input form-control"  />
                        </div>
                    </div>
                   <div class="form-group">
                           <label class="col-lg-2 control-label">الصافي</label>
                        <div class="col-lg-4">
                            <input name="taxable_annual" id="taxable_annual" type="number" class="calc-input form-control"  />
                        </div>
                    </div>
                   <div class="form-group">
                           <label class="col-lg-2 control-label">الاعفاء الضريبي</label>
                        <div class="col-lg-4">
                            <input name="tax_exemption" id="tax_exemption" type="number" class="calc-input form-control"  />
                        </div>
                    </div>
                   <div class="form-group">
                           <label class="col-lg-2 control-label">الاعفاء الوظيفي</label>
                            <div class="col-lg-4">
                                <input name="job_exemption"  type="number" class=" form-control"  />
                            </div>
                    </div>
                   <div class="form-group">
                           <label class="col-lg-2 control-label">بعد الاعفاءات</label>
                            <div class="col-lg-4">
                                <input name="net_after_exemptions"  type="number" class=" form-control"  />
                            </div>
                    </div>
                   <div class="form-group">
                           <label class="col-lg-2 control-label">الضريبة</label>
                            <div class="col-lg-4">
                                <input name="tax_10_percent"  type="number" class=" form-control"  />
                            </div>
                    </div>
                   <div class="form-group">
                           <label class="col-lg-2 control-label">الضريبة الشهرية</label>
                            <div class="col-lg-4">
                                <input name="tax_monthly"  type="number" class=" form-control"  />
                            </div>
                    </div>
                    <!-- =================================================   -->
                    <div class="form-group">
                        <div class="col-lg-offset-2 col-lg-4">
                            <button type="button" class="btn btn-primary pull-left" id="spbutton">حفظ</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{literal}
<script type="text/javascript">
    var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");
    var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2");
    $('#spbutton').live('click', function (e) {
        if (!$('#spbutton').hasClass("processing")) {
            $('#spbutton').addClass("processing");
            var myForm = document.getElementById("spform");
            var SS = Spry.Widget.Form.validate(myForm);
            if (SS == true) {
                myForm.submit();
            } else {
                $('#spbutton').removeClass("processing");
            }
        }
    });
$(document).ready(function() {
    $('#nature').on('change', function() {
        if ($(this).val() === 'other') {
            $('#other_input_container').show();
        } else {
            $('#other_input_container').hide(); 
            $('#other_nature').val(''); 
        }
    });
});
$(document).ready(function(){
    $('#name').on('change', function() {
        let sideValue = $(this).find(':selected').data('side');
        if (sideValue) {
                $('#side').val(sideValue);
            } else {
                $('#side').val(''); 
            }
        });
});

function doCalculation() {
    let salary = parseFloat($('#basic_salary').val()) || 0;
    let livingcost    = parseFloat($('#cost_of_living').val()) || 0;
    let socialbonus = parseFloat($('#social_allowance').val()) || 0;
    let acting  = parseFloat($('#representation').val()) || 0;
    let monthlygrant   = parseFloat($('#monthly_grant').val()) || 0;
    let incentive       = parseFloat($('#incentive').val()) || 0;
    let archive      = parseFloat($('#archive_allowance').val()) || 0;
    let stamp     = parseFloat($('#stamp_total').val()) || 0;
    let penalties = parseFloat($('#penalties').val()) || 0;
    let tax       = parseFloat($('#tax').val()) || 0;
    let comp_sal_p       = parseFloat($('#comp_sal_p').val()) || 0;
    let comp_sal_q       = parseFloat($('#comp_sal_q').val()) || 0;
    let work_sal_p       = parseFloat($('#work_sal_p').val()) || 0;
    let work_sal_q       = parseFloat($('#work_sal_q').val()) || 0;
    let comp_liv_q       = parseFloat($('#comp_liv_q').val()) || 0;
    let comp_liv_p       = parseFloat($('#comp_liv_p').val()) || 0;
    let work_liv_q       = parseFloat($('#work_liv_q').val()) || 0;
    let work_liv_p       = parseFloat($('#work_liv_p').val()) || 0;
    let comp_social_q       = parseFloat($('#comp_social_q').val()) || 0;
    let comp_social_p       = parseFloat($('#comp_social_p').val()) || 0;
    let work_social_q       = parseFloat($('#work_social_q').val()) || 0;
    let work_social_p       = parseFloat($('#work_social_p').val()) || 0;
    let comp_act_q       = parseFloat($('#comp_act_q').val()) || 0;
    let comp_act_p       = parseFloat($('#comp_act_p').val()) || 0;
    let work_act_q       = parseFloat($('#work_act_q').val()) || 0;
    let work_act_p       = parseFloat($('#work_act_p').val()) || 0;
    let comp_month_q       = parseFloat($('#comp_month_q').val()) || 0;
    let comp_month_p       = parseFloat($('#comp_month_p').val()) || 0;
    let work_month_q       = parseFloat($('#work_month_q').val()) || 0;
    let work_month_p       = parseFloat($('#work_month_p').val()) || 0;
    let comp_incen_q       = parseFloat($('#comp_incen_q').val()) || 0;
    let comp_incen_p       = parseFloat($('#comp_incen_p').val()) || 0;
    let work_incen_q       = parseFloat($('#work_incen_q').val()) || 0;
    let work_incen_p       = parseFloat($('#work_incen_p').val()) || 0;
    let comp_arc_q       = parseFloat($('#comp_arc_q').val()) || 0;
    let comp_arc_p       = parseFloat($('#comp_arc_p').val()) || 0;
    let work_arc_p       = parseFloat($('#work_arc_p').val()) || 0;
    let work_arc_q       = parseFloat($('#work_arc_q').val()) || 0;
    let worker_stamp       = parseFloat($('#worker_stamp').val()) || 0;
    let basic =  parseFloat($('#basic').val()) || 0;
    let dismissed =  parseFloat($('#tax_disbursed').val()) || 0;
    let prev_allowances =  parseFloat($('#prev_allowances_2013').val()) || 0;
    let incentives =  parseFloat($('#incentives').val()) || 0;
    let skh =  parseFloat($('#skh').val()) || 0;
    let bonuses =  parseFloat($('#employee_share').val()) || 0;
    let totalEarn = salary + livingcost + socialbonus + acting + monthlygrant + incentive + archive;
    $('#total_salary').val(totalEarn.toFixed(2));
    let comp_earns_total = comp_sal_p + comp_sal_q + comp_liv_q + comp_liv_p + comp_social_q + comp_social_p + comp_act_q + comp_act_p + comp_month_q + comp_month_p + comp_incen_q + comp_incen_p + comp_arc_q + comp_arc_p;
    $('#association_share').val(comp_earns_total.toFixed(2));
    let work_earns_total = work_sal_p + work_sal_q + work_liv_q + work_liv_p + work_social_q + work_social_p + work_act_q + work_act_p + work_month_q + work_month_p + work_incen_q + work_incen_p + work_arc_p + work_arc_q;
    $('#employee_share').val(work_earns_total.toFixed(2));
  
  
  let total_basic = salary * 12;
    $('#tax_basic_annual').val(total_basic.toFixed(2));
    
  
  let total_worker_stamp = worker_stamp * 12;
    $('#total_worker_stamp').val(total_worker_stamp.toFixed(2));
    
  let total_incentives = incentives * 12;
    $('#tax_incentives_annual').val(total_incentives.toFixed(2));
    
  let total_income = total_basic + total_incentives + dismissed;
    $('#tax_gross_annual').val(total_income.toFixed(2));
    
       
  let total_skh = skh * 12;
    $('#tax_health_insurance').val(total_skh.toFixed(2));
   
       
  let total_stamp = stamp * 12;
    $('#tax_stamp_annual').val(total_stamp.toFixed(2));
   
  let total_bonuses = bonuses * 12;
    $('#tax_employee_share_annual').val(total_bonuses.toFixed(2));
   
  let total_prev = prev_allowances * 12;
    $('#tax_prev_allowances_annual').val(total_prev.toFixed(2));
   
    
  let netTotal = totalEarn - totalDeductions;
    $('#net').val(netTotal.toFixed(2));
}

$(document).on('input', '.calc-input', function() {
    doCalculation();
});
  $(document).ready(function() {
    $('#yearOnlyPicker').datepicker({
        format: "yyyy",             
        viewMode: "years",          
        minViewMode: "years",       
        autoclose: true,            
        orientation: "bottom"
    }).on('changeDate', function(e) {
        var selectedYear = e.format();
        window.location.href = 'employeesreport.php?do=show&year=' + selectedYear;
    });
});
$(document).ready(function() {
    $('.worker-row').not(':first').hide();
    $('.percentage-row').not(':first').hide();
    $('.work_exemption-row').not(':first').hide();
    $(document).on('input', '.worker-input', function() {
        let currentInput = $(this);
        let parentRow = currentInput.closest('.worker-row');
        let nextRow = parentRow.next('.worker-row');
        if (currentInput.val().trim() !== "") {
            nextRow.show(); 
        } else {
            if(nextRow.find('.worker-input').val() === "") {
             nextRow.hide(); 
            }
        }
    });
    $(document).on('input', '.percentage-input', function() {
        let currentInput = $(this);
        let parentRow = currentInput.closest('.percentage-row');
        let nextRow = parentRow.next('.percentage-row');
        if (currentInput.val().trim() !== "") {
            nextRow.show(); 
        } else {
            if(nextRow.find('.percentage-input').val() === "") {
             nextRow.hide(); 
            }
        }
    });
    $(document).on('input', '.work_exemption-input', function() {
        let currentInput = $(this);
        let parentRow = currentInput.closest('.work_exemption-row');
        let nextRow = parentRow.next('.work_exemption-row');
        let index = $('.work_exemption-input').index(currentInput);
        if (index === 1) {
            let value = parseFloat(currentInput.val()) || 0;
            let result = value * 0.10; 
            $('.work_exemption-input').eq(2).val(result.toFixed(2));
            $('.work_exemption-row').eq(2).show();
            $('.work_exemption-row').eq(3).show();
        }
        if (currentInput.val().trim() !== "") {
            nextRow.show(); 
        } else {
            if(nextRow.find('.work_exemption-input').val() === "") {
             nextRow.hide(); 
            }
        }
    });
});

</script>
{/literal}
 