<?php

//include("Views/Inventory/NewSalesInvoice.php");
?>
<style>
    #tableWithSearch thead tr >th{
        background-color: #4c0870 ;
        color:#fff;
    }
    #tableWithSearch thead tr th[class*='sorting_'] {
        color: #FFFFFF;
    }
    .bg-master-lighter {
        border:none;
        background-color:#fff;
        border-top:1px solid #ddd; 
    }
    .dropdown-menu>li>a {
        cursor:pointer;
    }
    .inputIcon{
        width:30px;}
    .DropDownForForms > .dropdown-menu {
        height: auto;
        cursor: pointer;
        overflow-y: auto;
        width:100%;
    }
    #tableWithSearch tbody >tr>td >div.Arrow{
        cursor:pointer;   
    }
    #tableWithSearch tbody >tr>td >div.Arrow:before{
        content: "\f054";
        display: inline-block;
        margin-right: 8px;
        font-family: 'FontAwesome';
        -webkit-transition: all 0.12s linear;
        transition: all 0.12s linear;
    }
    #tableWithSearch tbody >tr.shown>td >div.Arrow:before {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .StatementTable{
        width: 80%;
        margin: 0 auto;
        border: 1px solid rgb(200, 200, 200);
    }
    .StatementTable th{
        border: 1px solid rgb(200, 200, 200) !important;
    }
    .StatementTable tbody tr:last-child > td{
        border-bottom: 1px solid rgb(200, 200, 200) !important;
    }
    .StatementTable td,.StatementTable th{
        font-size:11px !important;
    }
    .TableLoader{
        text-align:center;
        width: 50%;
        margin: 0 auto;
    }
    .NameCenter{
        margin-left: 60px;
    }
    .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;
    }
</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('sales_order_list'); ?></div>
            <div class="col-md-12">
                <div class="form-group form-group-default input-group col-md-3 pull-right" >
                    <label class="fade"><?php print CommonLanguage::getMessage('Date'); ?></label>
                    <input id="Sale_Order_Date" name="Sale_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-detailed" id="tableWithSearch" >
                <thead>
                    <tr>
                        <th class="text-center" style="width:30%" ><?php print CommonLanguage::getMessage('order'); ?> #</th>
                        <th class="text-center" style="width:30%" ><?php print CommonLanguage::getMessage('customer_name'); ?></th>
                        <!--<th class="text-center" style="width:15%" ><?php // print CommonLanguage::getMessage('Status'); ?></th>-->
                        <th class="text-center" style="width:15%" ><?php print CommonLanguage::getMessage('salesman'); ?></th>

                        <th class="text-center  no-print" style="width:30%" ><?php print CommonLanguage::getMessage('Action'); ?></th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </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" 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="Order_Delete" style="width:auto"><?php print CommonLanguage::getMessage('delete'); ?></button>
            </div>
        </div>
    </div>
</div>
<script>
    var CodeLang = <?php echo json_encode(CommonLanguage::getMessage('Code')); ?>,
            NameLang = <?php echo json_encode(CommonLanguage::getMessage('Name')); ?>,
            QuantityLang = <?php echo json_encode(CommonLanguage::getMessage('Quantity')); ?>,
            delete_invoiced = <?php echo json_encode(CommonLanguage::getMessage('delete_invoiced')); ?>,
            cancel_sales_order = <?php echo json_encode(CommonLanguage::getMessage('cancel_sales_order')); ?>,
            Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
            Proceed_Delete = <?php echo json_encode(CommonLanguage::getMessage('Proceed_Delete')); ?>;
    var SalesToDelete = 0, SalesToInvoice = 0;

    $(function () {
        var SalesDate = {
            Sale_Order_Date: $("#Sale_Order_Date").val()
        };
        RebuildDataTable('list', [0, 1, 2], 'InventoryAjax/SalesOrderList', SalesDate)
//        var table = $('#tableWithSearch');
//
//        var StatementTableTemplate = '<table class="table table-hover StatementTable">' +
//                '<thead>' +
//                '    <tr>' +
//                '        <th>' + CodeLang + '</th>' +
//                '        <th>' + NameLang + '</th>' +
//                '        <th>' + QuantityLang + '</th>' +
//                '    </tr>' +
//                '</thead>' +
//                '<tbody>' +
//                '</tbody>' +
//                '</table>';
//        var LoadingTableTemplate = '<div class="TableLoader"><img class="image-responsive-height demo-mw-50" src="img/demo/progress.svg" alt="Progress"/></div>';
//        $('tbody', table).on('click', '>tr', function () {
//            if ($(this).hasClass('shown') && $(this).next().hasClass('row-details')) {
//                $(this).removeClass('shown');
//                $(this).next().remove();
//                return;
//            }
//            var tr = $(this).closest('tr');
//            var row = table.DataTable().row(tr);
//            $(this).parents('tbody').find('.shown').removeClass('shown');
//            $(this).parents('tbody').find('.row-details').remove();
//            row.child(LoadingTableTemplate).show();
//            tr.addClass('shown');
//            tr.next().addClass('row-details');
//            var code = {
//                code_id: tr.find('.Action').attr('data-id')
//            }
//            console.log(code)
//            $.ajax({
//                url: 'InventoryAjax/SalesOrderListRequest',
//                data: code,
//                dataType: 'json',
//                complete: function (data, vv) {
//                    if (vv == "success") {
//                        var TheTable = $(StatementTableTemplate), results = (data.responseJSON);
//                        for (var i = 0; i < (results.length); i++) {
//                        
//                            var locations = "<tr>" +
//                                    "<td>" + results[i]["Product_Code"] + "</td>" +
//                                    "<td>" + results[i]["Product_Name"] + "</td>" +
//                                    "<td>" + results[i]['Quantity'] + "</td>";
//                            $("tbody", TheTable).append(locations);
//                        }
//                        $(".TableLoader", tr.next()).replaceWith(TheTable);
//           
//                    }
//                }
//            })
//        });
        $("#Sale_Order_Date").datepicker({autoclose: true}).on("changeDate", function (e) {
            var CurrentDate = {
                Sale_Order_Date: $("#Sale_Order_Date").val()
            };
            RebuildDataTable('list', [0, 1, 2], 'InventoryAjax/SalesOrderList', CurrentDate)

        })
        $('#tableWithSearch ').on('click', '.Delete', function () {
            var tr = $(this).parents('tr'),
                    status = tr.find('td:eq(2)').attr('data-status');

            SalesToDelete = tr.find('.Action').attr('data-id');
            if (status == 4) {
                $('#DeleteFromList').find('Strong.Name').text(delete_invoiced)
                $('#DeleteFromList').show()
                $('#Order_Delete').attr('disabled', 'disabled')
            } else {
                $('#Order_Delete').attr('enabled', 'enabled')
                $('#DeleteFromList').find('Strong.Name').text(cancel_sales_order)
                $('#DeleteFromList').find('Strong.Question').text(Proceed_Delete)
                $('#DeleteFromList').show()

            }

        })
        $('#tableWithSearch ').on('click', '.Invoice', function () {
            var tr = $(this).parents('tr');

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

        })

        $("#Order_Delete").on("click", function () {
            $.ajax({
                url: 'InventoryAjax/SalesOrderListRequest',
                data: {GetID: SalesToDelete},
                complete: function (data, vv) {
                    if (vv == "success") {
                        var CurrentDate = {
                            Sale_Order_Date: $("#Sale_Order_Date").val()
                        };
                        RebuildDataTable('list', [0, 1, 2], 'InventoryAjax/SalesOrderList', CurrentDate)
                        $("#Delete_modalAlert").addClass("alert alert-success").show().html(Submitted_Successfully);
                        setTimeout(function () {
                            $("#DeleteFromList").modal("hide")
                        }, 1000)
                    }
                }});
        })
        $('#CancelDelete').on('click', function () {
            $('#DeleteFromList').hide()
        })





        $("#SalesInvoiceModal").on("show.bs.modal", function () {
            $.ajax({
                url: "InventoryAjax/SalesOrderListRequest",
                data: {SalesID: SalesToInvoice},
                dataType: 'json',
                complete: function (v1, v2) {
                    var Data = (v1.responseJSON);
                    if (v2 == "success") {
                        var ItemTemplate = '<tr data-id="$PRODUCT_ID$" data-vat="$PRODUCT_VAT$">' +
                                '    <td><input type="text" value="$CODE$" class="form-control AutoComplete NewSalesInvoiceCODE ui-autocomplete-input AutoAdded" autocomplete="off" aria-invalid="false"></td>' +
                                '    <td><input type="text" value="$PRODUCT_NAME$" class="form-control AutoComplete NewProductName ui-autocomplete-input AutoAdded" autocomplete="off" aria-invalid="false"></td>' +
                                '    <td><span class="Hint"></span><input value="$QUANTITY$" type="text" class="form-control NewInvoiceQuantity isnumber" aria-invalid="false"></td>' +
                                '    <td><span class="Hint"></span><input value="$PRODUCT_PRICE$" type="text" class="form-control NewUnitPrice isnumber" disabled="" style="color: #000;"></td>  ' +
                                '    <td><input type="text" value="0" class="form-control NewDisc" value="" aria-invalid="false"></td>' +
                                '    <td class="TotalTD"><span class="CurrencyIndicator">$</span>&nbsp;<span class="Total"></span></td>' +
                                '</tr>', TargetTable = $("#InventoryInvoiceTable > tbody").empty();
                        for (var x = 0; x < Data.length; x++) {
                            var CurItem = ItemTemplate.replace(/\$CODE\$/, Data[x].Product_Code)
                                    .replace(/\$PRODUCT_NAME\$/, Data[x].Product_Name)
                                    .replace(/\$QUANTITY\$/, Data[x].Quantity)
                                    .replace(/\$PRODUCT_ID\$/, Data[x].Product_ID)
                                    .replace(/\$PRODUCT_PRICE\$/, Data[x].Product_Price)
                                    .replace(/\$PRODUCT_VAT\$/, Data[x].Product_VAT)
                            TargetTable.prepend(CurItem);
                            $('#Customer_ID').val(Data[x].Customer_ID)
                            $("#CustomerInfoContent").html('<strong><span class="Name">' + Data[x].Customer_Name + '</span></strong>')

                        }
                        TargetTable.find("input").eq(0).trigger("keyup");
                        UpdateTable()
                    }
                }
            })
        })






    })








</script>