<script src="<?php echo THEME_PATH; ?>/plugins/moment/moment.min.js"></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{
        background-color:#eee;
        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;
    }
</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 $title; ?> </h4>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <label><?php echo CommonLanguage::getMessage('type'); ?></label>
                    <div id="ViewMode">
                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn btn-default active" data-type="1">
                                <input type="radio" name="ViewType" value="1" checked=""><?php print CommonLanguage::getMessage('Daily'); ?>
                            </label>
                            <label class="btn btn-default" data-type="2">
                                <input type="radio" name="ViewType" value="2"><?php print CommonLanguage::getMessage('monthly'); ?>
                            </label>
                            <label class="btn btn-default" data-type="3">
                                <input type="radio" name="ViewType" value="3"><?php print CommonLanguage::getMessage('yearly'); ?>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <label><?php echo CommonLanguage::getMessage('employee'); ?></label>
                    <input  id="employee_id" name="employee_id" type="hidden" class="full-width employee_id " />
                </div> 
                <div class="col-md-2">
                    <label><?php echo CommonLanguage::getMessage('vehicle'); ?></label>
                    <input  id="vehicle_id" name="vehicle_id" type="hidden" class="full-width vehicle_id " />
                </div>
                <div class="col-md-3 pull-right">
                    <div id="Date_Group" class="form-group form-group-default input-group " >
                        <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 HideMe" data-date-format="yyyy-mm" value="<?php echo($year . '/' . $monthName); ?>" 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>
        </div>
        <div class="panel-body">
            <div class="row" >
                <div class="col-md-12 table-responsive" id="MyTable" >
                    <table class="table table-hover table-bordered inventory" id="tableWithSearch" >
                        <thead>
                            <tr>
                                <th class="text-center" style="width:5%" >#</th>
                                <th class="text-center" style="width:5%" ><?php print CommonLanguage::getMessage('customer_name'); ?></th>
                                <th class="text-center" style="width:5%" ><?php print CommonLanguage::getMessage('product_name'); ?></th> 
                                <th class="text-center" style="width:5%" ><?php print CommonLanguage::getMessage('vehicle'); ?></th>
                                <th class="text-center" style="width:5%" ><?php print CommonLanguage::getMessage('employee'); ?></th>
                                <th class="text-center" style="width:5%" ><?php print CommonLanguage::getMessage('description'); ?></th>
                                <th class="text-center" style="width:5%" ><?php print CommonLanguage::getMessage('time'); ?></th>
                                <th class="text-center" style="width:10%" ><?php print CommonLanguage::getMessage('quantity'); ?></th>
                                <th class="text-center" style="width:10%" ><?php print CommonLanguage::getMessage('commission'); ?></th>
                                <th class="text-center" style="width:10%" ><?php print CommonLanguage::getMessage('Price'); ?></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        <tfoot>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th><div class="text-center"><strong><span id="total_commission"></span></strong></div></th>
                            <th><div class="text-center"><strong><span id="total_price"></span></strong></div></th>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var is_actual = <?php echo json_encode($is_actual);?>,MyDate;

    $(function () {
        build_select2($("#employee_id"), "xhr/employeeSearch");
        build_select2($("#vehicle_id"), "xhr/TruckSearch");
        $("#Daily_Date").datepicker({autoclose: true});
        $("#Month_Date").datepicker({autoclose: true,viewMode: "months",minViewMode: "months"});
        $("#Year_Date").datepicker({autoclose: true,viewMode: "years",minViewMode: "years"})
        $("#ViewMode label").on("click", function () {
            var freq = $(this).attr('data-type');
            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
                    }
            ActualAjax(freq);
        });
        $("#Daily_Date,#Month_Date,#Year_Date").on("changeDate", function (e) {
            var freq= $("#ViewMode label.active").attr('data-type');
            ActualAjax(freq);
        });
        $("#employee_id,#vehicle_id").on("change", function (e) {
            var freq= $("#ViewMode label.active").attr('data-type');
            ActualAjax(freq);
        });
        ActualAjax($("#ViewMode label.active").attr('data-type'));
    })
    function ActualAjax(freq) {
        MyCurrentDate(freq);
        var CurrentDate = {};
        CurrentDate.freq = freq;
        CurrentDate.Date = MyDate;
        CurrentDate.employee_id = $("#employee_id").val();
        CurrentDate.vehicle_id = $("#vehicle_id").val();
        CurrentDate.is_actual = is_actual;
        $.ajax({
            url: "InventoryAjax/get_total_invoice_details_vehicle_driver",
            data: CurrentDate,
            dataType:"json",
            complete: function (v1, v2) {
                if (v2 == "success") {
                    RebuildDataTable($('.panel-title h4').html(), [0,1,2,3,4], "InventoryAjax/invoiceDetailsVehicleDriver",CurrentDate)
                    $("#total_commission").html(v1.responseJSON[0]);
                    $("#total_price").html(v1.responseJSON[1]);
                }
            }
        });

    }
    function MyCurrentDate(freq) {
        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>