<div class="wrapper">
    <div class="panel ">
        <div class="panel-heading">
            <div class="panel-title"><?php print CommonLanguage::getMessage('employee_bank_info'); ?></div>
            <div id="alertdiv"></div>
        </div>
        <div class="panel-body">
            <div class="row  form-group">
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('departments') ?></label>
                    <input type="hidden" id="department_id" class="full-width department_id" name="department_id" />
                </div>
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('employee_name') ?></label>
                    <input type="hidden" id="employee_select_id" name="employee_select_id" class='full-width employee_select_id' />
                </div>
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('bank_name') ?></label>
                    <input type="hidden"  placeholder="<?php print CommonLanguage::getMessage('bank_name'); ?>" id="bank_id" name="bank_id" class="full-width " >
                </div>
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('nssf') . ' ?' ?></label>
                    <select id="is_nssf" class="full-width" data-init-plugin="select2" name="is_nssf" >
                        <option value=""><?php echo CommonLanguage::getMessage('All') ?></option>
                        <option value="1"><?php echo CommonLanguage::getMessage('yes') ?></option>
                        <option value="0"><?php echo CommonLanguage::getMessage('no') ?></option>
                    </select>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-3 ">
                    <label><?php echo CommonLanguage::getMessage('payment_period') ?></label>
                    <select id="shift_type" class="full-width " name="" data-init-plugin="select2">
                        <option value="0"><?php echo CommonLanguage::getMessage('weekly') ?></option>
                        <option value="1"><?php echo CommonLanguage::getMessage('monthly') ?></option>
                    </select>
                </div>
                <div class="col-md-3 date-div month-div hidden">
                    <label><?php echo CommonLanguage::getMessage('month') ?></label>
                    <input class="month_year form-control" type="text" data-date-format="yyyy-mm" value=""  />
                </div>
                <div class=" col-md-3  week-div date-div ">
                    <label><?php echo CommonLanguage::getMessage('start') ?></label>
                    <input class="from_date form-control" type="text"  />
                </div>
                <div class=" col-md-3  week-div date-div">
                    <label><?php echo CommonLanguage::getMessage('end') ?></label>
                    <input class="to_date form-control" type="text"  readonly/>
                </div>
                <div class='col-md-2 m-t-25'>
                    <button class='btn btn-success' id='search_attendance'><?php echo CommonLanguage::getMessage('search') ?></button>
                </div>
            </div>
            <div class="row">

                <div class="col-md-12 table-responsive">
                    <table class="table table-bordered hrm" id="tableWithSearch">
                        <thead>
                            <tr>
                                <th class="text-center"><?php echo CommonLanguage::getMessage('employee_name') ?></th>
                                <th class="text-center"><?php echo CommonLanguage::getMessage('arabic_name') ?></th>
                                <th class="text-center"><?php echo CommonLanguage::getMessage('bank_name') ?></th>
                                <th class="text-center"><?php echo CommonLanguage::getMessage('branch') ?></th>
                                <th class="text-center"><?php echo CommonLanguage::getMessage('bank_account') ?></th>
                                <th class="text-center"><?php echo CommonLanguage::getMessage('amount') ?></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var info_lang = <?php echo json_encode(CommonLanguage::getMessage('info')); ?>,
        titel = <?php echo json_encode(CommonLanguage::getMessage('employee_bank_info')); ?>,
            choose_date = <?php echo json_encode(CommonLanguage::getMessage('choose_date')); ?>,
                startDate =<?php echo json_encode($today); ?>, endDate =<?php echo json_encode($today); ?>,
                    error = <?php echo json_encode(CommonLanguage::getMessage('err_msg')); ?>;
                    $(function () {
                        build_select2($('.department_id'), 'HRMAjax/searchDepartment');
                        build_select2($('.employee_select_id'), 'xhr/search_emp_by_pay_period?pay_period=' + $("#shift_type").val(), 1);
                        build_select2($("#bank_id"), "HRMAjax/searchBanks?add_no_bank=1")

                        $("#shift_type").on("change", function () {
                            build_select2($('.employee_select_id'), 'xhr/search_emp_by_pay_period?pay_period=' + $("#shift_type").val(), 1);

                        })

                        $(".month_year").datepicker({autoclose: true,
                                                     viewMode: "months",
                                                     minViewMode: "months"})
                        //        build_select2($('.Payment_Method'), 'xhr/accSearch?type=Payroll')
                        $(".month_year").on("changeDate", function () {
                            var date = new Date($(this).val() + '-01T12:00:00');
                            var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
                            window.startDate = $(this).val() + '-01';
                            window.endDate = $(this).val() + '-' + lastDay;
                            //            to_date: endDate,
                            //            console.log(startDate + '==' + endDate)
                        })

                        $(".from_date,.to_date").datepicker({autoclose: true})
                        $(".from_date").on("changeDate", function () {

                            var date2 = $(this).datepicker('getDate', '+6d');
                            date2.setDate(date2.getDate() + 6);
                            $('.to_date').datepicker('setDate', date2);
                            window.startDate = $(this).val()
                            window.endDate = $('.to_date').val()

                        })
                        $("#shift_type").on("change", function () {
                            $(".date-div").addClass("hidden")

                            if ($(this).val() == 0) {
                                window.startDate = $(".from_date").val()
                                window.endDate = $('.to_date').val()
                                $(".week-div").removeClass("hidden")
                            } else
                                if ($(this).val() == 1) {
                                    var date = new Date($(".month_year").val() + '-01T12:00:00');
                                    var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
                                    window.startDate = $(".month_year").val() + '-01';
                                    window.endDate = $(".month_year") + '-' + lastDay;
                                    $(".month-div").removeClass("hidden")
                                }
                        })

                        $('#search_attendance').on('click', function () {
                            emp_id = $('#employee_select_id').val();
                            $('#alertdiv').addClass("hidden")

                            if (($("#shift_type").val() == 0 && ($(".from_date").val() == '' || $(".to_date").val() == ''))
                                || ($("#shift_type").val() == 1 && $(".month_year").val() == '')) {
                                $('#alertdiv').attr('class', ' alert alert-danger').empty().html(choose_date)
                                return;
                            }
                            var data = {
                                from_date: (window.startDate ? window.startDate : today),
                                to_date: (window.endDate ? window.endDate : today),
                                dep_id: $('#department_id').val(),
                                emp_id: $('#employee_select_id').val(),
                                bank_id: $('#bank_id').val(),
                                is_nssf: $("#is_nssf").val(),
                                pay_period: $("#shift_type").val()};

                            $.ajax({
                                url: 'HRMAjax/employee_bank_info_ajax',
                                data: data,
                                complete: function (v1, v2) {
                                    if (v2 == 'success') {
                                        $("#tableWithSearch").DataTable().destroy();
                                        $("#tableWithSearch tbody").empty().html(v1.responseText)
                                        //                    setTimeout(function () {
                                        //                    RebuildDataTable('invoices', [], "", {}, "#ref_report_table")
                                        RebuildDataTable('', [], "", {}, '', '');

                                    }
                                }
                            });
                        });

                    });

</script>