{% extends 'base.html.twig' %}
{% block subreport_title %}| Datos Personales{% endblock %}


{% block page_content %}
    <style>
        .form-control {
            height: 60px !important;
        }
    </style>
    <ol class="breadcrumb">
        <li><a href="{{ path('welcome_index') }}"><i class="fa fa-home"></i> Inicio</a></li>
        {% for bread in breadcrumb %}
            <li><a href='{{ app.request.attributes.get('_route') }}'>{{ bread }}</a></li>
        {% endfor %}
    </ol>
    <div class="box-header with-border">
        <div class="col-sm-3 pull-left">
            <h5 class="box-title">{{ page_title }}</h5>
        </div>
        <div class="col-md-6 pull-right">
            <div class="box box-warning collapsed-box">
                <div class="box-header with-border">
                    <h5 id="nomuser" class="box-title" style="font-size: 1em !important">{{ nomuser }}</h5>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse" style="margin-top:0px"><i class="fa fa-plus"></i>
                            <div class="ripple-container"></div></button>
                    </div>
                    <!-- /.box-tools -->
                </div>
                <!-- /.box-header -->
                <div class="box-body" style="display: none;">
                    <h5  id="sucursal" style="font-size: 0.7em !important; color: #000">SUCURSAL: {{ sucursal }}</h5>
                    <h5  id="depto" style="font-size: 0.7em !important; color: #000">DEPART: {{ depto }}</h5>
                    <h5  id="cargo" style="font-size: 0.7em !important; color: #000">CARGO: {{ puesto }}</h5>
                    <h5  id="rut" style="font-size: 0.7em !important; color: #000">RUT: {{ rut }} - NUM: {{ personnum }}</h5>
                    <h5  id="email" style="font-size: 0.7em !important; color: #000">EMAIL: {{ email }}</h5>
                    <div class="clearfix"></div>

                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>

        <div class="clearfix"></div>

        <div class="tab-pane" id="settings">
            <form class="form-horizontal">
                {#<div class="form-group">#}
                    {#<label for="inputIdent" class="col-sm-2 control-label">Identificacion</label>#}
                    {#<div class="col-sm-8">#}
                        {#<input type="text" class="form-control"  id="inputIdent" disabled="disabled" placeholder="{{ rut }}">#}
                    {#</div>#}
                {#</div>#}
                {#<div class="form-group">#}
                    {#<label for="inputName" class="col-sm-2 control-label">Nombre</label>#}
                    {#<div class="col-sm-8">#}
                        {#<input type="text" class="form-control"  id="inputName" disabled="disabled" placeholder="{{ nomuser }}">#}
                    {#</div>#}
                {#</div>#}
                {#<div class="form-group">#}
                    {#<label for="inputGrupoPago" class="col-sm-2 control-label">Grupo de Pago</label>#}

                    {#<div class="col-sm-8">#}
                        {#<input type="text" class="form-control"  id="inputGrupoPago" disabled="disabled" placeholder="{{ codgrupo }}">#}
                    {#</div>#}
                {#</div>#}
                {#<div class="form-group">#}
                    {#<label for="inputContrato" class="col-sm-2 control-label">Fecha Contrato</label>#}

                    {#<div class="col-sm-8">#}
                        {#<input type="text" class="form-control"  id="inputContrato" disabled="disabled" placeholder="{{ fec_ini_contrato }}">#}
                    {#</div>#}
                {#</div>#}
                {#<div class="form-group">#}
                    {#<label for="inputTermino" class="col-sm-2 control-label">Fecha Termino</label>#}

                    {#<div class="col-sm-8">#}
                        {#<input type="text" class="form-control"  id="inputTermino" disabled="disabled" placeholder="{{ fec_fin_contrato }}">#}
                    {#</div>#}
                {#</div>#}
                {#<div class="form-group">#}
                    {#<label for="inputCredencial" class="col-sm-2 control-label">Credencial</label>#}

                    {#<div class="col-sm-8">#}
                        {#<input type="text" class="form-control"  id="inputCredencial" disabled="disabled" placeholder="{{ personnum }}">#}
                    {#</div>#}
                {#</div>#}
                {#<div class="form-group">#}
                    {#<label for="inputPHorario" class="col-sm-2 control-label">Plantilla Horario</label>#}

                    {#<div class="col-sm-8">#}
                        {#<input type="text" class="form-control"  id="inputPHorario" disabled="disabled">#}
                    {#</div>#}
                {#</div>#}
                <div class="form-group">
                    <label for="inputEmail" class="col-sm-2 control-label" email-mask>Email</label>

                    <div class="col-sm-8">
                        <input type="text" class="form-control"  value="{{ email }}" id="inputEmail" placeholder="{{ email }}">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputTelefono" class="col-sm-2 control-label">Telefono Fijo</label>

                    <div class="col-sm-4">
                        {#<input type="text" class="form-control" data-inputmask="'mask': '9 999-9999'" data-mask id="inputTelefono" placeholder="{{ telfijo }}">#}
                        <input type="text" class="form-control"  value="{{ telfijo }}" id="inputTelefono" placeholder="{{ telfijo }}">

                    </div>
                </div>
                <div class="form-group">
                    <label for="inputCelular" class="col-sm-2 control-label">Celular</label>

                    <div class="col-sm-4">
                        {#<input type="text" class="form-control" data-inputmask="'mask': '9 9999-9999'" data-mask id="inputCelular" placeholder="{{ telcell }}" >#}
                        <input type="text" class="form-control"  id="inputCelular" value="{{ telcell }}" placeholder="{{ telcell }}" >

                    </div>
                </div>


                {#<div class="form-group">#}
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" onclick="updateEmployee({{ alert }})" class="btn btn-danger">Aceptar</button>
                        <button type="submit"  class="btn btn-successr">Cancelar</button>

                    </div>
                {#</div>#}
            </form>
        </div>
    </div>
    <script>
        $(function () {
            $('[data-mask]').inputmask();
            //email mask
            $('[email-mask]').inputmask({
                mask: "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}]",
                greedy: false,
                onBeforePaste: function (pastedValue, opts) {
                    pastedValue = pastedValue.toLowerCase();
                    return pastedValue.replace("mailto:", "");
                },
                definitions: {
                    '*': {
                        validator: "[0-9A-Za-z!#$%&'*+/=?^_`{|}~\-]",
                        casing: "lower"
                    }
                }
            });
        });
    </script>
    <script>
        function updateEmployee(alerta) {
            var telcell = $("#inputCelular").val();
            var telfijo = $("#inputTelefono").val();
            var email = $("#inputEmail").val();
            console.log(alerta);
            $.ajax({
                url: '{{ url("guardarDP") }}',
                type: "POST",
                data: {
                    email: email,
                    telfijo: telfijo,
                    telcell: telcell
                },
                success: function (heads) {
                    if(alerta) {
                        console.log(alerta);
                        alert("El email " + alerta + " ya esta registrado")
                    }
                }
            });
        }

    </script>
{% endblock page_content%}