{% extends 'base.html.twig' %}
{% block subreport_title %}| Clave Reloj{% 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">Clave Actual</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control"  id="inputClave" disabled="disabled" placeholder="{{ clave }}">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputName" class="col-sm-2 control-label">Clave Nueva</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control"  id="inputClave1" value="{{ clave }}" required>
                    </div>
                </div>
                {#<div class="form-group">#}
                    {#<label for="inputName" class="col-sm-2 control-label">Repita Clave</label>#}
                    {#<div class="col-sm-8">#}
                        {#<input type="text" class="form-control" value="{{ clave }}" id="inputClave2" required>#}
                    {#</div>#}
                {#</div>#}

                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" onclick="updateCR()" class="btn btn-danger">Aceptar</button>
                    <button type="submit"  class="btn btn-successr">Cancelar</button>

                </div>
                {#</div>#}
            </form>
        </div>
    </div>
    <script>
        function updateCR() {
            var clave1 = $("#inputClave1").val();
//            var clave2 = $("#inputclave2").val();
            console.log(clave1);

            $.ajax({
                url: '{{ url("guardarCR") }}',
                type: "POST",
                data: {
                    clave: clave1,
                },
                success: function (heads) {
                    console.log(heads);
                }
            });
        }

    </script>
{% endblock page_content%}