
<style>
    .table tbody tr td {
        border:0px !important;
    }
    .b-grey{

        border-color:#ed9421;
    }
    .switchery switchery-default{

        box-shadow: #4c0870!important;
        border-color: #4c0870!important;
        transition: border 0.4s, box-shadow 0.4s, background-color 1.2s;
        background-color: #4c0870!important;
    }

</style>
<div class="container-fluid container-fixed-lg">
    <div class="panel panel-default">
        <div class="panel-body">
            <form id="CheckupVehiclePostForm" method="POST" onsubmit="return false">
                <div class="row">
                    <?php echo Forms::AlertDiv('TruckCheckupSuccess'); ?>
                </div>
                <div class="container-sm-height">
                    <h2 class="font-montserrat all-caps hint-text"><?php print CommonLanguage::getMessage('truck_checkup');?></h2>
                    <div class="row-sm-height">
                        <div class="col-md-9 col-sm-height sm-no-padding">
                            <div class="row">
                                <div class="col-md-2 search_truck_div form-group" >
                                    <label><?php echo CommonLanguage::getMessage('search_vehicle');?></label>
                                    <input type="hidden" id="search_truck" name="search_truck" class="full-width" >
                                </div>
                                <div class="col-md-2  form-group" >
                                    <label><?php echo CommonLanguage::getMessage('milage');?></label>
                                    <input type="text" id="TruckMilage" placeholder="<?php print CommonLanguage::getMessage('km');?>" class="form-control">
                                </div> 
                                <div class=' date col-md-2 form-group'>
                                    <label><?php echo CommonLanguage::getMessage('Date');?></label>
                                    <input type='text' class="form-control" name="datetimepicker1" id="datetimepicker1" autocomplete="off" />
                                </div>
                                <div class="col-md-2 form-group m-t-20">
                                    <label><?php print CommonLanguage::getMessage('check_out');?></label>
                                    <input type="radio" id="check_out" value="0" name="ChekupSatus" />&nbsp;
                                    <label><?php print CommonLanguage::getMessage('check_in');?></label>
                                    <input type="radio" id="check_in" value="1" name="ChekupSatus" />
                                </div>
                                <div class="col-md-3 check_out_dates form-group hidden" >
                                    <label><?php echo CommonLanguage::getMessage('ava_check_out_date');?></label>
                                    <input type="hidden" id="check_out_entry_id" name="check_out_entry_id" class="full-width" >
                                </div>
                            </div>
                            <div class="row m-t-10">
                                <div id="TruckInfo">
                                    <div class="col-md-6 ">
                                        <div id="TruckInfoContent">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row m-t-10">
                                <div class="col-md-12">
                                    <div id="TruckCheckupMainDiv">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row m-t-20  <?php echo $permissions->hasPermission('show_vehicle_view') ? '' : 'hidden'; ?>">
                    <div class="col-md-12">
                        <div class="col-md-6 panel">
                            <div class="panel-heading">
                                <div class="panel-title"><?php print CommonLanguage::getMessage('driver_side_view');?>
                                </div>
                            </div>
                            <div class="panel-body">
                                <img src="img/truck-side.jpg" style="width: 100%;max-height: 188px;"/>
                            </div>
                            <div class="panel-footer"><?php print CommonLanguage::getMessage('all_clear');?>: <input type="checkbox" id="IsDriverSide" data-init-plugin="switchery" checked/></div>
                        </div>
                        <div class="col-md-6">
                            <div class="panel-heading">
                                <div class="panel-title"><?php print CommonLanguage::getMessage('front_view');?>
                                </div>
                            </div>
                            <div class="panel-body">
                                <img src="img/truck-front-side.jpg" style="max-height: 188px;padding-left:35%;"/>
                            </div>
                            <div class="panel-footer"><?php print CommonLanguage::getMessage('all_clear');?>: <input type="checkbox" id="IsFrontSide" data-init-plugin="switchery" checked/></div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="col-md-6 panel">
                            <div class="panel-heading">
                                <div class="panel-title"><?php print CommonLanguage::getMessage('passenger_view');?>
                                </div>
                            </div>
                            <div class="panel-body">
                                <img src="img/truck-pass-side.jpg" style="width: 100%;max-height:188px;"/>
                            </div>
                            <div class="panel-footer"><?php print CommonLanguage::getMessage('all_clear');?>: <input type="checkbox" id="IsPassengerSide" data-init-plugin="switchery" checked/></div>
                        </div>
                        <div class="col-md-6 panel">
                            <div class="panel-heading">
                                <div class="panel-title"><?php print CommonLanguage::getMessage('back_view');?>
                                </div>
                            </div>
                            <div class="panel-body">
                                <img src="img/truck-back-side.jpg" style="max-height:188px;padding-left: 35%;"/>
                            </div>
                            <div class="panel-footer"><?php print CommonLanguage::getMessage('all_clear');?>: <input type="checkbox" id="IsBackSide" data-init-plugin="switchery" checked/></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <textarea id="Checkup_Comment" class="form-control NoteTextArea" placeholder="<?php print CommonLanguage::getMessage('enter_note');?>"></textarea>
                    </div>
                </div>
                <div class="container-sm-height" >
                    <a class="btn btn-danger m-t-10" onclick="javascript:window.print();">
                        <i class="fa fa-print"></i> <?php print CommonLanguage::getMessage('print');?>
                    </a>
                    <a class=" btn btn-success-darker pull-right m-t-10" id="SubmitVehicleCheckupButton" name="SubmitVehicleCheckupButton"  type="button">
                        <i class="fa fa-check"></i> 
                        <?php print CommonLanguage::getMessage('Save');?>
                    </a>
                </div>
            </form>
        </div>
    </div>
    <hr>
</div>
<div class="modal fade bs-example-modal-md" id="proceedCheck" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header clearfix text-left">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-20"></i>
                </button>
                <h5 class="add-label bold"><?php echo CommonLanguage::getMessage('confirm_checkup');?></h5>
            </div>
            <div class="modal-body">
                <div class="row">
                    <?php echo Forms::AlertDiv('proceed_check_alert'); ?>
                </div>
                <div class="row">
                    <div class="col-md-12 ">
                        <p><strong ><?php print CommonLanguage::getMessage('check_hint');?> </strong></p>
                        <p><strong><?php print CommonLanguage::getMessage('Proceed_Delete');?></strong></p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><?php print CommonLanguage::getMessage('Close');?></button>
                <button type="button" class="btn btn-danger" id="Proceed" style="width:auto"><?php print CommonLanguage::getMessage('Save');?></button>
            </div>
        </div>
    </div>
</div>
<script>
    var truck_nb = <?php echo json_encode(CommonLanguage::getMessage('truck_number')); ?>,
        truck_name = <?php echo json_encode(CommonLanguage::getMessage('type_name')); ?>,
            truck_code =<?php echo json_encode(CommonLanguage::getMessage('Code')); ?>;
            $(function(){
                build_select2($("#search_truck"), "xhr/truckSearch");
                build_select2($("#check_out_entry_id"), "xhr/availableCheckoutDatesSearch?vehicle_id="+$("#search_truck").val());
                $("#search_truck").on('change',function(){
                    build_select2($("#check_out_entry_id"), "xhr/availableCheckoutDatesSearch?vehicle_id="+$("#search_truck").val());
                    if($(this).val())
                        getTruckDetails()
                    else
                        $('#TruckInfoContent').html('')                                               
                });
                $("#datetimepicker1").datetimepicker({format: 'YYYY-MM-DD HH:mm:ss'});
                $("#SubmitVehicleCheckupButton").on("click",function(){
                    if($("input[name=ChekupSatus]:checked").val() == 1){
                        if(!$("#check_out_entry_id").val()){
                            AddAlert("#TruckCheckupSuccess", '<?php echo CommonLanguage::getMessage('choose_check_out_for_check_in');?>', 'warning');
                             $(document.body).animate({scrollTop:0},800)
                            return;
                        }
                        if($('#datetimepicker1').val() < $('#s2id_check_out_entry_id .select2-chosen').html()){
                            AddAlert("#TruckCheckupSuccess", '<?php echo CommonLanguage::getMessage('checkin_greater_checkout'); ?>', 'warning');
                             $(document.body).animate({scrollTop:0},800)
                            return;
                        }

                    }
                    if(!$("#search_truck").val()){
                        AddAlert("#TruckCheckupSuccess", '<?php echo CommonLanguage::getMessage('Required_Truck'); ?>', 'warning');
                         $(document.body).animate({scrollTop:0},800)
                        return;
                    }
                   
                    $("#proceedCheck").modal("show")

                })
                $('input[name=ChekupSatus]').on('click',function(){
                    var current_value=$(this).val();
                    current_value == 0 ? $('.check_out_dates').addClass('hidden') : $('.check_out_dates').removeClass('hidden')
                    $('#TruckCheckupMainDiv').empty();
                    $.ajax({
                        url:"GarageAjax/getCheckupStatusData?checkup_status="+current_value,
                        dataType:"json",
                        complete:function(v1,v2){
                            if(v2 == "success"){
                                var response = v1.responseJSON;
                                for(i=0;i<response.length;i++){
                                    var switch_title= response[i]['checkup_setting_title'].replace(/\s/g, ''),
                                        content ='<div class="col-md-3 form-group"><label class="pull-left">'+response[i]['checkup_setting_title']+'</label>&nbsp;<input type="checkbox" data-id="'+response[i]['checkup_setting_id']+'" id="'+switch_title+'" class="switches pull-right" data-init-plugin="switchery"/></div>';
                                    $('#TruckCheckupMainDiv').append($(content));
                                    new Switchery($("#"+switch_title).get(0), {color: $.Pages.getColor("success")});
                                }
                            }
                        }
                    });
                });
                //to save the checkup data
                $("#Proceed").on("click", function(){
                    var Data = {
                        Vehicle_ID: 	$("#search_truck").val(),
                        Checkup_Date:	$("#datetimepicker1").val(),
                        Vehicle_Milage:	$("#TruckMilage").val(),
                        IsDriverSide:	$("#IsDriverSide").is(":checked")? 1 : 0,
                        IsPassengerSide:$("#IsPassengerSide").is(":checked")? 1 : 0,
                        IsFrontSide:	$("#IsFrontSide").is(":checked")? 1 : 0,
                        IsBackSide:		$("#IsBackSide").is(":checked")? 1 : 0,
                        CheckIn:	    $("input[name=ChekupSatus]:checked").val(),
                        Checkup_Comment:$("#Checkup_Comment").val(),
                        check_out_entry_id:$("#check_out_entry_id").val(),
                        checkup_setting:[]
                    };
                    $('input.switches').each(function(){
                        Data.checkup_setting.push({checkup_setting_id:$(this).attr('data-id'),
                                                   checkup_status: $(this).is(":checked")? 1 : 0
                                                  });
                    });
                    $.ajax({
                        url:"GarageAjax/vehicleCheckup",
                        method:"POST",
                        data:Data,
                        dataType:"json",
                        complete:function(v1,v2){
                            if(v2 == "success"){
                                var response = v1.responseJSON;
                                if(response[1] == 'success'){
                                    AddAlert("#TruckCheckupSuccess", response[0], response[1]);
                                }else{
                                    AddAlert("#TruckCheckupSuccess", response[0], response[1]);
                                }
                                hideModalAlert('proceedCheck');
                            }
                            $(document.body).animate({scrollTop:0},800)
                        }
                    })
                });
            });
    function getTruckDetails(){
        $.ajax({
            url:"GarageAjax/getVehicleData?vehicle_id="+$('#search_truck').val(),
            dataType:"json",
            complete:function(v1,v2){
                if(v2 == "success"){
                    var response = v1.responseJSON,
                        truck = response.UNLQ.split(' - '),checked = response.CheckIn,Content = "";
                    Content += "<div><strong>"+truck_nb+": </strong>"+truck[1]+"<br/></div>";
                    Content += "<div><strong>"+truck_name+":</strong>"+truck[2]+"<br/></div>";
                    Content += "<div><strong>"+truck_code+": </strong>" +truck[0]+"<br/></div>";
                    $("#TruckInfoContent").html(Content);
                }
            }
        });
    }
</script>
