<div class="content-wrapper">
    <section class="content-header">
        <h1>Nuevo Empleado</h1>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-md-10">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <strong>Registro de empleado</strong>
                    </div>
                    <div class="panel-body">

                        <?php echo validation_errors('<div class="alert alert-danger">', '</div>'); ?>

                        <form method="post" action="<?php echo base_url('index.php/rrhh/empleados/store'); ?>">

                            <h4>Datos personales</h4>
                            <hr>

                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label>Apellidos</label>
                                    <input type="text" name="apellidos" class="form-control" value="<?php echo set_value('apellidos'); ?>" required>
                                </div>
                                <div class="col-md-6 form-group">
                                    <label>Nombres</label>
                                    <input type="text" name="nombres" class="form-control" value="<?php echo set_value('nombres'); ?>" required>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <label>Tipo de documento</label>
                                    <select name="documento_identidad_id" class="form-control" required>
                                        <option value="">Seleccione</option>
                                        <?php foreach($documentos as $item): ?>
                                            <option value="<?php echo $item->id; ?>"><?php echo $item->nombre; ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>Nro. documento</label>
                                    <input type="text" name="nro_documento" class="form-control" value="<?php echo set_value('nro_documento'); ?>" required>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>Sexo</label>
                                    <select name="sexo" class="form-control" required>
                                        <option value="">Seleccione</option>
                                        <option value="M">Masculino</option>
                                        <option value="F">Femenino</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label>Fecha de nacimiento</label>
                                    <input type="date" name="fecha_nacimiento" class="form-control" required>
                                </div>
                                <div class="col-md-6 form-group">
                                    <label>Fecha de ingreso</label>
                                    <input type="date" name="fecha_ingreso" class="form-control" required>
                                </div>
                            </div>

                            <h4>Datos laborales</h4>
                            <hr>

                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <label>Área</label>
                                    <select name="area_id" class="form-control" required>
                                        <option value="">Seleccione</option>
                                        <?php foreach($areas as $item): ?>
                                            <option value="<?php echo $item->id; ?>"><?php echo $item->nombre; ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>Cargo</label>
                                    <select name="cargo_id" class="form-control" required>
                                        <option value="">Seleccione</option>
                                        <?php foreach($cargos as $item): ?>
                                            <option value="<?php echo $item->id; ?>"><?php echo $item->nombre; ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>Régimen de pensión</label>
                                    <select name="regimen_pension_id" class="form-control" required>
                                        <option value="">Seleccione</option>
                                        <?php foreach($regimenes as $item): ?>
                                            <option value="<?php echo $item->id; ?>"><?php echo $item->nombre; ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <label>Sueldo básico</label>
                                    <input type="number" step="0.01" min="0" name="sueldo_basico" class="form-control" value="<?php echo set_value('sueldo_basico'); ?>" required>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>Cuota de Comisión</label>
                                    <input type="number" step="0.01" min="0" name="comision_cuota" class="form-control" value="<?php echo set_value('comision_cuota'); ?>">
                                </div>
                            </div>

                            <h4>Contacto y ubicación</h4>
                            <hr>

                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <label>Dirección</label>
                                    <input type="text" name="direccion" class="form-control" value="<?php echo set_value('direccion'); ?>">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <label>Departamento</label>
                                    <select id="departamento" class="form-control">
                                        <option value="">Seleccione</option>
                                        <?php foreach($departamentos as $dep): ?>
    <option value="<?php echo $dep->codigo; ?>"><?php echo $dep->nombre; ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>

                                <div class="col-md-4 form-group">
                                    <label>Provincia</label>
                                    <select id="provincia" class="form-control" disabled>
                                        <option value="">Seleccione</option>
                                    </select>
                                </div>

                                <div class="col-md-4 form-group">
                                    <label>Distrito</label>
                                    <select id="ubigeo_id" name="ubigeo_id" class="form-control" disabled>
                                        <option value="">Seleccione</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label>Celular</label>
                                    <input type="text" name="celular" class="form-control" value="<?php echo set_value('celular'); ?>">
                                </div>
                                <div class="col-md-6 form-group">
                                    <label>Email</label>
                                    <input type="email" name="email" class="form-control" value="<?php echo set_value('email'); ?>">
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary">
                                <i class="fa fa-save"></i> Guardar
                            </button>

                            <a href="<?php echo base_url('index.php/rrhh/empleados'); ?>" class="btn btn-default">
                                Cancelar
                            </a>

                        </form>

                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script>
window.addEventListener('load', function () {
    $('#departamento').on('change', function() {
        var departamento = $(this).val();

        $('#provincia').html('<option value="">Seleccione</option>').prop('disabled', true);
        $('#ubigeo_id').html('<option value="">Seleccione</option>').prop('disabled', true);

        if (departamento !== '') {
            $('#provincia').html('<option value="">Cargando...</option>');

            $.ajax({
                url: '<?php echo base_url("index.php/rrhh/empleados/provincias-ajax"); ?>',
                type: 'POST',
                data: {departamento: departamento},
                dataType: 'json',
                success: function(resp) {
                    $('#provincia').html('<option value="">Seleccione</option>');
                    $.each(resp, function(i, item) {
                        $('#provincia').append('<option value="' + item.codigo + '">' + item.nombre + '</option>');
                    });
                    $('#provincia').prop('disabled', false);
                }
            });
        }
    });

    $('#provincia').on('change', function() {
        var departamento = $('#departamento').val();
        var provincia = $(this).val();

        $('#ubigeo_id').html('<option value="">Seleccione</option>').prop('disabled', true);

        if (departamento !== '' && provincia !== '') {
            $('#ubigeo_id').html('<option value="">Cargando...</option>');

            $.ajax({
                url: '<?php echo base_url("index.php/rrhh/empleados/distritos-ajax"); ?>',
                type: 'POST',
                data: {
                    departamento: departamento,
                    provincia: provincia
                },
                dataType: 'json',
                success: function(resp) {
                    $('#ubigeo_id').html('<option value="">Seleccione</option>');
                    $.each(resp, function(i, item) {
                        $('#ubigeo_id').append('<option value="' + item.id + '">' + item.nombre + '</option>');
                    });
                    $('#ubigeo_id').prop('disabled', false);
                }
            });
        }
    });
});
</script>