@extends('layouts.base')

@section('content')
    @section('breadcrumb')
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ $homeUrl }}">Accueil</a></li>
                <li class="breadcrumb-item"><a href="{{ route('partner.workflows.list') }}">Workflows</a></li>
                <li class="breadcrumb-item"><a href="{{ route('partner.workflows.show', $workflow) }}">{{ $workflow->name }}</a></li>
                <li class="breadcrumb-item"><a href="{{ route('partner.workflows.tasks.index', $workflow) }}">Étapes</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ $task ? 'Modifier' : 'Créer' }}</li>
            </ol>
        </nav>
    @endsection

    <div class="container-fluid py-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h1 class="h4 mb-1">
                    <i class="fas fa-{{ $task ? 'edit' : 'plus' }} me-2"></i>
                    {{ $task ? 'Modifier une étape' : 'Créer une étape' }}
                </h1>
                <p class="text-muted mb-0">Associer une étape au workflow et définir l'ordre et la hiérarchie.</p>
            </div>
            <a href="{{ route('partner.workflows.tasks.index', $workflow) }}" class="btn btn-outline-primary">
                <i class="fas fa-arrow-left me-2"></i>Retour aux étapes
            </a>
        </div>

        <div class="card shadow-sm">
            <div class="card-body">
                <form method="POST" action="{{ $task ? route('partner.workflows.tasks.update', [$workflow, $task]) : route('partner.workflows.tasks.store', $workflow) }}">
                    @csrf
                    @if($task)
                        @method('PUT')
                    @endif

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Nom</label>
                            <input type="text" name="name" class="form-control" value="{{ old('name', $task->name ?? '') }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Slug</label>
                            <input type="text" name="slug" class="form-control" value="{{ old('slug', $task->slug ?? '') }}" placeholder="Généré automatiquement si vide">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Type <span class="text-danger">*</span></label>
                            <select name="type" class="form-select" required>
                                <option value="">— Sélectionnez un type —</option>

                                {{-- Catégories --}}
                                <optgroup label="Catégories">
                                    @foreach(\App\Enums\TaskType::categories() as $category)
                                        <option value="{{ $category->value }}" @selected(old('type', $task->type?->value ?? '') === $category->value)>{{ $category->label() }}</option>
                                    @endforeach
                                </optgroup>

                                {{-- Autres types --}}
                                <optgroup label="Autres types">
                                    @foreach(\App\Enums\TaskType::cases() as $type)
                                        @if(!in_array($type, \App\Enums\TaskType::categories()))
                                            <option value="{{ $type->value }}" @selected(old('type', $task->type?->value ?? '') === $type->value)>{{ $type->label() }}</option>
                                        @endif
                                    @endforeach
                                </optgroup>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Parent (hiérarchie)</label>
                            <select name="task_id" class="form-select">
                                <option value="">Aucun</option>
                                @foreach($tasks as $parent)
                                    @if(!$task || $task->id !== $parent->id)
                                        <option value="{{ $parent->id }}" @selected(old('task_id', $task->task_id ?? '') == $parent->id)>{{ $parent->name }}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Délai SRU (en jours)</label>
                            <input type="number" name="sru_delay" class="form-control"
                                   value="{{ old('sru_delay', $task->sru_delay ?? '') }}"
                                   min="0" max="30" placeholder="Nombre de jours (0-30)">
                            <small class="text-muted">Nombre de jours entre 0 et 30</small>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Attribuer la tâche</label>
                            <select name="intended_for" class="form-select">
                                <option value="">—</option>
                                <option value="au_client" @selected(old('intended_for', $task->intended_for ?? '') === 'au_client')>Au client</option>
                                <option value="a_l_administration" @selected(old('intended_for', $task->intended_for ?? '') === 'a_l_administration')>À l'administration</option>
                            </select>
                        </div>

                        <div class="col-12">
                            <label class="form-label">Description client</label>
                            <textarea name="description_client" class="form-control" rows="2">{{ old('description_client', $task->description_client ?? '') }}</textarea>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Description admin</label>
                            <textarea name="description_admin" class="form-control" rows="2">{{ old('description_admin', $task->description_admin ?? '') }}</textarea>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Contenu HTML</label>
                            <div id="task-html-content-editor" style="height: 200px; background: white;"></div>
                            <input type="hidden" id="task-html-content-hidden" name="html_content" value="{{ old('html_content', $task->html_content ?? '') }}">
                            <small class="text-muted">Utilisez l'éditeur pour mettre en forme votre texte (gras, puces, liens, etc.)</small>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Contrat template</label>
                            <select name="contract_template_id" class="form-select">
                                <option value="">Aucun</option>
                                @foreach($documentTemplates as $template)
                                    <option value="{{ $template->id }}" @selected(old('contract_template_id', $task->contract_template_id ?? '') == $template->id)>
                                        {{ $template->name ?? 'Template #' . $template->id }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted">Template de document à utiliser pour générer le contrat lors de la validation de la tâche "Relecture et validation du dossier"</small>
                        </div>
                    </div>

                    <!-- Section Emails -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="card border-primary">
                                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0 test-primary"><i class="fas fa-envelope me-2"></i>Emails associés</h5>
                                    <div class="d-flex gap-2">
                                        @if(auth()->user()->isRole('ROLE_SUPPORT') && $task)
                                            <button type="button" class="btn btn-sm btn-warning" id="test-email-btn">
                                                <i class="fas fa-paper-plane me-1"></i>Tester l'email
                                            </button>
                                        @endif
                                        <button type="button" class="btn btn-sm btn-light" id="add-email-btn">
                                            <i class="fas fa-plus me-1"></i>Ajouter un email
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div id="emails-container">
                                        @if($task && $task->sendEmails->count() > 0)
                                            @foreach($task->sendEmails as $index => $email)
                                                @include('partner.workflows.tasks.partials.email-form', ['email' => $email, 'index' => $index, 'documentTemplates' => $documentTemplates])
                                            @endforeach
                                        @endif
                                    </div>
                                    <div id="no-emails-message" class="text-center text-muted py-3 {{ ($task && $task->sendEmails->count() > 0) ? 'd-none' : '' }}">
                                        <i class="fas fa-inbox fa-2x mb-2"></i>
                                        <p class="mb-0">Aucun email associé. Cliquez sur "Ajouter un email" pour en créer un.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end gap-2 mt-4">
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-save me-2"></i>{{ $task ? 'Enregistrer' : 'Créer' }}
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Section Test Email (visible uniquement pour les développeurs et en mode édition) -->
        @if(auth()->user()->isRole('ROLE_SUPPORT') && $task)
            <div class="card shadow-sm mt-4" id="test-email-section" style="display: none;">
                <div class="card-body">
                    <div class="card border-warning">
                        <div class="card-header bg-warning text-dark d-flex justify-content-between align-items-center">
                            <h5 class="mb-0"><i class="fas fa-flask me-2"></i>Test d'envoi d'email</h5>
                            <button type="button" class="btn btn-sm btn-outline-dark" id="close-test-email-btn">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <div class="card-body">
                            <form method="POST" action="{{ route('partner.workflows.tasks.test-email', [$workflow, $task]) }}" id="test-email-form">
                                @csrf
                                <div class="alert alert-info mb-3">
                                    <i class="fas fa-info-circle me-2"></i>
                                    <strong>Note :</strong> Sélectionnez une réservation existante pour tester l'envoi des emails associés à cette tâche.
                                </div>
                                <div class="row g-3">
                                    <div class="col-12">
                                        <label class="form-label">Réservation <span class="text-danger">*</span></label>
                                        <select name="reservation_id" class="form-select" required>
                                            <option value="">— Sélectionnez une réservation —</option>
                                            @foreach($reservations ?? [] as $reservation)
                                                <option value="{{ $reservation->id }}">
                                                    Réservation #{{ $reservation->id }}
                                                    @if($reservation->client)
                                                        - {{ $reservation->client->email }}
                                                        @if($reservation->client->firstname || $reservation->client->lastname)
                                                            ({{ trim($reservation->client->firstname . ' ' . $reservation->client->lastname) }})
                                                        @endif
                                                    @endif
                                                    @if($reservation->created_at)
                                                        - {{ $reservation->created_at->format('d/m/Y H:i') }}
                                                    @endif
                                                </option>
                                            @endforeach
                                        </select>
                                        <small class="text-muted">Sélectionnez une réservation liée à ce workflow pour tester l'envoi des emails</small>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-end gap-2 mt-3">
                                    <button type="button" class="btn btn-secondary" id="cancel-test-email-btn">Annuler</button>
                                    <button type="submit" class="btn btn-warning" id="submit-test-email-btn">
                                        <i class="fas fa-paper-plane me-2"></i>Envoyer le test
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Initialiser Quill pour l'éditeur de contenu HTML (sans validation obligatoire)
                const container = document.querySelector('#task-html-content-editor');
                const hiddenInput = document.getElementById('task-html-content-hidden');

                if (container) {
                    const quill = new Quill('#task-html-content-editor', {
                        theme: 'snow',
                        placeholder: 'Saisissez le contenu HTML... (optionnel)',
                        modules: {
                            toolbar: [
                                ['bold', 'italic', 'underline'],
                                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                                ['link'],
                                ['clean']
                            ]
                        }
                    });

                    // Charger le contenu existant si disponible
                    if (hiddenInput && hiddenInput.value) {
                        quill.root.innerHTML = hiddenInput.value;
                    }

                    // Synchroniser avec l'input caché lors de la soumission (sans validation)
                    const form = container.closest('form');
                    if (form && hiddenInput) {
                        form.addEventListener('submit', function(e) {
                            hiddenInput.value = quill.root.innerHTML;
                        });
                    }
                }

                // Gestion des emails dynamiques
                let emailCounter = {{ ($task && $task->sendEmails->count() > 0) ? $task->sendEmails->count() : 0 }};
                const emailsContainer = document.getElementById('emails-container');
                const noEmailsMessage = document.getElementById('no-emails-message');
                const addEmailBtn = document.getElementById('add-email-btn');

                // Options pour les selects (préparées côté serveur)
                const sendEmailTypes = @json(collect(\App\Enums\SendEmailType::cases())->map(fn($t) => ['value' => $t->value, 'label' => $t->label()])->toArray());
                const documentTemplates = @json($documentTemplates->map(fn($t) => ['id' => $t->id, 'name' => $t->name ?? 'Template #' . $t->id])->toArray());

                // Template HTML pour un nouvel email
                const emailTemplate = `
                    <div class="email-item card mb-3" data-email-index="new_\${emailCounter}">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="mb-0"><i class="fas fa-envelope me-2"></i>Email #\${emailCounter + 1}</h6>
                                <button type="button" class="btn btn-sm btn-danger remove-email-btn">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">Objet <span class="text-danger">*</span></label>
                                    <input type="text" name="send_emails[new_\${emailCounter}][object]" class="form-control" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Type <span class="text-danger">*</span></label>
                                    <select name="send_emails[new_\${emailCounter}][type]" class="form-select email-type-select" required>
                                        <option value="">— Sélectionnez un type —</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">De (From)</label>
                                    <input type="email" name="send_emails[new_\${emailCounter}][from]" class="form-control">
                                </div>
                                <div class="col-md-6 email-to-field" data-email-index="new_\${emailCounter}" style="display: none;">
                                    <label class="form-label">À (To) <span class="text-danger">*</span></label>
                                    <input type="email" name="send_emails[new_\${emailCounter}][to]" class="form-control email-to-input">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Copie cachée (BCC)</label>
                                    <textarea name="send_emails[new_\${emailCounter}][bcc]" class="form-control" rows="2" placeholder="Saisissez les emails séparés par des virgules ou des retours à la ligne"></textarea>
                                    <small class="text-muted">Séparez les emails par des virgules ou des retours à la ligne</small>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Document template</label>
                                    <select name="send_emails[new_\${emailCounter}][document_templates_id]" class="form-select email-template-select">
                                        <option value="">Aucun</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Texte <span class="text-danger">*</span></label>
                                    <textarea name="send_emails[new_\${emailCounter}][text]" class="form-control" rows="3" required></textarea>
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Signature</label>
                                    <textarea name="send_emails[new_\${emailCounter}][signature]" class="form-control" rows="2"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                `;

                // Fonction pour remplir les selects d'un email
                function populateEmailSelects(emailItem) {
                    const typeSelect = emailItem.querySelector('.email-type-select');
                    const templateSelect = emailItem.querySelector('.email-template-select');

                    // Remplir le select de type
                    if (typeSelect) {
                        sendEmailTypes.forEach(type => {
                            const option = document.createElement('option');
                            option.value = type.value;
                            option.textContent = type.label;
                            typeSelect.appendChild(option);
                        });

                        // Ajouter un listener pour gérer l'affichage du champ "À (To)"
                        typeSelect.addEventListener('change', function() {
                            toggleToField(emailItem, this.value);
                        });
                    }

                    // Remplir le select de document template
                    if (templateSelect) {
                        documentTemplates.forEach(template => {
                            const option = document.createElement('option');
                            option.value = template.id;
                            option.textContent = template.name;
                            templateSelect.appendChild(option);
                        });
                    }
                }

                // Fonction pour afficher/masquer le champ "À (To)" selon le type
                function toggleToField(emailItem, typeValue) {
                    const toField = emailItem.querySelector('.email-to-field');
                    const toInput = emailItem.querySelector('.email-to-input');

                    if (toField && toInput) {
                        if (typeValue === 'envoyer_a_un_tiers') {
                            toField.style.display = 'block';
                            toInput.setAttribute('required', 'required');
                        } else {
                            toField.style.display = 'none';
                            toInput.removeAttribute('required');
                            toInput.value = '';
                        }
                    }
                }

                // Ajouter un email
                addEmailBtn.addEventListener('click', function() {
                    const newEmail = emailTemplate.replace(/\$\{emailCounter\}/g, emailCounter);
                    emailsContainer.insertAdjacentHTML('beforeend', newEmail);
                    const newEmailItem = emailsContainer.querySelector(`[data-email-index="new_${emailCounter}"]`);
                    populateEmailSelects(newEmailItem);
                    emailCounter++;
                    noEmailsMessage.classList.add('d-none');
                });

                // Gérer l'affichage du champ "À (To)" pour les emails existants
                emailsContainer.addEventListener('change', function(e) {
                    if (e.target.classList.contains('email-type-select')) {
                        const emailItem = e.target.closest('.email-item');
                        toggleToField(emailItem, e.target.value);
                    }
                });

                // Initialiser l'affichage du champ "À (To)" pour les emails existants au chargement
                document.querySelectorAll('.email-type-select').forEach(select => {
                    const emailItem = select.closest('.email-item');
                    toggleToField(emailItem, select.value);
                });

                // Supprimer un email
                emailsContainer.addEventListener('click', function(e) {
                    if (e.target.closest('.remove-email-btn')) {
                        const emailItem = e.target.closest('.email-item');
                        emailItem.remove();

                        // Afficher le message si plus d'emails
                        if (emailsContainer.querySelectorAll('.email-item').length === 0) {
                            noEmailsMessage.classList.remove('d-none');
                        }
                    }
                });

                // Gestion du test d'email (visible uniquement pour les développeurs)
                const testEmailBtn = document.getElementById('test-email-btn');
                const testEmailSection = document.getElementById('test-email-section');
                const closeTestEmailBtn = document.getElementById('close-test-email-btn');
                const cancelTestEmailBtn = document.getElementById('cancel-test-email-btn');
                const testEmailForm = document.getElementById('test-email-form');

                if (testEmailBtn && testEmailSection) {
                    // Afficher la section de test
                    testEmailBtn.addEventListener('click', function() {
                        testEmailSection.style.display = 'block';
                        testEmailSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                    });

                    // Masquer la section de test
                    if (closeTestEmailBtn) {
                        closeTestEmailBtn.addEventListener('click', function() {
                            testEmailSection.style.display = 'none';
                        });
                    }

                    if (cancelTestEmailBtn) {
                        cancelTestEmailBtn.addEventListener('click', function() {
                            testEmailSection.style.display = 'none';
                        });
                    }
                }

                // Gestion de la soumission du formulaire de test
                // Utiliser la délégation d'événements pour s'assurer que le formulaire est bien attaché
                document.addEventListener('click', function(e) {
                    const submitBtn = e.target.closest('#submit-test-email-btn');
                    if (submitBtn) {
                        e.preventDefault();
                        e.stopPropagation();

                        const form = document.getElementById('test-email-form');
                        if (!form) {
                            console.error('Formulaire test-email-form introuvable');
                            return;
                        }

                        const reservationSelect = form.querySelector('select[name="reservation_id"]');
                        if (!reservationSelect || !reservationSelect.value) {
                            alert('Veuillez sélectionner une réservation');
                            reservationSelect?.focus();
                            return;
                        }

                        console.log('Soumission du formulaire de test d\'email', {
                            reservation_id: reservationSelect.value,
                            action: form.action
                        });

                        // Soumettre le formulaire
                        form.submit();
                    }
                });
            });
        </script>
    @endpush
@endsection