<style>
    .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;
    }

    .inputIcon{
        width:30px;}




</style>

<div class="modal fade stick-up " id="vehicleWeighbridge" tabindex="-1" role="dialog" aria-hidden="true"style="width:70%;margin:0 auto" data-backdrop="static">
    <div class="modal-dialog ">
        <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-14"></i></button>
                <h5><span class="semi-bold"><?php print CommonLanguage::getMessage('vehicle_weighbridge'); ?></span></h5>
            </div>
            <div class="modal-body">
                <form id="VehicleWeighbridgePostForm" method="POST" onsubmit="return false">
                    <div class="row">

                        <div class="col-md-12" style="margin:15px;">

                            <div class="col-md-6">
                                <div><label><?php print CommonLanguage::getMessage('vehicle_codee'); ?></label></div>
                                <div class="input-group m-b"><span class="input-group-btn">
                                        <button type="button" class="btn btn-bg-success-darker"><i class="fa fa-certificate"></i> </button> </span>
                                    <select required id="Weighbridge_Vehicle_Code" name="Weighbridge_Vehicle_Code" class="full-width " data-init-plugin="select2">
                                        <?php foreach ($all_vehicles as $vehicle): ?>
                                            <option value="<?php echo $vehicle['Vehicle_ID']; ?>"><?php echo $vehicle['Vehicle_Registration_Number']; ?></option>
                                        <?php endforeach; ?>

                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div><label><?php print CommonLanguage::getMessage('Date'); ?></label></div>
                                <div class="input-group required">
                                    <span class="input-group-addon bg-success-darker">
                                        <i class="fa fa-calendar-times-o inputIcon"></i>
                                    </span>
                                    <input placeholder="<?php print CommonLanguage::getMessage('Date'); ?>" id="Weighbridge_Date" name="Weighbridge_Date" class="datepicker form-control ">
                                </div>
                            </div>

                        </div>
                        <div class="col-md-12" style="margin:10px;">
                            <div class="col-md-6">
                                <div><label><?php print CommonLanguage::getMessage('amount'); ?></label></div>
                                <div class="input-group required">
                                    <span class="input-group-addon bg-success-darker">
                                        <i class="fa fa-sort-numeric-desc inputIcon"></i>
                                    </span>
                                    <input type="text" placeholder="<?php print CommonLanguage::getMessage('amount'); ?>" id="Weighbridge_Amount" name="Weighbridge_Amount" class="form-control " required>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div><label><?php print CommonLanguage::getMessage('Currency'); ?></label></div>
                                <?php echo Forms::CurrencyDropDown(1, 'success-darker'); ?>

                            </div>
                            <div class="col-md-2">
                                <div><label><?php print CommonLanguage::getMessage('paid'); ?></label></div>
                                <div class="input-group required">
                                    <input type="checkbox" id="IsPaid" class="IsPaid" data-init-plugin="switchery"/>
                                </div>
                            </div>

                        </div>





                    </div>
                    <div class="modal-footer">
                        <div class="pull-right">
                            <button class="btn btn-default" id="CloseWeighbridge"   > <?php print CommonLanguage::getMessage('Close'); ?> </button>
                            <button class="btn btn-bg-success-darker" id="SubmitVehicleWeighbridge"  > <?php print CommonLanguage::getMessage('Save'); ?>   </button>
                        </div>
                    </div>
            </div>
            </form>
        </div>
    </div>

</div>
<script type="text/javascript">
    var Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
            Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>;
    $(function () {




        $("#VehicleWeighbridgePostForm .datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            orientation: "top auto",
            autoclose: true,
        }).on("changeDate", function (e) {
            $(this).keyup();
        })



        $("#SubmitVehicleWeighbridge").on("click", function () {

            $("#WeighbridgeValidationAlert").remove();
            var AlertBox = $('<div id="WeighbridgeValidationAlert" class="WizardValidationAlert alert"></div>'), IsValidated = true;
            AlertBox.insertAfter($("#vehicleWeighbridge").find(".modal-dialog .modal-header").find("h5"))

            $("#WeighbridgeIsBusy").remove();
            $("#vehicleWeighbridge").append('<div id="WeighbridgeIsBusy" style="position:absolute;left:0;right:0;top:0px;height:100%;background:rgba(255,255,255,0.9);z-index:9999;opacity:0"><img class="image-responsive-height demo-mw-50" src="img/demo/progress.svg" alt="Progress" style="position: absolute;left: 50%;top: 50%;margin: -25px 0 0 -25px;" /></div>');
            $("#WeighbridgeIsBusy").animate({opacity: 1});

            var Data = {
                Weighbridge_Vehicle_ID: $("#Weighbridge_Vehicle_Code").val(),
                description: $("#Weighbridge_Vehicle_Code option:selected").html(),
                Weighbridge_Date: $("#Weighbridge_Date").val(),
                Weighbridge_Amount: $("#Weighbridge_Amount").val(),
                Currency_ID: $("#CurrencyDropDown input").val(),
                Is_Paid: $("#IsPaid").is(":checked") ? 1 : 0


            };

            $.ajax({
                url: "GarageAjax/vehicleWeighbridgeAjax",
                method: "POST",
                data: Data,
                complete: function (v1, v2) {
                    if (v2 == 'success') {
                        if (v1.responseText == "OK") {
                            $("#WeighbridgeIsBusy").remove();
                            $("#WeighbridgeValidationAlert").addClass("alert-success").empty().html(Submitted_Successfully);
                            setTimeout(function () {
                                $("#vehicleWeighbridge").modal('hide')
                                $("#WeighbridgeValidationAlert").hide()
                            }, 1500)
                        } else {
                            $("#WeighbridgeValidationAlert").addClass("alert-danger").empty().html(v1.responseText);
                        }
                    } else {
                        $("#WeighbridgeValidationAlert").addClass("alert-danger").empty().html(Failed_Submit);
                    }
                    $("#WeighbridgeIsBusy").remove();
                }


            })





        });
        $("#CloseWeighbridge").on("click", function () {
            $("#vehicleWeighbridge input").val('');
            //$("#AddProductPostForm").validate().resetForm();
            $("#vehicleWeighbridge").modal("hide");

        })
        $("#vehicleWeighbridge input").val('');


    });


</script>
