@extends('layouts.base')

@section('content')
    @section('breadcrumb')
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('partner.home') }}">Accueil</a></li>
                <li class="breadcrumb-item"><a href="{{ route('partner.display-parameters') }}">Paramètres d'affichage</a></li>
                <li class="breadcrumb-item"><a href="{{ route('partner.themes.index') }}">Gestion du thème</a></li>
                <li class="breadcrumb-item active" aria-current="page">Créer un thème</li>
            </ol>
        </nav>
    @endsection

    <div class="container-fluid py-4">
        <div class="row">
            <!-- Formulaire à gauche -->
            <div class="col-lg-6">
                <div class="card shadow-sm">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-plus me-2"></i>Créer un thème
                        </h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('partner.themes.store') }}" method="POST">
                            @csrf

                            <div class="mb-3">
                                <label for="name" class="form-label fw-bold">
                                    <i class="fas fa-tag me-1 text-primary"></i>
                                    Nom du thème
                                    <span class="text-danger">*</span>
                                </label>
                                <input type="text"
                                       class="form-control @error('name') is-invalid @enderror"
                                       id="name"
                                       name="name"
                                       value="{{ old('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">
                                <label for="primary_color" class="form-label fw-bold">
                                    <i class="fas fa-palette me-1 text-primary"></i>
                                    Couleur primaire
                                    <span class="text-danger">*</span>
                                </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', '#007bff') }}"
                                           required>
                                    <input type="text"
                                           class="form-control @error('primary_color') is-invalid @enderror"
                                           id="primary_color_text"
                                           value="{{ old('primary_color', '#007bff') }}"
                                           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">
                                <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') ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="dark_mode">
                                        <i class="fas fa-moon me-1 text-primary"></i>
                                        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-4">
                                <label class="form-label fw-bold mb-3">
                                    <i class="fas fa-font me-1 text-primary"></i>
                                    Police d'écriture principale
                                </label>
                                <div class="row g-3">
                                    @php
                                        $defaultFont = $fonts ? array_key_first($fonts) : 'Arial';
                                        $selectedFont = old('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="mb-4">
                                <label class="form-label fw-bold mb-3">
                                    <i class="fas fa-font me-1 text-primary"></i>
                                    Police secondaire
                                </label>
                                <div class="row g-3">
                                    @php
                                        $selectedFont = old('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">
                                <label class="form-label fw-bold mb-3">
                                    <i class="fas fa-font me-1 text-primary"></i>
                                    Police tertiaire
                                </label>
                                <div class="row g-3">
                                    @php
                                        $selectedFont = old('tertiary_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="tertiary_font_family"
                                                       value="{{ $fontName }}"
                                                       id="tertiary_font_{{ str_replace([' ', '-'], '_', $fontName) }}"
                                                       {{ $selectedFont == $fontName ? 'checked' : '' }}
                                                       class="font-family-radio"
                                                       data-font-path="{{ $fontData['path'] }}"
                                                       data-font-name="{{ $fontName }}">
                                                <label for="tertiary_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('tertiary_font_family')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-4">
                                <label class="form-label fw-bold mb-3">
                                    <i class="fas fa-font me-1 text-primary"></i>
                                    Police quaternaire
                                </label>
                                <div class="row g-3">
                                    @php
                                        $selectedFont = old('fourth_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="fourth_font_family"
                                                       value="{{ $fontName }}"
                                                       id="fourth_font_{{ str_replace([' ', '-'], '_', $fontName) }}"
                                                       {{ $selectedFont == $fontName ? 'checked' : '' }}
                                                       class="font-family-radio"
                                                       data-font-path="{{ $fontData['path'] }}"
                                                       data-font-name="{{ $fontName }}">
                                                <label for="fourth_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('fourth_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.themes.index') }}" class="btn btn-outline-primary">
                                    <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>Créer le thème
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Aperçu à droite -->
            <div class="col-lg-6">
                <div class="card shadow-sm position-sticky" style="top: 100px;">
                    <div class="card-header bg-info text-white">
                        <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);
    }

    // Fonction pour calculer la luminosité relative d'une couleur hex
    function getLuminance(hex) {
        // Convertir hex en RGB
        const r = parseInt(hex.slice(1, 3), 16);
        const g = parseInt(hex.slice(3, 5), 16);
        const b = parseInt(hex.slice(5, 7), 16);

        // Calculer la luminosité relative (formule standard)
        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
        return luminance;
    }

    // Fonction pour déterminer si le mode sombre devrait être activé
    function shouldEnableDarkMode(hex) {
        const luminance = getLuminance(hex);
        // Si la couleur primaire est claire (texte clair), le fond doit être sombre → mode sombre activé
        // Si la couleur primaire est sombre (texte sombre), le fond doit être clair → mode sombre désactivé
        return luminance >= 0.5;
    }

    // Fonction pour mettre à jour le mode sombre automatiquement
    function updateDarkModeAuto(hex) {
        if (isValidHexColor(hex)) {
            const darkModeCheckbox = document.getElementById('dark_mode');
            const shouldEnable = shouldEnableDarkMode(hex);

            // Ne mettre à jour que si l'utilisateur n'a pas modifié manuellement
            // On vérifie si c'est la première fois ou si c'est un changement de couleur
            if (darkModeCheckbox && !darkModeCheckbox.dataset.userModified) {
                darkModeCheckbox.checked = shouldEnable;
            }
        }
    }

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

    // 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');
            updateDarkModeAuto(formattedValue);
        } 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');
        }
    });

    // Marquer que l'utilisateur a modifié manuellement le mode sombre
    const darkModeCheckbox = document.getElementById('dark_mode');
    if (darkModeCheckbox) {
        darkModeCheckbox.addEventListener('change', function() {
            this.dataset.userModified = 'true';
        });
    }

    // 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');
                updateDarkModeAuto(formattedValue);
            } else if (formattedValue.length === 7) {
                colorText.classList.add('is-invalid');
            }
        }, 10);
    });

    // Mettre à jour le mode sombre au chargement de la page
    updateDarkModeAuto(colorPicker.value);

    // 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