<script src="<?php echo THEME_PATH; ?>/plugins/moment/moment.min.js"></script>
<style>
    .btn.btn-default.active {
        background-color: #6d5baf;
        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">
                <h4 class="bold"><?php echo CommonLanguage::getMessage('purchase_delivery_note_list'); ?> </h4>
            </div>
            <div class="row">
                <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>
                <div class="col-md-4 <?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="row">
                <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 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 hidden" 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 hidden" 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 class="col-md-3" style="margin-top: 15px;">
                        <input type="text" id="search-table" class="form-control pull-right" placeholder="Search">
                    </div>
                </div>
            </div>

        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12 table-responsive" id="MyTable">
                    <table class="table table-bordered inventory" id="tableWithSearch">
                        <thead>
                            <tr>
                                <th class="text-center" style="width:30%"><?php print CommonLanguage::getMessage('vendor_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('purchase_delivery_note_list')); ?>,
        viewButton = <?php echo json_encode(CommonLanguage::getMessage('view')); ?>;
    $(function() {
        var dataArr = {
            freq: parseInt($("#ViewMode input:checked").val()),
            Date: $("#Daily_Date").val(),
            Is_Vendor: true
        }
        build_select2($("#search_branch_id"), "xhr/CommonSearch?col_name=branch_name&col_id=branch_id&table=tbl_organization_branches");

        RebuildDataTable(title, [0, 1], 'InventoryAjax/InvoiceDeliveryNoteList', dataArr);
        //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("hidden") //to show daily datepicker
                    $("#Month_Date").addClass("hidden") //to hide monthly datepicker
                    $("#Year_Date").addClass("hidden") //to hide yearly datepicker
                } else //freq Condition for monthly with id 2
                    if (freq == 2) {
                        $("#Daily_Date").addClass("hidden") //to hide daily datepicker
                        $("#Month_Date").removeClass("hidden") //to show monthly datepicker
                        $("#Year_Date").addClass("hidden") //to hide yearly datepicker
                    } else //freq condition for yearly with id 3
                        if (freq == 3) {
                            $("#Daily_Date").addClass("hidden") //to hide daily datepicker
                            $("#Month_Date").addClass("hidden") //to hide monthly datepicker
                            $("#Year_Date").removeClass("hidden") //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
        $('#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: 1
            }, function() {
                var freq = $("#ViewMode label.active> input").val();
                AjaxReq(freq); //Rebuild table based on selected date
            }, "InventoryAjax/deleteDeliveryNote");
        });
    })
    $('#search_branch_id').on('change', function () {
       var freq = parseInt($("#ViewMode input:checked").val())
        AjaxReq(freq);
    });

    function AjaxReq(freq) {
        var freq = parseInt($("#ViewMode input:checked").val());
        MyCurrentDate(freq); //return current date
        var CurrentDate = {};
        CurrentDate.freq = freq;
        CurrentDate.Date = MyDate;
        CurrentDate.Is_Vendor = true;
        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")]
        }
    }
</script>