<div class="wrapper">
    <div class="container">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">

                <h4 class="page-title">Scheduler:</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">Filters:</h4>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="row">
                                <div class="col-lg-2">
                                    <div class="row">
                                        <div class="col-lg-12"> <label class="control-label">Select Staff</label></div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-12"> 
                                            <select class="form-control" id="staff">
                                                <option value="">select</option>
                                                <?php foreach ($staffs as $staff) {$active = "Active"; if($staff['staff_active']=="N"){$active="Inactive";} ?>
                                                    
                                                    <option value="<?php echo $staff['id_staff']; ?>"><?php echo $staff['staff_fullname'].' ('.$active.')'; ?></option>
                                                <?php } ?>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-2">
                                    <div class="row">
                                        <div class="col-lg-12"> <label class="control-label">Customer</label></div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-12"> 
                                            <input  class="form-control" id="customer"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2">
                                    <div class="row">
                                        <div class="col-lg-12"> <label class="control-label">Cell</label></div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-12"> 
                                            <input  class="form-control" id="cell"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="row">
                                        <div class="col-lg-12"> <label class="control-label">Select Date</label></div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-12"> 

                                            <div id="appointment_date" class="form-control">
                                                <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                                                <span></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2">
                                    <div class="row">
                                        <div class="col-lg-12"> <label class="control-label">Get Appointments</label></div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" > 
                                            <button type="button" onclick="runreport()" 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>

                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">

                            <div class="row">
                                <div class="col-lg-12"> <label class="control-label">Select Type</label></div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12"> 
                                    <select onchange="servicetypechange();" class="form-control" id="servicetype">
                                        <option value="0">All</option>
                                        <?php foreach ($servicetypes as $servicetype) { ?>
                                            <option flag="<?php echo $servicetype['flag']; ?>" value="<?php echo $servicetype['id_service_types']; ?>"><?php echo $servicetype['service_type']; ?></option>
                                        <?php } ?>
                                    </select>
                                </div>
                            </div>

                        </div>
                        <div class="col-md-4">

                            <div class="row">
                                <div class="col-lg-12"> <label class="control-label">Select Category</label></div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12"> 

                                    <select onchange="servicecategorychange()" class="form-control" id="servicecategory">

                                    </select>
                                    
                                </div>
                            </div>

                        </div>
                        <div class="col-md-4">

                            <div class="row">
                                <div class="col-lg-12"> <label class="control-label">Select Service</label></div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12"> 
                                    <select class="form-control" id="service">
                                    </select>
                                </div>
                            </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="tblbookings" class="table table-striped table-bordered table-responsive nowrap" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th colspan="7" style="text-align: center;">Booking</th>
                                <th colspan="4" class="text-primary" style="text-align: center;">Status</th>
                                <th></th>
                            </tr>
                            <tr>
                                 <th>Property</th>
                                <th>Customer</th>
                                <th>Booked On</th>
                                <th>Staging Date</th>
                                <th>Pick Up Date</th>
                                <th>Booked By</th>
                                <th>Staging Team</th>
                                <th class="text-primary">Up Coming</th>
                                <th class="text-primary">Staged</th>
                                <th class="text-primary">4th Week</th>
                                <th class="text-primary">6th Week</th>
                                <th>Pick up Team</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div><!-- end col -->
        </div>
        <!-- end row -->
    
   
    </div>


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

            
            $("#visit_service_date").datepicker({
                default: today,
                    autoclose: true,
                    todayHighlight: true,
                    format: 'yyyy-mm-dd'    
            });

            $('#appointment_date').daterangepicker({
                format: 'MM/DD/YYYY',
                startDate: moment().subtract(29, 'days'),
                endDate: moment(),
                minDate: '01/01/2012',
                maxDate: '12/31/2099',
                //                    dateLimit: {
                //                        days: 60
                //                    },
                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) {
                //console.log(start.toISOString(), end.toISOString(), label);
                startdate = start;
                enddate = end;
                $('#appointment_date span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            });



            $('#tblbookings').DataTable({
                lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                stateSave: true,
                ordering: false,
                fixedHeader: {header: true},
                <?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,
                order: [[ 0, "asc" ],[1,"asc"]]
            });

        });

       
      
    </script>
