<style>
    .table thead tr >th{
        background-color: #4c0870;
        color:#fff;
    }
    .table thead tr th[class*='sorting_'] {
        color: #FFFFFF;
    }
    .bg-master-lighter {
        border:none;
        background-color:#fff;
        border-top:1px solid #ddd; 
    }
    .datepicker thead tr .dow {
        color:#ed9421 !important;
    }
    .datepicker table tr td.day:hover {
        background: #ed9421 !important;
        color:#fff;
    }
    .datepicker table tr td.active {
        background-color: #ed9421 !important;
    }
    .datepicker thead tr .datepicker-switch {
        color: #ed9421  !important;
        font-size: 13px;
    }
    .datepicker table tr td span.active {
        background-color: #ed9421 !important;
    }
    .datepicker table tr td span:hover {
        background-color: #ed9421 !important;
        color:#fff;
    }
    datepicker thead tr .next:before, .datepicker thead tr .prev:before {
        color: #ed9421 !important;
        font-family: 'FontAwesome';
        font-size: 10px;
    }
    .datepicker thead tr .next:before, .datepicker thead tr .prev:before {
        color: #ed9421 !important;
        font-family: 'FontAwesome';
        font-size: 10px;
    }
</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($title); ?></div>
            <div class="row">
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('Date') ?></label>
                    <input id="Request_List_Date" type="text" class="form-control" name="From_To_Date" >
                </div>
            </div>
        </div>
        <div class="panel-body" >
            <div class="row">
                <div class="col-md-12 table-responsive">
                    <table class="table table-bordered stock" id="tableWithSearch" >
                        <thead>
                            <tr>
                                <th class="text-center" style="width:5%" ><input type="checkbox" class="req_check_all_td pull-left multi_delete"/>#</th>
                                <?php if (!$is_transfer) { ?>
                                <th class="text-center"  ><?php print CommonLanguage::getMessage('Delivery_Date'); ?></th>
                                <?php } ?>
                                <th class="text-center"  ><?php print CommonLanguage::getMessage('From'); ?></th>
                                <th class="text-center" ><?php print CommonLanguage::getMessage('To'); ?></th>
                                <?php if (!$is_transfer) { ?>
                                <th class="text-center" ><?php print CommonLanguage::getMessage('status'); ?></th>
                                <?php } ?>
                                <th class="text-center" ><?php print CommonLanguage::getMessage('Action'); ?></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        <tfoot>
                            <th>
                                <?php if ($permissions->hasPermission('multi_delete_request')) { ?>
                                <button class="btn bg-complete-darker white m-b-10 full-width" id="delete_all"><?php echo CommonLanguage::getMessage('Delete'); ?></button>
                                <?php } ?>
                            </th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <?php if (!$is_transfer) { ?>
                            <th></th>
                            <th></th>
                            <?php } ?>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="ConfirmDeleteReq" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <div id="delete_alert"></div>
                <h4 class="modal-title"><?php print CommonLanguage::getMessage('Confirm_Delete') ?></h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 m-t-10">
                        <p><?php print CommonLanguage::getMessage('about_delete_req') ?>&nbsp;<span id="req_nb" class="bold red-star"></span></p>
                        <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 width-auto" id="req_delete"><?php print CommonLanguage::getMessage('delete') ?></button>
            </div>
        </div>
    </div>
</div>
<script>
    var title = <?php echo json_encode($title); ?>,
        Deleted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Deleted_Successfully')); ?>,
            today = <?php echo json_encode($today) ?>,
                is_transfer = <?php echo json_encode($is_transfer) ?>,
                    req_to_delete = [], req_nb_del = [];
    $(function () {
        var data_session = get_storage_element(page_link);
        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)
        }
        change_table()
        $("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'));
            change_table();
        });
        $("input[name=From_To_Date]").on('cancel.daterangepicker', function (ev, picker) {
            window.startDate = ''
            window.endDate = ''
            $(this).val('');
            change_table();
        });
        //        $("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')]
        //            }
        //        }, function (start, end, label) {
        //            window.startDate = start.format("YYYY-MM-DD"),
        //                    window.endDate = end.format("YYYY-MM-DD");
        //            change_table();
        //        });

        $("#tableWithSearch").on("click", "input.req_check_all_td", function (e) {
            var is_checked = $(this).is(":checked");
            var row = $("#tableWithSearch").dataTable().fnGetNodes();
            for (var i = 0; i < row.length; i++) {
                $(row[i]).find("input.req_del_td").prop("checked", is_checked);
            }
        });
        $("#delete_all").on("click", function () {
            req_to_delete = [];
            req_nb_del = [];
            $("#tableWithSearch .req_del_td:checked").each(function () {
                req_to_delete.push($(this).attr("data-id"));
                req_nb_del.push($(this).attr("data-nb"));
            });
            if ($("#tableWithSearch .req_del_td:checked").length > 0) {
                $("#req_nb").html(req_nb_del.join());
                $("#ConfirmDeleteReq").modal("show");
            }
        })
        $("#tableWithSearch").on("click", ".delete_request", function () {
            req_to_delete = [$(this).parents(".Action").attr("data-id")];
            $("#req_nb").html($(this).parents("tr").find("input.req_del_td").attr("data-nb"));
            if ($(this).attr('data-ticketing-id')) {
                $("#delete_alert").attr("class", "alert alert-danger").html('<?php echo CommonLanguage::getMessage('transfer_linked_to_ticketing');?>');
                $('#req_delete').prop('disabled', true);
            }else{
                $('#req_delete').prop('disabled', false);
                 $("#delete_alert").html('').addClass("hidden")
            }
            $("#ConfirmDeleteReq").modal("show");
        });
        $("#req_delete").on("click", function () {
            var data = req_to_delete;
            $.ajax({
                url: "StockAjax/delete_request",
                method: "POST",
                dataType: 'json',
                data: {ids: data},
                complete: function (v1, v2) {
                    if (v2 == 'success') {
                        var response = v1.responseJSON;
                        if (response[0] == 'OK') {
                            if (response[1] == '')
                                $("#delete_alert").attr("class", "alert alert-success").html(Deleted_Successfully)
                            else
                                $("#delete_alert").attr("class", "alert alert-danger").html(response[1])
                            req_to_delete = []
                            change_table()
                            setTimeout(function () {
                                $("#ConfirmDeleteReq").modal("hide")
                                $("#delete_alert").addClass("hidden")
                            }, 1500)
                        } else {
                            $("#delete_alert").attr("class", "alert alert-danger").html(response[1])
                        }
                    }
                }
            })
        })
        $("#tableWithSearch").on("click",".print_request", function () {
            var myurl = "Stock/view_transfer_details/" + $(this).parents(".Action").attr("data-id");
            printExternal(myurl);
        });
    });

    function change_table() {
        //        alert()
        var optns = {
            cb_ft: function (dt_optns) {
                // stop sorting for column since on click on header checkbox the sorting is triggered
                dt_optns.columnDefs.push({targets: [0], "orderable": false});
            },
        };
        var Data = {from_date: window.startDate,
                    to_date: window.endDate,
                    Date: $("input[name=From_To_Date]").val(),
                    is_transfer: is_transfer};
        set_storage_element(page_link, Data)
        RebuildDataTable(title, [0, 1, 2, 3, 4], 'StockAjax/RequestListRequest',
                         Data, '', [], optns);
    }
</script>