<style>
    .available-cert {
        background-color: green;
        color: white;
    }

    .future-cert {
        background-color: blue;
        color: white;
    }

    .expiry-cert {
        background-color: red;
        color: white;


    }
</style>
<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title"><?php print CommonLanguage::getMessage('customers_contra') ?></div>
            <div class="row">
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('Date') ?></label>
                    <div class="input-group">
                        <span class="input-group-addon bg-primary"><i class="fa fa-calendar"></i></span>
                        <input id="From_To_Date" type="text" class="form-control" name="From_To_Date" autocomplete="off" />
                    </div>
                </div>

                <?php
                echo Forms::ModalLoader('DeleteModalIsBusy')
                    . Forms::FloatingAddButton('4c0870', '#EditCustomersContra', CommonLanguage::getMessage('add'));
                ?>
            </div>
        </div>
        <div class="panel-body">
            <div id="ScaleListAlert"></div>
            <div class="row">
                <div class="col-md-12 table-responsive">
                    <table class="table table-bordered inventory" id="tableWithSearch">
                        <thead>
                            <th class="text-center" style="width:10%"><?php print CommonLanguage::getMessage('customer_name'); ?></th>
                            <th class="text-center" style="width:10%"><?php print CommonLanguage::getMessage('product_name'); ?></th>
                            <th class="text-center" style="width:10%"><?php print CommonLanguage::getMessage('start_date'); ?></th>
                            <th class="text-center" style="width:10%"><?php print CommonLanguage::getMessage('end_date'); ?></th>
                            <th class="text-center" style="width:10%"><?php print CommonLanguage::getMessage('info'); ?></th>
                            <th class="text-center" style="width:10%"><?php print CommonLanguage::getMessage('state'); ?></th>
                            <th class="text-center" style="width:10%"><?php print CommonLanguage::getMessage('file'); ?></th>
                            <th class="text-center" style="width:10%"><?php print CommonLanguage::getMessage('Action'); ?></th>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <?php echo Forms::ModalLoader('scaleListLoader'); ?>
        </div>
    </div>
</div>
<div class="modal fade bs-example-modal-md" data-backdrop="static" id="DeleteFromList" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header text-left">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-20"></i>
                </button>
                <h5 class="add-label bold"><?php echo CommonLanguage::getMessage('Confirm_Delete'); ?></h5>
                <div id="Delete_modalAlert"><span></span></div>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <p><?php print CommonLanguage::getMessage('Proceed_Delete'); ?></p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><?php print CommonLanguage::getMessage('Close'); ?></button>
                <button type="button" class="btn btn-danger" id="ConfirmDelete" style="width:auto"><?php print CommonLanguage::getMessage('delete'); ?></button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade stick-up " id="EditCustomersContra" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog " style="width:60%;margin:0 auto">
        <div class="modal-content">
            <div class="modal-header clearfix text-left">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-20"></i>
                </button>
                <h5 class="add-label bold"><?php echo CommonLanguage::getMessage('add'); ?></h5>
                <div id="EditScaleAlert"></div>
            </div>
            <div class="modal-body">
                <form id="EditScalePostForm" method="POST" action="javascript:void(0);">
                    <input type="hidden" id="old_archive_name" name="old_archive_name" />

                    <div class="row form-group">
                        <div class="col-md-6">
                            <label><?php echo CommonLanguage::getMessage('customer_name') ?> <span class="red-star">*</span></label>
                            <input required id="customer_id" name="customer_id" class="full-width customer_id" type="hidden" />
                        </div>
                        <div class="col-md-6">
                            <label><?php echo CommonLanguage::getMessage('product_name') ?> <span class="red-star">*</span></label>
                            <input required id="product_id" name="product_id" class="full-width product_id" type="hidden" />
                        </div>

                        <div class="col-md-6">
                            <label><?php echo CommonLanguage::getMessage('start_date') ?> <span class="red-star">*</span></label>
                            <input required type="date" id="start_date" name="start_date" class="form-control " required>
                        </div>
                        <div class="col-md-6">
                            <label><?php echo CommonLanguage::getMessage('end_date') ?> <span class="red-star">*</span></label>
                            <input required type="date" id="end_date" name="end_date" class="form-control " required>
                        </div>
                        <div class="col-md-12">
                            <label><?php echo CommonLanguage::getMessage('contra_info') ?> </label>
                            <textarea class="form-control " id="contra_info" name="contra_info" style="overflow: hidden; word-wrap: break-word; resize:vertical "></textarea>
                        </div>
                        <div class="row form-group  ">
                            <label>
                                <?php print CommonLanguage::getMessage('file'); ?>
                            </label>
                            <input type="file" onchange="ValidateForNewAttachment(this,['.jpg','.png','.jpeg','.docx','.pdf'])" name="archive_name" class="form-control">
                        </div>

                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" id="CloseEdit" data-dismiss="modal"> <?php print CommonLanguage::getMessage('Close'); ?> </button>
                <button class="btn btn-primary" id="SubmitEntry"> <?php print CommonLanguage::getMessage('Save'); ?> </button>
            </div>
            <?php echo Forms::ModalLoader('AjaxIsBusy') ?>
        </div>
    </div>
</div>
<div class="modal fade bs-example-modal-md" id="ResetScaleModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-20"></i>
                </button>
                <h5 class="add-label bold"><?php echo CommonLanguage::getMessage('confirm_reset'); ?></h5>
                <div id="Reset_modalAlert"><span></span></div>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 ">
                        <p><?php print CommonLanguage::getMessage('Proceed_Delete'); ?></p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><?php print CommonLanguage::getMessage('Close'); ?></button>
                <button type="button" class="btn btn-danger" id="ConfirmReset" style="width:auto"><?php print CommonLanguage::getMessage('reset'); ?></button>
            </div>
            <?php echo Forms::ModalLoader('ResetModalIsBusy') ?>
        </div>
    </div>
</div>
<script>
    var Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>,
        Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields')); ?>,
        Data_Exists = <?php echo json_encode(CommonLanguage::getMessage('Data_Exists')); ?>,
        AddLang = <?php echo json_encode(CommonLanguage::getMessage('add')); ?>,
        EditLang = <?php echo json_encode(CommonLanguage::getMessage('Edit')); ?>,
        title = <?php echo json_encode(CommonLanguage::getMessage('general_setting')); ?>,
        Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>;
    var ToDelete, TRtoEdit, ToReset, ipToReset, IfEdit = false;
    $(function() {
        build_select2($(".Class_ID"), "xhr/PricingClassSearch");
        build_select2($('#product_id'), 'xhr/ProductSearch');

        ChangeTable()
        build_select2($('#customer_id'), 'xhr/customerSearch');

        var data_session = get_storage_element(page_link);
        if (data_session.branch_name != '') {
            $("#current_branch_id").val(data_session.branch_id).attr("data-select-name", data_session.branch_name)
        }
        if (data_session.person_name != '') {
            $("#customer_supplier_id").val(data_session.customer_supplier_id).attr("data-select-name", data_session.person_name)
        }
        if (data_session.Date != '') {
            window.startDate = data_session.from_date;
            window.endDate = data_session.to_date;
            $("input[name=From_To_Date]").val(data_session.Date)
        }
        $("input[name=From_To_Date]").daterangepicker({
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            locale: {
                cancelLabel: 'Clear'
            },
            allowEmpty: false,
            autoUpdateInput: false
        });

        $("input[name=From_To_Date]").on('apply.daterangepicker', function(ev, picker) {
            window.startDate = picker.startDate.format('YYYY-MM-DD'),
                window.endDate = picker.endDate.format('YYYY-MM-DD');
            $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
            ChangeTable();
        });
        $("input[name=From_To_Date]").on('cancel.daterangepicker', function(ev, picker) {
            window.startDate = ''
            window.endDate = ''
            $(this).val('');
            ChangeTable();
        });

        $('#tableWithSearch').on('click', '.Action .Delete', function() {
            $("#DeleteFromList").modal("show")
            ToDelete = $(this).parents("tr").find(".Action").attr('data-id');
        })
        $("#ConfirmDelete").on("click", function() {
            $("#DeleteModalIsBusy").removeClass('hidden')
            var dataToDelete = {
                id: ToDelete
            };
            $.ajax({
                type: 'POST',
                url: 'InventoryAjax/deleteCustomersContra',
                data: dataToDelete,
                complete: function(data, vv) {
                    if (vv == "success") {
                        if (data.responseText == 'OK') {
                            $("#Delete_modalAlert").addClass("alert alert-success").show().html(Submitted_Successfully);
                            ChangeTable()
                            setTimeout(function() {
                                $("#DeleteFromList").modal("hide")
                                $("#Delete_modalAlert").hide()
                            }, 1000)
                        } else {
                            $("#Delete_modalAlert").addClass("alert alert-danger").show().html(Failed_Submit);
                        }
                    } else {
                        $("#Delete_modalAlert").addClass("alert alert-danger").show().html(Failed_Submit);
                    }
                    $("#DeleteModalIsBusy").addClass('hidden')
                }
            });
        })
        $('.actionButton ').on("click", function() {
            IfEdit = false;
        })
        $('#tableWithSearch').on('click', '.Action .Edit', function() {
            IfEdit = true;
            TRtoEdit = $(this).parents('tr').find('.Action').attr('data-id');
            $.ajax({
                type: 'GET',
                url: 'InventoryAjax/get_customers_contra',
                data: {
                    id: TRtoEdit
                },
                dataType: 'json',
                complete: function(v1, v2) {
                    if (v2 == "success") {
                        var data = v1.responseJSON;
                        $("#customer_id").val(data['customer_id']).attr("data-select-name", data['Customer_Name'])
                        build_select2($("#customer_id"), "xhr/customerSearch")
                        $("#product_id").val(data['customer_product_id']).attr("data-select-name", data['Product_Name'])
                        build_select2($("#product_id"), "xhr/ProductSearch")

                        $("#old_archive_name").val(data['file_name'])
                        $("#start_date").val(data['start_date'])
                        $('#end_date').val(data['end_date'])
                        $("#contra_info").val(data['contra_info'])
                        $("#EditCustomersContra").modal("show")
                    }
                }
            })

        })
        $("#SubmitEntry").on("click", function() {
            if ($("#scale_name").val() == '' || $("#scale_ip").val() == '' || $("#scale_type").val() == '') {
                $("#EditScaleAlert").attr("class", "alert alert-danger").show().html(Required_Fields);
                return false;
            }
            $("#AjaxIsBusy").removeClass('hidden')

            var Data = new FormData(document.getElementById("EditScalePostForm"));
            if (IfEdit) {
                Data.append('id', TRtoEdit);
            }

            $.ajax({
                url: IfEdit ? 'InventoryAjax/updateCustomerContra' : 'InventoryAjax/addCustomerContra',
                method: 'POST',
                data: Data,
                processData: false,
                contentType: false,
                dataType: "JSON",
                complete: function(data_ajax, vv) {
                    console.log('data_ajax')
                    console.log(data_ajax)
                    var data = data_ajax.responseJSON;
                    if (data[1] == "success") {
                        $("#EditScaleAlert").attr("class", "alert alert-success").show().html(data[0]);
                        ChangeTable()
                        setTimeout(function() {
                            $("#EditCustomersContra").modal("hide")
                            $("#EditScaleAlert").hide();
                        }, 1000)
                        $("#AjaxIsBusy").addClass('hidden')

                    } else {
                        $("#EditScaleAlert").attr("class", "alert alert-danger").show().html(data[0]);
                    }


                }
            });
        })
    })

    function ChangeTable() {

        var Data = {
            from_date: window.startDate,
            to_date: window.endDate
        }
        RebuildDataTable(title, [0, 1], 'InventoryAjax/CustomersContraList', Data);

    }
</script>