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

{% block title %}Upravit profil - Přehled poskytovatele{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dropzone@5.9.3/dist/min/dropzone.min.css" />
    <style>
        .profile-image-section {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .profile-image-container {
            display: flex;
            gap: 2rem;
            align-items: flex-start;
        }

        .current-profile-image {
            flex-shrink: 0;
        }

        .profile-image-preview {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #e0e0e0;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .profile-image-placeholder {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 3rem;
            font-weight: bold;
            border: 4px solid #e0e0e0;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .profile-image-upload {
            flex: 1;
        }

        .dropzone {
            border: 2px dashed #cbd5e0;
            border-radius: 8px;
            background: #f7fafc;
            padding: 2rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            min-height: 150px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .dropzone:hover {
            border-color: #667eea;
            background: #edf2f7;
        }

        .dropzone.dz-drag-hover {
            border-color: #667eea;
            background: #e6f2ff;
        }

        .dropzone .dz-message {
            margin: 0;
            color: #4a5568;
        }

        .dropzone .dz-message .upload-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        .dropzone .dz-message .upload-text {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .dropzone .dz-message .upload-hint {
            font-size: 0.9rem;
            color: #718096;
        }

        .dz-preview {
            display: none !important;
        }

        .upload-success-message {
            display: none;
            margin-top: 1rem;
            padding: 1rem;
            background: #c6f6d5;
            color: #22543d;
            border-radius: 6px;
            border-left: 4px solid #38a169;
        }

        .upload-error-message {
            display: none;
            margin-top: 1rem;
            padding: 1rem;
            background: #fed7d7;
            color: #742a2a;
            border-radius: 6px;
            border-left: 4px solid #e53e3e;
        }
    </style>
{% endblock %}

{% block body %}
    <section class="admin-header">
        <div class="container">
            <div class="admin-header-content">
                <div>
                    <h1>Upravit profil</h1>
                    <p>Aktualizujte své informace a hodinovou sazbu</p>
                </div>
                <div class="admin-header-actions">
                    <a href="{{ path('app_provider_dashboard') }}" class="btn btn-secondary">Zpět na dashboard</a>
                </div>
            </div>
        </div>
    </section>

    <section class="admin-content">
        <div class="container">
            <div class="admin-grid">
                <aside class="admin-sidebar">
                    <nav class="admin-nav">
                        <a href="{{ path('app_provider_dashboard') }}" class="admin-nav-item">
                            <span class="nav-icon">📊</span>
                            Přehled
                        </a>
                        <a href="{{ path('app_provider_profile_edit') }}" class="admin-nav-item active">
                            <span class="nav-icon">👤</span>
                            Upravit profil
                        </a>
                        <a href="{{ path('app_provider_services_manage') }}" class="admin-nav-item">
                            <span class="nav-icon">🛠️</span>
                            Spravovat služby
                        </a>
                        <a href="{{ path('app_provider_bookings') }}" class="admin-nav-item">
                            <span class="nav-icon">📅</span>
                            Moje rezervace
                        </a>
                        <a href="{{ path('app_staff_detail', {id: serviceProvider.id}) }}" class="admin-nav-item">
                            <span class="nav-icon">🏠</span>
                            Zobrazit profil
                        </a>
                    </nav>
                </aside>

                <main class="admin-main">
                    <div class="profile-image-section">
                        <h2>Profilový obrázek</h2>
                        <div class="profile-image-container">
                            <div class="current-profile-image">
                                {% if serviceProvider.profileImage %}
                                    <img id="currentProfileImage"
                                         src="{{ asset('uploads/profiles/' ~ serviceProvider.profileImage) }}"
                                         alt="{{ serviceProvider.fullName }}"
                                         class="profile-image-preview">
                                {% else %}
                                    <div id="currentProfileImage" class="profile-image-placeholder">
                                        {{ serviceProvider.initials }}
                                    </div>
                                {% endif %}
                            </div>
                            <div class="profile-image-upload">
                                <form action="{{ path('app_provider_upload_image') }}"
                                      class="dropzone"
                                      id="profileImageDropzone">
                                    <div class="dz-message">
                                        <div class="upload-icon">📸</div>
                                        <div class="upload-text">Přetáhněte sem profilový obrázek nebo klikněte pro výběr</div>
                                        <div class="upload-hint">Podporované formáty: JPG, PNG, GIF, WebP (Max 5MB)</div>
                                    </div>
                                </form>
                                <div class="upload-success-message" id="uploadSuccess">
                                    Profilový obrázek byl úspěšně nahrán!
                                </div>
                                <div class="upload-error-message" id="uploadError">
                                    <span id="uploadErrorText"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="admin-section">
                        <h2>Informace o profilu</h2>
                        {{ form_start(form, {'attr': {'class': 'admin-form'}}) }}
                            <div class="form-row">
                                <div class="form-group">
                                    {{ form_label(form.firstName) }}
                                    {{ form_widget(form.firstName) }}
                                    {{ form_errors(form.firstName) }}
                                </div>
                                <div class="form-group">
                                    {{ form_label(form.lastName) }}
                                    {{ form_widget(form.lastName) }}
                                    {{ form_errors(form.lastName) }}
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group">
                                    {{ form_label(form.phone) }}
                                    {{ form_widget(form.phone) }}
                                    {{ form_errors(form.phone) }}
                                    <small class="form-text">Volitelné - zobrazí se na vašem veřejném profilu</small>
                                </div>
                            </div>

                            <div class="form-group">
                                {{ form_label(form.bio) }}
                                {{ form_widget(form.bio) }}
                                {{ form_errors(form.bio) }}
                                <small class="form-text">{{ form.bio.vars.help }}</small>
                            </div>

                            <div class="form-row">
                                <div class="form-group">
                                    {{ form_label(form.yearsOfExperience) }}
                                    {{ form_widget(form.yearsOfExperience) }}
                                    {{ form_errors(form.yearsOfExperience) }}
                                </div>
                                <div class="form-group">
                                    {{ form_label(form.hourlyRate) }}
                                    {{ form_widget(form.hourlyRate) }}
                                    {{ form_errors(form.hourlyRate) }}
                                    <small class="form-text">{{ form.hourlyRate.vars.help }}</small>
                                </div>
                            </div>

                            <div class="form-group">
                                {{ form_label(form.bufferTime) }}
                                {{ form_widget(form.bufferTime) }}
                                {{ form_errors(form.bufferTime) }}
                                <small class="form-text">{{ form.bufferTime.vars.help }}</small>
                            </div>

                            <div class="form-actions">
                                <button type="submit" class="btn btn-primary btn-large">Uložit změny</button>
                                <a href="{{ path('app_provider_dashboard') }}" class="btn btn-secondary btn-large">Zrušit</a>
                            </div>
                        {{ form_end(form) }}
                    </div>
                </main>
            </div>
        </div>
    </section>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        // Load Dropzone dynamically and initialize when ready
        (function() {
            // Check if Dropzone is already loaded
            if (typeof Dropzone !== 'undefined' && window.Dropzone) {
                console.log('Dropzone already loaded');
                initializeDropzone();
                return;
            }

            // Create script element
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/dropzone@5.9.3/dist/min/dropzone.min.js';
            script.onload = function() {
                console.log('Dropzone script loaded');
                initializeDropzone();
            };
            script.onerror = function() {
                console.error('Failed to load Dropzone library');
            };
            document.head.appendChild(script);
        })();

        function initializeDropzone() {
            console.log('Initializing Dropzone...');

            if (typeof Dropzone === 'undefined' || !window.Dropzone) {
                console.error('Dropzone is not available');
                return;
            }

            Dropzone.autoDiscover = false;

            const dropzoneElement = document.getElementById('profileImageDropzone');
            if (!dropzoneElement) {
                console.error('Dropzone element not found');
                return;
            }

            const successMessage = document.getElementById('uploadSuccess');
            const errorMessage = document.getElementById('uploadError');
            const errorText = document.getElementById('uploadErrorText');
            const currentImageElement = document.getElementById('currentProfileImage');

            try {
                const myDropzone = new Dropzone(dropzoneElement, {
                url: '{{ path('app_provider_upload_image') }}',
                paramName: 'file',
                maxFiles: 1,
                maxFilesize: 5, // MB
                acceptedFiles: '.jpg,.jpeg,.png,.gif,.webp',
                addRemoveLinks: false,
                dictDefaultMessage: '',
                init: function() {
                    this.on('success', function(file, response) {
                        // Hide error message
                        errorMessage.style.display = 'none';

                        // Show success message
                        successMessage.style.display = 'block';

                        // Update the preview image
                        if (currentImageElement.tagName === 'IMG') {
                            currentImageElement.src = response.url;
                        } else {
                            // Replace placeholder with actual image
                            const newImg = document.createElement('img');
                            newImg.id = 'currentProfileImage';
                            newImg.src = response.url;
                            newImg.alt = '{{ serviceProvider.fullName }}';
                            newImg.className = 'profile-image-preview';
                            currentImageElement.parentNode.replaceChild(newImg, currentImageElement);
                        }

                        // Remove the file from dropzone
                        this.removeFile(file);

                        // Hide success message after 3 seconds
                        setTimeout(() => {
                            successMessage.style.display = 'none';
                        }, 3000);
                    });

                    this.on('error', function(file, errorResponse) {
                        // Hide success message
                        successMessage.style.display = 'none';

                        // Show error message
                        const errorMsg = typeof errorResponse === 'string'
                            ? errorResponse
                            : (errorResponse.error || 'Upload failed. Please try again.');

                        errorText.textContent = errorMsg;
                        errorMessage.style.display = 'block';

                        // Remove the file from dropzone
                        this.removeFile(file);

                        // Hide error message after 5 seconds
                        setTimeout(() => {
                            errorMessage.style.display = 'none';
                        }, 5000);
                    });

                    this.on('addedfile', function(file) {
                        // Hide any previous messages
                        successMessage.style.display = 'none';
                        errorMessage.style.display = 'none';
                    });
                }
            });

            console.log('Dropzone initialized successfully');
        } catch (error) {
            console.error('Error initializing Dropzone:', error);
        }
    }
    </script>
{% endblock %}