{% extends 'base.html.twig' %}

{% block breadcrumb %}
    <ol class="breadcrumbs">
        <li><a href="#">Inicio</a></li>
        <li><a href="{{ path('toma_posesion_index_limpiar') }}">Lista de Tomas de Posesión</a></li>
        <li><a class="active"> Toma de posesión de {{tp.apellidos}}, {{tp.nombres}}</a></li>
    </ol>
{% endblock %}

{% block titulo_body %}
    <div class="col s12 l10">
        <h4 style="margin-top: 3%;">Toma de Posesión de {{tp.apellidos|split(' ')|reduce((carry, v) => carry ~ ' ' ~ v|capitalize)}}, {{tp.nombres|split(' ')|reduce((carry, v) => carry ~ ' ' ~ v|capitalize)}}
            {# {% if tp.estado == 'Publicado' %}
                <span style="margin-top: 15px;"><i><sub style="color:green">{Publicado}</sub></i></span>
            {% elseif tp.estado == 'Borrador' %}
                <span style="margin-top: 15px;"><i><sub style="color:darkorange">{Borrador}</sub></i></span>
            {% endif %} #}
        </h4>
    </div>
{% endblock %}

{% block titulo_acciones_body %}
    <div class="col s12 l12">
        {# {% if tp.estado == 'Borrador' %} #}
            <a id="edit" href="{{ path('toma_posesion_edit', {'idView': tp.idView }) }}" 
            class="btn right oscuro darken-2 waves-effect waves-light col s12" style="margin-top: 10px;">
                <i class="material-icons right">edit</i> Editar toma de posesión
            </a>
        {# {% else %}
            <a class="btn right oscuro darken-2 waves-effect waves-light col s12" style="margin-top: 10px; float:right" type="button" 
            onclick="clickModificar(event)" data-url="{{ path('toma_posesion_edit', {'idView': tp.idView }) }}" >
                <i class="material-icons right">edit</i> Modificar
            </a>
        {% endif %} #}
        
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        function clickModificar(event){
            $url_modificar=event.currentTarget.dataset.url;
            swal({
                title: "Despublicar",
                text: "¿Está seguro que quiere modificar esta Toma de Posesión? En consecuencia quedará en Borrador.",
                icon: "warning",
                buttons: true,
                })
                .then((aceptar) => {
                if (aceptar) {
                    window.location.href = $url_modificar;
                } 
            });
        }

    </script>
{% endblock %}

{% block body %}
    <ul class="collapsible popout">
        <li class="active">
            <div class="collapsible-header" tabindex="0"> 
                    <i class="material-icons icono-primario">person</i>
            </div>
            <div class="collapsible-body" style="display: block;">
                <div class="row">  
                    <h5 class="ml-0">{{tp.apellidos|split(' ')|reduce((carry, v) => carry ~ ' ' ~ v|capitalize)}}, {{tp.nombres|split(' ')|reduce((carry, v) => carry ~ ' ' ~ v|capitalize)}}</h5>
                </div>
                <div class="row">
                    
                    <div class="col col s12 l2 m3">
                        <div class="card">
                            <div class="card-image">
                                {% if urlImagen != null %}
                                    <img src="{{urlImagen}}" onerror="handleImageError(this)">
                                {% else %}
                                    <img src="{{ asset('img/user.png') }}" onerror="handleImageError(this)">
                                {% endif %}
                                <span class="card-title"> {{tp.nombres|split(' ')|reduce((carry, v) => carry ~ ' ' ~ v|capitalize)}} {{tp.apellidos|split(' ')|reduce((carry, v) => carry ~ ' ' ~ v|capitalize)}}</span>
                            </div>
                            <div class="card-content">
                            
                            </div>
                        </div>
                    </div>
                    
                    <div class="col s12 l5 m5">
                        <div class="row">
                            <div class=" col s12 l10 m6">
                                <blockquote>
                                    <p>DNI {{tp.dni}} </p>
                                    <p>Número de Decreto: {{tp.numeroDecreto}}</p>
                                    <p><strong>Fecha de Decreto:</strong>
                                        {% if tp.fechaDecreto is null %}
                                            
                                        {% else %}
                                            {{tp.fechaDecreto|format_datetime(pattern="eeee dd 'de' LLLL 'de' Y ", locale='es_AR') |capitalize}}
                                        {% endif %}
                                    </p>
                                    <p><strong>Tipo de Decreto:</strong> {{tp.tipoDecreto}}</p>
                                </blockquote>
                            </div>
                        </div>
                    </div>
                   
                    <div class="col s12 l5 m5">
                        <div class="row">
                            <div class=" col s12 l10 m8">
                                <blockquote>
                                    <p><strong>
                                        {% if tp.cargoJusticia is not null %}
                                            <b>{{tp.cargoJusticia}} - ({{tp.abreviacion}})</b>
                                        {% else %}
                                            <b>{{tp.cargo}}</b>
                                        {% endif %}
                                    </strong></p>
                                    <p><strong>Fecha de Posesión:</strong> 
                                        {% if tp.posesion is null %}
                                           
                                        {% else %}
                                            {{tp.posesion|format_datetime(pattern="eeee dd 'de' LLLL 'de' Y ", locale='es_AR') |capitalize}}
                                        {% endif %}
                                    </p>
                                    <p><strong>Asiento:</strong> {{tp.asiento}}</p>
                                </blockquote>
                            </div>
                        </div>
                    </div>
                </div>
            
            </div>
        </li>
    </ul>

    {# {% if (tp.estado == 'Borrador') %}
        <a class="limpiar btn green darken-2 waves-effect right waves-light" style="margin-top:2%;" href="{{ path('toma_posesion_publicar', {'idView': tp.idView }) }}"> Publicar 
            <i class="material-icons right">publish</i>
        </a>
    {% else %}
        <a class="limpiar btn orange darken-2 waves-effect right waves-light" style="margin-top:2%;" href="{{ path('toma_posesion_despublicar', {'idView': tp.idView }) }}"> Despublicar 
            <i class="material-icons right">save</i>
        </a>
    {% endif %} #}

    <a class="btn waves-effect waves-light left-align" style="margin-top:2%;" href="{{ path('toma_posesion_index_limpiar') }}">Volver.
        <i class="material-icons right">undo</i>
    </a>
{% endblock %}