<div id="adicionarAgenda" class="modal-demo">
    <button type="button" class="close" onclick="Custombox.close();">
        <span>&times;</span><span class="sr-only">Close</span>
    </button>
    <h4 class="custom-modal-title">Cadastrar Preventiva</h4>
    <div class="custom-modal-text">

        <form id="formCompromisso" name="formCompromisso" class="form-horizontal"
              action="<?php echo base_url(); ?>agenda/adicionarAgenda" method="POST">
            <div class="form-group row">
                <div class="col-md-12">
                    <div class="radio-list text-center">
                        <label class="custom-control custom-radio">
                            <input id="tpAgenda" name="tpAgenda" type="radio" checked="" class="custom-control-input"
                                   value="preventiva">
                            <span class="custom-control-indicator"></span>
                            <span class="custom-control-description"><span class="compromisso event-success"></span>Preventiva</span>
                        </label>
                        <label class="custom-control custom-radio">
                            <input id="tpAgenda" name="tpAgenda" type="radio" class="custom-control-input"
                                   value="corretiva">
                            <span class="custom-control-indicator"></span>
                            <span class="custom-control-description"><span class="compromisso event-info"></span>Corretiva</span>
                        </label>
                        <label class="custom-control custom-radio">
                            <input id="tpAgenda" name="tpAgenda" type="radio" class="custom-control-input"
                                   value="outros">
                            <span class="custom-control-indicator"></span>
                            <span class="custom-control-description"><span class="compromisso event-warning"></span>Outros</span>
                        </label>

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group row">
                        <input type="hidden" id="veiculo_id" name="veiculo_id">
                        <label class="control-label col-md-2">Veículo</label>
                        <div class="col-md-5">
                            <input type="text" id="prefixo" name="prefixo" class="form-control"
                                   placeholder="Prefixo do veículo" required>
                            <small id="dadosVeiculo" class="form-control-feedback"></small>
                        </div>
                        <div class="col-md-4">
                            <select name="garantia" id="garantia" class="form-control" required >
                                <option value="">---Tipo---</option>
                                <option value="1">Mensal</option>
                                <option value="3">Trimestral</option>
                                <option value="6">Semestral</option>
                                <option value="12">Anual</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="col-md-12">
                    <div class="form-group row">
                        <label class="control-label col-md-2">Data</label>
                        <div class="col-md-5">
                            <input type="date" id="dtAgenda" name="dtAgenda" class="form-control"
                                   placeholder="dd/mm/yyyy" required>
                        </div>
                        <label class="control-label col-md-1">Hora</label>
                        <div class="col-md-3">
                            <input type="time" id="hsInicioAgenda" name="hsInicioAgenda" class="form-control"
                                   placeholder="hh:mm" required>
                        </div>
                    </div>
                </div>

<!--                <div class="col-md-12">-->
<!--                    <div class="form-group">-->
<!--                        <label>Descrição</label>-->
<!--                        <textarea class="form-control" id="dsAgenda" name="dsAgenda" rows="5"></textarea>-->
<!--                    </div>-->
<!--                </div>-->


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default waves-effect" onclick="Custombox.close();">Close</button>
                <button type="submit" id="btnCadastar" class="btn btn-success waves-effect waves-light" disabled><i
                            class="fa fa-save"></i> Salvar
                </button>
            </div>
    </div>1
    </form>
</div>
</div>


<!--<script>-->
<!--    // Clock pickers-->
<!--    $('#single-input').clockpicker({-->
<!--        placement: 'bottom',-->
<!--        align: 'left',-->
<!--        autoclose: true,-->
<!--        'default': 'now'-->
<!--    });-->
<!--    $('.clockpicker').clockpicker({-->
<!--        donetext: 'Done',-->
<!--    }).find('input').change(function() {-->
<!--        console.log(this.value);-->
<!--    });-->
<!--    $('#check-minutes').click(function(e) {-->
<!--// Have to stop propagation here-->
<!--        e.stopPropagation();-->
<!--        input.clockpicker('show').clockpicker('toggleView', 'minutes');-->
<!--    });-->
<!--    if (/mobile/i.test(navigator.userAgent)) {-->
<!--        $('input').prop('readOnly', true);-->
<!--    }-->
<!--    // Colorpicker-->
<!--    $(".colorpicker").asColorPicker();-->
<!--    $(".complex-colorpicker").asColorPicker({-->
<!--        mode: 'complex'-->
<!--    });-->
<!--    $(".gradient-colorpicker").asColorPicker({-->
<!--        mode: 'gradient'-->
<!--    });-->
<!--    // Date Picker-->
<!--    jQuery('.mydatepicker, #datepicker').datepicker();-->
<!--    jQuery('#datepicker-autoclose').datepicker({-->
<!--        autoclose: true,-->
<!--        todayHighlight: true-->
<!--    });-->
<!--    jQuery('#date-range').datepicker({-->
<!--        toggleActive: true-->
<!--    });-->
<!--    jQuery('#datepicker-inline').datepicker({-->
<!--        todayHighlight: true-->
<!--    });-->
<!--    // Daterange picker-->
<!--    $('.input-daterange-datepicker').daterangepicker({-->
<!--        buttonClasses: ['btn', 'btn-sm'],-->
<!--        applyClass: 'btn-danger',-->
<!--        cancelClass: 'btn-inverse'-->
<!--    });-->
<!--    $('.input-daterange-timepicker').daterangepicker({-->
<!--        timePicker: true,-->
<!--        format: 'MM/DD/YYYY h:mm A',-->
<!--        timePickerIncrement: 30,-->
<!--        timePicker12Hour: true,-->
<!--        timePickerSeconds: false,-->
<!--        buttonClasses: ['btn', 'btn-sm'],-->
<!--        applyClass: 'btn-danger',-->
<!--        cancelClass: 'btn-inverse'-->
<!--    });-->
<!--    $('.input-limit-datepicker').daterangepicker({-->
<!--        format: 'MM/DD/YYYY',-->
<!--        minDate: '06/01/2015',-->
<!--        maxDate: '06/30/2015',-->
<!--        buttonClasses: ['btn', 'btn-sm'],-->
<!--        applyClass: 'btn-danger',-->
<!--        cancelClass: 'btn-inverse',-->
<!--        dateLimit: {-->
<!--            days: 6-->
<!--        }-->
<!--    });-->
<!--</script>-->

<script>
    $("#prefixo").autocomplete({
        source: "<?php echo base_url(); ?>veiculos/autoCompleteVeiculo",
        minLength: 3,
        select: function (event, ui) {
            $("#proprietario_id").val(ui.item.id);

            $("#placa").val(ui.item.placa);
            $("#garagem").val(ui.item.garagem);
            $("#veiculo_id").val(ui.item.idVeiculo);
            $("#tipo").val(ui.item.tipoVeiculo);

            if (ui.item.idVeiculo) {
                $("#btnCadastar").prop("disabled", false);
            }

            // $(this).css("display", "none");
            $("#dadosVeiculo").html('Placa: ' + ui.item.placa + ' | ' + ui.item.garagem + ' | Tipo: ' + ui.item.tipoVeiculo);
        }
    });
</script>
