{% if order_incident is defined and order_incident is not null %}
{% if order_incident.getResolutionDate() %}
<div class="card h-100">
    <div class="card-header">
        <strong>Incidencias resueltas</strong>
    </div>
{% else %}
<div class="card text-bg-danger h-100">
    <div class="card-header">
        <strong>Incidencia en curso</strong>
    </div>
{% endif %}
    <div class="card-body">

         <div class="d-flex" style="justify-content: space-between;">
            <span>Tipo de incidencia</span>
            <span>{{ order_incident.getIncident().getName() }}</span>
        </div>
        <div class="d-flex" style="justify-content: space-between;">
            <span>Fecha incidencia</span>
            <span>{{ order_incident.getCreatedAt().format('Y-m-d H:i') }}</span>
        </div>
        <div class="d-flex" style="justify-content: space-between;">
            <span>Usuario</span>
            <span>{{ order_incident.getUser().getNombre() }}</span>
        </div>

        <div class="d-flex" style="justify-content: space-between;">
            <span>Detalle</span>
            <span>{{ order_incident.getComment() }}</span>
        </div>

        {% if order_incident.getResolutionDate() %}
            <hr/>
    
            <div class="d-flex" style="justify-content: space-between;">
                <span>Fecha de resolución</span>
                <span>{{ order_incident.getResolutionDate().format('Y-m-d H:i') }}</span>
            </div>

            <div class="d-flex" style="justify-content: space-between;">
                <span>Detalle de resolución</span>
                <span>{{ order_incident.getResolutionComment() }}</span>
            </div>
        {% else %}
            <div class="input-group mt-3 justify-content-end">
                <button class="btn btn-sm btn-custom-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#resolveIncidentOffcanvas">Resolver</button>
            </div>
        {% endif %}

    </div>
</div>

<div class="offcanvas offcanvas-end offcanvas-custom-width" id="resolveIncidentOffcanvas" tabindex="-1" aria-labelledby="resolveIncidentOffcanvasLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="resolveIncidentOffcanvasLabel">Resolver incidencia</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div class="mb-3">
            <label for="incidentType" class="form-label">Tipo de incidencia</label>
            <select id="incidentType" class="form-select" aria-describedby="incidentTypeHelp" disabled>
                <option selected value="{{order_incident.getIncident().getId()}}">{{order_incident.getIncident().getName()}}</option>
            </select>
        </div>
        <div class="mb-3">
            <label for="incidentComment" class="form-label">Detalle</label>
            <input type="text" class="form-control" id="incidentComment" value="{{order_incident.getComment()}}" disabled>
        </div>
        <div class="mb-3">
            <label for="resolveIncidentComment" class="form-label">Detalle de la resolución</label>
            <input type="text" class="form-control" id="resolveIncidentComment">
        </div>
    </div>
    <div class="offcanvas-footer mt-auto p-3 text-end">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="offcanvas">Cerrar</button>
        <button type="button" class="btn btn-custom-primary save" data-url="{{path('app_order_incident_edit', {'orderId': 'ORDER_ID', 'incidentId': 'INCIDENT_ID'} )}}" data-incident-id="{{ order_incident.getId() }}">Resolver incidencia</button>
    </div>
    <div class="spinner-container d-none" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">
        <div class="spinner-border" role="status" style="color: #00554e;">
            <span class="sr-only">Cargando...</span>
        </div>
    </div>
</div>
{% endif %}

{% block javascripts3rd %}
    {% javascripts
        '@AppBundle/Resources/public/js/Ordenes/edit/incidents.js'
    %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}