<script src="<?php echo THEME_PATH; ?>/plugins/moment/moment.min.js"></script>
<!--<script>
function AddCommas(val) {
val = parseFloat(val.toString()).toString();
while (/(\d+)(\d{3})/.test(val.toString())) {
val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
}
return val.replace(/\.0$|\.00$/, "") || "0";
}
function FixNumber(val) {
return AddCommas(parseFloat(val + "").toFixed(2));
}
// to remove many digits after the period
$(function () {
$(".ValSpan").each(function () {
$(this).html(AddCommas(parseFloat($.trim($(this).text())).toFixed(3))).animate({opacity: 1})
})
})
</script>-->
<style>
    #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);
    }

    .table thead tr>th {
        background-color: #4c0870;
        color: #fff;
    }

    .table thead tr th[class*='sorting_'] {
        color: #fff;
    }

    .table tbody tr td {
        color: #000;
    }

    .bg-master-lighter {
        border: none;
        background-color: #fff;
        border-top: 1px solid #ddd;
    }

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

    .dropdown-menu li:hover {
        background-color: #eee;
    }

    .dropdown-menu {
        width: auto;
        cursor: pointer;
        border: 1px solid rgba(0, 0, 0, 0.1);
        left: 4px;
    }

    .dropdown-menu>li {
        padding: 5px 0 !important;
    }

    .dropdown-menu>li>a {
        text-align: center;
    }

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

    .MonthPicker,
    .YearPicker {
        display: none;
    }

    .dropdown-menu>li>a {
        opacity: 1;
    }

    .btn-default {
        border: none;
    }

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

    .HideMe {
        display: none !important;
        position: absolute;
        top: -1000px;
    }

    .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;
    }

    #tableWithSearch_filter {
        display: none;
    }

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

    .btn-default:hover {
        background-color: #4c0870 !important;
        color: #fff;
        border: none;
    }
</style>
<div class="wrapper">
    <div class="panel invoice">
        <div class="panel-body">
            <div class="row">
                <h1><?php print CommonLanguage::getMessage('invoice_delivery_note_list'); ?></h1>
                <div id="ViewMode">
                    <span style="margin:0 13px"><?php print CommonLanguage::getMessage('type'); ?>: </span>
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-default active">
                            <input type="radio" name="ViewType" value="1" checked=""><?php print CommonLanguage::getMessage('Daily'); ?>
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="ViewType" value="2"><?php print CommonLanguage::getMessage('monthly'); ?>
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="ViewType" value="3"><?php print CommonLanguage::getMessage('yearly'); ?>
                        </label>
                    </div>
                    <div class="col-md-3 <?php echo $permissions->hasPermission('Branches') ? '' : 'hidden'; ?>">
                        <label><?php echo CommonLanguage::getMessage('choose_branch') ?></label>
                        <input id="search_branch_id" type="hidden" class="full-width" name="search_branch_id" >
                    </div>

                </div>

                <div class="col-md-12 input-group m-b">

                    <div id="Date_Group" class="form-group form-group-default input-group col-md-3 pull-right ">
                        <label style="opacity:1 !important;" class="fade"><?php print CommonLanguage::getMessage('Date'); ?></label>
                        <input id="Daily_Date" name="Daily_Date" class="form-control" value="<?php echo ($today); ?>" aria-required="true" aria-invalid="false">
                        <input id="Month_Date" name="Month_Date" class="form-control HideMe" data-date-format="yyyy-mm" value="<?php echo ($year . '-' . $month); ?>" aria-required="true" aria-invalid="false">
                        <input id="Year_Date" name="Year_Date" class="form-control HideMe" data-date-format="yyyy" value="<?php echo ($year); ?>" aria-required="true" aria-invalid="false">
                        <span class="input-group-addon bg-primary"><i class="fa fa-calendar"></i></span>
                    </div>


                </div>

                <div class="HideMe" id="AjaxIsBusy" style="position:absolute;left:0;right:0;top:0px;height:100%;background:rgba(255,255,255,0.9);z-index:9999;opacity:1"><img class="image-responsive-height demo-mw-50" src="img/demo/progress.svg" alt="Progress" width="200px" style="position: absolute;left: 50%;top: 50%;margin: -25px 0 0 -25px;" /></div>

                <div class="col-md-12" id="MyTable">
                    <table class="table table-hover demo-table-search" id="tableWithSearch">
                        <thead>
                            <tr>
                                <th class="text-center" style="width:30%"><?php print CommonLanguage::getMessage('customer_name'); ?></th>
                                <th class="text-center" style="width:30%"><?php print CommonLanguage::getMessage('Delivery_Date'); ?></th>
                                <th class="text-center" style="width:30%"><?php print CommonLanguage::getMessage('Action'); ?></th>

                            </tr>
                        </thead>
                        <tbody>


                        </tbody>

                    </table>
                </div>


            </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')); ?>,
        title = <?php echo json_encode(CommonLanguage::getMessage('invoice_delivery_note_list')); ?>,
        viewButton = <?php echo json_encode(CommonLanguage::getMessage('view')); ?>;
    $(function() {
        var dataArr = {
            freq: parseInt($("#ViewMode input:checked").val()),
            Date: $("#Daily_Date").val()

        }
        RebuildDataTable(title, [0, 1], 'InventoryAjax/InvoiceDeliveryNoteList', dataArr);
        build_select2($("#search_branch_id"), "xhr/CommonSearch?col_name=branch_name&col_id=branch_id&table=tbl_organization_branches");






        //Setting Daily datepicker
        $("#Daily_Date").datepicker({
            autoclose: true
        })
        //Setting Monthly datepicker
        $("#Month_Date").datepicker({
            autoclose: true,
            viewMode: "months",
            minViewMode: "months"
        })
        //Setting Yearly datepicker
        $("#Year_Date").datepicker({
            autoclose: true,
            viewMode: "years",
            minViewMode: "years"
        })

        $("#ViewMode label").on("click", function() {
            setTimeout(function() {
                var freq = $("#ViewMode label.active> input").val();



                if (freq == 1) {
                    $("#Daily_Date").removeClass("HideMe") //to show daily datepicker
                    $("#Month_Date").addClass("HideMe") //to hide monthly datepicker
                    $("#Year_Date").addClass("HideMe") //to hide yearly datepicker

                } else //freq Condition for monthly with id 2
                    if (freq == 2) {
                        $("#Daily_Date").addClass("HideMe") //to hide daily datepicker
                        $("#Month_Date").removeClass("HideMe") //to show monthly datepicker
                        $("#Year_Date").addClass("HideMe") //to hide yearly datepicker

                    } else //freq condition for yearly with id 3
                        if (freq == 3) {
                            $("#Daily_Date").addClass("HideMe") //to hide daily datepicker
                            $("#Month_Date").addClass("HideMe") //to hide monthly datepicker
                            $("#Year_Date").removeClass("HideMe") //to show yearly datepicker

                        }
                AjaxReq(freq);
            }, 200)
        })

        /**********************************************************************Begining of onChange datepicker*************************************/
        $("#Daily_Date,#Month_Date,#Year_Date").on("changeDate", function(e) {
            setTimeout(function() {
                var freq = $("#ViewMode label.active> input").val();
                AjaxReq(freq); //Rebuild table based on selected date
            }, 200)
        }) //End of onChange datepicker
        $('#search_branch_id').on('change', function() {
            setTimeout(function() {
                var freq = $("#ViewMode label.active> input").val();
                AjaxReq(freq); //Rebuild table based on selected date
            }, 200)
        });

        $('#tableWithSearch').on('click', '.delete', function() {
            var entry_value = $(this).parents('div.Action').attr('data-id');
            IncludeDeleteModal(common_delete_modal, {
                Delivery_Report_ID: entry_value,
                is_vendor: 0
            }, function() {
                var freq = $("#ViewMode label.active> input").val();
                AjaxReq(freq); //Rebuild table based on selected date
            }, "InventoryAjax/deleteDeliveryNote");
        });
    })

    function AjaxReq(freq) {


        var freq = parseInt($("#ViewMode input:checked").val());

        MyCurrentDate(freq); //return current date

        var CurrentDate = {};
        CurrentDate.freq = freq;
        CurrentDate.Date = MyDate;
        CurrentDate.search_branch_id = $("#search_branch_id").val();
        RebuildDataTable(title, [0, 1], 'InventoryAjax/InvoiceDeliveryNoteList', CurrentDate);


    }
    /******************Function to return Current Date based on selected frequency**************************************************/
    function MyCurrentDate(freq) {

        var MyDate;




        if (freq == 1) {
            window.MyDate = $("#Daily_Date").val()
        } else
        if (freq == 2) {
            window.MyDate = [moment($("#Month_Date").val()).format("YYYY"), moment($("#Month_Date").val()).format("MM"), moment($("#Month_Date").val()).format("DD")]
        } else
        if (freq == 3) {
            window.MyDate = [moment($("#Year_Date").val()).format("YYYY"), moment($("#Year_Date").val()).format("MM"), moment($("#Year_Date").val()).format("DD")]
        }

    }

    function RebuildTable() {
        $('#tableWithSearch').dataTable();
    }
</script>