@extends('layouts.base')

@section('content')
    @section('breadcrumb')
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('front.index') }}">Tableau de bord</a></li>
                <li class="breadcrumb-item"><a href="{{ route('partner.applications') }}">Applications</a></li>
                <li class="breadcrumb-item"><a href="{{ route('partner.application.display-parameters', $application) }}">Paramètres d'affichage</a></li>
                <li class="breadcrumb-item"><a href="{{ route('partner.application.themes.index', $application) }}">Gestion du thème</a></li>
                <li class="breadcrumb-item active" aria-current="page">Modifier le thème</li>
            </ol>
        </nav>
    @endsection

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-lg-12">
                <div class="card shadow-sm">
                    <div class="card-header bg-primary text-black">
                        <h5 class="mb-0">
                            <i class="fas fa-edit me-2"></i>Modifier le thème
                        </h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('partner.application.themes.update', [$application, $theme]) }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')

                            <div class="mb-3">
                                <h6 class="text-primary mb-3">
                                    <i class="fas fa-tag me-2"></i>Nom du thème
                                    <span class="text-danger">*</span>
                                </h6>
                                <label for="name" class="form-label d-none">
                                    Nom du thème
                                </label>
                                <input type="text"
                                       class="form-control @error('name') is-invalid @enderror"
                                       id="name"
                                       name="name"
                                       value="{{ old('name', $theme->name) }}"
                                       required
                                       placeholder="Ex: Thème bleu, Thème principal...">
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">Donnez un nom descriptif à votre thème</small>
                            </div>

                            <div class="mb-3">
                                <h6 class="text-primary mb-3">
                                    <i class="fas fa-palette me-2"></i>Couleur primaire
                                    <span class="text-danger">*</span>
                                </h6>
                                <label for="primary_color" class="form-label d-none">
                                    Couleur primaire
                                </label>
                                <div class="d-flex align-items-center gap-3">
                                    <input type="color"
                                           class="form-control form-control-color @error('primary_color') is-invalid @enderror"
                                           id="primary_color"
                                           name="primary_color"
                                           value="{{ old('primary_color', $theme->primary_color) }}"
                                           required>
                                    <input type="text"
                                           class="form-control @error('primary_color') is-invalid @enderror"
                                           id="primary_color_text"
                                           value="{{ old('primary_color', $theme->primary_color) }}"
                                           placeholder="#007bff"
                                           maxlength="7">
                                </div>
                                @error('primary_color')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">Choisissez la couleur primaire de votre thème</small>
                            </div>

                            <div class="mb-3">
                                <h6 class="text-primary mb-3">
                                    <i class="fas fa-moon me-2"></i>Mode sombre
                                </h6>
                                <div class="form-check form-switch">
                                    <input class="form-check-input @error('dark_mode') is-invalid @enderror"
                                           type="checkbox"
                                           role="switch"
                                           id="dark_mode"
                                           name="dark_mode"
                                           value="1"
                                           {{ old('dark_mode', $theme->dark_mode) ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="dark_mode">
                                        Activer le mode sombre
                                    </label>
                                </div>
                                @error('dark_mode')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">Activez le mode sombre pour ce thème</small>
                            </div>
                            <div class="mb-3">
                                <h6 class="text-primary mb-3">
                                    <i class="fas fa-image me-2"></i>Logo
                                </h6>
                                <label for="logo" class="form-label d-none">
                                    Logo
                                </label>
                                @if($theme->getFirstMedia('logo'))
                                    <div class="mb-2">
                                        <img src="{{ $theme->getFirstMediaUrl('logo') }}" alt="Logo actuel" class="img-thumbnail" style="max-width: 200px; max-height: 100px;">
                                        <small class="d-block text-muted mt-1">Logo actuel</small>
                                    </div>
                                @endif
                                <input type="file" name="logo" id="logo" class="form-control" accept="image/png,image/jpeg,image/jpg,image/webp,image/svg+xml">
                                <small class="text-muted">Format recommandé : PNG, JPG ou SVG. Le logo sera automatiquement converti en WebP. Taille max : 2MB</small>
                                @error('logo')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <h6 class="text-primary mb-3">
                                    <i class="fas fa-image me-2"></i>Favicon
                                </h6>
                                <label for="favicon" class="form-label d-none">
                                    Favicon
                                </label>
                                @if($theme->getFirstMedia('favicon'))
                                    <div class="mb-2">
                                        <img src="{{ $theme->getFaviconUrl() }}" alt="Favicon actuel" class="img-thumbnail" style="max-width: 32px; max-height: 32px;">
                                        <small class="d-block text-muted mt-1">Favicon actuel</small>
                                    </div>
                                @endif
                                <input type="file" name="favicon" id="favicon" class="form-control" accept="image/*,.ico">
                                <small class="text-muted">Format recommandé : ICO, PNG ou SVG. Taille recommandée : 32x32px ou 16x16px. Taille max : 2MB</small>
                                @error('favicon')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-4">
                                <h6 class="text-primary mb-3">
                                    <i class="fas fa-heading me-2"></i>Police des titres (h1, h2)
                                </h6>
                                <small class="text-muted d-block mb-3">Police utilisée pour les titres de pages, carrousels, programmes, argumentaires, blocs, menu...</small>
                                <div class="row g-3">
                                    @php
                                        $defaultFont = $fonts ? array_key_first($fonts) : 'Arial';
                                        $selectedFont = old('secondary_font_family', $theme->secondary_font_family ?? $defaultFont);
                                    @endphp
                                    @foreach($fonts as $fontName => $fontData)
                                        <div class="col-md-6 col-lg-4">
                                            <div class="fiscalite-card font-family-card">
                                                <input type="radio"
                                                       name="secondary_font_family"
                                                       value="{{ $fontName }}"
                                                       id="secondary_font_{{ str_replace([' ', '-'], '_', $fontName) }}"
                                                       {{ $selectedFont == $fontName ? 'checked' : '' }}
                                                       class="font-family-radio"
                                                       data-font-path="{{ $fontData['path'] }}"
                                                       data-font-name="{{ $fontName }}">
                                                <label for="secondary_font_{{ str_replace([' ', '-'], '_', $fontName) }}" class="fiscalite-label">
                                                    <div class="d-flex align-items-center">
                                                        <div class="flex-grow-1 font-family-name"
                                                             data-font-name="{{ $fontName }}"
                                                             data-font-path="{{ $fontData['path'] }}">
                                                            <div class="fw-bold">{{ $fontName }}</div>
                                                        </div>
                                                        <div class="font-family-check">
                                                            <i class="fas fa-check-circle text-success"></i>
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                @error('secondary_font_family')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-4">
                                <h6 class="text-primary mb-3">
                                    <i class="fas fa-font me-2"></i>Police de texte
                                </h6>
                                <small class="text-muted d-block mb-3">Police utilisée pour tous les corps de texte, argumentaires, labels, infos programmes...</small>
                                <div class="row g-3">
                                    @php
                                        $selectedFont = old('primary_font_family', $theme->primary_font_family ?? $defaultFont);
                                    @endphp
                                    @foreach($fonts as $fontName => $fontData)
                                        <div class="col-md-6 col-lg-4">
                                            <div class="fiscalite-card font-family-card">
                                                <input type="radio"
                                                       name="primary_font_family"
                                                       value="{{ $fontName }}"
                                                       id="primary_font_{{ str_replace([' ', '-'], '_', $fontName) }}"
                                                       {{ $selectedFont == $fontName ? 'checked' : '' }}
                                                       class="font-family-radio"
                                                       data-font-path="{{ $fontData['path'] }}"
                                                       data-font-name="{{ $fontName }}">
                                                <label for="primary_font_{{ str_replace([' ', '-'], '_', $fontName) }}" class="fiscalite-label">
                                                    <div class="d-flex align-items-center">
                                                        <div class="flex-grow-1 font-family-name"
                                                             data-font-name="{{ $fontName }}"
                                                             data-font-path="{{ $fontData['path'] }}">
                                                            <div class="fw-bold">{{ $fontName }}</div>
                                                        </div>
                                                        <div class="font-family-check">
                                                            <i class="fas fa-check-circle text-success"></i>
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                @error('primary_font_family')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="d-flex justify-content-between mt-4">
                                <a href="{{ route('partner.application.themes.index', $application) }}" class="btn btn-outline-secondary">
                                    <i class="fas fa-times me-2"></i>Annuler
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>Enregistrer les modifications
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Aperçu à droite -->
            <div class="col-lg-6 d-none">
                <div class="card shadow-sm position-sticky" style="top: 100px;">
                    <div class="card-header bg-info text-black">
                        <h5 class="mb-0">
                            <i class="fas fa-eye me-2"></i>Aperçu en temps réel
                        </h5>
                    </div>
                    <div class="card-body p-0">
                        <iframe id="theme-preview"
                                src="{{ ($application->domain ?: 'https://www.mozartprestigepatrimoine.docker') }}/preview"
                                style="width: 100%; height: calc(100vh - 200px); min-height: 600px; border: none;"
                                loading="lazy">
                        </iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
.font-family-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.font-family-card {
    position: relative;
    min-height: 70px;
    height: 100%;
}

.fiscalite-label {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 15px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    box-sizing: border-box;
}

.fiscalite-label > * {
    pointer-events: none;
    width: 100%;
}

.font-family-check {
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 1.5rem;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.font-family-radio:checked + .fiscalite-label .font-family-check {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

.font-family-radio:checked + .fiscalite-label .font-family-check i {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.font-family-radio:checked + .fiscalite-label {
    border-color: #198754;
}

.font-family-card:has(.font-family-radio:checked) {
    border-color: #198754;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.15);
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const colorPicker = document.getElementById('primary_color');
    const colorText = document.getElementById('primary_color_text');

    // Fonction pour formater la couleur (ajouter # si nécessaire)
    function formatColor(value) {
        // Supprimer les espaces et convertir en majuscules
        value = value.replace(/\s/g, '').toUpperCase();

        // Si la valeur commence par #, la garder, sinon l'ajouter
        if (value.length > 0 && !value.startsWith('#')) {
            value = '#' + value;
        }

        // Limiter à 7 caractères (#RRGGBB)
        if (value.length > 7) {
            value = value.substring(0, 7);
        }

        return value;
    }

    // Fonction pour valider le format hexadécimal
    function isValidHexColor(value) {
        return /^#[0-9A-Fa-f]{6}$/.test(value);
    }


    // Synchroniser le color picker avec le champ texte
    colorPicker.addEventListener('input', function() {
        colorText.value = this.value.toUpperCase();
        colorText.classList.remove('is-invalid');
    });

    // Synchroniser le champ texte avec le color picker
    colorText.addEventListener('input', function() {
        let formattedValue = formatColor(this.value);
        this.value = formattedValue;

        // Mettre à jour le color picker si la valeur est valide
        if (isValidHexColor(formattedValue)) {
            colorPicker.value = formattedValue;
            this.classList.remove('is-invalid');
        } else if (formattedValue.length === 7) {
            // Si la longueur est bonne mais le format est invalide
            this.classList.add('is-invalid');
        } else {
            this.classList.remove('is-invalid');
        }
    });


    // Gérer le cas du collage (paste)
    colorText.addEventListener('paste', function(e) {
        setTimeout(function() {
            let pastedValue = colorText.value;
            let formattedValue = formatColor(pastedValue);
            colorText.value = formattedValue;

            if (isValidHexColor(formattedValue)) {
                colorPicker.value = formattedValue;
                colorText.classList.remove('is-invalid');
            } else if (formattedValue.length === 7) {
                colorText.classList.add('is-invalid');
            }
        }, 10);
    });

    // Charger toutes les polices et les appliquer aux cards
    const fontNameElements = document.querySelectorAll('.font-family-name');
    const loadedFonts = new Map();

    fontNameElements.forEach(element => {
        const fontName = element.getAttribute('data-font-name');
        const fontPath = element.getAttribute('data-font-path');

        if (fontName && fontPath) {
            // Créer un nom de police CSS-friendly
            const fontFamilyName = fontName.replace(/[^a-zA-Z0-9]/g, '');

            // Charger la police si elle n'est pas déjà chargée
            if (!loadedFonts.has(fontFamilyName)) {
                const style = document.createElement('style');
                style.id = 'font-' + fontFamilyName;
                style.textContent = `
                    @font-face {
                        font-family: '${fontFamilyName}';
                        src: url('${fontPath}') format('woff');
                        font-weight: normal;
                        font-style: normal;
                    }
                `;
                document.head.appendChild(style);
                loadedFonts.set(fontFamilyName, true);
            }

            // Appliquer la police au nom de la police dans la card
            element.style.fontFamily = `'${fontFamilyName}', sans-serif`;
        }
    });

    // Fonction pour mettre à jour l'aperçu de l'iframe
    function updatePreview() {
        const iframe = document.getElementById('theme-preview');
        if (!iframe) return;

        const baseUrl = iframe.src.split('?')[0].replace(/\/$/, '');
        const params = new URLSearchParams();

        // Récupérer la couleur primaire
        const primaryColor = document.getElementById('primary_color_text')?.value || document.getElementById('primary_color')?.value || '';
        if (primaryColor && isValidHexColor(primaryColor)) {
            params.append('uptheme_primary-color', primaryColor);
        }

        // Récupérer le mode sombre
        const darkMode = document.getElementById('dark_mode')?.checked || false;
        params.append('uptheme_dark-mode', darkMode ? '1' : '0');

        // Récupérer les polices
        const primaryFont = document.querySelector('input[name="primary_font_family"]:checked')?.value || '';
        if (primaryFont) {
            params.append('uptheme_primary-font-family', `"${primaryFont}"`);
        }

        const secondaryFont = document.querySelector('input[name="secondary_font_family"]:checked')?.value || '';
        if (secondaryFont) {
            params.append('uptheme_secondary-font-family', `"${secondaryFont}", serif`);
        }

        const tertiaryFont = document.querySelector('input[name="tertiary_font_family"]:checked')?.value || '';
        if (tertiaryFont) {
            params.append('uptheme_terciary-font-family', `"${tertiaryFont}"`);
        }

        const fourthFont = document.querySelector('input[name="fourth_font_family"]:checked')?.value || '';
        if (fourthFont) {
            params.append('uptheme_fourth-font-family', `"${fourthFont}"`);
        }

        // Mettre à jour l'URL de l'iframe
        const newUrl = baseUrl + (params.toString() ? '?' + params.toString() : '');
        if (iframe.src !== newUrl) {
            iframe.src = newUrl;
        }
    }

    // Mettre à jour l'aperçu lors des changements
    const updatePreviewDebounced = (() => {
        let timeout;
        return () => {
            clearTimeout(timeout);
            timeout = setTimeout(updatePreview, 300); // Délai de 300ms pour éviter trop de rafraîchissements
        };
    })();

           // Écouter les changements sur tous les champs du formulaire
           document.getElementById('primary_color')?.addEventListener('input', updatePreviewDebounced);
           document.getElementById('primary_color_text')?.addEventListener('input', updatePreviewDebounced);
           document.getElementById('dark_mode')?.addEventListener('change', updatePreviewDebounced);

    // Écouter les changements sur les radio buttons des polices
    document.querySelectorAll('input[type="radio"][name^="primary_font_family"], input[type="radio"][name^="secondary_font_family"], input[type="radio"][name^="tertiary_font_family"], input[type="radio"][name^="fourth_font_family"]').forEach(radio => {
        radio.addEventListener('change', updatePreviewDebounced);
    });

    // Mettre à jour l'aperçu au chargement initial
    setTimeout(updatePreview, 500);
});
</script>
@endpush