{% extends '@kohinos/common/layout.html.twig' %}

{% block menu %}
{% endblock menu %}

{% block header %}
<header class="container header">
    <nav class="menu navbar navbar-expand-md navbar-light bg-light bg-white my-2">
        {% set baseLogoPath = KOH_MLC_LOGO_URL|default('/images/logo.png') %}
        {% if baseLogoPath starts with 'http' or baseLogoPath starts with '//' %}
            {% set logoSrc = baseLogoPath %}
        {% else %}
            {% set logoSrc = asset(baseLogoPath) %}
            {% if '?' not in baseLogoPath and shivas_app_version is defined %}
                {% set logoSrc = logoSrc ~ '?v' ~ shivas_app_version %}
            {% endif %}
        {% endif %}
        <a class="navbar-brand" href="{{ path('installation') }}">
            <img src="{{ logoSrc }}" width="187" height="45" class="d-inline-block align-top" alt="{{ KOH_MLC_NAME|default('Kohinos') }}">
        </a>
        
        {# Le menu est intentionnellement vide pendant l'installation #}
        <div class="collapse navbar-collapse" id="navbarSupportedContent"></div>
    </nav>
</header>
{% endblock header %}

{% block user_nav %}
{# Suppression du menu utilisateur pendant l'installation #}
{% endblock user_nav %}

{% block stylesheets %}
{{ parent() }}
<style>
    .installation-container {
        max-width: 800px;
        margin: 2rem auto;
    }
    
    .installation-card {
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        margin-bottom: 2rem;
    }
    
    .installation-card .card-header {
        background-color: var(--primary, #4e73df);
        color: white;
        border-radius: 8px 8px 0 0;
        padding: 1rem 1.5rem;
    }
    
    .installation-card .card-body {
        padding: 2rem;
    }
    
    .installation-form .form-group {
        margin-bottom: 1.5rem;
    }
    
    .installation-form label {
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    
    .installation-form .help-text {
        color: #6c757d;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }
    
    .installation-progress {
        height: 0.5rem;
        border-radius: 0;
        margin-top: 1rem;
    }
    
    .installation-nav {
        display: flex;
        justify-content: space-between;
        margin-top: 2rem;
    }
    
    .installation-section {
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e3e6f0;
    }
    
    .installation-section:last-child {
        border-bottom: none;
    }
    
    .installation-section-title {
        font-weight: 600;
        color: #5a5c69;
        margin-bottom: 1rem;
    }
    
    .form-check {
        padding-left: 2rem;
    }
    
    .form-check-input {
        margin-left: -2rem;
    }
    
    .invalid-feedback {
        display: block;
        width: 100%;
        margin-top: 0.25rem;
        font-size: 80%;
        color: #e74a3b;
    }

    input[type="checkbox"]:checked, .form-check-input:checked {
        background-color: #137ea7 !important;
        border-color:     #137ea7 !important;
    }
    
    #map-container {
        height: 400px;
        width: 100%;
        margin: 1.5rem 0;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    /* Responsive adjustments */
    @media (max-width: 768px) {
        .installation-container {
            margin: 1rem;
            max-width: 100%;
        }
        
        .installation-card .card-body {
            padding: 1rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="installation-container">
    <div class="installation-card card">
        <div class="card-header bg-primary text-white">
            <h2 class="m-0">{% block step_title %}Installation du Kohinos{% endblock %}</h2>
        </div>
        <div class="card-body">
            {% for label, messages in app.flashes %}
                {% for message in messages %}
                    <div class="alert alert-{{ label }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                {% endfor %}
            {% endfor %}
            
            {% block step_content %}{% endblock %}
            
            {% if app.request.get('_route') != 'installation_step1' %}
                <div class="installation-progress progress">
                    <div class="progress-bar" role="progressbar" style="width: {{ progress }}%" aria-valuenow="{{ progress }}" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <div class="text-center mt-2 text-muted">
                    Étape {{ display_step }} sur {{ total_steps }}
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Hide conditional fields initially
        const toggleConditionalFields = function() {
            document.querySelectorAll('.payment-method-toggle').forEach(function(toggle) {
                const targetClass = toggle.dataset.target;
                const targetFields = document.querySelectorAll('.' + targetClass);
                
                targetFields.forEach(function(field) {
                    const fieldContainer = field.closest('.form-group');
                    if (fieldContainer) {
                        fieldContainer.style.display = toggle.checked ? 'block' : 'none';
                    }
                });
            });
        };
        
        // Initialize conditional fields
        toggleConditionalFields();
        
        // Add event listeners to toggles
        document.querySelectorAll('.payment-method-toggle').forEach(function(toggle) {
            toggle.addEventListener('change', toggleConditionalFields);
        });
    });
</script>
{% block step_scripts %}{% endblock %}
{% endblock %}