{% extends 'h_tmp_usr/z_tmp.html' %}

{% block css %}

<link rel="stylesheet" href="{{ url_for('static', filename='h_tmp_user/a_home/a_home.css') }}">

<!-- {# Librería de aos.js [animaciones] #} -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

<!-- {# bootstrap datatables #} -->
<link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.bootstrap5.css">

<!-- {# cdn download xlsx #} -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

{% endblock css %}

{% block body %}

<div >
    <div>
        {% if is_admin %} {% include 'z_comps/download_xlsx.html' %} {% endif %}
    </div>


    <div data-aos="fade-right" data-aos-delay="0" data-aos-duration="800" data-aos-easing="ease-in-out" >
        <table id="dbContact" class="table table-striped" >
            <caption>Solicitudes de Contacto</caption>
            <thead>
                <tr>
                    <th data-header="Fecha">Fecha</th>
                    <th data-header="Nombre">Nombre</th>
                    <th data-header="Estado">Estado</th>
                    <th data-header="Empleados">Empleados</th>
                    <th data-header="Rol">Rol</th>
                    <th data-header="Industria">Industria</th>
                    <th data-header="Estatus" class="status">Estatus</th>
                </tr>
            </thead>
            <tbody>
                {% for item in data_contact %}
                <tr data-id="{{item[0]}}">
                    <td data-label="Fecha: " class="td-texto">
                        <button data-id="{{item[0]}}" type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#modalContactData">
                            {{item[1]}}
                        </button>
                    </td>
                    <td data-label="Nombre:" class="td-texto">
                        {{item[2]}} {{item[3]}}
                    </td>
                    <td data-label="Estado: " class="td-texto">{{item[4]}}</td>
                    <td data-label="Empleados: " class="td-texto">{{item[5]}}</td>
                    <td data-label="Rol: " class="td-texto">{{item[6]}}</td>
                    <td data-label="Industria: " class="td-texto">{{item[7]}}</td>
                    <td data-label="Estatus:">
                        <select class="form-select" data-id="{{ item[0] }}">
                            <option value="Null" {% if item[8] is none %}selected{% endif %}></option>
                            <option value="Opción 1" {% if item[8]=='Opción 1' %}selected{% endif %}>Opción 1</option>
                            <option value="Opción 2" {% if item[8]=='Opción 2' %}selected{% endif %}>Opción 2</option>
                            <option value="Opción 3" {% if item[8]=='Opción 3' %}selected{% endif %}>Opción 3</option>
                            <option value="Opción 4" {% if item[8]=='Opción 4' %}selected{% endif %}>Opción 4</option>
                            <option value="Opción 5" {% if item[8]=='Opción 5' %}selected{% endif %}>Opción 5</option>
                            <option value="Opción 6" {% if item[8]=='Opción 6' %}selected{% endif %}>Opción 6</option>
                            <option value="Opción 7" {% if item[8]=='Opción 7' %}selected{% endif %}>Opción 7</option>
                            <option value="Archivado">Archivar</option>
                        </select>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>


<style>
    /* Estilos personalizados para el modal */
    .modal-contact-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #eee;
    }
    
    .modal-contact-icon {
        font-size: 1.2rem;
        color: #0d6efd; /* Color azul de Bootstrap */
        min-width: 30px;
        text-align: center;
        margin-right: 12px;
    }
    
    .modal-contact-content {
        flex: 1;
    }
    
    .modal-contact-label {
        font-weight: 600;
        color: #555;
        display: block;
        margin-bottom: 2px;
    }
    
    .modal-contact-value {
        color: #333;
        word-break: break-word;
    }
    
    /* Estilo para el campo de comentarios */
    .comments-container {
        background-color: #f8f9fa;
        border-radius: 5px;
        padding: 12px;
        margin-top: 15px;
    }

    .modal-contact-item {
    transition: all 0.3s ease;
}

.modal-contact-item:hover {
    background-color: #f8f9fa;
    border-radius: 5px;
}

.modal-contact-icon {
    transition: transform 0.2s ease;
}

.modal-contact-item:hover .modal-contact-icon {
    transform: scale(1.1);
}

</style>

<!-- Modal -->
<div class="modal fade" id="modalContactData" tabindex="-1" aria-labelledby="modalContactDataLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalContactDataLabel"><i class="bi bi-database-fill-check"></i> Información del Registro:</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="modalBody">
                <!-- {# contenido modal #} -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>


{% endblock body %}

{% block js %}



<!-- {# if flash #} -->
{% include 'z_comps/if_flash.html' %}

<!-- {# aos script #} -->
{% include 'z_comps/aos_script.html' %}

<!-- {# obtener toda la información de la db del registro seleccionado #} -->
<script src="{{ url_for('static', filename='h_tmp_user/a_home/get_contact_data.js') }}"></script>

<!-- {# actualizar los datos del estatus del contacto #} -->
<script src="{{ url_for( 'static', filename='h_tmp_user/a_home/update_status_contacts.js' ) }}"></script>

<!-- js datatables -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<!-- jQuery (necesario para DataTables) -->
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<!-- Popper.js (necesario para los dropdowns de Bootstrap) -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<!-- Bootstrap JS Bundle con Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.js"></script>
<!-- DataTables Bootstrap 5 JS -->
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.bootstrap5.js"></script>

<script src="{{ url_for( 'static', filename='h_tmp_user/a_home/datatable.js' ) }}"></script>


<!-- {# tiempo de expiración para el usuario #} -->
<script>
    let exp = "{{exp}}";
</script>

<script src="{{ url_for('static', filename='z_comps/save_exp_timestamp.js') }}"></script>



{% endblock js %}