{% extends 'base.html' %}
{% load static %}

{% block header_links %}
{% if user.is_authenticated %}
    <li class="nav-item mx-2">
        {% if user.rol == 'gerente' %}
            <a href="{% url 'dashboard:dashboard_gerente' %}" class="btn btn-outline-light">Mi Perfil</a>
        {% elif user.rol == 'directivo' %}
            <a href="{% url 'dashboard:dashboard_directivo' %}" class="btn btn-outline-light">Mi Perfil</a>
        {% elif user.rol == 'apoyo_directivo' %}
            <a href="{% url 'dashboard:dashboard_apoyo_directivo' %}" class="btn btn-outline-light">Mi Perfil</a>
        {% elif user.rol == 'comercial' %}
            <a href="{% url 'dashboard:dashboard_comercial' %}" class="btn btn-outline-light">Mi Perfil</a>
        {% endif %}
    </li>
    <li class="nav-item">
        <a href="{% url 'logout' %}" class="btn btn-outline-light">Cerrar Sesión</a>
    </li>
{% else %}
    <li class="nav-item">
        <a href="{% url 'login' %}" class="btn btn-outline-light">Iniciar Sesión</a>
    </li>
{% endif %}
{% endblock %}

{% if messages %}
<div class="container mt-3">
    {% for message in messages %}
    <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    {% endfor %}
</div>
{% endif %}

{% block content %}
<link rel="stylesheet" href="{% static 'css/index.css' %}">
<style>
    .fondo {
        background-image: url('{% static "img/index.png" %}');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

<main class="p-lg-4 p-3 mb-3">
    <!-- Sección de Bienvenida -->
    <div class="container shadow-sm mb-4 border-secondary animate__animated animate__backInDown">
        <div class="row rounded-end-4 justify-content-center align-items-center p-0 border border-secondary">
            <div class="col-sm-7 p-0 fondo">
                <img src="{% static 'img/index.png' %}" alt="Imagen de presentación" class="img-fluid">
            </div>
            <div class="col-sm-5 p-5 d-flex flex-column align-middle">
                <h1 class="fw-bolder fs-1 mb-4">Bienvenido a OLÉ Logística</h1>
                <p class="fs-5 fw-semibold">¡Estamos aquí para ayudarte a transformar tu negocio de manera eficiente!</p>
            </div>
        </div>
    </div>

    <!-- Sección de Información de Contacto y Mapa -->
    <div class="container border rounded-4 mt-4 p-3 shadow-sm border-secondary">
        <div class="row">
            <!-- Columna de Información de Contacto -->
            <div class="col-md-5 d-flex flex-column justify-content-center align-items-center mb-4">
                <!-- Horarios de Atención -->
                <div class="border rounded-3 p-4 bg-white shadow mb-3 w-100" style="max-width: 500px;">
                    <h2 class="fw-bolder fs-5 mb-3">
                        <i class="fa-solid fa-clock me-2 fs-4 text-icon"></i> Horarios de Atención
                    </h2>
                    <ul class="list-unstyled mb-0">
                        <li class="fs-6 fw-semibold text-muted mb-1">Lunes - Viernes: <span class="text-dark">8:00 AM - 05:00 PM</span></li>
                        <li class="fs-6 fw-semizbold text-muted">Sábado: <span class="text-dark">9:00 AM - 1:00 PM</span></li>
                    </ul>
                </div>

                <!-- Información de Contacto -->
                <div class="border rounded-3 p-4 bg-white shadow w-100" style="max-width: 500px;">
                    <h2 class="fw-bolder fs-5 mb-3">
                        <i class="fa-solid fa-building me-2 fs-4 text-icon"></i> Información de Contacto
                    </h2>
                    <ul class="list-unstyled mb-0">
                        <li class="fs-6 fw-semibold text-muted mb-1">
                            <i class="fa-solid fa-phone me-2 text-icon"></i> PBX: +57 (1) 9370091
                        </li>
                        <li class="fs-6 fw-semibold text-muted mb-1">
                            <i class="fa-solid fa-mobile-alt me-2 text-icon"></i> Móvil: +57 316 830 9014
                        </li>
                        <li class="fs-6 fw-semibold text-muted">
                            <i class="fa-solid fa-envelope me-2 text-icon"></i> Email:
                            <a href="mailto:gerencia.general@oleoperadorlogistico.com" class="text-decoration-none text-dark">
                                gerencia.general@oleoperadorlogistico.com
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Columna del Mapa de Google Maps -->
            <div class="col-md-7">
                <div class="border rounded-3 p-4 bg-white shadow-sm">
                    <h2 class="fw-bolder fs-5 mb-3">
                        <i class="fa-solid fa-location-dot me-2 fs-4 text-icon"></i> Nuestra Ubicación
                    </h2>
                    <iframe class="w-100 rounded-3 border border-2 border-black" style="height: 400px; border: none;" loading="lazy"
                        src="https://maps.google.com/maps?q=CARRERA%2097%20%23%2024c-75&amp;t=m&amp;z=10&amp;output=embed&amp;iwloc=near"
                        title="CARRERA 97 # 24c-75" aria-label="CARRERA 97 # 24c-75">
                    </iframe>
                </div>
            </div>
        </div>
    </div>
</main>


{% endblock %}