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

{% block title %}Créez votre site - Étape 1{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/colorpicker/css/jqColorPicker.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/bo/vendor/jquery.filer/css/jquery.filer.css') }}" rel="stylesheet">
    <style>
        .offer-banner {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            padding: 1.5rem;
            color: white;
            margin-bottom: 2rem;
            box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
        }

        .offer-price {
            font-size: 2rem;
            font-weight: 700;
        }

        .offer-trial {
            background: rgba(255, 255, 255, 0.2);
            padding: 0.5rem 1rem;
            border-radius: 8px;
            display: inline-block;
            margin-top: 0.5rem;
        }

        .form-modern {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .form-modern .form-label {
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 0.5rem;
        }

        .form-modern .form-control {
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            padding: 0.75rem 1rem;
            transition: all 0.3s ease;
        }

        .form-modern .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }


        .logo-upload-zone {
            border: 2px dashed #e2e8f0;
            border-radius: 12px;
            padding: 2rem;
            text-align: center;
            background: #f8f9fa;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .logo-upload-zone:hover {
            border-color: #667eea;
            background: rgba(102, 126, 234, 0.05);
        }

        .logo-upload-zone i {
            font-size: 3rem;
            color: #667eea;
            margin-bottom: 1rem;
        }

        .promo-code-section {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 1.5rem;
            margin-top: 2rem;
        }

        .info-box {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
            border-left: 4px solid #667eea;
            border-radius: 8px;
            padding: 1rem 1.5rem;
            margin-bottom: 2rem;
        }

        .btn-next {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 0.875rem 2.5rem;
            border-radius: 8px;
            font-weight: 600;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .btn-next:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
            color: white;
        }

        .old-price {
            text-decoration: line-through;
            color: #94a3b8;
            font-size: 1.2rem;
        }

        .new-price {
            color: #10b981;
            font-weight: 700;
            font-size: 1.5rem;
        }
    </style>
{% endblock %}

{% block body %}
    <section style="background: #f8f9fa; min-height: 100vh; padding: 3rem 0;">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-10 col-xl-9">
                    <!-- Header -->
                    <div class="text-center mb-4">
                        <h1 class="h2 fw-bold mb-2" style="color: #1e293b;">Créez votre site internet</h1>
                        <p class="text-muted">Commencez gratuitement, sans engagement et sans carte bancaire</p>
                    </div>

                    <!-- Wizard Progress -->
                    <div class="bg-white rounded shadow-sm p-4 mb-4">
                        {% include 'bo/order/wizard.html.twig' with {'step': 1} %}
                    </div>

                    <!-- Offer Banner -->
                    <div class="offer-banner">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <h3 class="h4 mb-2">
                                    <i class="fas fa-rocket me-2"></i>
                                    Offre {{ product.name }}
                                </h3>
                                <p class="mb-0 opacity-90">Tous les outils pour créer votre site professionnel</p>
                            </div>
                            <div class="col-md-4 text-md-end mt-3 mt-md-0">
                                {% if newPrice > 0 and free == false %}
                                    <div>
                                        <span class="old-price d-block">{{ product.price | number_format(2,',', ' ') }} €</span>
                                        <span class="new-price">{{ newPrice | number_format(2,',', ' ') }} €<span class="fs-6">/mois</span></span>
                                    </div>
                                    <div class="offer-trial mt-2">
                                        <i class="fas fa-check-circle me-1"></i>
                                        Code promo activé : {{ codePromo }}
                                    </div>
                                {% elseif free == true %}
                                    <div class="new-price">GRATUIT</div>
                                    <div class="offer-trial mt-2">
                                        <i class="fas fa-check-circle me-1"></i>
                                        Code : {{ codePromo }}
                                    </div>
                                {% else %}
                                    <div class="offer-price">{{ product.price | number_format(2,',', ' ') }} €<span class="fs-6">/mois</span></div>
                                    <div class="offer-trial">
                                        <i class="fas fa-gift me-1"></i>
                                        1er mois gratuit
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <!-- Success Message for Promo Code -->
                    {% if codePromo %}
                        <div class="alert alert-success d-flex align-items-center mb-3" role="alert" style="border-left: 4px solid #10b981; background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);">
                            <i class="fas fa-check-circle fa-lg me-3" style="color: #10b981;"></i>
                            <div>
                                <strong>Code promo appliqué avec succès !</strong><br>
                                <small>Votre réduction a été prise en compte.</small>
                            </div>
                        </div>
                    {% endif %}

                    <!-- Info Box -->
                    <div class="info-box">
                        <div class="d-flex align-items-start">
                            <i class="fas fa-info-circle fa-lg me-3 mt-1" style="color: #667eea;"></i>
                            <div>
                                <strong class="d-block mb-1">Profitez de votre premier mois gratuit</strong>
                                <span class="text-muted">Testez toutes les fonctionnalités sans engagement. Aucune carte bancaire requise.</span>
                            </div>
                        </div>
                    </div>

                    <!-- Main Form -->
                    <div class="form-modern">
                        {{ form_start(form, {'attr':{'method':'post', 'action': path('order_product', {'product': product.id })}}) }}

                        <h4 class="mb-4" style="color: #1e293b;">
                            <i class="fas fa-palette me-2" style="color: #667eea;"></i>
                            Personnalisez votre site
                        </h4>

                        <div class="row">
                            <!-- Site Name -->
                            <div class="col-md-8 mb-4">
                                <label class="form-label">
                                    <i class="fas fa-signature me-2"></i>
                                    {{ form_label(form.name) }}
                                </label>
                                {{ form_widget(form.name, {'attr':{'class':'form-control', 'placeholder':'Ex: Mon Entreprise, Mon Blog...'}}) }}
                                {{ form_errors(form.name) }}
                                <small class="text-muted">Ce nom apparaîtra dans le titre de votre site</small>
                            </div>

                            <!-- Color Theme -->
                            <div class="col-md-4 mb-4">
                                <label class="form-label">
                                    <i class="fas fa-palette me-2"></i>
                                    Couleur principale
                                </label>
                                <div class="position-relative">
                                    {# Champ texte caché pour la soumission du formulaire #}
                                    {{ form_widget(form.colorTheme, {'attr': {'class': 'd-none'}, 'label': false}) }}

                                    {# Interface visuelle avec color picker superposé #}
                                    <div class="input-group position-relative">
                                        <div class="btn btn-outline-secondary d-flex align-items-center justify-content-center position-relative" style="width: 60px; height: 45px; padding: 0; border: 2px solid #e2e8f0; border-radius: 8px 0 0 8px; overflow: hidden;">
                                            <div id="color-preview" style="width: 50px; height: 35px; border-radius: 4px; border: 1px solid #ddd;"></div>
                                            {# Color picker natif transparent superposé #}
                                            <input type="color" id="color-picker-native" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;" />
                                        </div>
                                        <input type="text" id="color-value-display" class="form-control" readonly value="" style="background-color: white; font-family: monospace; font-weight: 600; cursor: default; user-select: none; border-radius: 0 8px 8px 0;" />
                                    </div>
                                </div>
                                <small class="text-muted">Cliquez sur le carré de couleur pour modifier</small>
                            </div>
                        </div>

                        <!-- Logo Upload -->
                        <div class="row">
                            <div class="col-12 mb-4">
                                <label class="form-label">
                                    <i class="fas fa-image me-2"></i>
                                    {{ form_label(form.logo) }}
                                </label>
                                <div class="logo-upload-zone" onclick="document.getElementById('add_order_logo').click();">
                                    <i class="fas fa-cloud-upload-alt"></i>
                                    <div id="logo-preview-area">
                                        <p class="mb-1 fw-semibold">Cliquez pour ajouter votre logo</p>
                                        <small class="text-muted">PNG, JPG ou GIF (max. 2 Mo)</small>
                                    </div>
                                    <img id="logo-preview-img" class="mt-3" style="max-width: 200px; max-height: 100px; display: none;" />
                                </div>
                                {{ form_widget(form.logo, {'attr':{'class':'d-none', 'id':'add_order_logo'}}) }}
                                <small class="text-muted mt-2 d-block">Optionnel - Vous pourrez le modifier plus tard</small>
                            </div>
                        </div>

                        <!-- Promo Code Section -->
                        {% if not codePromo %}
                        <div class="promo-code-section">
                            <h5 class="mb-3">
                                <i class="fas fa-tag me-2" style="color: #667eea;"></i>
                                Vous avez un code promotionnel ?
                            </h5>
                            <div class="row align-items-end">
                                <div class="col-md-8 mb-3 mb-md-0">
                                    {{ form_widget(form.codePromo, {'attr':{'class':'form-control', 'placeholder':'Entrez votre code promo'}}) }}
                                    <div class="text-danger mt-2">
                                        {{ form_errors(form.codePromo) }}
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <button name="checkCodePromotion" type="submit" class="btn btn-secondary w-100" value="1" formnovalidate>
                                        <i class="fas fa-check me-2"></i>Appliquer
                                    </button>
                                </div>
                            </div>
                        </div>
                        {% else %}
                            {{ form_widget(form.codePromo, {'attr':{'class':'d-none'}}) }}
                        {% endif %}

                        <!-- Submit Button -->
                        <div class="text-end mt-4">
                            <button type="submit" class="btn-next">
                                Continuer
                                <i class="fas fa-arrow-right ms-2"></i>
                            </button>
                        </div>

                        {{ form_end(form) }}
                    </div>

                    <!-- Bottom Info -->
                    <div class="text-center mt-4">
                        <p class="text-muted small mb-0">
                            <i class="fas fa-lock me-1"></i>
                            Vos données sont sécurisées et ne seront jamais partagées
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('bundles/colorpicker/js/jqColorPicker.min.js') }}"></script>
    <script src="{{ asset('assets/bo/vendor/jquery.filer/js/jquery.filer.min.js') }}"></script>
    <script src="{{ asset('assets/bo/js/helpers/hs.focus-state.js') }}"></script>
    <script src="{{ asset('assets/bo/js/components/hs.file-attachement.js') }}"></script>

    <script>
        $(document).ready(function () {
            // Gestion du color picker
            const colorFormInput = $('#add_order_colorTheme'); // Champ de formulaire Symfony
            const colorPickerNative = $('#color-picker-native'); // Color picker natif transparent
            const colorPreview = $('#color-preview');
            const colorValueDisplay = $('#color-value-display');

            // Initialiser le color picker natif avec la valeur du formulaire
            const initialColor = colorFormInput.val() || '#667eea';
            colorPickerNative.val(initialColor);

            function updateColorDisplay(color) {
                const colorUpper = color.toUpperCase();
                colorValueDisplay.val(colorUpper);
                colorPreview.css('background-color', color);
            }

            // Quand la couleur change dans le picker natif, synchroniser avec le formulaire
            colorPickerNative.on('input change', function() {
                const newColor = colorPickerNative.val();
                colorFormInput.val(newColor);
                updateColorDisplay(newColor);
            });

            // Initialiser l'affichage
            updateColorDisplay(initialColor);

            // Logo Upload Preview
            $("#add_order_logo").change(function () {
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $('#logo-preview-img').attr('src', e.target.result).show();
                        $('#logo-preview-area p, #logo-preview-area small').hide();
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            });

            // Debug - Promo code button click
            $('button[name="checkCodePromotion"]').on('click', function(e) {
                console.log('Bouton Appliquer cliqué');
                console.log('Code promo:', $('#add_order_codePromo').val());
            });

            // File Attachment Initialization (optional)
            if (typeof $.HSCore !== 'undefined') {
                try {
                    $.HSCore.components.HSFileAttachment.init('.js-file-attachment');
                    $.HSCore.helpers.HSFocusState.init();
                } catch(e) {
                    console.log('HSCore not available');
                }
            }
        });
    </script>
{% endblock %}