@extends('admin.layouts.app')

@section('content')

<form method="POST" id="email-form" action="{{ route('admin.users.sendemail.post', $user->id) }}">
    @csrf

    <div class="row">
        <div class="col-xl-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
                <h4 class="mb-sm-0">{{ __('admin/users.page_titles.send_email') }}</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.users.index') }}">{{ __('admin/users.breadcrumb.users') }}</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.users.show', $user->id) }}">{{ $user->firstname }} {{ $user->lastname }}</a></li>
                        <li class="breadcrumb-item active">{{ __('admin/users.breadcrumb.send_email') }}</li>
                    </ol>
                </div>
            </div>

            <!-- Menu bar -->
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex align-items-center flex-wrap gap-2">
                            <div class="flex-grow-1">
                                <a href="{{ route('admin.users.show', $user->id) }}" class="btn btn-light me-2">
                                    <i class="ri-arrow-left-line me-1"></i>{{ __('admin/users.actions.back') }}
                                </a>
                                <button type="submit" class="btn btn-primary" id="sendemail" data-bs-loading-text="{{ __('admin/users.actions.sending') }}...">
                                    <i class="ri-mail-send-line me-1 align-bottom"></i> {{ __('admin/users.email.send_email_action') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- Contenu principal -->
                <div class="col-lg-8">
                    <!-- Composition de l'email -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/users.sections.email_composition') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="row mb-3">
                                <label class="col-sm-2 col-form-label">{{ __('admin/users.email.to') }} :</label>
                                <div class="col-sm-10">
                                    <input type="text" readonly class="form-control-plaintext"
                                        value="{{ $user->firstname }} {{ $user->lastname }} <{{ $user->email }}>">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="subject" class="col-sm-2 col-form-label">{{ __('admin/users.email.subject') }} <span class="text-danger">*</span></label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control @error('subject') is-invalid @enderror"
                                        id="subject" name="subject"
                                        placeholder="{{ __('admin/users.placeholders.subject') }}"
                                        value="{{ old('subject') }}" required>
                                    @error('subject')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="message" class="col-sm-2 col-form-label">{{ __('admin/users.email.message') }} <span class="text-danger">*</span></label>
                                <div class="col-sm-10">
                                    <x-admin.tinymce
                                        name="message"
                                        label="{{ __('admin/users.email.message') }}"
                                        preset="minimal"
                                        id="message"
                                        showlabel="false"
                                        required />
                                    @error('message')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror

                                    <div class="mt-3">
                                        <small class="text-muted d-block mb-2">{{ __('admin/users.help.templates_help') }}</small>
                                        <div class="d-flex gap-2 flex-wrap">
                                            <button type="button" class="btn btn-sm btn-soft-success" onclick="loadTemplate('welcome')">{{ __('admin/users.email_templates.welcome.name') }}</button>
                                            <button type="button" class="btn btn-sm btn-soft-warning" onclick="loadTemplate('reminder')">{{ __('admin/users.email_templates.reminder.name') }}</button>
                                            <button type="button" class="btn btn-sm btn-soft-info" onclick="loadTemplate('confirmation')">{{ __('admin/users.email_templates.confirmation.name') }}</button>
                                            <button type="button" class="btn btn-sm btn-soft-primary" onclick="loadTemplate('followup')">{{ __('admin/users.email_templates.followup.name') }}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-lg-4">
                    <!-- Destinataire -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/users.sections.recipient') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="avatar-sm me-3">
                                    <span class="avatar-title rounded-circle bg-primary-subtle text-primary">
                                        {{ strtoupper(substr($user->firstname, 0, 1)) }}{{ strtoupper(substr($user->lastname, 0, 1)) }}
                                    </span>
                                </div>
                                <div>
                                    <h6 class="mb-0">{{ $user->firstname }} {{ $user->lastname }}</h6>
                                    <small class="text-muted">{{ $user->email }}</small>
                                </div>
                            </div>

                            @if($user->registrations->count() > 0)
                            <div class="mb-3">
                                <small class="text-muted">{{ __('admin/users.registrations.registrations') }} :</small>
                                <div>{{ $user->registrations->where('status', 'confirmed')->count() }} {{ __('admin/users.stats.confirmed_registrations') }}</div>
                            </div>
                            @endif

                            @if($user->phone)
                            <div class="mb-3">
                                <small class="text-muted">{{ __('admin/users.form.phone') }} :</small>
                                <div>{{ $user->phone }}</div>
                            </div>
                            @endif

                            @if($user->profession)
                            <div class="mb-3">
                                <small class="text-muted">{{ __('admin/users.form.profession') }} :</small>
                                <div>{{ $user->profession }}</div>
                            </div>
                            @endif
                        </div>
                    </div>

                    <!-- Options d'envoi -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/users.sections.send_options') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">{{ __('admin/users.email.priority') }}</label>
                                <select class="form-select" name="priority">
                                    <option value="normal" {{ old('priority', 'normal') == 'normal' ? 'selected' : '' }}>{{ __('admin/users.email.normal') }}</option>
                                    <option value="high" {{ old('priority') == 'high' ? 'selected' : '' }}>{{ __('admin/users.email.high') }}</option>
                                    <option value="low" {{ old('priority') == 'low' ? 'selected' : '' }}>{{ __('admin/users.email.low') }}</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="copy_to_admin" id="copyswitch" value="1"
                                        {{ old('copy_to_admin') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="copyswitch">
                                        {{ __('admin/users.email.copy_to_admin') }} ({{ config('sfer.email') }})
                                    </label>
                                </div>
                                <small class="text-muted">{{ __('admin/users.help.copy_help') }}</small>
                            </div>

                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="auto_reply_notice" id="absenceswitch" value="1" {{ old('auto_reply_notice') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="absenceswitch">
                                        {{ __('admin/users.email.auto_reply_notice') }}
                                    </label>
                                </div>
                                <small class="text-muted">{{ __('admin/users.help.absence_help') }}</small>
                            </div>
                        </div>
                    </div>

                    <!-- Historique récent -->
                    @if($user->registrations->count() > 0)
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/users.sections.recent_trainings') }}</h5>
                        </div>
                        <div class="card-body">
                            @foreach($user->registrations->where('status', 'confirmed')->sortByDesc('registration_date')->take(3) as $registration)
                            <div class="d-flex align-items-center mb-2">
                                @if($registration->training->color)
                                <div class="avatar-xs me-2">
                                    <span class="avatar-title rounded" style="background-color: {{ $registration->training->color ?? '#f1f1f1' }};">
                                        <i class="ri-book-line text-white" style="font-size: 10px;"></i>
                                    </span>
                                </div>
                                @endif
                                <div class="flex-grow-1">
                                    <div class="fw-medium" style="font-size: 0.85em;">{{ Str::limit($registration->training->translate()->title ?? __('admin/users.registrations.training'), 25) }}</div>
                                    <small class="text-muted">{{ $registration->registration_date->format('d/m/Y') }}</small>
                                </div>
                            </div>
                            @endforeach

                            @if($user->registrations->where('status', 'confirmed')->count() > 3)
                            <small class="text-muted">
                                {{ __('admin/common.and') }} {{ $user->registrations->where('status', 'confirmed')->count() - 3 }} {{ __('admin/users.registrations.other') }}...
                            </small>
                            @endif
                        </div>
                    </div>
                    @endif

                    <!-- Aide -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/users.sections.tips') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-info mb-0">
                                <i class="ri-lightbulb-line me-2"></i>
                                <strong>{{ __('admin/users.best_practices.title') }}</strong>
                                <ul class="mb-0 mt-2">
                                    <li>{{ __('admin/users.best_practices.clear_subject') }}</li>
                                    <li>{{ __('admin/users.best_practices.personalize') }}</li>
                                    <li>{{ __('admin/users.best_practices.stay_professional') }}</li>
                                    <li>{{ __('admin/users.best_practices.check_spelling') }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- Modal de confirmation d'envoi -->
<x-admin.confirm-modal
    modal-id="confirmSendEmail"
    title="{{ __('admin/users.modals.confirm_send') }}"
    message="{{ __('admin/users.modals.sure_send_email') }}"
    confirm-text="{{ __('admin/users.email.send_email_action') }}"
    cancel-text="{{ __('admin/users.actions.cancel') }}"
    type="info"
    icon-url="https://cdn.lordicon.com/rhvddzym.json" />

<!-- Modal de changement de modèle -->
<x-admin.confirm-modal
    modal-id="templateModal"
    title="{{ __('admin/users.modals.replace_content') }}"
    message="{{ __('admin/users.modals.will_replace_content') }}"
    confirm-text="{{ __('admin/users.actions.replace') }}"
    cancel-text="{{ __('admin/users.actions.cancel') }}"
    type="warning" />

<!-- Modal d'erreurs de validation -->
<x-admin.warning-modal
    modal-id="validationErrorModal"
    title="{{ __('admin/users.validation.validation_errors') }}"
    close-text="{{ __('admin/users.actions.close') }}" />

@endsection

@push('script')
<script>
    // Fonction pour afficher la modal de warning (définie en premier)
    function showWarningModal(options = {}) {
        const modalId = options.modalId || 'warningModal';
        const modal = document.getElementById(modalId);

        if (!modal) {
            console.error('Modal not found:', modalId);
            return;
        }

        // Mettre à jour le titre
        if (options.title) {
            const titleElement = document.getElementById(`modal-title-${modalId}`);
            if (titleElement) titleElement.textContent = options.title;
        }

        // Mettre à jour le contenu
        const contentElement = document.getElementById(`modal-content-${modalId}`);
        if (contentElement && (options.message || options.errors)) {
            let content = '';

            if (options.message) {
                content += `<p class="text-muted fs-14 mb-3">${options.message}</p>`;
            }

            if (options.errors && options.errors.length > 0) {
                content += '<ul class="list-unstyled text-danger">';
                options.errors.forEach(error => {
                    content += `<li class="mb-2"><i class="ri-error-warning-line me-1"></i> ${error}</li>`;
                });
                content += '</ul>';
            }

            contentElement.innerHTML = content;
        }

        // Afficher la modal
        const bootstrapModal = new bootstrap.Modal(modal);
        bootstrapModal.show();
    }

    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('email-form');
        const submitBtn = document.getElementById('sendemail');
        const originalContent = submitBtn.innerHTML;

        function resetButton() {
            submitBtn.innerHTML = originalContent;
            submitBtn.disabled = false;
        }

        function showSpinner() {
            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status"></span>{{ __("admin/users.actions.sending") }}...';
            submitBtn.disabled = true;
        }

        // Validation du formulaire avec modal
        form.addEventListener('submit', function(e) {
            e.preventDefault();

            const subject = document.getElementById('subject').value.trim();

            // Récupérer le contenu depuis TinyMCE
            let message = '';
            if (typeof tinymce !== 'undefined') {
                const editor = tinymce.get('message');
                if (editor && editor.initialized) {
                    message = editor.getContent({format: 'text'}).trim();
                }
            }

            // Fallback si TinyMCE n'est pas disponible
            if (!message) {
                message = document.getElementById('message').value.trim();
            }

            // Collecter les erreurs de validation
            const errors = [];

            if (!subject) {
                errors.push(@json(__("admin/users.validation.subject_required")));
            } else if (subject.length < 3) {
                errors.push(@json(__("admin/users.validation.subject_min_length")));
            }

            if (!message) {
                errors.push(@json(__("admin/users.validation.message_required")));
            } else if (message.length < 10) {
                errors.push(@json(__("admin/users.validation.message_min_length")));
            }

            // Si des erreurs, afficher la modal de warning
            if (errors.length > 0) {
                showWarningModal({
                    modalId: 'validationErrorModal',
                    title: @json(__("admin/users.validation.validation_errors")),
                    message: @json(__("admin/users.validation.please_fix_errors")),
                    errors: errors
                });
                return false;
            }

            // Afficher la modal de confirmation avec message personnalisé
            const confirmMessage = `{{ __('admin/users.email.confirm_send_message') }} {{ $user->firstname }} {{ $user->lastname }} ?`;

            showConfirmModal({
                modalId: 'confirmSendEmail',
                title: @json(__("admin/users.modals.confirm_send")),
                message: confirmMessage,
                confirmText: @json(__("admin/users.email.send_email_action")),
                autoClose: false // La modal ne se ferme pas automatiquement
            }).then((result) => {
                // L'utilisateur a confirmé : procéder à l'envoi classique
                showSpinner();

                // Soumettre le formulaire
                form.submit();

                // Note: La modal se fermera automatiquement lors de la navigation vers la nouvelle page
            }).catch(() => {
                // L'utilisateur a annulé : ne rien faire
                // console.log('{{ __('admin/users.email.send_cancelled') }}');
            });

            // Restaurer le bouton en cas d'erreur
            setTimeout(() => {
                if (submitBtn.disabled) {
                    resetButton();
                }
            }, 5000);
        });
    });

    // Modèles d'emails prédéfinis
    function loadTemplate(type) {
        const subjectField = document.getElementById('subject');
        const userName = '{{ $user->firstname }}';

        const templates = {
            welcome: {
                subject: @json( __('admin/users.email_templates.welcome.subject') ),
                message: @json( __('admin/users.email_templates.welcome.content') ) + ' ' + @json( config('company.name', config('app.name')) )
            },
            reminder: {
                subject: @json( __('admin/users.email_templates.reminder.subject') ),
                message: @json( __('admin/users.email_templates.reminder.content') ) + ' ' + @json( config('company.name', config('app.name')) )
            },
            confirmation: {
                subject: @json( __('admin/users.email_templates.confirmation.subject') ),
                message: @json( __('admin/users.email_templates.confirmation.content') ) + ' ' + @json( config('company.name', config('app.name')) )
            },
            followup: {
                subject: @json( __('admin/users.email_templates.followup.subject') ),
                message: @json( __('admin/users.email_templates.followup.content') ) + ' ' + @json( config('company.name', config('app.name')) )
            }
        };

        if (templates[type]) {
            // Fonction pour définir le contenu TinyMCE
            function setTinyMCEContent(content) {
                // Convertir les retours à la ligne en paragraphes HTML
                const htmlContent = content
                    .split('\n\n')
                    .map(paragraph => paragraph.trim())
                    .filter(paragraph => paragraph.length > 0)
                    .map(paragraph => `<p>${paragraph.replace(/\n/g, '<br>')}</p>`)
                    .join('');

                if (typeof tinymce !== 'undefined') {
                    const editor = tinymce.get('message');
                    if (editor && editor.initialized) {
                        // Éditeur prêt, on peut définir le contenu
                        editor.setContent(htmlContent);
                        editor.focus();
                        return true;
                    } else if (editor) {
                        // Éditeur existe mais pas encore initialisé, attendre
                        setTimeout(() => setTinyMCEContent(content), 100);
                        return true;
                    }
                }

                // Fallback : utiliser la textarea directement
                const messageField = document.getElementById('message');
                if (messageField) {
                    messageField.value = content;
                    return true;
                }

                return false;
            }

            // Fonction pour définir le contenu
            function setContent() {
                // Remplir le sujet
                subjectField.value = templates[type].subject;

                // Remplir le contenu du message
                setTinyMCEContent(templates[type].message);
            }

            // Vérifier le contenu actuel
            let currentContent = '';
            let currentSubject = subjectField.value.trim();

            if (typeof tinymce !== 'undefined') {
                const editor = tinymce.get('message');
                if (editor && editor.initialized) {
                    currentContent = editor.getContent({
                        format: 'text'
                    }).trim();
                }
            }

            if (!currentContent) {
                const messageField = document.getElementById('message');
                if (messageField) {
                    currentContent = messageField.value.trim();
                }
            }

            // Si des champs sont remplis, demander confirmation avec la modal
            if (currentSubject || currentContent) {
                showConfirmModal({
                    modalId: 'templateModal',
                    title: '@json(__('admin/users.modals.replace_content'))',
                    message: '@json(__('admin/users.email.replace_current_content'))',
                    confirmText: '@json(__('admin/users.actions.replace'))',
                    autoClose: true // Cette modal peut se fermer automatiquement
                }).then(() => {
                    // L'utilisateur a confirmé : remplacer le contenu
                    setContent();
                }).catch(() => {
                    // L'utilisateur a annulé : ne rien faire
                    console.log('@json(__('admin/users.email.replacement_cancelled'))');
                });
            } else {
                // Pas de contenu, appliquer directement
                setContent();
            }
        }
    }

    // S'assurer que la fonction est disponible globalement
    window.loadTemplate = loadTemplate;
</script>
@endpush