<div class="inmodal">
    <div class="modal-header">
        <i class="fa fa-calendar-o modal-icon" style="color: #000"></i>
        <h4 class="modal-title text-success">Agregar planeaci&oacute;n de pr&aacute;cticas</h4>
        <p class="text"> Universidad de la Sierra Sur </p>
    </div>
    <div class="modal-body">
        <form class="form-horizontal text-success" name="vm.planeacionForm">
            <div class="form-group" ng-class="{ 'has-error': vm.planeacionForm.practica.$touched && vm.planeacionForm.practica.$invalid }">
                <label class="control-label col-sm-3 col-md-3 col-lg-3" for="">Pr&aacute;ctica<strong class="text-danger">*</strong></label>
                <div class="col-sm-8">
                    <select name="practica" id="practica" class="form-control input-sm" ng-model="vm.practica.nombre" ng-change="vm.obtenerSede()" required>
                        <option value="">SELECCIONE...</option>
                        <option ng-repeat="option in vm.practicaArray" value="{{option.nombre}}" ng-bind="option.nombre"> </option>
                    </select>
                    <div class="help-block" ng-messages="vm.planeacionForm.practica.$error" ng-show="vm.planeacionForm.practica.$touched" ng-show="vm.planeacionForm.practica.$error.pattern">
                        <div ng-messages-include="app/views/common/messages.html"></div>
                    </div>
                </div>
            </div>
            <div class="form-group" ng-class="{ 'has-error': vm.planeacionForm.sede.$touched && vm.planeacionForm.sede.$invalid }">
                <label class="control-label col-sm-3 col-md-3 col-lg-3" for="">Sede<strong class="text-danger">*</strong></label>
                <div class="col-sm-8">
                    <multiple-autocomplete name="sede" id="sede" ng-model="vm.sedes" object-property="nombre" suggestions-arr="vm.sedeArray" required>
                    </multiple-autocomplete>
                    <div class="help-block" ng-messages="vm.planeacionForm.sede.$error" ng-show="vm.planeacionForm.sede.$touched" ng-show="vm.planeacionForm.sede.$error.pattern">
                        <div ng-messages-include="app/views/common/messages.html"></div>
                    </div>
                </div>
            </div>
            <div class="form-group" ng-class="{ 'has-error': vm.planeacionForm.cicloEscolar.$touched && vm.planeacionForm.cicloEscolar.$invalid }">
                <label class="control-label col-sm-3 col-md-3 col-lg-3" for="">Ciclo escolar<strong class="text-danger">*</strong></label>
                <div class="col-sm-8">
                    <select name="cicloEscolar" id="cicloEscolar" class="form-control input-sm" ng-model="vm.cicloEscolar" ng-change="vm.obtenerPeriodoEsc()" required>
                        <option value="">SELECCIONE...</option>
                        <option ng-repeat="option in vm.cicloEsc" value="{{option.value}}" ng-bind="option.value"> </option>
                    </select>
                    <div class="help-block" ng-messages="vm.planeacionForm.cicloEscolar.$error" ng-show="vm.planeacionForm.cicloEscolar.$touched" ng-show="vm.planeacionForm.cicloEscolar.$error.pattern">
                        <div ng-messages-include="app/views/common/messages.html"></div>
                    </div>
                </div>
            </div>
            <div class="form-group" ng-class="{ 'has-error': vm.planeacionForm.periodoEscolar.$touched && vm.planeacionForm.periodoEscolar.$invalid }">
                <label class="control-label col-sm-3 col-md-3 col-lg-3" for="">Periodo escolar<strong class="text-danger">*</strong></label>
                <div class="col-sm-8">
                    <select name="periodoEscolar" id="periodoEscolar" class="form-control input-sm" ng-model="vm.periodoEscolar" required>
                        <option value="">SELECCIONE...</option>
                        <option ng-repeat="option in vm.periodoEsc" value="{{option.value}}" ng-bind="option.value"> </option>
                    </select>
                    <div class="help-block" ng-messages="vm.planeacionForm.periodoEscolar.$error" ng-show="vm.planeacionForm.periodoEscolar.$touched" ng-show="vm.planeacionForm.periodoEscolar.$error.pattern">
                        <div ng-messages-include="app/views/common/messages.html"></div>
                    </div>
                </div>
            </div>


            <!-- <div class="form-group" ng-class="{ 'has-error': vm.planeacionForm.periodoPractica.$touched && vm.planeacionForm.periodoPractica.$invalid }">
                <label class="control-label col-sm-3 col-md-3 col-lg-3" for="name">Periodo de pr&aacutectica<span class="text-danger">*</span></label>
                <div class="col-sm-8">
                    <input uppercase-only type="text" name="periodoPractica" id="periodoPractica" class="form-control input-sm" placeholder="Periodo de pr&aacute;ctica" ng-model="vm.periodoPractica" required>
                    <div class="help-block" ng-messages="vm.planeacionForm.periodoPractica.$error" ng-show="vm.planeacionForm.periodoPractica.$touched" ng-show="vm.planeacionForm.periodoPractica.$error.pattern">
                        <div ng-messages-include="app/views/common/messages.html"></div>
                    </div>
                </div>
            </div> -->

            <fieldset>
                <legend><small class="text-success text-sm">Periodo de practica</small></legend>
                <div class="form-group" ng-class="{ 'has-error': vm.planeacionForm.fechaIni.$touched && vm.planeacionForm.fechaIni.$invalid }">
                    <label class="control-label col-sm-3 col-md-3 col-lg-3" for="name">Fecha inicio<span class="text-danger">*</span></label>
                    <div class="col-sm-8">

                        <input type="datetime" class="form-control input-sm" id="fechaIni" name="fechaIni" date-time ng-model="vm.fechaIni" view="date" auto-close="true" placeholder="Fecha de inicio" required>

                        <!-- <input type="date" name="fechaIni" id="fechaIni" class="form-control input-sm" placeholder="Periodo de pr&aacute;ctica" ng-model="vm.fechaIni" required> -->

                        <div class="help-block" ng-messages="vm.planeacionForm.fechaIni.$error" ng-show="vm.planeacionForm.fechaIni.$touched" ng-show="vm.planeacionForm.fechaIni.$error.pattern">
                            <div ng-messages-include="app/views/common/messages.html"></div>
                        </div>
                    </div>
                </div>
                <div class="form-group" ng-class="{ 'has-error': vm.planeacionForm.fechaFin.$touched && vm.planeacionForm.fechaFin.$invalid }">
                    <label class="control-label col-sm-3 col-md-3 col-lg-3" for="name">Fecha fin<span class="text-danger">*</span></label>
                    <div class="col-sm-8">

                        <input type="datetime" class="form-control input-sm" id="fechaFin" name="fechaFin" date-time ng-model="vm.fechaFin" view="date" auto-close="true" placeholder="Fecha final" required>
                        <!--                             
                        <input type="date" name="fechaFin" id="fechaFin" class="form-control input-sm" placeholder="Periodo de pr&aacute;ctica" ng-model="vm.fechaFin" required> -->


                        <div class="help-block" ng-messages="vm.planeacionForm.fechaFin.$error" ng-show="vm.planeacionForm.fechaFin.$touched" ng-show="vm.planeacionForm.fechaFin.$error.pattern">
                            <div ng-messages-include="app/views/common/messages.html"></div>
                        </div>
                    </div>
                </div>
            </fieldset>

        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-danger" ng-click="vm.close()"> <i class="fa fa-close"> </i> Cancelar</button>
        <button type="button" class="btn btn-success" ng-click="vm.save()"> <i class="fa fa-save"> </i> Guardar</button>
    </div>
</div>