@extends('dashboard.layouts.app')

@section('title', 'Modifier le Sondage - ' . $sondage->titre . ' - UAC eservices')

@section('page-title', 'Modifier le Sondage')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('surveys.index') }}">Sondages</a></li>
    <li class="breadcrumb-item"><a href="{{ route('surveys.show', $sondage) }}">{{ $sondage->titre }}</a></li>
    <li class="breadcrumb-item active" aria-current="page">Modifier</li>
@endsection

{{-- @section('page-actions')

@endsection --}}

@section('content')
<!-- -------------------------------------------------------------- -->
<!-- Start Page Content -->
<!-- -------------------------------------------------------------- -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <a href="{{ route('surveys.show', $sondage) }}" class="btn btn-secondary">
                <i class="mdi mdi-arrow-left"></i> Retour aux détails
            </a>
            <div class="card-body">
                <h4 class="card-title">Modifier le sondage</h4>

                <form action="{{ route('surveys.update', $sondage) }}" method="POST" x-data="{
                    questions: @js($questions),
                    showPreview: false,

                    addQuestion() {
                        console.log('Adding question');
                        this.questions.push({
                            id: null,
                            texte: '',
                            type: 'TEXTE_LIBRE',
                            options: ['', '']
                        });
                    },

                    duplicateQuestion(index) {
                        console.log('Duplicating question at index:', index);
                        const originalQuestion = this.questions[index];
                        const duplicatedQuestion = {
                            id: null, // Nouvelle question
                            texte: originalQuestion.texte + ' (Copie)',
                            type: originalQuestion.type,
                            options: [...originalQuestion.options] // Copie des options
                        };
                        this.questions.splice(index + 1, 0, duplicatedQuestion);
                    },

                    removeQuestion(index) {
                        console.log('Removing question at index:', index);
                        if (this.questions.length > 1) {
                            this.questions.splice(index, 1);
                        }
                    },

                    addOption(questionIndex) {
                        console.log('Adding option to question:', questionIndex);
                        this.questions[questionIndex].options.push('');
                    },

                    removeOption(questionIndex, optionIndex) {
                        console.log('Removing option at index:', optionIndex, 'from question:', questionIndex);
                        if (this.questions[questionIndex].options.length > 2) {
                            this.questions[questionIndex].options.splice(optionIndex, 1);
                        }
                    },

                    duplicateOption(questionIndex, optionIndex) {
                        console.log('Duplicating option at index:', optionIndex, 'from question:', questionIndex);
                        const originalOption = this.questions[questionIndex].options[optionIndex];
                        const duplicatedOption = originalOption + ' (Copie)';
                        this.questions[questionIndex].options.splice(optionIndex + 1, 0, duplicatedOption);
                    },

                    sortOptions(questionIndex) {
                        console.log('Sorting options for question:', questionIndex);
                        this.questions[questionIndex].options.sort((a, b) => a.localeCompare(b));
                    },

                    formatDate(dateString) {
                        if (!dateString) return 'Non définie';
                        const date = new Date(dateString);
                        return date.toLocaleDateString('fr-FR');
                    },

                    debugFormData(event) {
                        console.log('Form data before submission:', this.questions);
                    }
                }" @submit="debugFormData($event)">
                    @csrf
                    @method('PUT')

                    <!-- Informations générales du sondage -->
                    <div class="row">
                        <div class="col-md-8">
                            <div class="mb-3">
                                <label for="titre" class="form-label">Titre du sondage <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('titre') is-invalid @enderror"
                                    id="titre" name="titre" value="{{ old('titre', $sondage->titre) }}" required>
                                @error('titre')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="description" class="form-label">Description <span class="text-danger">*</span></label>
                                <textarea class="form-control @error('description') is-invalid @enderror"
                                        id="description" name="description" rows="4" placeholder="Saisissez la description du sondage ici...">{{ old('description', $sondage->description) }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="statut" class="form-label">Statut <span class="text-danger">*</span></label>
                                <select class="form-select @error('statut') is-invalid @enderror" id="statut" name="statut" required>
                                    <option value="actif" {{ old('statut', $sondage->statut) === 'actif' ? 'selected' : '' }}>Actif</option>
                                    <option value="inactif" {{ old('statut', $sondage->statut) === 'inactif' ? 'selected' : '' }}>Inactif</option>
                                </select>
                                @error('statut')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="date_debut" class="form-label">Date de début <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('date_debut') is-invalid @enderror"
                                    id="date_debut" name="date_debut" value="{{ old('date_debut', $sondage->date_debut->format('Y-m-d')) }}" required>
                                @error('date_debut')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="date_fin" class="form-label">Date de fin <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('date_fin') is-invalid @enderror"
                                    id="date_fin" name="date_fin" value="{{ old('date_fin', $sondage->date_fin->format('Y-m-d')) }}" required>
                                @error('date_fin')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Utilisateurs cibles (optionnel)</label>
                                <small class="form-text text-muted">Sélectionnez les utilisateurs autorisés à voir et répondre au sondage. Si aucun rôle n'est sélectionné, tous les utilisateurs pourront y accéder.</small>
                                <div class="border rounded p-3" style="max-height: 200px; overflow-y: auto;">
                                    @foreach(\App\Models\Role::all() as $role)
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox"
                                                name="target_roles[]" value="{{ $role->id }}"
                                                id="role_{{ $role->id }}"
                                                {{ in_array($role->id, old('target_roles', $sondage->target_roles ?? [])) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="role_{{ $role->id }}">
                                                {{ $role->nom }}
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                                @error('target_roles')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Section Questions -->
                    <div class="card mt-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Questions du sondage</h5>
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-sm btn-outline-info"
                                        @click="showPreview = !showPreview" x-text="showPreview ? 'Masquer aperçu' : 'Aperçu'">
                                    <i class="mdi mdi-eye"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div id="questions-container">
                                <template x-for="(question, index) in questions" :key="index">
                                    <div class="question-item border rounded p-3 mb-3" x-data="{ type: question.type }">
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <h6>
                                                Question <span x-text="index + 1"></span>
                                                <span x-show="question.id" class="badge bg-info ms-2">Existante</span>
                                                <span x-show="!question.id" class="badge bg-success ms-2">Nouvelle</span>
                                            </h6>
                                            <div class="btn-group" role="group">
                                                <button type="button" class="btn btn-sm btn-outline-warning"
                                                        @click="duplicateQuestion(index)" title="Dupliquer">
                                                    <i class="mdi mdi-content-copy"></i>
                                                </button>
                                                <button type="button" class="btn btn-sm btn-outline-danger"
                                                        @click="removeQuestion(index)" x-show="questions.length > 1">
                                                    <i class="mdi mdi-delete"></i> Supprimer
                                                </button>
                                            </div>
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Texte de la question <span class="text-danger">*</span></label>
                                            <textarea class="form-control" :name="`questions[${index}][texte]`"
                                                    x-model="question.texte" rows="2" required></textarea>
                                            <input type="hidden" :name="`questions[${index}][id]`" x-model="question.id">
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Type de question <span class="text-danger">*</span></label>
                                            <select class="form-select" :name="`questions[${index}][type]`"
                                                    x-model="question.type" @change="type = $event.target.value" required>
                                                <option value="TEXTE_LIBRE">Texte libre</option>
                                                <option value="CHOIX_UNIQUE">Choix unique (radio)</option>
                                                <option value="CHOIX_MULTIPLE">Choix multiple (checkbox)</option>
                                            </select>
                                        </div>

                                        <!-- Options pour les questions à choix -->
                                        <div x-show="question.type !== 'TEXTE_LIBRE'" class="mb-3">
                                            <label class="form-label">Options de réponse</label>
                                            <div class="mb-2">
                                                <template x-for="(option, optionIndex) in question.options" :key="optionIndex">
                                                    <div class="input-group mb-2">
                                                        <span class="input-group-text">
                                                            <small x-show="question.id" class="text-info">Existante</small>
                                                            <small x-show="!question.id" class="text-success">Nouvelle</small>
                                                        </span>
                                                        <input type="text" class="form-control"
                                                            :name="`questions[${index}][options][${optionIndex}]`"
                                                            x-model="option" placeholder="Saisir une option" required>
                                                        <button type="button" class="btn btn-outline-warning"
                                                                @click="duplicateOption(index, optionIndex)" title="Dupliquer">
                                                            <i class="mdi mdi-content-copy"></i>
                                                        </button>
                                                        <button type="button" class="btn btn-outline-danger"
                                                                @click="removeOption(index, optionIndex)" x-show="question.options.length > 2">
                                                            <i class="mdi mdi-minus"></i>
                                                        </button>
                                                    </div>
                                                </template>
                                            </div>
                                            <div class="d-flex gap-2">
                                                <button type="button" class="btn btn-outline-primary btn-sm"
                                                        @click="addOption(index)">
                                                    <i class="mdi mdi-plus"></i> Ajouter une option
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>

                            <button type="button" class="btn btn-primary" @click="addQuestion()">
                                <i class="mdi mdi-plus"></i> Ajouter une question
                            </button>
                        </div>
                    </div>

                    <!-- Section Aperçu -->
                    <div x-show="showPreview" class="card mt-4" x-transition>
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="mdi mdi-eye"></i> Aperçu du sondage
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-8">
                                    <h4 x-text="$el.closest('form').querySelector('#titre').value || 'Titre du sondage'"></h4>
                                    <p class="text-muted" x-text="$el.closest('form').querySelector('#description').value || 'Description du sondage'"></p>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-2">
                                        <strong>Statut :</strong>
                                        <span class="badge" :class="$el.closest('form').querySelector('#statut').value === 'actif' ? 'bg-success' : 'bg-secondary'"
                                            x-text="$el.closest('form').querySelector('#statut').value === 'actif' ? 'Actif' : 'Inactif'">
                                        </span>
                                    </div>
                                    <div class="mb-2">
                                        <strong>Dates :</strong>
                                        <span x-text="formatDate($el.closest('form').querySelector('#date_debut').value) + ' - ' + formatDate($el.closest('form').querySelector('#date_fin').value)"></span>
                                    </div>
                                    <div class="mb-2">
                                        <strong>Questions :</strong> <span x-text="questions.length"></span>
                                    </div>
                                </div>
                            </div>

                            <hr>

                            <h5>Questions :</h5>
                            <div class="mt-3">
                                <template x-for="(question, index) in questions" :key="'preview-' + index">
                                    <div class="question-preview mb-4 p-3 border rounded">
                                        <div class="d-flex justify-content-between align-items-start mb-2">
                                            <h6>Question <span x-text="index + 1"></span></h6>
                                            <span class="badge" :class="question.type === 'TEXTE_LIBRE' ? 'bg-primary' : 'bg-info'"
                                                x-text="question.type === 'TEXTE_LIBRE' ? 'Texte libre' : (question.type === 'CHOIX_UNIQUE' ? 'Choix unique' : 'Choix multiple')">
                                            </span>
                                        </div>
                                        <p class="mb-2" x-text="question.texte || 'Texte de la question'"></p>

                                        <div x-show="question.type !== 'TEXTE_LIBRE'">
                                            <small class="text-muted">Options :</small>
                                            <ul class="list-unstyled ms-3">
                                                <template x-for="(option, optionIndex) in question.options" :key="'preview-option-' + index + '-' + optionIndex">
                                                    <li>
                                                        <i class="mdi" :class="question.type === 'CHOIX_UNIQUE' ? 'mdi-radiobox-blank' : 'mdi-checkbox-blank-outline'"></i>
                                                        <span x-text="option || 'Option ' + (optionIndex + 1)"></span>
                                                    </li>
                                                </template>
                                            </ul>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between mt-4">
                        <a href="{{ route('surveys.show', $sondage) }}" class="btn btn-secondary">
                            <i class="mdi mdi-arrow-left"></i> Annuler
                        </a>
                        <button type="submit" class="btn btn-success">
                            <i class="mdi mdi-content-save"></i> Enregistrer les modifications
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- -------------------------------------------------------------- -->
<!-- End PAge Content -->
<!-- -------------------------------------------------------------- -->
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('Edit survey page loaded');
});
</script>
@endsection