@extends('template.layout')

@section('styles')
    <link href="{{asset('css/pages/perfil.css')}}" rel="stylesheet" type="text/css"/>
@endsection

@section('content')

    <h1 class="page-title">
        <a href="{{URL::previous()}}" class="icon-action-undo"></a>
        Perfil
        <small>{{ $rol[0]->name  }}</small>
    </h1>
    <div class="profile">
        @include('alerts.index')
        <div class="row profile-account">
            <div class="col-md-3">
                <ul class="ver-inline-menu tabbable margin-bottom-10">
                    <li>
                        @if(is_null($usuario->urlimagen))
                            <img src="{{ asset('img/demo/profile.png') }}" class="img-responsive pic-bordered"
                                 alt="img-perfil" style="border: 1px solid #e1e7ee; width: 100%"/>
                        @else
                            <img src="{{ asset($usuario->urlimagen) }}" class="img-responsive pic-bordered"
                                 alt="img-perfil" style="border: 1px solid #e1e7ee; width: 100%"/>
                        @endif
                        {{--<a href="javascript:;" class="profile-edit"> edit </a>--}}
                    </li>
                    <li class="active">
                        <a data-toggle="tab" href="#tab_1" class="text-ellipsis">
                            <i class="fa fa-cog"></i> Informaci&oacute;n personal </a>
                        <span class="after"> </span>
                    </li>
                    <li>
                        <a data-toggle="tab" href="#tab_3" class="text-ellipsis">
                            <i class="fa fa-eye"></i> Experiencia laboral </a>
                    </li>
                </ul>
            </div>
            <div class="col-md-9">
                <div class="tab-content">
                    <div id="tab_1" class="tab-pane active">
                        <div class="profile-info">
                            <h1 class="font-blue sbold uppercase">{{ $usuario->fullName }}</h1>
                            <ul class="list-inline">
                                <li>
                                    <i class="fa fa-user"></i> {{ $usuario->dni }} </li>
                                <li>
                                    <i class="fa fa-genderless"></i> {{ $usuario->genero }} </li>
                                <li>
                                    <i class="fa fa-asterisk"></i> {{ $usuario->estado_civil }} </li>
                            </ul>
                        </div>

                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label class="control-label">Tel&eacute;fono</label>
                                <p>{{$usuario->telefono}}</p>
                            </div>
                            <div class="col-md-6 form-group">
                                <label class="control-label">Correo</label>
                                <p>{{$usuario->email}}</p>

                            </div>
                            <div class="col-md-6 form-group">
                                <label class="control-label">Carrera: </label>
                                <p>{{$especialidad[0]->nombre}}</p>
                            </div>
                            <div class="col-md-6 form-group">
                                @if(count($ciclo) > 0)
                                    <label class="control-label">Ciclo: </label>
                                    <p>{{$ciclo[0]->nombre}}</p>
                                @endif
                            </div>
                            <div class="col-md-12 form-group">
                                <label class="control-label">Direcci&oacute;n</label>
                                <p>{{$usuario->direccion}}</p>

                            </div>
                        </div>

                    </div>
                    <div id="tab_3" class="tab-pane">
                        <div class="portlet">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="fa fa-gift"></i>Experiencia laboral
                                </div>
                                <div class="tools" style="margin-right: 5px;">
                                    <a id="reload-exp" href="javascript:;" data-load="true"
                                       data-url="{{ url('bolsa/perfil/experiencias',['id' => $usuario->id]) }}"
                                       class="reload"> </a>
                                </div>

                            </div>
                            <div class="portlet-body portlet-empty"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $('#form-datos').validate({
            rules: {
                telefono: {
                    pattern: '^[0-9]{7,9}$'
                },
            }
        });
        $('#form-password').validate({
            rules: {
                newpassword: {
                    minlength: 5,
                },
                repassword: {
                    equalTo: "#newpassword"
                },
            }
        });
        function reload() {
            var el = $('#reload-exp').closest(".portlet").children(".portlet-body");
            var url = $('#reload-exp').attr("data-url");
            var error = $('#reload-exp').attr("data-error-display");
            if (url) {
                App.blockUI({
                    target: el,
                    animate: true,
                    overlayColor: 'none'
                });
                $.ajax({
                    type: "GET",
                    cache: false,
                    url: url,
                    dataType: "html",
                    success: function (res) {
                        App.unblockUI(el);
                        el.html(res);
                        App.initAjax() // reinitialize elements & plugins for newly loaded content
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        App.unblockUI(el);
                        var msg = 'Error on reloading the content. Please check your connection and try again.';
                        if (error == "toastr" && toastr) {
                            toastr.error(msg);
                        } else if (error == "notific8" && $.notific8) {
                            $.notific8('zindex', 11500);
                            $.notific8(msg, {
                                theme: 'ruby',
                                life: 3000
                            });
                        } else {
                            alert(msg);
                        }
                    }
                });
            }
        }

    </script>
@endsection