<style>
    /* enable absolute positioning */
    .inner-addon { 
        position: relative; 
    }

    /* style icon */
    .inner-addon .glyphicon {
        position: absolute;
        padding: 10px;
        pointer-events: none;
    }

    /* align icon */
    .left-addon .glyphicon  { left:  0px;}
    .right-addon .glyphicon { right: 0px;}

    /* add padding  */
    .left-addon input  { padding-left:  30px; }
    .right-addon input { padding-right: 30px; }

    .loader {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: url('<?php echo base_url(); ?>assets/images/page-loader-1.gif') 50% 50% no-repeat ;
        display: none;
    }
    tr.strikethrough > td {text-decoration:line-through !important; color:red;} 
</style>
<div class="wrapper">
    <div class="container">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="btn-group pull-right m-t-15">
                    <button type="button" data-toggle="modal" data-target="#addworkorder" class="btn btn-custom waves-effect waves-light" >Create Order <span class="m-l-5"><i class="fa fa-plus"></i></span></button>
                </div>
                <h4 class="page-title">Work Orders:</h4>
            </div>
        </div>

        <div class="row" id="divselection">
            <div class="col-sm-12">
                <div class="card-box ">
                    <!--<h4 class="header-title m-t-0 m-b-30">Selection:</h4>-->
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="row">
                                <form method="post" action="<?php echo base_url();?>workorderlist">
                                    <div class="col-lg-4">&nbsp;</div>
                                        <div class="col-lg-4">
                                            <div class="row">
                                                <div class="col-lg-12"> <label class="control-label">Select Dates</label></div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-12"> 
                                                    <div id="reportrange" class="inner-addon left-addon">
                                                        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                                                        <input style="background-color: white;" readonly class="form-control" type="text" name="range" id="range" />
                                                        <input type="hidden" name="rangehidden" id="rangehidden" value="1" />
                                                        <p class="text-sm">Select a max of 30 days at a time.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="row">
                                                <div class="col-lg-12"> <label class="control-label">&nbsp;</label></div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" > 
                                                    <button type="submit"  class="btn btn-pink btn-bordred waves-effect w-md waves-light m-b-5">Run</button>
                                                </div>
                                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"><i id="cog" class="fa fa-spin fa-cog" style="display:none; font-size:26px;width: auto;margin-right: 10px;"></i></div>
                                            </div>
                                        </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="card-box table-responsive">
                    <h4 class="header-title m-t-0 m-b-30">&nbsp;</h4>
                    <table id="tblreport" class="table table-striped table-bordered dt-responsive nowrap record" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th>Workorder ID</th>
                                <th>Date</th>
                                <th>Supplier</th>
                                <th>Status</th>
                                <th>Created By</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>                        
                            <?php foreach($workorders as $workorder){?>
                                <tr>
                                    <td><?php echo $workorder['id_workorders']; ?></td>
                                    <td><?php echo $workorder['workorder_date']; ?></td>
                                    <td><?php echo $workorder['supplier_name']; ?></td>
                                    <td><?php echo $workorder['workorder_status']; ?></td>
                                    <td><?php echo $workorder['created_by']; ?></td>
                                    <td><a class="btn btn-warning" href="<?php echo base_url();?>workorder_items/<?php echo $workorder['id_workorders'];?>"  >Items</a></td>
                                </tr>
                            <?php } ?>                        
                        </tbody>
                        <tfoot></tfoot>
                    </table>
                </div>
            </div><!-- end col -->
        </div>
        <!-- end row -->

        <!--add order modal-->
        <div id="addworkorder" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="addworkorder" aria-hidden="true" style="display: none;">
            <div class="modal-dialog modal-md">
                <div class="modal-content">
                    <form action="<?php echo base_url();?>workorder_controller/add_workorder" method="post">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title" id="custom-width-modalLabel">Add Workorder: <span id="addworkorder"></span></h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <label class="form-label">Supplier</label>
                                    <select class="form-control" id="suppliers" name="suppliers">
                                        <?php foreach($suppliers as $supplier){ ?>}
                                        <option value="<?php echo $supplier['id_business_supplier']; ?>"><?php echo $supplier['supplier_name']; ?></option>
                                        <?php } ?>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-custom waves-effect waves-light">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

     
        <script type="text/javascript">

            var startdate = '';
            var enddate = '';
            $(document).ready(function() {

                $("#suppliers").select2();

                $(".numeric").keypress(function (e) {
                    //if the letter is not digit then display error and don't type anything
                    if (e.which != 13 && e.which != 8 && e.which != 0  && e.which != 46 && (e.which < 48 || e.which > 57)) {
                       return false;
                   }
                });

            <?php

            $query_date = date('Y-m-d');
            // First day of the month.
            $month_ini = date('Y-m-01', strtotime($query_date));
            // Last day of the month.
            $month_end = date('Y-m-t', strtotime($query_date));
            ?>
                var startmonth = '<?php echo date('F j, Y', strtotime($month_ini)); //->format('F j, Y');    ?>';
                var endmonth = '<?php echo date('F j, Y', strtotime($month_end)); //->format('F j, Y');    ?>';
                $('#reportrange input').val(startmonth + ' - ' + endmonth);
             
                $('#tblreport').DataTable({
                    <?php if(DOWNLOAD == true || $this->session->userdata('role') == 'Admin' || $this->session->userdata('role')=='Super User'){ ?>
                    dom: "Bfrtlip",
                    buttons: [{extend: "copy", className: "btn-sm"}, {extend: "csv", className: "btn-sm"}, {
                            extend: "excel",
                            className: "btn-sm"
                        }, {extend: "pdf", className: "btn-sm"}, {extend: "print", className: "btn-sm"}],
                    <?php } else { ?>
                        dom: "frtlip",
                    <?php } ?> 
                    responsive: !0
                });                

                $('#reportrange').daterangepicker({
                    //format: 'MM/DD/YYYY',
                    startDate: moment().subtract(29, 'days'),
                    endDate: moment(),
                    minDate: '01/01/2012',
                    maxDate: '12/31/2099',
                    dateLimit: {
                        days: 30
                    },
                    showDropdowns: true,
                    showWeekNumbers: true,
                    timePicker: false,
                    timePickerIncrement: 1,
                    timePicker12Hour: true,
                    ranges: {
                        'Today': [moment(), moment().add(1, 'days')],
                        'Yesterday': [moment().subtract(1, 'days'), moment()],
                        'Last 7 Days': [moment().subtract(6, 'days'), moment().add(1, 'days')],
                        'Last 30 Days': [moment().subtract(29, 'days'), moment().add(1, 'days')],
                        'This Month': [moment().startOf('month'), moment().endOf('month')],
                        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                    },
                    opens: 'left',
                    drops: 'down',
                    buttonClasses: ['btn', 'btn-sm'],
                    applyClass: 'btn-success',
                    cancelClass: 'btn-default',
                    separator: ' to ',
                    locale: {
                        applyLabel: 'Submit',
                        cancelLabel: 'Cancel',
                        fromLabel: 'From',
                        toLabel: 'To',
                        customRangeLabel: 'Custom',
                        daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                        monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                        firstDay: 1
                    }
                }, function(start, end, label) {
                    
                    startdate = start;
                    enddate = end;
                    
                    $('#reportrange input').val(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                });



                $(".vertical-spin").TouchSpin({
                    verticalbuttons: true,
                    buttondown_class: "btn btn-primary",
                    buttonup_class: "btn btn-primary",
                    verticalupclass: 'ti-plus',
                    verticaldownclass: 'ti-minus'
                });

                var vspinTrue = $(".vertical-spin").TouchSpin({
                    verticalbuttons: true
                });

                if (vspinTrue) {
                    $('.vertical-spin').prev('.bootstrap-touchspin-prefix').remove();
                }

                toastr.options = {
                    "closeButton": true,
                    "debug": true,
                    "newestOnTop": true,
                    "progressBar": true,
                    "positionClass": "toast-bottom-center",
                    "preventDuplicates": true,
                    "onclick": null,
                    "showDuration": "300",
                    "hideDuration": "1000",
                    "timeOut": "5000",
                    "extendedTimeOut": "1000",
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                }              

            });
            //TableManageButtons.init();

</script>
