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

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('assets/styles/crop-bundle.css') }}">
{% endblock %}

{% block body %}
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{{ crop_title|default('Recadrage d\'image') }}</h4>
                </div>
                <div class="card-body">
                    <!-- Instructions -->
                    <div class="crop-instructions">
                        <h6>Instructions d'utilisation</h6>
                        <p>{{ crop_instructions|default('Utilisez les outils ci-dessous pour recadrer votre image aux bonnes dimensions.') }}</p>
                        <ul>
                            <li>Glissez-déposez votre image ou cliquez sur la zone pour la sélectionner</li>
                            <li>Utilisez les outils de zoom et rotation pour ajuster l'image</li>
                            <li>Déplacez et redimensionnez la zone de sélection</li>
                            <li>Prévisualisez le résultat en temps réel</li>
                            <li>Cliquez sur "Sauvegarder" pour finaliser</li>
                        </ul>
                    </div>

                    <!-- Zone de recadrage -->
                    <div id="{{ crop_type }}-cropper" class="crop-wrapper">
                        <!-- Dropzone pour le fichier -->
                        <div class="crop-dropzone" style="display: block;">
                            <div class="crop-dropzone-icon">
                                <i class="fas fa-cloud-upload-alt"></i>
                            </div>
                            <div class="crop-dropzone-text">
                                Glissez votre image ici ou cliquez pour sélectionner
                            </div>
                            <div class="crop-dropzone-hint">
                                Formats acceptés : JPEG, PNG, GIF, WebP
                                {% if crop_type == 'logo' %}
                                    • Max 2MB
                                {% else %}
                                    • Max 3MB
                                {% endif %}
                            </div>
                        </div>

                        <!-- Input file caché -->
                        <input type="file" class="crop-file-input" style="display: none;" 
                               accept="image/jpeg,image/jpg,image/png,image/gif,image/webp">

                        <!-- Conteneur de l'image -->
                        <div class="crop-container">
                            <img class="crop-image" style="display: none;" alt="Image à recadrer">
                        </div>

                        <!-- Contrôles de recadrage -->
                        <div class="crop-controls" style="display: none;">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-outline-secondary" 
                                                data-action="zoom-in" data-tooltip="Zoom avant">
                                            <i class="fas fa-search-plus"></i>
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary" 
                                                data-action="zoom-out" data-tooltip="Zoom arrière">
                                            <i class="fas fa-search-minus"></i>
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary" 
                                                data-action="rotate-left" data-tooltip="Rotation gauche">
                                            <i class="fas fa-undo"></i>
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary" 
                                                data-action="rotate-right" data-tooltip="Rotation droite">
                                            <i class="fas fa-redo"></i>
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary" 
                                                data-action="reset" data-tooltip="Réinitialiser">
                                            <i class="fas fa-refresh"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="btn-group float-end" role="group">
                                        <button type="button" class="btn btn-outline-secondary" 
                                                data-action="move" data-tooltip="Déplacer">
                                            <i class="fas fa-arrows-alt"></i>
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary" 
                                                data-action="crop" data-tooltip="Recadrer">
                                            <i class="fas fa-crop"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <div class="btn-group w-100" role="group">
                                        <button type="button" class="btn btn-secondary" 
                                                data-action="cancel">
                                            <i class="fas fa-times"></i> Annuler
                                        </button>
                                        <button type="button" class="btn btn-primary" 
                                                data-action="save">
                                            <i class="fas fa-save"></i> Sauvegarder
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Aperçu</h5>
                </div>
                <div class="card-body text-center">
                    <div class="crop-preview {{ crop_type }}">
                        <img style="display: none;" alt="Aperçu">
                        <div class="crop-preview-label">
                            {% if crop_type == 'logo' %}
                                Logo 200x200px
                            {% else %}
                                Bannière 1200x300px
                            {% endif %}
                        </div>
                    </div>
                    
                    <!-- Dimensions en temps réel -->
                    <div class="crop-dimensions">
                        <div class="dimension-item">
                            <span class="dimension-label">Largeur</span>
                            <span class="dimension-value">-</span>
                        </div>
                        <div class="dimension-item">
                            <span class="dimension-label">Hauteur</span>
                            <span class="dimension-value">-</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Navigation -->
            <div class="crop-navigation">
                <div class="nav-info">
                    <div class="nav-title">{{ crop_type|capitalize }}</div>
                    <div class="nav-subtitle">
                        {% if crop_type == 'logo' %}
                            Format carré recommandé
                        {% else %}
                            Format paysage 4:1
                        {% endif %}
                    </div>
                </div>
                <div class="nav-actions">
                    <a href="{{ path('app_dashboard_branding') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left"></i> Retour
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="module" src="{{ asset('assets/js/crop-bundle.js') }}"></script>
{% endblock %}