

<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: #4c0870 !important;
    }

    .datepicker table tr td.day:hover {
        background: #4c0870 !important;
        color: #fff;
    }

    .datepicker table tr td.active {
        background-color: #4c0870 !important;
    }

    .datepicker thead tr .datepicker-switch {
        color: #4c0870 !important;
        font-size: 13px;
    }

    .datepicker table tr td span.active {
        background-color: #4c0870 !important;
    }

    .datepicker table tr td span:hover {
        background-color: #4c0870 !important;
        color: #fff;
    }

    datepicker thead tr .next:before,
    .datepicker thead tr .prev:before {
        color: #4c0870 !important;
        font-family: 'FontAwesome';
        font-size: 10px;
    }

    .datepicker thead tr .next:before,
    .datepicker thead tr .prev:before {
        color: #4c0870 !important;
        font-family: 'FontAwesome';
        font-size: 10px;
    }

    .table-responsive {
        overflow-x: visible;
    }

    .complete,
    .btn-group .active {
        background-color: #4c0870!important;
color:#ed9421 !important;        color: #fff;
    }

    .btn-default {
        border: none;
        background-color: #eee;
    }

    .btn-default:hover {
        background-color: #4c0870!important;
color:#ed9421 !important;        color: #fff;
        border: none;
    }

    .select2-choice {
        width: 220px;
    }

    .panel-heading a {
        color: #eb9220!important;
        opacity: 1.4 !important;
    }
</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('loading_order_list'); ?></div>
            <div class="col-md-12">
                <div class="col-md-4">
                    <select id="ViewType" name="ViewType" data-init-plugin="select2">
                        <option value="5"><?php print CommonLanguage::getMessage('daily_loads'); ?></option>
                        <option value="1"><?php print CommonLanguage::getMessage('not_loaded'); ?></option>
                        <option value="2"><?php print CommonLanguage::getMessage('loaded_not_paid'); ?></option>
                        <option value="3"><?php print CommonLanguage::getMessage('loaded_and_paid'); ?></option>
                        <option value="4"><?php print CommonLanguage::getMessage('canceled'); ?></option>
                    </select>
                </div>
                <div class="form-group form-group-default input-group col-md-3 pull-right" id="LoadOrderDate">
                    <label class="fade"><?php print CommonLanguage::getMessage('Date'); ?></label>
                    <input id="Load_Order_Date" name="Load_Order_Date" class="form-control" data-date-format="yyyy/mm/dd" value="<?php echo($today); ?>" aria-required="true" aria-invalid="false">
                    <span class="input-group-addon bg-primary"><i class="fa fa-calendar"></i></span>
                </div>

            </div>
            <div class="clearfix"></div>
        </div>
        <div class="panel-body">
            <table class="table table-bordered table-hover demo-table-search" id="tableWithSearch">
                <thead>
                    <tr>
                        <th class="text-center" style="width:5%"> <?php print CommonLanguage::getMessage('loading_order'); ?>#</th>
                        <th class="text-center" style="width:10%"><?php print CommonLanguage::getMessage('vehicle'); ?> #</th>
                        <th class="text-center" style="width:15%"><?php print CommonLanguage::getMessage('driver'); ?></th>
                        <th class="text-center" style="width:15%"><?php print CommonLanguage::getMessage('Date'); ?></th>
                        <th class="text-center" style="width:15%"><?php print CommonLanguage::getMessage('Status'); ?></th>
                        <th class="text-center no-print" style="width:20%"><?php print CommonLanguage::getMessage('option'); ?></th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
    <!-- END OF panel-transparent -->
</div>


<div class="modal fade bs-example-modal-md" id="DeleteFromList" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:50%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title"><?php print CommonLanguage::getMessage('Confirm_Delete'); ?></h4>
                <div id="Delete_modalAlert"><span></span></div>
            </div>
            <div class="modal-body">
                <form>
                    <div class="row">
                        <div class="col-md-12 ">
                            <div class="col-md-12" style="margin-top: 20px;">
                                <p> <strong class="Name"></strong></p>
                                <p> <strong class="Question"></strong></p>

                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id='CancelDelete' data-dismiss="modal"><?php print CommonLanguage::getMessage('Close'); ?></button>
                <button type="button" class="btn btn-danger" id="Load_Delete" style="width:auto"><?php print CommonLanguage::getMessage('delete'); ?></button>
            </div>
        </div>
    </div>
</div>
<script>
    var cancel_load_hint = <?php echo json_encode(CommonLanguage::getMessage('cancel_load_hint')); ?>,
            Proceed_Delete = <?php echo json_encode(CommonLanguage::getMessage('Proceed_Delete')); ?>,
            delete_canceled_load = <?php echo json_encode(CommonLanguage::getMessage('delete_canceled_load')); ?>,
            Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
            ViewLang = <?php echo json_encode(CommonLanguage::getMessage('view')); ?>,
            DeleteLang = <?php echo json_encode(CommonLanguage::getMessage('delete')); ?>,
            PaymentLang = <?php echo json_encode(CommonLanguage::getMessage('payment')); ?>,
            ReturnLang = <?php echo json_encode(CommonLanguage::getMessage('return')); ?>,
            Action = <?php echo json_encode(CommonLanguage::getMessage('Action')); ?>,
            cancel_load_and_return = <?php echo json_encode(CommonLanguage::getMessage('cancel_load_and_return')); ?>,
            title = <?php echo json_encode(CommonLanguage::getMessage('loading_order_list')); ?>;
    var LoadToDelete = 0;

    var Statuses = [<?php echo json_encode($Statuses); ?>];


    $(function () {

        $("#Delete_modalAlert").hide();
        var data = {
            Load_Order_Date: $("#Load_Order_Date").val()
        };
        RebuildDataTable(title, [0, 1, 2, 3, 4], 'InventoryAjax/LoadingOrderListRequest', data);

        $("#ViewType").on("change", function () {
         
            setTimeout(function () {
                   var CurrentDate = {
            };
                if ($("#ViewType").val() != 5) {
                    CurrentDate.type = $("#ViewType").val()
                    $("#LoadOrderDate").hide()
                } else {
                    CurrentDate.Load_Order_Date = $("#Load_Order_Date").val()
                    $("#LoadOrderDate").show()
                }
                ajaxCall(CurrentDate);


            }, 1000)
        })





        $("#Load_Order_Date").datepicker({
            autoclose: true
        }).on("changeDate", function (e) {
            var CurrentDate = {
                Load_Order_Date: $("#Load_Order_Date").val()
            };
            ajaxCall(CurrentDate);

        })

        $('#tableWithSearch ').on('click', '.Action .Delete', function () {

            var tr = $(this).parents('tr'),
                    status = tr.find('.label').attr('data-status');

            LoadToDelete = tr.find('.Action').attr('data-id');

            if (status == 1) {
                $('#DeleteFromList').find('Strong.Name').text(cancel_load_hint)
                $('#DeleteFromList').find('Strong.Question').text(Proceed_Delete)
                $('#DeleteFromList').show()

            } else
            if (status == 2) {
                $('#DeleteFromList').find('Strong.Name').text(cancel_load_and_return)
                $('#DeleteFromList').find('Strong.Question').text(Proceed_Delete)
                $('#DeleteFromList').show()

            } else
            if (status == 3) {
                $('#DeleteFromList').find('Strong.Name').text(delete_canceled_load)
                $('#DeleteFromList').show()
                $('#Load_Delete').attr('disabled', 'disabled')
            }



        })

        $("#Load_Delete").on("click", function () {

//            var me = $("#tableWithSearch tr[data-id=" + LoadToDelete + "]")

            $.ajax({
                url: 'InventoryAjax/LoadingOrderListAjax',
                data: {
                    GetID: LoadToDelete
                },
                complete: function (data, vv) {
                    if (vv == "success") {
                        var CurrentDate = {
                            type: $("#ViewType").val()
                        };
                        if (CurrentDate.type == 5) {
                            CurrentDate.Load_Order_Date = $("#Load_Order_Date").val()
                        }
                        ajaxCall(CurrentDate)
                        $("#Delete_modalAlert").addClass("alert alert-success").show().html(Submitted_Successfully);

                        setTimeout(function () {
                            $("#DeleteFromList").modal("hide")
                        }, 1000)
                    }
                }
            });
        })
        $('#CancelDelete').on('click', function () {
            $('#DeleteFromList').hide()
        })
    })




    function ajaxCall(CurrentDate) {
        RebuildDataTable(title, [0, 1, 2, 3, 4], 'InventoryAjax/LoadingOrderListRequest', CurrentDate);


    }



</script>